npm - @updevs/components - Versions diffs - 1.0.0-alpha.6 → 1.0.0-alpha.61 - Mend

@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.61

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

package/fesm2022/updevs-components-drag-and-drop.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"updevs-components-drag-and-drop.mjs","sources":["../../../../libs/components/drag-and-drop/src/models/drag-and-drop-item.model.ts","../../../../libs/components/drag-and-drop/src/models/drag-and-drop-column.model.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.ts","../../../../libs/components/drag-and-drop/src/drag-and-drop.component.html","../../../../libs/components/drag-and-drop/src/upd-drag-and-drop.module.ts","../../../../libs/components/drag-and-drop/src/updevs-components-drag-and-drop.ts"],"sourcesContent":["import { signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropItem } from './drag-and-drop-item';\n\nexport class DragAndDropItemModel implements DragAndDropItem {\n name!: string;\n text!: TextModel;\n isDisabled = false;\n canDrag = true;\n canBeEmpty = true; // TODO: implement\n isBeingDragged = signal(false);\n origin?: string;\n get isDraggable(): boolean {\n return this.canDrag && !this.isDisabled;\n }\n\n constructor(init: DragAndDropItem) {\n Object.assign(this, init);\n }\n}\n","import { WritableSignal, signal } from '@angular/core';\nimport { TextModel } from '@updevs/sdk';\n\nimport { DragAndDropColumnConfig } from './drag-and-drop-column.config';\nimport { DragAndDropItemModel } from './drag-and-drop-item.model';\n\nexport class DragAndDropColumnModel {\n name!: string;\n title?: TextModel;\n items!: WritableSignal<DragAndDropItemModel[]>;\n\n constructor(init: DragAndDropColumnConfig) {\n Object.assign(this, init);\n this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));\n }\n}\n","import { Component, input, inject, computed, signal, model, OnInit } from '@angular/core';\nimport { TextService } from '@updevs/sdk';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { DragAndDropItemModel } from './models/drag-and-drop-item.model';\nimport { DragAndDropColumnModel } from './models/drag-and-drop-column.model';\nimport { DragAndDropConfig } from './models/drag-and-drop.config';\n\n@Component({\n selector: 'upd-drag-and-drop',\n templateUrl: './drag-and-drop.component.html',\n styleUrl: './drag-and-drop.component.scss'\n})\nexport class DragAndDropComponent implements OnInit {\n config = input.required<DragAndDropConfig>();\n columns = model<DragAndDropColumnModel[]>([]);\n\n readonly showHandler = computed(() => this.config().showHandler || false);\n readonly canReorder = computed(() => this.config().canReorder || false);\n readonly textService = inject(TextService);\n\n private readonly isReordering = signal(false);\n private readonly draggedItem = signal<OptionalType<DragAndDropItemModel>>(undefined);\n private dragEnterCounter = 0;\n\n ngOnInit(): void {\n this.columns.set(this.config().columns.map(c => new DragAndDropColumnModel(c)));\n }\n\n canShowHandler(item: DragAndDropItemModel): boolean {\n return this.showHandler() && item.isDraggable;\n }\n\n startDrag(event: DragEvent, item: DragAndDropItemModel, origin: string): void {\n item.origin = origin;\n\n this.draggedItem.set(item);\n item.isBeingDragged.set(true);\n\n event.dataTransfer!.effectAllowed = 'move';\n }\n\n endDrag(item: DragAndDropItemModel): void {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n }\n\n drop(event: DragEvent, destination: string): void {\n event.preventDefault();\n\n this.dragEnterCounter = 0;\n const dataTransfer = event.dataTransfer!;\n dataTransfer.dropEffect = 'move';\n const itemName = this.draggedItem()?.name;\n const origin = this.draggedItem()?.origin;\n const item = this.columns().find(c => c.name === origin)?.items().find(i => i.name === itemName);\n\n if (!!item && (this.canReorder() || destination !== origin)) {\n const destinationColumn = this.columns().find(c => c.name === destination);\n const originColumn = this.columns().find(c => c.name === origin)!;\n\n if (!!destinationColumn) {\n item.isBeingDragged.set(false);\n this.draggedItem.set(undefined);\n\n // We only move items if it's a move between containers, if it's a reorder, nothing needs to be done.\n // The item was correctly replaced during dragOver.\n if (destination !== origin) {\n const originIdx = originColumn.items().findIndex(i => i.name === itemName);\n const destinationIdx = destinationColumn.items().findIndex(i => i.name === itemName);\n\n originColumn.items().splice(originIdx, 1);\n\n // This is required, because the item may have been added during dragOver. TODO: check\n if (destinationIdx >= 0) {\n dataTransfer.clearData();\n return;\n }\n\n destinationColumn.items().push(item);\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n dataTransfer.clearData();\n }\n }\n }\n\n dragOver(event: DragEvent, destination: string): void {\n event.preventDefault();\n const destinationColumn = this.columns().find(c => c.name === destination)!;\n\n if (this.isReordering() || destinationColumn.items().length === 0) {\n return;\n }\n\n event.dataTransfer!.dropEffect = 'move';\n\n this.isReordering.set(true);\n const element = event.target as HTMLElement;\n\n if (!!element.id && !!this.draggedItem() && element.id !== this.draggedItem()!.name) {\n const destinationHoverIdx = destinationColumn.items().findIndex(i => i.name === element.id);\n const rect = element.getBoundingClientRect();\n const y = event.clientY - rect.top;\n const newOverZone = y <= rect.height / 2 ? 'top' : 'bottom';\n\n destinationColumn.items.update(curr => {\n const originalArray = [...curr];\n\n if (destinationHoverIdx >= 0) {\n if (destinationHoverIdx === 0 && newOverZone === 'top') {\n originalArray.unshift(this.draggedItem()!);\n } else if (destinationHoverIdx === curr.length - 1 && newOverZone === 'bottom') {\n originalArray.push(this.draggedItem()!);\n } else {\n const originalItem = curr[destinationHoverIdx];\n originalArray.splice(destinationHoverIdx, 1);\n originalArray.splice(destinationHoverIdx + (newOverZone === 'top' ? -1 : 1), 0, originalItem);\n }\n } else if (!!this.draggedItem()) {\n originalArray.push(this.draggedItem()!);\n }\n\n return originalArray;\n });\n\n const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);\n\n this.columns.update(curr => {\n curr[destinationColumnIdx] = destinationColumn;\n return [...curr];\n });\n }\n\n this.isReordering.set(false);\n }\n\n dragEnter(): void {\n this.dragEnterCounter++;\n }\n\n dragLeave(columnName: string): void {\n this.dragEnterCounter--;\n\n if (this.dragEnterCounter === 0 && !!this.draggedItem()?.origin && this.draggedItem()?.origin !== columnName) {\n const column = this.columns().find(c => c.name === columnName)!;\n const idx = column.items().findIndex(i => i.name === this.draggedItem()?.name);\n\n if (idx >= 0) {\n column.items.update(curr => {\n curr.splice(idx, 1);\n return [...curr];\n });\n }\n }\n }\n}\n","<div class=\"d-flex w-100\">\n @for (col of columns(); track col.name) {\n <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n @if (!!col.title) {\n <div class=\"mb-2\">\n <h1>{{ textService.getText(col.title) }}</h1>\n </div>\n }\n @for (item of col.items(); track item.name) {\n <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n @if (canShowHandler(item)) {\n <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n }\n <div class=\"flex-grow-1 align-content-center\">\n <span>{{ textService.getText(item.text) }}</span>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport { DragAndDropComponent } from './drag-and-drop.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule\n ],\n declarations: [\n DragAndDropComponent\n ],\n exports: [\n DragAndDropComponent\n ]\n})\nexport class UpdDragAndDropModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, NgZone, ElementRef, Renderer2, RendererStyleFlags2, Component, ViewEncapsulation, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, input, inject, NgZone, ElementRef, Renderer2, Injector, RendererStyleFlags2, afterNextRender, Output, Input, HostBinding, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { BaseComponent, PositioningService, DomEventsService } from '@updevs/sdk/layout';
+import { TextService } from '@updevs/sdk';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@updevs/icons';
@@ -22,6 +23,18 @@ class DropdownComponent extends BaseComponent {
     get isOpen() {
         return this._isOpen;
     }
+    get overflowClass() {
+        switch (this.textOverflowStrategy()) {
+            case 'no-wrap':
+                return 'text-nowrap';
+            case 'wrap':
+                return 'text-wrap';
+            case 'word-break':
+                return 'text-break';
+            default:
+                return 'text-truncate';
+        }
+    }
     constructor() {
         super();
         this.localWrapperClasses = '';
@@ -35,6 +48,8 @@ class DropdownComponent extends BaseComponent {
         this.isOpenChange = new EventEmitter();
         this.selectedItem = new EventEmitter();
         this.checkboxChanged = new EventEmitter();
+        this.textOverflowStrategy = input('wrap');
+        this.textService = inject(TextService);
         this.baseWrapperClasses = 'dropdown-menu';
         this._isOpen = false;
         this.ngZone = inject(NgZone);
@@ -42,12 +57,13 @@ class DropdownComponent extends BaseComponent {
         this.renderer = inject(Renderer2);
         this.positioningService = inject(PositioningService);
         this.domEventsService = inject(DomEventsService);
+        this.injector = inject(Injector);
         this.dropdownElement = this.elementRef.nativeElement;
     }
     ngOnInit() {
         this.updateStyle();
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.updateStyle();
     }
     onSelect(item) {
@@ -57,21 +73,50 @@ class DropdownComponent extends BaseComponent {
         item.isChecked = isChecked;
         this.checkboxChanged.emit(item);
     }
+    adaptAction(btn, item) {
+        const defaultFunction = btn.clickFunction;
+        btn.clickFunction = (evt) => {
+            evt.event?.preventDefault();
+            evt.event?.stopPropagation();
+            if (!!defaultFunction) {
+                defaultFunction({ event: evt.event, data: { item, button: btn } });
+            }
+        };
+        return btn;
+    }
+    trackByItemId(index, item) {
+        return item.id ?? index;
+    }
+    getButtonClasses(item) {
+        const classes = ['dropdown-item'];
+        if (item.isDisabled) {
+            classes.push('disabled');
+        }
+        if (item.isActive) {
+            classes.push('active');
+        }
+        return classes.join(' ');
+    }
     closeOnOutsideClick() {
-        const excludedElements = [];
+        if (!!this.dropdownOutsideClickSub) {
+            this.dropdownOutsideClickSub.unsubscribe();
+        }
+        const excludedElements = [this.dropdownElement];
         if (!!this.dropdownReference) {
             excludedElements.push(this.dropdownReference.nativeElement);
         }
-        const outsideClickSub = this.domEventsService.startOutsideClickListener(() => this.ngZone.run(() => {
+        this.dropdownOutsideClickSub = this.domEventsService.startOutsideClickListener(() => this.ngZone.run(() => {
             this.updateOpenState(false);
-            this.ngZone.run(() => this.updateWrapperClasses());
+            this.updateWrapperClasses();
         }), this.dropdownElement, true, ...excludedElements);
-        this.addSubscriptions(outsideClickSub);
+        this.addSubscriptions(this.dropdownOutsideClickSub);
     }
     updateStyle() {
         this.updateWrapperClasses();
         this.updateMaxHeight();
-        this.startPositionUpdate();
+        if (this.isOpen) {
+            this.startPositionUpdate();
+        }
     }
     updateWrapperClasses() {
         this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;
@@ -96,28 +141,36 @@ class DropdownComponent extends BaseComponent {
         if (!this.dropdownReference) {
             return;
         }
-        this.ngZone.runOutsideAngular(() => this.positioningService
-            .computePosition(this.dropdownReference, this.elementRef, { placement: this.dropdownReferencePosition })
-            .subscribe(resp => this.updatePosition(resp)));
+        afterNextRender(() => {
+            this.ngZone.runOutsideAngular(() => this.positioningService
+                .computePosition(this.dropdownReference, this.elementRef, { placement: this.dropdownReferencePosition }, undefined, undefined, true)
+                .subscribe(resp => this.updatePosition(resp)));
+        }, { injector: this.injector });
     }
     updatePosition(result) {
         const reference = this.dropdownReference.nativeElement.getBoundingClientRect();
         const ddElement = this.dropdownElement;
+        const width = Math.abs(reference.width);
+        let widthOffset = 0;
         if (!!this.maxWidth) {
             this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
         }
+        if (!!this.minWidth) {
+            this.renderer.setStyle(ddElement, 'min-width', `${this.minWidth}px`, RendererStyleFlags2.Important);
+            widthOffset = (this.minWidth > width ? this.minWidth - width : 0) / 2; // TODO: check logic
+        }
         this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'width', `${Math.abs(reference.width)}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'left', `${result.x}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'width', `${width}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);
         this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: DropdownComponent, selector: "upd-dropdown", inputs: { items: "items", header: "header", isOpen: "isOpen", shouldCloseOnOutsideClick: "shouldCloseOnOutsideClick", arrowType: "arrowType", wrapperClasses: "wrapperClasses", elementsExcludedFromOutsideClick: "elementsExcludedFromOutsideClick", maxHeight: "maxHeight", maxWidth: "maxWidth", dropdownReference: "dropdownReference", dropdownReferencePosition: "dropdownReferencePosition" }, outputs: { isOpenChange: "isOpenChange", selectedItem: "selectedItem", checkboxChanged: "checkboxChanged" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h6 *ngIf=\"!!header\" class=\"dropdown-header\">{{header}}</h6>\n\n<ng-container *ngFor=\"let item of items\">\n    <ng-container [ngSwitch]=\"item.type\">\n        <ng-container *ngSwitchCase=\"'divider'\">\n            <div class=\"dropdown-divider\"></div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'default'\">\n            <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                <upd-icon *ngIf=\"!!item.icon\" [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                <ng-container *ngIf=\"!!item.leftBoxText || !!item.leftBoxImage\">\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{item.leftBoxText}}</span>\n                </ng-container>\n                {{item.text}}\n                <span *ngIf=\"!!item.badgeColor\" class=\"badge bg-{{item.badgeColor}} ms-auto\">{{item.badgeText}}</span>\n            </upd-button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-radio>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-checkbox>\n        </ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "removeDefaultClasses", "customClasses", "tablerIcon", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "label", "value", "customClasses", "name", "description", "isDisabled", "isReadOnly", "isChecked", "isInline", "validationStatus", "invalidStatusText"], outputs: ["selected"] }, { kind: "component", type: i4.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "label", "value", "customClasses", "name", "description", "isDisabled", "isReadOnly", "isChecked", "isInline", "isSwitch", "validationStatus", "invalidStatusText"], outputs: ["changed"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["text", "model", "colorStyle", "brandColorStyle", "customClasses", "isActive", "isDisabled", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "shouldIgnoreBtnClass"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DropdownComponent, selector: "upd-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: false, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: false, isRequired: false, transformFunction: null }, elementsExcludedFromOutsideClick: { classPropertyName: "elementsExcludedFromOutsideClick", publicName: "elementsExcludedFromOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, dropdownReference: { classPropertyName: "dropdownReference", publicName: "dropdownReference", isSignal: false, isRequired: false, transformFunction: null }, dropdownReferencePosition: { classPropertyName: "dropdownReferencePosition", publicName: "dropdownReferencePosition", isSignal: false, isRequired: false, transformFunction: null }, textOverflowStrategy: { classPropertyName: "textOverflowStrategy", publicName: "textOverflowStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedItem: "selectedItem", checkboxChanged: "checkboxChanged" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline"], outputs: ["selected"] }, { kind: "component", type: i4.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i5.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"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-dropdown', encapsulation: ViewEncapsulation.None, template: "<h6 *ngIf=\"!!header\" class=\"dropdown-header\">{{header}}</h6>\n\n<ng-container *ngFor=\"let item of items\">\n    <ng-container [ngSwitch]=\"item.type\">\n        <ng-container *ngSwitchCase=\"'divider'\">\n            <div class=\"dropdown-divider\"></div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'default'\">\n            <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                <upd-icon *ngIf=\"!!item.icon\" [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                <ng-container *ngIf=\"!!item.leftBoxText || !!item.leftBoxImage\">\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{item.leftBoxText}}</span>\n                </ng-container>\n                {{item.text}}\n                <span *ngIf=\"!!item.badgeColor\" class=\"badge bg-{{item.badgeColor}} ms-auto\">{{item.badgeText}}</span>\n            </upd-button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-radio>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-checkbox>\n        </ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { localWrapperClasses: [{
+            args: [{ selector: 'upd-dropdown', encapsulation: ViewEncapsulation.None, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"getButtonClasses(item)\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { localWrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], items: [{
@@ -134,8 +187,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
                 type: Input
             }], elementsExcludedFromOutsideClick: [{
                 type: Input
+            }], minHeight: [{
+                type: Input
             }], maxHeight: [{
                 type: Input
+            }], minWidth: [{
+                type: Input
             }], maxWidth: [{
                 type: Input
             }], dropdownReference: [{
@@ -151,19 +208,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
             }] } });
 class UpdDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: UpdDropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
             UpdIconsModule,
             UpdRadioModule,
             UpdCheckboxModule,
             UpdButtonModule], exports: [DropdownComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdDropdownModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, imports: [CommonModule,
             UpdIconsModule,
             UpdRadioModule,
             UpdCheckboxModule,
             UpdButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdDropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-dropdown.mjs","sources":["../../../../projects/updevs/components/dropdown/src/dropdown.component.ts","../../../../projects/updevs/components/dropdown/src/dropdown.component.html","../../../../projects/updevs/components/dropdown/src/upd-dropdown.module.ts","../../../../projects/updevs/components/dropdown/src/updevs-components-dropdown.ts"],"sourcesContent":["import {\n Component,\n HostBinding,\n ViewEncapsulation,\n Input,\n OnInit,\n OnChanges,\n SimpleChanges,\n Output,\n EventEmitter,\n NgZone,\n ElementRef,\n Renderer2,\n RendererStyleFlags2,\n inject\n} from '@angular/core';\nimport { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';\nimport { TopBottomLeftRightType } from '@updevs/sdk/types';\n\nimport { DropdownItem } from './models/dropdown-item';\n\n@Component({\n selector: 'upd-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class DropdownComponent extends BaseComponent implements OnInit, OnChanges {\n @HostBinding('class') localWrapperClasses = '';\n\n @Input() items: DropdownItem[] = [];\n @Input() header?: string;\n @Input()\n set isOpen(value: boolean) {\n this.updateOpenState(value);\n\n if (this.shouldCloseOnOutsideClick) {\n this.closeOnOutsideClick();\n }\n }\n @Input() shouldCloseOnOutsideClick = false;\n @Input() arrowType?: 'left' \| 'right';\n @Input() wrapperClasses = '';\n /*\n Elements that won't trigger the close of the dropdown if clicked upon.\n * Only works when `shouldCloseOnOutsideClick` is set to true.\n /\n @Input() elementsExcludedFromOutsideClick?: HTMLElement[];\n /\n Maximum height of the component.\n * If set, scroll bars will be used when the content's size is bigger than the component's.\n /\n @Input() maxHeight?: number;\n /\n Maximum width of the component.\n * If set, scroll bars will be used when the content's size is bigger than the component's.\n /\n @Input() maxWidth?: number;\n /\n If set, the position of the dropdown will be set according to this element.\n /\n @Input() dropdownReference?: ElementRef;\n /\n If a reference is provided, this will be the position of the dropdown in relation to that reference.\n /\n @Input() dropdownReferencePosition: TopBottomLeftRightType = 'bottom';\n\n @Output() readonly isOpenChange = new EventEmitter<boolean>();\n @Output() readonly selectedItem = new EventEmitter<DropdownItem>();\n @Output() readonly checkboxChanged = new EventEmitter<DropdownItem>();\n\n get isOpen(): boolean {\n return this._isOpen;\n }\n\n private baseWrapperClasses = 'dropdown-menu';\n private _isOpen = false;\n private readonly dropdownElement: HTMLElement;\n private readonly ngZone = inject(NgZone);\n private readonly elementRef = inject(ElementRef);\n private readonly renderer = inject(Renderer2);\n private readonly positioningService = inject(PositioningService);\n private readonly domEventsService = inject(DomEventsService);\n\n constructor() {\n super();\n this.dropdownElement = this.elementRef.nativeElement;\n }\n\n ngOnInit(): void {\n this.updateStyle();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n this.updateStyle();\n }\n\n onSelect(item: DropdownItem): void {\n this.selectedItem.emit(item);\n }\n\n onCheckboxChange(item: DropdownItem, isChecked: boolean): void {\n item.isChecked = isChecked;\n this.checkboxChanged.emit(item);\n }\n\n private closeOnOutsideClick(): void {\n const excludedElements = [];\n\n if (!!this.dropdownReference) {\n excludedElements.push(this.dropdownReference.nativeElement);\n }\n\n const outsideClickSub = this.domEventsService.startOutsideClickListener(\n () => this.ngZone.run(() => {\n this.updateOpenState(false);\n this.ngZone.run(() => this.updateWrapperClasses());\n }),\n this.dropdownElement,\n true,\n ...excludedElements\n );\n this.addSubscriptions(outsideClickSub);\n }\n\n private updateStyle(): void {\n this.updateWrapperClasses();\n this.updateMaxHeight();\n this.startPositionUpdate();\n }\n\n private updateWrapperClasses(): void {\n this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;\n\n if (this.isOpen) {\n this.localWrapperClasses += ' dropdown-show';\n }\n\n if (!!this.arrowType) {\n this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');\n }\n\n if (!!this.maxHeight) {\n this.localWrapperClasses += ' dropdown-overflow';\n }\n }\n\n private updateOpenState(isOpen: boolean): void {\n this._isOpen = isOpen;\n this.isOpenChange.emit(isOpen);\n }\n\n private updateMaxHeight(): void {\n this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);\n }\n\n private startPositionUpdate(): void {\n if (!this.dropdownReference) {\n return;\n }\n\n this.ngZone.runOutsideAngular(() =>\n this.positioningService\n .computePosition(this.dropdownReference!, this.elementRef, { placement: this.dropdownReferencePosition })\n .subscribe(resp => this.updatePosition(resp))\n );\n }\n\n private updatePosition(result: ComputePositionResult): void {\n const reference = this.dropdownReference!.nativeElement.getBoundingClientRect();\n const ddElement = this.dropdownElement;\n\n if (!!this.maxWidth) {\n this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);\n }\n\n this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'width', `${Math.abs(reference.width)}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'left', `${result.x}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);\n }\n}\n","<h6 ngIf=\"!!header\" class=\"dropdown-header\">{{header}}</h6>\n\n<ng-container ngFor=\"let item of items\">\n <ng-container [ngSwitch]=\"item.type\">\n <ng-container ngSwitchCase=\"'divider'\">\n <div class=\"dropdown-divider\"></div>\n </ng-container>\n <ng-container ngSwitchCase=\"'default'\">\n <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"\n [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n <upd-icon ngIf=\"!!item.icon\" [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n <ng-container ngIf=\"!!item.leftBoxText \|\| !!item.leftBoxImage\">\n <span style=\"background-image: url({{item.leftBoxImage}})\"\n class=\"avatar avatar-xs rounded me-2\">{{item.leftBoxText}}</span>\n </ng-container>\n {{item.text}}\n <span ngIf=\"!!item.badgeColor\" class=\"badge bg-{{item.badgeColor}} ms-auto\">{{item.badgeText}}</span>\n </upd-button>\n </ng-container>\n <ng-container ngSwitchCase=\"'radio'\">\n <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked \|\| false\"\n [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-radio>\n </ng-container>\n <ng-container ngSwitchCase=\"'checkbox'\">\n <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked \|\| false\"\n [isSwitch]=\"item.isSwitch \|\| false\"\n [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')\"></upd-checkbox>\n </ng-container>\n </ng-container>\n</ng-container>\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdRadioModule } from '@updevs/components/form-controls/radio';\nimport { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';\n\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule,\n UpdRadioModule,\n UpdCheckboxModule,\n UpdButtonModule\n ],\n declarations: [\n DropdownComponent\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class UpdDropdownModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"updevs-components-dropdown.mjs","sources":["../../../../libs/components/dropdown/src/dropdown.component.ts","../../../../libs/components/dropdown/src/dropdown.component.html","../../../../libs/components/dropdown/src/upd-dropdown.module.ts","../../../../libs/components/dropdown/src/updevs-components-dropdown.ts"],"sourcesContent":["import {\n Component,\n HostBinding,\n ViewEncapsulation,\n Input,\n OnInit,\n OnChanges,\n Output,\n EventEmitter,\n NgZone,\n ElementRef,\n Renderer2,\n RendererStyleFlags2,\n inject, input,\n Injector,\n afterNextRender\n} from '@angular/core';\nimport { BaseComponent, PositioningService, ComputePositionResult, DomEventsService, ButtonModel } from '@updevs/sdk/layout';\nimport { TopBottomLeftRightType, LeftRightType, OverflowStrategyType } from '@updevs/sdk/types';\nimport { TextService } from '@updevs/sdk';\nimport { Subscription } from 'rxjs';\n\nimport { DropdownItem } from './models/dropdown-item';\nimport { DropdownActionClickedModel } from './models/dropdown-action-clicked.model';\n\n@Component({\n selector: 'upd-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class DropdownComponent extends BaseComponent implements OnInit, OnChanges {\n @HostBinding('class') localWrapperClasses = '';\n\n @Input() items: DropdownItem[] = [];\n @Input() header?: string;\n\n @Input()\n set isOpen(value: boolean) {\n this.updateOpenState(value);\n\n if (this.shouldCloseOnOutsideClick) {\n this.closeOnOutsideClick();\n }\n }\n\n @Input() shouldCloseOnOutsideClick = false;\n @Input() arrowType?: LeftRightType;\n @Input() wrapperClasses = '';\n /*\n Elements that won't trigger the close of the dropdown if clicked upon.\n * Only works when `shouldCloseOnOutsideClick` is set to true.\n /\n @Input() elementsExcludedFromOutsideClick?: HTMLElement[];\n /\n Minimum height of the component.\n /\n @Input() minHeight?: number;\n /\n Maximum height of the component.\n * If set, scroll bars will be used when the content's size is bigger than the component's.\n /\n @Input() maxHeight?: number;\n /\n Minimum width of the component.\n /\n @Input() minWidth?: number;\n /\n Maximum width of the component.\n * If set, scroll bars will be used when the content's size is bigger than the component's.\n /\n @Input() maxWidth?: number;\n /\n If set, the position of the dropdown will be set according to this element.\n /\n @Input() dropdownReference?: ElementRef;\n /\n If a reference is provided, this will be the position of the dropdown in relation to that reference.\n /\n @Input() dropdownReferencePosition: TopBottomLeftRightType = 'bottom';\n\n @Output() readonly isOpenChange = new EventEmitter<boolean>();\n @Output() readonly selectedItem = new EventEmitter<DropdownItem>();\n @Output() readonly checkboxChanged = new EventEmitter<DropdownItem>();\n\n textOverflowStrategy = input<OverflowStrategyType>('wrap');\n\n readonly textService = inject(TextService);\n\n get isOpen(): boolean {\n return this._isOpen;\n }\n\n get overflowClass(): string {\n switch (this.textOverflowStrategy()) {\n case 'no-wrap':\n return 'text-nowrap';\n case 'wrap':\n return 'text-wrap';\n case 'word-break':\n return 'text-break';\n default:\n return 'text-truncate';\n }\n }\n\n private baseWrapperClasses = 'dropdown-menu';\n private _isOpen = false;\n private dropdownOutsideClickSub?: Subscription;\n private readonly dropdownElement: HTMLElement;\n private readonly ngZone = inject(NgZone);\n private readonly elementRef = inject(ElementRef);\n private readonly renderer = inject(Renderer2);\n private readonly positioningService = inject(PositioningService);\n private readonly domEventsService = inject(DomEventsService);\n private readonly injector = inject(Injector);\n\n constructor() {\n super();\n this.dropdownElement = this.elementRef.nativeElement;\n }\n\n ngOnInit(): void {\n this.updateStyle();\n }\n\n ngOnChanges(): void {\n this.updateStyle();\n }\n\n onSelect(item: DropdownItem): void {\n this.selectedItem.emit(item);\n }\n\n onCheckboxChange(item: DropdownItem, isChecked: boolean): void {\n item.isChecked = isChecked;\n this.checkboxChanged.emit(item);\n }\n\n adaptAction(btn: ButtonModel, item: DropdownItem): ButtonModel {\n const defaultFunction = btn.clickFunction;\n btn.clickFunction = (evt) => {\n evt.event?.preventDefault();\n evt.event?.stopPropagation();\n\n if (!!defaultFunction) {\n defaultFunction({ event: evt.event, data: { item, button: btn } as DropdownActionClickedModel });\n }\n };\n\n return btn;\n }\n\n trackByItemId(index: number, item: DropdownItem): any {\n return item.id ?? index;\n }\n\n getButtonClasses(item: DropdownItem): string {\n const classes = ['dropdown-item'];\n\n if (item.isDisabled) {\n classes.push('disabled');\n }\n\n if (item.isActive) {\n classes.push('active');\n }\n\n return classes.join(' ');\n }\n\n private closeOnOutsideClick(): void {\n if (!!this.dropdownOutsideClickSub) {\n this.dropdownOutsideClickSub.unsubscribe();\n }\n\n const excludedElements = [this.dropdownElement];\n\n if (!!this.dropdownReference) {\n excludedElements.push(this.dropdownReference.nativeElement);\n }\n\n this.dropdownOutsideClickSub = this.domEventsService.startOutsideClickListener(\n () => this.ngZone.run(() => {\n this.updateOpenState(false);\n this.updateWrapperClasses();\n }),\n this.dropdownElement,\n true,\n ...excludedElements\n );\n this.addSubscriptions(this.dropdownOutsideClickSub);\n }\n\n private updateStyle(): void {\n this.updateWrapperClasses();\n this.updateMaxHeight();\n\n if (this.isOpen) {\n this.startPositionUpdate();\n }\n }\n\n private updateWrapperClasses(): void {\n this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;\n\n if (this.isOpen) {\n this.localWrapperClasses += ' dropdown-show';\n }\n\n if (!!this.arrowType) {\n this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');\n }\n\n if (!!this.maxHeight) {\n this.localWrapperClasses += ' dropdown-overflow';\n }\n }\n\n private updateOpenState(isOpen: boolean): void {\n this._isOpen = isOpen;\n this.isOpenChange.emit(isOpen);\n }\n\n private updateMaxHeight(): void {\n this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);\n }\n\n private startPositionUpdate(): void {\n if (!this.dropdownReference) {\n return;\n }\n\n afterNextRender(() => {\n this.ngZone.runOutsideAngular(() =>\n this.positioningService\n .computePosition(\n this.dropdownReference!,\n this.elementRef,\n { placement: this.dropdownReferencePosition },\n undefined,\n undefined,\n true\n )\n .subscribe(resp => this.updatePosition(resp))\n );\n }, { injector: this.injector });\n }\n\n private updatePosition(result: ComputePositionResult): void {\n const reference = this.dropdownReference!.nativeElement.getBoundingClientRect();\n const ddElement = this.dropdownElement;\n const width = Math.abs(reference.width);\n let widthOffset = 0;\n\n if (!!this.maxWidth) {\n this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);\n }\n\n if (!!this.minWidth) {\n this.renderer.setStyle(ddElement, 'min-width', `${this.minWidth}px`, RendererStyleFlags2.Important);\n widthOffset = (this.minWidth > width ? this.minWidth - width : 0) / 2; // TODO: check logic\n }\n\n this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'width', `${width}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);\n }\n}\n","@if (!!header) {\n <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track trackByItemId($index, item)) {\n @switch (item.type) {\n @case ('divider') {\n <div class=\"dropdown-divider\"></div>\n }\n @case ('default') {\n <upd-button [customClasses]=\"getButtonClasses(item)\"\n [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n @if (!!item.icon) {\n <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n }\n\n @if (!!item.leftBoxText \|\| !!item.leftBoxImage) {\n <span style=\"background-image: url({{item.leftBoxImage}})\"\n class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n }\n\n {{ textService.getText(item.text) }}\n\n @if (!!item.badgeColor) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n }\n </upd-button>\n }\n @case ('radio') {\n <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked \|\| false\"\n [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n }\n @case ('checkbox') {\n <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked \|\| false\"\n [isSwitch]=\"item.isSwitch \|\| false\"\n [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n }\n @case ('with-toolbar') {\n <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n @if (!!item.icon) {\n <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n }\n\n @if (!!item.leftBoxText \|\| !!item.leftBoxImage) {\n <span style=\"background-image: url({{item.leftBoxImage}})\"\n class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n }\n\n <span [ngClass]=\"overflowClass\">\n {{ textService.getText(item.text) }}\n </span>\n\n @if ((item.actionButtons?.length \|\| 0) > 0) {\n <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n [class.gap-1]=\"item.toolbarType === 'spaced'\">\n @for (btn of item.actionButtons; track btn) {\n <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n }\n </div>\n }\n\n @if (!!item.badgeColor) {\n <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n }\n </div>\n }\n }\n}\n\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdRadioModule } from '@updevs/components/form-controls/radio';\nimport { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';\n\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdIconsModule,\n UpdRadioModule,\n UpdCheckboxModule,\n UpdButtonModule\n ],\n declarations: [\n DropdownComponent\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class UpdDropdownModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-form-controls-abstractions.mjs ADDED Viewed

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { input, inject, Directive } from '@angular/core';
+import { TextService } from '@updevs/sdk';
+import { Tools } from '@updevs/sdk/core';
+import { BaseComponent } from '@updevs/sdk/layout';
+class BaseControl extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.name = input(Tools.Guid.generate());
+        this.placeholder = input();
+        this.label = input();
+        this.description = input();
+        this.validationStatusDescriptions = input([]);
+        this.labelColSize = input();
+        this.showValidStatus = input(false);
+        this.isRequired = input(false);
+        this.isDisabled = input(false);
+        this.hint = input();
+        this.hintTemplate = input();
+        this.hintAsTooltip = input(false);
+        this.validationStatus = input();
+        this._textService = inject(TextService);
+    }
+    get placeholderText() {
+        return this._textService.getText(this.placeholder());
+    }
+    get labelText() {
+        return this._textService.getText(this.label());
+    }
+    get descriptionText() {
+        return this._textService.getText(this.description());
+    }
+    get validationStatusTexts() {
+        return this.validationStatusDescriptions().map(desc => this._textService.getText(desc));
+    }
+    get hintText() {
+        return this._textService.getText(this.hint());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseControl, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.0", type: BaseControl, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, validationStatusDescriptions: { classPropertyName: "validationStatusDescriptions", publicName: "validationStatusDescriptions", isSignal: true, isRequired: false, transformFunction: null }, labelColSize: { classPropertyName: "labelColSize", publicName: "labelColSize", isSignal: true, isRequired: false, transformFunction: null }, showValidStatus: { classPropertyName: "showValidStatus", publicName: "showValidStatus", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintAsTooltip: { classPropertyName: "hintAsTooltip", publicName: "hintAsTooltip", isSignal: true, isRequired: false, transformFunction: null }, validationStatus: { classPropertyName: "validationStatus", publicName: "validationStatus", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseControl, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { BaseControl };
+//# sourceMappingURL=updevs-components-form-controls-abstractions.mjs.map

package/fesm2022/updevs-components-form-controls-abstractions.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"updevs-components-form-controls-abstractions.mjs","sources":["../../../../libs/components/form-controls/abstractions/src/base-control.ts","../../../../libs/components/form-controls/abstractions/src/updevs-components-form-controls-abstractions.ts"],"sourcesContent":["import { Directive, inject, TemplateRef, input } from '@angular/core';\nimport { TextModel, TextService } from '@updevs/sdk';\nimport { Tools } from '@updevs/sdk/core';\nimport { BaseComponent } from '@updevs/sdk/layout';\nimport { RowColumnSize, ValidationStatusType } from '@updevs/components';\n\n@Directive({})\nexport abstract class BaseControl extends BaseComponent {\n readonly name = input<string>(Tools.Guid.generate());\n readonly placeholder = input<TextModel>();\n readonly label = input<TextModel>();\n readonly description = input<TextModel>();\n readonly validationStatusDescriptions = input<TextModel[]>([]);\n readonly labelColSize = input<RowColumnSize>();\n readonly showValidStatus = input(false);\n readonly isRequired = input(false);\n readonly isDisabled = input(false);\n readonly hint = input<TextModel>();\n readonly hintTemplate = input<TemplateRef<any>>();\n readonly hintAsTooltip = input(false);\n readonly validationStatus = input<ValidationStatusType>();\n\n get placeholderText(): string {\n return this._textService.getText(this.placeholder());\n }\n\n get labelText(): string {\n return this._textService.getText(this.label());\n }\n\n get descriptionText(): string {\n return this._textService.getText(this.description());\n }\n\n get validationStatusTexts(): string[] {\n return this.validationStatusDescriptions().map(desc => this._textService.getText(desc));\n }\n\n get hintText(): string {\n return this._textService.getText(this.hint());\n }\n\n protected readonly _textService = inject(TextService);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-form-controls-checkbox.mjs CHANGED Viewed

@@ -1,87 +1,77 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, input, model, computed, effect, ElementRef, Output, ViewChild, HostBinding, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i3 from '@updevs/components/popover';
+import { UpdPopoverModule } from '@updevs/components/popover';
-class CheckboxComponent {
+class CheckboxComponent extends BaseControl {
     constructor() {
+        super();
         this.wrapperClasses = '';
-        this.isDisabled = false;
-        this.isReadOnly = false;
-        this.isChecked = false;
-        this.isInline = false;
-        this.isSwitch = false;
         this.changed = new EventEmitter();
-        this.classes = [];
+        this.value = input();
+        this.customClasses = input();
+        this.isChecked = model(false);
+        this.isInline = input(false);
+        this.isSwitch = input(false);
+        this.isIndeterminate = model(false);
+        this.classes = computed(() => {
+            const lClasses = ['form-check-input'];
+            if (!!this.validationStatus()) {
+                const statusCls = `is-${this.validationStatus()}`;
+                lClasses.push(statusCls);
+            }
+            return [...lClasses, ...(this.customClasses() || '').split(' ')];
+        });
+        effect(() => {
+            this.isIndeterminate();
+            if (!!this.checkboxInput) {
+                this.checkboxInput.nativeElement.indeterminate = !!this.isIndeterminate();
+            }
+        });
     }
-    ngOnInit() {
-        this.updateClasses();
+    onSelectChange(event) {
+        this.isIndeterminate.set(false);
+        this.changed.emit(event.target.checked);
     }
-    ngOnChanges(changes) {
-        this.updateClasses();
-    }
-    updateClasses() {
-        const lClasses = ['form-check-input'];
-        if (!!this.validationStatus) {
-            const statusCls = `is-${this.validationStatus}`;
-            lClasses.push(statusCls);
-        }
-        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CheckboxComponent, selector: "upd-checkbox", inputs: { wrapperClasses: "wrapperClasses", label: "label", value: "value", customClasses: "customClasses", name: "name", description: "description", isDisabled: "isDisabled", isReadOnly: "isReadOnly", isChecked: "isChecked", isInline: "isInline", isSwitch: "isSwitch", validationStatus: "validationStatus", invalidStatusText: "invalidStatusText" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.wrapperClasses" } }, usesOnChanges: true, ngImport: i0, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\" [class.form-switch]=\"isSwitch\">\n    <input type=\"checkbox\" (change)=\"changed.emit(isChecked)\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [value]=\"value\"\n        [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" [(ngModel)]=\"isChecked\">\n    <span *ngIf=\"!!label\" class=\"form-check-label\">{{label}}</span>\n    <span *ngIf=\"!!description\" class=\"form-check-description\">{{description}}</span>\n    <div *ngIf=\"validationStatus === 'invalid' && !!invalidStatusText\" class=\"invalid-feedback\">{{invalidStatusText}}</div>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CheckboxComponent, selector: "upd-checkbox", inputs: { wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isInline: { classPropertyName: "isInline", publicName: "isInline", isSignal: true, isRequired: false, transformFunction: null }, isSwitch: { classPropertyName: "isSwitch", publicName: "isSwitch", isSignal: true, isRequired: false, transformFunction: null }, isIndeterminate: { classPropertyName: "isIndeterminate", publicName: "isIndeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", isChecked: "isCheckedChange", isIndeterminate: "isIndeterminateChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline()\" [class.form-switch]=\"isSwitch()\" [ngClass]=\"customClasses()\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input #checkboxInput type=\"checkbox\" [disabled]=\"isDisabled()\" [ngClass]=\"classes()\" [value]=\"value()\" [attr.name]=\"name()\"\n        [attr.readonly]=\"isDisabled() ? '' : undefined\" [(ngModel)]=\"isChecked\" (change)=\"onSelectChange($event)\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-checkbox', encapsulation: ViewEncapsulation.None, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline\" [class.form-switch]=\"isSwitch\">\n    <input type=\"checkbox\" (change)=\"changed.emit(isChecked)\" [disabled]=\"isDisabled\" [ngClass]=\"classes\" [value]=\"value\"\n        [attr.name]=\"name\" [attr.readonly]=\"isReadOnly ? '' : undefined\" [(ngModel)]=\"isChecked\">\n    <span *ngIf=\"!!label\" class=\"form-check-label\">{{label}}</span>\n    <span *ngIf=\"!!description\" class=\"form-check-description\">{{description}}</span>\n    <div *ngIf=\"validationStatus === 'invalid' && !!invalidStatusText\" class=\"invalid-feedback\">{{invalidStatusText}}</div>\n</label>\n" }]
-        }], propDecorators: { wrapperClasses: [{
+            args: [{ selector: 'upd-checkbox', encapsulation: ViewEncapsulation.None, template: "<label class=\"form-check\" [class.form-check-inline]=\"isInline()\" [class.form-switch]=\"isSwitch()\" [ngClass]=\"customClasses()\">\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n    }\n</label>\n\n<ng-template #contentTpl>\n    <input #checkboxInput type=\"checkbox\" [disabled]=\"isDisabled()\" [ngClass]=\"classes()\" [value]=\"value()\" [attr.name]=\"name()\"\n        [attr.readonly]=\"isDisabled() ? '' : undefined\" [(ngModel)]=\"isChecked\" (change)=\"onSelectChange($event)\">\n\n    @if (!!labelText) {\n        <span class=\"form-check-label\">{{ labelText }}</span>\n    }\n\n    @if (!!descriptionText) {\n        <span class=\"form-check-description\">{{ descriptionText }}</span>\n    }\n\n    @if (validationStatus() === 'invalid' && !!validationStatusTexts) {\n        <div class=\"invalid-feedback\">{{ validationStatusTexts }}</div>\n    }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
             }, {
                 type: Input
-            }], label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], customClasses: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], isReadOnly: [{
-                type: Input
-            }], isChecked: [{
-                type: Input
-            }], isInline: [{
-                type: Input
-            }], isSwitch: [{
-                type: Input
-            }], validationStatus: [{
-                type: Input
-            }], invalidStatusText: [{
-                type: Input
+            }], checkboxInput: [{
+                type: ViewChild,
+                args: ['checkboxInput', { read: ElementRef }]
             }], changed: [{
                 type: Output
             }] } });
 class UpdCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: UpdCheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule,
-            FormsModule], exports: [CheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdCheckboxModule, imports: [CommonModule,
-            FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdCheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule,
+            FormsModule,
+            UpdPopoverModule], exports: [CheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCheckboxModule, imports: [CommonModule,
+            FormsModule,
+            UpdPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        FormsModule
+                        FormsModule,
+                        UpdPopoverModule
                     ],
                     declarations: [
                         CheckboxComponent