@ojiepermana/angular 21.3.4 → 22.0.27

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

@@ -1,581 +0,0 @@
-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-component.mjs.map