npm - @testgorilla/tgo-ui - Versions diffs - 11.5.0 → 11.7.0 - Mend

@testgorilla/tgo-ui 11.5.0 → 11.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { NgClass, CommonModule } from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, booleanAttribute, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
@@ -71,18 +71,58 @@ class AccordionComponent {
         this.noBackgroundColor = false;
         /**
          *
-         * Defines the toggle icon position
+         * Defines the toggle icon position. `right` keeps the icon at the trailing edge of the
+         * header, `left` moves it in front of the label. The `table` variant is the exception:
+         * its chevron is part of the row layout and always sits in front of the label.
          *
          * @type {boolean}
          * @memberof AccordionComponent
          */
         this.toggleIconPosition = 'right';
+        /**
+         *
+         * Renders the label in bold. Don`t work on Classic theme
+         *
+         * @type {boolean}
+         * @default false
+         * @memberof AccordionComponent
+         */
+        this.boldLabel = false;
         this.closed = new EventEmitter();
         this.opened = new EventEmitter();
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
         }
     }
+    get isTableVariant() {
+        return this.variant === 'table' && this.applicationTheme !== 'classic';
+    }
+    /** Whether the component renders the toggle icon itself instead of Material's indicator. */
+    get hasToggleIcon() {
+        return Boolean(this.toggleIcon) || this.isTableVariant;
+    }
+    /**
+     * The `table` variant renders its chevron as part of the row layout, so it stays in front
+     * of the label whatever `toggleIconPosition` says — unless a custom icon replaces it.
+     */
+    get isToggleIconLeading() {
+        return this.isTableVariant && !this.toggleIcon ? true : this.toggleIconPosition === 'left';
+    }
+    get hasLeadingToggleIcon() {
+        return this.hasToggleIcon && this.isToggleIconLeading;
+    }
+    get hasTrailingToggleIcon() {
+        return this.hasToggleIcon && !this.isToggleIconLeading;
+    }
+    get resolvedToggleIcon() {
+        if (!this.toggleIcon) {
+            return 'Arrow-chevron-down-filled';
+        }
+        return this.open && this.toggleIconExpanded ? this.toggleIconExpanded : this.toggleIcon;
+    }
+    get rotatesToggleIcon() {
+        return !this.toggleIconExpanded;
+    }
     toggle(open) {
         this.open = open;
         if (this.open) {
@@ -93,20 +133,21 @@ class AccordionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AccordionComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText", applicationTheme: "applicationTheme", labelIcon: "labelIcon", variant: "variant", allowCustomHeader: "allowCustomHeader", noBackgroundColor: "noBackgroundColor", toggleIconPosition: "toggleIconPosition" }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion\n  class=\"accordion-wrapper\"\n  [class.disabled]=\"disabled\"\n  [ngClass]=\"variant\"\n  [attr.theme]=\"applicationTheme\"\n>\n  <mat-expansion-panel\n    [expanded]=\"open\"\n    [class.bgcolor-none]=\"noBackgroundColor\"\n    (opened)=\"toggle(true)\"\n    (closed)=\"toggle(false)\"\n  >\n    <mat-expansion-panel-header\n      [tabIndex]=\"disabled ? -1 : 0\"\n      [class.custom-height]=\"allowCustomHeader\"\n      [class.left-toggle]=\"toggleIconPosition === 'left'\"\n      [attr.aria-label]=\"label\"\n    >\n      <!-- mat-panel-title must stay a STATIC child: Material's header slots\n           (ng-content select=\"mat-panel-title\") match *ngIf-desugared templates\n           but NOT @if blocks, so the conditionals live inside the element. -->\n      <mat-panel-title>\n        @if (!allowCustomHeader) {\n          @if (variant === 'table' && applicationTheme !== 'classic') {\n            <div class=\"table-container\">\n              <ui-icon [size]=\"'24'\" [ngClass]=\"{ open }\" [name]=\"'Arrow-chevron-down-filled'\"></ui-icon>\n              <div class=\"accordion-label\">\n                {{ label }}\n              </div>\n            </div>\n          } @else {\n            <div class=\"accordion-label\">\n              {{ label }}\n              <ng-content select=\"[subHeader]\"></ng-content>\n              @if (showPremiumIcon || labelIcon) {\n                <ui-icon\n                  [matTooltipClass]=\"applicationTheme\"\n                  [matTooltip]=\"premiumTooltipText\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n                ></ui-icon>\n              }\n            </div>\n          }\n        } @else {\n          <ng-content select=\"[customHeader]\"></ng-content>\n        }\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\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}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-panel-content{overflow:hidden}:host ::ng-deep .mat-expansion-panel.bgcolor-none .mat-expansion-panel-body{background:none}:host ::ng-deep .mat-expansion-indicator{height:24px;width:24px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header.cdk-keyboard-focused{position:relative}.mat-expansion-panel-header.cdk-keyboard-focused:after{content:\"\";width:100%;height:100%;outline:3px solid #242424;position:absolute;left:0;top:0;animation:focus-ring-animation-main .4s forwards;border-radius:10px}.mat-expansion-panel-header.custom-height{height:auto!important;align-items:flex-start}.mat-expansion-panel-header.custom-height mat-panel-title{display:contents}.mat-expansion-panel-header.left-toggle{flex-direction:row-reverse;gap:8px}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.accordion-wrapper[theme=dark],.accordion-wrapper[theme=light]{position:relative;border-radius:10px}.accordion-wrapper[theme=dark] .mat-expansion-panel-header,.accordion-wrapper[theme=light] .mat-expansion-panel-header{border:unset!important}.accordion-wrapper[theme=dark] .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light] .mat-expansion-panel-header:hover{background:transparent!important}.accordion-wrapper[theme=dark].standard .mat-expansion-panel:hover,.accordion-wrapper[theme=light].standard .mat-expansion-panel:hover{box-shadow:0 4px 16px #24242414}.accordion-wrapper[theme=dark].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{margin:0 16px 12px}.accordion-wrapper[theme=dark] .mat-expansion-panel,.accordion-wrapper[theme=light] .mat-expansion-panel{background:#fff;border-radius:10px;border:1px solid #919191;overflow:visible}.accordion-wrapper[theme=dark] .mat-expansion-panel:hover,.accordion-wrapper[theme=light] .mat-expansion-panel:hover{outline:1px solid #242424;border-color:#242424}.accordion-wrapper[theme=dark] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body{background-color:#f4f4f4}.accordion-wrapper[theme=dark] .mat-expansion-panel *,.accordion-wrapper[theme=light] .mat-expansion-panel *{color:#242424;font-weight:400}.accordion-wrapper[theme=dark] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after,.accordion-wrapper[theme=light] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after{color:#242424!important}.accordion-wrapper[theme=dark]:hover .accordion-label,.accordion-wrapper[theme=light]:hover .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark]:focus,.accordion-wrapper[theme=light]:focus{outline:unset!important;border-color:unset!important}.accordion-wrapper[theme=dark]:focus:after,.accordion-wrapper[theme=light]:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;display:flex;width:calc(100% + 6px);height:calc(100% + 6px);border:1px dashed #919191;border-radius:10px}.accordion-wrapper[theme=dark]:focus .accordion-label,.accordion-wrapper[theme=light]:focus .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark].filter .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter .mat-expansion-panel-header{padding-left:2px;border:1px dashed transparent!important;border-radius:10px;box-shadow:none!important}.accordion-wrapper[theme=dark].filter:focus:after,.accordion-wrapper[theme=light].filter:focus:after{display:none}.accordion-wrapper[theme=dark].filter:focus .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter:focus .mat-expansion-panel-header{border:1px dashed #919191!important}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-header-description,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-header-description{margin-left:0}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].filter .mat-expansion-panel,.accordion-wrapper[theme=light].filter .mat-expansion-panel{border:unset}.accordion-wrapper[theme=dark].filter .mat-expansion-panel:hover,.accordion-wrapper[theme=light].filter .mat-expansion-panel:hover{border:unset;outline:unset}.accordion-wrapper[theme=dark].table .mat-expansion-panel,.accordion-wrapper[theme=light].table .mat-expansion-panel{border-radius:0;border:unset;outline:unset}.accordion-wrapper[theme=dark].table:after,.accordion-wrapper[theme=light].table:after{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{border-radius:0;box-shadow:none!important;height:64px!important}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light].table .mat-expansion-panel-header:hover{background:#fff2fc!important}.accordion-wrapper[theme=dark].table .accordion-label,.accordion-wrapper[theme=light].table .accordion-label{font-weight:400!important;text-decoration:unset}.accordion-wrapper[theme=dark].table .table-container,.accordion-wrapper[theme=light].table .table-container{display:flex;flex-direction:row}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-indicator,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-indicator{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{padding:12px 24px}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].table ui-icon,.accordion-wrapper[theme=light].table ui-icon{border:1px dashed transparent}.accordion-wrapper[theme=dark].table ui-icon ::ng-deep mat-icon,.accordion-wrapper[theme=light].table ui-icon ::ng-deep mat-icon{transition:transform .3s}.accordion-wrapper[theme=dark].table ui-icon,.accordion-wrapper[theme=light].table ui-icon{margin-right:16px}.accordion-wrapper[theme=dark].table ui-icon.open ::ng-deep mat-icon,.accordion-wrapper[theme=light].table ui-icon.open ::ng-deep mat-icon{transform:rotate(180deg)}.accordion-wrapper[theme=dark].table:focus ui-icon,.accordion-wrapper[theme=light].table:focus ui-icon{border-radius:100%;border:1px dashed #919191}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText", applicationTheme: "applicationTheme", labelIcon: "labelIcon", variant: "variant", allowCustomHeader: "allowCustomHeader", noBackgroundColor: "noBackgroundColor", toggleIconPosition: "toggleIconPosition", toggleIcon: "toggleIcon", toggleIconExpanded: "toggleIconExpanded", boldLabel: ["boldLabel", "boldLabel", booleanAttribute] }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion\n  class=\"accordion-wrapper\"\n  [class.disabled]=\"disabled\"\n  [ngClass]=\"variant\"\n  [class.has-toggle-icon]=\"hasToggleIcon\"\n  [attr.theme]=\"applicationTheme\"\n>\n  <mat-expansion-panel\n    [expanded]=\"open\"\n    [class.bgcolor-none]=\"noBackgroundColor\"\n    (opened)=\"toggle(true)\"\n    (closed)=\"toggle(false)\"\n  >\n    <mat-expansion-panel-header\n      [tabIndex]=\"disabled ? -1 : 0\"\n      [class.custom-height]=\"allowCustomHeader\"\n      [class.left-toggle]=\"toggleIconPosition === 'left' && !hasToggleIcon\"\n      [attr.aria-label]=\"label\"\n    >\n      <!-- mat-panel-title must stay a STATIC child: Material's header slots\n           (ng-content select=\"mat-panel-title\") match *ngIf-desugared templates\n           but NOT @if blocks, so the conditionals live inside the element. -->\n      <mat-panel-title>\n        @if (!allowCustomHeader) {\n          <div\n            class=\"title-container\"\n            [class.table-container]=\"isTableVariant\"\n            [class.with-toggle-icon]=\"hasLeadingToggleIcon\"\n          >\n            @if (hasLeadingToggleIcon) {\n              <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n            }\n            <div class=\"accordion-label\" [class.bold]=\"boldLabel\">\n              {{ label }}\n              <ng-content select=\"[subHeader]\"></ng-content>\n              @if (showPremiumIcon || labelIcon) {\n                <ui-icon\n                  [matTooltipClass]=\"applicationTheme\"\n                  [matTooltip]=\"premiumTooltipText\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n                ></ui-icon>\n              }\n            </div>\n          </div>\n        } @else {\n          <ng-content select=\"[customHeader]\"></ng-content>\n        }\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n      @if (hasTrailingToggleIcon) {\n        <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n      }\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<ng-template #toggleIconTemplate>\n  <ui-icon\n    class=\"toggle-icon\"\n    [size]=\"'24'\"\n    [ngClass]=\"{ open, rotates: rotatesToggleIcon }\"\n    [name]=\"resolvedToggleIcon\"\n  ></ui-icon>\n</ng-template>\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}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-panel-content{overflow:hidden}:host ::ng-deep .mat-expansion-panel.bgcolor-none .mat-expansion-panel-body{background:none}:host ::ng-deep .mat-expansion-indicator{height:24px;width:24px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-title{flex:1 1 auto}.mat-expansion-panel-header-description{flex:0 1 auto;justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header.cdk-keyboard-focused{position:relative}.mat-expansion-panel-header.cdk-keyboard-focused:after{content:\"\";width:100%;height:100%;outline:3px solid #242424;position:absolute;left:0;top:0;animation:focus-ring-animation-main .4s forwards;border-radius:10px}.mat-expansion-panel-header.custom-height{height:auto!important;align-items:flex-start}.mat-expansion-panel-header.custom-height mat-panel-title{display:contents}.mat-expansion-panel-header.left-toggle{flex-direction:row-reverse;gap:8px}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.accordion-wrapper[theme=dark],.accordion-wrapper[theme=light]{position:relative;border-radius:10px}.accordion-wrapper[theme=dark] .mat-expansion-panel-header,.accordion-wrapper[theme=light] .mat-expansion-panel-header{border:unset!important}.accordion-wrapper[theme=dark] .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light] .mat-expansion-panel-header:hover{background:transparent!important}.accordion-wrapper[theme=dark].standard .mat-expansion-panel:hover,.accordion-wrapper[theme=light].standard .mat-expansion-panel:hover{box-shadow:0 4px 16px #24242414}.accordion-wrapper[theme=dark].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{margin:0 16px 12px}.accordion-wrapper[theme=dark] .mat-expansion-panel,.accordion-wrapper[theme=light] .mat-expansion-panel{background:#fff;border-radius:10px;border:1px solid #919191;overflow:visible}.accordion-wrapper[theme=dark] .mat-expansion-panel:hover,.accordion-wrapper[theme=light] .mat-expansion-panel:hover{outline:1px solid #242424;border-color:#242424}.accordion-wrapper[theme=dark] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body{background-color:#f4f4f4}.accordion-wrapper[theme=dark] .mat-expansion-panel *,.accordion-wrapper[theme=light] .mat-expansion-panel *{color:#242424;font-weight:400}.accordion-wrapper[theme=dark] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after,.accordion-wrapper[theme=light] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after{color:#242424!important}.accordion-wrapper[theme=dark]:hover .accordion-label,.accordion-wrapper[theme=light]:hover .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark]:focus,.accordion-wrapper[theme=light]:focus{outline:unset!important;border-color:unset!important}.accordion-wrapper[theme=dark]:focus:after,.accordion-wrapper[theme=light]:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;display:flex;width:calc(100% + 6px);height:calc(100% + 6px);border:1px dashed #919191;border-radius:10px}.accordion-wrapper[theme=dark]:focus .accordion-label,.accordion-wrapper[theme=light]:focus .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark].filter .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter .mat-expansion-panel-header{padding-left:2px;border:1px dashed transparent!important;border-radius:10px;box-shadow:none!important}.accordion-wrapper[theme=dark].filter:focus:after,.accordion-wrapper[theme=light].filter:focus:after{display:none}.accordion-wrapper[theme=dark].filter:focus .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter:focus .mat-expansion-panel-header{border:1px dashed #919191!important}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-header-description,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-header-description{margin-left:0}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].filter .mat-expansion-panel,.accordion-wrapper[theme=light].filter .mat-expansion-panel{border:unset}.accordion-wrapper[theme=dark].filter .mat-expansion-panel:hover,.accordion-wrapper[theme=light].filter .mat-expansion-panel:hover{border:unset;outline:unset}.accordion-wrapper[theme=dark].table .mat-expansion-panel,.accordion-wrapper[theme=light].table .mat-expansion-panel{border-radius:0;border:unset;outline:unset}.accordion-wrapper[theme=dark].table:after,.accordion-wrapper[theme=light].table:after{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{border-radius:0;box-shadow:none!important;height:64px!important}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light].table .mat-expansion-panel-header:hover{background:#fff2fc!important}.accordion-wrapper[theme=dark].table .accordion-label,.accordion-wrapper[theme=light].table .accordion-label{font-weight:400!important;text-decoration:unset}.accordion-wrapper[theme=dark].table .table-container,.accordion-wrapper[theme=light].table .table-container{display:flex;flex-direction:row}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{padding:12px 24px}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].table .toggle-icon,.accordion-wrapper[theme=light].table .toggle-icon{border:1px dashed transparent}.accordion-wrapper[theme=dark].table:focus .toggle-icon,.accordion-wrapper[theme=light].table:focus .toggle-icon{border-radius:100%;border:1px dashed #919191}.accordion-wrapper.has-toggle-icon ::ng-deep .mat-expansion-indicator{display:none}.title-container:not(.with-toggle-icon){display:contents}.title-container.with-toggle-icon{display:flex;flex-direction:row;gap:16px}.title-container.with-toggle-icon:not(.table-container){align-items:center}.toggle-icon{align-self:center}.toggle-icon ::ng-deep mat-icon{transition:transform .3s}.toggle-icon.rotates.open ::ng-deep mat-icon{transform:rotate(180deg)}.accordion-label.bold{font-weight:700}.accordion-wrapper[theme=dark] .accordion-label.bold,.accordion-wrapper[theme=dark].standard .accordion-label.bold,.accordion-wrapper[theme=dark].filter .accordion-label.bold,.accordion-wrapper[theme=dark].table .accordion-label.bold,.accordion-wrapper[theme=light] .accordion-label.bold,.accordion-wrapper[theme=light].standard .accordion-label.bold,.accordion-wrapper[theme=light].filter .accordion-label.bold,.accordion-wrapper[theme=light].table .accordion-label.bold{font-weight:700!important}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatAccordion,
                         NgClass,
+                        NgTemplateOutlet,
                         MatExpansionPanel,
                         MatExpansionPanelHeader,
                         MatExpansionPanelTitle,
                         IconComponent,
                         MatTooltip,
                         MatExpansionPanelDescription,
-                    ], template: "<mat-accordion\n  class=\"accordion-wrapper\"\n  [class.disabled]=\"disabled\"\n  [ngClass]=\"variant\"\n  [attr.theme]=\"applicationTheme\"\n>\n  <mat-expansion-panel\n    [expanded]=\"open\"\n    [class.bgcolor-none]=\"noBackgroundColor\"\n    (opened)=\"toggle(true)\"\n    (closed)=\"toggle(false)\"\n  >\n    <mat-expansion-panel-header\n      [tabIndex]=\"disabled ? -1 : 0\"\n      [class.custom-height]=\"allowCustomHeader\"\n      [class.left-toggle]=\"toggleIconPosition === 'left'\"\n      [attr.aria-label]=\"label\"\n    >\n      <!-- mat-panel-title must stay a STATIC child: Material's header slots\n           (ng-content select=\"mat-panel-title\") match *ngIf-desugared templates\n           but NOT @if blocks, so the conditionals live inside the element. -->\n      <mat-panel-title>\n        @if (!allowCustomHeader) {\n          @if (variant === 'table' && applicationTheme !== 'classic') {\n            <div class=\"table-container\">\n              <ui-icon [size]=\"'24'\" [ngClass]=\"{ open }\" [name]=\"'Arrow-chevron-down-filled'\"></ui-icon>\n              <div class=\"accordion-label\">\n                {{ label }}\n              </div>\n            </div>\n          } @else {\n            <div class=\"accordion-label\">\n              {{ label }}\n              <ng-content select=\"[subHeader]\"></ng-content>\n              @if (showPremiumIcon || labelIcon) {\n                <ui-icon\n                  [matTooltipClass]=\"applicationTheme\"\n                  [matTooltip]=\"premiumTooltipText\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n                ></ui-icon>\n              }\n            </div>\n          }\n        } @else {\n          <ng-content select=\"[customHeader]\"></ng-content>\n        }\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\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}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-panel-content{overflow:hidden}:host ::ng-deep .mat-expansion-panel.bgcolor-none .mat-expansion-panel-body{background:none}:host ::ng-deep .mat-expansion-indicator{height:24px;width:24px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header.cdk-keyboard-focused{position:relative}.mat-expansion-panel-header.cdk-keyboard-focused:after{content:\"\";width:100%;height:100%;outline:3px solid #242424;position:absolute;left:0;top:0;animation:focus-ring-animation-main .4s forwards;border-radius:10px}.mat-expansion-panel-header.custom-height{height:auto!important;align-items:flex-start}.mat-expansion-panel-header.custom-height mat-panel-title{display:contents}.mat-expansion-panel-header.left-toggle{flex-direction:row-reverse;gap:8px}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.accordion-wrapper[theme=dark],.accordion-wrapper[theme=light]{position:relative;border-radius:10px}.accordion-wrapper[theme=dark] .mat-expansion-panel-header,.accordion-wrapper[theme=light] .mat-expansion-panel-header{border:unset!important}.accordion-wrapper[theme=dark] .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light] .mat-expansion-panel-header:hover{background:transparent!important}.accordion-wrapper[theme=dark].standard .mat-expansion-panel:hover,.accordion-wrapper[theme=light].standard .mat-expansion-panel:hover{box-shadow:0 4px 16px #24242414}.accordion-wrapper[theme=dark].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{margin:0 16px 12px}.accordion-wrapper[theme=dark] .mat-expansion-panel,.accordion-wrapper[theme=light] .mat-expansion-panel{background:#fff;border-radius:10px;border:1px solid #919191;overflow:visible}.accordion-wrapper[theme=dark] .mat-expansion-panel:hover,.accordion-wrapper[theme=light] .mat-expansion-panel:hover{outline:1px solid #242424;border-color:#242424}.accordion-wrapper[theme=dark] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body{background-color:#f4f4f4}.accordion-wrapper[theme=dark] .mat-expansion-panel *,.accordion-wrapper[theme=light] .mat-expansion-panel *{color:#242424;font-weight:400}.accordion-wrapper[theme=dark] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after,.accordion-wrapper[theme=light] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after{color:#242424!important}.accordion-wrapper[theme=dark]:hover .accordion-label,.accordion-wrapper[theme=light]:hover .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark]:focus,.accordion-wrapper[theme=light]:focus{outline:unset!important;border-color:unset!important}.accordion-wrapper[theme=dark]:focus:after,.accordion-wrapper[theme=light]:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;display:flex;width:calc(100% + 6px);height:calc(100% + 6px);border:1px dashed #919191;border-radius:10px}.accordion-wrapper[theme=dark]:focus .accordion-label,.accordion-wrapper[theme=light]:focus .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark].filter .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter .mat-expansion-panel-header{padding-left:2px;border:1px dashed transparent!important;border-radius:10px;box-shadow:none!important}.accordion-wrapper[theme=dark].filter:focus:after,.accordion-wrapper[theme=light].filter:focus:after{display:none}.accordion-wrapper[theme=dark].filter:focus .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter:focus .mat-expansion-panel-header{border:1px dashed #919191!important}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-header-description,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-header-description{margin-left:0}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].filter .mat-expansion-panel,.accordion-wrapper[theme=light].filter .mat-expansion-panel{border:unset}.accordion-wrapper[theme=dark].filter .mat-expansion-panel:hover,.accordion-wrapper[theme=light].filter .mat-expansion-panel:hover{border:unset;outline:unset}.accordion-wrapper[theme=dark].table .mat-expansion-panel,.accordion-wrapper[theme=light].table .mat-expansion-panel{border-radius:0;border:unset;outline:unset}.accordion-wrapper[theme=dark].table:after,.accordion-wrapper[theme=light].table:after{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{border-radius:0;box-shadow:none!important;height:64px!important}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light].table .mat-expansion-panel-header:hover{background:#fff2fc!important}.accordion-wrapper[theme=dark].table .accordion-label,.accordion-wrapper[theme=light].table .accordion-label{font-weight:400!important;text-decoration:unset}.accordion-wrapper[theme=dark].table .table-container,.accordion-wrapper[theme=light].table .table-container{display:flex;flex-direction:row}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-indicator,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-indicator{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{padding:12px 24px}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].table ui-icon,.accordion-wrapper[theme=light].table ui-icon{border:1px dashed transparent}.accordion-wrapper[theme=dark].table ui-icon ::ng-deep mat-icon,.accordion-wrapper[theme=light].table ui-icon ::ng-deep mat-icon{transition:transform .3s}.accordion-wrapper[theme=dark].table ui-icon,.accordion-wrapper[theme=light].table ui-icon{margin-right:16px}.accordion-wrapper[theme=dark].table ui-icon.open ::ng-deep mat-icon,.accordion-wrapper[theme=light].table ui-icon.open ::ng-deep mat-icon{transform:rotate(180deg)}.accordion-wrapper[theme=dark].table:focus ui-icon,.accordion-wrapper[theme=light].table:focus ui-icon{border-radius:100%;border:1px dashed #919191}\n"] }]
+                    ], template: "<mat-accordion\n  class=\"accordion-wrapper\"\n  [class.disabled]=\"disabled\"\n  [ngClass]=\"variant\"\n  [class.has-toggle-icon]=\"hasToggleIcon\"\n  [attr.theme]=\"applicationTheme\"\n>\n  <mat-expansion-panel\n    [expanded]=\"open\"\n    [class.bgcolor-none]=\"noBackgroundColor\"\n    (opened)=\"toggle(true)\"\n    (closed)=\"toggle(false)\"\n  >\n    <mat-expansion-panel-header\n      [tabIndex]=\"disabled ? -1 : 0\"\n      [class.custom-height]=\"allowCustomHeader\"\n      [class.left-toggle]=\"toggleIconPosition === 'left' && !hasToggleIcon\"\n      [attr.aria-label]=\"label\"\n    >\n      <!-- mat-panel-title must stay a STATIC child: Material's header slots\n           (ng-content select=\"mat-panel-title\") match *ngIf-desugared templates\n           but NOT @if blocks, so the conditionals live inside the element. -->\n      <mat-panel-title>\n        @if (!allowCustomHeader) {\n          <div\n            class=\"title-container\"\n            [class.table-container]=\"isTableVariant\"\n            [class.with-toggle-icon]=\"hasLeadingToggleIcon\"\n          >\n            @if (hasLeadingToggleIcon) {\n              <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n            }\n            <div class=\"accordion-label\" [class.bold]=\"boldLabel\">\n              {{ label }}\n              <ng-content select=\"[subHeader]\"></ng-content>\n              @if (showPremiumIcon || labelIcon) {\n                <ui-icon\n                  [matTooltipClass]=\"applicationTheme\"\n                  [matTooltip]=\"premiumTooltipText\"\n                  [applicationTheme]=\"applicationTheme\"\n                  [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n                ></ui-icon>\n              }\n            </div>\n          </div>\n        } @else {\n          <ng-content select=\"[customHeader]\"></ng-content>\n        }\n      </mat-panel-title>\n      <mat-panel-description>\n        <div class=\"accordion-actions\">\n          <ng-content select=\"[actions]\"></ng-content>\n        </div>\n      </mat-panel-description>\n      @if (hasTrailingToggleIcon) {\n        <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n      }\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<ng-template #toggleIconTemplate>\n  <ui-icon\n    class=\"toggle-icon\"\n    [size]=\"'24'\"\n    [ngClass]=\"{ open, rotates: rotatesToggleIcon }\"\n    [name]=\"resolvedToggleIcon\"\n  ></ui-icon>\n</ng-template>\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}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-panel-content{overflow:hidden}:host ::ng-deep .mat-expansion-panel.bgcolor-none .mat-expansion-panel-body{background:none}:host ::ng-deep .mat-expansion-indicator{height:24px;width:24px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-title{flex:1 1 auto}.mat-expansion-panel-header-description{flex:0 1 auto;justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header.cdk-keyboard-focused{position:relative}.mat-expansion-panel-header.cdk-keyboard-focused:after{content:\"\";width:100%;height:100%;outline:3px solid #242424;position:absolute;left:0;top:0;animation:focus-ring-animation-main .4s forwards;border-radius:10px}.mat-expansion-panel-header.custom-height{height:auto!important;align-items:flex-start}.mat-expansion-panel-header.custom-height mat-panel-title{display:contents}.mat-expansion-panel-header.left-toggle{flex-direction:row-reverse;gap:8px}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.accordion-wrapper[theme=dark],.accordion-wrapper[theme=light]{position:relative;border-radius:10px}.accordion-wrapper[theme=dark] .mat-expansion-panel-header,.accordion-wrapper[theme=light] .mat-expansion-panel-header{border:unset!important}.accordion-wrapper[theme=dark] .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light] .mat-expansion-panel-header:hover{background:transparent!important}.accordion-wrapper[theme=dark].standard .mat-expansion-panel:hover,.accordion-wrapper[theme=light].standard .mat-expansion-panel:hover{box-shadow:0 4px 16px #24242414}.accordion-wrapper[theme=dark].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].standard .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{margin:0 16px 12px}.accordion-wrapper[theme=dark] .mat-expansion-panel,.accordion-wrapper[theme=light] .mat-expansion-panel{background:#fff;border-radius:10px;border:1px solid #919191;overflow:visible}.accordion-wrapper[theme=dark] .mat-expansion-panel:hover,.accordion-wrapper[theme=light] .mat-expansion-panel:hover{outline:1px solid #242424;border-color:#242424}.accordion-wrapper[theme=dark] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light] .mat-expansion-panel:not(.bgcolor-none) ::ng-deep .mat-expansion-panel-body{background-color:#f4f4f4}.accordion-wrapper[theme=dark] .mat-expansion-panel *,.accordion-wrapper[theme=light] .mat-expansion-panel *{color:#242424;font-weight:400}.accordion-wrapper[theme=dark] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after,.accordion-wrapper[theme=light] .mat-expansion-panel ::ng-deep .mat-expansion-indicator:after{color:#242424!important}.accordion-wrapper[theme=dark]:hover .accordion-label,.accordion-wrapper[theme=light]:hover .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark]:focus,.accordion-wrapper[theme=light]:focus{outline:unset!important;border-color:unset!important}.accordion-wrapper[theme=dark]:focus:after,.accordion-wrapper[theme=light]:focus:after{content:\"\";position:absolute;top:-3px;left:-3px;display:flex;width:calc(100% + 6px);height:calc(100% + 6px);border:1px dashed #919191;border-radius:10px}.accordion-wrapper[theme=dark]:focus .accordion-label,.accordion-wrapper[theme=light]:focus .accordion-label{font-weight:700!important;text-decoration:underline}.accordion-wrapper[theme=dark].filter .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter .mat-expansion-panel-header{padding-left:2px;border:1px dashed transparent!important;border-radius:10px;box-shadow:none!important}.accordion-wrapper[theme=dark].filter:focus:after,.accordion-wrapper[theme=light].filter:focus:after{display:none}.accordion-wrapper[theme=dark].filter:focus .mat-expansion-panel-header,.accordion-wrapper[theme=light].filter:focus .mat-expansion-panel-header{border:1px dashed #919191!important}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-header-description,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-header-description{margin-left:0}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].filter ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].filter ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].filter .mat-expansion-panel,.accordion-wrapper[theme=light].filter .mat-expansion-panel{border:unset}.accordion-wrapper[theme=dark].filter .mat-expansion-panel:hover,.accordion-wrapper[theme=light].filter .mat-expansion-panel:hover{border:unset;outline:unset}.accordion-wrapper[theme=dark].table .mat-expansion-panel,.accordion-wrapper[theme=light].table .mat-expansion-panel{border-radius:0;border:unset;outline:unset}.accordion-wrapper[theme=dark].table:after,.accordion-wrapper[theme=light].table:after{display:none}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{border-radius:0;box-shadow:none!important;height:64px!important}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header:hover,.accordion-wrapper[theme=light].table .mat-expansion-panel-header:hover{background:#fff2fc!important}.accordion-wrapper[theme=dark].table .accordion-label,.accordion-wrapper[theme=light].table .accordion-label{font-weight:400!important;text-decoration:unset}.accordion-wrapper[theme=dark].table .table-container,.accordion-wrapper[theme=light].table .table-container{display:flex;flex-direction:row}.accordion-wrapper[theme=dark].table .mat-expansion-panel-header,.accordion-wrapper[theme=light].table .mat-expansion-panel-header{padding:12px 24px}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body{background-color:transparent!important;margin:0;width:100%}.accordion-wrapper[theme=dark].table ::ng-deep .mat-expansion-panel-body div,.accordion-wrapper[theme=light].table ::ng-deep .mat-expansion-panel-body div{padding:0!important}.accordion-wrapper[theme=dark].table .toggle-icon,.accordion-wrapper[theme=light].table .toggle-icon{border:1px dashed transparent}.accordion-wrapper[theme=dark].table:focus .toggle-icon,.accordion-wrapper[theme=light].table:focus .toggle-icon{border-radius:100%;border:1px dashed #919191}.accordion-wrapper.has-toggle-icon ::ng-deep .mat-expansion-indicator{display:none}.title-container:not(.with-toggle-icon){display:contents}.title-container.with-toggle-icon{display:flex;flex-direction:row;gap:16px}.title-container.with-toggle-icon:not(.table-container){align-items:center}.toggle-icon{align-self:center}.toggle-icon ::ng-deep mat-icon{transition:transform .3s}.toggle-icon.rotates.open ::ng-deep mat-icon{transform:rotate(180deg)}.accordion-label.bold{font-weight:700}.accordion-wrapper[theme=dark] .accordion-label.bold,.accordion-wrapper[theme=dark].standard .accordion-label.bold,.accordion-wrapper[theme=dark].filter .accordion-label.bold,.accordion-wrapper[theme=dark].table .accordion-label.bold,.accordion-wrapper[theme=light] .accordion-label.bold,.accordion-wrapper[theme=light].standard .accordion-label.bold,.accordion-wrapper[theme=light].filter .accordion-label.bold,.accordion-wrapper[theme=light].table .accordion-label.bold{font-weight:700!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -138,6 +179,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], toggleIconPosition: [{
                 type: Input
