@semantic-components/ui 0.66.0 → 0.67.0

package/esm2022/lib/components/navigation-menu/navigation-menu-trigger-icon.js

@@ -0,0 +1,22 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScNavigationMenuItem } from './navigation-menu-item';
+import * as i0 from "@angular/core";
+export class ScNavigationMenuTriggerIcon {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    menuItem = inject(ScNavigationMenuItem);
+    class = computed(() => cn('relative top-[1px] ml-1 size-3 transition duration-300', this.menuItem.open() && 'rotate-180', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTriggerIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuTriggerIcon, isStandalone: true, selector: "svg[scNavigationMenuTriggerIcon]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-trigger-icon" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTriggerIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg[scNavigationMenuTriggerIcon]',
+                    host: {
+                        'data-slot': 'navigation-menu-trigger-icon',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=navigation-menu-trigger-icon.js.map

package/esm2022/lib/components/navigation-menu/navigation-menu-trigger-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-trigger-icon.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/navigation-menu-trigger-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAS9D,MAAM,OAAO,2BAA2B;IAC7B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,QAAQ,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAEtC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,wDAAwD,EACxD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,YAAY,EACpC,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAXS,2BAA2B;2FAA3B,2BAA2B;;2FAA3B,2BAA2B;kBAPvC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kCAAkC;oBAC5C,IAAI,EAAE;wBACJ,WAAW,EAAE,8BAA8B;wBAC3C,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScNavigationMenuItem } from './navigation-menu-item';\n\n@Directive({\n  selector: 'svg[scNavigationMenuTriggerIcon]',\n  host: {\n    'data-slot': 'navigation-menu-trigger-icon',\n    '[class]': 'class()',\n  },\n})\nexport class ScNavigationMenuTriggerIcon {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly menuItem = inject(ScNavigationMenuItem);\n\n  protected readonly class = computed(() =>\n    cn(\n      'relative top-[1px] ml-1 size-3 transition duration-300',\n      this.menuItem.open() && 'rotate-180',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/navigation-menu/navigation-menu-trigger.js

@@ -0,0 +1,41 @@
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { SiChevronDownIcon } from '@semantic-icons/lucide-icons';
+import { cn } from '../../utils';
+import { ScNavigationMenuItem } from './navigation-menu-item';
+import { ScNavigationMenuTriggerIcon } from './navigation-menu-trigger-icon';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+export class ScNavigationMenuTrigger {
+    menuItem = inject(ScNavigationMenuItem);
+    overlayOrigin = inject(CdkOverlayOrigin);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:bg-accent focus:text-accent-foreground', 'disabled:pointer-events-none disabled:opacity-50', 'data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50', 'focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1', '[&_svg]:pointer-events-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenuTrigger, isStandalone: true, selector: "button[scNavigationMenuTrigger]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu-trigger", "type": "button" }, properties: { "class": "class()", "attr.aria-expanded": "menuItem.open()", "attr.data-state": "menuItem.open() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: `
+    <ng-content />
+    <svg siChevronDownIcon scNavigationMenuTriggerIcon></svg>
+  `, isInline: true, dependencies: [{ kind: "component", type: SiChevronDownIcon, selector: "svg[siChevronDownIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }, { kind: "directive", type: ScNavigationMenuTriggerIcon, selector: "svg[scNavigationMenuTriggerIcon]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenuTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[scNavigationMenuTrigger]',
+                    imports: [SiChevronDownIcon, ScNavigationMenuTriggerIcon],
+                    hostDirectives: [CdkOverlayOrigin],
+                    template: `
+    <ng-content />
+    <svg siChevronDownIcon scNavigationMenuTriggerIcon></svg>
+  `,
+                    host: {
+                        'data-slot': 'navigation-menu-trigger',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '[attr.aria-expanded]': 'menuItem.open()',
+                        '[attr.data-state]': 'menuItem.open() ? "open" : "closed"',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=navigation-menu-trigger.js.map

package/esm2022/lib/components/navigation-menu/navigation-menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu-trigger.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/navigation-menu-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,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;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;;;AAoB7E,MAAM,OAAO,uBAAuB;IACzB,QAAQ,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IACxC,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACzC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,gHAAgH,EAChH,8CAA8C,EAC9C,8CAA8C,EAC9C,kDAAkD,EAClD,6IAA6I,EAC7I,wHAAwH,EACxH,6BAA6B,EAC7B,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAhBS,uBAAuB;2FAAvB,uBAAuB,8fAdxB;;;GAGT,4DALS,iBAAiB,kLAAE,2BAA2B;;2FAgB7C,uBAAuB;kBAlBnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,iCAAiC;oBAC3C,OAAO,EAAE,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;oBACzD,cAAc,EAAE,CAAC,gBAAgB,CAAC;oBAClC,QAAQ,EAAE;;;GAGT;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,yBAAyB;wBACtC,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,sBAAsB,EAAE,iBAAiB;wBACzC,mBAAmB,EAAE,qCAAqC;qBAC3D;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  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiChevronDownIcon } from '@semantic-icons/lucide-icons';\nimport { cn } from '../../utils';\nimport { ScNavigationMenuItem } from './navigation-menu-item';\nimport { ScNavigationMenuTriggerIcon } from './navigation-menu-trigger-icon';\n\n@Component({\n  selector: 'button[scNavigationMenuTrigger]',\n  imports: [SiChevronDownIcon, ScNavigationMenuTriggerIcon],\n  hostDirectives: [CdkOverlayOrigin],\n  template: `\n    <ng-content />\n    <svg siChevronDownIcon scNavigationMenuTriggerIcon></svg>\n  `,\n  host: {\n    'data-slot': 'navigation-menu-trigger',\n    type: 'button',\n    '[class]': 'class()',\n    '[attr.aria-expanded]': 'menuItem.open()',\n    '[attr.data-state]': 'menuItem.open() ? \"open\" : \"closed\"',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScNavigationMenuTrigger {\n  readonly menuItem = inject(ScNavigationMenuItem);\n  readonly overlayOrigin = inject(CdkOverlayOrigin);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium',\n      'hover:bg-accent hover:text-accent-foreground',\n      'focus:bg-accent focus:text-accent-foreground',\n      'disabled:pointer-events-none disabled:opacity-50',\n      'data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50',\n      'focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',\n      '[&_svg]:pointer-events-none',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/navigation-menu/navigation-menu.js

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScNavigationMenu {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    /** Currently active item ID */
+    activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
+    class = computed(() => cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    setActiveItem(id) {
+        this.activeItem.set(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScNavigationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScNavigationMenu, isStandalone: true, selector: "nav[scNavigationMenu]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "navigation-menu" }, 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: ScNavigationMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nav[scNavigationMenu]',
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'navigation-menu',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=navigation-menu.js.map

package/esm2022/lib/components/navigation-menu/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/navigation-menu/navigation-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAcjC,MAAM,OAAO,gBAAgB;IAClB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE5D,+BAA+B;IACtB,UAAU,GAAG,MAAM,CAAgB,IAAI,sDAAC,CAAC;IAE/B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,kFAAkF,EAClF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,aAAa,CAAC,EAAiB;QAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;uGAfU,gBAAgB;2FAAhB,gBAAgB,6TAVjB;;GAET;;2FAQU,gBAAgB;kBAZ5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,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  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'nav[scNavigationMenu]',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'navigation-menu',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScNavigationMenu {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  /** Currently active item ID */\n  readonly activeItem = signal<string | null>(null);\n\n  protected readonly class = computed(() =>\n    cn(\n      'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n      this.classInput(),\n    ),\n  );\n\n  setActiveItem(id: string | null): void {\n    this.activeItem.set(id);\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+export { ScRangeSlider } from './range-slider';
+export { ScRangeSliderMax } from './range-slider-max';
+export { ScRangeSliderMin } from './range-slider-min';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/range-slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { ScRangeSlider } from './range-slider';\nexport { ScRangeSliderMax } from './range-slider-max';\nexport { ScRangeSliderMin } from './range-slider-min';\n"]}

package/esm2022/lib/components/range-slider/range-slider-max.js

@@ -0,0 +1,38 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScRangeSlider } from './range-slider';
+import { MAX_THUMB_CLASSES } from './range-slider-thumb-base';
+import * as i0 from "@angular/core";
+export class ScRangeSliderMax {
+    rangeSlider = inject(ScRangeSlider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn(...MAX_THUMB_CLASSES, this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onInput(event) {
+        const el = event.target;
+        const val = +el.value;
+        const clamped = this.rangeSlider.clampMax(val);
+        this.rangeSlider.maxValue.set(clamped);
+        if (val !== clamped) {
+            el.value = String(clamped);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSliderMax, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScRangeSliderMax, isStandalone: true, selector: "input[scRangeSliderMax]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "input": "onInput($event)" }, properties: { "min": "rangeSlider.min()", "max": "rangeSlider.max()", "step": "rangeSlider.step()", "disabled": "rangeSlider.disabled()", "value": "rangeSlider.maxValue()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSliderMax, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scRangeSliderMax]',
+                    host: {
+                        type: 'range',
+                        '[min]': 'rangeSlider.min()',
+                        '[max]': 'rangeSlider.max()',
+                        '[step]': 'rangeSlider.step()',
+                        '[disabled]': 'rangeSlider.disabled()',
+                        '[value]': 'rangeSlider.maxValue()',
+                        '[class]': 'class()',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=range-slider-max.js.map

package/esm2022/lib/components/range-slider/range-slider-max.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider-max.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/range-slider/range-slider-max.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAe9D,MAAM,OAAO,gBAAgB;IACR,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAE9C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,GAAG,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC5C,CAAC;IAEQ,OAAO,CAAC,KAAY;QAC5B,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC5C,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;YACpB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;uGAlBU,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAb5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE,mBAAmB;wBAC5B,OAAO,EAAE,mBAAmB;wBAC5B,QAAQ,EAAE,oBAAoB;wBAC9B,YAAY,EAAE,wBAAwB;wBACtC,SAAS,EAAE,wBAAwB;wBACnC,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\n\nimport { ScRangeSlider } from './range-slider';\nimport { MAX_THUMB_CLASSES } from './range-slider-thumb-base';\n\n@Directive({\n  selector: 'input[scRangeSliderMax]',\n  host: {\n    type: 'range',\n    '[min]': 'rangeSlider.min()',\n    '[max]': 'rangeSlider.max()',\n    '[step]': 'rangeSlider.step()',\n    '[disabled]': 'rangeSlider.disabled()',\n    '[value]': 'rangeSlider.maxValue()',\n    '[class]': 'class()',\n    '(input)': 'onInput($event)',\n  },\n})\nexport class ScRangeSliderMax {\n  protected readonly rangeSlider = inject(ScRangeSlider);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(...MAX_THUMB_CLASSES, this.classInput()),\n  );\n\n  protected onInput(event: Event) {\n    const el = event.target as HTMLInputElement;\n    const val = +el.value;\n    const clamped = this.rangeSlider.clampMax(val);\n    this.rangeSlider.maxValue.set(clamped);\n\n    if (val !== clamped) {\n      el.value = String(clamped);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/range-slider/range-slider-min.js

@@ -0,0 +1,38 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScRangeSlider } from './range-slider';
+import { MIN_THUMB_CLASSES } from './range-slider-thumb-base';
+import * as i0 from "@angular/core";
+export class ScRangeSliderMin {
+    rangeSlider = inject(ScRangeSlider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn(...MIN_THUMB_CLASSES, this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onInput(event) {
+        const el = event.target;
+        const val = +el.value;
+        const clamped = this.rangeSlider.clampMin(val);
+        this.rangeSlider.minValue.set(clamped);
+        if (val !== clamped) {
+            el.value = String(clamped);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSliderMin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScRangeSliderMin, isStandalone: true, selector: "input[scRangeSliderMin]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "range" }, listeners: { "input": "onInput($event)" }, properties: { "min": "rangeSlider.min()", "max": "rangeSlider.max()", "step": "rangeSlider.step()", "disabled": "rangeSlider.disabled()", "value": "rangeSlider.minValue()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSliderMin, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[scRangeSliderMin]',
+                    host: {
+                        type: 'range',
+                        '[min]': 'rangeSlider.min()',
+                        '[max]': 'rangeSlider.max()',
+                        '[step]': 'rangeSlider.step()',
+                        '[disabled]': 'rangeSlider.disabled()',
+                        '[value]': 'rangeSlider.minValue()',
+                        '[class]': 'class()',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=range-slider-min.js.map

package/esm2022/lib/components/range-slider/range-slider-min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider-min.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/range-slider/range-slider-min.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAe9D,MAAM,OAAO,gBAAgB;IACR,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAE9C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,GAAG,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC5C,CAAC;IAEQ,OAAO,CAAC,KAAY;QAC5B,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC5C,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;YACpB,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;uGAlBU,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAb5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,IAAI,EAAE,OAAO;wBACb,OAAO,EAAE,mBAAmB;wBAC5B,OAAO,EAAE,mBAAmB;wBAC5B,QAAQ,EAAE,oBAAoB;wBAC9B,YAAY,EAAE,wBAAwB;wBACtC,SAAS,EAAE,wBAAwB;wBACnC,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\n\nimport { ScRangeSlider } from './range-slider';\nimport { MIN_THUMB_CLASSES } from './range-slider-thumb-base';\n\n@Directive({\n  selector: 'input[scRangeSliderMin]',\n  host: {\n    type: 'range',\n    '[min]': 'rangeSlider.min()',\n    '[max]': 'rangeSlider.max()',\n    '[step]': 'rangeSlider.step()',\n    '[disabled]': 'rangeSlider.disabled()',\n    '[value]': 'rangeSlider.minValue()',\n    '[class]': 'class()',\n    '(input)': 'onInput($event)',\n  },\n})\nexport class ScRangeSliderMin {\n  protected readonly rangeSlider = inject(ScRangeSlider);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(...MIN_THUMB_CLASSES, this.classInput()),\n  );\n\n  protected onInput(event: Event) {\n    const el = event.target as HTMLInputElement;\n    const val = +el.value;\n    const clamped = this.rangeSlider.clampMin(val);\n    this.rangeSlider.minValue.set(clamped);\n\n    if (val !== clamped) {\n      el.value = String(clamped);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/range-slider/range-slider-thumb-base.js

@@ -0,0 +1,24 @@
+const SHARED_THUMB_CLASSES = [
+    'pointer-events-none absolute top-0 h-full w-full cursor-pointer appearance-none bg-transparent',
+    'disabled:pointer-events-none disabled:opacity-50',
+    '[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-3 [&::-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]:pointer-events-auto [&::-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)]',
+];
+export const MIN_THUMB_CLASSES = [
+    ...SHARED_THUMB_CLASSES,
+    'z-10',
+    '[&::-webkit-slider-thumb]:-mt-1.5',
+    '[&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:h-0 [&::-webkit-slider-runnable-track]:bg-transparent',
+    '[&::-moz-range-track]:h-0 [&::-moz-range-track]:bg-transparent',
+];
+export const MAX_THUMB_CLASSES = [
+    ...SHARED_THUMB_CLASSES,
+    '[&::-webkit-slider-thumb]:-mt-1',
+    '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]',
+    '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]',
+];
+//# sourceMappingURL=range-slider-thumb-base.js.map

package/esm2022/lib/components/range-slider/range-slider-thumb-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider-thumb-base.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/range-slider/range-slider-thumb-base.ts"],"names":[],"mappings":"AAAA,MAAM,oBAAoB,GAAG;IAC3B,gGAAgG;IAChG,kDAAkD;IAClD,qRAAqR;IACrR,sFAAsF;IACtF,yPAAyP;IACzP,kFAAkF;IAClF,yHAAyH;IACzH,0FAA0F;CAClF,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,GAAG,oBAAoB;IACvB,MAAM;IACN,mCAAmC;IACnC,6IAA6I;IAC7I,gEAAgE;CACxD,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,GAAG,oBAAoB;IACvB,iCAAiC;IACjC,qRAAqR;IACrR,8OAA8O;CACtO,CAAC","sourcesContent":["const SHARED_THUMB_CLASSES = [\n  'pointer-events-none absolute top-0 h-full w-full cursor-pointer appearance-none bg-transparent',\n  'disabled:pointer-events-none disabled:opacity-50',\n  '[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-3 [&::-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]:pointer-events-auto [&::-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] as const;\n\nexport const MIN_THUMB_CLASSES = [\n  ...SHARED_THUMB_CLASSES,\n  'z-10',\n  '[&::-webkit-slider-thumb]:-mt-1.5',\n  '[&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:h-0 [&::-webkit-slider-runnable-track]:bg-transparent',\n  '[&::-moz-range-track]:h-0 [&::-moz-range-track]:bg-transparent',\n] as const;\n\nexport const MAX_THUMB_CLASSES = [\n  ...SHARED_THUMB_CLASSES,\n  '[&::-webkit-slider-thumb]:-mt-1',\n  '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]',\n  '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[image:linear-gradient(to_right,var(--muted)_var(--min-percent),var(--primary)_var(--min-percent)_var(--max-percent),var(--muted)_var(--max-percent))]',\n] as const;\n"]}

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

@@ -0,0 +1,62 @@
+import { computed, Directive, ElementRef, inject, input, model, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScRangeSlider {
+    el = inject(ElementRef);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    minValue = model(0, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+    maxValue = model(100, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    class = computed(() => cn('relative flex h-3 w-full items-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    minPercent = computed(() => {
+        const range = this.max() - this.min();
+        return range === 0 ? 0 : ((this.minValue() - this.min()) / range) * 100;
+    }, ...(ngDevMode ? [{ debugName: "minPercent" }] : []));
+    maxPercent = computed(() => {
+        const range = this.max() - this.min();
+        return range === 0 ? 0 : ((this.maxValue() - this.min()) / range) * 100;
+    }, ...(ngDevMode ? [{ debugName: "maxPercent" }] : []));
+    minPercentCss = computed(() => `${this.minPercent()}%`, ...(ngDevMode ? [{ debugName: "minPercentCss" }] : []));
+    maxPercentCss = computed(() => `${this.maxPercent()}%`, ...(ngDevMode ? [{ debugName: "maxPercentCss" }] : []));
+    onPointerDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const percent = ((event.clientX - rect.left) / rect.width) * 100;
+        const value = this.min() + (percent / 100) * (this.max() - this.min());
+        const stepped = Math.round(value / this.step()) * this.step();
+        const distToMin = Math.abs(stepped - this.minValue());
+        const distToMax = Math.abs(stepped - this.maxValue());
+        if (distToMin <= distToMax) {
+            this.minValue.set(this.clampMin(stepped));
+        }
+        else {
+            this.maxValue.set(this.clampMax(stepped));
+        }
+    }
+    clampMin(val) {
+        return Math.min(val, this.maxValue());
+    }
+    clampMax(val) {
+        return Math.max(val, this.minValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScRangeSlider, isStandalone: true, selector: "div[scRangeSlider]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { minValue: "minValueChange", maxValue: "maxValueChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "class": "class()", "style.--min-percent": "minPercentCss()", "style.--max-percent": "maxPercentCss()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScRangeSlider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scRangeSlider]',
+                    host: {
+                        '[class]': 'class()',
+                        '[style.--min-percent]': 'minPercentCss()',
+                        '[style.--max-percent]': 'maxPercentCss()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }, { type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }, { type: i0.Output, args: ["maxValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+//# sourceMappingURL=range-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/range-slider/range-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAWjC,MAAM,OAAO,aAAa;IACP,EAAE,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IAEzD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,QAAQ,GAAG,KAAK,CAAS,CAAC,oDAAC,CAAC;IAC5B,QAAQ,GAAG,KAAK,CAAS,GAAG,oDAAC,CAAC;IAE9B,GAAG,GAAG,KAAK,CAAS,CAAC,+CAAC,CAAC;IACvB,GAAG,GAAG,KAAK,CAAS,GAAG,+CAAC,CAAC;IACzB,IAAI,GAAG,KAAK,CAAS,CAAC,gDAAC,CAAC;IACxB,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEvB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,uCAAuC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC/D,CAAC;IAEO,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACtC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,sDAAC,CAAC;IAEM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACtC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,sDAAC,CAAC;IAEgB,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,yDAAC,CAAC;IACxD,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,yDAAC,CAAC;IAEjE,aAAa,CAAC,KAAmB;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAC3D,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;QACjE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvE,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAE9D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEtD,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,GAAW;QAClB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,GAAW;QAClB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxC,CAAC;uGAxDU,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBATzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,SAAS,EAAE,SAAS;wBACpB,uBAAuB,EAAE,iBAAiB;wBAC1C,uBAAuB,EAAE,iBAAiB;wBAC1C,eAAe,EAAE,uBAAuB;qBACzC;iBACF","sourcesContent":["import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scRangeSlider]',\n  host: {\n    '[class]': 'class()',\n    '[style.--min-percent]': 'minPercentCss()',\n    '[style.--max-percent]': 'maxPercentCss()',\n    '(pointerdown)': 'onPointerDown($event)',\n  },\n})\nexport class ScRangeSlider {\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly minValue = model<number>(0);\n  readonly maxValue = model<number>(100);\n\n  readonly min = input<number>(0);\n  readonly max = input<number>(100);\n  readonly step = input<number>(1);\n  readonly disabled = input<boolean>(false);\n\n  protected readonly class = computed(() =>\n    cn('relative flex h-3 w-full items-center', this.classInput()),\n  );\n\n  readonly minPercent = computed(() => {\n    const range = this.max() - this.min();\n    return range === 0 ? 0 : ((this.minValue() - this.min()) / range) * 100;\n  });\n\n  readonly maxPercent = computed(() => {\n    const range = this.max() - this.min();\n    return range === 0 ? 0 : ((this.maxValue() - this.min()) / range) * 100;\n  });\n\n  protected readonly minPercentCss = computed(() => `${this.minPercent()}%`);\n  protected readonly maxPercentCss = computed(() => `${this.maxPercent()}%`);\n\n  protected onPointerDown(event: PointerEvent) {\n    if (this.disabled()) {\n      return;\n    }\n\n    const rect = this.el.nativeElement.getBoundingClientRect();\n    const percent = ((event.clientX - rect.left) / rect.width) * 100;\n    const value = this.min() + (percent / 100) * (this.max() - this.min());\n    const stepped = Math.round(value / this.step()) * this.step();\n\n    const distToMin = Math.abs(stepped - this.minValue());\n    const distToMax = Math.abs(stepped - this.maxValue());\n\n    if (distToMin <= distToMax) {\n      this.minValue.set(this.clampMin(stepped));\n    } else {\n      this.maxValue.set(this.clampMax(stepped));\n    }\n  }\n\n  clampMin(val: number): number {\n    return Math.min(val, this.maxValue());\n  }\n\n  clampMax(val: number): number {\n    return Math.max(val, this.minValue());\n  }\n}\n"]}

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

@@ -1,8 +1,12 @@
 export { ScSelect } from './select';
-export { ScSelectIcon } from './select-icon';
+export { ScSelectItemIcon } from './select-item-icon';
 export { ScSelectTrigger } from './select-trigger';
 export { ScSelectValue } from './select-value';
 export { ScSelectPortal } from './select-portal';
+export { ScSelectPopup } from './select-popup';
 export { ScSelectList } from './select-list';
 export { ScSelectItem } from './select-item';
+export { ScSelectGroup } from './select-group';
+export { ScSelectGroupLabel } from './select-group-label';
+export { ScSelectSeparator } from './select-separator';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { ScSelect } from './select';\nexport { ScSelectIcon } from './select-icon';\nexport { ScSelectTrigger } from './select-trigger';\nexport { ScSelectValue } from './select-value';\nexport { ScSelectPortal } from './select-portal';\nexport { ScSelectList } from './select-list';\nexport { ScSelectItem } from './select-item';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { ScSelect } from './select';\nexport { ScSelectItemIcon } from './select-item-icon';\nexport { ScSelectTrigger } from './select-trigger';\nexport { ScSelectValue } from './select-value';\nexport { ScSelectPortal } from './select-portal';\nexport { ScSelectPopup } from './select-popup';\nexport { ScSelectList } from './select-list';\nexport { ScSelectItem } from './select-item';\nexport { ScSelectGroup } from './select-group';\nexport { ScSelectGroupLabel } from './select-group-label';\nexport { ScSelectSeparator } from './select-separator';\n"]}

package/esm2022/lib/components/select/select-group-label.js

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSelectGroupLabel {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('text-muted-foreground px-2 py-1.5 text-xs font-medium', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectGroupLabel, isStandalone: true, selector: "div[scSelectGroupLabel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-group-label" }, 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: ScSelectGroupLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSelectGroupLabel]',
+                    imports: [],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'select-group-label',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-group-label.js.map

package/esm2022/lib/components/select/select-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group-label.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-group-label.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAejC,MAAM,OAAO,kBAAkB;IACpB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,uDAAuD,EACvD,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGARS,kBAAkB;2FAAlB,kBAAkB,kUAVnB;;GAET;;2FAQU,kBAAkB;kBAb9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,OAAO,EAAE,EAAE;oBACX,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,oBAAoB;wBACjC,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  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scSelectGroupLabel]',\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'select-group-label',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectGroupLabel {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'text-muted-foreground px-2 py-1.5 text-xs font-medium',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScSelectGroup {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('flex flex-col', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectGroup, isStandalone: true, selector: "div[scSelectGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-group" }, 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: ScSelectGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scSelectGroup]',
+                    imports: [],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'select-group',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,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;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvC,CAAC;uGALS,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 {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scSelectGroup]',\n  imports: [],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'select-group',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('flex flex-col', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/select/{select-icon.js → select-item-icon.js}

@@ -1,21 +1,21 @@
 import { computed, Directive, input } from '@angular/core';
 import { cn } from '../../utils';
 import * as i0 from "@angular/core";
-export class ScSelectIcon {
+export class ScSelectItemIcon {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('text-muted-foreground size-4 shrink-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectIcon, isStandalone: true, selector: "svg[scSelectIcon]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-icon", "aria-hidden": "true" }, properties: { "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectItemIcon, isStandalone: true, selector: "svg[scSelectItemIcon]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-item-icon", "aria-hidden": "true" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItemIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'svg[scSelectIcon]',
+                    selector: 'svg[scSelectItemIcon]',
                     host: {
-                        'data-slot': 'select-icon',
+                        'data-slot': 'select-item-icon',
                         'aria-hidden': 'true',
                         '[class]': 'class()',
                     },
                 }]
         }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-//# sourceMappingURL=select-icon.js.map
+//# sourceMappingURL=select-item-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-item-icon.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-item-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAUjC,MAAM,OAAO,gBAAgB;IAClB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,uCAAuC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC/D,CAAC;uGALS,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAR5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,IAAI,EAAE;wBACJ,WAAW,EAAE,kBAAkB;wBAC/B,aAAa,EAAE,MAAM;wBACrB,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'svg[scSelectItemIcon]',\n  host: {\n    'data-slot': 'select-item-icon',\n    'aria-hidden': 'true',\n    '[class]': 'class()',\n  },\n})\nexport class ScSelectItemIcon {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('text-muted-foreground size-4 shrink-0', this.classInput()),\n  );\n}\n"]}

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"]}