@testgorilla/tgo-ui 4.2.4 → 5.0.0

package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs

@@ -0,0 +1,231 @@
+import { AsyncPipe, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, EnvironmentInjector, ApplicationRef, TemplateRef, Injector, createComponent, Injectable, signal, viewChild, ViewContainerRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LanguageService, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
+import * as i1 from '@testgorilla/tgo-ui/components/button';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
+import { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { Subject } from 'rxjs';
+
+/* eslint-disable no-underscore-dangle */
+var SidePanelAnimationState;
+(function (SidePanelAnimationState) {
+    SidePanelAnimationState["Open"] = "open";
+    SidePanelAnimationState["Closed"] = "closed";
+    SidePanelAnimationState["ClosedRight"] = "closedRight";
+    SidePanelAnimationState["ClosedLeft"] = "closedLeft";
+})(SidePanelAnimationState || (SidePanelAnimationState = {}));
+class SidePanelConfig {
+}
+const defaultSidePanelConfig = {
+    position: 'right',
+    showBackButton: false,
+    title: '',
+    data: undefined,
+    showHeader: true,
+    showCloseButton: true,
+    size: 'small',
+};
+const SIDE_PANEL_CONFIG = new InjectionToken('SIDE_PANEL_CONFIG', {
+    providedIn: 'root',
+    factory: () => defaultSidePanelConfig,
+});
+/**
+ * Reference to a side panel opened via the SidePanelService.
+ * Similar to MatDialogRef from Angular Material.
+ */
+class SidePanelRef {
+    constructor() {
+        this._afterClosed = new Subject();
+    }
+    /**
+     * Observable that emits when the side panel is closed.
+     * Emits the result passed to the close method, or undefined if no result was provided.
+     */
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    /**
+     * Closes the side panel with an optional result.
+     * @param result Optional data to be emitted via afterClosed()
+     */
+    close(result) {
+        // This will be overridden by the service
+    }
+    /** @internal */
+    _emitClose(result) {
+        this._afterClosed.next(result);
+        this._afterClosed.complete();
+    }
+}
+
+const sidePanelAnimationDuration = 150;
+const sidePanelAnimation = [
+    trigger('slideInOut', [
+        state(`${SidePanelAnimationState.Open}`, style({ transform: 'translateX(0)' })),
+        state(`${SidePanelAnimationState.ClosedRight}`, style({ transform: 'translateX(100%)' })),
+        state(`${SidePanelAnimationState.ClosedLeft}`, style({ transform: 'translateX(-100%)' })),
+        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedRight}`, [
+            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+        ]),
+        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedLeft}`, [
+            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+        ]),
+    ]),
+];
+const backdropAnimation = [
+    trigger('fadeInOut', [
+        state(`${SidePanelAnimationState.Open}`, style({ opacity: 0.25 })),
+        state(`${SidePanelAnimationState.Closed}`, style({ opacity: 0 })),
+        transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.Closed}`, [
+            animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+        ]),
+    ]),
+];
+
+const SIDE_PANEL_DATA = new InjectionToken('SIDE_PANEL_DATA');
+
+class SidePanelService {
+    constructor() {
+        this.defaultSidePanelConfig = inject(SIDE_PANEL_CONFIG);
+        this.injector = inject(EnvironmentInjector);
+        this.appRef = inject(ApplicationRef);
+    }
+    open(content, config, parentInjector) {
+        const panelConfig = { ...this.defaultSidePanelConfig, ...config };
+        const sidePanelRef = new SidePanelRef();
+        this.currentSidePanelRef = sidePanelRef;
+        sidePanelRef.close = (result) => {
+            this.close(result);
+        };
+        if (!this.SidePanelComponentRef) {
+            const injector = this.createSidePanelInjector(panelConfig, parentInjector);
+            const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);
+            this.SidePanelComponentRef = SidePanelComponentRef;
+        }
+        if (content instanceof TemplateRef) {
+            this.loadTemplate(content);
+        }
+        else {
+            this.loadComponent(content, sidePanelRef);
+        }
+        this.SidePanelComponentRef.instance.open();
+        return sidePanelRef;
+    }
+    close(result) {
+        if (this.SidePanelComponentRef) {
+            this.SidePanelComponentRef.instance.close(result);
+        }
+    }
+    destroyComponent(result) {
+        if (this.currentSidePanelRef) {
+            this.currentSidePanelRef._emitClose(result);
+            this.currentSidePanelRef = undefined;
+        }
+        if (this.SidePanelComponentRef) {
+            this.appRef.detachView(this.SidePanelComponentRef.hostView);
+            this.SidePanelComponentRef.destroy();
+            this.SidePanelComponentRef = undefined;
+        }
+        if (this.contentComponentRef) {
+            this.contentComponentRef.destroy();
+            this.contentComponentRef = undefined;
+        }
+    }
+    createSidePanelInjector(config, parentInjector) {
+        return Injector.create({
+            parent: parentInjector,
+            providers: [
+                { provide: SidePanelConfig, useValue: config },
+                { provide: SIDE_PANEL_DATA, useValue: config.data },
+            ],
+        });
+    }
+    createSidePanelComponent(position, injector) {
+        const sidePanelComponentRef = createComponent(SidePanelComponent, {
+            environmentInjector: this.injector,
+            elementInjector: injector,
+        });
+        this.appRef.attachView(sidePanelComponentRef.hostView);
+        const sidePanelEl = sidePanelComponentRef.hostView.rootNodes[0];
+        sidePanelEl.querySelector('.side-panel')?.classList.add(position);
+        document.body.appendChild(sidePanelEl);
+        return sidePanelComponentRef;
+    }
+    loadComponent(component, sidePanelRef) {
+        const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+        if (viewContainerRef) {
+            viewContainerRef().clear();
+            this.contentComponentRef = viewContainerRef().createComponent(component);
+            // Set the component instance on the SidePanelRef
+            sidePanelRef.componentInstance = this.contentComponentRef.instance;
+        }
+    }
+    loadTemplate(template) {
+        const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+        if (viewContainerRef) {
+            viewContainerRef().clear();
+            this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidePanelService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidePanelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class SidePanelComponent {
+    constructor() {
+        this.sidePanelPosition = signal('right');
+        this.sidePanelContainer = viewChild.required('sidePanelContainer', { read: ViewContainerRef });
+        this.sidePanel = viewChild.required('sidePanel');
+        this.backdrop = viewChild.required('sidePanelBackdrop');
+        this.language = LanguageService.defaultLanguage;
+        this.isOpen = signal(false);
+        this.size = signal(undefined);
+        this.isSmall = computed(() => this.size() === 'small');
+        this.isLarge = computed(() => this.size() === 'large');
+        this.animation = computed(() => {
+            if (this.isOpen()) {
+                return SidePanelAnimationState.Open;
+            }
+            return this.sidePanelPosition() === 'left'
+                ? SidePanelAnimationState.ClosedLeft
+                : SidePanelAnimationState.ClosedRight;
+        });
+        this.sidePanelService = inject(SidePanelService);
+        this.sidePanelConfig = inject(SidePanelConfig);
+        const { position, size } = this.sidePanelConfig;
+        this.sidePanelPosition.set(position);
+        this.size.set(size);
+    }
+    open() {
+        setTimeout(() => {
+            this.isOpen.set(true);
+        });
+    }
+    close(result) {
+        this.isOpen.set(false);
+        setTimeout(() => {
+            this.sidePanelService.destroyComponent(result);
+        }, sidePanelAnimationDuration);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass], template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action-close{margin-left:8px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{display:block;display:-webkit-box;max-height:3em;line-height:1.6em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:32px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelRef, SidePanelService, backdropAnimation, defaultSidePanelConfig, sidePanelAnimation, sidePanelAnimationDuration };
+//# sourceMappingURL=testgorilla-tgo-ui-components-side-panel.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-side-panel.mjs","sources":["../../../components/side-panel/side-panel.model.ts","../../../components/side-panel/side-panel.animations.ts","../../../components/side-panel/side-panel-data-injection-token.ts","../../../components/side-panel/side-panel.service.ts","../../../components/side-panel/side-panel.component.ts","../../../components/side-panel/side-panel.component.html","../../../components/side-panel/testgorilla-tgo-ui-components-side-panel.ts"],"sourcesContent":["/* eslint-disable no-underscore-dangle */\nimport { InjectionToken } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\nexport type SidePanelPosition = 'left' | 'right';\n\nexport enum SidePanelAnimationState {\n  Open = 'open',\n  Closed = 'closed',\n  ClosedRight = 'closedRight',\n  ClosedLeft = 'closedLeft',\n}\n\nexport type SidePanelSize = 'small' | 'large';\n\nexport class SidePanelConfig {\n  title: string;\n  position: SidePanelPosition;\n  showBackButton: boolean;\n  data?: unknown;\n  showCloseButton?: boolean;\n  showHeader?: boolean;\n  panelClass?: string;\n  size?: SidePanelSize;\n}\n\nexport const defaultSidePanelConfig: SidePanelConfig = {\n  position: 'right',\n  showBackButton: false,\n  title: '',\n  data: undefined,\n  showHeader: true,\n  showCloseButton: true,\n  size: 'small',\n};\n\nexport const SIDE_PANEL_CONFIG = new InjectionToken<SidePanelConfig>('SIDE_PANEL_CONFIG', {\n  providedIn: 'root',\n  factory: () => defaultSidePanelConfig,\n});\n\n/**\n * Reference to a side panel opened via the SidePanelService.\n * Similar to MatDialogRef from Angular Material.\n */\nexport class SidePanelRef<T = any, R = any> {\n  private readonly _afterClosed = new Subject<T | undefined>();\n\n  /**\n   * Instance of the component loaded into the side panel.\n   * Will be undefined if a TemplateRef was used instead of a component.\n   */\n  componentInstance?: R;\n\n  /**\n   * Observable that emits when the side panel is closed.\n   * Emits the result passed to the close method, or undefined if no result was provided.\n   */\n  afterClosed(): Observable<T | undefined> {\n    return this._afterClosed.asObservable();\n  }\n\n  /**\n   * Closes the side panel with an optional result.\n   * @param result Optional data to be emitted via afterClosed()\n   */\n  close(result?: T): void {\n    // This will be overridden by the service\n  }\n\n  /** @internal */\n  _emitClose(result?: T): void {\n    this._afterClosed.next(result);\n    this._afterClosed.complete();\n  }\n}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { SidePanelAnimationState } from './side-panel.model';\n\nexport const sidePanelAnimationDuration = 150;\n\nexport const sidePanelAnimation = [\n  trigger('slideInOut', [\n    state(`${SidePanelAnimationState.Open}`, style({ transform: 'translateX(0)' })),\n    state(`${SidePanelAnimationState.ClosedRight}`, style({ transform: 'translateX(100%)' })),\n    state(`${SidePanelAnimationState.ClosedLeft}`, style({ transform: 'translateX(-100%)' })),\n    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedRight}`, [\n      animate(`${sidePanelAnimationDuration}ms ease-in-out`),\n    ]),\n    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedLeft}`, [\n      animate(`${sidePanelAnimationDuration}ms ease-in-out`),\n    ]),\n  ]),\n];\n\nexport const backdropAnimation = [\n  trigger('fadeInOut', [\n    state(`${SidePanelAnimationState.Open}`, style({ opacity: 0.25 })),\n    state(`${SidePanelAnimationState.Closed}`, style({ opacity: 0 })),\n    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.Closed}`, [\n      animate(`${sidePanelAnimationDuration}ms ease-in-out`),\n    ]),\n  ]),\n];\n","import { InjectionToken } from '@angular/core';\n\nexport const SIDE_PANEL_DATA = new InjectionToken<unknown>('SIDE_PANEL_DATA');\n","import {\n  ApplicationRef,\n  ComponentRef,\n  createComponent,\n  EmbeddedViewRef,\n  EnvironmentInjector,\n  inject,\n  Injectable,\n  Injector,\n  TemplateRef,\n  Type,\n} from '@angular/core';\nimport { SIDE_PANEL_DATA } from './side-panel-data-injection-token';\nimport { SidePanelComponent } from './side-panel.component';\nimport { SIDE_PANEL_CONFIG, SidePanelConfig, SidePanelPosition, SidePanelRef } from './side-panel.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidePanelService {\n  private SidePanelComponentRef?: ComponentRef<SidePanelComponent>;\n  private contentComponentRef?: ComponentRef<any>;\n  private embeddedViewRef?: EmbeddedViewRef<any>;\n  private currentSidePanelRef?: SidePanelRef<any>;\n  private defaultSidePanelConfig: SidePanelConfig = inject(SIDE_PANEL_CONFIG);\n  private injector = inject(EnvironmentInjector);\n  private appRef = inject(ApplicationRef);\n\n  constructor() {}\n\n  open<T = any, R = any>(\n    content: Type<R> | TemplateRef<any>,\n    config: Partial<SidePanelConfig>,\n    parentInjector?: Injector\n  ): SidePanelRef<T, R> {\n    const panelConfig: SidePanelConfig = { ...this.defaultSidePanelConfig, ...config };\n\n    const sidePanelRef = new SidePanelRef<T, R>();\n    this.currentSidePanelRef = sidePanelRef;\n\n    sidePanelRef.close = (result?: T) => {\n      this.close(result);\n    };\n\n    if (!this.SidePanelComponentRef) {\n      const injector = this.createSidePanelInjector(panelConfig, parentInjector);\n      const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);\n      this.SidePanelComponentRef = SidePanelComponentRef;\n    }\n\n    if (content instanceof TemplateRef) {\n      this.loadTemplate(content);\n    } else {\n      this.loadComponent(content, sidePanelRef);\n    }\n\n    this.SidePanelComponentRef.instance.open();\n\n    return sidePanelRef;\n  }\n\n  close<T = any>(result?: T): void {\n    if (this.SidePanelComponentRef) {\n      this.SidePanelComponentRef.instance.close(result);\n    }\n  }\n\n  destroyComponent<T = any>(result?: T): void {\n    if (this.currentSidePanelRef) {\n      this.currentSidePanelRef._emitClose(result);\n      this.currentSidePanelRef = undefined;\n    }\n\n    if (this.SidePanelComponentRef) {\n      this.appRef.detachView(this.SidePanelComponentRef.hostView);\n      this.SidePanelComponentRef.destroy();\n      this.SidePanelComponentRef = undefined;\n    }\n\n    if (this.contentComponentRef) {\n      this.contentComponentRef.destroy();\n      this.contentComponentRef = undefined;\n    }\n  }\n\n  private createSidePanelInjector(config: SidePanelConfig, parentInjector?: Injector): Injector {\n    return Injector.create({\n      parent: parentInjector,\n      providers: [\n        { provide: SidePanelConfig, useValue: config },\n        { provide: SIDE_PANEL_DATA, useValue: config.data },\n      ],\n    });\n  }\n\n  private createSidePanelComponent(position: SidePanelPosition, injector: Injector): ComponentRef<SidePanelComponent> {\n    const sidePanelComponentRef = createComponent(SidePanelComponent, {\n      environmentInjector: this.injector,\n      elementInjector: injector,\n    });\n\n    this.appRef.attachView(sidePanelComponentRef.hostView);\n\n    const sidePanelEl = (sidePanelComponentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;\n    sidePanelEl.querySelector('.side-panel')?.classList.add(position);\n\n    document.body.appendChild(sidePanelEl);\n\n    return sidePanelComponentRef;\n  }\n\n  private loadComponent<R = any>(component: Type<R>, sidePanelRef: SidePanelRef<any, R>): void {\n    const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;\n    if (viewContainerRef) {\n      viewContainerRef().clear();\n      this.contentComponentRef = viewContainerRef().createComponent(component);\n      // Set the component instance on the SidePanelRef\n      sidePanelRef.componentInstance = this.contentComponentRef.instance as R;\n    }\n  }\n\n  private loadTemplate(template: TemplateRef<any>): void {\n    const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;\n    if (viewContainerRef) {\n      viewContainerRef().clear();\n      this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);\n    }\n  }\n}\n","import { AsyncPipe, NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  signal,\n  viewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LanguageService } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\nimport { backdropAnimation, sidePanelAnimation, sidePanelAnimationDuration } from './side-panel.animations';\nimport { SidePanelAnimationState, SidePanelConfig, SidePanelPosition, SidePanelSize } from './side-panel.model';\nimport { SidePanelService } from './side-panel.service';\n\n@Component({\n    selector: 'ui-side-panel',\n    templateUrl: './side-panel.component.html',\n    styleUrls: ['./side-panel.component.scss'],\n    animations: [sidePanelAnimation, backdropAnimation],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass]\n})\nexport class SidePanelComponent {\n  sidePanelPosition = signal<SidePanelPosition>('right');\n\n  sidePanelContainer = viewChild.required('sidePanelContainer', { read: ViewContainerRef });\n  sidePanel = viewChild.required<ElementRef<HTMLDivElement>>('sidePanel');\n  backdrop = viewChild.required<ElementRef<HTMLDivElement>>('sidePanelBackdrop');\n  language = LanguageService.defaultLanguage;\n  isOpen = signal<boolean>(false);\n  size = signal<SidePanelSize | undefined>(undefined);\n  isSmall = computed(() => this.size() === 'small');\n  isLarge = computed(() => this.size() === 'large');\n\n  animation = computed(() => {\n    if (this.isOpen()) {\n      return SidePanelAnimationState.Open;\n    }\n\n    return this.sidePanelPosition() === 'left'\n      ? SidePanelAnimationState.ClosedLeft\n      : SidePanelAnimationState.ClosedRight;\n  });\n\n  private sidePanelService = inject(SidePanelService);\n  public sidePanelConfig = inject(SidePanelConfig);\n\n  constructor() {\n    const { position, size } = this.sidePanelConfig;\n    this.sidePanelPosition.set(position);\n    this.size.set(size);\n  }\n\n  open(): void {\n    setTimeout(() => {\n      this.isOpen.set(true);\n    });\n  }\n\n  close(result?: any): void {\n    this.isOpen.set(false);\n    setTimeout(() => {\n      this.sidePanelService.destroyComponent(result);\n    }, sidePanelAnimationDuration);\n  }\n}\n","<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action side-panel-action-close\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs

