@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs

@@ -1,163 +1,424 @@
-import { AsyncPipe } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, model, computed, output, Optional, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i3 from '@testgorilla/tgo-ui/components/button';
-import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { LanguageService, IKeyboardEvent, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i4 from '@testgorilla/tgo-ui/components/divider';
-import { DividerComponentModule } from '@testgorilla/tgo-ui/components/divider';
-import * as i2 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i1 from '@testgorilla/tgo-ui/components/progress-bar';
-import { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';
-import { RadioButtonComponentModule } from '@testgorilla/tgo-ui/components/radio-button';
-
-class ChecklistComponent {
-    itemTestId(value) {
-        const testId = this.testId();
-        return testId ? `${testId}-${value}` : 'checklist-item';
-    }
-    constructor(defaultAppTheme) {
-        this.defaultAppTheme = defaultAppTheme;
-        /**
-         * Label for the checklist
-         * @type {string}
-         * @memberof ChecklistComponent
-         */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /**
-         * Sub title/Description for the checklist
-         * @type {string}
-         * @memberof ChecklistComponent
-         */
-        this.description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-        /**
-         * Items for the checklist
-         * @type {ModelSignal<ChecklistItem[]>}
-         * @memberof ChecklistComponent
-         */
-        this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        /**
-         * Application theme
-         * @type {ApplicationTheme}
-         * @memberof ChecklistComponent
-         */
-        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-        /**
-         * Confirm button label
-         * @type {string}
-         * @memberof ChecklistComponent
-         */
-        this.footerButtonLabel = input(undefined, ...(ngDevMode ? [{ debugName: "footerButtonLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {string}
-         * @memberof ChecklistComponent
-         */
-        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * The language to be used
-         * @property language
-         * @type {Language}
-         * @memberof ChecklistComponent
-         */
-        this.language = input(LanguageService.defaultLanguage, ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
-        /**
-         * A boolean property that determines whether the checklist items should be automatically checked.
-         *
-         * @type {boolean}
-         */
-        this.autocheck = input(true, ...(ngDevMode ? [{ debugName: "autocheck" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        /**
-         * Event emitter that triggers when the footer button is clicked.
-         * Emits a void event.
-         */
-        this.footerButtonClicked = output();
-        /**
-         * An output event emitter that signifies the completion of a task or process.
-         * This event does not carry any payload.
-         */
-        this.completed = output();
-        /**
-         * Represents the currently selected item in the checklist.
-         * This is an instance of the `ChecklistItem` supports two-way binding.
-         */
-        this.selectedItem = model(...(ngDevMode ? [undefined, { debugName: "selectedItem" }] : /* istanbul ignore next */ []));
-        this.currentIndex = computed(() => {
-            const items = this.items();
-            const selectedItem = this.selectedItem();
-            return selectedItem ? items.indexOf(selectedItem) : -1;
-        }, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
-        this.progress = computed(() => {
-            const items = this.items();
-            const total = items.length;
-            const checked = items.filter(item => item.checked).length;
-            const progressValue = Number(((checked / total) * 100).toFixed(0));
-            if (progressValue === 100) {
-                this.completed.emit();
-            }
-            return progressValue;
-        }, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
-    }
-    selectItem(item) {
-        if ((item.checked || item.disabled || this.selectedItem() === item) && !item.reselect) {
-            return;
-        }
-        if (this.autocheck()) {
-            item.checked = item?.reselect ? !item.checked : true;
-            this.items.set([...this.items()]);
-        }
-        this.selectedItem.set(item);
-    }
-    keydownHandler($event, item) {
-        if (IKeyboardEvent.SPACE === $event.key || IKeyboardEvent.ENTER === $event.key) {
-            $event.preventDefault();
-            this.selectItem(item);
-        }
-    }
-    next() {
-        const currentIndex = this.currentIndex();
-        if (currentIndex < this.items().length - 1) {
-            this.selectItem(this.items()[currentIndex + 1]);
-        }
-    }
-    prev() {
-        const currentIndex = this.currentIndex();
-        if (currentIndex > 0) {
-            this.selectItem(this.items()[currentIndex - 1]);
-        }
-    }
-    footerButtonClick(event) {
-        event.preventDefault();
-        this.footerButtonClicked.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChecklistComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ChecklistComponent, isStandalone: true, selector: "ui-checklist", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", 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 }, footerButtonLabel: { classPropertyName: "footerButtonLabel", publicName: "footerButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, autocheck: { classPropertyName: "autocheck", publicName: "autocheck", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", footerButtonClicked: "footerButtonClicked", completed: "completed", selectedItem: "selectedItemChange" }, ngImport: i0, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: i1.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "ngmodule", type: RadioButtonComponentModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "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", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: DividerComponentModule }, { kind: "component", type: i4.DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChecklistComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-checklist', imports: [
-                        ProgressBarComponentModule,
-                        RadioButtonComponentModule,
-                        IconComponentModule,
-                        ButtonComponentModule,
-                        DividerComponentModule,
-                        UiTranslatePipe,
-                        AsyncPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], footerButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtonLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], autocheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocheck", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], footerButtonClicked: [{ type: i0.Output, args: ["footerButtonClicked"] }], completed: [{ type: i0.Output, args: ["completed"] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }, { type: i0.Output, args: ["selectedItemChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { AsyncPipe } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject, Optional, computed, input, model, output } from "@angular/core";
+import * as i3 from "@testgorilla/tgo-ui/components/button";
+import { ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { IKeyboardEvent, LanguageService, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i4 from "@testgorilla/tgo-ui/components/divider";
+import { DividerComponentModule } from "@testgorilla/tgo-ui/components/divider";
+import * as i2 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i1 from "@testgorilla/tgo-ui/components/progress-bar";
+import { ProgressBarComponentModule } from "@testgorilla/tgo-ui/components/progress-bar";
+import { RadioButtonComponentModule } from "@testgorilla/tgo-ui/components/radio-button";
+var ChecklistComponent = class ChecklistComponent {
+	itemTestId(value) {
+		const testId = this.testId();
+		return testId ? `${testId}-${value}` : "checklist-item";
+	}
+	constructor(defaultAppTheme) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.description = input(null, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this.items = model([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input(void 0, ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+		this.footerButtonLabel = input(void 0, ...ngDevMode ? [{ debugName: "footerButtonLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.language = input(LanguageService.defaultLanguage, ...ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []);
+		this.autocheck = input(true, ...ngDevMode ? [{ debugName: "autocheck" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.footerButtonClicked = output();
+		this.completed = output();
+		this.selectedItem = model(...ngDevMode ? [void 0, { debugName: "selectedItem" }] : /* istanbul ignore next */ []);
+		this.currentIndex = computed(() => {
+			const items = this.items();
+			const selectedItem = this.selectedItem();
+			return selectedItem ? items.indexOf(selectedItem) : -1;
+		}, ...ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []);
+		this.progress = computed(() => {
+			const items = this.items();
+			const total = items.length;
+			const checked = items.filter((item) => item.checked).length;
+			const progressValue = Number((checked / total * 100).toFixed(0));
+			if (progressValue === 100) this.completed.emit();
+			return progressValue;
+		}, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+	}
+	selectItem(item) {
+		if ((item.checked || item.disabled || this.selectedItem() === item) && !item.reselect) return;
+		if (this.autocheck()) {
+			item.checked = item?.reselect ? !item.checked : true;
+			this.items.set([...this.items()]);
+		}
+		this.selectedItem.set(item);
+	}
+	keydownHandler($event, item) {
+		if (IKeyboardEvent.SPACE === $event.key || IKeyboardEvent.ENTER === $event.key) {
+			$event.preventDefault();
+			this.selectItem(item);
+		}
+	}
+	next() {
+		const currentIndex = this.currentIndex();
+		if (currentIndex < this.items().length - 1) this.selectItem(this.items()[currentIndex + 1]);
+	}
+	prev() {
+		const currentIndex = this.currentIndex();
+		if (currentIndex > 0) this.selectItem(this.items()[currentIndex - 1]);
+	}
+	footerButtonClick(event) {
+		event.preventDefault();
+		this.footerButtonClicked.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ChecklistComponent,
+			deps: [{
+				token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: ChecklistComponent,
+			isStandalone: true,
+			selector: "ui-checklist",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					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
+				},
+				footerButtonLabel: {
+					classPropertyName: "footerButtonLabel",
+					publicName: "footerButtonLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				language: {
+					classPropertyName: "language",
+					publicName: "language",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autocheck: {
+					classPropertyName: "autocheck",
+					publicName: "autocheck",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectedItem: {
+					classPropertyName: "selectedItem",
+					publicName: "selectedItem",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				items: "itemsChange",
+				footerButtonClicked: "footerButtonClicked",
+				completed: "completed",
+				selectedItem: "selectedItemChange"
+			},
+			ngImport: i0,
+			template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: ProgressBarComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.ProgressBarComponent,
+					selector: "ui-progress-bar",
+					inputs: [
+						"companyColor",
+						"progress",
+						"mode",
+						"buffer",
+						"applicationTheme",
+						"ariaLabel",
+						"ariaDescribedBy",
+						"showPercentage"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: RadioButtonComponentModule
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: ButtonComponentModule
+				},
+				{
+					kind: "component",
+					type: i3.ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"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",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "ngmodule",
+					type: DividerComponentModule
+				},
+				{
+					kind: "component",
+					type: i4.DividerComponent,
+					selector: "ui-divider",
+					inputs: [
+						"size",
+						"companyColor",
+						"applicationTheme",
+						"label"
+					]
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ChecklistComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-checklist",
+			imports: [
+				ProgressBarComponentModule,
+				RadioButtonComponentModule,
+				IconComponentModule,
+				ButtonComponentModule,
+				DividerComponentModule,
+				UiTranslatePipe,
+				AsyncPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" [attr.data-testid]=\"testId() ?? 'checklist-container'\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      [attr.data-testid]=\"itemTestId(item.value)\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\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{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #d3d3d3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["itemsChange"]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		footerButtonLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footerButtonLabel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		language: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "language",
+				required: false
+			}]
+		}],
+		autocheck: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocheck",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		footerButtonClicked: [{
+			type: i0.Output,
+			args: ["footerButtonClicked"]
+		}],
+		completed: [{
+			type: i0.Output,
+			args: ["completed"]
+		}],
+		selectedItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedItem",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedItemChange"]
+		}]
+	}
+});
 export { ChecklistComponent };
-//# sourceMappingURL=testgorilla-tgo-ui-components-checklist.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-checklist.mjs.map