+            }], toggleIcon: [{
+                type: Input
+            }], toggleIconExpanded: [{
+                type: Input
+            }], boldLabel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], closed: [{
                 type: Output
             }], opened: [{

package/fesm2022/testgorilla-tgo-ui-components-accordion.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-accordion.mjs","sources":["../../../components/accordion/accordion.component.ts","../../../components/accordion/accordion.component.html","../../../components/accordion/accordion.component.module.ts","../../../components/accordion/testgorilla-tgo-ui-components-accordion.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n booleanAttribute,\n Component,\n EventEmitter,\n Inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport {\n MatAccordion,\n MatExpansionPanel,\n MatExpansionPanelHeader,\n MatExpansionPanelTitle,\n MatExpansionPanelDescription,\n} from '@angular/material/expansion';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponent } from '@testgorilla/tgo-ui/components/icon';\n\nimport { AccordionVariant, ToggleIconPosition } from './accordion.model';\n\n@Component({\n selector: 'ui-accordion',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './accordion.component.html',\n styleUrls: ['./accordion.component.scss'],\n imports: [\n MatAccordion,\n NgClass,\n MatExpansionPanel,\n MatExpansionPanelHeader,\n MatExpansionPanelTitle,\n IconComponent,\n MatTooltip,\n MatExpansionPanelDescription,\n ],\n})\nexport class AccordionComponent {\n /*\n The label displayed for the accordion.\n * @type {string}\n * @required\n * @memberof AccordionComponent\n /\n @Input({ required: true }) label: string;\n\n /\n Determines whether the accordion is initially open.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) open = false;\n\n /\n Disables the accordion if set to true.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /\n Indicates whether to show a premium icon.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) showPremiumIcon = false;\n\n /\n The tooltip text for the premium icon.\n * @type {string}\n * @default ''\n * @memberof AccordionComponent\n /\n @Input() premiumTooltipText = '';\n\n /\n \n * Defines the application theme where accordion is used\n \n @type {ApplicationTheme}\n * @memberof AccordionComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n \n * Changed premium icon on this icon\n \n @type {IconName}\n * @memberof AccordionComponent\n /\n @Input() labelIcon: IconName;\n\n /\n \n * Select accordion variant. Don`t work on Classic theme\n \n @type {AccordionVariant}\n * @memberof AccordionComponent\n /\n @Input() variant: AccordionVariant = 'standard';\n\n /\n \n * Projects content with attribute 'customHeader'\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() allowCustomHeader = false;\n\n /\n \n * Sets background color of content to none\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() noBackgroundColor = false;\n\n /\n \n * Defines the toggle icon position\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() toggleIconPosition: ToggleIconPosition = 'right';\n\n @Output() closed = new EventEmitter<void>();\n @Output() opened = new EventEmitter<void>();\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n protected toggle(open: boolean): void {\n this.open = open;\n\n if (this.open) {\n this.opened.emit();\n } else {\n this.closed.emit();\n }\n }\n}\n","<mat-accordion\n class=\"accordion-wrapper\"\n [class.disabled]=\"disabled\"\n [ngClass]=\"variant\"\n [attr.theme]=\"applicationTheme\"\n>\n <mat-expansion-panel\n [expanded]=\"open\"\n [class.bgcolor-none]=\"noBackgroundColor\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\"\n >\n <mat-expansion-panel-header\n [tabIndex]=\"disabled ? -1 : 0\"\n [class.custom-height]=\"allowCustomHeader\"\n [class.left-toggle]=\"toggleIconPosition === 'left'\"\n [attr.aria-label]=\"label\"\n >\n <!-- mat-panel-title must stay a STATIC child: Material's header slots\n (ng-content select=\"mat-panel-title\") match ngIf-desugared templates\n but NOT @if blocks, so the conditionals live inside the element. -->\n <mat-panel-title>\n @if (!allowCustomHeader) {\n @if (variant === 'table' && applicationTheme !== 'classic') {\n <div class=\"table-container\">\n <ui-icon [size]=\"'24'\" [ngClass]=\"{ open }\" [name]=\"'Arrow-chevron-down-filled'\"></ui-icon>\n <div class=\"accordion-label\">\n {{ label }}\n </div>\n </div>\n } @else {\n <div class=\"accordion-label\">\n {{ label }}\n <ng-content select=\"[subHeader]\"></ng-content>\n @if (showPremiumIcon \|\| labelIcon) {\n <ui-icon\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"premiumTooltipText\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n ></ui-icon>\n }\n </div>\n }\n } @else {\n <ng-content select=\"[customHeader]\"></ng-content>\n }\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { AccordionComponent } from './accordion.component';\n\n@NgModule({\n exports: [AccordionComponent],\n imports: [\n CommonModule,\n IconComponentModule,\n ButtonComponentModule,\n MatTooltipModule,\n MatExpansionModule,\n AccordionComponent,\n ],\n})\nexport class AccordionComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-accordion.mjs","sources":["../../../components/accordion/accordion.component.ts","../../../components/accordion/accordion.component.html","../../../components/accordion/accordion.component.module.ts","../../../components/accordion/testgorilla-tgo-ui-components-accordion.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n booleanAttribute,\n Component,\n EventEmitter,\n Inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport {\n MatAccordion,\n MatExpansionPanel,\n MatExpansionPanelHeader,\n MatExpansionPanelTitle,\n MatExpansionPanelDescription,\n} from '@angular/material/expansion';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName, IconComponent } from '@testgorilla/tgo-ui/components/icon';\n\nimport { AccordionVariant, ToggleIconPosition } from './accordion.model';\n\n@Component({\n selector: 'ui-accordion',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './accordion.component.html',\n styleUrls: ['./accordion.component.scss'],\n imports: [\n MatAccordion,\n NgClass,\n NgTemplateOutlet,\n MatExpansionPanel,\n MatExpansionPanelHeader,\n MatExpansionPanelTitle,\n IconComponent,\n MatTooltip,\n MatExpansionPanelDescription,\n ],\n})\nexport class AccordionComponent {\n /*\n The label displayed for the accordion.\n * @type {string}\n * @required\n * @memberof AccordionComponent\n /\n @Input({ required: true }) label: string;\n\n /\n Determines whether the accordion is initially open.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) open = false;\n\n /\n Disables the accordion if set to true.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) disabled = false;\n\n /\n Indicates whether to show a premium icon.\n * @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) showPremiumIcon = false;\n\n /\n The tooltip text for the premium icon.\n * @type {string}\n * @default ''\n * @memberof AccordionComponent\n /\n @Input() premiumTooltipText = '';\n\n /\n \n * Defines the application theme where accordion is used\n \n @type {ApplicationTheme}\n * @memberof AccordionComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n \n * Changed premium icon on this icon\n \n @type {IconName}\n * @memberof AccordionComponent\n /\n @Input() labelIcon: IconName;\n\n /\n \n * Select accordion variant. Don`t work on Classic theme\n \n @type {AccordionVariant}\n * @memberof AccordionComponent\n /\n @Input() variant: AccordionVariant = 'standard';\n\n /\n \n * Projects content with attribute 'customHeader'\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() allowCustomHeader = false;\n\n /\n \n * Sets background color of content to none\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() noBackgroundColor = false;\n\n /\n \n * Defines the toggle icon position. `right` keeps the icon at the trailing edge of the\n * header, `left` moves it in front of the label. The `table` variant is the exception:\n * its chevron is part of the row layout and always sits in front of the label.\n \n @type {boolean}\n * @memberof AccordionComponent\n /\n @Input() toggleIconPosition: ToggleIconPosition = 'right';\n\n /\n \n * Replaces the default expansion chevron with the given icon, placed according to\n * `toggleIconPosition`.\n \n @type {IconName}\n * @memberof AccordionComponent\n /\n @Input() toggleIcon: IconName;\n\n /\n \n * Icon shown while the accordion is open. Requires `toggleIcon`.\n * When omitted, `toggleIcon` rotates 180° instead of being swapped.\n \n @type {IconName}\n * @memberof AccordionComponent\n /\n @Input() toggleIconExpanded: IconName;\n\n /\n \n * Renders the label in bold. Don`t work on Classic theme\n \n @type {boolean}\n * @default false\n * @memberof AccordionComponent\n /\n @Input({ transform: booleanAttribute }) boldLabel = false;\n\n @Output() closed = new EventEmitter<void>();\n @Output() opened = new EventEmitter<void>();\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n protected get isTableVariant(): boolean {\n return this.variant === 'table' && this.applicationTheme !== 'classic';\n }\n\n /* Whether the component renders the toggle icon itself instead of Material's indicator. /\n protected get hasToggleIcon(): boolean {\n return Boolean(this.toggleIcon) \|\| this.isTableVariant;\n }\n\n /\n The `table` variant renders its chevron as part of the row layout, so it stays in front\n * of the label whatever `toggleIconPosition` says — unless a custom icon replaces it.\n /\n protected get isToggleIconLeading(): boolean {\n return this.isTableVariant && !this.toggleIcon ? true : this.toggleIconPosition === 'left';\n }\n\n protected get hasLeadingToggleIcon(): boolean {\n return this.hasToggleIcon && this.isToggleIconLeading;\n }\n\n protected get hasTrailingToggleIcon(): boolean {\n return this.hasToggleIcon && !this.isToggleIconLeading;\n }\n\n protected get resolvedToggleIcon(): IconName {\n if (!this.toggleIcon) {\n return 'Arrow-chevron-down-filled';\n }\n\n return this.open && this.toggleIconExpanded ? this.toggleIconExpanded : this.toggleIcon;\n }\n\n protected get rotatesToggleIcon(): boolean {\n return !this.toggleIconExpanded;\n }\n\n protected toggle(open: boolean): void {\n this.open = open;\n\n if (this.open) {\n this.opened.emit();\n } else {\n this.closed.emit();\n }\n }\n}\n","<mat-accordion\n class=\"accordion-wrapper\"\n [class.disabled]=\"disabled\"\n [ngClass]=\"variant\"\n [class.has-toggle-icon]=\"hasToggleIcon\"\n [attr.theme]=\"applicationTheme\"\n>\n <mat-expansion-panel\n [expanded]=\"open\"\n [class.bgcolor-none]=\"noBackgroundColor\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\"\n >\n <mat-expansion-panel-header\n [tabIndex]=\"disabled ? -1 : 0\"\n [class.custom-height]=\"allowCustomHeader\"\n [class.left-toggle]=\"toggleIconPosition === 'left' && !hasToggleIcon\"\n [attr.aria-label]=\"label\"\n >\n <!-- mat-panel-title must stay a STATIC child: Material's header slots\n (ng-content select=\"mat-panel-title\") match ngIf-desugared templates\n but NOT @if blocks, so the conditionals live inside the element. -->\n <mat-panel-title>\n @if (!allowCustomHeader) {\n <div\n class=\"title-container\"\n [class.table-container]=\"isTableVariant\"\n [class.with-toggle-icon]=\"hasLeadingToggleIcon\"\n >\n @if (hasLeadingToggleIcon) {\n <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n }\n <div class=\"accordion-label\" [class.bold]=\"boldLabel\">\n {{ label }}\n <ng-content select=\"[subHeader]\"></ng-content>\n @if (showPremiumIcon \|\| labelIcon) {\n <ui-icon\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"premiumTooltipText\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n ></ui-icon>\n }\n </div>\n </div>\n } @else {\n <ng-content select=\"[customHeader]\"></ng-content>\n }\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n @if (hasTrailingToggleIcon) {\n <ng-container [ngTemplateOutlet]=\"toggleIconTemplate\"></ng-container>\n }\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n\n<ng-template #toggleIconTemplate>\n <ui-icon\n class=\"toggle-icon\"\n [size]=\"'24'\"\n [ngClass]=\"{ open, rotates: rotatesToggleIcon }\"\n [name]=\"resolvedToggleIcon\"\n ></ui-icon>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { AccordionComponent } from './accordion.component';\n\n@NgModule({\n exports: [AccordionComponent],\n imports: [\n CommonModule,\n IconComponentModule,\n ButtonComponentModule,\n MatTooltipModule,\n MatExpansionModule,\n AccordionComponent,\n ],\n})\nexport class AccordionComponentModule {}\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-breadcrumb.mjs CHANGED Viewed

@@ -188,7 +188,7 @@ class BreadcrumbComponent {
         this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, includeBackButton: { classPropertyName: "includeBackButton", publicName: "includeBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, numberOfLoadingItems: { classPropertyName: "numberOfLoadingItems", publicName: "numberOfLoadingItems", isSignal: true, isRequired: false, transformFunction: null }, maxItemLength: { classPropertyName: "maxItemLength", publicName: "maxItemLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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}:host{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i2.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, includeBackButton: { classPropertyName: "includeBackButton", publicName: "includeBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, numberOfLoadingItems: { classPropertyName: "numberOfLoadingItems", publicName: "numberOfLoadingItems", isSignal: true, isRequired: false, transformFunction: null }, maxItemLength: { classPropertyName: "maxItemLength", publicName: "maxItemLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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}:host{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i2.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,

package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-breadcrumb.mjs","sources":["../../../components/breadcrumb/breadcrumb.component.ts","../../../components/breadcrumb/breadcrumb.component.html","../../../components/breadcrumb/breadcrumb.component.module.ts","../../../components/breadcrumb/testgorilla-tgo-ui-components-breadcrumb.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n Component,\n input,\n signal,\n ViewChild,\n OnDestroy,\n computed,\n EventEmitter,\n Output,\n effect,\n ChangeDetectionStrategy,\n Injector,\n afterNextRender,\n ElementRef,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, TruncatePipe, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuButtonsType, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbItem, BreadcrumbSize } from './breadcrumb.model';\n\n@Component({\n selector: 'ui-breadcrumb',\n templateUrl: './breadcrumb.component.html',\n styleUrls: ['./breadcrumb.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponentModule,\n OverflowMenuComponentModule,\n MatTooltip,\n IconComponentModule,\n SkeletonComponent,\n AsyncPipe,\n UiTranslatePipe,\n TruncatePipe,\n ],\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnDestroy {\n size = input<BreadcrumbSize>('large');\n items = input<BreadcrumbItem[]>([]);\n applicationTheme = input<ApplicationTheme>('light');\n includeBackButton = input<boolean>(false);\n isLoading = input<boolean>(false);\n numberOfLoadingItems = input<number>(3);\n maxItemLength = input<number>(18);\n @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();\n @Output() backButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();\n\n loadingItems = computed(() => new Array<undefined>(this.numberOfLoadingItems()));\n isOverflowing = signal<boolean>(false);\n visibleItems = signal<BreadcrumbItem[]>([]);\n overflowItems = signal<BreadcrumbItem[]>([]);\n overflowButtonItems = computed<OverflowMenuButtonsType[]>(() =>\n this.overflowItems().map(item => ({\n label: item.label,\n value: item.value,\n }))\n );\n shouldTruncateLastItem = signal<boolean>(false);\n\n @ViewChild('breadcrumbContainer') breadcrumbContainer!: ElementRef<HTMLElement>;\n\n private resizeObserver?: ResizeObserver;\n private itemsInOverflow = 0;\n private previousLoadingState?: boolean;\n private readonly injector: Injector;\n\n constructor(private readonly parentInjector: Injector) {\n this.injector = parentInjector;\n // React to items changes and recalculate overflow\n effect(() => {\n this.items();\n this.itemsInOverflow = 0;\n\n // Only proceed if not in loading state\n if (!this.isLoading()) {\n // Use afterNextRender to ensure DOM is updated before calculating\n afterNextRender(\n () => {\n if (this.breadcrumbContainer?.nativeElement) {\n this.calculateItemDistribution();\n }\n },\n { injector: this.injector }\n );\n }\n });\n\n // React to loading state changes and setup ResizeObserver when loading changes from true to false\n effect(() => {\n const currentLoadingState = this.isLoading();\n\n if (this.previousLoadingState === true && currentLoadingState === false) {\n // Use afterNextRender to ensure DOM is ready before setting up observer\n afterNextRender(\n () => {\n this.setupResizeObserver();\n },\n { injector: this.injector }\n );\n }\n\n this.previousLoadingState = currentLoadingState;\n });\n }\n\n ngAfterViewInit() {\n this.calculateItemDistribution();\n this.setupResizeObserver();\n }\n\n ngOnDestroy() {\n this.resizeObserver?.disconnect();\n }\n\n private calculateItemDistribution() {\n if (!this.breadcrumbContainer?.nativeElement \|\| this.items().length === 0) {\n this.resetToAllVisible();\n return;\n }\n\n const element = this.breadcrumbContainer.nativeElement;\n const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;\n\n if (hasHorizontalOverflow) {\n this.handleOverflow();\n } else if (this.itemsInOverflow > 0) {\n // Check if we can bring items back from overflow\n this.tryReduceOverflow();\n } else {\n this.resetToAllVisible();\n }\n }\n\n private handleOverflow() {\n this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);\n\n this.updateItemArrays();\n this.isOverflowing.set(true);\n\n // Wait for DOM to render the updated template after hiding items\n // We need to measure dimensions AFTER the DOM has been updated with the new visible items\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const stillOverflowing = element.scrollWidth > element.clientWidth;\n\n if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {\n this.handleOverflow();\n } else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n this.shouldTruncateLastItem.set(true);\n }\n }\n }, 0);\n }\n\n private tryReduceOverflow() {\n const testItemsInOverflow = this.itemsInOverflow - 1;\n\n if (testItemsInOverflow >= 0) {\n const testVisibleItems = this.items().slice(testItemsInOverflow);\n const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];\n\n this.visibleItems.set(testVisibleItems);\n this.overflowItems.set(testOverflowItems);\n\n // Always reset truncation when trying to reduce overflow\n this.shouldTruncateLastItem.set(false);\n\n // Wait for DOM to render with test configuration before measuring\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const hasOverflow = element.scrollWidth > element.clientWidth;\n\n if (!hasOverflow) {\n // It fits! Update the counter\n this.itemsInOverflow = testItemsInOverflow;\n this.isOverflowing.set(this.itemsInOverflow > 0);\n\n // Try to reduce more if there are still items in overflow\n if (this.itemsInOverflow > 0) {\n // Schedule next reduction attempt after current render cycle\n setTimeout(() => this.tryReduceOverflow(), 0);\n }\n } else {\n // Doesn't fit, revert to previous state\n this.updateItemArrays();\n\n // Wait for DOM to render reverted state before checking truncation\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const containerElement = this.breadcrumbContainer.nativeElement;\n const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;\n\n if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n this.shouldTruncateLastItem.set(true);\n }\n }\n }, 0);\n }\n }\n }, 0);\n } else {\n // testItemsInOverflow < 0, means we're trying to show all items\n this.resetToAllVisible();\n\n // Wait for DOM to render all items before measuring overflow\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const hasOverflow = element.scrollWidth > element.clientWidth;\n\n if (hasOverflow) {\n // Still overflows with all items, need to go back to overflow state\n this.itemsInOverflow = 1; // Start with minimal overflow\n this.handleOverflow();\n }\n }\n }, 0);\n }\n }\n\n private updateItemArrays() {\n if (this.itemsInOverflow > 0) {\n this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));\n this.visibleItems.set(this.items().slice(this.itemsInOverflow));\n } else {\n this.resetToAllVisible();\n }\n }\n\n private resetToAllVisible() {\n this.visibleItems.set(this.items());\n this.overflowItems.set([]);\n this.isOverflowing.set(false);\n this.shouldTruncateLastItem.set(false);\n this.itemsInOverflow = 0;\n }\n\n private setupResizeObserver() {\n if (!this.breadcrumbContainer?.nativeElement) {\n return;\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n this.calculateItemDistribution();\n });\n\n this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);\n }\n}\n","@if (!isLoading()) {\n <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n @if (includeBackButton()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n ></ui-button>\n }\n @if (isOverflowing()) {\n <ui-overflow-menu\n [applicationTheme]=\"applicationTheme()\"\n [contentTemplateRef]=\"overflowMenu\"\n [buttons]=\"overflowButtonItems()\"\n [matTooltip]=\"('COMMON.OPTIONS' \| uiTranslate \| async)!\"\n [matTooltipClass]=\"applicationTheme()\"\n [isDynamicMenu]=\"true\"\n (selectItem)=\"selectItem.emit($event)\"\n class=\"breadcrumb-overflow-menu\"\n ></ui-overflow-menu>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n @for (item of visibleItems(); track item.value) {\n @if (!$last) {\n <span\n class=\"breadcrumb-item\"\n tabindex=\"0\"\n [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [attr.aria-label]=\"item.label\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label \| truncate: maxItemLength() : '...' }}\n </span>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n } @else {\n <strong\n class=\"breadcrumb-item-active\"\n tabindex=\"0\"\n [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"'page'\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label }}\n </strong>\n }\n }\n </div>\n} @else {\n <div class=\"breadcrumb\">\n @for (i of loadingItems(); track $index) {\n <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n @if ($index !== numberOfLoadingItems() - 1) {\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n }\n </div>\n}\n<ng-template #overflowMenu>\n <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\n@NgModule({\n imports: [\n CommonModule,\n IconComponentModule,\n MatTooltipModule,\n OverflowMenuComponentModule,\n ButtonComponentModule,\n SkeletonComponent,\n UiTranslatePipe,\n TruncatePipe,\n BreadcrumbComponent,\n ],\n exports: [BreadcrumbComponent],\n})\nexport class BreadcrumbComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-breadcrumb.mjs","sources":["../../../components/breadcrumb/breadcrumb.component.ts","../../../components/breadcrumb/breadcrumb.component.html","../../../components/breadcrumb/breadcrumb.component.module.ts","../../../components/breadcrumb/testgorilla-tgo-ui-components-breadcrumb.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n Component,\n input,\n signal,\n ViewChild,\n OnDestroy,\n computed,\n EventEmitter,\n Output,\n effect,\n ChangeDetectionStrategy,\n Injector,\n afterNextRender,\n ElementRef,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, TruncatePipe, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuButtonsType, OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbItem, BreadcrumbSize } from './breadcrumb.model';\n\n@Component({\n selector: 'ui-breadcrumb',\n templateUrl: './breadcrumb.component.html',\n styleUrls: ['./breadcrumb.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ButtonComponentModule,\n OverflowMenuComponentModule,\n MatTooltip,\n IconComponentModule,\n SkeletonComponent,\n AsyncPipe,\n UiTranslatePipe,\n TruncatePipe,\n ],\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnDestroy {\n size = input<BreadcrumbSize>('large');\n items = input<BreadcrumbItem[]>([]);\n applicationTheme = input<ApplicationTheme>('light');\n includeBackButton = input<boolean>(false);\n isLoading = input<boolean>(false);\n numberOfLoadingItems = input<number>(3);\n maxItemLength = input<number>(18);\n @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();\n @Output() backButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();\n\n loadingItems = computed(() => new Array<undefined>(this.numberOfLoadingItems()));\n isOverflowing = signal<boolean>(false);\n visibleItems = signal<BreadcrumbItem[]>([]);\n overflowItems = signal<BreadcrumbItem[]>([]);\n overflowButtonItems = computed<OverflowMenuButtonsType[]>(() =>\n this.overflowItems().map(item => ({\n label: item.label,\n value: item.value,\n }))\n );\n shouldTruncateLastItem = signal<boolean>(false);\n\n @ViewChild('breadcrumbContainer') breadcrumbContainer!: ElementRef<HTMLElement>;\n\n private resizeObserver?: ResizeObserver;\n private itemsInOverflow = 0;\n private previousLoadingState?: boolean;\n private readonly injector: Injector;\n\n constructor(private readonly parentInjector: Injector) {\n this.injector = parentInjector;\n // React to items changes and recalculate overflow\n effect(() => {\n this.items();\n this.itemsInOverflow = 0;\n\n // Only proceed if not in loading state\n if (!this.isLoading()) {\n // Use afterNextRender to ensure DOM is updated before calculating\n afterNextRender(\n () => {\n if (this.breadcrumbContainer?.nativeElement) {\n this.calculateItemDistribution();\n }\n },\n { injector: this.injector }\n );\n }\n });\n\n // React to loading state changes and setup ResizeObserver when loading changes from true to false\n effect(() => {\n const currentLoadingState = this.isLoading();\n\n if (this.previousLoadingState === true && currentLoadingState === false) {\n // Use afterNextRender to ensure DOM is ready before setting up observer\n afterNextRender(\n () => {\n this.setupResizeObserver();\n },\n { injector: this.injector }\n );\n }\n\n this.previousLoadingState = currentLoadingState;\n });\n }\n\n ngAfterViewInit() {\n this.calculateItemDistribution();\n this.setupResizeObserver();\n }\n\n ngOnDestroy() {\n this.resizeObserver?.disconnect();\n }\n\n private calculateItemDistribution() {\n if (!this.breadcrumbContainer?.nativeElement \|\| this.items().length === 0) {\n this.resetToAllVisible();\n return;\n }\n\n const element = this.breadcrumbContainer.nativeElement;\n const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;\n\n if (hasHorizontalOverflow) {\n this.handleOverflow();\n } else if (this.itemsInOverflow > 0) {\n // Check if we can bring items back from overflow\n this.tryReduceOverflow();\n } else {\n this.resetToAllVisible();\n }\n }\n\n private handleOverflow() {\n this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);\n\n this.updateItemArrays();\n this.isOverflowing.set(true);\n\n // Wait for DOM to render the updated template after hiding items\n // We need to measure dimensions AFTER the DOM has been updated with the new visible items\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const stillOverflowing = element.scrollWidth > element.clientWidth;\n\n if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {\n this.handleOverflow();\n } else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n this.shouldTruncateLastItem.set(true);\n }\n }\n }, 0);\n }\n\n private tryReduceOverflow() {\n const testItemsInOverflow = this.itemsInOverflow - 1;\n\n if (testItemsInOverflow >= 0) {\n const testVisibleItems = this.items().slice(testItemsInOverflow);\n const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];\n\n this.visibleItems.set(testVisibleItems);\n this.overflowItems.set(testOverflowItems);\n\n // Always reset truncation when trying to reduce overflow\n this.shouldTruncateLastItem.set(false);\n\n // Wait for DOM to render with test configuration before measuring\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const hasOverflow = element.scrollWidth > element.clientWidth;\n\n if (!hasOverflow) {\n // It fits! Update the counter\n this.itemsInOverflow = testItemsInOverflow;\n this.isOverflowing.set(this.itemsInOverflow > 0);\n\n // Try to reduce more if there are still items in overflow\n if (this.itemsInOverflow > 0) {\n // Schedule next reduction attempt after current render cycle\n setTimeout(() => this.tryReduceOverflow(), 0);\n }\n } else {\n // Doesn't fit, revert to previous state\n this.updateItemArrays();\n\n // Wait for DOM to render reverted state before checking truncation\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const containerElement = this.breadcrumbContainer.nativeElement;\n const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;\n\n if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n this.shouldTruncateLastItem.set(true);\n }\n }\n }, 0);\n }\n }\n }, 0);\n } else {\n // testItemsInOverflow < 0, means we're trying to show all items\n this.resetToAllVisible();\n\n // Wait for DOM to render all items before measuring overflow\n setTimeout(() => {\n if (this.breadcrumbContainer?.nativeElement) {\n const element = this.breadcrumbContainer.nativeElement;\n const hasOverflow = element.scrollWidth > element.clientWidth;\n\n if (hasOverflow) {\n // Still overflows with all items, need to go back to overflow state\n this.itemsInOverflow = 1; // Start with minimal overflow\n this.handleOverflow();\n }\n }\n }, 0);\n }\n }\n\n private updateItemArrays() {\n if (this.itemsInOverflow > 0) {\n this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));\n this.visibleItems.set(this.items().slice(this.itemsInOverflow));\n } else {\n this.resetToAllVisible();\n }\n }\n\n private resetToAllVisible() {\n this.visibleItems.set(this.items());\n this.overflowItems.set([]);\n this.isOverflowing.set(false);\n this.shouldTruncateLastItem.set(false);\n this.itemsInOverflow = 0;\n }\n\n private setupResizeObserver() {\n if (!this.breadcrumbContainer?.nativeElement) {\n return;\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n this.calculateItemDistribution();\n });\n\n this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);\n }\n}\n","@if (!isLoading()) {\n <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n @if (includeBackButton()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n ></ui-button>\n }\n @if (isOverflowing()) {\n <ui-overflow-menu\n [applicationTheme]=\"applicationTheme()\"\n [contentTemplateRef]=\"overflowMenu\"\n [buttons]=\"overflowButtonItems()\"\n [matTooltip]=\"('COMMON.OPTIONS' \| uiTranslate \| async)!\"\n [matTooltipClass]=\"applicationTheme()\"\n [isDynamicMenu]=\"true\"\n (selectItem)=\"selectItem.emit($event)\"\n class=\"breadcrumb-overflow-menu\"\n ></ui-overflow-menu>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n @for (item of visibleItems(); track item.value) {\n @if (!$last) {\n <span\n class=\"breadcrumb-item\"\n tabindex=\"0\"\n [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [attr.aria-label]=\"item.label\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label \| truncate: maxItemLength() : '...' }}\n </span>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n } @else {\n <strong\n class=\"breadcrumb-item-active\"\n tabindex=\"0\"\n [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"'page'\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label }}\n </strong>\n }\n }\n </div>\n} @else {\n <div class=\"breadcrumb\">\n @for (i of loadingItems(); track $index) {\n <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n @if ($index !== numberOfLoadingItems() - 1) {\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n }\n </div>\n}\n<ng-template #overflowMenu>\n <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\n\n@NgModule({\n imports: [\n CommonModule,\n IconComponentModule,\n MatTooltipModule,\n OverflowMenuComponentModule,\n ButtonComponentModule,\n SkeletonComponent,\n UiTranslatePipe,\n TruncatePipe,\n BreadcrumbComponent,\n ],\n exports: [BreadcrumbComponent],\n})\nexport class BreadcrumbComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}