npm - @updevs/components - Versions diffs - 1.0.0-alpha.99 → 1.0.0-beta.1 - Mend

@updevs/components 1.0.0-alpha.99 → 1.0.0-beta.1

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 (688) hide show

package/fesm2022/updevs-components-list.mjs CHANGED Viewed

@@ -108,12 +108,12 @@ class ListComponent {
             this.localWrapperClasses += ' list-hidden';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ListComponent, selector: "upd-list", inputs: { items: "items", shouldOverflow: "shouldOverflow", isFlush: "isFlush", isVisible: "isVisible", isHoverable: "isHoverable", shouldDisplayItemsCounter: "shouldDisplayItemsCounter", wrapperClasses: "wrapperClasses", maxHeight: "maxHeight" }, outputs: { checkboxChanged: "checkboxChanged", selectedItem: "selectedItem" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n    @for (item of listItems; track trackByItemId($index, item)) {\n        @if ((item.children?.length || 0) > 0) {\n            <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n            @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n            }\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n        }\n    } @empty {\n        <div class=\"list-group-item\">\n            <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n            {{ t('NoRecordsFound') }}\n        </div>\n    }\n\n    @if (shouldDisplayItemsCounter && listItems.length > 0) {\n        <div class=\"list-items-counter bg-muted text-muted-fg\">\n            {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n        </div>\n    }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n    <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n        [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n        @if (!item.hasLeftBox) {\n            <span>{{ item.text }}</span>\n        } @else {\n            <div class=\"row\">\n                <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n                <div class=\"col text-truncate align-content-center\">\n                    @if (!!item.text) {\n                        <div class=\"text-body d-block\">{{ item.text }}</div>\n                    }\n                    @if (!!item.description) {\n                        <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n    <div class=\"col-auto\">\n        @if (!!item.icon) {\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        } @else if (item.hasCheckbox) {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"></upd-checkbox>\n            <!--        [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n        } @else if (item.hasLeftBadge) {\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        } @else if (!!item.leftBoxImage || !!item.leftBoxText) {\n            <a href=\"#\"> <!-- TODO: change. -->\n                <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n                    @if (item.hasBottomRightBadge) {\n                        <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                    }\n                </span>\n            </a>\n        } @else if (!!item.leftBoxHtml) {\n            <div [innerHTML]=\"item.leftBoxHtml\"></div>\n        }\n    </div>\n</ng-template>", styles: ["upd-list{width:100%}.list-group-item{cursor:pointer}.list-hidden{display:none!important}.list-items-counter{position:sticky;bottom:0;right:0;float:right;border-top-left-radius:2px;opacity:.6;padding:2px 12px;margin-top:-24px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ListComponent, isStandalone: false, selector: "upd-list", inputs: { items: "items", shouldOverflow: "shouldOverflow", isFlush: "isFlush", isVisible: "isVisible", isHoverable: "isHoverable", shouldDisplayItemsCounter: "shouldDisplayItemsCounter", wrapperClasses: "wrapperClasses", maxHeight: "maxHeight" }, outputs: { checkboxChanged: "checkboxChanged", selectedItem: "selectedItem" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n    @for (item of listItems; track trackByItemId($index, item)) {\n        @if ((item.children?.length || 0) > 0) {\n            <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n            @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n            }\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n        }\n    } @empty {\n        <div class=\"list-group-item\">\n            <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n            {{ t('NoRecordsFound') }}\n        </div>\n    }\n\n    @if (shouldDisplayItemsCounter && listItems.length > 0) {\n        <div class=\"list-items-counter bg-muted text-muted-fg\">\n            {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n        </div>\n    }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n    <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n        [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n        @if (!item.hasLeftBox) {\n            <span>{{ item.text }}</span>\n        } @else {\n            <div class=\"row\">\n                <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n                <div class=\"col text-truncate align-content-center\">\n                    @if (!!item.text) {\n                        <div class=\"text-body d-block\">{{ item.text }}</div>\n                    }\n                    @if (!!item.description) {\n                        <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n    <div class=\"col-auto\">\n        @if (!!item.icon) {\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        } @else if (item.hasCheckbox) {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"></upd-checkbox>\n            <!--        [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n        } @else if (item.hasLeftBadge) {\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        } @else if (!!item.leftBoxImage || !!item.leftBoxText) {\n            <a href=\"#\"> <!-- TODO: change. -->\n                <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n                    @if (item.hasBottomRightBadge) {\n                        <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                    }\n                </span>\n            </a>\n        } @else if (!!item.leftBoxHtml) {\n            <div [innerHTML]=\"item.leftBoxHtml\"></div>\n        }\n    </div>\n</ng-template>", styles: ["upd-list{width:100%}.list-group-item{cursor:pointer}.list-hidden{display:none!important}.list-items-counter{position:sticky;bottom:0;right:0;float:right;border-top-left-radius:2px;opacity:.6;padding:2px 12px;margin-top:-24px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-list', encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n    @for (item of listItems; track trackByItemId($index, item)) {\n        @if ((item.children?.length || 0) > 0) {\n            <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n            @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n            }\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n        }\n    } @empty {\n        <div class=\"list-group-item\">\n            <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n            {{ t('NoRecordsFound') }}\n        </div>\n    }\n\n    @if (shouldDisplayItemsCounter && listItems.length > 0) {\n        <div class=\"list-items-counter bg-muted text-muted-fg\">\n            {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n        </div>\n    }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n    <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n        [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n        @if (!item.hasLeftBox) {\n            <span>{{ item.text }}</span>\n        } @else {\n            <div class=\"row\">\n                <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n                <div class=\"col text-truncate align-content-center\">\n                    @if (!!item.text) {\n                        <div class=\"text-body d-block\">{{ item.text }}</div>\n                    }\n                    @if (!!item.description) {\n                        <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n    <div class=\"col-auto\">\n        @if (!!item.icon) {\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        } @else if (item.hasCheckbox) {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"></upd-checkbox>\n            <!--        [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n        } @else if (item.hasLeftBadge) {\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        } @else if (!!item.leftBoxImage || !!item.leftBoxText) {\n            <a href=\"#\"> <!-- TODO: change. -->\n                <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n                    @if (item.hasBottomRightBadge) {\n                        <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                    }\n                </span>\n            </a>\n        } @else if (!!item.leftBoxHtml) {\n            <div [innerHTML]=\"item.leftBoxHtml\"></div>\n        }\n    </div>\n</ng-template>", styles: ["upd-list{width:100%}.list-group-item{cursor:pointer}.list-hidden{display:none!important}.list-items-counter{position:sticky;bottom:0;right:0;float:right;border-top-left-radius:2px;opacity:.6;padding:2px 12px;margin-top:-24px}\n"] }]
+            args: [{ standalone: false, selector: 'upd-list', encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n    @for (item of listItems; track trackByItemId($index, item)) {\n        @if ((item.children?.length || 0) > 0) {\n            <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n            @for (child of item.children; track child) {\n                <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n            }\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n        }\n    } @empty {\n        <div class=\"list-group-item\">\n            <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n            {{ t('NoRecordsFound') }}\n        </div>\n    }\n\n    @if (shouldDisplayItemsCounter && listItems.length > 0) {\n        <div class=\"list-items-counter bg-muted text-muted-fg\">\n            {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n        </div>\n    }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n    <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n        [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n        @if (!item.hasLeftBox) {\n            <span>{{ item.text }}</span>\n        } @else {\n            <div class=\"row\">\n                <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n                <div class=\"col text-truncate align-content-center\">\n                    @if (!!item.text) {\n                        <div class=\"text-body d-block\">{{ item.text }}</div>\n                    }\n                    @if (!!item.description) {\n                        <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n    <div class=\"col-auto\">\n        @if (!!item.icon) {\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        } @else if (item.hasCheckbox) {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"></upd-checkbox>\n            <!--        [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n        } @else if (item.hasLeftBadge) {\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        } @else if (!!item.leftBoxImage || !!item.leftBoxText) {\n            <a href=\"#\"> <!-- TODO: change. -->\n                <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n                    @if (item.hasBottomRightBadge) {\n                        <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                    }\n                </span>\n            </a>\n        } @else if (!!item.leftBoxHtml) {\n            <div [innerHTML]=\"item.leftBoxHtml\"></div>\n        }\n    </div>\n</ng-template>", styles: ["upd-list{width:100%}.list-group-item{cursor:pointer}.list-hidden{display:none!important}.list-items-counter{position:sticky;bottom:0;right:0;float:right;border-top-left-radius:2px;opacity:.6;padding:2px 12px;margin-top:-24px}\n"] }]
         }], propDecorators: { localWrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -179,17 +179,17 @@ class UpdListModule {
         translocoService.setTranslation(en$1, 'en');
         translocoService.setTranslation(pt$1, 'pt');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, declarations: [ListComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdListModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdListModule, declarations: [ListComponent], imports: [CommonModule,
             TranslocoModule,
             UpdCheckboxModule,
             UpdIconsModule], exports: [ListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdListModule, imports: [CommonModule,
             TranslocoModule,
             UpdCheckboxModule,
             UpdIconsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/updevs-components-list.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-list.mjs","sources":["../../../../libs/components/list/src/models/list-item.model.ts","../../../../libs/components/list/src/list.component.ts","../../../../libs/components/list/src/list.component.html","../../../../libs/components/list/src/upd-list.module.ts","../../../../libs/components/list/src/updevs-components-list.ts"],"sourcesContent":["import { IconModel } from '@updevs/icons';\nimport { BgColorStyleType } from '@updevs/sdk/types';\n\nimport { ListItem } from './list-item';\nimport { BadgePositionType } from './badge-position.type';\n\nexport class ListItemModel implements ListItem {\n id?: any;\n text?: string;\n description?: string;\n icon?: IconModel;\n isChecked?: boolean;\n isSwitch?: boolean;\n hasCheckbox?: boolean;\n isDisabled?: boolean;\n isActive?: boolean;\n leftBoxText?: string;\n leftBoxImage?: string;\n leftBoxHtml?: string;\n badgeColor?: BgColorStyleType;\n badgeText?: string;\n badgePosition?: BadgePositionType;\n children?: ListItemModel[];\n get hasLeftBox(): boolean {\n return !!this.leftBoxImage\n \|\| !!this.leftBoxText\n \|\| !!this.badgeColor\n \|\| this.hasCheckbox === true\n \|\| !!this.icon\n \|\| !!this.leftBoxHtml;\n }\n get hasLeftBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left';\n }\n get hasBottomRightBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';\n }\n\n constructor(init?: ListItem) {\n Object.assign(this, init);\n }\n}\n","import {\n Component,\n HostBinding,\n Input,\n Renderer2,\n ElementRef,\n OnInit,\n RendererStyleFlags2,\n ViewEncapsulation,\n Output,\n EventEmitter,\n OnChanges,\n SimpleChanges, inject\n} from '@angular/core';\n\nimport { ListItem } from './models/list-item';\nimport { ListItemModel } from './models/list-item.model';\n\n@Component({\n selector: 'upd-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class ListComponent implements OnInit, OnChanges {\n @HostBinding('class') localWrapperClasses = '';\n\n /*\n List items.\n * If provided, the single will be considered static.\n /\n @Input() items?: ListItem[];\n /\n Whether the content should overflow or not.\n /\n @Input() shouldOverflow = false;\n /\n Whether the list will fit the layout of the container.\n * If set to false, the list's round borders will be visible. It'll have a detached behavior.\n /\n @Input() isFlush = true;\n @Input() isVisible = true;\n @Input() isHoverable = false;\n @Input() shouldDisplayItemsCounter = false;\n @Input() wrapperClasses = '';\n /\n Maximum height of the component.\n * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.\n /\n @Input() maxHeight?: string;\n\n @Output() readonly checkboxChanged = new EventEmitter<ListItem>();\n @Output() readonly selectedItem = new EventEmitter<ListItem>();\n\n listItems: ListItemModel[] = [];\n currentSelection: ListItem[] = [];\n\n private localBackupItems: ListItem[] = [];\n\n private readonly renderer = inject(Renderer2);\n private readonly elementRef = inject(ElementRef);\n\n ngOnInit(): void {\n this.setupStyle();\n this.updateWrapperClasses();\n this.setupItems();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.setupStyle();\n this.updateWrapperClasses();\n\n if (!!changes['items']) {\n this.setupItems();\n }\n }\n\n onCheckboxChange(item: ListItem, isChecked: boolean): void {\n item.isChecked = isChecked;\n this.checkboxChanged.emit(item);\n }\n\n onSelectItem(evt: any, item: ListItem): void {\n evt.stopPropagation();\n this.selectedItem.emit(item);\n }\n\n trackByItemId(index: number, item: ListItem): any {\n return item.id ?? index;\n }\n\n private setupItems(): void {\n const tempItems: ListItemModel[] = [];\n\n this.items?.forEach(it => {\n const parent = new ListItemModel(it);\n\n if ((it.children?.length \|\| 0) > 0) {\n parent.children = [];\n it.children?.forEach(child => parent.children!.push(new ListItemModel(child)));\n }\n\n tempItems.push(parent);\n });\n\n this.listItems = [...tempItems];\n }\n\n private setupStyle(): void {\n if (!!this.maxHeight) {\n this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.maxHeight, RendererStyleFlags2.Important);\n }\n }\n\n private updateWrapperClasses(): void {\n this.localWrapperClasses = 'list-group' + ` ${this.wrapperClasses}`;\n\n if (this.isFlush) {\n this.localWrapperClasses += ' list-group-flush';\n }\n\n if (this.isHoverable) {\n this.localWrapperClasses += ' list-group-hoverable';\n }\n\n if (this.shouldOverflow) {\n this.localWrapperClasses += ' overflow-auto';\n }\n\n if (!this.isVisible) {\n this.localWrapperClasses += ' list-hidden';\n }\n }\n}\n","<ng-container transloco=\"let t; prefix: 'UpDevs.List'\">\n @for (item of listItems; track trackByItemId($index, item)) {\n @if ((item.children?.length \|\| 0) > 0) {\n <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n @for (child of item.children; track child) {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n }\n } @empty {\n <div class=\"list-group-item\">\n <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n {{ t('NoRecordsFound') }}\n </div>\n }\n\n @if (shouldDisplayItemsCounter && listItems.length > 0) {\n <div class=\"list-items-counter bg-muted text-muted-fg\">\n {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n </div>\n }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n @if (!item.hasLeftBox) {\n <span>{{ item.text }}</span>\n } @else {\n <div class=\"row\">\n <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n <div class=\"col text-truncate align-content-center\">\n @if (!!item.text) {\n <div class=\"text-body d-block\">{{ item.text }}</div>\n }\n @if (!!item.description) {\n <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n <div class=\"col-auto\">\n @if (!!item.icon) {\n <upd-icon [model]=\"item.icon\"></upd-icon>\n } @else if (item.hasCheckbox) {\n <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked \|\| false\"\n [isSwitch]=\"item.isSwitch \|\| false\"></upd-checkbox>\n <!-- [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n } @else if (item.hasLeftBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n } @else if (!!item.leftBoxImage \|\| !!item.leftBoxText) {\n <a href=\"#\"> <!-- TODO: change. -->\n <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n @if (item.hasBottomRightBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n }\n </span>\n </a>\n } @else if (!!item.leftBoxHtml) {\n <div [innerHTML]=\"item.leftBoxHtml\"></div>\n }\n </div>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@jsverse/transloco';\nimport { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { ListComponent } from './list.component';\n\n@NgModule({\n imports: [\n CommonModule,\n TranslocoModule,\n UpdCheckboxModule,\n UpdIconsModule\n ],\n declarations: [\n ListComponent\n ],\n exports: [\n ListComponent\n ]\n})\nexport class UpdListModule {\n constructor(translocoService: TranslocoService) {\n translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n translocoService.setTranslation(en, 'en');\n translocoService.setTranslation(pt, 'pt');\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","en","pt","i1"],"mappings":";;;;;;;;;;;MAMa,aAAa,CAAA;AAiBtB,IAAA,IAAI,UAAU,GAAA;AACV,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC;eACP,CAAC,CAAC,IAAI,CAAC;eACP,CAAC,CAAC,IAAI,CAAC;eACP,IAAI,CAAC,WAAW,KAAK;eACrB,CAAC,CAAC,IAAI,CAAC;AACP,eAAA,CAAC,CAAC,IAAI,CAAC,WAAW;;AAE7B,IAAA,IAAI,YAAY,GAAA;QACZ,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM;;AAE7D,IAAA,IAAI,mBAAmB,GAAA;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,KAAK,uBAAuB;;AAG9E,IAAA,WAAA,CAAY,IAAe,EAAA;AACvB,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC;;AAEhC;;MCjBY,aAAa,CAAA;AAN1B,IAAA,WAAA,GAAA;QAO0B,IAAmB,CAAA,mBAAA,GAAG,EAAE;AAO9C;;AAEG;QACM,IAAc,CAAA,cAAA,GAAG,KAAK;AAC/B;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAG,IAAI;QACd,IAAS,CAAA,SAAA,GAAG,IAAI;QAChB,IAAW,CAAA,WAAA,GAAG,KAAK;QACnB,IAAyB,CAAA,yBAAA,GAAG,KAAK;QACjC,IAAc,CAAA,cAAA,GAAG,EAAE;AAOT,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAY;AAC9C,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAY;QAE9D,IAAS,CAAA,SAAA,GAAoB,EAAE;QAC/B,IAAgB,CAAA,gBAAA,GAAe,EAAE;QAEzB,IAAgB,CAAA,gBAAA,GAAe,EAAE;AAExB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAyEnD;IAvEG,QAAQ,GAAA;QACJ,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,UAAU,EAAE;;AAGrB,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,oBAAoB,EAAE;AAE3B,QAAA,IAAI,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpB,IAAI,CAAC,UAAU,EAAE;;;IAIzB,gBAAgB,CAAC,IAAc,EAAE,SAAkB,EAAA;AAC/C,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGnC,YAAY,CAAC,GAAQ,EAAE,IAAc,EAAA;QACjC,GAAG,CAAC,eAAe,EAAE;AACrB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGhC,aAAa,CAAC,KAAa,EAAE,IAAc,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,EAAE,IAAI,KAAK;;IAGnB,UAAU,GAAA;QACd,MAAM,SAAS,GAAoB,EAAE;AAErC,QAAA,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,IAAG;AACrB,YAAA,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,EAAE,CAAC;AAEpC,YAAA,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE;AAChC,gBAAA,MAAM,CAAC,QAAQ,GAAG,EAAE;gBACpB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,QAAS,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;;AAGlF,YAAA,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAC1B,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,SAAS,CAAC;;IAG3B,UAAU,GAAA;AACd,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,SAAS,CAAC;;;IAIlH,oBAAoB,GAAA;QACxB,IAAI,CAAC,mBAAmB,GAAG,YAAY,GAAG,IAAI,IAAI,CAAC,cAAc,CAAA,CAAE;AAEnE,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,IAAI,CAAC,mBAAmB,IAAI,mBAAmB;;AAGnD,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,mBAAmB,IAAI,wBAAwB;;AAGxD,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,CAAC,mBAAmB,IAAI,iBAAiB;;AAGjD,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,YAAA,IAAI,CAAC,mBAAmB,IAAI,cAAc;;;8GA1GzC,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,2cCxB1B,svGAoEc,EAAA,MAAA,EAAA,CAAA,qOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,OAAA,EAAA,eAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,uBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FD5CD,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACI,UAAU,EAAA,aAAA,EAGL,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,svGAAA,EAAA,MAAA,EAAA,CAAA,qOAAA,CAAA,EAAA;8BAGf,mBAAmB,EAAA,CAAA;sBAAxC,WAAW;uBAAC,OAAO;gBAMX,KAAK,EAAA,CAAA;sBAAb;gBAIQ,cAAc,EAAA,CAAA;sBAAtB;gBAKQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,yBAAyB,EAAA,CAAA;sBAAjC;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBAKQ,SAAS,EAAA,CAAA;sBAAjB;gBAEkB,eAAe,EAAA,CAAA;sBAAjC;gBACkB,YAAY,EAAA,CAAA;sBAA9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ME5BQ,aAAa,CAAA;AACtB,IAAA,WAAA,CAAY,gBAAkC,EAAA;QAC1C,gBAAgB,CAAC,oCAAoC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AAC7E,QAAA,gBAAgB,CAAC,cAAc,CAACC,IAAE,EAAE,IAAI,CAAC;AACzC,QAAA,gBAAgB,CAAC,cAAc,CAACC,IAAE,EAAE,IAAI,CAAC;;8GAJpC,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAb,aAAa,EAAA,YAAA,EAAA,CANlB,aAAa,CAAA,EAAA,OAAA,EAAA,CANb,YAAY;YACZ,eAAe;YACf,iBAAiB;AACjB,YAAA,cAAc,aAMd,aAAa,CAAA,EAAA,CAAA,CAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAZlB,YAAY;YACZ,eAAe;YACf,iBAAiB;YACjB,cAAc,CAAA,EAAA,CAAA,CAAA;;2FAST,aAAa,EAAA,UAAA,EAAA,CAAA;kBAdzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,iBAAiB;wBACjB;AACH,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACV;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL;AACH;AACJ,iBAAA;;;ACvBD;;AAEG;;;;"}
1	+ {"version":3,"file":"updevs-components-list.mjs","sources":["../../../../libs/components/list/src/models/list-item.model.ts","../../../../libs/components/list/src/list.component.ts","../../../../libs/components/list/src/list.component.html","../../../../libs/components/list/src/upd-list.module.ts","../../../../libs/components/list/src/updevs-components-list.ts"],"sourcesContent":["import { IconModel } from '@updevs/icons';\nimport { BgColorStyleType } from '@updevs/sdk/types';\n\nimport { ListItem } from './list-item';\nimport { BadgePositionType } from './badge-position.type';\n\nexport class ListItemModel implements ListItem {\n id?: any;\n text?: string;\n description?: string;\n icon?: IconModel;\n isChecked?: boolean;\n isSwitch?: boolean;\n hasCheckbox?: boolean;\n isDisabled?: boolean;\n isActive?: boolean;\n leftBoxText?: string;\n leftBoxImage?: string;\n leftBoxHtml?: string;\n badgeColor?: BgColorStyleType;\n badgeText?: string;\n badgePosition?: BadgePositionType;\n children?: ListItemModel[];\n get hasLeftBox(): boolean {\n return !!this.leftBoxImage\n \|\| !!this.leftBoxText\n \|\| !!this.badgeColor\n \|\| this.hasCheckbox === true\n \|\| !!this.icon\n \|\| !!this.leftBoxHtml;\n }\n get hasLeftBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left';\n }\n get hasBottomRightBadge(): boolean {\n return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';\n }\n\n constructor(init?: ListItem) {\n Object.assign(this, init);\n }\n}\n","import {\n Component,\n HostBinding,\n Input,\n Renderer2,\n ElementRef,\n OnInit,\n RendererStyleFlags2,\n ViewEncapsulation,\n Output,\n EventEmitter,\n OnChanges,\n SimpleChanges, inject\n} from '@angular/core';\n\nimport { ListItem } from './models/list-item';\nimport { ListItemModel } from './models/list-item.model';\n\n@Component({\n standalone: false,\n selector: 'upd-list',\n templateUrl: './list.component.html',\n styleUrls: ['./list.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class ListComponent implements OnInit, OnChanges {\n @HostBinding('class') localWrapperClasses = '';\n\n /*\n List items.\n * If provided, the single will be considered static.\n /\n @Input() items?: ListItem[];\n /\n Whether the content should overflow or not.\n /\n @Input() shouldOverflow = false;\n /\n Whether the list will fit the layout of the container.\n * If set to false, the list's round borders will be visible. It'll have a detached behavior.\n /\n @Input() isFlush = true;\n @Input() isVisible = true;\n @Input() isHoverable = false;\n @Input() shouldDisplayItemsCounter = false;\n @Input() wrapperClasses = '';\n /\n Maximum height of the component.\n * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.\n /\n @Input() maxHeight?: string;\n\n @Output() readonly checkboxChanged = new EventEmitter<ListItem>();\n @Output() readonly selectedItem = new EventEmitter<ListItem>();\n\n listItems: ListItemModel[] = [];\n currentSelection: ListItem[] = [];\n\n private localBackupItems: ListItem[] = [];\n\n private readonly renderer = inject(Renderer2);\n private readonly elementRef = inject(ElementRef);\n\n ngOnInit(): void {\n this.setupStyle();\n this.updateWrapperClasses();\n this.setupItems();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.setupStyle();\n this.updateWrapperClasses();\n\n if (!!changes['items']) {\n this.setupItems();\n }\n }\n\n onCheckboxChange(item: ListItem, isChecked: boolean): void {\n item.isChecked = isChecked;\n this.checkboxChanged.emit(item);\n }\n\n onSelectItem(evt: any, item: ListItem): void {\n evt.stopPropagation();\n this.selectedItem.emit(item);\n }\n\n trackByItemId(index: number, item: ListItem): any {\n return item.id ?? index;\n }\n\n private setupItems(): void {\n const tempItems: ListItemModel[] = [];\n\n this.items?.forEach(it => {\n const parent = new ListItemModel(it);\n\n if ((it.children?.length \|\| 0) > 0) {\n parent.children = [];\n it.children?.forEach(child => parent.children!.push(new ListItemModel(child)));\n }\n\n tempItems.push(parent);\n });\n\n this.listItems = [...tempItems];\n }\n\n private setupStyle(): void {\n if (!!this.maxHeight) {\n this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.maxHeight, RendererStyleFlags2.Important);\n }\n }\n\n private updateWrapperClasses(): void {\n this.localWrapperClasses = 'list-group' + ` ${this.wrapperClasses}`;\n\n if (this.isFlush) {\n this.localWrapperClasses += ' list-group-flush';\n }\n\n if (this.isHoverable) {\n this.localWrapperClasses += ' list-group-hoverable';\n }\n\n if (this.shouldOverflow) {\n this.localWrapperClasses += ' overflow-auto';\n }\n\n if (!this.isVisible) {\n this.localWrapperClasses += ' list-hidden';\n }\n }\n}\n","<ng-container transloco=\"let t; prefix: 'UpDevs.List'\">\n @for (item of listItems; track trackByItemId($index, item)) {\n @if ((item.children?.length \|\| 0) > 0) {\n <div class=\"list-group-header sticky-top\">{{ item.text }}</div>\n @for (child of item.children; track child) {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:child}\"></ng-container>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"listItemTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n }\n } @empty {\n <div class=\"list-group-item\">\n <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n {{ t('NoRecordsFound') }}\n </div>\n }\n\n @if (shouldDisplayItemsCounter && listItems.length > 0) {\n <div class=\"list-items-counter bg-muted text-muted-fg\">\n {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}\n </div>\n }\n</ng-container>\n\n<ng-template #listItemTpl let-item=\"item\">\n <div class=\"list-group-item\" [class.list-group-item-action]=\"!item.hasLeftBox\" [class.active]=\"item.isActive\"\n [class.disabled]=\"item.isDisabled\" (click)=\"onSelectItem($event, item)\">\n @if (!item.hasLeftBox) {\n <span>{{ item.text }}</span>\n } @else {\n <div class=\"row\">\n <ng-container [ngTemplateOutlet]=\"leftBoxTpl\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n <div class=\"col text-truncate align-content-center\">\n @if (!!item.text) {\n <div class=\"text-body d-block\">{{ item.text }}</div>\n }\n @if (!!item.description) {\n <div class=\"text-muted text-truncate mt-n1\">{{ item.description }}</div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #leftBoxTpl let-item=\"item\">\n <div class=\"col-auto\">\n @if (!!item.icon) {\n <upd-icon [model]=\"item.icon\"></upd-icon>\n } @else if (item.hasCheckbox) {\n <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [isChecked]=\"item.isChecked \|\| false\"\n [isSwitch]=\"item.isSwitch \|\| false\"></upd-checkbox>\n <!-- [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"-->\n\n } @else if (item.hasLeftBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n } @else if (!!item.leftBoxImage \|\| !!item.leftBoxText) {\n <a href=\"#\"> <!-- TODO: change. -->\n <span class=\"avatar\" style=\"background-image: url({{item.leftBoxImage}})\">{{ item.leftBoxText }}\n @if (item.hasBottomRightBadge) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n }\n </span>\n </a>\n } @else if (!!item.leftBoxHtml) {\n <div [innerHTML]=\"item.leftBoxHtml\"></div>\n }\n </div>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@jsverse/transloco';\nimport { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport * as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { ListComponent } from './list.component';\n\n@NgModule({\n imports: [\n CommonModule,\n TranslocoModule,\n UpdCheckboxModule,\n UpdIconsModule\n ],\n declarations: [\n ListComponent\n ],\n exports: [\n ListComponent\n ]\n})\nexport class UpdListModule {\n constructor(translocoService: TranslocoService) {\n translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n translocoService.setTranslation(en, 'en');\n translocoService.setTranslation(pt, 'pt');\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","en","pt","i1"],"mappings":"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"}

package/fesm2022/updevs-components-modal.mjs CHANGED Viewed

@@ -16,15 +16,16 @@ import { MessageTypeEnum, UpdMessagesModule } from '@updevs/sdk/messages';
 class BaseModal {
     constructor() {
-        this.modalRef = input.required();
-        this.data = input.required();
+        this.modalRef = input.required(...(ngDevMode ? [{ debugName: "modalRef" }] : []));
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.0", type: BaseModal, inputs: { modalRef: { classPropertyName: "modalRef", publicName: "modalRef", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseModal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: BaseModal, isStandalone: false, inputs: { modalRef: { classPropertyName: "modalRef", publicName: "modalRef", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseModal, decorators: [{
-            type: Directive
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseModal, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
+        }], propDecorators: { modalRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalRef", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 class ModalConfigModel {
     constructor(init) {
@@ -58,7 +59,7 @@ class ModalContainerComponent extends BaseComponent {
         this.tabIndex = -1;
         this.dialog = viewChild.required('dialog', { read: ElementRef });
         this.content = viewChild.required('content', { read: ElementRef });
-        this.bodyContentOutlet = viewChild(NgComponentOutlet);
+        this.bodyContentOutlet = viewChild(NgComponentOutlet, ...(ngDevMode ? [{ debugName: "bodyContentOutlet" }] : []));
         this.size = 'regular';
         this.isVerticallyCentered = true;
         this.isScrollable = false;
@@ -223,12 +224,12 @@ class ModalContainerComponent extends BaseComponent {
             this.element.addEventListener('keydown', this.escCallback);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ModalContainerComponent, selector: "upd-modal-container", host: { properties: { "id": "this.id", "class": "this.hostClass", "role": "this.role", "aria-hidden": "this.ariaHidden", "aria-modal": "this.ariaModal", "tabindex": "this.tabIndex", "style.display": "this.styleDisplay" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "bodyContentOutlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n    <div [ngClass]=\"classes\" #dialog>\n        <div class=\"modal-content\" tabindex=\"-1\" #content>\n            @if (!!contentType) {\n                <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n            } @else {\n                @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n                    <div class=\"modal-header\">\n                        @if (!!headerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            <h5 class=\"modal-title\">{{ titleText }}</h5>\n                            @if (showCloseButton) {\n                                <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                            }\n                        }\n                    </div>\n                } @else if (showCloseButton) {\n                    <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                }\n\n                <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n                    @if (isAlert && !!titleText) {\n                        <div class=\"d-flex justify-content-center align-content-start\"\n                            [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n                            [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n                            @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n                                <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n                                    [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n                            }\n\n                            <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n                                {{ titleText }}\n                            </span>\n\n                            @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n                                <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n                                    [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n                            }\n                        </div>\n                    }\n\n                    @if (!!bodyTemplateRef) {\n                        <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else if (!!bodyContentType) {\n                        <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else {\n                        <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n                    }\n                </div>\n\n                @if (!!statusColor) {\n                    <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n                }\n\n                @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n                    <div class=\"modal-footer\">\n                        @if (!!footerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            @switch (footerLayout) {\n                                @case ('full-width') {\n                                    <div class=\"w-100\">\n                                        <div class=\"row\">\n                                            @if (showCancelButton) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n                                                        {{ t('Cancel') }}\n                                                    </upd-button>\n                                                </div>\n                                            }\n\n                                            @for (btn of actionButtons; track btn) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @case ('centered') {\n                                    <div class=\"d-flex justify-content-center w-100\">\n                                        <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                    </div>\n                                }\n                                @default {\n                                    <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                }\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    </div>\n\n    <ng-template #closeBtnTpl>\n        <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n    </ng-template>\n\n    <ng-template #buttonsTpl>\n        @if (showCancelButton) {\n            <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n                {{ t('Cancel') }}\n            </upd-button>\n        }\n\n        @for (btn of actionButtons; track btn) {\n            <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n        }\n    </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalContainerComponent, isStandalone: false, selector: "upd-modal-container", host: { properties: { "id": "this.id", "class": "this.hostClass", "attr.role": "this.role", "aria-hidden": "this.ariaHidden", "aria-modal": "this.ariaModal", "tabindex": "this.tabIndex", "style.display": "this.styleDisplay" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "bodyContentOutlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n    <div [ngClass]=\"classes\" #dialog>\n        <div class=\"modal-content\" tabindex=\"-1\" #content>\n            @if (!!contentType) {\n                <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n            } @else {\n                @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n                    <div class=\"modal-header\">\n                        @if (!!headerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            <h5 class=\"modal-title\">{{ titleText }}</h5>\n                            @if (showCloseButton) {\n                                <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                            }\n                        }\n                    </div>\n                } @else if (showCloseButton) {\n                    <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                }\n\n                <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n                    @if (isAlert && !!titleText) {\n                        <div class=\"d-flex justify-content-center align-content-start\"\n                            [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n                            [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n                            @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n                                <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n                                    [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n                            }\n\n                            <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n                                {{ titleText }}\n                            </span>\n\n                            @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n                                <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n                                    [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n                            }\n                        </div>\n                    }\n\n                    @if (!!bodyTemplateRef) {\n                        <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else if (!!bodyContentType) {\n                        <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else {\n                        <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n                    }\n                </div>\n\n                @if (!!statusColor) {\n                    <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n                }\n\n                @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n                    <div class=\"modal-footer\">\n                        @if (!!footerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            @switch (footerLayout) {\n                                @case ('full-width') {\n                                    <div class=\"w-100\">\n                                        <div class=\"row\">\n                                            @if (showCancelButton) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n                                                        {{ t('Cancel') }}\n                                                    </upd-button>\n                                                </div>\n                                            }\n\n                                            @for (btn of actionButtons; track btn) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @case ('centered') {\n                                    <div class=\"d-flex justify-content-center w-100\">\n                                        <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                    </div>\n                                }\n                                @default {\n                                    <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                }\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    </div>\n\n    <ng-template #closeBtnTpl>\n        <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n    </ng-template>\n\n    <ng-template #buttonsTpl>\n        @if (showCancelButton) {\n            <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n                {{ t('Cancel') }}\n            </upd-button>\n        }\n\n        @for (btn of actionButtons; track btn) {\n            <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n        }\n    </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-modal-container', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n    <div [ngClass]=\"classes\" #dialog>\n        <div class=\"modal-content\" tabindex=\"-1\" #content>\n            @if (!!contentType) {\n                <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n            } @else {\n                @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n                    <div class=\"modal-header\">\n                        @if (!!headerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            <h5 class=\"modal-title\">{{ titleText }}</h5>\n                            @if (showCloseButton) {\n                                <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                            }\n                        }\n                    </div>\n                } @else if (showCloseButton) {\n                    <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                }\n\n                <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n                    @if (isAlert && !!titleText) {\n                        <div class=\"d-flex justify-content-center align-content-start\"\n                            [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n                            [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n                            @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n                                <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n                                    [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n                            }\n\n                            <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n                                {{ titleText }}\n                            </span>\n\n                            @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n                                <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n                                    [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n                            }\n                        </div>\n                    }\n\n                    @if (!!bodyTemplateRef) {\n                        <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else if (!!bodyContentType) {\n                        <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else {\n                        <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n                    }\n                </div>\n\n                @if (!!statusColor) {\n                    <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n                }\n\n                @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n                    <div class=\"modal-footer\">\n                        @if (!!footerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            @switch (footerLayout) {\n                                @case ('full-width') {\n                                    <div class=\"w-100\">\n                                        <div class=\"row\">\n                                            @if (showCancelButton) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n                                                        {{ t('Cancel') }}\n                                                    </upd-button>\n                                                </div>\n                                            }\n\n                                            @for (btn of actionButtons; track btn) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @case ('centered') {\n                                    <div class=\"d-flex justify-content-center w-100\">\n                                        <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                    </div>\n                                }\n                                @default {\n                                    <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                }\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    </div>\n\n    <ng-template #closeBtnTpl>\n        <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n    </ng-template>\n\n    <ng-template #buttonsTpl>\n        @if (showCancelButton) {\n            <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n                {{ t('Cancel') }}\n            </upd-button>\n        }\n\n        @for (btn of actionButtons; track btn) {\n            <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n        }\n    </ng-template>\n</ng-container>\n" }]
+            args: [{ standalone: false, selector: 'upd-modal-container', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Modal'\">\n    <div [ngClass]=\"classes\" #dialog>\n        <div class=\"modal-content\" tabindex=\"-1\" #content>\n            @if (!!contentType) {\n                <ng-container [ngComponentOutlet]=\"contentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\"></ng-container>\n            } @else {\n                @if (!isAlert && (!!titleText || !!headerTemplateRef)) {\n                    <div class=\"modal-header\">\n                        @if (!!headerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"headerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            <h5 class=\"modal-title\">{{ titleText }}</h5>\n                            @if (showCloseButton) {\n                                <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                            }\n                        }\n                    </div>\n                } @else if (showCloseButton) {\n                    <ng-container [ngTemplateOutlet]=\"closeBtnTpl\"></ng-container>\n                }\n\n                <div class=\"modal-body py-4\" [class.text-center]=\"isTextCentered || isAlert\">\n                    @if (isAlert && !!titleText) {\n                        <div class=\"d-flex justify-content-center align-content-start\"\n                            [class.flex-row]=\"titleIconPosition === 'left' || titleIconPosition === 'right'\"\n                            [class.flex-column]=\"titleIconPosition === 'top' || titleIconPosition === 'bottom'\">\n                            @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {\n                                <upd-icon [model]=\"titleIcon\" [class.me-2]=\"titleIconPosition === 'left'\"\n                                    [class.mb-2]=\"titleIconPosition === 'top'\"></upd-icon>\n                            }\n\n                            <span class=\"align-self-center fs-3 fw-bold\" [class.mb-3]=\"!!titleIcon && titleIconPosition === 'top'\">\n                                {{ titleText }}\n                            </span>\n\n                            @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {\n                                <upd-icon [model]=\"titleIcon\" [class.ms-2]=\"titleIconPosition === 'right'\"\n                                    [class.mb-2]=\"titleIconPosition === 'bottom'\"></upd-icon>\n                            }\n                        </div>\n                    }\n\n                    @if (!!bodyTemplateRef) {\n                        <ng-container [ngTemplateOutlet]=\"bodyTemplateRef!\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else if (!!bodyContentType) {\n                        <ng-container [ngComponentOutlet]=\"bodyContentType\" [ngComponentOutletInputs]=\"{modalRef: this, data: data}\">\n                        </ng-container>\n                    } @else {\n                        <div [innerHTML]=\"bodyText\" [class.text-secondary]=\"isAlert\"></div>\n                    }\n                </div>\n\n                @if (!!statusColor) {\n                    <div class=\"modal-status\" [style.position]=\"'relative'\" [ngClass]=\"statusColorClass\"></div>\n                }\n\n                @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {\n                    <div class=\"modal-footer\">\n                        @if (!!footerTemplateRef) {\n                            <ng-container [ngTemplateOutlet]=\"footerTemplateRef\" [ngTemplateOutletContext]=\"{modalRef: this, data: data}\">\n                            </ng-container>\n                        } @else {\n                            @switch (footerLayout) {\n                                @case ('full-width') {\n                                    <div class=\"w-100\">\n                                        <div class=\"row\">\n                                            @if (showCancelButton) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [isNavigationLink]=\"true\" (clicked)=\"close()\">\n                                                        {{ t('Cancel') }}\n                                                    </upd-button>\n                                                </div>\n                                            }\n\n                                            @for (btn of actionButtons; track btn) {\n                                                <div class=\"col\">\n                                                    <upd-button class=\"w-100\" [model]=\"btn\"></upd-button>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                }\n                                @case ('centered') {\n                                    <div class=\"d-flex justify-content-center w-100\">\n                                        <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                    </div>\n                                }\n                                @default {\n                                    <ng-container [ngTemplateOutlet]=\"buttonsTpl\"></ng-container>\n                                }\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    </div>\n\n    <ng-template #closeBtnTpl>\n        <upd-button (clicked)=\"close()\" [shouldIgnoreBtnClass]=\"true\" customClasses=\"btn-close\"></upd-button>\n    </ng-template>\n\n    <ng-template #buttonsTpl>\n        @if (showCancelButton) {\n            <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"close()\">\n                {{ t('Cancel') }}\n            </upd-button>\n        }\n\n        @for (btn of actionButtons; track btn) {\n            <upd-button [model]=\"btn\" (clicked)=\"buttonClick($event, btn)\"></upd-button>\n        }\n    </ng-template>\n</ng-container>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['id']
@@ -237,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: ['class']
             }], role: [{
                 type: HostBinding,
-                args: ['role']
+                args: ['attr.role']
             }], ariaHidden: [{
                 type: HostBinding,
                 args: ['aria-hidden']
@@ -250,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }], styleDisplay: [{
                 type: HostBinding,
                 args: ['style.display']
-            }] } });
+            }], dialog: [{ type: i0.ViewChild, args: ['dialog', { ...{ read: ElementRef }, isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }], bodyContentOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgComponentOutlet), { isSignal: true }] }] } });
 class ModalService {
     constructor() {
@@ -271,10 +272,10 @@ class ModalService {
         overlay.show().subscribe(() => modalContainerRef.instance.show());
         return modalContainerRef.instance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable
         }] });
@@ -365,10 +366,10 @@ class ModalAlertService {
         });
         return modalRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalAlertService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ModalAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalAlertService, decorators: [{
             type: Injectable
         }] });
@@ -459,14 +460,14 @@ class UpdModalModule {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdModalModule, deps: [{ token: i1$1.TranslocoService }, { token: ModalAlertService }, { token: i3$1.MessagesService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdModalModule, declarations: [ModalContainerComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, deps: [{ token: i1$1.TranslocoService }, { token: ModalAlertService }, { token: i3$1.MessagesService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, declarations: [ModalContainerComponent], imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdButtonModule,
             UpdIconsModule,
             UpdMessagesModule,
             TranslocoDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdModalModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, providers: [
             ModalService,
             ModalAlertService
         ], imports: [CommonModule,
@@ -475,7 +476,7 @@ class UpdModalModule {
             UpdIconsModule,
             UpdMessagesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [