@semantic-components/ui 0.68.0 → 0.70.0

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

@@ -18,7 +18,7 @@ export const MIN_THUMB_CLASSES = [
 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))]',
+    '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[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-[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

@@ -1 +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"]}
+{"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,+QAA+Q;IAC/Q,wOAAwO;CAChO,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-[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-[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

@@ -44,10 +44,10 @@ export class ScRangeSlider {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScRangeSlider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[scRangeSlider]',

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

@@ -0,0 +1,6 @@
+export * from './resizable.types';
+export * from './resizable-panel-group';
+export * from './resizable-panel';
+export * from './resizable-handle';
+export * from './resizable-handle-indicator';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './resizable.types';\nexport * from './resizable-panel-group';\nexport * from './resizable-panel';\nexport * from './resizable-handle';\nexport * from './resizable-handle-indicator';\n"]}

package/esm2022/lib/components/resizable/resizable-handle-indicator.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScResizableHandleIndicator {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizableHandleIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScResizableHandleIndicator, isStandalone: true, selector: "[scResizableHandleIndicator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "resizable-handle-indicator" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizableHandleIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scResizableHandleIndicator]',
+                    host: {
+                        'data-slot': 'resizable-handle-indicator',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=resizable-handle-indicator.js.map

package/esm2022/lib/components/resizable/resizable-handle-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-handle-indicator.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/resizable-handle-indicator.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,0BAA0B;IAC5B,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,iDAAiD,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACzE,CAAC;uGALS,0BAA0B;2FAA1B,0BAA0B;;2FAA1B,0BAA0B;kBAPtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,IAAI,EAAE;wBACJ,WAAW,EAAE,4BAA4B;wBACzC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: '[scResizableHandleIndicator]',\n  host: {\n    'data-slot': 'resizable-handle-indicator',\n    '[class]': 'class()',\n  },\n})\nexport class ScResizableHandleIndicator {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/resizable/resizable-handle.js

@@ -0,0 +1,116 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScResizableHandleIndicator } from './resizable-handle-indicator';
+import { ScResizablePanelGroup } from './resizable-panel-group';
+import * as i0 from "@angular/core";
+export class ScResizableHandle {
+    group = inject(ScResizablePanelGroup);
+    elementRef = inject(ElementRef);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    withHandle = input(false, ...(ngDevMode ? [{ debugName: "withHandle" }] : []));
+    dragging = false;
+    startPos = 0;
+    startSizes = [];
+    class = computed(() => cn('bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=vertical]:cursor-ew-resize aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-ns-resize aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onMouseDown(event) {
+        event.preventDefault();
+        this.startDrag(event.clientX, event.clientY);
+        const onMouseMove = (e) => this.onDrag(e.clientX, e.clientY);
+        const onMouseUp = () => {
+            this.dragging = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    onTouchStart(event) {
+        if (event.touches.length !== 1)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        this.startDrag(touch.clientX, touch.clientY);
+        const onTouchMove = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            const t = e.touches[0];
+            this.onDrag(t.clientX, t.clientY);
+        };
+        const onTouchEnd = () => {
+            this.dragging = false;
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+        document.addEventListener('touchmove', onTouchMove, { passive: false });
+        document.addEventListener('touchend', onTouchEnd);
+    }
+    startDrag(clientX, clientY) {
+        this.dragging = true;
+        const isHorizontal = this.group.direction() === 'horizontal';
+        this.startPos = isHorizontal ? clientX : clientY;
+        const panels = this.group.getPanels();
+        this.startSizes = panels.map((p) => p.size());
+    }
+    onDrag(clientX, clientY) {
+        if (!this.dragging)
+            return;
+        const isHorizontal = this.group.direction() === 'horizontal';
+        const currentPos = isHorizontal ? clientX : clientY;
+        const delta = currentPos - this.startPos;
+        const panels = this.group.getPanels();
+        const handles = this.group.getHandles();
+        const handleIndex = handles.indexOf(this);
+        if (handleIndex === -1 || panels.length < 2)
+            return;
+        const container = this.elementRef.nativeElement.parentElement;
+        if (!container)
+            return;
+        const containerSize = isHorizontal
+            ? container.offsetWidth
+            : container.offsetHeight;
+        const deltaPercent = (delta / containerSize) * 100;
+        const leftPanelIndex = handleIndex;
+        const rightPanelIndex = handleIndex + 1;
+        if (leftPanelIndex >= 0 && rightPanelIndex < panels.length) {
+            const leftPanel = panels[leftPanelIndex];
+            const rightPanel = panels[rightPanelIndex];
+            const newLeftSize = this.startSizes[leftPanelIndex] + deltaPercent;
+            const newRightSize = this.startSizes[rightPanelIndex] - deltaPercent;
+            if (newLeftSize >= leftPanel.minSize() &&
+                newLeftSize <= leftPanel.maxSize() &&
+                newRightSize >= rightPanel.minSize() &&
+                newRightSize <= rightPanel.maxSize()) {
+                leftPanel.setSize(newLeftSize);
+                rightPanel.setSize(newRightSize);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizableHandle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ScResizableHandle, isStandalone: true, selector: "[scResizableHandle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, withHandle: { classPropertyName: "withHandle", publicName: "withHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "resizable-handle" }, listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)" }, properties: { "class": "class()", "attr.aria-orientation": "group.direction() === \"horizontal\" ? \"vertical\" : \"horizontal\"" } }, ngImport: i0, template: `
+    @if (withHandle()) {
+      <div scResizableHandleIndicator></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScResizableHandleIndicator, selector: "[scResizableHandleIndicator]", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizableHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[scResizableHandle]',
+                    imports: [ScResizableHandleIndicator],
+                    host: {
+                        'data-slot': 'resizable-handle',
+                        '[class]': 'class()',
+                        '[attr.aria-orientation]': 'group.direction() === "horizontal" ? "vertical" : "horizontal"',
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(touchstart)': 'onTouchStart($event)',
+                    },
+                    template: `
+    @if (withHandle()) {
+      <div scResizableHandleIndicator></div>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }] } });
+//# sourceMappingURL=resizable-handle.js.map

package/esm2022/lib/components/resizable/resizable-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-handle.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/resizable-handle.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScResizableHandleIndicator } from './resizable-handle-indicator';\nimport { ScResizablePanelGroup } from './resizable-panel-group';\n\n@Component({\n  selector: '[scResizableHandle]',\n  imports: [ScResizableHandleIndicator],\n  host: {\n    'data-slot': 'resizable-handle',\n    '[class]': 'class()',\n    '[attr.aria-orientation]':\n      'group.direction() === \"horizontal\" ? \"vertical\" : \"horizontal\"',\n    '(mousedown)': 'onMouseDown($event)',\n    '(touchstart)': 'onTouchStart($event)',\n  },\n  template: `\n    @if (withHandle()) {\n      <div scResizableHandleIndicator></div>\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScResizableHandle {\n  readonly group = inject(ScResizablePanelGroup);\n  private readonly elementRef = inject(ElementRef);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly withHandle = input<boolean>(false);\n\n  private dragging = false;\n  private startPos = 0;\n  private startSizes: number[] = [];\n\n  protected readonly class = computed(() =>\n    cn(\n      'bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=vertical]:cursor-ew-resize aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-ns-resize aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',\n      this.classInput(),\n    ),\n  );\n\n  protected onMouseDown(event: MouseEvent): void {\n    event.preventDefault();\n    this.startDrag(event.clientX, event.clientY);\n\n    const onMouseMove = (e: MouseEvent) => this.onDrag(e.clientX, e.clientY);\n    const onMouseUp = () => {\n      this.dragging = false;\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\n    };\n\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n  }\n\n  protected onTouchStart(event: TouchEvent): void {\n    if (event.touches.length !== 1) return;\n    event.preventDefault();\n    const touch = event.touches[0];\n    this.startDrag(touch.clientX, touch.clientY);\n\n    const onTouchMove = (e: TouchEvent) => {\n      if (e.touches.length !== 1) return;\n      const t = e.touches[0];\n      this.onDrag(t.clientX, t.clientY);\n    };\n    const onTouchEnd = () => {\n      this.dragging = false;\n      document.removeEventListener('touchmove', onTouchMove);\n      document.removeEventListener('touchend', onTouchEnd);\n    };\n\n    document.addEventListener('touchmove', onTouchMove, { passive: false });\n    document.addEventListener('touchend', onTouchEnd);\n  }\n\n  private startDrag(clientX: number, clientY: number): void {\n    this.dragging = true;\n    const isHorizontal = this.group.direction() === 'horizontal';\n    this.startPos = isHorizontal ? clientX : clientY;\n\n    const panels = this.group.getPanels();\n    this.startSizes = panels.map((p) => p.size());\n  }\n\n  private onDrag(clientX: number, clientY: number): void {\n    if (!this.dragging) return;\n\n    const isHorizontal = this.group.direction() === 'horizontal';\n    const currentPos = isHorizontal ? clientX : clientY;\n    const delta = currentPos - this.startPos;\n\n    const panels = this.group.getPanels();\n    const handles = this.group.getHandles();\n    const handleIndex = handles.indexOf(this);\n\n    if (handleIndex === -1 || panels.length < 2) return;\n\n    const container = this.elementRef.nativeElement.parentElement;\n    if (!container) return;\n\n    const containerSize = isHorizontal\n      ? container.offsetWidth\n      : container.offsetHeight;\n    const deltaPercent = (delta / containerSize) * 100;\n\n    const leftPanelIndex = handleIndex;\n    const rightPanelIndex = handleIndex + 1;\n\n    if (leftPanelIndex >= 0 && rightPanelIndex < panels.length) {\n      const leftPanel = panels[leftPanelIndex];\n      const rightPanel = panels[rightPanelIndex];\n\n      const newLeftSize = this.startSizes[leftPanelIndex] + deltaPercent;\n      const newRightSize = this.startSizes[rightPanelIndex] - deltaPercent;\n\n      if (\n        newLeftSize >= leftPanel.minSize() &&\n        newLeftSize <= leftPanel.maxSize() &&\n        newRightSize >= rightPanel.minSize() &&\n        newRightSize <= rightPanel.maxSize()\n      ) {\n        leftPanel.setSize(newLeftSize);\n        rightPanel.setSize(newRightSize);\n      }\n    }\n  }\n}\n"]}

package/esm2022/lib/components/resizable/resizable-panel-group.js

@@ -0,0 +1,38 @@
+import { computed, Directive, input, contentChildren } from '@angular/core';
+import { cn } from '../../utils';
+import { ScResizablePanel } from './resizable-panel';
+import { ScResizableHandle } from './resizable-handle';
+import * as i0 from "@angular/core";
+export class ScResizablePanelGroup {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    allPanels = contentChildren(ScResizablePanel, { ...(ngDevMode ? { debugName: "allPanels" } : {}), descendants: true });
+    allHandles = contentChildren(ScResizableHandle, { ...(ngDevMode ? { debugName: "allHandles" } : {}), descendants: true });
+    ownPanels = computed(() => this.allPanels().filter((p) => p.group === this), ...(ngDevMode ? [{ debugName: "ownPanels" }] : []));
+    ownHandles = computed(() => this.allHandles().filter((h) => h.group === this), ...(ngDevMode ? [{ debugName: "ownHandles" }] : []));
+    class = computed(() => cn('flex h-full w-full overflow-hidden aria-[orientation=vertical]:flex-col', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    getPanels() {
+        return this.ownPanels();
+    }
+    getHandles() {
+        return this.ownHandles();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizablePanelGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: ScResizablePanelGroup, isStandalone: true, selector: "[scResizablePanelGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "resizable-panel-group" }, properties: { "class": "class()", "attr.aria-orientation": "direction()" } }, queries: [{ propertyName: "allPanels", predicate: ScResizablePanel, descendants: true, isSignal: true }, { propertyName: "allHandles", predicate: ScResizableHandle, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizablePanelGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scResizablePanelGroup]',
+                    host: {
+                        'data-slot': 'resizable-panel-group',
+                        '[class]': 'class()',
+                        '[attr.aria-orientation]': 'direction()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], allPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ScResizablePanel), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], allHandles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ScResizableHandle), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+//# sourceMappingURL=resizable-panel-group.js.map

package/esm2022/lib/components/resizable/resizable-panel-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panel-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/resizable-panel-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;;AAUvD,MAAM,OAAO,qBAAqB;IACvB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,SAAS,GAAG,KAAK,CAAuB,YAAY,qDAAC,CAAC;IAE9C,SAAS,GAAG,eAAe,CAAC,gBAAgB,sDAC3D,WAAW,EAAE,IAAI,GACjB,CAAC;IACc,UAAU,GAAG,eAAe,CAAC,iBAAiB,uDAC7D,WAAW,EAAE,IAAI,GACjB,CAAC;IAEc,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CACzC,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,qDACjD,CAAC;IACe,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1C,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,sDAClD,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,yEAAyE,EACzE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,SAAS;QACP,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;uGA/BU,qBAAqB;2FAArB,qBAAqB,2gBAIa,gBAAgB,gFAGf,iBAAiB;;2FAPpD,qBAAqB;kBARjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,uBAAuB;wBACpC,SAAS,EAAE,SAAS;wBACpB,yBAAyB,EAAE,aAAa;qBACzC;iBACF;kSAK8C,gBAAgB,QAAE;4BAC7D,WAAW,EAAE,IAAI;yBAClB,4FAC6C,iBAAiB,QAAE;4BAC/D,WAAW,EAAE,IAAI;yBAClB","sourcesContent":["import { computed, Directive, input, contentChildren } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScResizableDirection } from './resizable.types';\nimport { ScResizablePanel } from './resizable-panel';\nimport { ScResizableHandle } from './resizable-handle';\n\n@Directive({\n  selector: '[scResizablePanelGroup]',\n  host: {\n    'data-slot': 'resizable-panel-group',\n    '[class]': 'class()',\n    '[attr.aria-orientation]': 'direction()',\n  },\n})\nexport class ScResizablePanelGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly direction = input<ScResizableDirection>('horizontal');\n\n  private readonly allPanels = contentChildren(ScResizablePanel, {\n    descendants: true,\n  });\n  private readonly allHandles = contentChildren(ScResizableHandle, {\n    descendants: true,\n  });\n\n  private readonly ownPanels = computed(() =>\n    this.allPanels().filter((p) => p.group === this),\n  );\n  private readonly ownHandles = computed(() =>\n    this.allHandles().filter((h) => h.group === this),\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'flex h-full w-full overflow-hidden aria-[orientation=vertical]:flex-col',\n      this.classInput(),\n    ),\n  );\n\n  getPanels() {\n    return this.ownPanels();\n  }\n\n  getHandles() {\n    return this.ownHandles();\n  }\n}\n"]}

package/esm2022/lib/components/resizable/resizable-panel.js

@@ -0,0 +1,39 @@
+import { computed, Directive, inject, input, linkedSignal, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScResizablePanelGroup } from './resizable-panel-group';
+import * as i0 from "@angular/core";
+export class ScResizablePanel {
+    group = inject(ScResizablePanelGroup);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    defaultSize = input(50, ...(ngDevMode ? [{ debugName: "defaultSize" }] : []));
+    minSize = input(0, ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    maxSize = input(100, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    size = linkedSignal(() => this.defaultSize(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = computed(() => cn('overflow-hidden', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    minSizePx = computed(() => `${this.minSize()}%`, ...(ngDevMode ? [{ debugName: "minSizePx" }] : []));
+    maxSizePx = computed(() => `${this.maxSize()}%`, ...(ngDevMode ? [{ debugName: "maxSizePx" }] : []));
+    setSize(newSize) {
+        const clamped = Math.max(this.minSize(), Math.min(this.maxSize(), newSize));
+        this.size.set(clamped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizablePanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScResizablePanel, isStandalone: true, selector: "[scResizablePanel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "resizable-panel" }, properties: { "class": "class()", "style.flex-grow": "size()", "style.flex-shrink": "1", "style.flex-basis": "\"0%\"", "style.min-width": "group.direction() === \"horizontal\" ? minSizePx() : undefined", "style.min-height": "group.direction() === \"vertical\" ? minSizePx() : undefined", "style.max-width": "group.direction() === \"horizontal\" ? maxSizePx() : undefined", "style.max-height": "group.direction() === \"vertical\" ? maxSizePx() : undefined" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScResizablePanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scResizablePanel]',
+                    host: {
+                        'data-slot': 'resizable-panel',
+                        '[class]': 'class()',
+                        '[style.flex-grow]': 'size()',
+                        '[style.flex-shrink]': '1',
+                        '[style.flex-basis]': '"0%"',
+                        '[style.min-width]': 'group.direction() === "horizontal" ? minSizePx() : undefined',
+                        '[style.min-height]': 'group.direction() === "vertical" ? minSizePx() : undefined',
+                        '[style.max-width]': 'group.direction() === "horizontal" ? maxSizePx() : undefined',
+                        '[style.max-height]': 'group.direction() === "vertical" ? maxSizePx() : undefined',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], defaultSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
+//# sourceMappingURL=resizable-panel.js.map

package/esm2022/lib/components/resizable/resizable-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panel.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/resizable-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,YAAY,GACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAoBhE,MAAM,OAAO,gBAAgB;IAClB,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;IAEtC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC,CAAC;IAChC,OAAO,GAAG,KAAK,CAAS,CAAC,mDAAC,CAAC;IAC3B,OAAO,GAAG,KAAK,CAAS,GAAG,mDAAC,CAAC;IAE7B,IAAI,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,gDAAC,CAAC;IAEpC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACzC,CAAC;IAEiB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,qDAAC,CAAC;IACjD,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,qDAAC,CAAC;IAEpE,OAAO,CAAC,OAAe;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;uGApBU,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAlB5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,SAAS,EAAE,SAAS;wBACpB,mBAAmB,EAAE,QAAQ;wBAC7B,qBAAqB,EAAE,GAAG;wBAC1B,oBAAoB,EAAE,MAAM;wBAC5B,mBAAmB,EACjB,8DAA8D;wBAChE,oBAAoB,EAClB,4DAA4D;wBAC9D,mBAAmB,EACjB,8DAA8D;wBAChE,oBAAoB,EAClB,4DAA4D;qBAC/D;iBACF","sourcesContent":["import {\n  computed,\n  Directive,\n  inject,\n  input,\n  linkedSignal,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScResizablePanelGroup } from './resizable-panel-group';\n\n@Directive({\n  selector: '[scResizablePanel]',\n  host: {\n    'data-slot': 'resizable-panel',\n    '[class]': 'class()',\n    '[style.flex-grow]': 'size()',\n    '[style.flex-shrink]': '1',\n    '[style.flex-basis]': '\"0%\"',\n    '[style.min-width]':\n      'group.direction() === \"horizontal\" ? minSizePx() : undefined',\n    '[style.min-height]':\n      'group.direction() === \"vertical\" ? minSizePx() : undefined',\n    '[style.max-width]':\n      'group.direction() === \"horizontal\" ? maxSizePx() : undefined',\n    '[style.max-height]':\n      'group.direction() === \"vertical\" ? maxSizePx() : undefined',\n  },\n})\nexport class ScResizablePanel {\n  readonly group = inject(ScResizablePanelGroup);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly defaultSize = input<number>(50);\n  readonly minSize = input<number>(0);\n  readonly maxSize = input<number>(100);\n\n  readonly size = linkedSignal(() => this.defaultSize());\n\n  protected readonly class = computed(() =>\n    cn('overflow-hidden', this.classInput()),\n  );\n\n  protected readonly minSizePx = computed(() => `${this.minSize()}%`);\n  protected readonly maxSizePx = computed(() => `${this.maxSize()}%`);\n\n  setSize(newSize: number): void {\n    const clamped = Math.max(this.minSize(), Math.min(this.maxSize(), newSize));\n    this.size.set(clamped);\n  }\n}\n"]}

package/esm2022/lib/components/resizable/resizable.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=resizable.types.js.map

package/esm2022/lib/components/resizable/resizable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.types.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/resizable/resizable.types.ts"],"names":[],"mappings":"","sourcesContent":["export type ScResizableDirection = 'horizontal' | 'vertical';\n"]}

package/esm2022/lib/components/scroll-area/scroll-area.js

@@ -4,12 +4,12 @@ import * as i0 from "@angular/core";
 export class ScScrollArea {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('overflow-auto', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScScrollArea, isStandalone: true, selector: "div[scScrollArea]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "scroll-area" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScScrollArea, isStandalone: true, selector: "div[scScrollArea]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "scroll-area" }, properties: { "class": "class()" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, styles: ["[data-slot=scroll-area]{scrollbar-width:thin;scrollbar-color:transparent transparent}[data-slot=scroll-area]:hover{scrollbar-color:var(--color-border) transparent}[data-slot=scroll-area]::-webkit-scrollbar{width:8px;height:8px}[data-slot=scroll-area]::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999px}[data-slot=scroll-area]:hover::-webkit-scrollbar-thumb{background-color:var(--color-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScScrollArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScScrollArea, decorators: [{
             type: Component,
             args: [{ selector: 'div[scScrollArea]', host: {
                         'data-slot': 'scroll-area',

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

@@ -1,7 +1,7 @@
 export { ScSelect } from './select';
 export { ScSelectItemIcon } from './select-item-icon';
 export { ScSelectTrigger } from './select-trigger';
-export { ScSelectValue } from './select-value';
+export { ScSelectLabel } from './select-label';
 export { ScSelectPortal } from './select-portal';
 export { ScSelectPopup } from './select-popup';
 export { ScSelectList } from './select-list';

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,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"]}
+{"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 { ScSelectLabel } from './select-label';\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

@@ -4,12 +4,12 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectGroupLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scSelectGroupLabel]',

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

@@ -4,12 +4,12 @@ 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scSelectGroup]',

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

@@ -6,10 +6,10 @@ import * as i1 from "@angular/aria/combobox";
 export class ScSelectInput {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('absolute inset-0 h-full w-full cursor-pointer border-none bg-transparent opacity-0 outline-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectInput, isStandalone: true, selector: "input[scSelectInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-input" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.ComboboxInput }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSelectInput, isStandalone: true, selector: "input[scSelectInput]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-input" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.ComboboxInput }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[scSelectInput]',

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

@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
 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: 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", 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: ScSelectItemIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItemIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg[scSelectItemIcon]',

package/esm2022/lib/components/select/select-item-indicator.js

@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
 export class ScSelectItemIndicator {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     class = computed(() => cn('pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 [[aria-selected=true]>&]:opacity-100', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectItemIndicator, isStandalone: true, selector: "svg[scSelectItemIndicator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-item-indicator" }, properties: { "class": "class()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ScSelectItemIndicator, isStandalone: true, selector: "svg[scSelectItemIndicator]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-item-indicator" }, properties: { "class": "class()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItemIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItemIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg[scSelectItemIndicator]',

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

@@ -9,6 +9,8 @@ export class ScSelectItem {
     classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
     option = inject(Option);
     elementRef = inject(ElementRef);
+    itemValue = computed(() => this.option.value(), ...(ngDevMode ? [{ debugName: "itemValue" }] : []));
+    itemLabel = computed(() => this.option.label() || '', ...(ngDevMode ? [{ debugName: "itemLabel" }] : []));
     constructor() {
         effect(() => {
             if (this.option.active()) {
@@ -17,13 +19,13 @@ export class ScSelectItem {
         });
     }
     class = computed(() => cn('relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden', 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', 'aria-selected:bg-accent/50 aria-selected:text-accent-foreground', 'data-disabled:pointer-events-none data-disabled:opacity-50', '[&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScSelectItem, isStandalone: true, selector: "div[scSelectItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-item" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.Option, inputs: ["value", "value", "label", "label"] }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSelectItem, isStandalone: true, selector: "div[scSelectItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-item" }, properties: { "class": "class()" } }, hostDirectives: [{ directive: i1.Option, inputs: ["value", "value", "label", "label"] }], ngImport: i0, template: `
     <ng-content />
     <svg scSelectItemIndicator siCheckIcon aria-hidden="true"></svg>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ScSelectItemIndicator, selector: "svg[scSelectItemIndicator]", inputs: ["class"] }, { kind: "component", type: SiCheckIcon, selector: "svg[siCheckIcon]", inputs: ["width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ScSelectItemIndicator, selector: "svg[scSelectItemIndicator]", inputs: ["class"] }, { kind: "component", type: SiCheckIcon, selector: "svg[siCheckIcon]", inputs: ["ariaHidden", "width", "height", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScSelectItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[scSelectItem]',

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;;AAsBhE,MAAM,OAAO,YAAY;IACd,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IAE1E;QACE,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC;gBACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;YACrE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,yHAAyH,EACzH,wEAAwE,EACxE,iEAAiE,EACjE,4DAA4D,EAC5D,iFAAiF,EACjF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAvBS,YAAY;2FAAZ,YAAY,+YAjBb;;;GAGT,4DAJS,qBAAqB,0FAAE,WAAW;;2FAkBjC,YAAY;kBApBxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,OAAO,EAAE,CAAC,qBAAqB,EAAE,WAAW,CAAC;oBAC7C,QAAQ,EAAE;;;GAGT;oBACD,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,MAAM;4BACjB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;yBAC3B;qBACF;oBACD,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 { Option } from '@angular/aria/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiCheckIcon } from '@semantic-icons/lucide-icons';\nimport { cn } from '../../utils';\n\nimport { ScSelectItemIndicator } from './select-item-indicator';\n\n@Component({\n  selector: 'div[scSelectItem]',\n  imports: [ScSelectItemIndicator, SiCheckIcon],\n  template: `\n    <ng-content />\n    <svg scSelectItemIndicator siCheckIcon aria-hidden=\"true\"></svg>\n  `,\n  hostDirectives: [\n    {\n      directive: Option,\n      inputs: ['value', 'label'],\n    },\n  ],\n  host: {\n    'data-slot': 'select-item',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectItem {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly option = inject(Option);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  constructor() {\n    effect(() => {\n      if (this.option.active()) {\n        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });\n      }\n    });\n  }\n\n  protected readonly class = computed(() =>\n    cn(\n      'relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden',\n      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',\n      'aria-selected:bg-accent/50 aria-selected:text-accent-foreground',\n      'data-disabled:pointer-events-none data-disabled:opacity-50',\n      '[&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n      this.classInput(),\n    ),\n  );\n}\n"]}
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;;AAsBhE,MAAM,OAAO,YAAY;IACd,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAE3C,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;IAEjE,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,qDAAC,CAAC;IAChD,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,qDAAC,CAAC;IAE/D;QACE,MAAM,CAAC,GAAG,EAAE;YACV,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC;gBACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;YACrE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,yHAAyH,EACzH,wEAAwE,EACxE,iEAAiE,EACjE,4DAA4D,EAC5D,iFAAiF,EACjF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGA1BS,YAAY;2FAAZ,YAAY,+YAjBb;;;GAGT,4DAJS,qBAAqB,0FAAE,WAAW;;2FAkBjC,YAAY;kBApBxB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,OAAO,EAAE,CAAC,qBAAqB,EAAE,WAAW,CAAC;oBAC7C,QAAQ,EAAE;;;GAGT;oBACD,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,MAAM;4BACjB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;yBAC3B;qBACF;oBACD,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 { Option } from '@angular/aria/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { SiCheckIcon } from '@semantic-icons/lucide-icons';\nimport { cn } from '../../utils';\n\nimport { ScSelectItemIndicator } from './select-item-indicator';\n\n@Component({\n  selector: 'div[scSelectItem]',\n  imports: [ScSelectItemIndicator, SiCheckIcon],\n  template: `\n    <ng-content />\n    <svg scSelectItemIndicator siCheckIcon aria-hidden=\"true\"></svg>\n  `,\n  hostDirectives: [\n    {\n      directive: Option,\n      inputs: ['value', 'label'],\n    },\n  ],\n  host: {\n    'data-slot': 'select-item',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectItem {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  private readonly option = inject(Option);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  readonly itemValue = computed(() => this.option.value());\n  readonly itemLabel = computed(() => this.option.label() || '');\n\n  constructor() {\n    effect(() => {\n      if (this.option.active()) {\n        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });\n      }\n    });\n  }\n\n  protected readonly class = computed(() =>\n    cn(\n      'relative flex w-full cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden',\n      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',\n      'aria-selected:bg-accent/50 aria-selected:text-accent-foreground',\n      'data-disabled:pointer-events-none data-disabled:opacity-50',\n      '[&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScSelect } from './select';
+import * as i0 from "@angular/core";
+export class ScSelectLabel {
+    select = inject(ScSelect);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('truncate pointer-events-none', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ScSelectLabel, isStandalone: true, selector: "span[scSelectLabel], div[scSelectLabel]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "select-label" }, properties: { "class": "class()" } }, ngImport: i0, template: `
+    {{ select.label() }}
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScSelectLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[scSelectLabel], div[scSelectLabel]',
+                    template: `
+    {{ select.label() }}
+  `,
+                    host: {
+                        'data-slot': 'select-label',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=select-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-label.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/select/select-label.ts"],"names":[],"mappings":"AAAA,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;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;;AAcpC,MAAM,OAAO,aAAa;IACL,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAEpC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,8BAA8B,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACtD,CAAC;uGAPS,aAAa;2FAAb,aAAa,4UAVd;;GAET;;2FAQU,aAAa;kBAZzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,yCAAyC;oBACnD,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  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScSelect } from './select';\n\n@Component({\n  selector: 'span[scSelectLabel], div[scSelectLabel]',\n  template: `\n    {{ select.label() }}\n  `,\n  host: {\n    'data-slot': 'select-label',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScSelectLabel {\n  protected readonly select = inject(ScSelect);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('truncate pointer-events-none', this.classInput()),\n  );\n}\n"]}