@ojiepermana/angular 21.3.4 → 22.0.1

package/fesm2022/ojiepermana-angular-component-tooltip.mjs

@@ -1,8 +1,305 @@
 import * as i0 from '@angular/core';
-import { inject, input, effect, Directive } from '@angular/core';
+import { InjectionToken, input, forwardRef, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, effect } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import * as i1 from '@angular/material/tooltip';
 import { MatTooltip } from '@angular/material/tooltip';
 
+const TOOLTIP_DEFAULTS = new InjectionToken('TOOLTIP_DEFAULTS');
+class TooltipComponent {
+    side = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(150, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: TooltipComponent, isStandalone: true, selector: "ui-tooltip", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tooltip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+class TooltipContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[uiTooltipContent]", exportAs: ["uiTooltipContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiTooltipContent]',
+                    exportAs: 'uiTooltipContent',
+                }]
+        }] });
+
+const TOOLTIP_PANEL_CLASSES = [
+    'ui-tooltip-panel',
+    'pointer-events-none',
+    'z-50',
+    'max-w-xs',
+    'overflow-hidden',
+    'rounded-md',
+    'border',
+    'border-border',
+    'bg-primary',
+    'px-3',
+    'py-1.5',
+    'text-xs',
+    'font-medium',
+    'leading-none',
+    'text-primary-foreground',
+    'shadow-md',
+    'select-none',
+];
+const POSITION_ANCHORS = {
+    top: (align) => ({
+        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        originY: 'top',
+        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        overlayY: 'bottom',
+    }),
+    bottom: (align) => ({
+        originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        originY: 'bottom',
+        overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',
+        overlayY: 'top',
+    }),
+    left: (align) => ({
+        originX: 'start',
+        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+        overlayX: 'end',
+        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+    }),
+    right: (align) => ({
+        originX: 'end',
+        originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+        overlayX: 'start',
+        overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',
+    }),
+};
+function positionFor(side, align, sideOffset) {
+    const anchor = POSITION_ANCHORS[side](align);
+    if (side === 'top') {
+        return { ...anchor, offsetY: -sideOffset };
+    }
+    if (side === 'bottom') {
+        return { ...anchor, offsetY: sideOffset };
+    }
+    if (side === 'left') {
+        return { ...anchor, offsetX: -sideOffset };
+    }
+    return { ...anchor, offsetX: sideOffset };
+}
+let nextTooltipId = 0;
+class TooltipTriggerDirective {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    defaults = inject(TOOLTIP_DEFAULTS, { optional: true });
+    uiTooltipTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiTooltipTrigger" }] : /* istanbul ignore next */ []));
+    side = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    openDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    openedChange = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    contentId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    openTimeoutId = null;
+    closeTimeoutId = null;
+    isPointerInsideTrigger = false;
+    isTriggerFocused = false;
+    isDestroying = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.isDestroying = true;
+            this.clearOpenTimeout();
+            this.clearCloseTimeout();
+            this.contentId.set(null);
+            this.isOpen.set(false);
+            this.overlayRef?.dispose();
+            this.overlayRef = null;
+        });
+    }
+    handlePointerEnter() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isPointerInsideTrigger = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handlePointerLeave(event) {
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isPointerInsideTrigger = false;
+        this.scheduleClose();
+    }
+    handleFocusIn() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isTriggerFocused = true;
+        this.clearCloseTimeout();
+        this.scheduleOpen();
+    }
+    handleFocusOut(event) {
+        if (this.el.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.isTriggerFocused = false;
+        this.scheduleClose();
+    }
+    open() {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        const side = this.side() ?? this.defaults?.side() ?? 'top';
+        const align = this.align() ?? this.defaults?.align() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset() ?? 4;
+        const primary = positionFor(side, align, sideOffset);
+        const fallback = positionFor(this.oppositeSide(side), align, sideOffset);
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.el)
+            .withPositions([primary, fallback])
+            .withPush(false)
+            .withFlexibleDimensions(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: [...TOOLTIP_PANEL_CLASSES],
+        });
+        const tooltipId = `ui-tooltip-${nextTooltipId++}`;
+        this.overlayRef.overlayElement.id = tooltipId;
+        this.overlayRef.overlayElement.setAttribute('role', 'tooltip');
+        const portal = new TemplatePortal(this.uiTooltipTrigger().template, this.vcr);
+        this.overlayRef.attach(portal);
+        this.bindOverlayLifecycle();
+        this.contentId.set(tooltipId);
+        this.isOpen.set(true);
+        if (!this.isDestroying) {
+            this.openedChange.emit(true);
+        }
+    }
+    close() {
+        this.clearOpenTimeout();
+        this.clearCloseTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.contentId.set(null);
+        this.isOpen.set(false);
+        if (!this.isDestroying) {
+            this.openedChange.emit(false);
+        }
+    }
+    bindOverlayLifecycle() {
+        if (!this.overlayRef) {
+            return;
+        }
+        merge(this.overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => !this.el.nativeElement.contains(event.target))), this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), this.overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    scheduleOpen() {
+        this.clearCloseTimeout();
+        if (this.isOpen()) {
+            return;
+        }
+        this.clearOpenTimeout();
+        this.openTimeoutId = window.setTimeout(() => {
+            this.openTimeoutId = null;
+            if (this.disabled() || (!this.isPointerInsideTrigger && !this.isTriggerFocused)) {
+                return;
+            }
+            this.open();
+        }, this.openDelay() ?? this.defaults?.openDelay() ?? 150);
+    }
+    scheduleClose() {
+        this.clearOpenTimeout();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.clearCloseTimeout();
+        this.closeTimeoutId = window.setTimeout(() => {
+            this.closeTimeoutId = null;
+            if (this.isPointerInsideTrigger || this.isTriggerFocused) {
+                return;
+            }
+            this.close();
+        }, this.closeDelay() ?? this.defaults?.closeDelay() ?? 0);
+    }
+    clearOpenTimeout() {
+        if (this.openTimeoutId !== null) {
+            window.clearTimeout(this.openTimeoutId);
+            this.openTimeoutId = null;
+        }
+    }
+    clearCloseTimeout() {
+        if (this.closeTimeoutId !== null) {
+            window.clearTimeout(this.closeTimeoutId);
+            this.closeTimeoutId = null;
+        }
+    }
+    oppositeSide(side) {
+        return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: TooltipTriggerDirective, isStandalone: true, selector: "[uiTooltipTrigger]", inputs: { uiTooltipTrigger: { classPropertyName: "uiTooltipTrigger", publicName: "uiTooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "pointerenter": "handlePointerEnter()", "pointerleave": "handlePointerLeave($event)", "focusin": "handleFocusIn()", "focusout": "handleFocusOut($event)", "keydown.escape": "close()" }, properties: { "attr.aria-describedby": "contentId()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["uiTooltipTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTooltipTrigger]',
+                    exportAs: 'uiTooltipTrigger',
+                    host: {
+                        '[attr.aria-describedby]': 'contentId()',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '(pointerenter)': 'handlePointerEnter()',
+                        '(pointerleave)': 'handlePointerLeave($event)',
+                        '(focusin)': 'handleFocusIn()',
+                        '(focusout)': 'handleFocusOut($event)',
+                        '(keydown.escape)': 'close()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { uiTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiTooltipTrigger", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
 /**
  * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that
  * forces the shadcn panel class and sensible defaults.
@@ -12,7 +309,8 @@ import { MatTooltip } from '@angular/material/tooltip';
  */
 class TooltipDirective {
     tooltip = inject(MatTooltip, { host: true });
-    uiTooltip = input('', ...(ngDevMode ? [{ debugName: "uiTooltip" }] : /* istanbul ignore next */ []));
+    uiTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiTooltip" }] : /* istanbul ignore next */ []));
     constructor() {
         this.tooltip.tooltipClass = 'ui-tooltip-panel';
         effect(() => {
@@ -25,10 +323,10 @@ class TooltipDirective {
     hide() {
         this.tooltip.hide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: TooltipDirective, isStandalone: true, selector: "[uiTooltip]", inputs: { uiTooltip: { classPropertyName: "uiTooltip", publicName: "uiTooltip", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["uiTooltip"], hostDirectives: [{ directive: i1.MatTooltip, inputs: ["matTooltipPosition", "uiTooltipPosition", "matTooltipDisabled", "uiTooltipDisabled", "matTooltipShowDelay", "uiTooltipShowDelay", "matTooltipHideDelay", "uiTooltipHideDelay", "matTooltipTouchGestures", "uiTooltipTouchGestures"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: TooltipDirective, isStandalone: true, selector: "[uiTooltip]", inputs: { uiTooltip: { classPropertyName: "uiTooltip", publicName: "uiTooltip", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["uiTooltip"], hostDirectives: [{ directive: i1.MatTooltip, inputs: ["matTooltipPosition", "uiTooltipPosition", "matTooltipDisabled", "uiTooltipDisabled", "matTooltipShowDelay", "uiTooltipShowDelay", "matTooltipHideDelay", "uiTooltipHideDelay", "matTooltipTouchGestures", "uiTooltipTouchGestures"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiTooltip]',
@@ -52,5 +350,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TooltipDirective };
+export { TOOLTIP_DEFAULTS, TooltipComponent, TooltipContentDirective, TooltipDirective, TooltipTriggerDirective };
 //# sourceMappingURL=ojiepermana-angular-component-tooltip.mjs.map

package/fesm2022/ojiepermana-angular-component-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-tooltip.mjs","sources":["../../../projects/angular/component/tooltip/src/lib/tooltip.directive.ts","../../../projects/angular/component/tooltip/ojiepermana-angular-component-tooltip.ts"],"sourcesContent":["import { Directive, effect, inject, input } from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\n/**\n * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that\n * forces the shadcn panel class and sensible defaults.\n *\n * @example\n * <button ui-button [uiTooltip]=\"'Save changes'\" uiTooltipPosition=\"above\">Save</button>\n */\n@Directive({\n  selector: '[uiTooltip]',\n  hostDirectives: [\n    {\n      directive: MatTooltip,\n      inputs: [\n        'matTooltipPosition: uiTooltipPosition',\n        'matTooltipDisabled: uiTooltipDisabled',\n        'matTooltipShowDelay: uiTooltipShowDelay',\n        'matTooltipHideDelay: uiTooltipHideDelay',\n        'matTooltipTouchGestures: uiTooltipTouchGestures',\n      ],\n    },\n  ],\n  exportAs: 'uiTooltip',\n})\nexport class TooltipDirective {\n  private readonly tooltip = inject(MatTooltip, { host: true });\n\n  readonly uiTooltip = input<string>('');\n\n  constructor() {\n    this.tooltip.tooltipClass = 'ui-tooltip-panel';\n    effect(() => {\n      this.tooltip.message = this.uiTooltip();\n    });\n  }\n\n  show(): void {\n    this.tooltip.show();\n  }\n\n  hide(): void {\n    this.tooltip.hide();\n  }\n}\n\nexport type { TooltipPosition };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMG;MAiBU,gBAAgB,CAAA;IACV,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEpD,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAEtC,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,kBAAkB;QAC9C,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE;AACzC,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;IACrB;wGAlBW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,yBAAA,EAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAhB5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,UAAU;AACrB,4BAAA,MAAM,EAAE;gCACN,uCAAuC;gCACvC,uCAAuC;gCACvC,yCAAyC;gCACzC,yCAAyC;gCACzC,iDAAiD;AAClD,6BAAA;AACF,yBAAA;AACF,qBAAA;AACD,oBAAA,QAAQ,EAAE,WAAW;AACtB,iBAAA;;;ACzBD;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-component-tooltip.mjs","sources":["../../../projects/angular/component/tooltip/tooltip.component.ts","../../../projects/angular/component/tooltip/tooltip-content.directive.ts","../../../projects/angular/component/tooltip/tooltip-trigger.directive.ts","../../../projects/angular/component/tooltip/tooltip.directive.ts","../../../projects/angular/component/tooltip/ojiepermana-angular-component-tooltip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, InjectionToken, Signal, forwardRef, input } from '@angular/core';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipDefaults {\n  readonly side: Signal<TooltipSide>;\n  readonly align: Signal<TooltipAlign>;\n  readonly sideOffset: Signal<number>;\n  readonly openDelay: Signal<number>;\n  readonly closeDelay: Signal<number>;\n}\n\nexport const TOOLTIP_DEFAULTS = new InjectionToken<TooltipDefaults>('TOOLTIP_DEFAULTS');\n\n@Component({\n  selector: 'ui-tooltip',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }],\n  host: {\n    class: 'contents',\n  },\n  template: '<ng-content />',\n})\nexport class TooltipComponent implements TooltipDefaults {\n  readonly side = input<TooltipSide>('top');\n  readonly align = input<TooltipAlign>('center');\n  readonly sideOffset = input(4);\n  readonly openDelay = input(150);\n  readonly closeDelay = input(0);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[uiTooltipContent]',\n  exportAs: 'uiTooltipContent',\n})\nexport class TooltipContentDirective {\n  readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n","import { Overlay, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { DestroyRef, Directive, ElementRef, ViewContainerRef, inject, input, output, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\n\nimport { TOOLTIP_DEFAULTS, type TooltipAlign, type TooltipSide } from './tooltip.component';\nimport type { TooltipContentDirective } from './tooltip-content.directive';\n\nconst TOOLTIP_PANEL_CLASSES = [\n  'ui-tooltip-panel',\n  'pointer-events-none',\n  'z-50',\n  'max-w-xs',\n  'overflow-hidden',\n  'rounded-md',\n  'border',\n  'border-border',\n  'bg-primary',\n  'px-3',\n  'py-1.5',\n  'text-xs',\n  'font-medium',\n  'leading-none',\n  'text-primary-foreground',\n  'shadow-md',\n  'select-none',\n] as const;\n\nconst POSITION_ANCHORS: Record<TooltipSide, (align: TooltipAlign) => ConnectedPosition> = {\n  top: (align) => ({\n    originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    originY: 'top',\n    overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    overlayY: 'bottom',\n  }),\n  bottom: (align) => ({\n    originX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    originY: 'bottom',\n    overlayX: align === 'start' ? 'start' : align === 'end' ? 'end' : 'center',\n    overlayY: 'top',\n  }),\n  left: (align) => ({\n    originX: 'start',\n    originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n    overlayX: 'end',\n    overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n  }),\n  right: (align) => ({\n    originX: 'end',\n    originY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n    overlayX: 'start',\n    overlayY: align === 'start' ? 'top' : align === 'end' ? 'bottom' : 'center',\n  }),\n};\n\nfunction positionFor(side: TooltipSide, align: TooltipAlign, sideOffset: number): ConnectedPosition {\n  const anchor = POSITION_ANCHORS[side](align);\n\n  if (side === 'top') {\n    return { ...anchor, offsetY: -sideOffset };\n  }\n\n  if (side === 'bottom') {\n    return { ...anchor, offsetY: sideOffset };\n  }\n\n  if (side === 'left') {\n    return { ...anchor, offsetX: -sideOffset };\n  }\n\n  return { ...anchor, offsetX: sideOffset };\n}\n\nlet nextTooltipId = 0;\n\n@Directive({\n  selector: '[uiTooltipTrigger]',\n  exportAs: 'uiTooltipTrigger',\n  host: {\n    '[attr.aria-describedby]': 'contentId()',\n    '[attr.data-state]': 'isOpen() ? \"open\" : \"closed\"',\n    '(pointerenter)': 'handlePointerEnter()',\n    '(pointerleave)': 'handlePointerLeave($event)',\n    '(focusin)': 'handleFocusIn()',\n    '(focusout)': 'handleFocusOut($event)',\n    '(keydown.escape)': 'close()',\n  },\n})\nexport class TooltipTriggerDirective {\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly defaults = inject(TOOLTIP_DEFAULTS, { optional: true });\n\n  readonly uiTooltipTrigger = input.required<TooltipContentDirective>();\n  readonly side = input<TooltipSide | undefined>(undefined);\n  readonly align = input<TooltipAlign | undefined>(undefined);\n  readonly sideOffset = input<number | undefined>(undefined);\n  readonly openDelay = input<number | undefined>(undefined);\n  readonly closeDelay = input<number | undefined>(undefined);\n  readonly disabled = input(false);\n\n  readonly openedChange = output<boolean>();\n\n  readonly isOpen = signal(false);\n  protected readonly contentId = signal<string | null>(null);\n\n  private overlayRef: OverlayRef | null = null;\n  private openTimeoutId: number | null = null;\n  private closeTimeoutId: number | null = null;\n  private isPointerInsideTrigger = false;\n  private isTriggerFocused = false;\n  private isDestroying = false;\n\n  constructor() {\n    this.destroyRef.onDestroy(() => {\n      this.isDestroying = true;\n      this.clearOpenTimeout();\n      this.clearCloseTimeout();\n      this.contentId.set(null);\n      this.isOpen.set(false);\n      this.overlayRef?.dispose();\n      this.overlayRef = null;\n    });\n  }\n\n  handlePointerEnter(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.isPointerInsideTrigger = true;\n    this.clearCloseTimeout();\n    this.scheduleOpen();\n  }\n\n  handlePointerLeave(event: PointerEvent): void {\n    if (this.el.nativeElement.contains(event.relatedTarget as Node | null)) {\n      return;\n    }\n\n    this.isPointerInsideTrigger = false;\n    this.scheduleClose();\n  }\n\n  handleFocusIn(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.isTriggerFocused = true;\n    this.clearCloseTimeout();\n    this.scheduleOpen();\n  }\n\n  handleFocusOut(event: FocusEvent): void {\n    if (this.el.nativeElement.contains(event.relatedTarget as Node | null)) {\n      return;\n    }\n\n    this.isTriggerFocused = false;\n    this.scheduleClose();\n  }\n\n  open(): void {\n    if (this.isOpen() || this.disabled()) {\n      return;\n    }\n\n    const side = this.side() ?? this.defaults?.side() ?? 'top';\n    const align = this.align() ?? this.defaults?.align() ?? 'center';\n    const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset() ?? 4;\n\n    const primary = positionFor(side, align, sideOffset);\n    const fallback = positionFor(this.oppositeSide(side), align, sideOffset);\n\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.el)\n      .withPositions([primary, fallback])\n      .withPush(false)\n      .withFlexibleDimensions(false);\n\n    this.overlayRef = this.overlay.create({\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: false,\n      panelClass: [...TOOLTIP_PANEL_CLASSES],\n    });\n\n    const tooltipId = `ui-tooltip-${nextTooltipId++}`;\n    this.overlayRef.overlayElement.id = tooltipId;\n    this.overlayRef.overlayElement.setAttribute('role', 'tooltip');\n\n    const portal = new TemplatePortal(this.uiTooltipTrigger().template, this.vcr);\n    this.overlayRef.attach(portal);\n    this.bindOverlayLifecycle();\n\n    this.contentId.set(tooltipId);\n    this.isOpen.set(true);\n\n    if (!this.isDestroying) {\n      this.openedChange.emit(true);\n    }\n  }\n\n  close(): void {\n    this.clearOpenTimeout();\n    this.clearCloseTimeout();\n\n    if (!this.isOpen()) {\n      return;\n    }\n\n    this.overlayRef?.dispose();\n    this.overlayRef = null;\n    this.contentId.set(null);\n    this.isOpen.set(false);\n\n    if (!this.isDestroying) {\n      this.openedChange.emit(false);\n    }\n  }\n\n  private bindOverlayLifecycle(): void {\n    if (!this.overlayRef) {\n      return;\n    }\n\n    merge(\n      this.overlayRef\n        .outsidePointerEvents()\n        .pipe(filter((event) => !this.el.nativeElement.contains(event.target as Node))),\n      this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')),\n      this.overlayRef.detachments(),\n    )\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.close());\n  }\n\n  private scheduleOpen(): void {\n    this.clearCloseTimeout();\n\n    if (this.isOpen()) {\n      return;\n    }\n\n    this.clearOpenTimeout();\n    this.openTimeoutId = window.setTimeout(\n      () => {\n        this.openTimeoutId = null;\n\n        if (this.disabled() || (!this.isPointerInsideTrigger && !this.isTriggerFocused)) {\n          return;\n        }\n\n        this.open();\n      },\n      this.openDelay() ?? this.defaults?.openDelay() ?? 150,\n    );\n  }\n\n  private scheduleClose(): void {\n    this.clearOpenTimeout();\n\n    if (!this.isOpen()) {\n      return;\n    }\n\n    this.clearCloseTimeout();\n    this.closeTimeoutId = window.setTimeout(\n      () => {\n        this.closeTimeoutId = null;\n\n        if (this.isPointerInsideTrigger || this.isTriggerFocused) {\n          return;\n        }\n\n        this.close();\n      },\n      this.closeDelay() ?? this.defaults?.closeDelay() ?? 0,\n    );\n  }\n\n  private clearOpenTimeout(): void {\n    if (this.openTimeoutId !== null) {\n      window.clearTimeout(this.openTimeoutId);\n      this.openTimeoutId = null;\n    }\n  }\n\n  private clearCloseTimeout(): void {\n    if (this.closeTimeoutId !== null) {\n      window.clearTimeout(this.closeTimeoutId);\n      this.closeTimeoutId = null;\n    }\n  }\n\n  private oppositeSide(side: TooltipSide): TooltipSide {\n    return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';\n  }\n}\n","import { Directive, effect, inject, input } from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\n/**\n * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that\n * forces the shadcn panel class and sensible defaults.\n *\n * @example\n * <button ui-button [uiTooltip]=\"'Save changes'\" uiTooltipPosition=\"above\">Save</button>\n */\n@Directive({\n  selector: '[uiTooltip]',\n  hostDirectives: [\n    {\n      directive: MatTooltip,\n      inputs: [\n        'matTooltipPosition: uiTooltipPosition',\n        'matTooltipDisabled: uiTooltipDisabled',\n        'matTooltipShowDelay: uiTooltipShowDelay',\n        'matTooltipHideDelay: uiTooltipHideDelay',\n        'matTooltipTouchGestures: uiTooltipTouchGestures',\n      ],\n    },\n  ],\n  exportAs: 'uiTooltip',\n})\nexport class TooltipDirective {\n  private readonly tooltip = inject(MatTooltip, { host: true });\n\n  readonly uiTooltip = input<string>('');\n\n  constructor() {\n    this.tooltip.tooltipClass = 'ui-tooltip-panel';\n    effect(() => {\n      this.tooltip.message = this.uiTooltip();\n    });\n  }\n\n  show(): void {\n    this.tooltip.show();\n  }\n\n  hide(): void {\n    this.tooltip.hide();\n  }\n}\n\nexport type { TooltipPosition };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-component-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-component-utils.mjs","sources":["../../../projects/angular/component/utils/src/lib/cn.util.ts","../../../projects/angular/component/utils/ojiepermana-angular-component-utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAGM,SAAU,EAAE,CAAC,GAAG,MAAoB,EAAA;AACxC,IAAA,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B;;ACLA;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-component-utils.mjs","sources":["../../../projects/angular/component/utils/cn.util.ts","../../../projects/angular/component/utils/ojiepermana-angular-component-utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAGM,SAAU,EAAE,CAAC,GAAG,MAAoB,EAAA;AACxC,IAAA,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B;;ACLA;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-layout-component.mjs

@@ -51,37 +51,58 @@ class ThemePanelComponent {
     sanitizer = inject(DomSanitizer);
     themePort = inject(THEME_PANEL_THEME_PORT, { optional: true });
     layoutPort = inject(THEME_PANEL_LAYOUT_PORT, { optional: true });
-    connected = input(true, ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    title = input('Theme panel', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    userName = input('', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-    userSubtitle = input('', ...(ngDevMode ? [{ debugName: "userSubtitle" }] : /* istanbul ignore next */ []));
-    userInitials = input('', ...(ngDevMode ? [{ debugName: "userInitials" }] : /* istanbul ignore next */ []));
-    themeColor = input('base', ...(ngDevMode ? [{ debugName: "themeColor" }] : /* istanbul ignore next */ []));
-    themeMode = input('light', ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
-    themeStyle = input('default', ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
-    layoutMode = input('vertical', ...(ngDevMode ? [{ debugName: "layoutMode" }] : /* istanbul ignore next */ []));
-    layoutWidth = input('container', ...(ngDevMode ? [{ debugName: "layoutWidth" }] : /* istanbul ignore next */ []));
+    connected = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    title = input('Theme panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    userName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
+    userSubtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userSubtitle" }] : /* istanbul ignore next */ []));
+    userInitials = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userInitials" }] : /* istanbul ignore next */ []));
+    themeColor = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeColor" }] : /* istanbul ignore next */ []));
+    themeMode = input('light', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeMode" }] : /* istanbul ignore next */ []));
+    themeStyle = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeStyle" }] : /* istanbul ignore next */ []));
+    layoutMode = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutMode" }] : /* istanbul ignore next */ []));
+    layoutWidth = input('container', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutWidth" }] : /* istanbul ignore next */ []));
     themeColorChange = output();
     themeModeChange = output();
     themeStyleChange = output();
     layoutModeChange = output();
     layoutWidthChange = output();
-    currentThemeColor = signal(this.themeColor(), ...(ngDevMode ? [{ debugName: "currentThemeColor" }] : /* istanbul ignore next */ []));
-    currentThemeMode = signal(this.themeMode(), ...(ngDevMode ? [{ debugName: "currentThemeMode" }] : /* istanbul ignore next */ []));
-    currentThemeStyle = signal(this.themeStyle(), ...(ngDevMode ? [{ debugName: "currentThemeStyle" }] : /* istanbul ignore next */ []));
-    currentLayoutMode = signal(this.layoutMode(), ...(ngDevMode ? [{ debugName: "currentLayoutMode" }] : /* istanbul ignore next */ []));
-    currentLayoutWidth = signal(this.layoutWidth(), ...(ngDevMode ? [{ debugName: "currentLayoutWidth" }] : /* istanbul ignore next */ []));
+    currentThemeColor = signal(this.themeColor(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentThemeColor" }] : /* istanbul ignore next */ []));
+    currentThemeMode = signal(this.themeMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentThemeMode" }] : /* istanbul ignore next */ []));
+    currentThemeStyle = signal(this.themeStyle(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentThemeStyle" }] : /* istanbul ignore next */ []));
+    currentLayoutMode = signal(this.layoutMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLayoutMode" }] : /* istanbul ignore next */ []));
+    currentLayoutWidth = signal(this.layoutWidth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLayoutWidth" }] : /* istanbul ignore next */ []));
     themeColorOptions = THEME_COLOR_OPTIONS;
     themeModeOptions = THEME_MODE_OPTIONS;
     themeStyleOptions = THEME_STYLE_OPTIONS;
     layoutModeOptions = LAYOUT_MODE_OPTIONS;
     layoutWidthOptions = LAYOUT_WIDTH_OPTIONS;
-    hostClasses = computed(() => cn('block overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-sm', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    hasUserHeader = computed(() => !!this.userName().trim() || !!this.userSubtitle().trim(), ...(ngDevMode ? [{ debugName: "hasUserHeader" }] : /* istanbul ignore next */ []));
-    resolvedUserInitials = computed(() => this.userInitials().trim() || this.toInitials(this.userName() || this.title()), ...(ngDevMode ? [{ debugName: "resolvedUserInitials" }] : /* istanbul ignore next */ []));
-    currentThemeColorLabel = computed(() => this.themeColorOptions.find((option) => option.value === this.currentThemeColor())?.label ?? '', ...(ngDevMode ? [{ debugName: "currentThemeColorLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    hasUserHeader = computed(() => !!this.userName().trim() || !!this.userSubtitle().trim(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasUserHeader" }] : /* istanbul ignore next */ []));
+    resolvedUserInitials = computed(() => this.userInitials().trim() || this.toInitials(this.userName() || this.title()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedUserInitials" }] : /* istanbul ignore next */ []));
+    currentThemeColorLabel = computed(() => this.themeColorOptions.find((option) => option.value === this.currentThemeColor())?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentThemeColorLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             this.currentThemeColor.set(this.connected() && this.themePort ? this.themePort.color() : this.themeColor());
@@ -187,8 +208,8 @@ class ThemePanelComponent {
         }
         return words.map((word) => word[0]?.toUpperCase() ?? '').join('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ThemePanelComponent, isStandalone: true, selector: "ui-theme-panel", inputs: { connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: false, transformFunction: null }, themeColor: { classPropertyName: "themeColor", publicName: "themeColor", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, themeStyle: { classPropertyName: "themeStyle", publicName: "themeStyle", isSignal: true, isRequired: false, transformFunction: null }, layoutMode: { classPropertyName: "layoutMode", publicName: "layoutMode", isSignal: true, isRequired: false, transformFunction: null }, layoutWidth: { classPropertyName: "layoutWidth", publicName: "layoutWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeColorChange: "themeColorChange", themeModeChange: "themeModeChange", themeStyleChange: "themeStyleChange", layoutModeChange: "layoutModeChange", layoutWidthChange: "layoutWidthChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ThemePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ThemePanelComponent, isStandalone: true, selector: "ui-theme-panel", inputs: { connected: { classPropertyName: "connected", publicName: "connected", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: false, transformFunction: null }, themeColor: { classPropertyName: "themeColor", publicName: "themeColor", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, themeStyle: { classPropertyName: "themeStyle", publicName: "themeStyle", isSignal: true, isRequired: false, transformFunction: null }, layoutMode: { classPropertyName: "layoutMode", publicName: "layoutMode", isSignal: true, isRequired: false, transformFunction: null }, layoutWidth: { classPropertyName: "layoutWidth", publicName: "layoutWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeColorChange: "themeColorChange", themeModeChange: "themeModeChange", themeStyleChange: "themeStyleChange", layoutModeChange: "layoutModeChange", layoutWidthChange: "layoutWidthChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <div class="flex flex-col gap-4 p-4">
       @if (hasUserHeader()) {
         <header class="flex items-center gap-3 px-1 pt-1">
@@ -375,7 +396,7 @@ class ThemePanelComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ThemePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ThemePanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-theme-panel',