feat(lib): add style file for users

qupaya · Apr 30, 2024 · af92c80 · af92c80
1 parent 36af251
commit af92c80
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 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,14 +1,15 @@
-/* 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;
   --sk-secondary-color: rgb(var(--sk-secondary-color-rgb));
+  --sk-light-color-rgb: 255, 255, 255;
+  --sk-gray-color-rgb: 59, 61, 64;
 }
 
 * {
@@ -20,12 +21,12 @@
 html,
 body {
   font-family: var(--sk-font-family);
-  color: rgb(255, 255, 255);
-  background: rgb(59, 61, 64);
+  color: rgb(var(--sk-light-color-rgb));
+  background: rgb(var(--sk-secondary-color-rgb));
   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)) 0%,
+    rgb(var(--sk-primary-color-rgb)) 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
@@ -9,7 +9,7 @@ import {
 import { CdkPortal } from '@angular/cdk/portal';
 import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
-import { fromEvent, merge } from 'rxjs';
+import { debounceTime, fromEvent, merge } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 export const DEFAULT_POSITIONS: ConnectedPosition[] = [
@@ -26,7 +26,7 @@ export class CdkOverlayDirective {
   private readonly window = inject(DOCUMENT)?.defaultView;
 
   private readonly windowResize = this.window
-    ? toSignal(fromEvent(this.window, 'resize'))
+    ? toSignal(fromEvent(this.window, 'resize').pipe(debounceTime(500)))
     : undefined;
 
   portal = input<CdkPortal | undefined>(undefined, { alias: 'skCdkOverlay' });
@@ -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);