@semantic-components/ui 0.65.0 → 0.66.0

package/esm2022/lib/components/toggle/toggle.js

@@ -0,0 +1,52 @@
+import { computed, Directive, input, model } from '@angular/core';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-input hover:bg-muted border bg-transparent',
+        },
+        size: {
+            default: 'h-8 min-w-8 px-2',
+            sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',
+            lg: 'h-9 min-w-9 px-2.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+export class ScToggle {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    pressed = model(false, ...(ngDevMode ? [{ debugName: "pressed" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    toggle() {
+        if (!this.disabled()) {
+            this.pressed.update((v) => !v);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggle, isStandalone: true, selector: "button[scToggle]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "data-slot": "toggle", "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "class()", "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "disabled": "disabled()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scToggle]',
+                    host: {
+                        'data-slot': 'toggle',
+                        type: 'button',
+                        '[class]': 'class()',
+                        '[attr.aria-pressed]': 'pressed()',
+                        '[attr.data-state]': 'pressed() ? "on" : "off"',
+                        '[disabled]': 'disabled()',
+                        '(click)': 'toggle()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,qhBAAqhB,EACrhB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,gBAAgB;YACzB,OAAO,EAAE,mDAAmD;SAC7D;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,kBAAkB;YAC3B,EAAE,EAAE,uEAAuE;YAC3E,EAAE,EAAE,oBAAoB;SACzB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAgBF,MAAM,OAAO,QAAQ;IACV,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEQ,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACrB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;uGAlBU,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBAZpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;wBACrB,IAAI,EAAE,QAAQ;wBACd,SAAS,EAAE,SAAS;wBACpB,qBAAqB,EAAE,WAAW;wBAClC,mBAAmB,EAAE,0BAA0B;wBAC/C,YAAY,EAAE,YAAY;wBAC1B,SAAS,EAAE,UAAU;qBACtB;iBACF","sourcesContent":["import { computed, Directive, input, model } from '@angular/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils';\n\nexport const toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-input hover:bg-muted border bg-transparent',\n      },\n      size: {\n        default: 'h-8 min-w-8 px-2',\n        sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n        lg: 'h-9 min-w-9 px-2.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ScToggleVariants = VariantProps<typeof toggleVariants>;\n\n@Directive({\n  selector: 'button[scToggle]',\n  host: {\n    'data-slot': 'toggle',\n    type: 'button',\n    '[class]': 'class()',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.data-state]': 'pressed() ? \"on\" : \"off\"',\n    '[disabled]': 'disabled()',\n    '(click)': 'toggle()',\n  },\n})\nexport class ScToggle {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly pressed = model<boolean>(false);\n  readonly disabled = input<boolean>(false);\n  readonly variant = input<ScToggleVariants['variant']>('default');\n  readonly size = input<ScToggleVariants['size']>('default');\n\n  protected readonly class = computed(() =>\n    cn(\n      toggleVariants({ variant: this.variant(), size: this.size() }),\n      this.classInput(),\n    ),\n  );\n\n  protected toggle(): void {\n    if (!this.disabled()) {\n      this.pressed.update((v) => !v);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/toggle-group/index.js

@@ -0,0 +1,3 @@
+export * from './toggle-group';
+export * from './toggle-group-item';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/toggle-group/index.js.map

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

package/esm2022/lib/components/toggle-group/toggle-group-item.js

@@ -0,0 +1,45 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { toggleVariants } from '../toggle/toggle';
+import { ScToggleGroup } from './toggle-group';
+import * as i0 from "@angular/core";
+export class ScToggleGroupItem {
+    group = inject(ScToggleGroup);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    isSelected = computed(() => this.group.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    isDisabled = computed(() => this.disabled() || this.group.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    class = computed(() => cn('group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t', toggleVariants({
+        variant: this.group.variant() || this.variant(),
+        size: this.group.size() || this.size(),
+    }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick() {
+        if (!this.isDisabled()) {
+            this.group.toggle(this.value());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggleGroupItem, isStandalone: true, selector: "button[scToggleGroupItem]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toggle-group-item", "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.data-variant": "group.variant() || variant()", "attr.data-size": "group.size() || size()", "attr.data-spacing": "group.spacing()", "attr.aria-pressed": "isSelected()", "attr.data-state": "isSelected() ? \"on\" : \"off\"", "disabled": "isDisabled()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroupItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scToggleGroupItem]',
+                    host: {
+                        'data-slot': 'toggle-group-item',
+                        type: 'button',
+                        '[attr.data-variant]': 'group.variant() || variant()',
+                        '[attr.data-size]': 'group.size() || size()',
+                        '[attr.data-spacing]': 'group.spacing()',
+                        '[attr.aria-pressed]': 'isSelected()',
+                        '[attr.data-state]': 'isSelected() ? "on" : "off"',
+                        '[disabled]': 'isDisabled()',
+                        '[class]': 'class()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=toggle-group-item.js.map

package/esm2022/lib/components/toggle-group/toggle-group-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-item.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toggle-group/toggle-group-item.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,cAAc,EAAyB,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAiB/C,MAAM,OAAO,iBAAiB;IACT,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAExC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC5C,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,sDACpC,CAAC;IAEiB,UAAU,GAAG,QAAQ,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,sDAC/C,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,ovBAAovB,EACpvB,cAAc,CAAC;QACb,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;QAC/C,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE;KACvC,CAAC,EACF,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEQ,OAAO;QACf,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;uGAhCU,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAf7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,QAAQ;wBACd,qBAAqB,EAAE,8BAA8B;wBACrD,kBAAkB,EAAE,wBAAwB;wBAC5C,qBAAqB,EAAE,iBAAiB;wBACxC,qBAAqB,EAAE,cAAc;wBACrC,mBAAmB,EAAE,6BAA6B;wBAClD,YAAY,EAAE,cAAc;wBAC5B,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,WAAW;qBACvB;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { toggleVariants, type ScToggleVariants } from '../toggle/toggle';\nimport { ScToggleGroup } from './toggle-group';\n\n@Directive({\n  selector: 'button[scToggleGroupItem]',\n  host: {\n    'data-slot': 'toggle-group-item',\n    type: 'button',\n    '[attr.data-variant]': 'group.variant() || variant()',\n    '[attr.data-size]': 'group.size() || size()',\n    '[attr.data-spacing]': 'group.spacing()',\n    '[attr.aria-pressed]': 'isSelected()',\n    '[attr.data-state]': 'isSelected() ? \"on\" : \"off\"',\n    '[disabled]': 'isDisabled()',\n    '[class]': 'class()',\n    '(click)': 'onClick()',\n  },\n})\nexport class ScToggleGroupItem {\n  protected readonly group = inject(ScToggleGroup);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly value = input.required<string>();\n  readonly disabled = input<boolean>(false);\n  readonly variant = input<ScToggleVariants['variant']>('default');\n  readonly size = input<ScToggleVariants['size']>('default');\n\n  protected readonly isSelected = computed(() =>\n    this.group.isSelected(this.value()),\n  );\n\n  protected readonly isDisabled = computed(\n    () => this.disabled() || this.group.disabled(),\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n      toggleVariants({\n        variant: this.group.variant() || this.variant(),\n        size: this.group.size() || this.size(),\n      }),\n      this.classInput(),\n    ),\n  );\n\n  protected onClick(): void {\n    if (!this.isDisabled()) {\n      this.group.toggle(this.value());\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,61 @@
+import { computed, Directive, input, model } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScToggleGroup {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    spacing = input(0, ...(ngDevMode ? [{ debugName: "spacing" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    class = computed(() => cn('rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    isSelected(itemValue) {
+        const currentValue = this.value();
+        if (this.type() === 'single') {
+            return currentValue === itemValue;
+        }
+        return Array.isArray(currentValue) && currentValue.includes(itemValue);
+    }
+    toggle(itemValue) {
+        if (this.disabled())
+            return;
+        if (this.type() === 'single') {
+            this.value.set(this.value() === itemValue ? null : itemValue);
+        }
+        else {
+            const currentValue = this.value();
+            const arr = Array.isArray(currentValue) ? [...currentValue] : [];
+            const index = arr.indexOf(itemValue);
+            if (index === -1) {
+                arr.push(itemValue);
+            }
+            else {
+                arr.splice(index, 1);
+            }
+            this.value.set(arr);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScToggleGroup, isStandalone: true, selector: "div[scToggleGroup]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "toggle-group", "role": "group" }, properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-spacing": "spacing()", "attr.data-orientation": "orientation()", "attr.data-horizontal": "orientation() === \"horizontal\" ? \"\" : null", "attr.data-vertical": "orientation() === \"vertical\" ? \"\" : null", "style.--gap": "spacing()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToggleGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scToggleGroup]',
+                    host: {
+                        'data-slot': 'toggle-group',
+                        role: 'group',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-spacing]': 'spacing()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-horizontal]': 'orientation() === "horizontal" ? "" : null',
+                        '[attr.data-vertical]': 'orientation() === "vertical" ? "" : null',
+                        '[style.--gap]': 'spacing()',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+//# sourceMappingURL=toggle-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toggle-group/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAkBjC,MAAM,OAAO,aAAa;IACf,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,IAAI,GAAG,KAAK,CAAwB,QAAQ,gDAAC,CAAC;IAC9C,KAAK,GAAG,KAAK,CAA2B,IAAI,iDAAC,CAAC;IAC9C,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAClD,OAAO,GAAG,KAAK,CAAS,CAAC,mDAAC,CAAC;IAC3B,WAAW,GAAG,KAAK,CAA4B,YAAY,uDAAC,CAAC;IAEnD,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,mMAAmM,EACnM,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,UAAU,CAAC,SAAiB;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO,YAAY,KAAK,SAAS,CAAC;QACpC,CAAC;QACD,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACzE,CAAC;IAED,MAAM,CAAC,SAAiB;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAE5B,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAClC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACjE,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;gBACjB,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YACvB,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;uGAzCU,aAAa;2FAAb,aAAa;;2FAAb,aAAa;kBAfzB,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,WAAW,EAAE,cAAc;wBAC3B,IAAI,EAAE,OAAO;wBACb,qBAAqB,EAAE,WAAW;wBAClC,kBAAkB,EAAE,QAAQ;wBAC5B,qBAAqB,EAAE,WAAW;wBAClC,yBAAyB,EAAE,eAAe;wBAC1C,wBAAwB,EAAE,4CAA4C;wBACtE,sBAAsB,EAAE,0CAA0C;wBAClE,eAAe,EAAE,WAAW;wBAC5B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input, model } from '@angular/core';\nimport { cn } from '../../utils';\nimport { type ScToggleVariants } from '../toggle/toggle';\n\n@Directive({\n  selector: 'div[scToggleGroup]',\n  host: {\n    'data-slot': 'toggle-group',\n    role: 'group',\n    '[attr.data-variant]': 'variant()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-spacing]': 'spacing()',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-horizontal]': 'orientation() === \"horizontal\" ? \"\" : null',\n    '[attr.data-vertical]': 'orientation() === \"vertical\" ? \"\" : null',\n    '[style.--gap]': 'spacing()',\n    '[class]': 'class()',\n  },\n})\nexport class ScToggleGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly type = input<'single' | 'multiple'>('single');\n  readonly value = model<string | string[] | null>(null);\n  readonly disabled = input<boolean>(false);\n  readonly variant = input<ScToggleVariants['variant']>('default');\n  readonly size = input<ScToggleVariants['size']>('default');\n  readonly spacing = input<number>(0);\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  protected readonly class = computed(() =>\n    cn(\n      'rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',\n      this.classInput(),\n    ),\n  );\n\n  isSelected(itemValue: string): boolean {\n    const currentValue = this.value();\n    if (this.type() === 'single') {\n      return currentValue === itemValue;\n    }\n    return Array.isArray(currentValue) && currentValue.includes(itemValue);\n  }\n\n  toggle(itemValue: string): void {\n    if (this.disabled()) return;\n\n    if (this.type() === 'single') {\n      this.value.set(this.value() === itemValue ? null : itemValue);\n    } else {\n      const currentValue = this.value();\n      const arr = Array.isArray(currentValue) ? [...currentValue] : [];\n      const index = arr.indexOf(itemValue);\n      if (index === -1) {\n        arr.push(itemValue);\n      } else {\n        arr.splice(index, 1);\n      }\n      this.value.set(arr);\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+export { ScToolbar } from './toolbar';
+export { ScToolbarWidget } from './toolbar-widget';
+export { ScToolbarWidgetGroup } from './toolbar-widget-group';
+export { ScToolbarSeparator } from './toolbar-separator';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { ScToolbar } from './toolbar';\nexport { ScToolbarWidget } from './toolbar-widget';\nexport { ScToolbarWidgetGroup } from './toolbar-widget-group';\nexport { ScToolbarSeparator } from './toolbar-separator';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-separator.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toolbar/toolbar-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAYjC,MAAM,OAAO,kBAAkB;IACZ,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAElC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,oBAAoB,GAAG,QAAQ,CAAC,GAAG,EAAE,CACtD,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,gEACxE,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAK,UAAU,CAAC;QAC9D,OAAO,EAAE,CACP,oBAAoB,EACpB,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EACpD,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;IACJ,CAAC,iDAAC,CAAC;uGAhBQ,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAV9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,mBAAmB;wBAChC,IAAI,EAAE,WAAW;wBACjB,yBAAyB,EAAE,wBAAwB;wBACnD,yBAAyB,EAAE,wBAAwB;wBACnD,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { Toolbar } from '@angular/aria/toolbar';\nimport { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scToolbarSeparator]',\n  host: {\n    'data-slot': 'toolbar-separator',\n    role: 'separator',\n    '[attr.aria-orientation]': 'separatorOrientation()',\n    '[attr.data-orientation]': 'separatorOrientation()',\n    '[class]': 'class()',\n  },\n})\nexport class ScToolbarSeparator {\n  private readonly toolbar = inject(Toolbar);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly separatorOrientation = computed(() =>\n    this.toolbar.orientation() === 'horizontal' ? 'vertical' : 'horizontal',\n  );\n\n  protected readonly class = computed(() => {\n    const isVertical = this.separatorOrientation() === 'vertical';\n    return cn(\n      'shrink-0 bg-border',\n      isVertical ? 'mx-1 h-full w-px' : 'my-1 h-px w-full',\n      this.classInput(),\n    );\n  });\n}\n"]}

package/esm2022/lib/components/toolbar/toolbar-widget-group.js

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

package/esm2022/lib/components/toolbar/toolbar-widget-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget-group.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toolbar/toolbar-widget-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;;AAoBjC,MAAM,OAAO,oBAAoB;IACtB,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,oBAAoB;2FAApB,oBAAoB,kbAVrB;;GAET;;2FAQU,oBAAoB;kBAlBhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,kBAAkB;4BAC7B,MAAM,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC;yBAC9B;qBACF;oBACD,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,sBAAsB;wBACnC,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { ToolbarWidgetGroup } from '@angular/aria/toolbar';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\n@Component({\n  selector: 'div[scToolbarWidgetGroup]',\n  hostDirectives: [\n    {\n      directive: ToolbarWidgetGroup,\n      inputs: ['disabled', 'multi'],\n    },\n  ],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'toolbar-widget-group',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScToolbarWidgetGroup {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('flex items-center gap-0.5', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/toolbar/toolbar-widget.js

@@ -0,0 +1,39 @@
+import { ToolbarWidget } from '@angular/aria/toolbar';
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import { toggleVariants } from '../toggle/toggle';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/toolbar";
+export class ScToolbarWidget {
+    widget = inject(ToolbarWidget);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn(toggleVariants({ variant: 'default', size: 'default' }), 'data-[state=on]:bg-muted', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbarWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbarWidget, isStandalone: true, selector: "button[scToolbarWidget]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar-widget", "type": "button" }, properties: { "attr.data-state": "widget.selected() ? \"on\" : \"off\"", "class": "class()" } }, hostDirectives: [{ directive: i1.ToolbarWidget, inputs: ["value", "value", "disabled", "disabled"] }], 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: ScToolbarWidget, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[scToolbarWidget]',
+                    hostDirectives: [
+                        {
+                            directive: ToolbarWidget,
+                            inputs: ['value', 'disabled'],
+                        },
+                    ],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'toolbar-widget',
+                        type: 'button',
+                        '[attr.data-state]': 'widget.selected() ? "on" : "off"',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=toolbar-widget.js.map

package/esm2022/lib/components/toolbar/toolbar-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-widget.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toolbar/toolbar-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,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,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;AAsBlD,MAAM,OAAO,eAAe;IACP,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAEzC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACvD,0BAA0B,EAC1B,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAXS,eAAe;2FAAf,eAAe,kfAZhB;;GAET;;2FAUU,eAAe;kBApB3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,aAAa;4BACxB,MAAM,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;yBAC9B;qBACF;oBACD,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,gBAAgB;wBAC7B,IAAI,EAAE,QAAQ;wBACd,mBAAmB,EAAE,kCAAkC;wBACvD,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { ToolbarWidget } from '@angular/aria/toolbar';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { toggleVariants } from '../toggle/toggle';\n\n@Component({\n  selector: 'button[scToolbarWidget]',\n  hostDirectives: [\n    {\n      directive: ToolbarWidget,\n      inputs: ['value', 'disabled'],\n    },\n  ],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'toolbar-widget',\n    type: 'button',\n    '[attr.data-state]': 'widget.selected() ? \"on\" : \"off\"',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScToolbarWidget {\n  protected readonly widget = inject(ToolbarWidget);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      toggleVariants({ variant: 'default', size: 'default' }),\n      'data-[state=on]:bg-muted',\n      this.classInput(),\n    ),\n  );\n}\n"]}

package/esm2022/lib/components/toolbar/toolbar.js

@@ -0,0 +1,38 @@
+import { Toolbar } from '@angular/aria/toolbar';
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/toolbar";
+export class ScToolbar {
+    toolbar = inject(Toolbar);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('flex w-fit items-center gap-1 rounded-lg border bg-background p-1', this.toolbar.orientation() === 'vertical' && 'flex-col items-stretch', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ScToolbar, isStandalone: true, selector: "div[scToolbar]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "toolbar" }, properties: { "attr.data-orientation": "toolbar.orientation()", "class": "class()" } }, hostDirectives: [{ directive: i1.Toolbar, inputs: ["orientation", "orientation", "disabled", "disabled", "wrap", "wrap", "values", "values", "softDisabled", "softDisabled"], outputs: ["valuesChange", "valuesChange"] }], 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: ScToolbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[scToolbar]',
+                    hostDirectives: [
+                        {
+                            directive: Toolbar,
+                            inputs: ['orientation', 'disabled', 'wrap', 'values', 'softDisabled'],
+                            outputs: ['valuesChange'],
+                        },
+                    ],
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        'data-slot': 'toolbar',
+                        '[attr.data-orientation]': 'toolbar.orientation()',
+                        '[class]': 'class()',
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/toolbar/toolbar.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;;;AAsBjC,MAAM,OAAO,SAAS;IACD,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEpC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,mEAAmE,EACnE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,IAAI,wBAAwB,EACrE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAXS,SAAS;2FAAT,SAAS,4jBAXV;;GAET;;2FASU,SAAS;kBApBrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EAAE;wBACd;4BACE,SAAS,EAAE,OAAO;4BAClB,MAAM,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC;4BACrE,OAAO,EAAE,CAAC,cAAc,CAAC;yBAC1B;qBACF;oBACD,QAAQ,EAAE;;GAET;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,SAAS;wBACtB,yBAAyB,EAAE,uBAAuB;wBAClD,SAAS,EAAE,SAAS;qBACrB;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD","sourcesContent":["import { Toolbar } from '@angular/aria/toolbar';\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[scToolbar]',\n  hostDirectives: [\n    {\n      directive: Toolbar,\n      inputs: ['orientation', 'disabled', 'wrap', 'values', 'softDisabled'],\n      outputs: ['valuesChange'],\n    },\n  ],\n  template: `\n    <ng-content />\n  `,\n  host: {\n    'data-slot': 'toolbar',\n    '[attr.data-orientation]': 'toolbar.orientation()',\n    '[class]': 'class()',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScToolbar {\n  protected readonly toolbar = inject(Toolbar);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'flex w-fit items-center gap-1 rounded-lg border bg-background p-1',\n      this.toolbar.orientation() === 'vertical' && 'flex-col items-stretch',\n      this.classInput(),\n    ),\n  );\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { ScTooltipTrigger } from './tooltip-trigger';
+export { ScTooltipManager } from './tooltip-manager';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { ScTooltipTrigger } from './tooltip-trigger';\nexport { ScTooltipManager } from './tooltip-manager';\nexport type { ScTooltipPosition } from './tooltip-manager';\n"]}

package/esm2022/lib/components/tooltip/tooltip-manager.js

@@ -0,0 +1,165 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { inject, Injectable, Injector, } from '@angular/core';
+import { ScTooltip, SC_TOOLTIP_DATA } from './tooltip';
+import * as i0 from "@angular/core";
+const positionMap = {
+    top: [
+        {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+        {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+    ],
+    bottom: [
+        {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ],
+    left: [
+        {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -8,
+        },
+        {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 8,
+        },
+    ],
+    right: [
+        {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 8,
+        },
+        {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -8,
+        },
+    ],
+};
+export class ScTooltipManager {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    overlayRef = null;
+    tooltipRef = null;
+    currentTooltipId = null;
+    animationSubscription = null;
+    positionSubscription = null;
+    show(elementRef, config, tooltipId) {
+        // Immediately dispose any existing tooltip (skip close animation to avoid race conditions)
+        if (this.overlayRef) {
+            this.disposeTooltip();
+        }
+        this.currentTooltipId = tooltipId;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(elementRef)
+            .withPositions(positionMap[config.position])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+        });
+        const tooltipInjector = Injector.create({
+            providers: [
+                {
+                    provide: SC_TOOLTIP_DATA,
+                    useValue: {
+                        content: config.content,
+                        tooltipId,
+                    },
+                },
+            ],
+            parent: this.injector,
+        });
+        const portal = new ComponentPortal(ScTooltip, null, tooltipInjector);
+        this.tooltipRef = this.overlayRef.attach(portal);
+        this.overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape')
+                this.hide();
+        });
+        // Track actual position (CDK may flip if not enough space)
+        this.positionSubscription = positionStrategy.positionChanges.subscribe((change) => {
+            const pair = change.connectionPair;
+            let side;
+            if (pair.overlayX === 'center') {
+                side = pair.overlayY === 'bottom' ? 'top' : 'bottom';
+            }
+            else {
+                side = pair.overlayX === 'end' ? 'left' : 'right';
+            }
+            this.tooltipRef?.instance.side.set(side);
+        });
+        // Subscribe to animation completion
+        this.animationSubscription =
+            this.tooltipRef.instance.animationComplete.subscribe(() => {
+                this.disposeTooltip();
+            });
+    }
+    hide() {
+        if (!this.tooltipRef) {
+            return;
+        }
+        // Trigger close animation (will dispose via animationComplete)
+        this.tooltipRef.instance.close();
+    }
+    disposeTooltip() {
+        if (this.positionSubscription) {
+            this.positionSubscription.unsubscribe();
+            this.positionSubscription = null;
+        }
+        if (this.animationSubscription) {
+            this.animationSubscription.unsubscribe();
+            this.animationSubscription = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.tooltipRef = null;
+        this.currentTooltipId = null;
+    }
+    isTooltipVisible(tooltipId) {
+        return this.currentTooltipId === tooltipId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScTooltipManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+//# sourceMappingURL=tooltip-manager.js.map

package/esm2022/lib/components/tooltip/tooltip-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-manager.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/tooltip/tooltip-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n  ComponentRef,\n  ElementRef,\n  inject,\n  Injectable,\n  Injector,\n  OutputRefSubscription,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ScTooltip, SC_TOOLTIP_DATA } from './tooltip';\n\nexport type ScTooltipPosition = 'top' | 'right' | 'bottom' | 'left';\n\nconst positionMap: Record<ScTooltipPosition, ConnectedPosition[]> = {\n  top: [\n    {\n      originX: 'center',\n      originY: 'top',\n      overlayX: 'center',\n      overlayY: 'bottom',\n      offsetY: -8,\n    },\n    {\n      originX: 'center',\n      originY: 'bottom',\n      overlayX: 'center',\n      overlayY: 'top',\n      offsetY: 8,\n    },\n  ],\n  bottom: [\n    {\n      originX: 'center',\n      originY: 'bottom',\n      overlayX: 'center',\n      overlayY: 'top',\n      offsetY: 8,\n    },\n    {\n      originX: 'center',\n      originY: 'top',\n      overlayX: 'center',\n      overlayY: 'bottom',\n      offsetY: -8,\n    },\n  ],\n  left: [\n    {\n      originX: 'start',\n      originY: 'center',\n      overlayX: 'end',\n      overlayY: 'center',\n      offsetX: -8,\n    },\n    {\n      originX: 'end',\n      originY: 'center',\n      overlayX: 'start',\n      overlayY: 'center',\n      offsetX: 8,\n    },\n  ],\n  right: [\n    {\n      originX: 'end',\n      originY: 'center',\n      overlayX: 'start',\n      overlayY: 'center',\n      offsetX: 8,\n    },\n    {\n      originX: 'start',\n      originY: 'center',\n      overlayX: 'end',\n      overlayY: 'center',\n      offsetX: -8,\n    },\n  ],\n};\n\nexport interface ScTooltipConfig {\n  content: string;\n  position: ScTooltipPosition;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class ScTooltipManager {\n  private readonly overlay = inject(Overlay);\n  private readonly injector = inject(Injector);\n\n  private overlayRef: OverlayRef | null = null;\n  private tooltipRef: ComponentRef<ScTooltip> | null = null;\n  private currentTooltipId: string | null = null;\n  private animationSubscription: OutputRefSubscription | null = null;\n  private positionSubscription: Subscription | null = null;\n\n  show(\n    elementRef: ElementRef,\n    config: ScTooltipConfig,\n    tooltipId: string,\n  ): void {\n    // Immediately dispose any existing tooltip (skip close animation to avoid race conditions)\n    if (this.overlayRef) {\n      this.disposeTooltip();\n    }\n\n    this.currentTooltipId = tooltipId;\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(elementRef)\n      .withPositions(positionMap[config.position])\n      .withPush(true);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: false,\n    });\n\n    const tooltipInjector = Injector.create({\n      providers: [\n        {\n          provide: SC_TOOLTIP_DATA,\n          useValue: {\n            content: config.content,\n            tooltipId,\n          },\n        },\n      ],\n      parent: this.injector,\n    });\n\n    const portal = new ComponentPortal(ScTooltip, null, tooltipInjector);\n\n    this.tooltipRef = this.overlayRef.attach(portal);\n\n    this.overlayRef.keydownEvents().subscribe((event) => {\n      if (event.key === 'Escape') this.hide();\n    });\n\n    // Track actual position (CDK may flip if not enough space)\n    this.positionSubscription = positionStrategy.positionChanges.subscribe(\n      (change) => {\n        const pair = change.connectionPair;\n        let side: ScTooltipPosition;\n\n        if (pair.overlayX === 'center') {\n          side = pair.overlayY === 'bottom' ? 'top' : 'bottom';\n        } else {\n          side = pair.overlayX === 'end' ? 'left' : 'right';\n        }\n\n        this.tooltipRef?.instance.side.set(side);\n      },\n    );\n\n    // Subscribe to animation completion\n    this.animationSubscription =\n      this.tooltipRef.instance.animationComplete.subscribe(() => {\n        this.disposeTooltip();\n      });\n  }\n\n  hide(): void {\n    if (!this.tooltipRef) {\n      return;\n    }\n\n    // Trigger close animation (will dispose via animationComplete)\n    this.tooltipRef.instance.close();\n  }\n\n  private disposeTooltip(): void {\n    if (this.positionSubscription) {\n      this.positionSubscription.unsubscribe();\n      this.positionSubscription = null;\n    }\n\n    if (this.animationSubscription) {\n      this.animationSubscription.unsubscribe();\n      this.animationSubscription = null;\n    }\n\n    if (this.overlayRef) {\n      this.overlayRef.dispose();\n      this.overlayRef = null;\n    }\n\n    this.tooltipRef = null;\n    this.currentTooltipId = null;\n  }\n\n  isTooltipVisible(tooltipId: string): boolean {\n    return this.currentTooltipId === tooltipId;\n  }\n}\n"]}