@masterteam/system-settings 0.0.13 → 0.0.14

package/fesm2022/masterteam-system-settings.mjs

@@ -18,28 +18,34 @@ import { Card } from '@masterteam/components/card';
 import { MultiSelectField } from '@masterteam/components/multi-select-field';
 import { SelectField } from '@masterteam/components/select-field';
 import { RadioCardsField } from '@masterteam/components/radio-cards-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
 import { ModalRef } from '@masterteam/components/dialog';
 import { DateField } from '@masterteam/components/date-field';
 import { TextField } from '@masterteam/components/text-field';
 import { Table } from '@masterteam/components/table';
 import { NumberField } from '@masterteam/components/number-field';
 import { TextareaField } from '@masterteam/components/textarea-field';
-import { ToggleField } from '@masterteam/components/toggle-field';
 
 /**
- * "General Configuration" — product-wide application behaviour that is not tied
- * to a specific feature area. Currently holds the explore landing view; more
- * entries are expected to land in this card.
+ * "Experience & Appearance" — product-wide application behaviour that is not
+ * tied to a specific feature area: the explore landing view and whether the
+ * topbar design switcher is offered. More entries are expected here.
  */
 class SystemSettingsGeneralConfigSection {
     generalConfigurationForm = input.required(...(ngDevMode ? [{ debugName: "generalConfigurationForm" }] : /* istanbul ignore next */ []));
     exploreDefaultViewOptions = input([], ...(ngDevMode ? [{ debugName: "exploreDefaultViewOptions" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsGeneralConfigSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: SystemSettingsGeneralConfigSection, isStandalone: true, selector: "mt-system-settings-general-config-section", inputs: { generalConfigurationForm: { classPropertyName: "generalConfigurationForm", publicName: "generalConfigurationForm", isSignal: true, isRequired: true, transformFunction: null }, exploreDefaultViewOptions: { classPropertyName: "exploreDefaultViewOptions", publicName: "exploreDefaultViewOptions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div [formGroup]=\"generalConfigurationForm()\" class=\"space-y-5\">\n      <div class=\"space-y-1\">\n        <h4 class=\"text-base font-semibold text-neutral-900\">\n          {{ t(\"general-configuration-title\") }}\n        </h4>\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"general-configuration-description\") }}\n        </p>\n      </div>\n\n      <mt-radio-cards-field\n        formControlName=\"defaultExploreView\"\n        [options]=\"exploreDefaultViewOptions()\"\n        [optionLabel]=\"'name'\"\n        [optionValue]=\"'id'\"\n        [label]=\"t('explore-default-view')\"\n        [hint]=\"t('explore-default-view-hint')\"\n        [required]=\"true\"\n        size=\"small\"\n      />\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block;height:100%}mt-card{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: RadioCardsField, selector: "mt-radio-cards-field", inputs: ["circle", "label", "hint", "readonly", "required", "color", "size", "optionLabel", "optionValue", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: SystemSettingsGeneralConfigSection, isStandalone: true, selector: "mt-system-settings-general-config-section", inputs: { generalConfigurationForm: { classPropertyName: "generalConfigurationForm", publicName: "generalConfigurationForm", isSignal: true, isRequired: true, transformFunction: null }, exploreDefaultViewOptions: { classPropertyName: "exploreDefaultViewOptions", publicName: "exploreDefaultViewOptions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div [formGroup]=\"generalConfigurationForm()\" class=\"space-y-5\">\n      <div class=\"space-y-1\">\n        <h4 class=\"text-base font-semibold text-neutral-900\">\n          {{ t(\"general-configuration-title\") }}\n        </h4>\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"general-configuration-description\") }}\n        </p>\n      </div>\n\n      <mt-radio-cards-field\n        formControlName=\"defaultExploreView\"\n        [options]=\"exploreDefaultViewOptions()\"\n        [optionLabel]=\"'name'\"\n        [optionValue]=\"'id'\"\n        [label]=\"t('explore-default-view')\"\n        [hint]=\"t('explore-default-view-hint')\"\n        [required]=\"true\"\n        size=\"small\"\n      />\n\n      <div class=\"space-y-1\">\n        <mt-toggle-field\n          formControlName=\"showDesignSwitcher\"\n          [label]=\"t('design-switcher')\"\n        />\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"design-switcher-hint\") }}\n        </p>\n      </div>\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block;height:100%}mt-card{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: RadioCardsField, selector: "mt-radio-cards-field", inputs: ["circle", "label", "hint", "readonly", "required", "color", "size", "optionLabel", "optionValue", "options"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsGeneralConfigSection, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-system-settings-general-config-section', imports: [ReactiveFormsModule, TranslocoDirective, Card, RadioCardsField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div [formGroup]=\"generalConfigurationForm()\" class=\"space-y-5\">\n      <div class=\"space-y-1\">\n        <h4 class=\"text-base font-semibold text-neutral-900\">\n          {{ t(\"general-configuration-title\") }}\n        </h4>\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"general-configuration-description\") }}\n        </p>\n      </div>\n\n      <mt-radio-cards-field\n        formControlName=\"defaultExploreView\"\n        [options]=\"exploreDefaultViewOptions()\"\n        [optionLabel]=\"'name'\"\n        [optionValue]=\"'id'\"\n        [label]=\"t('explore-default-view')\"\n        [hint]=\"t('explore-default-view-hint')\"\n        [required]=\"true\"\n        size=\"small\"\n      />\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block;height:100%}mt-card{height:100%}\n"] }]
+            args: [{ selector: 'mt-system-settings-general-config-section', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        Card,
+                        RadioCardsField,
+                        ToggleField,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div [formGroup]=\"generalConfigurationForm()\" class=\"space-y-5\">\n      <div class=\"space-y-1\">\n        <h4 class=\"text-base font-semibold text-neutral-900\">\n          {{ t(\"general-configuration-title\") }}\n        </h4>\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"general-configuration-description\") }}\n        </p>\n      </div>\n\n      <mt-radio-cards-field\n        formControlName=\"defaultExploreView\"\n        [options]=\"exploreDefaultViewOptions()\"\n        [optionLabel]=\"'name'\"\n        [optionValue]=\"'id'\"\n        [label]=\"t('explore-default-view')\"\n        [hint]=\"t('explore-default-view-hint')\"\n        [required]=\"true\"\n        size=\"small\"\n      />\n\n      <div class=\"space-y-1\">\n        <mt-toggle-field\n          formControlName=\"showDesignSwitcher\"\n          [label]=\"t('design-switcher')\"\n        />\n        <p class=\"text-sm text-neutral-600\">\n          {{ t(\"design-switcher-hint\") }}\n        </p>\n      </div>\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block;height:100%}mt-card{height:100%}\n"] }]
         }], propDecorators: { generalConfigurationForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalConfigurationForm", required: true }] }], exploreDefaultViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "exploreDefaultViewOptions", required: false }] }] } });
 
 class SystemSettingsGeneralSection {
@@ -267,6 +273,7 @@ const EXPLORE_DEFAULT_VIEW_OPTIONS = [
 ];
 const DEFAULT_GENERAL_CONFIGURATION = {
     defaultExploreView: 'cards',
+    showDesignSwitcher: false,
 };
 const DEFAULT_DATE_FORMAT_OPTIONS = [
     {
@@ -404,6 +411,9 @@ class SystemSettings {
                 nonNullable: true,
                 validators: [Validators.required],
             }),
+            showDesignSwitcher: new FormControl(false, {
+                nonNullable: true,
+            }),
         }),
         timezone: new FormGroup({
             regionId: new FormControl(null, Validators.required),
@@ -786,6 +796,7 @@ class SystemSettings {
         this.holidayItems.set(holidays.data);
         this.form.controls.generalConfiguration.setValue({
             defaultExploreView: generalConfiguration.defaultExploreView,
+            showDesignSwitcher: generalConfiguration.showDesignSwitcher,
         });
         this.form.controls.timezone.setValue({
             regionId: timezone.region?.id ?? null,
@@ -896,6 +907,8 @@ class SystemSettings {
         return {
             defaultExploreView: normalizeExploreDefaultView(this.form.controls.generalConfiguration.controls.defaultExploreView
                 .value),
+            showDesignSwitcher: this.form.controls.generalConfiguration.controls.showDesignSwitcher
+                .value === true,
         };
     }
     buildWeekendValue() {
@@ -936,6 +949,8 @@ class SystemSettings {
         return {
             defaultExploreView: normalizeExploreDefaultView(setting.value['defaultExploreView'] ??
                 setting.value['DefaultExploreView']),
+            showDesignSwitcher: normalizeShowDesignSwitcher(setting.value['showDesignSwitcher'] ??
+                setting.value['ShowDesignSwitcher']),
         };
     }
     extractHolidaysValue(setting) {
@@ -1087,6 +1102,7 @@ class SystemSettings {
     normalizeGeneralConfigurationSnapshot(value) {
         return {
             defaultExploreView: normalizeExploreDefaultView(value.defaultExploreView),
+            showDesignSwitcher: normalizeShowDesignSwitcher(value.showDesignSwitcher),
         };
     }
     normalizeTimezoneSnapshot(value) {
@@ -1413,6 +1429,13 @@ function getNumberArray(value) {
         .map((item) => (typeof item === 'number' ? item : Number(item)))
         .filter((item) => Number.isInteger(item));
 }
+/**
+ * The design switcher is opt-in, so anything that is not an explicit `true`
+ * (or the string a settings record may round-trip it as) reads as hidden.
+ */
+function normalizeShowDesignSwitcher(value) {
+    return value === true || value === 'true' || value === 'True';
+}
 function normalizeExploreDefaultView(value) {
     return EXPLORE_DEFAULT_VIEW_OPTIONS.some((option) => option.id === value)
         ? value