@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.81

package/fesm2022/updevs-components-list.mjs

@@ -1,17 +1,22 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, Renderer2, ElementRef, RendererStyleFlags2, Component, ViewEncapsulation, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, inject, Renderer2, ElementRef, RendererStyleFlags2, Output, Input, HostBinding, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@updevs/components/form-controls/checkbox';
+import * as i1$1 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+import * as i3 from '@updevs/components/form-controls/checkbox';
 import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
-import * as i3 from '@updevs/icons';
+import * as i4 from '@updevs/icons';
 import { UpdIconsModule } from '@updevs/icons';
-import * as i1$1 from '@ngneat/transloco';
-import { TranslocoModule } from '@ngneat/transloco';
 
 class ListItemModel {
     get hasLeftBox() {
-        return !!this.leftBoxImage || !!this.leftBoxText || !!this.badgeColor || this.hasCheckbox === true;
+        return !!this.leftBoxImage
+            || !!this.leftBoxText
+            || !!this.badgeColor
+            || this.hasCheckbox === true
+            || !!this.icon
+            || !!this.leftBoxHtml;
     }
     get hasLeftBadge() {
         return !!this.badgeColor && this.badgePosition === 'left';
@@ -40,21 +45,6 @@ class ListComponent {
         this.isHoverable = false;
         this.shouldDisplayItemsCounter = false;
         this.wrapperClasses = '';
-        /**
-         * Translation key used to inform no records have been found.
-         * If translation is not being used, you can insert the custom text here as well.
-         */
-        this.noRecordsFoundKey = 'NoRecordsFound';
-        /**
-         * Translation key used to describe 1 item found.
-         * If translation is not being used, you can insert the custom text here as well.
-         */
-        this.itemFoundKey = 'Item';
-        /**
-         * Translation key used to describe items (plural) found.
-         * If translation is not being used, you can insert the custom text here as well.
-         */
-        this.itemsFoundKey = 'Items';
         this.checkboxChanged = new EventEmitter();
         this.selectedItem = new EventEmitter();
         this.listItems = [];
@@ -69,6 +59,7 @@ class ListComponent {
         this.setupItems();
     }
     ngOnChanges(changes) {
+        this.setupStyle();
         this.updateWrapperClasses();
         if (!!changes['items']) {
             this.setupItems();
@@ -114,12 +105,12 @@ class ListComponent {
             this.localWrapperClasses += ' list-hidden';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ListComponent, selector: "upd-list", inputs: { items: "items", shouldOverflow: "shouldOverflow", isFlush: "isFlush", isVisible: "isVisible", isHoverable: "isHoverable", shouldDisplayItemsCounter: "shouldDisplayItemsCounter", wrapperClasses: "wrapperClasses", maxHeight: "maxHeight", noRecordsFoundKey: "noRecordsFoundKey", itemFoundKey: "itemFoundKey", itemsFoundKey: "itemsFoundKey" }, outputs: { checkboxChanged: "checkboxChanged", selectedItem: "selectedItem" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesOnChanges: true, ngImport: i0, template: "@if (listItems.length > 0) {\n    @for (item of listItems; track 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    }\n} @else {\n    <div class=\"list-group-item\">\n        <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n        {{ noRecordsFoundKey | transloco }}\n    </div>\n}\n\n@if (shouldDisplayItemsCounter) {\n    <div class=\"list-items-counter bg-muted text-muted-fg\">\n        {{ listItems.length }} {{ (listItems.length === 1 ? itemFoundKey : itemsFoundKey) | transloco }}\n    </div>\n}\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\">\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    @if (item.hasCheckbox) {\n        <div class=\"col-auto\">\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        </div>\n    }\n    @if (item.hasLeftBadge) {\n        <div class=\"col-auto\">\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        </div>\n    }\n    @if (!!item.leftBoxImage || !!item.leftBoxText) {\n        <div class=\"col-auto\">\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        </div>\n    }\n</ng-template>\n", 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}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "label", "value", "customClasses", "name", "description", "isDisabled", "isReadOnly", "isChecked", "isInline", "isSwitch", "validationStatus", "invalidStatusText"], outputs: ["changed"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "removeDefaultClasses", "customClasses", "tablerIcon", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+    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 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>\n", 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.0.1", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-list', encapsulation: ViewEncapsulation.None, template: "@if (listItems.length > 0) {\n    @for (item of listItems; track 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    }\n} @else {\n    <div class=\"list-group-item\">\n        <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n        {{ noRecordsFoundKey | transloco }}\n    </div>\n}\n\n@if (shouldDisplayItemsCounter) {\n    <div class=\"list-items-counter bg-muted text-muted-fg\">\n        {{ listItems.length }} {{ (listItems.length === 1 ? itemFoundKey : itemsFoundKey) | transloco }}\n    </div>\n}\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\">\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    @if (item.hasCheckbox) {\n        <div class=\"col-auto\">\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        </div>\n    }\n    @if (item.hasLeftBadge) {\n        <div class=\"col-auto\">\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        </div>\n    }\n    @if (!!item.leftBoxImage || !!item.leftBoxText) {\n        <div class=\"col-auto\">\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        </div>\n    }\n</ng-template>\n", 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}\n"] }]
+            args: [{ selector: 'upd-list', encapsulation: ViewEncapsulation.None, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.List'\">\n    @for (item of listItems; track 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>\n", 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']
@@ -139,68 +130,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                 type: Input
             }], maxHeight: [{
                 type: Input
-            }], noRecordsFoundKey: [{
-                type: Input
-            }], itemFoundKey: [{
-                type: Input
-            }], itemsFoundKey: [{
-                type: Input
             }], checkboxChanged: [{
                 type: Output
             }], selectedItem: [{
                 type: Output
             }] } });
 
-var NoRecordsFound$1 = "No records found.";
-var Item$1 = "item";
-var Items$1 = "items";
+var UpDevs$1 = {
+	List: {
+		NoRecordsFound: "No records found.",
+		Item: "item",
+		Items: "items"
+	}
+};
 var en = {
-	NoRecordsFound: NoRecordsFound$1,
-	Item: Item$1,
-	Items: Items$1
+	UpDevs: UpDevs$1
 };
 
 var en$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Item: Item$1,
-    Items: Items$1,
-    NoRecordsFound: NoRecordsFound$1,
+    UpDevs: UpDevs$1,
     default: en
 });
 
