@acorex/platform 20.0.9 → 20.0.10

package/fesm2022/acorex-platform-themes-shared-color-chooser-view.component-CUtKW-cD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-shared-color-chooser-view.component-CUtKW-cD.mjs","sources":["../tmp-esm2022/themes/shared/lib/widgets/color-chooser/color-chooser-view.component.js"],"sourcesContent":["import { AXPColumnWidgetComponent } from '@acorex/platform/layout/builder';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@angular/common\";\nexport class AXPColorChooserViewComponent extends AXPColumnWidgetComponent {\n    constructor() {\n        super(...arguments);\n        this.title = computed(() => this.rawValue?.title || '');\n        this.background = computed(() => this.rawValue?.background || '');\n        this.color = computed(() => this.rawValue?.color || '');\n        this.border = computed(() => this.rawValue?.border || '');\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.0.7\", ngImport: i0, type: AXPColorChooserViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"20.0.7\", type: AXPColorChooserViewComponent, isStandalone: true, selector: \"ax-color-chooser-column\", inputs: { rawValue: \"rawValue\" }, usesInheritance: true, ngImport: i0, template: `\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <div\n        class=\"ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center\"\n        [ngClass]=\"[background(), border()]\"\n      >\n        <span [ngClass]=\"color()\">Aa</span>\n      </div>\n      <span>{{ title() }}</span>\n    </div>\n  `, isInline: true, dependencies: [{ kind: \"ngmodule\", type: CommonModule }, { kind: \"directive\", type: i1.NgClass, selector: \"[ngClass]\", inputs: [\"class\", \"ngClass\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.0.7\", ngImport: i0, type: AXPColorChooserViewComponent, decorators: [{\n            type: Component,\n            args: [{\n                    selector: 'ax-color-chooser-column',\n                    template: `\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <div\n        class=\"ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center\"\n        [ngClass]=\"[background(), border()]\"\n      >\n        <span [ngClass]=\"color()\">Aa</span>\n      </div>\n      <span>{{ title() }}</span>\n    </div>\n  `,\n                    imports: [CommonModule],\n                    inputs: ['rawValue'],\n                    changeDetection: ChangeDetectionStrategy.OnPush,\n                    standalone: true,\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItY2hvb3Nlci12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvcGxhdGZvcm0vdGhlbWVzL3NoYXJlZC9zcmMvbGliL3dpZGdldHMvY29sb3ItY2hvb3Nlci9jb2xvci1jaG9vc2VyLXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBcUI3RSxNQUFNLE9BQU8sNEJBQTZCLFNBQVEsd0JBQWtDO0lBbEJwRjs7UUFtQkUsVUFBSyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEtBQUssSUFBSSxFQUFFLENBQUMsQ0FBQztRQUNuRCxlQUFVLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBQzdELFVBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxLQUFLLElBQUksRUFBRSxDQUFDLENBQUM7UUFDbkQsV0FBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLE1BQU0sSUFBSSxFQUFFLENBQUMsQ0FBQztLQUN0RDs4R0FMWSw0QkFBNEI7a0dBQTVCLDRCQUE0Qiw0SUFoQjdCOzs7Ozs7Ozs7O0dBVVQsMkRBQ1MsWUFBWTs7MkZBS1gsNEJBQTRCO2tCQWxCeEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUseUJBQXlCO29CQUNuQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7R0FVVDtvQkFDRCxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLE1BQU0sRUFBRSxDQUFDLFVBQVUsQ0FBQztvQkFDcEIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYUENvbHVtbldpZGdldENvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvcGxhdGZvcm0vbGF5b3V0L2J1aWxkZXInO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWFBDb2xvciB9IGZyb20gJy4vY29sb3ItY2hvb3Nlci5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtY29sb3ItY2hvb3Nlci1jb2x1bW4nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1nYXAtMlwiPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImF4LXctNiBheC1oLTYgYXgtcm91bmRlZC1tZCBheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1qdXN0aWZ5LWNlbnRlclwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIltiYWNrZ3JvdW5kKCksIGJvcmRlcigpXVwiXG4gICAgICA+XG4gICAgICAgIDxzcGFuIFtuZ0NsYXNzXT1cImNvbG9yKClcIj5BYTwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPHNwYW4+e3sgdGl0bGUoKSB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIGlucHV0czogWydyYXdWYWx1ZSddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgQVhQQ29sb3JDaG9vc2VyVmlld0NvbXBvbmVudCBleHRlbmRzIEFYUENvbHVtbldpZGdldENvbXBvbmVudDxBWFBDb2xvcj4ge1xuICB0aXRsZSA9IGNvbXB1dGVkKCgpID0+IHRoaXMucmF3VmFsdWU/LnRpdGxlIHx8ICcnKTtcbiAgYmFja2dyb3VuZCA9IGNvbXB1dGVkKCgpID0+IHRoaXMucmF3VmFsdWU/LmJhY2tncm91bmQgfHwgJycpO1xuICBjb2xvciA9IGNvbXB1dGVkKCgpID0+IHRoaXMucmF3VmFsdWU/LmNvbG9yIHx8ICcnKTtcbiAgYm9yZGVyID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5yYXdWYWx1ZT8uYm9yZGVyIHx8ICcnKTtcbn1cbiJdfQ=="],"names":[],"mappings":";;;;;;AAKO,MAAM,4BAA4B,SAAS,wBAAwB,CAAC;AAC3E,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,CAAC,GAAG,SAAS,CAAC;AAC3B,QAAQ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;AAC/D,QAAQ,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,UAAU,IAAI,EAAE,CAAC;AACzE,QAAQ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;AAC/D,QAAQ,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,CAAC;AACjE,IAAI;AACJ,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,4BAA4B,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC;AAChM,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,4BAA4B,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AAC1Q;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,EAAE,CAAC,CAAC;AACnO;AACA,EAAE,CAAC,wBAAwB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,4BAA4B,EAAE,UAAU,EAAE,CAAC;AACtI,YAAY,IAAI,EAAE,SAAS;AAC3B,YAAY,IAAI,EAAE,CAAC;AACnB,oBAAoB,QAAQ,EAAE,yBAAyB;AACvD,oBAAoB,QAAQ,EAAE;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC;AACH,oBAAoB,OAAO,EAAE,CAAC,YAAY,CAAC;AAC3C,oBAAoB,MAAM,EAAE,CAAC,UAAU,CAAC;AACxC,oBAAoB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AACnE,oBAAoB,UAAU,EAAE,IAAI;AACpC,iBAAiB;AACjB,SAAS,CAAC,EAAE,CAAC;;;;"}

