@bimeister/pupakit.kit
Version:
PupaKit is an open source collection of Angular components based on an atomic approach to building interfaces, which guarantees better performance and greater development flexibility.
495 lines (477 loc) • 613 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ContentChildren, NgModule, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, Injectable, Inject, Directive, Injector, Optional, HostBinding, HostListener, ViewChild, forwardRef, ContentChild, RendererStyleFlags2, ElementRef, ViewChildren, Host } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { BehaviorSubject, Subscription, merge, combineLatest, Subject, scheduled, of, asapScheduler, fromEvent, forkJoin, NEVER, zip, animationFrameScheduler, asyncScheduler, ReplaySubject, timer } from 'rxjs';
import { map, startWith, pairwise, switchMap, mapTo, filter, distinctUntilChanged, withLatestFrom, take, switchMapTo, takeUntil, tap, debounceTime, delay, throttleTime, observeOn, subscribeOn } from 'rxjs/operators';
import * as i2 from '@bimeister/pupakit.common';
import { PupaPipesModule, Theme, DARK_THEME_CLASS, LIGHT_THEME_CLASS, OVERLAY_VIEWPORT_MARGIN_PX, subscribeInsideAngular, subscribeOutsideAngular, isTabletDevice, getAnimationFrameLoop, fromHammerEvent, createProviderIfMissing, UnitWidthStyleChangesProcessor } from '@bimeister/pupakit.common';
import * as i1 from '@angular/common';
import { CommonModule, DOCUMENT } from '@angular/common';
import * as i1$1 from '@bimeister/pupakit.icons';
import { PupaIconsModule, mdPersonIcon, appExceptionsCheck10Icon, appCheckboxMinusIcon, appChevronRightIcon, mdCloseIcon, appExceptionsCross8Icon } from '@bimeister/pupakit.icons';
import { filterNotNil, filterTruthy, isNil, isEmpty, getHslColorFromString, VOID, getUuid, filterFalsy, distinctUntilSerializedChanged, shareReplayWithRefCount, isEqual, resizeObservable, filterNotEmpty } from '@bimeister/utilities';
import * as i2$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i1$3 from '@angular/cdk/overlay';
import { ConnectionPositionPair, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
import * as i1$2 from '@angular/cdk/portal';
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import '@bimeister/utilities/common';
import * as i2$2 from '@angular/platform-browser';
var AnimationState;
(function (AnimationState) {
AnimationState["Void"] = "void";
AnimationState["Expanded"] = "expanded";
})(AnimationState || (AnimationState = {}));
const TRANSITION = '300ms ease-in-out';
class AccordionComponent {
constructor(changeDetectionRef) {
this.changeDetectionRef = changeDetectionRef;
this.showArrow = true;
this.destroyable = true;
this.kind = 'normal';
this.kind$ = new BehaviorSubject(this.kind);
this.expanded = false;
this.expandedChange = new EventEmitter();
this.expanded$ = new BehaviorSubject(this.expanded);
this.animationState$ = this.expanded$.pipe(map((expanded) => (expanded ? AnimationState.Expanded : AnimationState.Void)));
this.accordionClass$ = this.kind$.pipe(map((kind) => `accordion_${kind}`));
}
ngOnChanges(changes) {
if (changes.hasOwnProperty('kind')) {
this.processKindChange(changes.kind);
}
if (changes.hasOwnProperty('expanded')) {
this.processExpandedChange(changes.expanded);
}
}
toggle() {
this.updateExpanded(!this.expanded);
}
collapse() {
this.updateExpanded(false);
}
updateExpanded(expanded) {
if (this.expanded === expanded) {
return;
}
this.expanded = expanded;
this.expandedChange.emit(expanded);
this.expanded$.next(expanded);
this.changeDetectionRef.detectChanges();
}
processExpandedChange(expanded) {
this.expanded$.next(expanded.currentValue);
}
processKindChange(kind) {
this.kind$.next(kind.currentValue);
}
}
AccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
AccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionComponent, selector: "pupa-accordion", inputs: { showArrow: "showArrow", destroyable: "destroyable", kind: "kind", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion\" [ngClass]=\"accordionClass$ | async\" [class.accordion_expanded]=\"expanded$ | async\">\n <div class=\"accordion-header\" [class.accordion-header_expanded]=\"expanded$ | async\" (click)=\"toggle()\">\n <div class=\"accordion-header__content\" [class.accordion-header__content_with-arrow]=\"showArrow\">\n <ng-content></ng-content>\n </div>\n\n <ng-container *ngIf=\"showArrow\">\n <div class=\"arrow-container\">\n <pupa-icon name=\"app-chevron-down\" [@arrowRotated]=\"animationState$ | async\"></pupa-icon>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!destroyable || (expanded$ | async)\">\n <div class=\"accordion-body\" [@accordionExpanded]=\"animationState$ | async\">\n <ng-content select=\"pupa-accordion-body\"></ng-content>\n </div>\n </ng-container>\n</div>\n", styles: [":host{width:100%}.accordion{border-radius:1rem}.accordion_normal.accordion_expanded{background-color:rgba(var(--semantic-color_surface-tertiary),var(--semantic-color-alpha_surface-tertiary))}@media (hover: hover){.accordion_normal:hover .accordion-header{background-color:rgba(var(--semantic-color_kind-opacity-hover),var(--semantic-color-alpha_kind-opacity-hover))}}.accordion_border{border:1px solid rgba(var(--semantic-color_lines-normal),var(--semantic-color-alpha_lines-normal))}.accordion-header{display:flex;width:100%;padding:3rem;box-sizing:border-box;border-radius:1rem;cursor:pointer}.accordion-header_expanded{border-radius:1rem 1rem 0 0}.accordion-header__content{max-width:100%}.accordion-header__content_with-arrow{max-width:calc(100% - 14px)}.arrow-container{display:flex;align-items:center;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IconComponent, selector: "pupa-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
trigger('accordionExpanded', [
state(AnimationState.Void, style({ opacity: '0', height: '0px', visibility: 'hidden', overflow: 'hidden' })),
state(AnimationState.Expanded, style({ height: '*', overflow: 'hidden' })),
transition(`${AnimationState.Expanded} => ${AnimationState.Void}`, animate(TRANSITION)),
transition(`${AnimationState.Void} => ${AnimationState.Expanded}`, animate(TRANSITION)),
]),
trigger('arrowRotated', [
state(AnimationState.Void, style({ transform: 'rotate(0)' })),
state(AnimationState.Expanded, style({ transform: 'rotate(180deg)' })),
transition(`${AnimationState.Expanded} => ${AnimationState.Void}`, animate(TRANSITION)),
transition(`${AnimationState.Void} => ${AnimationState.Expanded}`, animate(TRANSITION)),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('accordionExpanded', [
state(AnimationState.Void, style({ opacity: '0', height: '0px', visibility: 'hidden', overflow: 'hidden' })),
state(AnimationState.Expanded, style({ height: '*', overflow: 'hidden' })),
transition(`${AnimationState.Expanded} => ${AnimationState.Void}`, animate(TRANSITION)),
transition(`${AnimationState.Void} => ${AnimationState.Expanded}`, animate(TRANSITION)),
]),
trigger('arrowRotated', [
state(AnimationState.Void, style({ transform: 'rotate(0)' })),
state(AnimationState.Expanded, style({ transform: 'rotate(180deg)' })),
transition(`${AnimationState.Expanded} => ${AnimationState.Void}`, animate(TRANSITION)),
transition(`${AnimationState.Void} => ${AnimationState.Expanded}`, animate(TRANSITION)),
]),
], template: "<div class=\"accordion\" [ngClass]=\"accordionClass$ | async\" [class.accordion_expanded]=\"expanded$ | async\">\n <div class=\"accordion-header\" [class.accordion-header_expanded]=\"expanded$ | async\" (click)=\"toggle()\">\n <div class=\"accordion-header__content\" [class.accordion-header__content_with-arrow]=\"showArrow\">\n <ng-content></ng-content>\n </div>\n\n <ng-container *ngIf=\"showArrow\">\n <div class=\"arrow-container\">\n <pupa-icon name=\"app-chevron-down\" [@arrowRotated]=\"animationState$ | async\"></pupa-icon>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"!destroyable || (expanded$ | async)\">\n <div class=\"accordion-body\" [@accordionExpanded]=\"animationState$ | async\">\n <ng-content select=\"pupa-accordion-body\"></ng-content>\n </div>\n </ng-container>\n</div>\n", styles: [":host{width:100%}.accordion{border-radius:1rem}.accordion_normal.accordion_expanded{background-color:rgba(var(--semantic-color_surface-tertiary),var(--semantic-color-alpha_surface-tertiary))}@media (hover: hover){.accordion_normal:hover .accordion-header{background-color:rgba(var(--semantic-color_kind-opacity-hover),var(--semantic-color-alpha_kind-opacity-hover))}}.accordion_border{border:1px solid rgba(var(--semantic-color_lines-normal),var(--semantic-color-alpha_lines-normal))}.accordion-header{display:flex;width:100%;padding:3rem;box-sizing:border-box;border-radius:1rem;cursor:pointer}.accordion-header_expanded{border-radius:1rem 1rem 0 0}.accordion-header__content{max-width:100%}.accordion-header__content_with-arrow{max-width:calc(100% - 14px)}.arrow-container{display:flex;align-items:center;margin-left:auto}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { showArrow: [{
type: Input
}], destroyable: [{
type: Input
}], kind: [{
type: Input
}], expanded: [{
type: Input
}], expandedChange: [{
type: Output
}] } });
class AccordionHeaderComponent {
}
AccordionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionHeaderComponent, selector: "pupa-accordion-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;gap:2rem;height:9rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion-header', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;gap:2rem;height:9rem}\n"] }]
}] });
class AccordionDescriptionComponent {
}
AccordionDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionDescriptionComponent, selector: "pupa-accordion-description", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:10px;line-height:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionDescriptionComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion-description', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:10px;line-height:12px}\n"] }]
}] });
class AccordionTitleComponent {
}
AccordionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionTitleComponent, selector: "pupa-accordion-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-family:NotoSans,sans-serif;font-weight:600;font-size:14px;line-height:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionTitleComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion-title', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{font-family:NotoSans,sans-serif;font-weight:600;font-size:14px;line-height:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}\n"] }]
}] });
class AccordionBodyComponent {
}
AccordionBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionBodyComponent, selector: "pupa-accordion-body", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:-webkit-box;padding:3rem;font-family:NotoSans,sans-serif;font-weight:400;font-size:12px;line-height:18px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionBodyComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion-body', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:-webkit-box;padding:3rem;font-family:NotoSans,sans-serif;font-weight:400;font-size:12px;line-height:18px}\n"] }]
}] });
class AccordionGroupComponent {
constructor() {
this.closeOthers = true;
this.subscription = new Subscription();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngAfterContentInit() {
this.subscription.add(this.processCloseOthers());
}
processCloseOthers() {
const accordionList$ = this.accordionList.changes.pipe(map((accordion) => accordion.toArray()), startWith(this.accordionList.toArray()));
const justAddedAccordionExpanded$ = accordionList$.pipe(pairwise(), map(([previousAccordionList, currentAccordionList]) => currentAccordionList.find((accordion) => !previousAccordionList.includes(accordion) && accordion.expanded)), filterNotNil());
const existingAccordionExpanded$ = accordionList$.pipe(switchMap((accordionList) => merge(...accordionList.map((accordion) => accordion.expanded$.pipe(filterTruthy(), mapTo(accordion))))));
return merge(justAddedAccordionExpanded$, existingAccordionExpanded$)
.pipe(filter(() => this.closeOthers))
.subscribe((expandedAccordion) => {
this.accordionList.forEach((accordion) => {
if (expandedAccordion !== accordion && accordion.expanded) {
accordion.collapse();
}
});
});
}
}
AccordionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AccordionGroupComponent, selector: "pupa-accordion-group", inputs: { closeOthers: "closeOthers" }, queries: [{ propertyName: "accordionList", predicate: AccordionComponent }], ngImport: i0, template: "<ng-content select=\"pupa-accordion\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AccordionGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-accordion-group', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"pupa-accordion\"></ng-content>\n" }]
}], propDecorators: { closeOthers: [{
type: Input
}], accordionList: [{
type: ContentChildren,
args: [AccordionComponent]
}] } });
const COMPONENTS$a = [
AccordionComponent,
AccordionHeaderComponent,
AccordionTitleComponent,
AccordionDescriptionComponent,
AccordionBodyComponent,
AccordionGroupComponent,
];
class PupaAccordionModule {
}
PupaAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PupaAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PupaAccordionModule, declarations: [AccordionComponent,
AccordionHeaderComponent,
AccordionTitleComponent,
AccordionDescriptionComponent,
AccordionBodyComponent,
AccordionGroupComponent], imports: [CommonModule, PupaIconsModule], exports: [AccordionComponent,
AccordionHeaderComponent,
AccordionTitleComponent,
AccordionDescriptionComponent,
AccordionBodyComponent,
AccordionGroupComponent] });
PupaAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAccordionModule, imports: [CommonModule, PupaIconsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAccordionModule, decorators: [{
type: NgModule,
args: [{
declarations: [...COMPONENTS$a],
imports: [CommonModule, PupaIconsModule],
exports: [...COMPONENTS$a],
}]
}] });
function getInitials(name) {
var _a, _b;
if (isNil(name)) {
return '';
}
const nameSectionsList = name.trim().split(' ');
const notEmptyNameSectionsList = nameSectionsList.filter((item) => !isEmpty(item));
const firstName = (_a = notEmptyNameSectionsList === null || notEmptyNameSectionsList === void 0 ? void 0 : notEmptyNameSectionsList[0]) === null || _a === void 0 ? void 0 : _a.trimStart();
const secondName = (_b = notEmptyNameSectionsList === null || notEmptyNameSectionsList === void 0 ? void 0 : notEmptyNameSectionsList[1]) === null || _b === void 0 ? void 0 : _b.trimStart();
if (isEmpty(firstName)) {
return '';
}
if (isEmpty(secondName)) {
return firstName[0].toUpperCase();
}
return `${firstName[0]}${secondName[0]}`.toUpperCase();
}
const SATURATION = 88;
const LIGHTNESS = 78;
var Mode;
(function (Mode) {
Mode["Icon"] = "icon";
Mode["Image"] = "image";
Mode["Username"] = "username";
Mode["Default"] = "default";
})(Mode || (Mode = {}));
class AvatarComponent {
constructor() {
this.username$ = new BehaviorSubject(null);
this.iconName$ = new BehaviorSubject(null);
this.src$ = new BehaviorSubject(null);
this.size = 'small';
this.size$ = new BehaviorSubject('small');
this.withBorder = false;
this.withBorder$ = new BehaviorSubject(false);
this.disabled = false;
this.disabled$ = new BehaviorSubject(false);
this.resultClassList$ = combineLatest([
this.size$,
this.withBorder$.pipe(map((withBorder) => (Boolean(withBorder) ? 'bordered' : null))),
]).pipe(map((classes) => classes
.filter((innerClass) => !isNil(innerClass))
.map((innerProperty) => `avatar_${innerProperty}`)));
this.isEmptyUserName$ = this.username$.pipe(map(isEmpty));
this.hslBackgroundColor$ = combineLatest([this.username$, this.disabled$]).pipe(map(([username, isDisabled]) => {
if (isEmpty(username) || isDisabled) {
return null;
}
const { h, s, l } = getHslColorFromString(username, SATURATION, LIGHTNESS);
return `hsl(${h}, ${s}%, ${l}%)`;
}));
this.initials$ = this.username$.pipe(map((username) => getInitials(username)));
this.backgroundImage$ = this.src$.pipe(map((src) => `url('${src !== null && src !== void 0 ? src : ''}')`));
this.mode$ = combineLatest([this.iconName$, this.src$, this.username$]).pipe(map(([iconName, src, username]) => {
if (!isNil(iconName)) {
return Mode.Icon;
}
if (!isNil(src)) {
return Mode.Image;
}
if (!isNil(username)) {
return Mode.Username;
}
return Mode.Default;
}));
this.mode = Mode;
}
ngOnChanges(changes) {
this.processUsernameChange(changes === null || changes === void 0 ? void 0 : changes.username);
this.processIconNameChange(changes === null || changes === void 0 ? void 0 : changes.iconName);
this.processSrcChange(changes === null || changes === void 0 ? void 0 : changes.src);
this.processSizeChange(changes === null || changes === void 0 ? void 0 : changes.size);
this.processWithBorderChange(changes === null || changes === void 0 ? void 0 : changes.withBorder);
this.processDisabledChange(changes === null || changes === void 0 ? void 0 : changes.disabled);
}
processUsernameChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (typeof updatedValue !== 'string') {
return;
}
if (isEmpty(updatedValue.trim())) {
return this.username$.next(null);
}
this.username$.next(updatedValue);
}
processIconNameChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (isNil(updatedValue)) {
return;
}
const serializedValue = isEmpty(updatedValue) ? null : updatedValue;
this.iconName$.next(serializedValue);
}
processSrcChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (isNil(updatedValue)) {
return;
}
const serializedValue = isEmpty(updatedValue) ? null : updatedValue;
this.src$.next(serializedValue);
}
processSizeChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (isNil(updatedValue)) {
return;
}
this.size$.next(updatedValue);
}
processWithBorderChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (isNil(updatedValue)) {
return;
}
this.withBorder$.next(updatedValue);
}
processDisabledChange(change) {
const updatedValue = change === null || change === void 0 ? void 0 : change.currentValue;
if (isNil(updatedValue)) {
return;
}
this.disabled$.next(updatedValue);
}
}
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AvatarComponent, selector: "pupa-avatar", inputs: { username: "username", iconName: "iconName", src: "src", size: "size", withBorder: "withBorder", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"avatar\"\n [ngClass]=\"resultClassList$ | async\"\n [style.background-color]=\"hslBackgroundColor$ | async\"\n [class.avatar_default]=\"isEmptyUserName$ | async\"\n [class.avatar_disabled]=\"disabled$ | async\"\n [ngSwitch]=\"mode$ | async\"\n>\n <ng-container *ngSwitchCase=\"mode.Icon\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <ng-container *ngSwitchCase=\"mode.Image\" [ngTemplateOutlet]=\"imageTemplate\"></ng-container>\n <ng-container *ngSwitchCase=\"mode.Username\" [ngTemplateOutlet]=\"usernameTemplate\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"defaultTemplate\"></ng-container>\n</div>\n\n<ng-template #iconTemplate>\n <div class=\"avatar__icon-container\">\n <pupa-icon class=\"avatar__icon\" [name]=\"iconName$ | async\"></pupa-icon>\n </div>\n</ng-template>\n\n<ng-template #imageTemplate>\n <div class=\"avatar__image-container\" [style.background-image]=\"backgroundImage$ | async\"></div>\n</ng-template>\n\n<ng-template #usernameTemplate>\n <div class=\"avatar__text\">{{ initials$ | async }}</div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n <div class=\"avatar__icon-container\">\n <pupa-icon class=\"avatar__icon\" [name]=\"'app-user'\"></pupa-icon>\n </div>\n</ng-template>\n", styles: [":host{font-size:4rem}.avatar{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;border-radius:100%;overflow:hidden;z-index:1;-webkit-user-select:none;user-select:none}.avatar_default{background-color:rgba(var(--color_neutral-5),var(--alpha-1000))}.avatar_default .avatar__icon{color:rgba(var(--color_neutral-1000),var(--alpha-1000))}:host-context(.dark-theme) .avatar_default{background-color:rgba(var(--color_neutral-500),var(--alpha-1000))}:host-context(.dark-theme) .avatar_default .avatar__icon{color:rgba(var(--color_neutral-1),var(--alpha-1000))}.avatar_disabled{background-color:rgba(var(--color_neutral-3),var(--alpha-1000))}:host-context(.dark-theme) .avatar_disabled{background-color:rgba(var(--color_neutral-600),var(--alpha-1000))}.avatar_disabled .avatar__text,.avatar_disabled .avatar__icon{color:rgba(var(--color_neutral-50),var(--alpha-1000))}:host-context(.dark-theme) .avatar_disabled .avatar__text,:host-context(.dark-theme) .avatar_disabled .avatar__icon{color:rgba(var(--color_neutral-60),var(--alpha-1000))}.avatar__icon-container{box-sizing:border-box;height:100%;width:100%}.avatar__image-container{box-sizing:border-box;height:100%;width:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.avatar__icon{display:block;height:100%;width:100%;color:rgba(var(--color_neutral-500),var(--alpha-1000))}.avatar__text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;line-height:3rem;white-space:nowrap;color:rgba(var(--color_neutral-500),var(--alpha-1000));font-family:NotoSans,sans-serif;font-weight:400;box-sizing:border-box;height:100%;width:100%}.avatar_small{width:1em;height:1em}.avatar_small .avatar__icon-container{padding:.125em}.avatar_small .avatar__text{font-size:.375em}.avatar_medium{width:1.25em;height:1.25em}.avatar_medium .avatar__icon-container{padding:.25em}.avatar_medium .avatar__text{font-size:.5em}.avatar_large{width:1.5em;height:1.5em}.avatar_large .avatar__icon-container{padding:.25em}.avatar_large .avatar__text{font-size:.625em}.avatar_bordered{border:1px solid var(--avatar-border_color, rgba(var(--semantic-color_surface-primary), var(--semantic-color-alpha_surface-primary)))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.IconComponent, selector: "pupa-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-avatar', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"avatar\"\n [ngClass]=\"resultClassList$ | async\"\n [style.background-color]=\"hslBackgroundColor$ | async\"\n [class.avatar_default]=\"isEmptyUserName$ | async\"\n [class.avatar_disabled]=\"disabled$ | async\"\n [ngSwitch]=\"mode$ | async\"\n>\n <ng-container *ngSwitchCase=\"mode.Icon\" [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <ng-container *ngSwitchCase=\"mode.Image\" [ngTemplateOutlet]=\"imageTemplate\"></ng-container>\n <ng-container *ngSwitchCase=\"mode.Username\" [ngTemplateOutlet]=\"usernameTemplate\"></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"defaultTemplate\"></ng-container>\n</div>\n\n<ng-template #iconTemplate>\n <div class=\"avatar__icon-container\">\n <pupa-icon class=\"avatar__icon\" [name]=\"iconName$ | async\"></pupa-icon>\n </div>\n</ng-template>\n\n<ng-template #imageTemplate>\n <div class=\"avatar__image-container\" [style.background-image]=\"backgroundImage$ | async\"></div>\n</ng-template>\n\n<ng-template #usernameTemplate>\n <div class=\"avatar__text\">{{ initials$ | async }}</div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n <div class=\"avatar__icon-container\">\n <pupa-icon class=\"avatar__icon\" [name]=\"'app-user'\"></pupa-icon>\n </div>\n</ng-template>\n", styles: [":host{font-size:4rem}.avatar{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;border-radius:100%;overflow:hidden;z-index:1;-webkit-user-select:none;user-select:none}.avatar_default{background-color:rgba(var(--color_neutral-5),var(--alpha-1000))}.avatar_default .avatar__icon{color:rgba(var(--color_neutral-1000),var(--alpha-1000))}:host-context(.dark-theme) .avatar_default{background-color:rgba(var(--color_neutral-500),var(--alpha-1000))}:host-context(.dark-theme) .avatar_default .avatar__icon{color:rgba(var(--color_neutral-1),var(--alpha-1000))}.avatar_disabled{background-color:rgba(var(--color_neutral-3),var(--alpha-1000))}:host-context(.dark-theme) .avatar_disabled{background-color:rgba(var(--color_neutral-600),var(--alpha-1000))}.avatar_disabled .avatar__text,.avatar_disabled .avatar__icon{color:rgba(var(--color_neutral-50),var(--alpha-1000))}:host-context(.dark-theme) .avatar_disabled .avatar__text,:host-context(.dark-theme) .avatar_disabled .avatar__icon{color:rgba(var(--color_neutral-60),var(--alpha-1000))}.avatar__icon-container{box-sizing:border-box;height:100%;width:100%}.avatar__image-container{box-sizing:border-box;height:100%;width:100%;background-position:center;background-size:cover;background-repeat:no-repeat}.avatar__icon{display:block;height:100%;width:100%;color:rgba(var(--color_neutral-500),var(--alpha-1000))}.avatar__text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;line-height:3rem;white-space:nowrap;color:rgba(var(--color_neutral-500),var(--alpha-1000));font-family:NotoSans,sans-serif;font-weight:400;box-sizing:border-box;height:100%;width:100%}.avatar_small{width:1em;height:1em}.avatar_small .avatar__icon-container{padding:.125em}.avatar_small .avatar__text{font-size:.375em}.avatar_medium{width:1.25em;height:1.25em}.avatar_medium .avatar__icon-container{padding:.25em}.avatar_medium .avatar__text{font-size:.5em}.avatar_large{width:1.5em;height:1.5em}.avatar_large .avatar__icon-container{padding:.25em}.avatar_large .avatar__text{font-size:.625em}.avatar_bordered{border:1px solid var(--avatar-border_color, rgba(var(--semantic-color_surface-primary), var(--semantic-color-alpha_surface-primary)))}\n"] }]
}], propDecorators: { username: [{
type: Input
}], iconName: [{
type: Input
}], src: [{
type: Input
}], size: [{
type: Input
}], withBorder: [{
type: Input
}], disabled: [{
type: Input
}] } });
class PupaAvatarModule {
}
PupaAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PupaAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PupaAvatarModule, declarations: [AvatarComponent], imports: [CommonModule, i1$1.PupaIconsModule, PupaPipesModule], exports: [AvatarComponent] });
PupaAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAvatarModule, imports: [CommonModule, PupaIconsModule.forFeature([mdPersonIcon]), PupaPipesModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaAvatarModule, decorators: [{
type: NgModule,
args: [{
declarations: [AvatarComponent],
exports: [AvatarComponent],
imports: [CommonModule, PupaIconsModule.forFeature([mdPersonIcon]), PupaPipesModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class BadgeIndicatorComponent {
constructor() {
this.state = 'progress';
this.icons = new Map([
['complete', 'app-exceptions-check-4'],
['error', 'app-exceptions-cross-4'],
]);
}
}
BadgeIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BadgeIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BadgeIndicatorComponent, selector: "pupa-badge-indicator", inputs: { state: "state" }, ngImport: i0, template: "<span class=\"badge-indicator\" [ngClass]=\"state\">\n <ng-container *ngIf=\"state === 'progress'; else iconBadge\">\n <span class=\"badge-indicator__icon outer-circle\"></span>\n <span class=\"badge-indicator__icon inner-circle\"></span>\n </ng-container>\n</span>\n<ng-template #iconBadge>\n <ng-container *ngIf=\"icons.get(state) as name\">\n <pupa-icon class=\"badge-indicator__icon\" [name]=\"name\"></pupa-icon>\n </ng-container>\n</ng-template>\n", styles: [":host{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto}.badge-indicator{width:2rem;height:2rem;color:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;border-radius:50%;align-items:center;justify-content:center;position:relative}.badge-indicator__icon{width:1rem;height:1rem;position:absolute}.complete{background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal));color:rgba(var(--semantic-color_text-inverse),var(--semantic-color-alpha_text-inverse))}.error{background-color:rgba(var(--semantic-color_kind-danger-normal),var(--semantic-color-alpha_kind-danger-normal))}.inner-circle{position:absolute;width:1rem;height:1rem;border-radius:50%;display:inline-block;background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal))}.outer-circle{position:absolute;width:2rem;height:2rem;border-radius:50%;background-color:rgba(var(--color_primary-150),var(--alpha-1000));animation:pulse 1.25s infinite alternate ease-in-out}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(.7)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IconComponent, selector: "pupa-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeIndicatorComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-badge-indicator', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"badge-indicator\" [ngClass]=\"state\">\n <ng-container *ngIf=\"state === 'progress'; else iconBadge\">\n <span class=\"badge-indicator__icon outer-circle\"></span>\n <span class=\"badge-indicator__icon inner-circle\"></span>\n </ng-container>\n</span>\n<ng-template #iconBadge>\n <ng-container *ngIf=\"icons.get(state) as name\">\n <pupa-icon class=\"badge-indicator__icon\" [name]=\"name\"></pupa-icon>\n </ng-container>\n</ng-template>\n", styles: [":host{display:flex;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto}.badge-indicator{width:2rem;height:2rem;color:rgba(var(--color_neutral-1),var(--alpha-1000));display:flex;border-radius:50%;align-items:center;justify-content:center;position:relative}.badge-indicator__icon{width:1rem;height:1rem;position:absolute}.complete{background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal));color:rgba(var(--semantic-color_text-inverse),var(--semantic-color-alpha_text-inverse))}.error{background-color:rgba(var(--semantic-color_kind-danger-normal),var(--semantic-color-alpha_kind-danger-normal))}.inner-circle{position:absolute;width:1rem;height:1rem;border-radius:50%;display:inline-block;background-color:rgba(var(--semantic-color_kind-primary-normal),var(--semantic-color-alpha_kind-primary-normal))}.outer-circle{position:absolute;width:2rem;height:2rem;border-radius:50%;background-color:rgba(var(--color_primary-150),var(--alpha-1000));animation:pulse 1.25s infinite alternate ease-in-out}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(.7)}}\n"] }]
}], propDecorators: { state: [{
type: Input
}] } });
class BadgeMarkerBlockComponent {
}
BadgeMarkerBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeMarkerBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BadgeMarkerBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BadgeMarkerBlockComponent, selector: "pupa-badge-marker-block", ngImport: i0, template: "<span class=\"badge-marker-block\">\n <ng-content></ng-content>\n</span>\n", styles: [".badge-marker-block{position:absolute;height:4rem;max-width:9rem;right:-2rem;top:-2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeMarkerBlockComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-badge-marker-block', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"badge-marker-block\">\n <ng-content></ng-content>\n</span>\n", styles: [".badge-marker-block{position:absolute;height:4rem;max-width:9rem;right:-2rem;top:-2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
}] });
class BadgeMarkerComponent {
constructor() {
this.size = 'medium';
}
}
BadgeMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BadgeMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BadgeMarkerComponent, selector: "pupa-badge-marker", inputs: { size: "size" }, ngImport: i0, template: "<span\n class=\"badge\"\n [ngClass]=\"{\n badge__medium: size === 'medium',\n badge__small: size === 'small'\n }\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".badge{position:absolute;left:calc(100% - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge__small{width:2rem;height:2rem;top:-2rem}.badge__medium{height:4rem;max-width:9rem;top:-4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeMarkerComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-badge-marker', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"badge\"\n [ngClass]=\"{\n badge__medium: size === 'medium',\n badge__small: size === 'small'\n }\"\n>\n <ng-content></ng-content>\n</span>\n", styles: [".badge{position:absolute;left:calc(100% - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge__small{width:2rem;height:2rem;top:-2rem}.badge__medium{height:4rem;max-width:9rem;top:-4rem}\n"] }]
}], propDecorators: { size: [{
type: Input
}] } });
class BadgeComponent {
}
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BadgeComponent, selector: "pupa-badge", ngImport: i0, template: "<ng-content> </ng-content>\n", styles: [":host{position:relative;display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{ selector: 'pupa-badge', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content> </ng-content>\n", styles: [":host{position:relative;display:inline-block}\n"] }]
}] });
class PupaBadgeModule {
}
PupaBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PupaBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PupaBadgeModule, declarations: [BadgeComponent, BadgeMarkerComponent, BadgeIndicatorComponent, BadgeMarkerBlockComponent], imports: [CommonModule, PupaIconsModule], exports: [BadgeComponent, BadgeMarkerComponent, BadgeIndicatorComponent, BadgeMarkerBlockComponent] });
PupaBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaBadgeModule, imports: [CommonModule, PupaIconsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PupaBadgeModule, decorators: [{
type: NgModule,
args: [{
declarations: [BadgeComponent, BadgeMarkerComponent, BadgeIndicatorComponent, BadgeMarkerBlockComponent],
imports: [CommonModule, PupaIconsModule],
exports: [BadgeComponent, BadgeMarkerComponent, BadgeIndicatorComponent, BadgeMarkerBlockComponent],
}]
}] });
const DROPDOWN_CONTAINER_DATA_TOKEN = new InjectionToken('DROPDOWN_CONTAINER_DATA_TOKEN');
class ThemeWrapperService {
constructor(themeService) {
this.themeService = themeService;
this.themeState$ = new BehaviorSubject(null);
this.theme$ = combineLatest([this.themeService.theme$, this.themeState$]).pipe(map(([globalTheme, localTheme]) => localTheme !== null && localTheme !== void 0 ? localTheme : globalTheme));
this.themeClass$ = this.theme$.pipe(map((theme) => (theme === Theme.Dark ? DARK_THEME_CLASS : LIGHT_THEME_CLASS)));
}
setTheme(theme) {
this.themeState$.next(theme);
}
}
ThemeWrapperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThemeWrapperService, deps: [{ token: i2.ThemeService }], target: i0.ɵɵFactoryTarget.Injectable });
ThemeWrapperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThemeWrapperService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThemeWrapperService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i2.ThemeService }]; } });
class ThemeWrapperComponent {
constructor(themeWrapperService, renderer, hostElement) {
this.themeWrapperService = themeWrapperService;
this.renderer = renderer;
this.hostElement = hostElement;
this.themeClass$ = new BehaviorSubject(null);
this.subscription = new Subscription();
}
ngOnInit() {
this.subscription.add(this.processThemeClass());
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngOnChanges(changes) {
this.processThemeChange(changes === null || changes === void 0 ? void 0 : changes.theme);
}
processThemeChange(change) {
this.themeWrapperService.setTheme(change === null || change === void 0 ? void 0 : change.currentValue);
}
processThemeClass() {
return this.themeWrapperService.themeClass$
.pipe(distinctUntilChanged(), withLatestFrom(this.themeClass$))
.subscribe(([themeClass, localThemeClass]) => {
this.renderer.addClass(this.hostElement.nativeElement, themeClass);
if (!isNil(localThemeClass)) {
this.renderer.removeClass(this.hostElement.nativeElement, localThemeClass);
}
this.themeClass$.next(themeClass);
});
}
}
ThemeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThemeWrapperComponent, deps: [{ token: ThemeWrapperService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ThemeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ThemeWrapperComponent, selector: "pupa-theme-wrapper", inputs: { theme: "theme" }, providers: [ThemeWrapperService], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["html :host.light-theme,.light-theme html :host{--semantic-color_surface-primary: var(--color_neutral-1);--semantic-color_surface-secondary: var(--color_neutral-1);--semantic-color_surface-tertiary: var(--color_neutral-3);--semantic-color_surface-action: var(--color_neutral-5);--semantic-color_surface-glass: var(--color_neutral-1);--semantic-color_kind-neutral-normal: var(--color_neutral-5);--semantic-color_kind-neutral-hover: var(--color_neutral-6);--semantic-color_kind-neutral-pressed: var(--color_neutral-7);--semantic-color_kind-neutral-active: var(--color_neutral-7);--semantic-color_kind-neutral-selected: var(--color_neutral-4);--semantic-color_kind-neutral-disabled: var(--color_neutral-3);--semantic-color_kind-opacity-normal: var(--color_neutral-1000);--semantic-color_kind-opacity-hover: var(--color_neutral-1000);--semantic-color_kind-opacity-pressed: var(--color_neutral-1000);--semantic-color_kind-opacity-active: var(--color_neutral-1000);--semantic-color_kind-opacity-selected: var(--color_neutral-1000);--semantic-color_kind-opacity-disabled: var(--color_neutral-1000);--semantic-color_kind-primary-normal: var(--color_primary-500);--semantic-color_kind-primary-hover: var(--color_primary-600);--semantic-color_kind-primary-pressed: var(--color_primary-700);--semantic-color_kind-primary-active: var(--color_primary-700);--semantic-color_kind-primary-disabled: var(--color_neutral-3);--semantic-color_kind-success-normal: var(--color_success-500);--semantic-color_kind-success-hover: var(--color_success-600);--semantic-color_kind-success-pressed: var(--color_success-700);--semantic-color_kind-success-active: var(--color_success-700);--semantic-col