-var NoRecordsFound = "Nenhum registro encontrado.";
-var Item = "item";
-var Items = "itens";
+var UpDevs = {
+	List: {
+		NoRecordsFound: "Nenhum registro encontrado.",
+		Item: "item",
+		Items: "itens"
+	}
+};
 var pt = {
-	NoRecordsFound: NoRecordsFound,
-	Item: Item,
-	Items: Items
+	UpDevs: UpDevs
 };
 
 var pt$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Item: Item,
-    Items: Items,
-    NoRecordsFound: NoRecordsFound,
+    UpDevs: UpDevs,
     default: pt
 });
 
 class UpdListModule {
     constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
         translocoService.setTranslation(en$1, 'en');
         translocoService.setTranslation(pt$1, 'pt');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UpdListModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: UpdListModule, declarations: [ListComponent], imports: [CommonModule,
+    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,
             TranslocoModule,
             UpdCheckboxModule,
             UpdIconsModule], exports: [ListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UpdListModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, imports: [CommonModule,
             TranslocoModule,
             UpdCheckboxModule,
             UpdIconsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: UpdListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -1 +1 @@
-{"version":3,"file":"updevs-components-list.mjs","sources":["../../../../projects/updevs/components/list/src/models/list-item.model.ts","../../../../projects/updevs/components/list/src/list.component.ts","../../../../projects/updevs/components/list/src/list.component.html","../../../../projects/updevs/components/list/src/upd-list.module.ts","../../../../projects/updevs/components/list/src/updevs-components-list.ts"],"sourcesContent":["import { BgColorStyleType } from '@updevs/sdk/layout';\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?: string;\n    isChecked?: boolean;\n    isSwitch?: boolean;\n    hasCheckbox?: boolean;\n    isDisabled?: boolean;\n    isActive?: boolean;\n    leftBoxText?: string;\n    leftBoxImage?: string;\n    badgeColor?: BgColorStyleType;\n    badgeText?: string;\n    badgePosition?: BadgePositionType;\n    children?: ListItemModel[];\n    get hasLeftBox(): boolean {\n        return !!this.leftBoxImage || !!this.leftBoxText || !!this.badgeColor || this.hasCheckbox === true;\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     * Translation key used to inform no records have been found.\n     * If translation is not being used, you can insert the custom text here as well.\n     */\n    @Input() noRecordsFoundKey?: string = 'NoRecordsFound';\n    /**\n     * Translation key used to describe 1 item found.\n     * If translation is not being used, you can insert the custom text here as well.\n     */\n    @Input() itemFoundKey?: string = 'Item';\n    /**\n     * Translation key used to describe items (plural) found.\n     * If translation is not being used, you can insert the custom text here as well.\n     */\n    @Input() itemsFoundKey?: string = 'Items';\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.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    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","@if (listItems.length > 0) {\n    @for (item of listItems; track 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    }\n} @else {\n    <div class=\"list-group-item\">\n        <upd-icon tablerIcon=\"alert-triangle\" wrapperClasses=\"text-yellow\"></upd-icon>\n        {{ noRecordsFoundKey | transloco }}\n    </div>\n}\n\n@if (shouldDisplayItemsCounter) {\n    <div class=\"list-items-counter bg-muted text-muted-fg\">\n        {{ listItems.length }} {{ (listItems.length === 1 ? itemFoundKey : itemsFoundKey) | transloco }}\n    </div>\n}\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\">\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    @if (item.hasCheckbox) {\n        <div class=\"col-auto\">\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        </div>\n    }\n    @if (item.hasLeftBadge) {\n        <div class=\"col-auto\">\n            <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n        </div>\n    }\n    @if (!!item.leftBoxImage || !!item.leftBoxText) {\n        <div class=\"col-auto\">\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        </div>\n    }\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoService, TranslocoModule } from '@ngneat/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.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":["i4","en","pt","i1"],"mappings":"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"}
+{"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    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 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>\n","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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"}