oasys-lib 2.23.0 → 2.24.0-theming.0

package/fesm2022/oasys-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, EventEmitter, ViewChild, Output, ContentChild, NgModule, HostBinding, signal, forwardRef, computed, input, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, ContentChildren } from '@angular/core';
+import { inject, ElementRef, Directive, Injectable, DOCUMENT, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, HostListener, EventEmitter, ViewChild, Output, ContentChild, NgModule, HostBinding, signal, forwardRef, computed, input, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, ContentChildren, effect } from '@angular/core';
 import { BehaviorSubject, Subject, Observable } from 'rxjs';
 import { takeUntil, take, map } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/layout';
@@ -4195,6 +4195,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+const THEME_VALUE = {
+    DEFAULT: 'default',
+    TIER_1: 'loyalty-tier-1',
+    TIER_2: 'loyalty-tier-2',
+};
+const SCOPED_THEME_CLASSES = [THEME_VALUE.TIER_1, THEME_VALUE.TIER_2];
+class OasysThemeDirective {
+    uiThemeDashed = input(THEME_VALUE.DEFAULT, ...(ngDevMode ? [{ debugName: "uiThemeDashed", alias: 'ui-theme' }] : [{ alias: 'ui-theme' }]));
+    uiThemeCamel = input(undefined, ...(ngDevMode ? [{ debugName: "uiThemeCamel", alias: 'uiTheme' }] : [{ alias: 'uiTheme' }]));
+    elementRef = inject(ElementRef);
+    appliedDefaultBrandClass;
+    appliedTheme;
+    constructor() {
+        effect(() => {
+            const nextTheme = this.uiThemeCamel() ?? this.uiThemeDashed();
+            this.applyTheme(nextTheme);
+        });
+    }
+    applyTheme(nextTheme) {
+        if (nextTheme === this.appliedTheme)
+            return;
+        const host = this.elementRef.nativeElement;
+        const classList = host.classList;
+        if (nextTheme !== THEME_VALUE.DEFAULT) {
+            // Remove previously applied default reset class.
+            if (this.appliedDefaultBrandClass) {
+                classList.remove(this.appliedDefaultBrandClass);
+                this.appliedDefaultBrandClass = undefined;
+            }
+            // Remove all scoped theme classes before applying the next one.
+            SCOPED_THEME_CLASSES.forEach((themeClass) => {
+                classList.remove(themeClass);
+            });
+            if (!classList.contains(nextTheme))
+                classList.add(nextTheme);
+            this.appliedTheme = nextTheme;
+            return;
+        }
+        SCOPED_THEME_CLASSES.forEach((themeClass) => {
+            classList.remove(themeClass);
+        });
+        const defaultBrandClass = this.findNearestBrandTokenClass(host);
+        if (defaultBrandClass) {
+            if (this.appliedDefaultBrandClass && this.appliedDefaultBrandClass !== defaultBrandClass) {
+                classList.remove(this.appliedDefaultBrandClass);
+            }
+            classList.add(defaultBrandClass);
+            this.appliedDefaultBrandClass = defaultBrandClass;
+        }
+        else if (this.appliedDefaultBrandClass) {
+            classList.remove(this.appliedDefaultBrandClass);
+            this.appliedDefaultBrandClass = undefined;
+        }
+        this.appliedTheme = nextTheme;
+    }
+    findNearestBrandTokenClass(host) {
+        let node = host.parentElement;
+        while (node) {
+            const classList = node.classList;
+            for (let i = 0; i < classList.length; i += 1) {
+                const className = classList.item(i);
+                if (className?.startsWith('brand-tokens-'))
+                    return className;
+            }
+            node = node.parentElement;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: OasysThemeDirective, isStandalone: true, selector: "[ui-theme], [uiTheme]", inputs: { uiThemeDashed: { classPropertyName: "uiThemeDashed", publicName: "ui-theme", isSignal: true, isRequired: false, transformFunction: null }, uiThemeCamel: { classPropertyName: "uiThemeCamel", publicName: "uiTheme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ui-theme], [uiTheme]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { uiThemeDashed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui-theme", required: false }] }], uiThemeCamel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiTheme", required: false }] }] } });
+
+class OasysDirectivesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OasysDirectivesModule, imports: [OasysHrefDirective, OasysAutofocusDirective, OasysThemeDirective], exports: [OasysHrefDirective, OasysAutofocusDirective, OasysThemeDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysDirectivesModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OasysDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [OasysHrefDirective, OasysAutofocusDirective, OasysThemeDirective],
+                    exports: [OasysHrefDirective, OasysAutofocusDirective, OasysThemeDirective],
+                }]
+        }] });
+
 /*
  * Public API Surface of oasys-lib
  */
@@ -4203,5 +4295,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, ComboboxComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, MEDIA_BASE_URL_TOKEN, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, ComboboxComponent as OasysComboboxComponent, OasysComboboxModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
+export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, ComboboxComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, MEDIA_BASE_URL_TOKEN, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, OasysAutofocusDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, ComboboxComponent as OasysComboboxComponent, OasysComboboxModule, OasysDirectivesModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, OasysHrefDirective, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, OasysThemeDirective, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
 //# sourceMappingURL=oasys-lib.mjs.map