From f57be205dc11e0e2ee68a5c1c2ac35d1c6b4f837 Mon Sep 17 00:00:00 2001
From: patrickjahr <patrick@qupaya.com>
Date: Fri, 19 Apr 2024 08:15:40 +0200
Subject: [PATCH] feat(lib): add style file for users

---
 .../select-with-style.component.html                |  1 +
 apps/demo-app/src/styles.css                        | 13 ++++++-------
 .../select/directives/overlay.directive.ts          |  9 ++++++++-
 .../src/lib/components/select/select.component.html |  2 ++
 .../src/lib/components/select/select.component.ts   |  2 ++
 5 files changed, 19 insertions(+), 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
index a7def21..64ab84b 100644
--- 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
index 8d63845..edf6cc9 100644
--- 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
index db9ab66..63aaca9 100644
--- 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
index a19b3d4..01b67ce 100644
--- 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
index c1ce7a1..9d2308f 100644
--- 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);