@ojiepermana/angular 21.2.4 → 21.3.0

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

@@ -0,0 +1,581 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ButtonComponent } from '@ojiepermana/angular/component/button';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+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.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: `
+    <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.14", 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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, ThemePanelComponent };
+//# sourceMappingURL=ojiepermana-angular-layout-theme.mjs.map