@acorex/platform 19.2.17-next.0 → 19.2.19

package/fesm2022/acorex-platform-themes-default-setting-view.component-B3Aob67f.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-default-setting-view.component-B3Aob67f.mjs","sources":["../../../../libs/platform/themes/default/src/lib/layouts/setting-layout/setting-view/setting-view.component.ts","../../../../libs/platform/themes/default/src/lib/layouts/setting-layout/setting-view/setting-view.component.html"],"sourcesContent":["import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXFormComponent, AXFormModule } from '@acorex/components/form';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXValidationModule } from '@acorex/core/validation';\nimport { AXPLayoutBuilderModule, AXPWidgetContainerComponent } from '@acorex/platform/layout/builder';\nimport { AXPSettingsViewModel } from '@acorex/platform/layout/setting';\nimport {\n  AXPLayoutThemeService,\n  AXPThemeLayoutBlockComponent,\n  AXPThemeLayoutHeaderComponent,\n  AXPThemeLayoutSectionComponent,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  Injector,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n  templateUrl: 'setting-view.component.html',\n  imports: [\n    CommonModule,\n    FormsModule,\n    //\n    AXDecoratorModule,\n    AXBreadcrumbsModule,\n    AXButtonModule,\n    AXBadgeModule,\n    AXTranslationModule,\n    AXSearchBoxModule,\n    AXDropdownButtonModule,\n    AXLoadingModule,\n    AXFormModule,\n    AXValidationModule,\n    //\n    AXPLayoutBuilderModule,\n    AXPThemeLayoutBlockComponent,\n    AXPThemeLayoutHeaderComponent,\n    AXPThemeLayoutSectionComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ax-w-full',\n  },\n})\nexport class AXPSettingsViewComponent {\n  protected vm = inject(AXPSettingsViewModel);\n  protected injector = inject(Injector);\n  protected layoutService = inject(AXPLayoutThemeService);\n  private from = viewChild(AXFormComponent);\n  private container = viewChild(AXPWidgetContainerComponent);\n\n  #effect1 = effect(() => {\n    this.vm.isBusy.set(this.container()?.isBusy() ?? false);\n  });\n\n  ngAfterViewInit() {\n    this.vm.form = this.from()!;\n    this.vm.builder = this.container()!.builderService;\n  }\n}\n","<ax-form>\n  <axp-widgets-container [context]=\"vm.context()\" (onContextChanged)=\"vm.handleContextChanged($event)\"\n    *translate=\"let t\">\n    @if(vm.isSearching() && vm.searchResult()!.length>0) { @for(group of vm.searchResult(); track group.name;let\n    first=$first) {\n    <p class=\"ax-text-lg md:ax-text-xl ax-font-semibold ax-py-3 ax-text-neutral-500\" [class.ax-pt-0]=\"first\">\n      {{ group.title | translate | async }}\n    </p>\n    <axp-layout-sections>\n      @for (section of group.sections; track section.name) {\n      <ng-container [ngTemplateOutlet]=\"sectionTpl\" [ngTemplateOutletContext]=\"{  section }\"\n        [ngTemplateOutletInjector]=\"injector\"></ng-container>\n      }\n    </axp-layout-sections>\n    } } @else if(vm.isSearching() && vm.searchResult()!.length===0) {\n    <div class=\"ax-p-2\">\n      <div\n        class=\"ax-mt-3 ax-flex ax-flex-col ax-justify-center ax-h-[calc(100vh-236px)] ax-items-center ax-p-10 ax-gap-10\">\n        <p class=\"ax-text-xl md:ax-text-2xl ax-font-bold\">\n          {{ t('settings.search-not-found', { scope: 'platform-management' }) | async }}\n        </p>\n      </div>\n    </div>\n    } @else if(vm.groups()?.sections) {\n    <axp-layout-sections>\n      @for(section of vm.groups()?.sections; track section.name) {\n      <ng-container [ngTemplateOutlet]=\"sectionTpl\" [ngTemplateOutletContext]=\"{  section }\"\n        [ngTemplateOutletInjector]=\"injector\"></ng-container>\n      }\n    </axp-layout-sections>\n    } @else {\n    <div class=\"ax-bg-lightest ax-px-4 ax-border ax-rounded-md\">\n      @for(group of vm.groups()?.groups; track $index) {\n      <!-- <div class=\"ax-p-4\">\n      <a [routerLink]=\"vm.fullRoute + group.name\"\n        class=\"ax-text-primary-500 dark:ax-text-primary-200 ax-underline ax-font-bold ax-text-xl\">{{ group.title\n        }}</a>\n    </div> -->\n      }\n    </div>\n    }\n    <ng-template #sectionTpl let-section=\"section\">\n      <axp-layout-section>\n        <axp-layout-header>\n          <axp-layout-title>\n            {{ section.title | translate | async }}\n          </axp-layout-title>\n          @if(section.description) {\n          <axp-layout-description>\n            {{ section.description | translate | async }}\n          </axp-layout-description>\n          }\n        </axp-layout-header>\n        <axp-layout-content>\n          @let isSideMenuOpen=layoutService.isSideMenuOpen(); @for(j of section.settings; track j.name){\n          <div class=\"--item-container\" [class.ax-hidden]=\"widget.options()['visibility'] == false\">\n            <!-- Title and Description Section -->\n            <div class=\"ax-col-span-1 lg:ax-col-span-3 xl:ax-col-span-2 2xl:ax-col-span-3\" [ngClass]=\"{\n                'xl:ax-col-span-2': !isSideMenuOpen,\n                'xl:ax-col-span-3': isSideMenuOpen,\n                '3xl:ax-col-span-3': !isSideMenuOpen,\n                '3xl:ax-col-span-4': isSideMenuOpen\n              }\">\n              @if(j.title) {\n              <axp-layout-title>{{ j.title | translate | async }}</axp-layout-title>\n              } @if(j.description) {\n              <axp-layout-description>{{ j.description | translate | async }}</axp-layout-description>\n              }\n            </div>\n\n            <!-- Editor Section -->\n            <ax-form-field\n              class=\"ax-flex ax-w-full sm:ax-col-span-2 lg:ax-col-span-4 xl:ax-col-span-3 2xl:ax-col-span-5 3xl:ax-col-span-4\"\n              [ngClass]=\"{\n                  'xl:ax-col-start-3': !isSideMenuOpen,\n                  'xl:ax-col-start-4': isSideMenuOpen,\n                  '3xl:ax-col-start-4': !isSideMenuOpen,\n                  '3xl:ax-col-start-5': isSideMenuOpen,\n                }\">\n              <ng-container axp-widget-renderer [node]=\"j.widget\" [mode]=\"'edit'\" #widget=\"widgetRenderer\">\n              </ng-container>\n            </ax-form-field>\n          </div>\n          }\n        </axp-layout-content>\n      </axp-layout-section>\n    </ng-template>\n  </axp-widgets-container>\n</ax-form>"],"names":["i2","i4"],"mappings":"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"}

package/fesm2022/acorex-platform-themes-default-theme-palette-preview.page-DqAngWCf.mjs

@@ -0,0 +1,146 @@
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i1 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i4 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i7 from '@acorex/components/dropdown-button';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i6 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXPSettingService, AXPSettingScope } from '@acorex/platform/common';
+import { AXPSettingsViewModel } from '@acorex/platform/layout/setting';
+import { AXPLayoutThemeService, AXP_THEME_PALETTE_PROVIDER, AXPThemeLayoutSetting, AXPThemeLayoutBlockComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent } from '@acorex/platform/themes/shared';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { AXPSimplePageLayout } from './acorex-platform-themes-default.mjs';
+
+class AXPThemePalettePreviewPageComponent {
+    constructor() {
+        this.layout = inject(AXPLayoutThemeService);
+        this.settingService = inject(AXPSettingService);
+        this.themePalleteProvider = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.defaultPalette = { name: 'default', title: 'Default', path: 'fake', colors: [] };
+        this.palettes = signal([]);
+        this.currentPalleteName = signal('default');
+        this.currentPallete = computed(() => {
+            return this.palettes().find((c) => c.name == this.currentPalleteName()) ?? this.defaultPalette;
+        });
+        this.hexColors = signal({});
+        this.isLoading = signal(true);
+        this.ranges = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+        this.colors = [
+            'default',
+            'primary',
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+            'accent1',
+            'accent2',
+            'accent3',
+        ];
+    }
+    async ngOnInit() {
+        const list = await this.themePalleteProvider.getList();
+        this.palettes.set(list);
+        await this.updateView();
+        //
+        this.settingService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            await this.updateView();
+        });
+    }
+    async updateView() {
+        this.isLoading.set(true);
+        this.currentPalleteName.set(await this.settingService.get(AXPThemeLayoutSetting.Palette));
+        //
+        setTimeout(() => {
+            const root = document.documentElement; // Select the root element
+            const colors = {};
+            this.colors.forEach((color) => {
+                this.ranges.forEach((range) => {
+                    const colorValue = getComputedStyle(root).getPropertyValue(`--ax-sys-color-${color}-${range}`);
+                    colors[`${color}-${range}`] = this.rgbToHex(colorValue);
+                });
+            });
+            //
+            this.hexColors.set(colors);
+            //
+            this.isLoading.set(false);
+        }, 100);
+    }
+    async handleChangeTheme(palette) {
+        await this.settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.Palette, palette.name);
+    }
+    rgbToHex(rgb) {
+        const match = rgb.match(/\d+/g);
+        if (match && match.length >= 3) {
+            const r = parseInt(match[0], 10);
+            const g = parseInt(match[1], 10);
+            const b = parseInt(match[2], 10);
+            return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;
+        }
+        return rgb; // Fallback if parsing fails
+    }
+    getTextColor(range) {
+        switch (true) {
+            case range >= 50 && range <= 100:
+                return 'lightest';
+            case range >= 200 && range <= 300:
+                return 'lighter';
+            case range === 400:
+                return 'light';
+            case range === 500:
+                return 'surface';
+            case range === 600:
+                return 'dark';
+            case range >= 700 && range <= 800:
+                return 'darker';
+            case range >= 900 && range <= 950:
+                return 'darkest';
+            default:
+                return 'unknown';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemePalettePreviewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPThemePalettePreviewPageComponent, isStandalone: true, selector: "ng-component", providers: [AXPSettingsViewModel, AXUnsubscriber], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-header>\n    <axp-layout-title> {{currentPallete().title}} Palette Colors </axp-layout-title>\n\n    <axp-layout-description> Preview of The Theme Colors </axp-layout-description>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> Theme </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Preview </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary>\n        <ax-dropdown-button [text]=\"currentPallete().title\" [color]=\"'primary'\">\n          <ax-button-item-list>\n            @for (palette of palettes(); track $index) {\n            <ax-button-item [text]=\"palette.title\" [selected]=\"palette.name==currentPalleteName()\"\n              (onClick)=\"handleChangeTheme(palette)\">\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-button>\n      </axp-layout-actions-primary>\n    </axp-layout-actions>\n  </axp-layout-page-header>\n\n  <axp-layout-page-content class=\"ax-justify-center ax-px-16 ax-py-8\">\n    @if(!isLoading()) {\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Colors</h2>\n    <div class=\"ax-grid ax-grid-flow-row ax-gap-4\">\n      @for (color of colors.slice(1); track $index) {\n      <div class=\"ax-flex ax-flex-row ax-gap-4\">\n        <div class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-items-start ax-me-10\"\n          [style.color]=\"'rgb(var(--ax-sys-color-' + color + '-500))'\">\n          <div class=\"ax-font-semibold ax-text-xs\">\n            <span class=\"ax-capitalize\">{{color}}</span>\n          </div>\n          <div class=\"ax-text-2xl ax-mt-2\">\n            <span class=\"ax-opacity-50\">#</span><span class=\"ax-capitalize\">{{hexColors()[color +\n              '-500'].slice(1)}}</span>\n          </div>\n        </div>\n\n        @for (range of ranges; track $index) {\n        <div\n          class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-shadow-md ax-bg-{{color}}-{{range}} ax-text-{{color}}-on-{{getTextColor(range)}}\">\n          <div>\n            <div class=\"ax-text-center ax-text-sm ax-font-medium\">{{range}}</div>\n            <div class=\"ax-text-center ax-text-xs ax-uppercase ax-opacity-90\">{{hexColors()[color + '-' + range]}}</div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Surfaces</h2>\n    <div class=\"surface-container\">\n      <div class=\"ax-border-lightest ax-bg-lightest ax-text-on-lightest\">Lightest</div>\n      <div class=\"ax-border-lighter ax-bg-lighter ax-text-on-lighter\">Lighter</div>\n      <div class=\"ax-border-light ax-bg-light ax-text-on-light\">Light</div>\n      <div class=\"!ax-col-span-12 ax-border-surface ax-bg-surface ax-text-on-surface\">Surface</div>\n      <div class=\"ax-border-dark ax-bg-dark ax-text-on-dark\">Dark</div>\n      <div class=\"ax-border-darker ax-bg-darker ax-text-on-darker\">Darker</div>\n      <div class=\"ax-border-darkest ax-bg-darkest ax-text-on-darkest\">Darkest</div>\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Color Surfaces</h2>\n    @for(color of colors.slice(1);track $index){\n    <h6 class=\"!ax-mb-4 !ax-text-sm ax-capitalize\">{{color}}</h6>\n    <div class=\"surface-container\">\n      <div class=\" ax-border-{{color}}-lightest ax-bg-{{color}}-lightest ax-text-{{color}}-on-lightest\">Surface Lightest\n      </div>\n      <div class=\" ax-border-{{color}}-lighter ax-bg-{{color}}-lighter ax-text-{{color}}-on-lighter\">Surface Lighter\n      </div>\n      <div class=\" ax-border-{{color}}-light ax-bg-{{color}}-light ax-text-{{color}}-on-light\">Surface Light</div>\n      <div class=\"!ax-col-span-12 ax-border-{{color}}-surface ax-bg-{{color}}-surface ax-text-{{color}}-on-surface \">\n        Surface</div>\n      <div class=\" ax-border-{{color}}-dark ax-bg-{{color}}-dark ax-text-{{color}}-on-dark\">Surface Dark</div>\n      <div class=\" ax-border-{{color}}-darker ax-bg-{{color}}-darker ax-text-{{color}}-on-darker\">Surface Darker</div>\n      <div class=\" ax-border-{{color}}-darkest ax-bg-{{color}}-darkest ax-text-{{color}}-on-darkest\">Surface Darkest\n      </div>\n    </div>\n    }\n\n    }\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Components</h2>\n    <div class=\"ax-grid ax-grid-cols-8 ax-gap-x-6 ax-gap-y-12 ax-justify-center\">\n      @for (color of colors; track $index) {\n      <div class=\"ax-flex ax-flex-col ax-gap-3\">\n        <ax-button [text]=\"color\" [look]=\"'solid'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'twotone'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'outline'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'blank'\" [color]=\"color\"> </ax-button>\n      </div>\n      }\n    </div>\n  </axp-layout-page-content>\n</axp-layout-simple-page>", styles: [".surface-container{margin-bottom:2rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem;border-radius:.75rem}.surface-container>*{display:flex;min-height:3rem;align-items:center;justify-content:center;padding:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;grid-column:span 4 / span 4;border-radius:.375rem;border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+                //
+                AXSearchBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i1.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i1.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i7.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: 
+                //
+                AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutPageHeaderComponent, selector: "axp-layout-page-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPThemePalettePreviewPageComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        //
+                        AXSearchBoxModule,
+                        AXDecoratorModule,
+                        AXBreadcrumbsModule,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXTabsModule,
+                        AXBadgeModule,
+                        AXLoadingModule,
+                        AXDropdownButtonModule,
+                        //
+                        AXPSimplePageLayout,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutPageHeaderComponent,
+                        AXPThemeLayoutActionsComponent,
+                        AXPThemeLayoutPagePrimaryActionsComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXPSettingsViewModel, AXUnsubscriber], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-header>\n    <axp-layout-title> {{currentPallete().title}} Palette Colors </axp-layout-title>\n\n    <axp-layout-description> Preview of The Theme Colors </axp-layout-description>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> Theme </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Preview </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary>\n        <ax-dropdown-button [text]=\"currentPallete().title\" [color]=\"'primary'\">\n          <ax-button-item-list>\n            @for (palette of palettes(); track $index) {\n            <ax-button-item [text]=\"palette.title\" [selected]=\"palette.name==currentPalleteName()\"\n              (onClick)=\"handleChangeTheme(palette)\">\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-button>\n      </axp-layout-actions-primary>\n    </axp-layout-actions>\n  </axp-layout-page-header>\n\n  <axp-layout-page-content class=\"ax-justify-center ax-px-16 ax-py-8\">\n    @if(!isLoading()) {\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Colors</h2>\n    <div class=\"ax-grid ax-grid-flow-row ax-gap-4\">\n      @for (color of colors.slice(1); track $index) {\n      <div class=\"ax-flex ax-flex-row ax-gap-4\">\n        <div class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-items-start ax-me-10\"\n          [style.color]=\"'rgb(var(--ax-sys-color-' + color + '-500))'\">\n          <div class=\"ax-font-semibold ax-text-xs\">\n            <span class=\"ax-capitalize\">{{color}}</span>\n          </div>\n          <div class=\"ax-text-2xl ax-mt-2\">\n            <span class=\"ax-opacity-50\">#</span><span class=\"ax-capitalize\">{{hexColors()[color +\n              '-500'].slice(1)}}</span>\n          </div>\n        </div>\n\n        @for (range of ranges; track $index) {\n        <div\n          class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-shadow-md ax-bg-{{color}}-{{range}} ax-text-{{color}}-on-{{getTextColor(range)}}\">\n          <div>\n            <div class=\"ax-text-center ax-text-sm ax-font-medium\">{{range}}</div>\n            <div class=\"ax-text-center ax-text-xs ax-uppercase ax-opacity-90\">{{hexColors()[color + '-' + range]}}</div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Surfaces</h2>\n    <div class=\"surface-container\">\n      <div class=\"ax-border-lightest ax-bg-lightest ax-text-on-lightest\">Lightest</div>\n      <div class=\"ax-border-lighter ax-bg-lighter ax-text-on-lighter\">Lighter</div>\n      <div class=\"ax-border-light ax-bg-light ax-text-on-light\">Light</div>\n      <div class=\"!ax-col-span-12 ax-border-surface ax-bg-surface ax-text-on-surface\">Surface</div>\n      <div class=\"ax-border-dark ax-bg-dark ax-text-on-dark\">Dark</div>\n      <div class=\"ax-border-darker ax-bg-darker ax-text-on-darker\">Darker</div>\n      <div class=\"ax-border-darkest ax-bg-darkest ax-text-on-darkest\">Darkest</div>\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Color Surfaces</h2>\n    @for(color of colors.slice(1);track $index){\n    <h6 class=\"!ax-mb-4 !ax-text-sm ax-capitalize\">{{color}}</h6>\n    <div class=\"surface-container\">\n      <div class=\" ax-border-{{color}}-lightest ax-bg-{{color}}-lightest ax-text-{{color}}-on-lightest\">Surface Lightest\n      </div>\n      <div class=\" ax-border-{{color}}-lighter ax-bg-{{color}}-lighter ax-text-{{color}}-on-lighter\">Surface Lighter\n      </div>\n      <div class=\" ax-border-{{color}}-light ax-bg-{{color}}-light ax-text-{{color}}-on-light\">Surface Light</div>\n      <div class=\"!ax-col-span-12 ax-border-{{color}}-surface ax-bg-{{color}}-surface ax-text-{{color}}-on-surface \">\n        Surface</div>\n      <div class=\" ax-border-{{color}}-dark ax-bg-{{color}}-dark ax-text-{{color}}-on-dark\">Surface Dark</div>\n      <div class=\" ax-border-{{color}}-darker ax-bg-{{color}}-darker ax-text-{{color}}-on-darker\">Surface Darker</div>\n      <div class=\" ax-border-{{color}}-darkest ax-bg-{{color}}-darkest ax-text-{{color}}-on-darkest\">Surface Darkest\n      </div>\n    </div>\n    }\n\n    }\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Components</h2>\n    <div class=\"ax-grid ax-grid-cols-8 ax-gap-x-6 ax-gap-y-12 ax-justify-center\">\n      @for (color of colors; track $index) {\n      <div class=\"ax-flex ax-flex-col ax-gap-3\">\n        <ax-button [text]=\"color\" [look]=\"'solid'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'twotone'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'outline'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'blank'\" [color]=\"color\"> </ax-button>\n      </div>\n      }\n    </div>\n  </axp-layout-page-content>\n</axp-layout-simple-page>", styles: [".surface-container{margin-bottom:2rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem;border-radius:.75rem}.surface-container>*{display:flex;min-height:3rem;align-items:center;justify-content:center;padding:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;grid-column:span 4 / span 4;border-radius:.375rem;border-width:1px}\n"] }]
+        }] });
+
+export { AXPThemePalettePreviewPageComponent };
+//# sourceMappingURL=acorex-platform-themes-default-theme-palette-preview.page-DqAngWCf.mjs.map

