@semantic-components/ui 0.66.0 → 0.68.0

package/esm2022/lib/components/select/select-list.js

@@ -1,4 +1,3 @@
-import { Combobox } from '@angular/aria/combobox';
 import { Listbox } from '@angular/aria/listbox';
 import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
 import { cn } from '../../utils';
@@ -8,10 +7,7 @@ export class ScSelectList {
     listbox = inject(Listbox);
     values = computed(() => this.listbox.values(), ...(ngDevMode ? [{ debugName: "values" }] : []));
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    combobox = inject(Combobox);
-    class = computed(() => cn('bg-popover text-popover-foreground ring-foreground/10 relative z-50 mt-1 flex w-full max-h-44 min-w-36 flex-col overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1', this.combobox.expanded()
-        ? 'opacity-100 visible transition-[max-height,opacity,visibility] duration-150 ease-out'
-        : 'max-h-0 opacity-0 invisible transition-[max-height,opacity,visibility] duration-150 ease-in [transition-delay:0s,0s,150ms]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('flex h-full flex-col overflow-x-hidden overflow-y-auto', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectList, isStandalone: true, selector: "div[scSelectList]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-list" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.Listbox }], ngImport: i0, template: `
     <ng-content />

package/esm2022/lib/components/select/select-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-list.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;;AAgBjC,MAAM,OAAO,YAAY;IACN,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,kDAAC,CAAC;IAC/C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE1B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,mLAAmL,EACnL,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;QACtB,CAAC,CAAC,sFAAsF;QACxF,CAAC,CAAC,4HAA4H,EAChI,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAfS,YAAY;2FAAZ,YAAY,kWAXb;;GAET;;2FASU,YAAY;kBAdxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,OAAO,EAAE,EAAE;oBACX,QAAQ,EAAE;;GAET;oBACD,cAAc,EAAE,CAAC,OAAO,CAAC;oBACzB,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { Combobox } from '@angular/aria/combobox';\nimport { Listbox } from '@angular/aria/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scSelectList]',\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  hostDirectives: [Listbox],\n  host: {\n    'data-slot': 'select-list',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectList {\n  private readonly listbox = inject(Listbox);\n  readonly values = computed(() => this.listbox.values());\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly combobox = inject(Combobox);\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-popover text-popover-foreground ring-foreground/10 relative z-50 mt-1 flex w-full max-h-44 min-w-36 flex-col overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1',\n      this.combobox.expanded()\n        ? 'opacity-100 visible transition-[max-height,opacity,visibility] duration-150 ease-out'\n        : 'max-h-0 opacity-0 invisible transition-[max-height,opacity,visibility] duration-150 ease-in [transition-delay:0s,0s,150ms]',\n      this.classInput(),\n    ),\n  );\n}\n"]}
+{"version":3,"file":"select-list.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;;AAgBjC,MAAM,OAAO,YAAY;IACN,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,kDAAC,CAAC;IAC/C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,wDAAwD,EACxD,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAVS,YAAY;2FAAZ,YAAY,kWAXb;;GAET;;2FASU,YAAY;kBAdxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,OAAO,EAAE,EAAE;oBACX,QAAQ,EAAE;;GAET;oBACD,cAAc,EAAE,CAAC,OAAO,CAAC;oBACzB,IAAI,EAAE;wBACJ,WAAW,EAAE,aAAa;wBAC1B,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { Listbox } from '@angular/aria/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scSelectList]',\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  hostDirectives: [Listbox],\n  host: {\n    'data-slot': 'select-list',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectList {\n  private readonly listbox = inject(Listbox);\n  readonly values = computed(() => this.listbox.values());\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'flex h-full flex-col overflow-x-hidden overflow-y-auto',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/select/select-popup.js

@@ -0,0 +1,32 @@
+import { Combobox } from '@angular/aria/combobox';
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSelectPopup {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    combobox = inject(Combobox);
+    class = computed(() => cn('bg-popover text-popover-foreground ring-foreground/10 relative z-50 mt-1 flex w-full max-h-44 min-w-36 flex-col rounded-lg p-1 shadow-md ring-1', this.combobox.expanded()
+        ? 'opacity-100 visible transition-[max-height,opacity,visibility] duration-150 ease-out'
+        : 'max-h-0 opacity-0 invisible transition-[max-height,opacity,visibility] duration-150 ease-in [transition-delay:0s,0s,150ms]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectPopup, isStandalone: true, selector: "div[scSelectPopup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-popup" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectPopup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSelectPopup]',
+                    imports: [],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'select-popup',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-popup.js.map

package/esm2022/lib/components/select/select-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-popup.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-popup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAejC,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE1B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,iJAAiJ,EACjJ,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;QACtB,CAAC,CAAC,sFAAsF;QACxF,CAAC,CAAC,4HAA4H,EAChI,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAbS,aAAa;2FAAb,aAAa,uTAVd;;GAET;;2FAQU,aAAa;kBAbzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,OAAO,EAAE,EAAE;oBACX,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { Combobox } from '@angular/aria/combobox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scSelectPopup]',\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'select-popup',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectPopup {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly combobox = inject(Combobox);\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-popover text-popover-foreground ring-foreground/10 relative z-50 mt-1 flex w-full max-h-44 min-w-36 flex-col rounded-lg p-1 shadow-md ring-1',\n      this.combobox.expanded()\n        ? 'opacity-100 visible transition-[max-height,opacity,visibility] duration-150 ease-out'\n        : 'max-h-0 opacity-0 invisible transition-[max-height,opacity,visibility] duration-150 ease-in [transition-delay:0s,0s,150ms]',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/select/select-separator.js

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSelectSeparator {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('bg-border -mx-1 my-1 h-px', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectSeparator, isStandalone: true, selector: "[scSelectSeparator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-separator", "role": "separator", "aria-orientation": "horizontal" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scSelectSeparator]',
+                    host: {
+                        'data-slot': 'select-separator',
+                        role: 'separator',
+                        'aria-orientation': 'horizontal',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-separator.js.map

package/esm2022/lib/components/select/select-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-separator.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAWjC,MAAM,OAAO,iBAAiB;IACnB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,2BAA2B,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACnD,CAAC;uGALS,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAT7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,IAAI,EAAE;wBACJ,WAAW,EAAE,kBAAkB;wBAC/B,IAAI,EAAE,WAAW;wBACjB,kBAAkB,EAAE,YAAY;wBAChC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scSelectSeparator]',\n  host: {\n    'data-slot': 'select-separator',\n    role: 'separator',\n    'aria-orientation': 'horizontal',\n    '[class]': 'class()',\n  },\n})\nexport class ScSelectSeparator {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('bg-border -mx-1 my-1 h-px', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/select/select-trigger-icon.js

@@ -1,9 +1,11 @@
-import { computed, Directive, input } from '@angular/core';
+import { Combobox } from '@angular/aria/combobox';
+import { computed, Directive, inject, input } from '@angular/core';
 import { cn } from '../../utils';
 import * as i0 from "@angular/core";
 export class ScSelectTriggerIcon {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
-    class = computed(() => cn('text-muted-foreground pointer-events-none size-4 shrink-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    combobox = inject(Combobox);
+    class = computed(() => cn('text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-150', this.combobox.expanded() && 'rotate-180', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectTriggerIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectTriggerIcon, isStandalone: true, selector: "svg[scSelectTriggerIcon]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-trigger-icon" }, properties: { "class": "class()" } }, ngImport: i0 });
 }

package/esm2022/lib/components/select/select-trigger-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger-icon.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-trigger-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,mBAAmB;IACrB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,2DAA2D,EAC3D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAP/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'svg[scSelectTriggerIcon]',\n  host: {\n    'data-slot': 'select-trigger-icon',\n    '[class]': 'class()',\n  },\n})\nexport class ScSelectTriggerIcon {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'text-muted-foreground pointer-events-none size-4 shrink-0',\n      this.classInput(),\n    ),\n  );\n}\n"]}
+{"version":3,"file":"select-trigger-icon.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-trigger-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,mBAAmB;IACrB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAE1B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,6FAA6F,EAC7F,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAAI,YAAY,EACxC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAXS,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAP/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { Combobox } from '@angular/aria/combobox';\nimport { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'svg[scSelectTriggerIcon]',\n  host: {\n    'data-slot': 'select-trigger-icon',\n    '[class]': 'class()',\n  },\n})\nexport class ScSelectTriggerIcon {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly combobox = inject(Combobox);\n\n  protected readonly class = computed(() =>\n    cn(\n      'text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-150',\n      this.combobox.expanded() && 'rotate-180',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/select/select-trigger.js

@@ -1,5 +1,4 @@
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, ViewEncapsulation, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, inject, input, ViewEncapsulation, } from '@angular/core';
 import { SiChevronDownIcon } from '@semantic-icons/lucide-icons';
 import { cn } from '../../utils';
 import { ScSelectInput } from './select-input';
@@ -7,16 +6,15 @@ import { ScSelectTriggerIcon } from './select-trigger-icon';
 // Lazy import to avoid circular dependency
 import { ScSelect } from './select';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/overlay";
 export class ScSelectTrigger {
-    overlayOrigin = inject(CdkOverlayOrigin);
+    elementRef = inject(ElementRef);
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     select = inject(forwardRef(() => ScSelect));
     placeholder = computed(() => this.select.placeholder(), ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    class = computed(() => cn('border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors select-none outline-none focus-visible:ring-3 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors select-none outline-none focus-visible:ring-3 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectTrigger, isStandalone: true, selector: "div[scSelectTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-trigger" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectTrigger, isStandalone: true, selector: "div[scSelectTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-trigger" }, properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
     <input
       scSelectInput
@@ -40,7 +38,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     />
     <svg scSelectTriggerIcon siChevronDownIcon aria-hidden="true"></svg>
   `,
-                    hostDirectives: [CdkOverlayOrigin],
                     host: {
                         'data-slot': 'select-trigger',
                         '[class]': 'class()',

package/esm2022/lib/components/select/select-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAsC5D,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;;AAjBpC,MAAM,OAAO,eAAe;IACjB,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACzC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,SAAS,GAAG,KAAK,CAAS,EAAE,sDAAI,KAAK,EAAE,YAAY,GAAG,CAAC;IAE/C,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpD,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,uDAAC,CAAC;IAE9C,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,+jBAA+jB,EAC/jB,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAbS,eAAe;2FAAf,eAAe,sfAjBhB;;;;;;;;GAQT,4DATS,aAAa,oFAAE,mBAAmB,wFAAE,iBAAiB;;2FAkBpD,eAAe;kBApB3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,OAAO,EAAE,CAAC,aAAa,EAAE,mBAAmB,EAAE,iBAAiB,CAAC;oBAChE,QAAQ,EAAE;;;;;;;;GAQT;oBACD,cAAc,EAAE,CAAC,gBAAgB,CAAC;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,gBAAgB;wBAC7B,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiChevronDownIcon } from '@semantic-icons/lucide-icons';\nimport { cn } from '../../utils';\n\nimport { ScSelectInput } from './select-input';\nimport { ScSelectTriggerIcon } from './select-trigger-icon';\n\n@Component({\n  selector: 'div[scSelectTrigger]',\n  imports: [ScSelectInput, ScSelectTriggerIcon, SiChevronDownIcon],\n  template: `\n    <ng-content />\n    <input\n      scSelectInput\n      [attr.aria-label]=\"ariaLabel()\"\n      [placeholder]=\"placeholder()\"\n    />\n    <svg scSelectTriggerIcon siChevronDownIcon aria-hidden=\"true\"></svg>\n  `,\n  hostDirectives: [CdkOverlayOrigin],\n  host: {\n    'data-slot': 'select-trigger',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectTrigger {\n  readonly overlayOrigin = inject(CdkOverlayOrigin);\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly ariaLabel = input<string>('', { alias: 'aria-label' });\n\n  private readonly select = inject(forwardRef(() => ScSelect));\n  readonly placeholder = computed(() => this.select.placeholder());\n\n  protected readonly class = computed(() =>\n    cn(\n      'border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors select-none outline-none focus-visible:ring-3 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5',\n      this.classInput(),\n    ),\n  );\n}\n\n// Lazy import to avoid circular dependency\nimport { ScSelect } from './select';\n"]}
+{"version":3,"file":"select-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqC5D,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAjBpC,MAAM,OAAO,eAAe;IACjB,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IACzD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,SAAS,GAAG,KAAK,CAAS,EAAE,sDAAI,KAAK,EAAE,YAAY,GAAG,CAAC;IAE/C,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpD,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,uDAAC,CAAC;IAE9C,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,gkBAAgkB,EAChkB,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAbS,eAAe;2FAAf,eAAe,gcAhBhB;;;;;;;;GAQT,4DATS,aAAa,oFAAE,mBAAmB,wFAAE,iBAAiB;;2FAiBpD,eAAe;kBAnB3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,OAAO,EAAE,CAAC,aAAa,EAAE,mBAAmB,EAAE,iBAAiB,CAAC;oBAChE,QAAQ,EAAE;;;;;;;;GAQT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,gBAAgB;wBAC7B,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiChevronDownIcon } from '@semantic-icons/lucide-icons';\nimport { cn } from '../../utils';\n\nimport { ScSelectInput } from './select-input';\nimport { ScSelectTriggerIcon } from './select-trigger-icon';\n\n@Component({\n  selector: 'div[scSelectTrigger]',\n  imports: [ScSelectInput, ScSelectTriggerIcon, SiChevronDownIcon],\n  template: `\n    <ng-content />\n    <input\n      scSelectInput\n      [attr.aria-label]=\"ariaLabel()\"\n      [placeholder]=\"placeholder()\"\n    />\n    <svg scSelectTriggerIcon siChevronDownIcon aria-hidden=\"true\"></svg>\n  `,\n  host: {\n    'data-slot': 'select-trigger',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectTrigger {\n  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly ariaLabel = input<string>('', { alias: 'aria-label' });\n\n  private readonly select = inject(forwardRef(() => ScSelect));\n  readonly placeholder = computed(() => this.select.placeholder());\n\n  protected readonly class = computed(() =>\n    cn(\n      'border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 flex h-8 w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors select-none outline-none focus-visible:ring-3 has-[[aria-disabled=true]]:cursor-not-allowed has-[[aria-disabled=true]]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5',\n      this.classInput(),\n    ),\n  );\n}\n\n// Lazy import to avoid circular dependency\nimport { ScSelect } from './select';\n"]}

package/esm2022/lib/components/select/select.js

@@ -1,7 +1,6 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Combobox } from '@angular/aria/combobox';
-import { ComboboxPopupContainer } from '@angular/aria/combobox';
+import { Combobox, ComboboxPopupContainer } from '@angular/aria/combobox';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, contentChild, effect, inject, input, model, ViewEncapsulation, } from '@angular/core';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
 import { cn } from '../../utils';
@@ -18,10 +17,10 @@ export class ScSelect {
     trigger = contentChild(ScSelectTrigger, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     content = contentChild(ScSelectList, { ...(ngDevMode ? { debugName: "content" } : {}), descendants: true });
     selectPortal = contentChild.required(ScSelectPortal);
-    origin = computed(() => this.trigger()?.overlayOrigin, ...(ngDevMode ? [{ debugName: "origin" }] : []));
+    origin = computed(() => this.trigger()?.elementRef, ...(ngDevMode ? [{ debugName: "origin" }] : []));
     values = computed(() => this.content()?.values() ?? [], ...(ngDevMode ? [{ debugName: "values" }] : []));
     displayValue = computed(() => this.value() || this.placeholder(), ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    class = computed(() => cn('relative', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    class = computed(() => cn('relative min-w-36 w-fit', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
     combobox = inject(Combobox);
     constructor() {
         effect(() => signalSetFn(this.combobox.readonly[SIGNAL], true));
@@ -38,6 +37,7 @@ export class ScSelect {
     <ng-template ngComboboxPopupContainer>
       @if (origin(); as origin) {
         <ng-template
+          cdkConnectedOverlay
           [cdkConnectedOverlay]="{
             origin,
             usePopover: 'inline',
@@ -67,6 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <ng-template ngComboboxPopupContainer>
       @if (origin(); as origin) {
         <ng-template
+          cdkConnectedOverlay
           [cdkConnectedOverlay]="{
             origin,
             usePopover: 'inline',

package/esm2022/lib/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Combobox } from '@angular/aria/combobox';\nimport { ComboboxPopupContainer } from '@angular/aria/combobox';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { cn } from '../../utils';\nimport { ScSelectList } from './select-list';\nimport { ScSelectPortal } from './select-portal';\nimport { ScSelectTrigger } from './select-trigger';\n\n@Component({\n  selector: 'div[scSelect]',\n  exportAs: 'scSelect',\n  imports: [Combobox, ComboboxPopupContainer, OverlayModule, NgTemplateOutlet],\n  hostDirectives: [\n    {\n      directive: Combobox,\n    },\n  ],\n  template: `\n    <ng-content />\n    <ng-template ngComboboxPopupContainer>\n      @if (origin(); as origin) {\n        <ng-template\n          [cdkConnectedOverlay]=\"{\n            origin,\n            usePopover: 'inline',\n            matchWidth: true,\n          }\"\n          [cdkConnectedOverlayOpen]=\"true\"\n        >\n          <ng-container [ngTemplateOutlet]=\"selectPortal().templateRef\" />\n        </ng-template>\n      }\n    </ng-template>\n  `,\n  host: {\n    'data-slot': 'select',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelect implements FormValueControl<string> {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly placeholder = input<string>('');\n  readonly value = model<string>('');\n\n  private readonly trigger = contentChild(ScSelectTrigger);\n  private readonly content = contentChild(ScSelectList, {\n    descendants: true,\n  });\n  protected readonly selectPortal = contentChild.required(ScSelectPortal);\n\n  readonly origin = computed(() => this.trigger()?.overlayOrigin);\n  readonly values = computed(() => this.content()?.values() ?? []);\n  readonly displayValue = computed(() => this.value() || this.placeholder());\n  protected readonly class = computed(() => cn('relative', this.classInput()));\n\n  private readonly combobox = inject(Combobox);\n\n  constructor() {\n    effect(() => signalSetFn(this.combobox.readonly[SIGNAL], true));\n\n    // Sync listbox selection → model\n    effect(() => {\n      const vals = this.values();\n      const selected = vals.length > 0 ? String(vals[0]) : '';\n      this.value.set(selected);\n    });\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { Combobox, ComboboxPopupContainer } from '@angular/aria/combobox';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';\nimport type { FormValueControl } from '@angular/forms/signals';\nimport { cn } from '../../utils';\nimport { ScSelectList } from './select-list';\nimport { ScSelectPortal } from './select-portal';\nimport { ScSelectTrigger } from './select-trigger';\n\n@Component({\n  selector: 'div[scSelect]',\n  exportAs: 'scSelect',\n  imports: [Combobox, ComboboxPopupContainer, OverlayModule, NgTemplateOutlet],\n  hostDirectives: [\n    {\n      directive: Combobox,\n    },\n  ],\n  template: `\n    <ng-content />\n    <ng-template ngComboboxPopupContainer>\n      @if (origin(); as origin) {\n        <ng-template\n          cdkConnectedOverlay\n          [cdkConnectedOverlay]=\"{\n            origin,\n            usePopover: 'inline',\n            matchWidth: true,\n          }\"\n          [cdkConnectedOverlayOpen]=\"true\"\n        >\n          <ng-container [ngTemplateOutlet]=\"selectPortal().templateRef\" />\n        </ng-template>\n      }\n    </ng-template>\n  `,\n  host: {\n    'data-slot': 'select',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelect implements FormValueControl<string> {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly placeholder = input<string>('');\n  readonly value = model<string>('');\n\n  private readonly trigger = contentChild(ScSelectTrigger);\n  private readonly content = contentChild(ScSelectList, {\n    descendants: true,\n  });\n  protected readonly selectPortal = contentChild.required(ScSelectPortal);\n\n  readonly origin = computed(() => this.trigger()?.elementRef);\n  readonly values = computed(() => this.content()?.values() ?? []);\n  readonly displayValue = computed(() => this.value() || this.placeholder());\n  protected readonly class = computed(() =>\n    cn('relative min-w-36 w-fit', this.classInput()),\n  );\n\n  protected readonly combobox = inject(Combobox);\n\n  constructor() {\n    effect(() => signalSetFn(this.combobox.readonly[SIGNAL], true));\n\n    // Sync listbox selection → model\n    effect(() => {\n      const vals = this.values();\n      const selected = vals.length > 0 ? String(vals[0]) : '';\n      this.value.set(selected);\n    });\n  }\n}\n"]}

package/esm2022/lib/components/slider/index.js

@@ -0,0 +1,2 @@
+export * from './slider';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["export * from './slider';\n"]}

package/esm2022/lib/components/slider/slider.js

@@ -0,0 +1,46 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { afterNextRender, computed, Directive, ElementRef, inject, input, } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_FIELD } from '../field';
+import * as i0 from "@angular/core";
+export class ScSlider {
+    field = inject(SC_FIELD, { optional: true });
+    fallbackId = inject(_IdGenerator).getId('sc-slider-');
+    el = inject(ElementRef);
+    idInput = input('', { ...(ngDevMode ? { debugName: "idInput" } : {}), alias: 'id' });
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    id = computed(() => this.idInput() || this.field?.id() || this.fallbackId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    class = computed(() => cn('w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50', '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]', '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted', '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary', '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow', '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow', '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', 'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            this.updateFillPercent();
+        });
+    }
+    onInput() {
+        this.updateFillPercent();
+    }
+    updateFillPercent() {
+        const el = this.el.nativeElement;
+        const min = parseFloat(el.min) || 0;
+        const max = parseFloat(el.max) || 100;
+        const value = parseFloat(el.value) || 0;
+        const percent = ((value - min) / (max - min)) * 100;
+        el.style.setProperty('--fill-percent', `${percent}%`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSlider, isStandalone: true, selector: "input[scSlider]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range", "data-slot": "slider" }, listeners: { "input": "onInput()" }, properties: { "attr.id": "id()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSlider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scSlider]',
+                    host: {
+                        type: 'range',
+                        'data-slot': 'slider',
+                        '[attr.id]': 'id()',
+                        '[class]': 'class()',
+                        '(input)': 'onInput()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=slider.js.map

package/esm2022/lib/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,eAAe,EACf,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAYpC,MAAM,OAAO,QAAQ;IACF,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACtD,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC,CAAC;IAE9D,OAAO,GAAG,KAAK,CAAC,EAAE,oDAAI,KAAK,EAAE,IAAI,GAAG,CAAC;IACrC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,EAAE,GAAG,QAAQ,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,8CAC5D,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,uGAAuG,EACvG,0OAA0O,EAC1O,6FAA6F,EAC7F,wGAAwG,EACxG,uQAAuQ,EACvQ,sFAAsF,EACtF,+MAA+M,EAC/M,kFAAkF,EAClF,yHAAyH,EACzH,0FAA0F,EAC1F,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF;QACE,eAAe,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAES,OAAO;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QACjC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;QACtC,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAEpD,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;IACxD,CAAC;uGA9CU,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBAVpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,IAAI,EAAE;wBACJ,IAAI,EAAE,OAAO;wBACb,WAAW,EAAE,QAAQ;wBACrB,WAAW,EAAE,MAAM;wBACnB,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport {\n  afterNextRender,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field';\n\n@Directive({\n  selector: 'input[scSlider]',\n  host: {\n    type: 'range',\n    'data-slot': 'slider',\n    '[attr.id]': 'id()',\n    '[class]': 'class()',\n    '(input)': 'onInput()',\n  },\n})\nexport class ScSlider {\n  private readonly field = inject(SC_FIELD, { optional: true });\n  private readonly fallbackId = inject(_IdGenerator).getId('sc-slider-');\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n\n  readonly idInput = input('', { alias: 'id' });\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly id = computed(\n    () => this.idInput() || this.field?.id() || this.fallbackId,\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:opacity-50',\n      '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--primary)_var(--fill-percent,0%),var(--muted)_var(--fill-percent,0%))]',\n      '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n      '[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-primary',\n      '[&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:transition-shadow',\n      '[&::-webkit-slider-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:transition-shadow',\n      '[&::-moz-range-thumb:hover]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      'focus-visible:outline-none [&:focus-visible::-webkit-slider-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      '[&:focus-visible::-moz-range-thumb]:shadow-[0_0_0_3px_oklch(from_var(--ring)_l_c_h/0.5)]',\n      this.classInput(),\n    ),\n  );\n\n  constructor() {\n    afterNextRender(() => {\n      this.updateFillPercent();\n    });\n  }\n\n  protected onInput() {\n    this.updateFillPercent();\n  }\n\n  private updateFillPercent() {\n    const el = this.el.nativeElement;\n    const min = parseFloat(el.min) || 0;\n    const max = parseFloat(el.max) || 100;\n    const value = parseFloat(el.value) || 0;\n    const percent = ((value - min) / (max - min)) * 100;\n\n    el.style.setProperty('--fill-percent', `${percent}%`);\n  }\n}\n"]}

package/esm2022/lib/components/time-picker/index.js

@@ -0,0 +1,10 @@
+export { SC_TIME_PICKER, ScTimePicker } from './time-picker';
+export { ScTimePickerInput } from './time-picker-input';
+export { ScTimePickerHoursInput } from './time-picker-hours-input';
+export { ScTimePickerMinutesInput } from './time-picker-minutes-input';
+export { ScTimePickerSecondsInput } from './time-picker-seconds-input';
+export { ScTimePickerPeriod } from './time-picker-period';
+export { ScTimePickerPeriodAM } from './time-picker-period-am';
+export { ScTimePickerPeriodPM } from './time-picker-period-pm';
+export { ScTimePickerSeparator } from './time-picker-separator';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/time-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { SC_TIME_PICKER, ScTimePicker } from './time-picker';\nexport type { ScTimeValue, ScTimeFormat, ScTimePeriod } from './time-picker';\nexport { ScTimePickerInput } from './time-picker-input';\nexport { ScTimePickerHoursInput } from './time-picker-hours-input';\nexport { ScTimePickerMinutesInput } from './time-picker-minutes-input';\nexport { ScTimePickerSecondsInput } from './time-picker-seconds-input';\nexport { ScTimePickerPeriod } from './time-picker-period';\nexport { ScTimePickerPeriodAM } from './time-picker-period-am';\nexport { ScTimePickerPeriodPM } from './time-picker-period-pm';\nexport { ScTimePickerSeparator } from './time-picker-separator';\n"]}

package/esm2022/lib/components/time-picker/time-picker-hours-input.js

@@ -0,0 +1,67 @@
+import { computed, Directive, inject } from '@angular/core';
+import { ScTimePickerInput } from './time-picker-input';
+import * as i0 from "@angular/core";
+export class ScTimePickerHoursInput {
+    input = inject(ScTimePickerInput);
+    timePicker = this.input.timePicker;
+    max = computed(() => this.timePicker.format() === '12h' ? 12 : 23, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    min = computed(() => this.timePicker.format() === '12h' ? 1 : 0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    displayValue = computed(() => {
+        const val = this.timePicker.value();
+        if (!val)
+            return '00';
+        const num = this.timePicker.format() === '12h' ? val.hours % 12 || 12 : val.hours;
+        return num.toString().padStart(2, '0');
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    onInput(event) {
+        const el = event.target;
+        const value = el.value.replace(/\D/g, '');
+        const num = parseInt(value, 10);
+        if (!isNaN(num)) {
+            this.timePicker.setHours(Math.min(num, this.max()));
+        }
+    }
+    onBlur() {
+        this.input.focused.set(false);
+        const val = this.timePicker.value();
+        if (val) {
+            const clamped = Math.max(this.min(), Math.min(val.hours, this.max()));
+            if (clamped !== val.hours) {
+                this.timePicker.setHours(clamped);
+            }
+        }
+    }
+    onFocus(event) {
+        this.input.focused.set(true);
+        event.target.select();
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+            this.timePicker.setHours(val.hours >= this.max() ? this.min() : val.hours + 1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+            this.timePicker.setHours(val.hours <= this.min() ? this.max() : val.hours - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerHoursInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ScTimePickerHoursInput, isStandalone: true, selector: "input[scTimePickerHoursInput]", host: { listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "focus": "onFocus($event)" }, properties: { "value": "displayValue()", "attr.aria-label": "\"Hours\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerHoursInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scTimePickerHoursInput]',
+                    host: {
+                        '[value]': 'displayValue()',
+                        '[attr.aria-label]': '"Hours"',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focus)': 'onFocus($event)',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=time-picker-hours-input.js.map

package/esm2022/lib/components/time-picker/time-picker-hours-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-hours-input.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/time-picker/time-picker-hours-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { computed, Directive, inject } from '@angular/core';\nimport { ScTimePickerInput } from './time-picker-input';\n\n@Directive({\n  selector: 'input[scTimePickerHoursInput]',\n  host: {\n    '[value]': 'displayValue()',\n    '[attr.aria-label]': '\"Hours\"',\n    '(input)': 'onInput($event)',\n    '(blur)': 'onBlur()',\n    '(keydown)': 'onKeydown($event)',\n    '(focus)': 'onFocus($event)',\n  },\n})\nexport class ScTimePickerHoursInput {\n  private readonly input = inject(ScTimePickerInput);\n\n  private readonly timePicker = this.input.timePicker;\n\n  private readonly max = computed(() =>\n    this.timePicker.format() === '12h' ? 12 : 23,\n  );\n\n  private readonly min = computed(() =>\n    this.timePicker.format() === '12h' ? 1 : 0,\n  );\n\n  protected readonly displayValue = computed(() => {\n    const val = this.timePicker.value();\n    if (!val) return '00';\n\n    const num =\n      this.timePicker.format() === '12h' ? val.hours % 12 || 12 : val.hours;\n    return num.toString().padStart(2, '0');\n  });\n\n  protected onInput(event: Event): void {\n    const el = event.target as HTMLInputElement;\n    const value = el.value.replace(/\\D/g, '');\n    const num = parseInt(value, 10);\n\n    if (!isNaN(num)) {\n      this.timePicker.setHours(Math.min(num, this.max()));\n    }\n  }\n\n  protected onBlur(): void {\n    this.input.focused.set(false);\n    const val = this.timePicker.value();\n    if (val) {\n      const clamped = Math.max(this.min(), Math.min(val.hours, this.max()));\n      if (clamped !== val.hours) {\n        this.timePicker.setHours(clamped);\n      }\n    }\n  }\n\n  protected onFocus(event: FocusEvent): void {\n    this.input.focused.set(true);\n    (event.target as HTMLInputElement).select();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const val = this.timePicker.value() || { hours: 0, minutes: 0 };\n      this.timePicker.setHours(\n        val.hours >= this.max() ? this.min() : val.hours + 1,\n      );\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const val = this.timePicker.value() || { hours: 0, minutes: 0 };\n      this.timePicker.setHours(\n        val.hours <= this.min() ? this.max() : val.hours - 1,\n      );\n    }\n  }\n}\n"]}

package/esm2022/lib/components/time-picker/time-picker-input.js

@@ -0,0 +1,26 @@
+import { computed, Directive, inject, input, signal } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_TIME_PICKER } from './time-picker';
+import * as i0 from "@angular/core";
+export class ScTimePickerInput {
+    timePicker = inject(SC_TIME_PICKER);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    class = computed(() => cn('w-10 rounded-md border border-input bg-background px-2 py-1.5 text-center text-sm tabular-nums', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScTimePickerInput, isStandalone: true, selector: "input[scTimePickerInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "time-picker-input", "type": "text", "inputmode": "numeric" }, properties: { "class": "class()", "disabled": "timePicker.disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scTimePickerInput]',
+                    host: {
+                        'data-slot': 'time-picker-input',
+                        type: 'text',
+                        inputmode: 'numeric',
+                        '[class]': 'class()',
+                        '[disabled]': 'timePicker.disabled()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=time-picker-input.js.map

package/esm2022/lib/components/time-picker/time-picker-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-input.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/time-picker/time-picker-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAY/C,MAAM,OAAO,iBAAiB;IACnB,UAAU,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEpC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,OAAO,GAAG,MAAM,CAAC,KAAK,mDAAC,CAAC;IAEd,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,gGAAgG,EAChG,qEAAqE,EACrE,iDAAiD,EACjD,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAdS,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAV7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,MAAM;wBACZ,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,uBAAuB;qBACtC;iBACF","sourcesContent":["import { computed, Directive, inject, input, signal } from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_TIME_PICKER } from './time-picker';\n\n@Directive({\n  selector: 'input[scTimePickerInput]',\n  host: {\n    'data-slot': 'time-picker-input',\n    type: 'text',\n    inputmode: 'numeric',\n    '[class]': 'class()',\n    '[disabled]': 'timePicker.disabled()',\n  },\n})\nexport class ScTimePickerInput {\n  readonly timePicker = inject(SC_TIME_PICKER);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly focused = signal(false);\n\n  protected readonly class = computed(() =>\n    cn(\n      'w-10 rounded-md border border-input bg-background px-2 py-1.5 text-center text-sm tabular-nums',\n      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/time-picker/time-picker-minutes-input.js

@@ -0,0 +1,57 @@
+import { computed, Directive, inject } from '@angular/core';
+import { ScTimePickerInput } from './time-picker-input';
+import * as i0 from "@angular/core";
+export class ScTimePickerMinutesInput {
+    input = inject(ScTimePickerInput);
+    timePicker = this.input.timePicker;
+    displayValue = computed(() => {
+        const val = this.timePicker.value();
+        if (!val)
+            return '00';
+        return val.minutes.toString().padStart(2, '0');
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    onInput(event) {
+        const el = event.target;
+        const value = el.value.replace(/\D/g, '');
+        const num = parseInt(value, 10);
+        if (!isNaN(num)) {
+            this.timePicker.setMinutes(Math.min(num, 59));
+        }
+    }
+    onBlur() {
+        this.input.focused.set(false);
+    }
+    onFocus(event) {
+        this.input.focused.set(true);
+        event.target.select();
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+            this.timePicker.setMinutes(val.minutes >= 59 ? 0 : val.minutes + 1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const val = this.timePicker.value() || { hours: 0, minutes: 0 };
+            this.timePicker.setMinutes(val.minutes <= 0 ? 59 : val.minutes - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerMinutesInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ScTimePickerMinutesInput, isStandalone: true, selector: "input[scTimePickerMinutesInput]", host: { listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)", "focus": "onFocus($event)" }, properties: { "value": "displayValue()", "attr.aria-label": "\"Minutes\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerMinutesInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scTimePickerMinutesInput]',
+                    host: {
+                        '[value]': 'displayValue()',
+                        '[attr.aria-label]': '"Minutes"',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focus)': 'onFocus($event)',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=time-picker-minutes-input.js.map

package/esm2022/lib/components/time-picker/time-picker-minutes-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-minutes-input.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/time-picker/time-picker-minutes-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAaxD,MAAM,OAAO,wBAAwB;IAClB,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAElC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;IAEjC,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACpC,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC,wDAAC,CAAC;IAEO,OAAO,CAAC,KAAY;QAC5B,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC5C,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC1C,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAEhC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAES,MAAM;QACd,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAES,OAAO,CAAC,KAAiB;QACjC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5B,KAAK,CAAC,MAA2B,CAAC,MAAM,EAAE,CAAC;IAC9C,CAAC;IAES,SAAS,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YAChE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACtE,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACrC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YAChE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;uGAxCU,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBAXpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,iCAAiC;oBAC3C,IAAI,EAAE;wBACJ,SAAS,EAAE,gBAAgB;wBAC3B,mBAAmB,EAAE,WAAW;wBAChC,SAAS,EAAE,iBAAiB;wBAC5B,QAAQ,EAAE,UAAU;wBACpB,WAAW,EAAE,mBAAmB;wBAChC,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import { computed, Directive, inject } from '@angular/core';\nimport { ScTimePickerInput } from './time-picker-input';\n\n@Directive({\n  selector: 'input[scTimePickerMinutesInput]',\n  host: {\n    '[value]': 'displayValue()',\n    '[attr.aria-label]': '\"Minutes\"',\n    '(input)': 'onInput($event)',\n    '(blur)': 'onBlur()',\n    '(keydown)': 'onKeydown($event)',\n    '(focus)': 'onFocus($event)',\n  },\n})\nexport class ScTimePickerMinutesInput {\n  private readonly input = inject(ScTimePickerInput);\n\n  private readonly timePicker = this.input.timePicker;\n\n  protected readonly displayValue = computed(() => {\n    const val = this.timePicker.value();\n    if (!val) return '00';\n    return val.minutes.toString().padStart(2, '0');\n  });\n\n  protected onInput(event: Event): void {\n    const el = event.target as HTMLInputElement;\n    const value = el.value.replace(/\\D/g, '');\n    const num = parseInt(value, 10);\n\n    if (!isNaN(num)) {\n      this.timePicker.setMinutes(Math.min(num, 59));\n    }\n  }\n\n  protected onBlur(): void {\n    this.input.focused.set(false);\n  }\n\n  protected onFocus(event: FocusEvent): void {\n    this.input.focused.set(true);\n    (event.target as HTMLInputElement).select();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const val = this.timePicker.value() || { hours: 0, minutes: 0 };\n      this.timePicker.setMinutes(val.minutes >= 59 ? 0 : val.minutes + 1);\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const val = this.timePicker.value() || { hours: 0, minutes: 0 };\n      this.timePicker.setMinutes(val.minutes <= 0 ? 59 : val.minutes - 1);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/time-picker/time-picker-period-am.js

@@ -0,0 +1,26 @@
+import { computed, Directive, inject } from '@angular/core';
+import { cn } from '../../utils';
+import { ScTimePickerPeriod } from './time-picker-period';
+import * as i0 from "@angular/core";
+export class ScTimePickerPeriodAM {
+    period = inject(ScTimePickerPeriod);
+    class = computed(() => cn('rounded-md px-2 py-1.5 text-sm font-medium transition-colors', this.period.isAM()
+        ? 'bg-primary text-primary-foreground'
+        : 'text-muted-foreground hover:bg-accent'), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerPeriodAM, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ScTimePickerPeriodAM, isStandalone: true, selector: "button[scTimePickerPeriodAM]", host: { attributes: { "data-slot": "time-picker-period-am", "type": "button" }, listeners: { "click": "period.selectAM()" }, properties: { "class": "class()", "disabled": "period.timePicker.disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTimePickerPeriodAM, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scTimePickerPeriodAM]',
+                    host: {
+                        'data-slot': 'time-picker-period-am',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '[disabled]': 'period.timePicker.disabled()',
+                        '(click)': 'period.selectAM()',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=time-picker-period-am.js.map

package/esm2022/lib/components/time-picker/time-picker-period-am.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-period-am.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/time-picker/time-picker-period-am.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAY1D,MAAM,OAAO,oBAAoB;IACZ,MAAM,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAEpC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,8DAA8D,EAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;QAChB,CAAC,CAAC,oCAAoC;QACtC,CAAC,CAAC,uCAAuC,CAC5C,iDACF,CAAC;uGAVS,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAVhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,IAAI,EAAE;wBACJ,WAAW,EAAE,uBAAuB;wBACpC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,8BAA8B;wBAC5C,SAAS,EAAE,mBAAmB;qBAC/B;iBACF","sourcesContent":["import { computed, Directive, inject } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScTimePickerPeriod } from './time-picker-period';\n\n@Directive({\n  selector: 'button[scTimePickerPeriodAM]',\n  host: {\n    'data-slot': 'time-picker-period-am',\n    type: 'button',\n    '[class]': 'class()',\n    '[disabled]': 'period.timePicker.disabled()',\n    '(click)': 'period.selectAM()',\n  },\n})\nexport class ScTimePickerPeriodAM {\n  protected readonly period = inject(ScTimePickerPeriod);\n\n  protected readonly class = computed(() =>\n    cn(\n      'rounded-md px-2 py-1.5 text-sm font-medium transition-colors',\n      this.period.isAM()\n        ? 'bg-primary text-primary-foreground'\n        : 'text-muted-foreground hover:bg-accent',\n    ),\n  );\n}\n"]}