import { AXPValueWidgetComponent } from '@acorex/platform/layout/widget-core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { computed, ChangeDetectionStrategy, Component } from '@angular/core';

class AXPColorChooserWidgetViewComponent extends AXPValueWidgetComponent {
    constructor() {
        super(...arguments);
        this.parsed = computed(() => {
            const value = this.getValue();
            if (!value) {
                return null;
            }
            if (typeof value === 'string') {
                const parts = value.trim().split(/\s+/);
                if (parts.length === 3) {
                    const [color, background, border] = parts;
                    return { title: '', name: '', color, background, border };
                }
                return null;
            }
            return value;
        }, ...(ngDevMode ? [{ debugName: "parsed" }] : []));
        this.title = computed(() => (typeof this.getValue() === 'object' ? this.getValue()?.title || '' : ''), ...(ngDevMode ? [{ debugName: "title" }] : []));
        this.background = computed(() => this.parsed()?.background || '', ...(ngDevMode ? [{ debugName: "background" }] : []));
        this.color = computed(() => this.parsed()?.color || '', ...(ngDevMode ? [{ debugName: "color" }] : []));
        this.border = computed(() => this.parsed()?.border || '', ...(ngDevMode ? [{ debugName: "border" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPColorChooserWidgetViewComponent, isStandalone: true, selector: "ax-color-chooser-view", usesInheritance: true, ngImport: i0, template: `
    <div class="ax-flex ax-items-center ax-gap-2">
      <div
        class="ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center"
        [ngClass]="[background(), border()]"
      >
        <span [ngClass]="color()">Aa</span>
      </div>
      <span>{{ title() }}</span>
    </div>
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPColorChooserWidgetViewComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ax-color-chooser-view',
                    template: `
    <div class="ax-flex ax-items-center ax-gap-2">
      <div
        class="ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center"
        [ngClass]="[background(), border()]"
      >
        <span [ngClass]="color()">Aa</span>
      </div>
      <span>{{ title() }}</span>
    </div>
  `,
                    imports: [CommonModule],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

export { AXPColorChooserWidgetViewComponent };
//# sourceMappingURL=acorex-platform-themes-shared-theme-color-chooser-view.component-CTGy2kjJ.mjs.map