package/fesm2022/acorex-platform-themes-default-theme-palette-preview.page-DqAngWCf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-themes-default-theme-palette-preview.page-DqAngWCf.mjs","sources":["../../../../libs/platform/themes/default/src/lib/pages/theme-palette-preview/theme-palette-preview.page.ts","../../../../libs/platform/themes/default/src/lib/pages/theme-palette-preview/theme-palette-preview.page.html"],"sourcesContent":["import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXTabsModule } from '@acorex/components/tabs';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXUnsubscriber } from '@acorex/core/utils';\nimport { AXPSettingScope, AXPSettingService } from '@acorex/platform/common';\nimport { AXPSettingsViewModel } from '@acorex/platform/layout/setting';\nimport {\n  AXP_THEME_PALETTE_PROVIDER,\n  AXPLayoutThemeService,\n  AXPThemeLayoutActionsComponent,\n  AXPThemeLayoutBlockComponent,\n  AXPThemeLayoutPageHeaderComponent,\n  AXPThemeLayoutPagePrimaryActionsComponent,\n  AXPThemeLayoutSetting,\n  AXPThemePalette,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { AXPSimplePageLayout } from '../../layouts/base';\n@Component({\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    RouterModule,\n    //\n    AXSearchBoxModule,\n    AXDecoratorModule,\n    AXBreadcrumbsModule,\n    AXTranslationModule,\n    AXButtonModule,\n    AXTabsModule,\n    AXBadgeModule,\n    AXLoadingModule,\n    AXDropdownButtonModule,\n    //\n    AXPSimplePageLayout,\n    AXPThemeLayoutBlockComponent,\n    AXPThemeLayoutPageHeaderComponent,\n    AXPThemeLayoutActionsComponent,\n    AXPThemeLayoutPagePrimaryActionsComponent,\n  ],\n  templateUrl: './theme-palette-preview.page.html',\n  styleUrl: './theme-palette-preview.page.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [AXPSettingsViewModel, AXUnsubscriber],\n})\nexport class AXPThemePalettePreviewPageComponent {\n  protected readonly layout = inject(AXPLayoutThemeService);\n  protected readonly settingService = inject(AXPSettingService);\n  private themePalleteProvider = inject(AXP_THEME_PALETTE_PROVIDER);\n\n  private readonly unsubscriber = inject(AXUnsubscriber);\n\n  private defaultPalette: AXPThemePalette = { name: 'default', title: 'Default', path: 'fake', colors: [] };\n\n  protected readonly palettes = signal<AXPThemePalette[]>([]);\n  protected currentPalleteName = signal<string>('default');\n  protected currentPallete = computed<AXPThemePalette>(() => {\n    return this.palettes().find((c) => c.name == this.currentPalleteName()) ?? this.defaultPalette;\n  });\n\n  protected hexColors = signal<{ [key: string]: string }>({});\n\n  protected isLoading = signal(true);\n\n  protected readonly ranges = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n  protected readonly colors = [\n    'default',\n    'primary',\n    'secondary',\n    'success',\n    'warning',\n    'danger',\n    'accent1',\n    'accent2',\n    'accent3',\n  ];\n\n  async ngOnInit() {\n    const list = await this.themePalleteProvider.getList();\n    this.palettes.set(list);\n    await this.updateView();\n    //\n    this.settingService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {\n      await this.updateView();\n    });\n  }\n\n  private async updateView() {\n    this.isLoading.set(true);\n    this.currentPalleteName.set(await this.settingService.get(AXPThemeLayoutSetting.Palette));\n    //\n    setTimeout(() => {\n      const root = document.documentElement; // Select the root element\n      const colors: { [key: string]: string } = {};\n      this.colors.forEach((color) => {\n        this.ranges.forEach((range) => {\n          const colorValue = getComputedStyle(root).getPropertyValue(`--ax-sys-color-${color}-${range}`);\n          colors[`${color}-${range}`] = this.rgbToHex(colorValue);\n        });\n      });\n      //\n      this.hexColors.set(colors);\n      //\n      this.isLoading.set(false);\n    }, 100);\n  }\n\n  protected async handleChangeTheme(palette: AXPThemePalette) {\n    await this.settingService.scope(AXPSettingScope.User).set(AXPThemeLayoutSetting.Palette, palette.name);\n  }\n\n  private rgbToHex(rgb: string): string {\n    const match = rgb.match(/\\d+/g);\n    if (match && match.length >= 3) {\n      const r = parseInt(match[0], 10);\n      const g = parseInt(match[1], 10);\n      const b = parseInt(match[2], 10);\n      return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;\n    }\n    return rgb; // Fallback if parsing fails\n  }\n\n  protected getTextColor(range: number): string {\n    switch (true) {\n      case range >= 50 && range <= 100:\n        return 'lightest';\n      case range >= 200 && range <= 300:\n        return 'lighter';\n      case range === 400:\n        return 'light';\n      case range === 500:\n        return 'surface';\n      case range === 600:\n        return 'dark';\n      case range >= 700 && range <= 800:\n        return 'darker';\n      case range >= 900 && range <= 950:\n        return 'darkest';\n      default:\n        return 'unknown';\n    }\n  }\n}\n","<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-header>\n    <axp-layout-title> {{currentPallete().title}} Palette Colors </axp-layout-title>\n\n    <axp-layout-description> Preview of The Theme Colors </axp-layout-description>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> Theme </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Preview </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary>\n        <ax-dropdown-button [text]=\"currentPallete().title\" [color]=\"'primary'\">\n          <ax-button-item-list>\n            @for (palette of palettes(); track $index) {\n            <ax-button-item [text]=\"palette.title\" [selected]=\"palette.name==currentPalleteName()\"\n              (onClick)=\"handleChangeTheme(palette)\">\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-button>\n      </axp-layout-actions-primary>\n    </axp-layout-actions>\n  </axp-layout-page-header>\n\n  <axp-layout-page-content class=\"ax-justify-center ax-px-16 ax-py-8\">\n    @if(!isLoading()) {\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Colors</h2>\n    <div class=\"ax-grid ax-grid-flow-row ax-gap-4\">\n      @for (color of colors.slice(1); track $index) {\n      <div class=\"ax-flex ax-flex-row ax-gap-4\">\n        <div class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-items-start ax-me-10\"\n          [style.color]=\"'rgb(var(--ax-sys-color-' + color + '-500))'\">\n          <div class=\"ax-font-semibold ax-text-xs\">\n            <span class=\"ax-capitalize\">{{color}}</span>\n          </div>\n          <div class=\"ax-text-2xl ax-mt-2\">\n            <span class=\"ax-opacity-50\">#</span><span class=\"ax-capitalize\">{{hexColors()[color +\n              '-500'].slice(1)}}</span>\n          </div>\n        </div>\n\n        @for (range of ranges; track $index) {\n        <div\n          class=\"ax-h-20 ax-w-20 ax-rounded-lg ax-flex ax-justify-center ax-flex-col ax-shadow-md ax-bg-{{color}}-{{range}} ax-text-{{color}}-on-{{getTextColor(range)}}\">\n          <div>\n            <div class=\"ax-text-center ax-text-sm ax-font-medium\">{{range}}</div>\n            <div class=\"ax-text-center ax-text-xs ax-uppercase ax-opacity-90\">{{hexColors()[color + '-' + range]}}</div>\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Surfaces</h2>\n    <div class=\"surface-container\">\n      <div class=\"ax-border-lightest ax-bg-lightest ax-text-on-lightest\">Lightest</div>\n      <div class=\"ax-border-lighter ax-bg-lighter ax-text-on-lighter\">Lighter</div>\n      <div class=\"ax-border-light ax-bg-light ax-text-on-light\">Light</div>\n      <div class=\"!ax-col-span-12 ax-border-surface ax-bg-surface ax-text-on-surface\">Surface</div>\n      <div class=\"ax-border-dark ax-bg-dark ax-text-on-dark\">Dark</div>\n      <div class=\"ax-border-darker ax-bg-darker ax-text-on-darker\">Darker</div>\n      <div class=\"ax-border-darkest ax-bg-darkest ax-text-on-darkest\">Darkest</div>\n    </div>\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mb-4\">Color Surfaces</h2>\n    @for(color of colors.slice(1);track $index){\n    <h6 class=\"!ax-mb-4 !ax-text-sm ax-capitalize\">{{color}}</h6>\n    <div class=\"surface-container\">\n      <div class=\" ax-border-{{color}}-lightest ax-bg-{{color}}-lightest ax-text-{{color}}-on-lightest\">Surface Lightest\n      </div>\n      <div class=\" ax-border-{{color}}-lighter ax-bg-{{color}}-lighter ax-text-{{color}}-on-lighter\">Surface Lighter\n      </div>\n      <div class=\" ax-border-{{color}}-light ax-bg-{{color}}-light ax-text-{{color}}-on-light\">Surface Light</div>\n      <div class=\"!ax-col-span-12 ax-border-{{color}}-surface ax-bg-{{color}}-surface ax-text-{{color}}-on-surface \">\n        Surface</div>\n      <div class=\" ax-border-{{color}}-dark ax-bg-{{color}}-dark ax-text-{{color}}-on-dark\">Surface Dark</div>\n      <div class=\" ax-border-{{color}}-darker ax-bg-{{color}}-darker ax-text-{{color}}-on-darker\">Surface Darker</div>\n      <div class=\" ax-border-{{color}}-darkest ax-bg-{{color}}-darkest ax-text-{{color}}-on-darkest\">Surface Darkest\n      </div>\n    </div>\n    }\n\n    }\n\n    <h2 class=\"ax-font-semibold ax-text-2xl ax-mt-8 ax-mb-4\">Components</h2>\n    <div class=\"ax-grid ax-grid-cols-8 ax-gap-x-6 ax-gap-y-12 ax-justify-center\">\n      @for (color of colors; track $index) {\n      <div class=\"ax-flex ax-flex-col ax-gap-3\">\n        <ax-button [text]=\"color\" [look]=\"'solid'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'twotone'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'outline'\" [color]=\"color\"> </ax-button>\n        <ax-button [text]=\"color\" [look]=\"'blank'\" [color]=\"color\"> </ax-button>\n      </div>\n      }\n    </div>\n  </axp-layout-page-content>\n</axp-layout-simple-page>"],"names":["i2","i3","i4"],"mappings":"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"}