feat(lib): add style file for users

qupaya · Apr 19, 2024 · f57be20 · f57be20
1 parent c13d8b5
commit f57be20
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/apps/demo-app/src/app/pages/select-sample/select-with-style/select-with-style.component.html b/apps/demo-app/src/app/pages/select-sample/select-with-style/select-with-style.component.html
@@ -6,6 +6,7 @@
   [multiple]="multiple()"
   [animationDelay]="250"
   [closeOnSelect]="!multiple()"
+  [panelOffsetY]="10"
   (open)="showAnimation.set($event)"
 >
   <div class="sk-label" [class.open]="showAnimation()" skSelectPlaceholder>

diff --git a/apps/demo-app/src/styles.css b/apps/demo-app/src/styles.css
@@ -1,10 +1,9 @@
-/* TODO: move to lib component*/
-@import '@angular/cdk/overlay-prebuilt.css';
+@import url('@angular/cdk/overlay-prebuilt.css');
 
 /* You can add global styles to this file, and also import other style files */
 :root {
   --sk-top-bar-height: 84px;
-  --sk-font-family: Montserrat, 'Helevetika Neue', sans-serif;
+  --sk-font-family: 'Montserrat', 'Helevetika Neue', sans-serif;
   --sk-primary-color-rgb: 252, 0, 84;
   --sk-primary-color: rgb(var(--sk-primary-color-rgb));
   --sk-secondary-color-rgb: 59, 61, 64;
@@ -20,12 +19,12 @@
 html,
 body {
   font-family: var(--sk-font-family);
-  color: rgb(255, 255, 255);
-  background: rgb(59, 61, 64);
+  color: rgb(255 255 255);
+  background: rgb(59 61 64);
   background: linear-gradient(
     149deg,
-    rgba(var(--sk-secondary-color-rgb), 1) 0%,
-    rgba(var(--sk-primary-color-rgb), 1) 100%
+    rgb(var(--sk-secondary-color-rgb) 1) 0%,
+    rgb(var(--sk-primary-color-rgb) 1) 100%
   );
   background-repeat: no-repeat;
   height: 100svh;

diff --git a/libs/sketch/src/lib/components/select/directives/overlay.directive.ts b/libs/sketch/src/lib/components/select/directives/overlay.directive.ts
@@ -44,6 +44,12 @@ export class CdkOverlayDirective {
   panelClass = input<string>('cdk-overlay-panel', {
     alias: 'skCdkOverlayPanelClass',
   });
+  offsetX = input<number>(0, {
+    alias: 'skCdkOverlayOffsetX',
+  });
+  offsetY = input<number>(0, {
+    alias: 'skCdkOverlayOffsetY',
+  });
   visible = output<boolean>({ alias: 'skCdkOverlayVisible' });
 
   private _overlayRef?: OverlayRef;
@@ -76,7 +82,8 @@ export class CdkOverlayDirective {
       .flexibleConnectedTo(this._relatedElement)
       .withPositions(this.connectedPositions())
       .withPush(true)
-      .withDefaultOffsetY(10)
+      .withDefaultOffsetX(this.offsetX())
+      .withDefaultOffsetY(this.offsetY())
       .withFlexibleDimensions(false);
 
     this._overlayRef = this.overlay.create({

diff --git a/libs/sketch/src/lib/components/select/select.component.html b/libs/sketch/src/lib/components/select/select.component.html
@@ -3,6 +3,8 @@
   [skCdkOverlay]="overlay"
   [skCdkOverlayShow]="panelIsVisible()"
   [skCdkOverlayDisposeDelay]="animationDelay()"
+  [skCdkOverlayOffsetX]="panelOffsetX()"
+  [skCdkOverlayOffsetY]="panelOffsetY()"
   [tabIndex]="0"
   (click)="togglePanel(true)"
   (keydown.enter)="togglePanel(!this.panelIsVisible())"

diff --git a/libs/sketch/src/lib/components/select/select.component.ts b/libs/sketch/src/lib/components/select/select.component.ts
@@ -39,6 +39,8 @@ export class SelectComponent<T> implements ControlValueAccessor {
 
   animationDelay = input(0);
   closeOnSelect = input(false);
+  panelOffsetX = input(0);
+  panelOffsetY = input(0);
   multiple = input(false, { transform: booleanAttribute });
 
   readonly autoFocus = signal(true);