@besaitech/ng-design-system 0.0.60 → 0.0.61

package/fesm2022/besaitech-ng-design-system.mjs

@@ -18408,6 +18408,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"] }]
         }], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
+/**
+ * Fixed, theme- AND brand-independent hues on purpose: a non-production marker must look identical in every
+ * app, brand and colour-scheme, so it uses literal sky / amber rather than themeable design-system tokens
+ * (which a brand preset could redefine). Sky for DEV, amber for TEST.
+ */
+const MARKERS = {
+    dev: { label: 'DEV', bar: 'bg-[#38bdf8]', tab: 'bg-[#38bdf8] text-[#0c1a24]', variant: 'dev' },
+    test: { label: 'TEST', bar: 'bg-[#f59e0b]', tab: 'bg-[#f59e0b] text-[#1c1916]', variant: 'test' },
+};
+/**
+ * Non-production environment marker: a 3px rule pinned across the very top of the viewport with a small tab
+ * hanging from its centre — sky **DEV** or amber **TEST**, nothing in production. Fixed and click-through,
+ * above all app chrome, so a dev or test environment is never mistaken for the live one.
+ *
+ * Presentation only, no i18n or environment dependency: the host app supplies the resolved `[env]` (from its
+ * `environment.env`, or — for an SSR app — from the request host) and, optionally, the translated
+ * screen-reader sentences. Render it once from the app's root component.
+ */
+class SdsEnvBanner {
+    /** The resolved build environment. Only `dev` and `test` show a marker; `prod`/anything else shows nothing. */
+    env = input(...(ngDevMode ? [undefined, { debugName: "env" }] : []));
+    /** Screen-reader sentence for the DEV marker (pass a translated string; English default). */
+    devSrLabel = input('Development environment — not production', ...(ngDevMode ? [{ debugName: "devSrLabel" }] : []));
+    /** Screen-reader sentence for the TEST marker (pass a translated string; English default). */
+    testSrLabel = input('Test environment — not production', ...(ngDevMode ? [{ debugName: "testSrLabel" }] : []));
+    marker = computed(() => {
+        const env = this.env();
+        return env === 'dev' ? MARKERS.dev : env === 'test' ? MARKERS.test : null;
+    }, ...(ngDevMode ? [{ debugName: "marker" }] : []));
+    srLabel = computed(() => {
+        const m = this.marker();
+        return m ? (m.variant === 'dev' ? this.devSrLabel() : this.testSrLabel()) : '';
+    }, ...(ngDevMode ? [{ debugName: "srLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsEnvBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsEnvBanner, isStandalone: true, selector: "sds-env-banner", inputs: { env: { classPropertyName: "env", publicName: "env", isSignal: true, isRequired: false, transformFunction: null }, devSrLabel: { classPropertyName: "devSrLabel", publicName: "devSrLabel", isSignal: true, isRequired: false, transformFunction: null }, testSrLabel: { classPropertyName: "testSrLabel", publicName: "testSrLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (marker(); as m) {
+      <div
+        class="pointer-events-none fixed inset-x-0 top-0 z-[2147483000] h-[3px]"
+        [class]="m.bar"
+        role="note"
+        data-testid="env-banner"
+      >
+        <span
+          class="absolute left-1/2 top-0 -translate-x-1/2 rounded-b-lg px-3 pb-[3px] pt-px font-sans text-[11px] font-extrabold leading-4 tracking-[0.12em] shadow-[0_2px_6px_rgb(0_0_0/0.18)]"
+          [class]="m.tab"
+          aria-hidden="true"
+          >{{ m.label }}</span
+        >
+        @if (srLabel(); as sr) {
+          <span class="sr-only">{{ sr }}</span>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsEnvBanner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-env-banner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (marker(); as m) {
+      <div
+        class="pointer-events-none fixed inset-x-0 top-0 z-[2147483000] h-[3px]"
+        [class]="m.bar"
+        role="note"
+        data-testid="env-banner"
+      >
+        <span
+          class="absolute left-1/2 top-0 -translate-x-1/2 rounded-b-lg px-3 pb-[3px] pt-px font-sans text-[11px] font-extrabold leading-4 tracking-[0.12em] shadow-[0_2px_6px_rgb(0_0_0/0.18)]"
+          [class]="m.tab"
+          aria-hidden="true"
+          >{{ m.label }}</span
+        >
+        @if (srLabel(); as sr) {
+          <span class="sr-only">{{ sr }}</span>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { env: [{ type: i0.Input, args: [{ isSignal: true, alias: "env", required: false }] }], devSrLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "devSrLabel", required: false }] }], testSrLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "testSrLabel", required: false }] }] } });
+
 /*
  * Public API Surface of saitech-design-system — the Saitech / App design system.
  */
@@ -18417,5 +18500,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsEnvBanner, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map