@@ -0,0 +1,180 @@
+import * as i0 from '@angular/core';
+import { ViewContainerRef, Injectable, EventEmitter, HostListener, ViewChild, Output, Input, Optional, Inject, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject } from 'rxjs';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@testgorilla/tgo-ui/components/button';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i6 from '@testgorilla/tgo-ui/components/logo';
+import { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';
+import * as i7 from '@testgorilla/tgo-ui/components/core';
+import { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+
+class SideSheetService {
+    constructor(applicationRef) {
+        this.applicationRef = applicationRef;
+        this.componentRef$ = new Subject();
+    }
+    open(config) {
+        const { componentRef, ...configFields } = config;
+        const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);
+        const componentReference = rootViewContainerRef.createComponent(config.componentRef);
+        this.componentRef$.next({ ...configFields, componentRef: componentReference });
+        return componentReference.instance;
+    }
+    close() {
+        this.componentRef$.next(null);
+    }
+    getComponentRef() {
+        return this.componentRef$.asObservable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }] });
+
+class SideSheetComponent {
+    onEscPress(_) {
+        void this.drawer.close();
+    }
+    constructor(defaultAppTheme, sideSheetService, destroyRef) {
+        this.defaultAppTheme = defaultAppTheme;
+        this.sideSheetService = sideSheetService;
+        this.destroyRef = destroyRef;
+        /**
+         * Set position. Defaults "end"
+         *
+         * @type {SideSheetPosition}
+         * @memberof SideSheetComponent
+         */
+        this.position = 'end';
+        /**
+         *
+         * Defines the application theme
+         *
+         * @type {ApplicationTheme}
+         * @memberof SideSheetComponent
+         */
+        this.applicationTheme = 'light';
+        this.openChange = new EventEmitter();
+        this.title = '';
+        this.showBackButton = false;
+        this.showTitleTooltip = false;
+        this.showLogo = false;
+        this.componentRef$ = this.sideSheetService.getComponentRef();
+        if (defaultAppTheme) {
+            this.applicationTheme = defaultAppTheme;
+        }
+    }
+    ngOnInit() {
+        this.setComponentRef();
+    }
+    setComponentRef() {
+        this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {
+            if (config && config.componentRef && this.container && this.drawer) {
+                this.setConfig(config);
+                this.drawer.toggle();
+                this.container.clear();
+                this.container.insert(config.componentRef.hostView);
+            }
+            else if (!config) {
+                this.drawer.toggle();
+                this.container.clear();
+            }
+        });
+    }
+    setConfig(config) {
+        this.title = config.title ?? '';
+        this.showLogo = config.showLogo ?? false;
+        this.showBackButton = config.showBackButton ?? false;
+        this.showTitleTooltip = config.showTitleTooltip ?? false;
+        if (config.closed) {
+            config.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                void this.drawer.close();
+            });
+        }
+    }
+    onClose() {
+        this.drawer.toggle();
+    }
+    onOpenChange(isOpened) {
+        this.openChange.emit(isOpened);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SideSheetComponent, isStandalone: false, selector: "ui-side-sheet", inputs: { position: "position", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, host: { listeners: { "keydown.esc": "onEscPress($event)" } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i6.LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.UiTranslatePipe, name: "uiTranslate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-side-sheet', standalone: false, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }, { type: SideSheetService }, { type: i0.DestroyRef }], propDecorators: { position: [{
+                type: Input
+            }], applicationTheme: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], drawer: [{
+                type: ViewChild,
+                args: ['drawer']
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: false }]
+            }], onEscPress: [{
+                type: HostListener,
+                args: ['keydown.esc', ['$event']]
+            }] } });
+
+class SideSheetComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponentModule, declarations: [SideSheetComponent], imports: [CommonModule,
+            IconComponentModule,
+            ButtonComponentModule,
+            MatTooltipModule,
+            MatSidenavModule,
+            UiTranslatePipe,
+            LogoComponentModule], exports: [SideSheetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponentModule, imports: [CommonModule,
+            IconComponentModule,
+            ButtonComponentModule,
+            MatTooltipModule,
+            MatSidenavModule,
+            LogoComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SideSheetComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SideSheetComponent],
+                    exports: [SideSheetComponent],
+                    imports: [
+                        CommonModule,
+                        IconComponentModule,
+                        ButtonComponentModule,
+                        MatTooltipModule,
+                        MatSidenavModule,
+                        UiTranslatePipe,
+                        LogoComponentModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SideSheetComponent, SideSheetComponentModule, SideSheetService };
+//# sourceMappingURL=testgorilla-tgo-ui-components-side-sheet.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-side-sheet.mjs","sources":["../../../components/side-sheet/side-sheet.service.ts","../../../components/side-sheet/side-sheet.component.ts","../../../components/side-sheet/side-sheet.component.html","../../../components/side-sheet/side-sheet.component.module.ts","../../../components/side-sheet/testgorilla-tgo-ui-components-side-sheet.ts"],"sourcesContent":["import { ApplicationRef, Injectable, ViewContainerRef } from '@angular/core';\nimport { SideSheetConfig } from './side-sheet.model';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SideSheetService {\n  private componentRef$ = new Subject<SideSheetConfig | null>();\n\n  constructor(private applicationRef: ApplicationRef) {}\n\n  open<T>(config: SideSheetConfig): T {\n    const { componentRef, ...configFields } = config;\n    const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);\n    const componentReference = rootViewContainerRef.createComponent(config.componentRef);\n    this.componentRef$.next({ ...configFields, componentRef: componentReference });\n    return componentReference.instance as T;\n  }\n\n  close(): void {\n    this.componentRef$.next(null);\n  }\n\n  getComponentRef(): Observable<SideSheetConfig | null> {\n    return this.componentRef$.asObservable();\n  }\n}\n","import {\n  Component,\n  DestroyRef,\n  EventEmitter, HostListener,\n  Inject,\n  Input,\n  OnInit,\n  Optional,\n  Output,\n  ViewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { SideSheetService } from './side-sheet.service';\nimport { SideSheetConfig, SideSheetPosition } from './side-sheet.model';\nimport { MatDrawer } from '@angular/material/sidenav';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n    selector: 'ui-side-sheet',\n    templateUrl: './side-sheet.component.html',\n    styleUrls: ['./side-sheet.component.scss'],\n    standalone: false\n})\nexport class SideSheetComponent implements OnInit {\n  /**\n   * Set position. Defaults \"end\"\n   *\n   * @type {SideSheetPosition}\n   * @memberof SideSheetComponent\n   */\n  @Input() position: SideSheetPosition = 'end';\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SideSheetComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  @ViewChild('drawer') drawer: MatDrawer;\n  @ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;\n\n  @HostListener('keydown.esc', ['$event'])\n  onEscPress(_: KeyboardEvent): void {\n    void this.drawer.close();\n  }\n\n  protected title = '';\n  protected showBackButton = false;\n  protected showTitleTooltip = false;\n  protected showLogo = false;\n  protected componentRef$ = this.sideSheetService.getComponentRef();\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private sideSheetService: SideSheetService,\n    private destroyRef: DestroyRef,\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  ngOnInit(): void {\n    this.setComponentRef();\n  }\n\n  private setComponentRef(): void {\n    this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {\n      if (config && config.componentRef && this.container && this.drawer) {\n        this.setConfig(config);\n        this.drawer.toggle();\n        this.container.clear();\n        this.container.insert(config.componentRef.hostView);\n      } else if (!config) {\n        this.drawer.toggle();\n        this.container.clear();\n      }\n    });\n  }\n\n  private setConfig(config: SideSheetConfig): void {\n    this.title = config.title ?? '';\n    this.showLogo = config.showLogo ?? false;\n    this.showBackButton = config.showBackButton ?? false;\n    this.showTitleTooltip = config.showTitleTooltip ?? false;\n\n    if (config.closed) {\n      config.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n        void this.drawer.close();\n      });\n    }\n  }\n\n  protected onClose(): void {\n    this.drawer.toggle();\n  }\n\n  onOpenChange(isOpened: boolean): void {\n    this.openChange.emit(isOpened);\n  }\n}\n","<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SideSheetComponent } from './side-sheet.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\n\n@NgModule({\n  declarations: [SideSheetComponent],\n  exports: [SideSheetComponent],\n    imports: [\n        CommonModule,\n        IconComponentModule,\n        ButtonComponentModule,\n        MatTooltipModule,\n        MatSidenavModule,\n        UiTranslatePipe,\n        LogoComponentModule,\n    ],\n})\nexport class SideSheetComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SideSheetService"],"mappings":"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"}