@ojiepermana/angular 21.1.23 → 21.1.25

package/fesm2022/ojiepermana-angular-component.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject, signal, output, viewChild, ElementRef, DestroyRef, ViewContainerRef, effect, untracked, ContentChildren, TemplateRef, Injectable } from '@angular/core';
+import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject, signal, output, viewChild, ElementRef, DestroyRef, ViewContainerRef, effect, untracked, ContentChildren, TemplateRef, Injectable, InjectionToken } from '@angular/core';
 import { cva } from 'class-variance-authority';
 import { MatCalendar, MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
 import * as i1 from '@angular/forms';
@@ -23,6 +23,7 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltip } from '@angular/material/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Concatenate and dedupe Tailwind class names.
@@ -2342,6 +2343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }] });
 
+const POPOVER_TRIGGER_DEFAULTS = new InjectionToken('POPOVER_TRIGGER_DEFAULTS');
 const POSITION_ANCHORS = {
     top: (a) => ({
         originX: a === 'start' ? 'start' : a === 'end' ? 'end' : 'center',
@@ -2395,10 +2397,11 @@ class PopoverTriggerDirective {
     vcr = inject(ViewContainerRef);
     el = inject(ElementRef);
     destroyRef = inject(DestroyRef);
+    defaults = inject(POPOVER_TRIGGER_DEFAULTS, { optional: true });
     uiPopoverTrigger = input.required(...(ngDevMode ? [{ debugName: "uiPopoverTrigger" }] : /* istanbul ignore next */ []));
-    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    sideOffset = input(8, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    side = input(undefined, ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = input(undefined, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     openedChange = output();
     overlayRef = null;
@@ -2408,11 +2411,21 @@ class PopoverTriggerDirective {
             return;
         this.isOpen() ? this.close() : this.open();
     }
+    onKeyboardToggle(event) {
+        if (this.disabled() || this.usesNativeKeyboardActivation()) {
+            return;
+        }
+        event.preventDefault();
+        this.toggle();
+    }
     open() {
         if (this.isOpen() || this.disabled())
             return;
-        const primary = positionFor(this.side(), this.align(), this.sideOffset());
-        const fallback = positionFor(this.oppositeSide(this.side()), this.align(), this.sideOffset());
+        const side = this.side() ?? this.defaults?.side?.() ?? 'bottom';
+        const align = this.align() ?? this.defaults?.align?.() ?? 'center';
+        const sideOffset = this.sideOffset() ?? this.defaults?.sideOffset?.() ?? 8;
+        const primary = positionFor(side, align, sideOffset);
+        const fallback = positionFor(this.oppositeSide(side), align, sideOffset);
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.el)
@@ -2444,8 +2457,18 @@ class PopoverTriggerDirective {
     oppositeSide(side) {
         return side === 'top' ? 'bottom' : side === 'bottom' ? 'top' : side === 'left' ? 'right' : 'left';
     }
+    usesNativeKeyboardActivation() {
+        const host = this.el.nativeElement;
+        const tagName = host.tagName;
+        return (tagName === 'BUTTON' ||
+            tagName === 'INPUT' ||
+            tagName === 'SELECT' ||
+            tagName === 'TEXTAREA' ||
+            tagName === 'SUMMARY' ||
+            (tagName === 'A' && host.hasAttribute('href')));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: PopoverTriggerDirective, isStandalone: true, selector: "[uiPopoverTrigger]", inputs: { uiPopoverTrigger: { classPropertyName: "uiPopoverTrigger", publicName: "uiPopoverTrigger", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["uiPopoverTrigger"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: PopoverTriggerDirective, isStandalone: true, selector: "[uiPopoverTrigger]", inputs: { uiPopoverTrigger: { classPropertyName: "uiPopoverTrigger", publicName: "uiPopoverTrigger", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "onKeyboardToggle($event)", "keydown.space": "onKeyboardToggle($event)", "keydown.escape": "close()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["uiPopoverTrigger"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
             type: Directive,
@@ -2456,6 +2479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.aria-expanded]': 'isOpen()',
                         '[attr.aria-haspopup]': '"dialog"',
                         '(click)': 'toggle()',
+                        '(keydown.enter)': 'onKeyboardToggle($event)',
+                        '(keydown.space)': 'onKeyboardToggle($event)',
                         '(keydown.escape)': 'close()',
                     },
                 }]
@@ -3462,6 +3487,575 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { uiTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiTooltip", required: false }] }] } });
 
+const THEME_PANEL_THEME_PORT = new InjectionToken('THEME_PANEL_THEME_PORT');
+const THEME_PANEL_LAYOUT_PORT = new InjectionToken('THEME_PANEL_LAYOUT_PORT');
+const THEME_COLOR_OPTIONS = [
+    { value: 'base', label: 'Base', swatchClass: 'bg-zinc-800' },
+    { value: 'red', label: 'Red', swatchClass: 'bg-red-500' },
+    { value: 'orange', label: 'Orange', swatchClass: 'bg-orange-500' },
+    { value: 'amber', label: 'Amber', swatchClass: 'bg-amber-400' },
+    { value: 'yellow', label: 'Yellow', swatchClass: 'bg-yellow-400' },
+    { value: 'lime', label: 'Lime', swatchClass: 'bg-lime-400' },
+    { value: 'green', label: 'Green', swatchClass: 'bg-green-600' },
+    { value: 'emerald', label: 'Emerald', swatchClass: 'bg-emerald-600' },
+    { value: 'teal', label: 'Teal', swatchClass: 'bg-teal-600' },
+    { value: 'cyan', label: 'Cyan', swatchClass: 'bg-cyan-600' },
+    { value: 'sky', label: 'Sky', swatchClass: 'bg-sky-600' },
+    { value: 'blue', label: 'Blue', swatchClass: 'bg-blue-500' },
+    { value: 'indigo', label: 'Indigo', swatchClass: 'bg-indigo-500' },
+    { value: 'violet', label: 'Violet', swatchClass: 'bg-violet-500' },
+    { value: 'purple', label: 'Purple', swatchClass: 'bg-purple-500' },
+    { value: 'fuchsia', label: 'Fuchsia', swatchClass: 'bg-fuchsia-600' },
+    { value: 'pink', label: 'Pink', swatchClass: 'bg-pink-600' },
+    { value: 'rose', label: 'Rose', swatchClass: 'bg-rose-500' },
+];
+const THEME_MODE_OPTIONS = [
+    { value: 'light', label: 'Light', icon: 'sun' },
+    { value: 'dark', label: 'Dark', icon: 'moon' },
+    { value: 'system', label: 'System', icon: 'system' },
+];
+const THEME_STYLE_OPTIONS = [
+    { value: 'default', label: 'Default', icon: 'default-style' },
+    { value: 'sharp', label: 'Sharp', icon: 'sharp-style' },
+    { value: 'brutal', label: 'Brutal', icon: 'brutal-style' },
+    { value: 'soft', label: 'Soft', icon: 'soft-style' },
+];
+const LAYOUT_MODE_OPTIONS = [
+    { value: 'vertical', label: 'Vertical', icon: 'vertical-layout' },
+    { value: 'horizontal', label: 'Horizontal', icon: 'horizontal-layout' },
+    { value: 'empty', label: 'Empty', icon: 'empty-layout' },
+];
+const LAYOUT_WIDTH_OPTIONS = [
+    { value: 'full', label: 'Full', icon: 'full-width' },
+    { value: 'container', label: 'Container', icon: 'container-width' },
+    { value: 'wide', label: 'Wide', icon: 'wide-width' },
+];
+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 */ []));
+    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 */ []));
+    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 */ []));
+    constructor() {
+        effect(() => {
+            this.currentThemeColor.set(this.connected() && this.themePort ? this.themePort.color() : this.themeColor());
+        });
+        effect(() => {
+            this.currentThemeMode.set(this.connected() && this.themePort ? this.themePort.scheme() : this.themeMode());
+        });
+        effect(() => {
+            this.currentThemeStyle.set(this.connected() && this.themePort ? this.themePort.style() : this.themeStyle());
+        });
+        effect(() => {
+            this.currentLayoutMode.set(this.connected() && this.layoutPort ? this.layoutPort.mode() : this.layoutMode());
+        });
+        effect(() => {
+            this.currentLayoutWidth.set(this.connected() && this.layoutPort ? this.layoutPort.width() : this.layoutWidth());
+        });
+    }
+    setThemeColor(color) {
+        this.currentThemeColor.set(color);
+        this.themePort?.setColor(color);
+        this.themeColorChange.emit(color);
+    }
+    setThemeMode(mode) {
+        this.currentThemeMode.set(mode);
+        this.themePort?.setScheme(mode);
+        this.themeModeChange.emit(mode);
+    }
+    setThemeStyle(style) {
+        this.currentThemeStyle.set(style);
+        this.themePort?.setStyle(style);
+        this.themeStyleChange.emit(style);
+    }
+    setLayoutMode(mode) {
+        this.currentLayoutMode.set(mode);
+        this.layoutPort?.setMode(mode);
+        this.layoutModeChange.emit(mode);
+    }
+    setLayoutWidth(width) {
+        this.currentLayoutWidth.set(width);
+        this.layoutPort?.setWidth(width);
+        this.layoutWidthChange.emit(width);
+    }
+    sectionEyebrowClasses() {
+        return 'text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground';
+    }
+    segmentedOptionClasses(active) {
+        return cn('rounded-[calc(var(--layout-frame-radius)-2px)] px-3', active
+            ? 'border border-border/70 bg-background shadow-sm hover:bg-background'
+            : 'text-muted-foreground hover:bg-background/70 hover:text-foreground');
+    }
+    swatchButtonClasses(active) {
+        return cn('size-9 rounded-full p-0', active
+            ? 'border border-border/70 bg-background shadow-sm hover:bg-background'
+            : 'border border-transparent hover:bg-background/70');
+    }
+    optionIconClasses(active) {
+        return cn('inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4', active ? 'text-foreground' : 'text-muted-foreground');
+    }
+    colorSwatchClasses(swatchClass, isActive) {
+        return cn('size-4 rounded-full border border-black/10 shadow-sm', swatchClass, isActive ? 'ring-2 ring-ring ring-offset-2 ring-offset-background' : '');
+    }
+    iconSvg(name) {
+        return this.sanitizer.bypassSecurityTrustHtml(this.rawIconSvg(name));
+    }
+    rawIconSvg(name) {
+        switch (name) {
+            case 'sun':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2.5v2.2"></path><path d="M12 19.3v2.2"></path><path d="M4.93 4.93 6.5 6.5"></path><path d="M17.5 17.5 19.07 19.07"></path><path d="M2.5 12h2.2"></path><path d="M19.3 12h2.2"></path><path d="M4.93 19.07 6.5 17.5"></path><path d="M17.5 6.5 19.07 4.93"></path></svg>';
+            case 'moon':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.4 14.8A8.8 8.8 0 1 1 9.2 3.6a7.2 7.2 0 0 0 11.2 11.2Z"></path></svg>';
+            case 'system':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="11.5" rx="1.8"></rect><path d="M9 19.5h6"></path><path d="M12 16v3.5"></path></svg>';
+            case 'default-style':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="4"></rect></svg>';
+            case 'sharp-style':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="1"></rect></svg>';
+            case 'brutal-style':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7.5h14"></path><path d="M5 12h14"></path><path d="M5 16.5h14"></path></svg>';
+            case 'soft-style':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 9A4.5 4.5 0 0 1 12 4.5h1A4.5 4.5 0 0 1 17.5 9v1A4.5 4.5 0 0 1 13 14.5h-1A4.5 4.5 0 0 1 7.5 10Z"></path><path d="M6.5 15.5c1.3 2 3.2 3 5.5 3s4.2-1 5.5-3"></path></svg>';
+            case 'vertical-layout':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M9 5v14"></path></svg>';
+            case 'horizontal-layout':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M4 10h16"></path></svg>';
+            case 'empty-layout':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="5.5" width="15" height="13" rx="2"></rect></svg>';
+            case 'full-width':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V5h3"></path><path d="M20 8V5h-3"></path><path d="M4 16v3h3"></path><path d="M20 16v3h-3"></path><path d="M8 5H4"></path><path d="M20 5h-4"></path><path d="M8 19H4"></path><path d="M20 19h-4"></path></svg>';
+            case 'container-width':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="6" width="16" height="12" rx="2"></rect><path d="M9 9.5h6"></path><path d="M9 14.5h6"></path></svg>';
+            case 'wide-width':
+                return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M7 9.5h10"></path><path d="M7 14.5h10"></path></svg>';
+        }
+    }
+    toInitials(value) {
+        const words = value
+            .split(/\s+/)
+            .map((item) => item.trim())
+            .filter(Boolean)
+            .slice(0, 2);
+        if (!words.length) {
+            return 'UI';
+        }
+        return words.map((word) => word[0]?.toUpperCase() ?? '').join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ThemePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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">
+          <span class="flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <span
+              class="flex size-11 items-center justify-center rounded-full bg-primary text-xs font-semibold tracking-[0.22em] text-primary-foreground">
+              {{ resolvedUserInitials() }}
+            </span>
+          </span>
+
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-[1.05rem] font-semibold leading-none tracking-tight text-foreground">
+              {{ userName() }}
+            </h2>
+            @if (userSubtitle(); as subtitle) {
+              <p class="mt-1 text-sm leading-none text-muted-foreground">{{ subtitle }}</p>
+            }
+          </div>
+        </header>
+      } @else {
+        <header class="space-y-1 px-1 pt-1">
+          <h2 class="text-base font-semibold tracking-tight text-foreground">{{ title() }}</h2>
+          @if (description(); as text) {
+            <p class="text-sm leading-6 text-muted-foreground">{{ text }}</p>
+          }
+        </header>
+      }
+
+      <div class="grid gap-4">
+        <section data-setting="theme-mode" [attr.data-current]="currentThemeMode()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Mode</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Theme mode">
+              @for (option of themeModeOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="theme-mode"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentThemeMode() === option.value"
+                  [class]="segmentedOptionClasses(currentThemeMode() === option.value)"
+                  (click)="setThemeMode(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentThemeMode() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="theme-color" [attr.data-current]="currentThemeColor()" class="space-y-2">
+          <div class="flex items-center justify-between gap-3 px-1">
+            <p [class]="sectionEyebrowClasses()">Color</p>
+            <p class="text-xs font-semibold text-muted-foreground">{{ currentThemeColorLabel() }}</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-1">
+            <div class="grid grid-cols-6 justify-items-center gap-1" role="group" aria-label="Theme color">
+              @for (option of themeColorOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="icon"
+                  variant="ghost"
+                  data-setting-option="theme-color"
+                  [attr.data-value]="option.value"
+                  [attr.aria-label]="'Theme color ' + option.label"
+                  [attr.aria-pressed]="currentThemeColor() === option.value"
+                  [class]="swatchButtonClasses(currentThemeColor() === option.value)"
+                  (click)="setThemeColor(option.value)">
+                  <span
+                    aria-hidden="true"
+                    [class]="colorSwatchClasses(option.swatchClass, currentThemeColor() === option.value)"></span>
+                  <span class="sr-only">{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="theme-style" [attr.data-current]="currentThemeStyle()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Style</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-2 gap-1 sm:grid-cols-4" role="group" aria-label="Theme style">
+              @for (option of themeStyleOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="theme-style"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentThemeStyle() === option.value"
+                  [class]="segmentedOptionClasses(currentThemeStyle() === option.value)"
+                  (click)="setThemeStyle(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentThemeStyle() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="layout-mode" [attr.data-current]="currentLayoutMode()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Layout</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Layout mode">
+              @for (option of layoutModeOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="layout-mode"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentLayoutMode() === option.value"
+                  [class]="segmentedOptionClasses(currentLayoutMode() === option.value)"
+                  (click)="setLayoutMode(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentLayoutMode() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="layout-width" [attr.data-current]="currentLayoutWidth()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Width</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Layout width">
+              @for (option of layoutWidthOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="layout-width"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentLayoutWidth() === option.value"
+                  [class]="segmentedOptionClasses(currentLayoutWidth() === option.value)"
+                  (click)="setLayoutWidth(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentLayoutWidth() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+      </div>
+    </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.13", ngImport: i0, type: ThemePanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-theme-panel',
+                    imports: [ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+    <div class="flex flex-col gap-4 p-4">
+      @if (hasUserHeader()) {
+        <header class="flex items-center gap-3 px-1 pt-1">
+          <span class="flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <span
+              class="flex size-11 items-center justify-center rounded-full bg-primary text-xs font-semibold tracking-[0.22em] text-primary-foreground">
+              {{ resolvedUserInitials() }}
+            </span>
+          </span>
+
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-[1.05rem] font-semibold leading-none tracking-tight text-foreground">
+              {{ userName() }}
+            </h2>
+            @if (userSubtitle(); as subtitle) {
+              <p class="mt-1 text-sm leading-none text-muted-foreground">{{ subtitle }}</p>
+            }
+          </div>
+        </header>
+      } @else {
+        <header class="space-y-1 px-1 pt-1">
+          <h2 class="text-base font-semibold tracking-tight text-foreground">{{ title() }}</h2>
+          @if (description(); as text) {
+            <p class="text-sm leading-6 text-muted-foreground">{{ text }}</p>
+          }
+        </header>
+      }
+
+      <div class="grid gap-4">
+        <section data-setting="theme-mode" [attr.data-current]="currentThemeMode()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Mode</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Theme mode">
+              @for (option of themeModeOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="theme-mode"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentThemeMode() === option.value"
+                  [class]="segmentedOptionClasses(currentThemeMode() === option.value)"
+                  (click)="setThemeMode(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentThemeMode() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="theme-color" [attr.data-current]="currentThemeColor()" class="space-y-2">
+          <div class="flex items-center justify-between gap-3 px-1">
+            <p [class]="sectionEyebrowClasses()">Color</p>
+            <p class="text-xs font-semibold text-muted-foreground">{{ currentThemeColorLabel() }}</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-1">
+            <div class="grid grid-cols-6 justify-items-center gap-1" role="group" aria-label="Theme color">
+              @for (option of themeColorOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="icon"
+                  variant="ghost"
+                  data-setting-option="theme-color"
+                  [attr.data-value]="option.value"
+                  [attr.aria-label]="'Theme color ' + option.label"
+                  [attr.aria-pressed]="currentThemeColor() === option.value"
+                  [class]="swatchButtonClasses(currentThemeColor() === option.value)"
+                  (click)="setThemeColor(option.value)">
+                  <span
+                    aria-hidden="true"
+                    [class]="colorSwatchClasses(option.swatchClass, currentThemeColor() === option.value)"></span>
+                  <span class="sr-only">{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="theme-style" [attr.data-current]="currentThemeStyle()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Style</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-2 gap-1 sm:grid-cols-4" role="group" aria-label="Theme style">
+              @for (option of themeStyleOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="theme-style"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentThemeStyle() === option.value"
+                  [class]="segmentedOptionClasses(currentThemeStyle() === option.value)"
+                  (click)="setThemeStyle(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentThemeStyle() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="layout-mode" [attr.data-current]="currentLayoutMode()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Layout</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Layout mode">
+              @for (option of layoutModeOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="layout-mode"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentLayoutMode() === option.value"
+                  [class]="segmentedOptionClasses(currentLayoutMode() === option.value)"
+                  (click)="setLayoutMode(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentLayoutMode() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+
+        <section data-setting="layout-width" [attr.data-current]="currentLayoutWidth()" class="space-y-2">
+          <div class="px-1">
+            <p [class]="sectionEyebrowClasses()">Width</p>
+          </div>
+
+          <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
+            <div class="grid grid-cols-3 gap-1" role="group" aria-label="Layout width">
+              @for (option of layoutWidthOptions; track option.value) {
+                <button
+                  type="button"
+                  ui-button
+                  size="sm"
+                  variant="ghost"
+                  data-setting-option="layout-width"
+                  [attr.data-value]="option.value"
+                  [attr.aria-pressed]="currentLayoutWidth() === option.value"
+                  [class]="segmentedOptionClasses(currentLayoutWidth() === option.value)"
+                  (click)="setLayoutWidth(option.value)">
+                  <span class="inline-flex items-center gap-2.5">
+                    <span
+                      aria-hidden="true"
+                      [class]="optionIconClasses(currentLayoutWidth() === option.value)"
+                      [innerHTML]="iconSvg(option.icon!)"></span>
+                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
+                  </span>
+                </button>
+              }
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { connected: [{ type: i0.Input, args: [{ isSignal: true, alias: "connected", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], userSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSubtitle", required: false }] }], userInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInitials", required: false }] }], themeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeColor", required: false }] }], themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], themeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeStyle", required: false }] }], layoutMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutMode", required: false }] }], layoutWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutWidth", required: false }] }], themeColorChange: [{ type: i0.Output, args: ["themeColorChange"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], themeStyleChange: [{ type: i0.Output, args: ["themeStyleChange"] }], layoutModeChange: [{ type: i0.Output, args: ["layoutModeChange"] }], layoutWidthChange: [{ type: i0.Output, args: ["layoutWidthChange"] }] } });
+
 /*
  * Public API Surface of @ojiepermana/angular/component
  */
@@ -3471,5 +4065,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
 //# sourceMappingURL=ojiepermana-angular-component.mjs.map