package/fesm2022/acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs

@@ -0,0 +1,48 @@
+import { AXPColumnWidgetComponent } from '@acorex/platform/layout/builder';
+import * as i0 from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class AXPIconChooserViewComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.title = computed(() => {
+            const value = this.rawValue;
+            if (value) {
+                return value.label;
+            }
+            return '';
+        });
+        this.icon = computed(() => {
+            const value = this.rawValue;
+            if (value) {
+                return `${value.styleClass} ${value.iconClass}`;
+            }
+            return '';
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPIconChooserViewComponent, isStandalone: true, selector: "ax-icon-chooser-column", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <i [class]="icon()"></i>
+      <span>{{ title() }}</span>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-icon-chooser-column',
+                    template: `
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <i [class]="icon()"></i>
+      <span>{{ title() }}</span>
+    </div>
+  `,
+                    inputs: ['rawValue'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                }]
+        }] });
+
+export { AXPIconChooserViewComponent };
+//# sourceMappingURL=acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs.map

package/fesm2022/acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs","sources":["../tmp-esm2022/themes/shared/lib/widgets/icon-chooser/icon-chooser-view.component.js"],"sourcesContent":["import { AXPColumnWidgetComponent } from '@acorex/platform/layout/builder';\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXPIconChooserViewComponent extends AXPColumnWidgetComponent {\n    constructor() {\n        super(...arguments);\n        this.title = computed(() => {\n            const value = this.rawValue;\n            if (value) {\n                return value.label;\n            }\n            return '';\n        });\n        this.icon = computed(() => {\n            const value = this.rawValue;\n            if (value) {\n                return `${value.styleClass} ${value.iconClass}`;\n            }\n            return '';\n        });\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.0.7\", ngImport: i0, type: AXPIconChooserViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"20.0.7\", type: AXPIconChooserViewComponent, isStandalone: true, selector: \"ax-icon-chooser-column\", inputs: { rawValue: \"rawValue\" }, usesInheritance: true, ngImport: i0, template: `\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <i [class]=\"icon()\"></i>\n      <span>{{ title() }}</span>\n    </div>\n  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.0.7\", ngImport: i0, type: AXPIconChooserViewComponent, decorators: [{\n            type: Component,\n            args: [{\n                    selector: 'ax-icon-chooser-column',\n                    template: `\n    <div class=\"ax-flex ax-items-center ax-gap-2\">\n      <i [class]=\"icon()\"></i>\n      <span>{{ title() }}</span>\n    </div>\n  `,\n                    inputs: ['rawValue'],\n                    changeDetection: ChangeDetectionStrategy.OnPush,\n                    standalone: true,\n                }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1jaG9vc2VyLXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9wbGF0Zm9ybS90aGVtZXMvc2hhcmVkL3NyYy9saWIvd2lkZ2V0cy9pY29uLWNob29zZXIvaWNvbi1jaG9vc2VyLXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQWU3RSxNQUFNLE9BQU8sMkJBQTRCLFNBQVEsd0JBQWdEO0lBWmpHOztRQWFFLFVBQUssR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3BCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDNUIsSUFBSSxLQUFLLEVBQUUsQ0FBQztnQkFDVixPQUFPLEtBQUssQ0FBQyxLQUFLLENBQUM7WUFDckIsQ0FBQztZQUNELE9BQU8sRUFBRSxDQUFDO1FBQ1osQ0FBQyxDQUFDLENBQUM7UUFFSCxTQUFJLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNuQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQzVCLElBQUksS0FBSyxFQUFFLENBQUM7Z0JBQ1YsT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLElBQUksS0FBSyxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2xELENBQUM7WUFDRCxPQUFPLEVBQUUsQ0FBQztRQUNaLENBQUMsQ0FBQyxDQUFDO0tBQ0o7OEdBaEJZLDJCQUEyQjtrR0FBM0IsMkJBQTJCLDJJQVY1Qjs7Ozs7R0FLVDs7MkZBS1UsMkJBQTJCO2tCQVp2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFFBQVEsRUFBRTs7Ozs7R0FLVDtvQkFDRCxNQUFNLEVBQUUsQ0FBQyxVQUFVLENBQUM7b0JBQ3BCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO29CQUMvQyxVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWFBDb2x1bW5XaWRnZXRDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L3BsYXRmb3JtL2xheW91dC9idWlsZGVyJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWFBGb250QXdlc29tZUljb25EYXRhIH0gZnJvbSAnLi9pY29uLWNob29zZXIuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWljb24tY2hvb3Nlci1jb2x1bW4nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1nYXAtMlwiPlxuICAgICAgPGkgW2NsYXNzXT1cImljb24oKVwiPjwvaT5cbiAgICAgIDxzcGFuPnt7IHRpdGxlKCkgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGlucHV0czogWydyYXdWYWx1ZSddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgQVhQSWNvbkNob29zZXJWaWV3Q29tcG9uZW50IGV4dGVuZHMgQVhQQ29sdW1uV2lkZ2V0Q29tcG9uZW50PEFYUEZvbnRBd2Vzb21lSWNvbkRhdGE+IHtcbiAgdGl0bGUgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgY29uc3QgdmFsdWUgPSB0aGlzLnJhd1ZhbHVlO1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgcmV0dXJuIHZhbHVlLmxhYmVsO1xuICAgIH1cbiAgICByZXR1cm4gJyc7XG4gIH0pO1xuXG4gIGljb24gPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgY29uc3QgdmFsdWUgPSB0aGlzLnJhd1ZhbHVlO1xuICAgIGlmICh2YWx1ZSkge1xuICAgICAgcmV0dXJuIGAke3ZhbHVlLnN0eWxlQ2xhc3N9ICR7dmFsdWUuaWNvbkNsYXNzfWA7XG4gICAgfVxuICAgIHJldHVybiAnJztcbiAgfSk7XG59XG4iXX0="],"names":[],"mappings":";;;;AAGO,MAAM,2BAA2B,SAAS,wBAAwB,CAAC;AAC1E,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,CAAC,GAAG,SAAS,CAAC;AAC3B,QAAQ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM;AACpC,YAAY,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ;AACvC,YAAY,IAAI,KAAK,EAAE;AACvB,gBAAgB,OAAO,KAAK,CAAC,KAAK;AAClC,YAAY;AACZ,YAAY,OAAO,EAAE;AACrB,QAAQ,CAAC,CAAC;AACV,QAAQ,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM;AACnC,YAAY,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ;AACvC,YAAY,IAAI,KAAK,EAAE;AACvB,gBAAgB,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AAC/D,YAAY;AACZ,YAAY,OAAO,EAAE;AACrB,QAAQ,CAAC,CAAC;AACV,IAAI;AACJ,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,2BAA2B,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC;AAC/L,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,2BAA2B,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,wBAAwB,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACxQ;AACA;AACA;AACA;AACA,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,EAAE,CAAC,CAAC;AAC3E;AACA,EAAE,CAAC,wBAAwB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,2BAA2B,EAAE,UAAU,EAAE,CAAC;AACrI,YAAY,IAAI,EAAE,SAAS;AAC3B,YAAY,IAAI,EAAE,CAAC;AACnB,oBAAoB,QAAQ,EAAE,wBAAwB;AACtD,oBAAoB,QAAQ,EAAE;AAC9B;AACA;AACA;AACA;AACA,EAAE,CAAC;AACH,oBAAoB,MAAM,EAAE,CAAC,UAAU,CAAC;AACxC,oBAAoB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AACnE,oBAAoB,UAAU,EAAE,IAAI;AACpC,iBAAiB;AACjB,SAAS,CAAC,EAAE,CAAC;;;;"}

package/fesm2022/acorex-platform-themes-shared.mjs

@@ -7,7 +7,7 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, Component, InjectionToken, signal, effect, ChangeDetectionStrategy, Injectable, Input, Injector, NgModule } from '@angular/core';
+import { computed, inject, Component, InjectionToken, Injectable, signal, ChangeDetectionStrategy, effect, Input, Injector, NgModule } from '@angular/core';
 import { AXPSettingService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, fromEvent, Subscription, filter } from 'rxjs';
@@ -18,18 +18,23 @@ import { AXPPlatformScope } from '@acorex/platform/core';
 import * as i2$1 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import * as i3$1 from '@acorex/platform/layout/builder';
-import { AXPValueWidgetComponent, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetGroupEnum, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
-import * as i2$3 from '@acorex/platform/layout/components';
+import { AXPValueWidgetComponent, AXPWidgetGroupEnum, AXP_WIDGETS_LAYOUT_CATEGORY, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import * as i2$4 from '@acorex/platform/layout/components';
 import { AXPComponentSlotModule } from '@acorex/platform/layout/components';
-import { AXSelectionCdkModule } from '@acorex/cdk/selection';
+import * as i2$2 from '@acorex/components/form';
+import { AXFormModule } from '@acorex/components/form';
+import * as i4$1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i1$1 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY } from '@acorex/platform/widgets';
+import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i2$2 from '@acorex/components/button-group';
+import * as i2$3 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i1$1 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
 
 var AXPThemeLayoutSetting;
 (function (AXPThemeLayoutSetting) {
@@ -528,6 +533,206 @@ class AXPThemePaletteProviderDefault {
     }
 }
 
+class AXPColorProvider {
+}
+function titleCase(str) {
+    return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+}
+function generateDefaultColors() {
+    const colors = [];
+    const styles = ['primary', 'secondary', 'success', 'warning', 'danger'];
+    const variants = [
+        'lightest',
+        'lighter',
+        'light',
+        'surface',
+        'dark',
+        'darker',
+        'darkest',
+        // ,'default'
+    ];
+    for (const style of styles) {
+        for (const variant of variants) {
+            let name;
+            let colorClass;
+            // if (variant === 'default') {
+            //   name = `${style}-${variant}`;
+            //   colorClass = `ax-text-${style}-${variant}`;
+            // } else {
+            name = `${style}-${variant}`;
+            colorClass = `ax-text-${style}-on-${variant}`;
+            // }
+            colors.push({
+                title: titleCase(variant === 'surface' ? style : titleCase(name)),
+                name: name,
+                color: colorClass,
+                background: `ax-bg-${name}`,
+                border: `ax-border-${name}`,
+            });
+        }
+    }
+    return colors;
+}
+const DEFAULT_COLORS = generateDefaultColors();
+class AXPColorProviderDefault extends AXPColorProvider {
+    async provide() {
+        return DEFAULT_COLORS;
+    }
+}
+const AXP_COLOR_PROVIDER = new InjectionToken('AXP_COLOR_PROVIDER');
+class AXPColorChooserService {
+    constructor() {
+        this.defaultProvider = new AXPColorProviderDefault();
+        this.providers = (() => {
+            const injected = inject(AXP_COLOR_PROVIDER, { optional: true });
+            if (!injected) {
+                return [this.defaultProvider];
+            }
+            const providers = Array.isArray(injected) ? injected : [injected];
+            return [...providers, this.defaultProvider];
+        })();
+        this.cache = null;
+    }
+    async getColors() {
+        if (this.cache) {
+            return this.cache;
+        }
+        const allColors = [];
+        for (const resolver of this.providers) {
+            const result = await resolver.provide();
+            allColors.push(...result);
+        }
+        const uniqueColors = allColors.filter((color, index, self) => index === self.findIndex((c) => c.title === color.title));
+        this.cache = uniqueColors;
+        return uniqueColors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColorChooserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPColorChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colors = signal([]);
+        this.colorService = inject(AXPColorChooserService);
+    }
+    async ngOnInit() {
+        this.colors.set(await this.colorService.getColors());
+    }
+    handleValueChange(name) {
+        if (!name) {
+            this.setValue(undefined);
+            return;
+        }
+        const color = this.colors().find((c) => c.name === name);
+        this.setValue(color);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColorChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: AXPColorChooserWidgetComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-p-4">
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="options()?.placeholder || 'Select a color...'"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="getValue()?.name"
+            (ngModelChange)="handleValueChange($event)"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                <div
+                  class="ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                  [ngClass]="item.data.background"
+                >
+                  <span [ngClass]="item.data.color">Aa</span>
+                </div>
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPColorChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-chooser-widget',
+                    template: `
+    <div class="ax-p-4">
+      <ax-form [messageStyle]="'float'" [updateOn]="'change'">
+        <ax-form-field>
+          <ax-select-box
+            [dataSource]="colors()"
+            textField="title"
+            valueField="name"
+            [placeholder]="options()?.placeholder || 'Select a color...'"
+            [itemTemplate]="customItemTemplate"
+            [ngModel]="getValue()?.name"
+            (ngModelChange)="handleValueChange($event)"
+          >
+            <ng-template #customItemTemplate let-item>
+              <div class="ax-flex ax-items-center ax-gap-2 ax-p-2">
+                <div
+                  class="ax-w-6 ax-h-6 ax-rounded-md ax-flex ax-items-center ax-justify-center ax-border ax-border-dashed ax-border-black dark:ax-border-white"
+                  [ngClass]="item.data.background"
+                >
+                  <span [ngClass]="item.data.color">Aa</span>
+                </div>
+                <span>{{ item.data.title }}</span>
+              </div>
+            </ng-template>
+            <ax-search-box look="fill"></ax-search-box>
+            <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
+          </ax-select-box>
+        </ax-form-field>
+      </ax-form>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+var colorChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPColorChooserWidgetComponent: AXPColorChooserWidgetComponent
+});
+
+const AXPColorChooserWidgetConfig = {
+    name: 'color-chooser',
+    title: 'Color Chooser',
+    icon: 'fa-solid fa-palette',
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return colorChooserWidget_component; }).then((c) => c.AXPColorChooserWidgetComponent),
+        },
+        column: {
+            component: () => import('./acorex-platform-themes-shared-color-chooser-view.component-CUtKW-cD.mjs').then((c) => c.AXPColorChooserViewComponent),
+        },
+        view: {
+            component: () => import('./acorex-platform-themes-shared-color-chooser-view.component-CUtKW-cD.mjs').then((c) => c.AXPColorChooserViewComponent),
+        },
+    },
+};
+
 class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
@@ -818,7 +1023,11 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
         this.filteredIcons = result;
     }
     selectIcon(icon) {
-        this.close(this.getIconClass(icon));
+        this.close({
+            label: icon.label,
+            styleClass: this.selectedIconType,
+            iconClass: `fa-${icon.name}`,
+        });
     }
     getIconClass(icon) {
         return `${this.selectedIconType} fa-${icon.name}`;
@@ -861,7 +1070,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
 
       <div class="ax-flex-1 ax-overflow-y-auto ax-pr-2">
         <div
-          class="ax-grid ax-gap-4"
+          class="ax-grid ax-gap-1"
           [ngClass]="
             selectedViewMode === 'square'
               ? 'ax-grid-cols-[repeat(auto-fill,minmax(6rem,1fr))]'
@@ -891,7 +1100,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$3.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$3.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
@@ -934,7 +1143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
       <div class="ax-flex-1 ax-overflow-y-auto ax-pr-2">
         <div
-          class="ax-grid ax-gap-4"
+          class="ax-grid ax-gap-1"
           [ngClass]="
             selectedViewMode === 'square'
               ? 'ax-grid-cols-[repeat(auto-fill,minmax(6rem,1fr))]'
@@ -996,7 +1205,7 @@ class AXPIconChooserWidgetComponent extends AXPValueWidgetComponent {
         }
     }
     deleteIcon() {
-        this.setValue(null);
+        this.setValue(undefined);
     }
     editIcon() {
         this.openPopup();
@@ -1013,7 +1222,7 @@ class AXPIconChooserWidgetComponent extends AXPValueWidgetComponent {
         [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
         (click)="addIcon()"
       >
-        <i [class]="getValue() || 'fa-solid fa-plus'"></i>
+        <i [class]="getValue() ? getValue().styleClass + ' ' + getValue().iconClass : 'fa-solid fa-plus'"></i>
       </div>
 
       <!-- Right: Edit & Delete (only if value exists) -->
@@ -1031,7 +1240,7 @@ class AXPIconChooserWidgetComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-  </div> `, isInline: true, styles: [":host{display:block;height:100%}.icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </div> `, isInline: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPIconChooserWidgetComponent, decorators: [{
             type: Component,
@@ -1046,7 +1255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         [class]="getValue() ? 'ax-border-e ax-cursor-default' : 'icon-container ax-cursor-pointer'"
         (click)="addIcon()"
       >
-        <i [class]="getValue() || 'fa-solid fa-plus'"></i>
+        <i [class]="getValue() ? getValue().styleClass + ' ' + getValue().iconClass : 'fa-solid fa-plus'"></i>
       </div>
 
       <!-- Right: Edit & Delete (only if value exists) -->
@@ -1064,7 +1273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         </div>
       }
     </div>
-  </div> `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;height:100%}.icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"] }]
+  </div> `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300),10%);background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300),50%) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300),50%) 0,rgba(var(--ax-sys-color-primary-300),50%) 60%,transparent 0,transparent);background-size:7.5px 7.5px}\n"] }]
         }] });
 
 var iconChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -1084,6 +1293,12 @@ const AXPIconChooserWidget = {
         edit: {
             component: () => Promise.resolve().then(function () { return iconChooserWidget_component; }).then((c) => c.AXPIconChooserWidgetComponent),
         },
+        column: {
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs').then((c) => c.AXPIconChooserViewComponent),
+        },
+        view: {
+            component: () => import('./acorex-platform-themes-shared-icon-chooser-view.component-Dc3LQQOa.mjs').then((c) => c.AXPIconChooserViewComponent),
+        },
     },
 };
 
@@ -1311,7 +1526,7 @@ class AXPThemesSharedModule {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$2.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$3.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, imports: [i2$4.AXPComponentSlotModule, i3$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
@@ -1339,6 +1554,7 @@ class AXPThemesSharedModule {
                     AXPFontSizeChooserWidget,
                     AXPFontStyleChooserWidget,
                     AXPIconChooserWidget,
+                    AXPColorChooserWidgetConfig,
                 ],
             })] }); }
 }
@@ -1363,6 +1579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                                 AXPFontSizeChooserWidget,
                                 AXPFontStyleChooserWidget,
                                 AXPIconChooserWidget,
+                                AXPColorChooserWidgetConfig,
                             ],
                         }),
                     ],