npm - @updevs/components - Versions diffs - 1.0.0-alpha.92 → 1.0.0-alpha.94 - Mend

@updevs/components 1.0.0-alpha.92 → 1.0.0-alpha.94

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

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

	@@ -1 +1 @@
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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"}
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-date-picker.mjs CHANGED Viewed

@@ -103,7 +103,7 @@ class DatePickerComponent extends BaseComponent {
         this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DatePickerComponent, selector: "upd-date-picker", inputs: { shouldCloseOnOutsideClick: "shouldCloseOnOutsideClick", shouldCloseOnSelectionFinished: "shouldCloseOnSelectionFinished", minDate: "minDate", maxDate: "maxDate", startAt: "startAt", dateFilter: "dateFilter", isRange: "isRange" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef }, { propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, read: ElementRef }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.is-range]=\"isRange\">\n            @if (isRange) {\n                <div class=\"d-flex flex-row align-items-center date-range-container styled\">\n                    <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"startDate\" readonly>\n                    <span class=\"date-range-separator\">-</span>\n                    <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"endDate\" readonly>\n                </div>\n            } @else {\n                <upd-input [value]=\"selectedDate\" (valueChange)=\"updateSelectedDate($event)\" customClasses=\"date-input\"\n                    [isPlainText]=\"true\">\n                </upd-input>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (hasSelectedData) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\" customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n                <upd-icon [model]=\"{tablerIcon:'calendar'}\"></upd-icon>\n            </upd-button>\n        </div>\n    </div>\n    <div #calendarWrapper class=\"dropdown-content remove-top-radius\" [style.display]=\"isDropdownOpen ? 'block' : 'none'\">\n        <upd-calendar #calendar [id]=\"id\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [selectedStartDate]=\"startAt\"\n            [disabledDatesFilter]=\"dateFilter\" [isRange]=\"isRange\" [shouldRemoveExternalBorder]=\"true\"\n            (selected)=\"handleUserSelection($event)\">\n        </upd-calendar>\n    </div>\n</div>\n", styles: [".dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e;width:350px!important}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}::ng-deep .date-input{padding:0!important;width:80px!important}.is-range{padding:0!important}.date-range-container{padding:.375rem .75rem;min-height:calc(1em + .75rem + 2px)}.date-range-input{flex:1;border:none;background:transparent;padding:0;margin:0;box-shadow:none;outline:none;font-size:.875rem;color:var(--bs-body-color)}.date-range-input:focus{outline:none;box-shadow:none}.date-range-input::placeholder{color:var(--bs-secondary);opacity:.7}.date-range-input:placeholder-shown{color:var(--bs-secondary)}.date-range-separator{padding:0;color:var(--bs-secondary);font-weight:500;flex-shrink:0}.date-range-container.styled .date-range-input{background-color:var(--upd-bg-surface-tertiary);border:1px solid var(--upd-active-bg);border-radius:var(--bs-border-radius-sm, .25rem);padding:.25rem .5rem}.date-range-container.styled .date-range-input:first-child{margin-right:.25rem}.date-range-container.styled .date-range-input:last-child{margin-left:.25rem}.date-range-container.styled .date-range-separator{padding:0 .25rem}\n"], dependencies: [{ kind: "component", type: i1.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"] }, { kind: "component", type: i2.CalendarComponent, selector: "upd-calendar", inputs: ["selectedDate", "selectedStartDate", "selectedEndDate", "minDate", "maxDate", "disabledDatesFilter", "isRange", "shouldRemoveExternalBorder"], outputs: ["selected", "monthChanged"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DatePickerComponent, selector: "upd-date-picker", inputs: { shouldCloseOnOutsideClick: "shouldCloseOnOutsideClick", shouldCloseOnSelectionFinished: "shouldCloseOnSelectionFinished", minDate: "minDate", maxDate: "maxDate", startAt: "startAt", dateFilter: "dateFilter", isRange: "isRange" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef }, { propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true, read: ElementRef }, { propertyName: "calendarComponent", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dropdown\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.is-range]=\"isRange\">\n            @if (isRange) {\n                <div class=\"d-flex flex-row align-items-center date-range-container styled\">\n                    <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"startDate\" readonly>\n                    <span class=\"date-range-separator\">-</span>\n                    <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"endDate\" readonly>\n                </div>\n            } @else {\n                <upd-input [value]=\"selectedDate\" (valueChange)=\"updateSelectedDate($event)\" customClasses=\"date-input\"\n                    [isPlainText]=\"true\">\n                </upd-input>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (hasSelectedData) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\" customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n                <upd-icon [model]=\"{tablerIcon:'calendar'}\"></upd-icon>\n            </upd-button>\n        </div>\n    </div>\n    <div #calendarWrapper class=\"dropdown-content remove-top-radius\" [style.display]=\"isDropdownOpen ? 'block' : 'none'\">\n        <upd-calendar #calendar [id]=\"id\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [selectedStartDate]=\"startAt\"\n            [disabledDatesFilter]=\"dateFilter\" [isRange]=\"isRange\" [shouldRemoveExternalBorder]=\"true\"\n            (selected)=\"handleUserSelection($event)\">\n        </upd-calendar>\n    </div>\n</div>\n", styles: [".dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e;width:350px!important}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}::ng-deep .date-input{padding:0!important;width:80px!important}.is-range{padding:0!important}.date-range-container{padding:.375rem .75rem;min-height:calc(1em + .75rem + 2px)}.date-range-input{flex:1;border:none;background:transparent;padding:0;margin:0;box-shadow:none;outline:none;font-size:.875rem;color:var(--bs-body-color)}.date-range-input:focus{outline:none;box-shadow:none}.date-range-input::placeholder{color:var(--bs-secondary);opacity:.7}.date-range-input:placeholder-shown{color:var(--bs-secondary)}.date-range-separator{padding:0;color:var(--bs-secondary);font-weight:500;flex-shrink:0}.date-range-container.styled .date-range-input{background-color:var(--upd-bg-surface-tertiary);border:1px solid var(--upd-active-bg);border-radius:var(--bs-border-radius-sm, .25rem);padding:.25rem .5rem}.date-range-container.styled .date-range-input:first-child{margin-right:.25rem}.date-range-container.styled .date-range-input:last-child{margin-left:.25rem}.date-range-container.styled .date-range-separator{padding:0 .25rem}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i2.CalendarComponent, selector: "upd-calendar", inputs: ["selectedDate", "selectedStartDate", "selectedEndDate", "minDate", "maxDate", "disabledDatesFilter", "isRange", "shouldRemoveExternalBorder"], outputs: ["selected", "monthChanged"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,

package/fesm2022/updevs-components-form-controls-date-picker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-form-controls-date-picker.mjs","sources":["../../../../libs/components/form-controls/date-picker/src/date-picker.component.ts","../../../../libs/components/form-controls/date-picker/src/date-picker.component.html","../../../../libs/components/form-controls/date-picker/src/upd-date-picker.module.ts","../../../../libs/components/form-controls/date-picker/src/updevs-components-form-controls-date-picker.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n Renderer2,\n RendererStyleFlags2,\n ViewChild,\n inject\n} from '@angular/core';\nimport { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';\nimport { DateService } from '@updevs/sdk/core';\nimport { OptionalType } from '@updevs/sdk/types';\nimport { CalendarSelectedModel, CalendarComponent } from '@updevs/components/calendar';\n\nlet datepickerId = 0;\n\n@Component({\n selector: 'upd-date-picker',\n templateUrl: './date-picker.component.html',\n styleUrl: './date-picker.component.scss'\n})\nexport class DatePickerComponent extends BaseComponent {\n @ViewChild('componentBox', { read: ElementRef }) componentBox?: ElementRef;\n @ViewChild('calendarWrapper', { read: ElementRef }) calendarWrapper?: ElementRef;\n @ViewChild('calendar') calendarComponent!: CalendarComponent;\n\n @Input() shouldCloseOnOutsideClick = true;\n @Input() shouldCloseOnSelectionFinished = true;\n /*\n The minimum selectable date.\n /\n @Input() minDate?: Date;\n /\n The maximum selectable date.\n /\n @Input() maxDate?: Date;\n /\n The date to open the calendar to initially\n /\n @Input()\n get startAt(): OptionalType<Date> {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently selected value is.\n return this._startAt \|\| this.selectedData.startDate;\n }\n set startAt(value: OptionalType<Date>) {\n this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));\n }\n @Input() dateFilter?: (date: Date) => boolean;\n /\n Whether the user is currently selecting a range of dates.\n /\n @Input() isRange = false;\n\n /\n Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n /\n @Output() readonly selected = new EventEmitter<OptionalType<CalendarSelectedModel>>();\n\n /\n Whether the dropdown is open.\n /\n isDropdownOpen = false;\n /\n Start of the comparison range.\n /\n comparisonStart?: Date;\n /\n End of the comparison range.\n /\n comparisonEnd?: Date;\n selectedData: CalendarSelectedModel = {};\n get hasSelectedData(): boolean {\n return !!this.selectedData.startDate \|\| !!this.selectedData.endDate \|\| !!this.selectedData.selectedDate;\n }\n get selectedDate(): string {\n return !!this.selectedData.selectedDate ? this.dateService.format(this.selectedData.selectedDate) : '';\n }\n get startDate(): string {\n return !!this.selectedData.startDate ? this.dateService.format(this.selectedData.startDate) : '';\n }\n get endDate(): string {\n return !!this.selectedData.endDate ? this.dateService.format(this.selectedData.endDate) : '';\n }\n readonly id = `upd-datepicker-${datepickerId++}`;\n\n private _startAt?: Date;\n private readonly dateService = inject(DateService);\n private readonly domEventsService = inject(DomEventsService);\n private readonly positioningService = inject(PositioningService);\n private readonly ngZone = inject(NgZone);\n private readonly renderer = inject(Renderer2);\n\n clearSelection(): void {\n this.calendarComponent.clearSelection();\n }\n\n openDropdown(): void {\n this.isDropdownOpen = true;\n\n if (this.shouldCloseOnOutsideClick) {\n const outsideClickSub = this.domEventsService.startOutsideClickListener(\n () => this.ngZone.run(() => this.isDropdownOpen = false),\n this.calendarWrapper?.nativeElement,\n true,\n this.componentBox?.nativeElement\n );\n this.addSubscriptions(outsideClickSub);\n }\n\n this.ngZone.runOutsideAngular(() =>\n this.positioningService\n .computePosition(this.componentBox!, this.calendarWrapper!, { placement: 'bottom' })\n .subscribe(resp => this.updatePosition(resp))\n );\n }\n\n handleUserSelection(selected: OptionalType<CalendarSelectedModel>): void {\n if (this.isRange) {\n const currentDate = selected as CalendarSelectedModel;\n this.selectedData = !!currentDate\n ? { startDate: currentDate.startDate, endDate: currentDate.endDate }\n : { startDate: undefined, endDate: undefined };\n\n if (!!this.selectedData.startDate && !!this.selectedData.endDate) {\n this.isDropdownOpen = false;\n this.selected.emit(this.selectedData);\n }\n } else {\n const selectedDate = selected?.selectedDate;\n this.selectedData = { selectedDate };\n\n if (this.shouldCloseOnSelectionFinished) {\n this.isDropdownOpen = false;\n this.selected.emit(this.selectedData);\n }\n }\n }\n\n updateSelectedDate(value: any): void {\n this.selectedData = { selectedDate: this.dateService.getValidOrUndefined(new Date(value)) };\n }\n\n private updatePosition(result: ComputePositionResult): void {\n const ddElement = this.calendarWrapper!.nativeElement;\n\n this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);\n }\n}\n","<div class=\"dropdown\">\n <div #componentBox class=\"input-group input-group-flat\">\n <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.is-range]=\"isRange\">\n @if (isRange) {\n <div class=\"d-flex flex-row align-items-center date-range-container styled\">\n <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"startDate\" readonly>\n <span class=\"date-range-separator\">-</span>\n <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"endDate\" readonly>\n </div>\n } @else {\n <upd-input [value]=\"selectedDate\" (valueChange)=\"updateSelectedDate($event)\" customClasses=\"date-input\"\n [isPlainText]=\"true\">\n </upd-input>\n }\n </div>\n <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n @if (hasSelectedData) {\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\" customClasses=\"link-secondary\">\n <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n </upd-button>\n }\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n <upd-icon [model]=\"{tablerIcon:'calendar'}\"></upd-icon>\n </upd-button>\n </div>\n </div>\n <div #calendarWrapper class=\"dropdown-content remove-top-radius\" [style.display]=\"isDropdownOpen ? 'block' : 'none'\">\n <upd-calendar #calendar [id]=\"id\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [selectedStartDate]=\"startAt\"\n [disabledDatesFilter]=\"dateFilter\" [isRange]=\"isRange\" [shouldRemoveExternalBorder]=\"true\"\n (selected)=\"handleUserSelection($event)\">\n </upd-calendar>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdCalendarModule } from '@updevs/components/calendar';\nimport { UpdInputModule } from '@updevs/components/form-controls/input';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport { DatePickerComponent } from './date-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdButtonModule,\n UpdCalendarModule,\n UpdIconsModule,\n UpdInputModule\n ],\n exports: [\n DatePickerComponent\n ],\n declarations: [\n DatePickerComponent\n ]\n})\nexport class UpdDatePickerModule {}\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-form-controls-date-picker.mjs","sources":["../../../../libs/components/form-controls/date-picker/src/date-picker.component.ts","../../../../libs/components/form-controls/date-picker/src/date-picker.component.html","../../../../libs/components/form-controls/date-picker/src/upd-date-picker.module.ts","../../../../libs/components/form-controls/date-picker/src/updevs-components-form-controls-date-picker.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n Renderer2,\n RendererStyleFlags2,\n ViewChild,\n inject\n} from '@angular/core';\nimport { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';\nimport { DateService } from '@updevs/sdk/core';\nimport { OptionalType } from '@updevs/sdk/types';\nimport { CalendarSelectedModel, CalendarComponent } from '@updevs/components/calendar';\n\nlet datepickerId = 0;\n\n@Component({\n selector: 'upd-date-picker',\n templateUrl: './date-picker.component.html',\n styleUrl: './date-picker.component.scss'\n})\nexport class DatePickerComponent extends BaseComponent {\n @ViewChild('componentBox', { read: ElementRef }) componentBox?: ElementRef;\n @ViewChild('calendarWrapper', { read: ElementRef }) calendarWrapper?: ElementRef;\n @ViewChild('calendar') calendarComponent!: CalendarComponent;\n\n @Input() shouldCloseOnOutsideClick = true;\n @Input() shouldCloseOnSelectionFinished = true;\n /*\n The minimum selectable date.\n /\n @Input() minDate?: Date;\n /\n The maximum selectable date.\n /\n @Input() maxDate?: Date;\n /\n The date to open the calendar to initially\n /\n @Input()\n get startAt(): OptionalType<Date> {\n // If an explicit startAt is set we start there, otherwise we start at whatever the currently selected value is.\n return this._startAt \|\| this.selectedData.startDate;\n }\n set startAt(value: OptionalType<Date>) {\n this._startAt = this.dateService.getValidOrUndefined(this.dateService.deserialize(value));\n }\n @Input() dateFilter?: (date: Date) => boolean;\n /\n Whether the user is currently selecting a range of dates.\n /\n @Input() isRange = false;\n\n /\n Emits the year chosen in multiyear view.\n * This doesn't imply a change on the selected date.\n /\n @Output() readonly selected = new EventEmitter<OptionalType<CalendarSelectedModel>>();\n\n /\n Whether the dropdown is open.\n /\n isDropdownOpen = false;\n /\n Start of the comparison range.\n /\n comparisonStart?: Date;\n /\n End of the comparison range.\n /\n comparisonEnd?: Date;\n selectedData: CalendarSelectedModel = {};\n get hasSelectedData(): boolean {\n return !!this.selectedData.startDate \|\| !!this.selectedData.endDate \|\| !!this.selectedData.selectedDate;\n }\n get selectedDate(): string {\n return !!this.selectedData.selectedDate ? this.dateService.format(this.selectedData.selectedDate) : '';\n }\n get startDate(): string {\n return !!this.selectedData.startDate ? this.dateService.format(this.selectedData.startDate) : '';\n }\n get endDate(): string {\n return !!this.selectedData.endDate ? this.dateService.format(this.selectedData.endDate) : '';\n }\n readonly id = `upd-datepicker-${datepickerId++}`;\n\n private _startAt?: Date;\n private readonly dateService = inject(DateService);\n private readonly domEventsService = inject(DomEventsService);\n private readonly positioningService = inject(PositioningService);\n private readonly ngZone = inject(NgZone);\n private readonly renderer = inject(Renderer2);\n\n clearSelection(): void {\n this.calendarComponent.clearSelection();\n }\n\n openDropdown(): void {\n this.isDropdownOpen = true;\n\n if (this.shouldCloseOnOutsideClick) {\n const outsideClickSub = this.domEventsService.startOutsideClickListener(\n () => this.ngZone.run(() => this.isDropdownOpen = false),\n this.calendarWrapper?.nativeElement,\n true,\n this.componentBox?.nativeElement\n );\n this.addSubscriptions(outsideClickSub);\n }\n\n this.ngZone.runOutsideAngular(() =>\n this.positioningService\n .computePosition(this.componentBox!, this.calendarWrapper!, { placement: 'bottom' })\n .subscribe(resp => this.updatePosition(resp))\n );\n }\n\n handleUserSelection(selected: OptionalType<CalendarSelectedModel>): void {\n if (this.isRange) {\n const currentDate = selected as CalendarSelectedModel;\n this.selectedData = !!currentDate\n ? { startDate: currentDate.startDate, endDate: currentDate.endDate }\n : { startDate: undefined, endDate: undefined };\n\n if (!!this.selectedData.startDate && !!this.selectedData.endDate) {\n this.isDropdownOpen = false;\n this.selected.emit(this.selectedData);\n }\n } else {\n const selectedDate = selected?.selectedDate;\n this.selectedData = { selectedDate };\n\n if (this.shouldCloseOnSelectionFinished) {\n this.isDropdownOpen = false;\n this.selected.emit(this.selectedData);\n }\n }\n }\n\n updateSelectedDate(value: any): void {\n this.selectedData = { selectedDate: this.dateService.getValidOrUndefined(new Date(value)) };\n }\n\n private updatePosition(result: ComputePositionResult): void {\n const ddElement = this.calendarWrapper!.nativeElement;\n\n this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);\n this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);\n }\n}\n","<div class=\"dropdown\">\n <div #componentBox class=\"input-group input-group-flat\">\n <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.is-range]=\"isRange\">\n @if (isRange) {\n <div class=\"d-flex flex-row align-items-center date-range-container styled\">\n <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"startDate\" readonly>\n <span class=\"date-range-separator\">-</span>\n <input type=\"text\" class=\"form-control-plaintext date-range-input\" [value]=\"endDate\" readonly>\n </div>\n } @else {\n <upd-input [value]=\"selectedDate\" (valueChange)=\"updateSelectedDate($event)\" customClasses=\"date-input\"\n [isPlainText]=\"true\">\n </upd-input>\n }\n </div>\n <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n @if (hasSelectedData) {\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\" customClasses=\"link-secondary\">\n <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n </upd-button>\n }\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\" customClasses=\"link-secondary ms-2\">\n <upd-icon [model]=\"{tablerIcon:'calendar'}\"></upd-icon>\n </upd-button>\n </div>\n </div>\n <div #calendarWrapper class=\"dropdown-content remove-top-radius\" [style.display]=\"isDropdownOpen ? 'block' : 'none'\">\n <upd-calendar #calendar [id]=\"id\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [selectedStartDate]=\"startAt\"\n [disabledDatesFilter]=\"dateFilter\" [isRange]=\"isRange\" [shouldRemoveExternalBorder]=\"true\"\n (selected)=\"handleUserSelection($event)\">\n </upd-calendar>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdCalendarModule } from '@updevs/components/calendar';\nimport { UpdInputModule } from '@updevs/components/form-controls/input';\nimport { UpdIconsModule } from '@updevs/icons';\n\nimport { DatePickerComponent } from './date-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n UpdButtonModule,\n UpdCalendarModule,\n UpdIconsModule,\n UpdInputModule\n ],\n exports: [\n DatePickerComponent\n ],\n declarations: [\n DatePickerComponent\n ]\n})\nexport class UpdDatePickerModule {}\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-file-upload.mjs CHANGED Viewed

@@ -169,7 +169,7 @@ class FileUploadComponent extends BaseControl {
         return errors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FileUploadComponent, selector: "upd-file-upload", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, allowFilesDrop: { classPropertyName: "allowFilesDrop", publicName: "allowFilesDrop", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, allowedExtensions: { classPropertyName: "allowedExtensions", publicName: "allowedExtensions", isSignal: true, isRequired: false, transformFunction: null }, minFileSize: { classPropertyName: "minFileSize", publicName: "minFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChanged: "fileChanged" }, host: { properties: { "class": "this.hostWrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n    [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n    <ng-container *transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n        @if (!!labelText) {\n            <div [ngClass]=\"labelSizeClasses()\">\n                <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n                @if (!!hintText || !!this.hintTemplate()) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        }\n\n        @if (supportsAdvancedUpload && allowFilesDrop()) {\n            <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n                [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n                (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n                (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n                @if (!!titleText) {\n                    <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n                }\n\n                <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n                @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        } @else {\n            @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                <div class=\"row g-2\">\n                    <div class=\"col\">\n                        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n                    </div>\n                    <div class=\"col-auto align-self-center\">\n                        <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                    </div>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n            }\n        }\n        @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n            @for (desc of errorsList(); track desc) {\n                <div class=\"invalid-feedback\">{{ desc }}</div>\n            }\n        }\n\n        <ng-template #inputTpl>\n            <div class=\"input-group col\">\n                <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n                    {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n                </label>\n                <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n                    [value]=\"firstFileName() || ''\"\n                    [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n                    [attr.disabled]=\"isDisabled() || undefined\" readonly>\n\n                @if (!!firstFileName()) {\n                    <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n                        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n                            <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n                        </upd-button>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\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: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FileUploadComponent, selector: "upd-file-upload", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, allowFilesDrop: { classPropertyName: "allowFilesDrop", publicName: "allowFilesDrop", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, allowedExtensions: { classPropertyName: "allowedExtensions", publicName: "allowedExtensions", isSignal: true, isRequired: false, transformFunction: null }, minFileSize: { classPropertyName: "minFileSize", publicName: "minFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChanged: "fileChanged" }, host: { properties: { "class": "this.hostWrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n    [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n    <ng-container *transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n        @if (!!labelText) {\n            <div [ngClass]=\"labelSizeClasses()\">\n                <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n                @if (!!hintText || !!this.hintTemplate()) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        }\n\n        @if (supportsAdvancedUpload && allowFilesDrop()) {\n            <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n                [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n                (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n                (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n                @if (!!titleText) {\n                    <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n                }\n\n                <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n                @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                }\n            </div>\n        } @else {\n            @if (!labelText && (!!hintText || !!this.hintTemplate())) {\n                <div class=\"row g-2\">\n                    <div class=\"col\">\n                        <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n                    </div>\n                    <div class=\"col-auto align-self-center\">\n                        <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                    </div>\n                </div>\n            } @else {\n                <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n            }\n        }\n        @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n            @for (desc of errorsList(); track desc) {\n                <div class=\"invalid-feedback\">{{ desc }}</div>\n            }\n        }\n\n        <ng-template #inputTpl>\n            <div class=\"input-group col\">\n                <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n                    {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n                </label>\n                <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n                    [value]=\"firstFileName() || ''\"\n                    [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n                    [attr.disabled]=\"isDisabled() || undefined\" readonly>\n\n                @if (!!firstFileName()) {\n                    <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n                        <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n                            <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n                        </upd-button>\n                    </div>\n                }\n            </div>\n        </ng-template>\n    </ng-container>\n</div>\n\n<ng-template #hintTpl>\n    <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\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: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,

package/fesm2022/updevs-components-form-controls-file-upload.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"updevs-components-form-controls-file-upload.mjs","sources":["../../../../libs/components/form-controls/file-upload/src/file-upload.component.ts","../../../../libs/components/form-controls/file-upload/src/file-upload.component.html","../../../../libs/components/form-controls/file-upload/src/upd-file-upload.module.ts","../../../../libs/components/form-controls/file-upload/src/updevs-components-form-controls-file-upload.ts"],"sourcesContent":["import { Component, computed, EventEmitter, HostBinding, inject, input, Output, signal } from '@angular/core';\nimport { ColumnSizeHelper, HorizontalVerticalType } from '@updevs/components';\nimport { TextModel } from '@updevs/sdk';\nimport { PlatformService, Tools } from '@updevs/sdk/core';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { FileUploadChangedEvent } from './file-upload-changed.event';\n\n@Component({\n selector: 'upd-file-upload',\n templateUrl: './file-upload.component.html',\n styleUrl: './file-upload.component.scss'\n})\nexport class FileUploadComponent extends BaseControl {\n @HostBinding('class') hostWrapperClasses = '';\n\n @Output() readonly fileChanged = new EventEmitter<OptionalType<FileUploadChangedEvent>>();\n\n readonly fileName = input<string>();\n readonly title = input<TextModel>();\n readonly allowFilesDrop = input(false);\n readonly isMultiple = input(false); // TODO: implement\n readonly allowedExtensions = input('');\n readonly minFileSize = input<number>();\n readonly maxFileSize = input<number>();\n readonly layout = input<HorizontalVerticalType>('vertical');\n readonly isOver = signal(false);\n readonly showValidationStatus = computed(() =>\n !!this.validationStatus() && (this.validationStatus() === 'invalid' \|\| this.showValidStatus())\n );\n readonly validationStatusClass = computed(() => {\n if (this.showValidationStatus()) {\n return `is-${this.validationStatus()}`;\n }\n\n return '';\n });\n readonly validationStatusBorderClass = computed(() => {\n if (this.showValidationStatus()) {\n return this.validationStatus() === 'invalid' ? 'border-danger' : 'border-success';\n }\n\n return '';\n });\n readonly errorsList = computed(() => [...this.validationStatusTexts.concat(this.fileUploadErrors())]);\n readonly currentFiles = signal<OptionalType<File[]>>(undefined);\n readonly labelSizeClasses = computed(() => {\n if (this.layout() !== 'horizontal') {\n return 'form-label';\n }\n\n return ColumnSizeHelper.getClasses(\n 'col-form-label',\n ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3)\n );\n });\n readonly firstFileName = computed(() => (this.currentFiles()?.length \|\| 0) > 0 ? this.currentFiles()![0].name : this.fileName());\n\n get titleText(): string {\n return this._textService.getText(this.title(), { isMultiple: this.isMultiple() });\n }\n get dropDescriptionText(): string {\n return !!this.descriptionText\n ? this.descriptionText\n : this._textService.getText(\n this.platformService.isMobile ? this.defaultMobileDesc : this.defaultDesktopDesc, { isMultiple: this.isMultiple() }\n );\n }\n get supportsAdvancedUpload(): boolean {\n const div = document.createElement('div');\n return (('draggable' in div) \|\| ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;\n }\n\n private readonly defaultMobileDesc: TextModel = {\n text: 'UpDevs.FormControls.FileUpload.DropzoneMobileDescription',\n isTranslated: false\n };\n private readonly defaultDesktopDesc: TextModel = {\n text: 'UpDevs.FormControls.FileUpload.DropzoneDesktopDescription',\n isTranslated: false\n };\n private readonly fileUploadErrors = signal<string[]>([]);\n private readonly platformService = inject(PlatformService);\n\n onFileChange(event: Event): void {\n event.stopPropagation();\n\n const files = Array.from((event.target as any).files as FileList);\n\n if (!!files) {\n this.currentFiles.set([...files]);\n this._updateFormControl([...files], true);\n\n const errors = files.map(f => this.getFileErrors(f)).reduce((acc, e) => acc.concat(e), []);\n\n if (errors.length > 0) {\n this.fileUploadErrors.set([...errors]);\n return;\n }\n\n if (this.isMultiple()) {\n // TODO: implement\n } else {\n const file = files[0];\n const reader = new FileReader();\n reader.onload = (fileReader: any) => this.fileChanged.emit({ file: file, dataUrl: fileReader.target.result });\n\n reader.readAsDataURL(file);\n }\n }\n }\n\n removeFile(): void {\n this.currentFiles.set([]);\n this._updateFormControl([], true);\n this.fileChanged.emit(undefined);\n }\n\n onDrag(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n onDragStart(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n onDragEnd(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n }\n\n onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(true);\n }\n\n onDragEnter(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(true);\n }\n\n onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n }\n\n onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n\n // TODO: const droppedFiles = event.dataTransfer!.files;\n }\n\n protected _getValue(): any {\n return this.currentFiles();\n }\n\n protected _updateValue(value: any): void {\n this.currentFiles.set(value);\n }\n\n private getFileErrors(file: File): string[] {\n const extension = `.${file.name.split('.').pop() \|\| ''}`;\n const fileSizeInKB = Math.round(file.size / 1024);\n const errors: string[] = [];\n\n if (this.allowedExtensions() !== '' && !this.allowedExtensions().includes(extension)) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.ExtensionNotAllowed', isTranslated: false },\n {\n fileName: file.name,\n extension,\n hasMultipleExt: this.allowedExtensions().includes(','),\n allowedExtensions: this.allowedExtensions()\n }\n )\n );\n }\n\n if (!!this.minFileSize() && fileSizeInKB < this.minFileSize()!) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.MinSizeNotMet', isTranslated: false },\n {\n fileName: file.name,\n fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n minAllowedSize: Tools.Text.formatKilobytes(this.minFileSize()!)\n }\n )\n );\n }\n\n if (!!this.maxFileSize() && fileSizeInKB > this.maxFileSize()!) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.MaxSizeExceeded', isTranslated: false },\n {\n fileName: file.name,\n fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n maxAllowedSize: Tools.Text.formatKilobytes(this.maxFileSize()!)\n }\n )\n );\n }\n\n return errors;\n }\n}\n","<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n <ng-container transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n @if (!!labelText) {\n <div [ngClass]=\"labelSizeClasses()\">\n <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n @if (!!hintText \|\| !!this.hintTemplate()) {\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n }\n </div>\n }\n\n @if (supportsAdvancedUpload && allowFilesDrop()) {\n <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n @if (!!titleText) {\n <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n }\n\n <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n @if (!labelText && (!!hintText \|\| !!this.hintTemplate())) {\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n }\n </div>\n } @else {\n @if (!labelText && (!!hintText \|\| !!this.hintTemplate())) {\n <div class=\"row g-2\">\n <div class=\"col\">\n <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n </div>\n <div class=\"col-auto align-self-center\">\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n </div>\n </div>\n } @else {\n <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n }\n }\n @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n @for (desc of errorsList(); track desc) {\n <div class=\"invalid-feedback\">{{ desc }}</div>\n }\n }\n\n <ng-template #inputTpl>\n <div class=\"input-group col\">\n <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n </label>\n <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n [value]=\"firstFileName() \|\| ''\"\n [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n [attr.disabled]=\"isDisabled() \|\| undefined\" readonly>\n\n @if (!!firstFileName()) {\n <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n </upd-button>\n </div>\n }\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<ng-template #hintTpl>\n <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n ?\n </span>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoModule, TranslocoService } from '@jsverse/transloco';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { FileUploadComponent } from './file-upload.component';\n\n@NgModule({\n imports: [\n CommonModule,\n TranslocoModule,\n UpdButtonModule,\n UpdIconsModule,\n UpdPopoverModule\n ],\n declarations: [\n FileUploadComponent\n ],\n exports: [\n FileUploadComponent\n ]\n})\nexport class UpdFileUploadModule {\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":";;;;;;;;;;;;;;;;AAcM,MAAO,mBAAoB,SAAQ,WAAW,CAAA;AALpD,IAAA,WAAA,GAAA;;QAM0B,IAAkB,CAAA,kBAAA,GAAG,EAAE;AAE1B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAwC;QAEhF,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;QAC1B,IAAK,CAAA,KAAA,GAAG,KAAK,EAAa;AAC1B,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AAC1B,QAAA,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC;QAC9B,IAAW,CAAA,WAAA,GAAG,KAAK,EAAU;QAC7B,IAAW,CAAA,WAAA,GAAG,KAAK,EAAU;AAC7B,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAyB,UAAU,CAAC;AAClD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;QACtB,IAAoB,CAAA,oBAAA,GAAG,QAAQ,CAAC,MACrC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC,CACjG;AACQ,QAAA,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AAC3C,YAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;AAC7B,gBAAA,OAAO,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE;;AAG1C,YAAA,OAAO,EAAE;AACb,SAAC,CAAC;AACO,QAAA,IAAA,CAAA,2BAA2B,GAAG,QAAQ,CAAC,MAAK;AACjD,YAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;AAC7B,gBAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE,KAAK,SAAS,GAAG,eAAe,GAAG,gBAAgB;;AAGrF,YAAA,OAAO,EAAE;AACb,SAAC,CAAC;QACO,IAAU,CAAA,UAAA,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;AAC5F,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAuB,SAAS,CAAC;AACtD,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AACtC,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE;AAChC,gBAAA,OAAO,YAAY;;AAGvB,YAAA,OAAO,gBAAgB,CAAC,UAAU,CAC9B,gBAAgB,EAChB,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAC1D;AACL,SAAC,CAAC;AACO,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY,EAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;AAiB/G,QAAA,IAAA,CAAA,iBAAiB,GAAc;AAC5C,YAAA,IAAI,EAAE,0DAA0D;AAChE,YAAA,YAAY,EAAE;SACjB;AACgB,QAAA,IAAA,CAAA,kBAAkB,GAAc;AAC7C,YAAA,IAAI,EAAE,2DAA2D;AACjE,YAAA,YAAY,EAAE;SACjB;AACgB,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAW,EAAE,CAAC;AACvC,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;AAqI7D;AA7JG,IAAA,IAAI,SAAS,GAAA;QACT,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;;AAErF,IAAA,IAAI,mBAAmB,GAAA;AACnB,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC;cACR,IAAI,CAAC;AACP,cAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CACtH;;AAET,IAAA,IAAI,sBAAsB,GAAA;QACtB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QACzC,OAAO,CAAC,CAAC,WAAW,IAAI,GAAG,MAAM,aAAa,IAAI,GAAG,IAAI,QAAQ,IAAI,GAAG,CAAC,KAAK,UAAU,IAAI,MAAM,IAAI,YAAY,IAAI,MAAM;;AAchI,IAAA,YAAY,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAE,KAAK,CAAC,MAAc,CAAC,KAAiB,CAAC;AAEjE,QAAA,IAAI,CAAC,CAAC,KAAK,EAAE;YACT,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,kBAAkB,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC;AAEzC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAE1F,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBACnB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;gBACtC;;AAGJ,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;;;iBAEhB;AACH,gBAAA,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;AACrB,gBAAA,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE;AAC/B,gBAAA,MAAM,CAAC,MAAM,GAAG,CAAC,UAAe,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;AAE7G,gBAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC;;;;IAKtC,UAAU,GAAA;AACN,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;AACzB,QAAA,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE,IAAI,CAAC;AACjC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGpC,IAAA,MAAM,CAAC,KAAgB,EAAA;QACnB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;;AAG3B,IAAA,WAAW,CAAC,KAAgB,EAAA;QACxB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;;AAG3B,IAAA,SAAS,CAAC,KAAgB,EAAA;QACtB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;;AAG1B,IAAA,UAAU,CAAC,KAAgB,EAAA;QACvB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;;AAGzB,IAAA,WAAW,CAAC,KAAgB,EAAA;QACxB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;;AAGzB,IAAA,WAAW,CAAC,KAAgB,EAAA;QACxB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;;AAG1B,IAAA,MAAM,CAAC,KAAgB,EAAA;QACnB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;;;IAKhB,SAAS,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE;;AAGpB,IAAA,YAAY,CAAC,KAAU,EAAA;AAC7B,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGxB,IAAA,aAAa,CAAC,IAAU,EAAA;AAC5B,QAAA,MAAM,SAAS,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;AACxD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjD,MAAM,MAAM,GAAa,EAAE;AAE3B,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACnF,YAAA,MAAM,CAAC,IAAI,CACP,IAAI,CAAC,YAAY,CAAC,OAAO,CACrB,EAAE,IAAI,EAAE,oDAAoD,EAAE,YAAY,EAAE,KAAK,EAAE,EACnF;gBACI,QAAQ,EAAE,IAAI,CAAC,IAAI;gBACnB,SAAS;gBACT,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;AACtD,gBAAA,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;AAC5C,aAAA,CACJ,CACJ;;AAGL,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,EAAG,EAAE;AAC5D,YAAA,MAAM,CAAC,IAAI,CACP,IAAI,CAAC,YAAY,CAAC,OAAO,CACrB,EAAE,IAAI,EAAE,8CAA8C,EAAE,YAAY,EAAE,KAAK,EAAE,EAC7E;gBACI,QAAQ,EAAE,IAAI,CAAC,IAAI;gBACnB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;gBAClD,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAG;AACjE,aAAA,CACJ,CACJ;;AAGL,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,EAAG,EAAE;AAC5D,YAAA,MAAM,CAAC,IAAI,CACP,IAAI,CAAC,YAAY,CAAC,OAAO,CACrB,EAAE,IAAI,EAAE,gDAAgD,EAAE,YAAY,EAAE,KAAK,EAAE,EAC/E;gBACI,QAAQ,EAAE,IAAI,CAAC,IAAI;gBACnB,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;gBAClD,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAG;AACjE,aAAA,CACJ,CACJ;;AAGL,QAAA,OAAO,MAAM;;8GAxMR,mBAAmB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,+vCCdhC,g7HA6EA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,YAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,cAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,yBAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FD/Da,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,SAAS;+BACI,iBAAiB,EAAA,QAAA,EAAA,g7HAAA,EAAA;8BAKL,kBAAkB,EAAA,CAAA;sBAAvC,WAAW;uBAAC,OAAO;gBAED,WAAW,EAAA,CAAA;sBAA7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MESQ,mBAAmB,CAAA;AAC5B,IAAA,WAAA,CAAY,gBAAkC,EAAA;QAC1C,gBAAgB,CAAC,oCAAoC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AAC7E,QAAA,gBAAgB,CAAC,cAAc,CAACC,IAAE,EAAE,IAAI,CAAC;AACzC,QAAA,gBAAgB,CAAC,cAAc,CAACC,IAAE,EAAE,IAAI,CAAC;;8GAJpC,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAnB,mBAAmB,EAAA,YAAA,EAAA,CANxB,mBAAmB,CAAA,EAAA,OAAA,EAAA,CAPnB,YAAY;YACZ,eAAe;YACf,eAAe;YACf,cAAc;AACd,YAAA,gBAAgB,aAMhB,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAGd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAbxB,YAAY;YACZ,eAAe;YACf,eAAe;YACf,cAAc;YACd,gBAAgB,CAAA,EAAA,CAAA,CAAA;;2FASX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAf/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,eAAe;wBACf,cAAc;wBACd;AACH,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACV;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL;AACH;AACJ,iBAAA;;;ACzBD;;AAEG;;;;"}
1	+ {"version":3,"file":"updevs-components-form-controls-file-upload.mjs","sources":["../../../../libs/components/form-controls/file-upload/src/file-upload.component.ts","../../../../libs/components/form-controls/file-upload/src/file-upload.component.html","../../../../libs/components/form-controls/file-upload/src/upd-file-upload.module.ts","../../../../libs/components/form-controls/file-upload/src/updevs-components-form-controls-file-upload.ts"],"sourcesContent":["import { Component, computed, EventEmitter, HostBinding, inject, input, Output, signal } from '@angular/core';\nimport { ColumnSizeHelper, HorizontalVerticalType } from '@updevs/components';\nimport { TextModel } from '@updevs/sdk';\nimport { PlatformService, Tools } from '@updevs/sdk/core';\nimport { BaseControl } from '@updevs/components/form-controls/abstractions';\nimport { OptionalType } from '@updevs/sdk/types';\n\nimport { FileUploadChangedEvent } from './file-upload-changed.event';\n\n@Component({\n selector: 'upd-file-upload',\n templateUrl: './file-upload.component.html',\n styleUrl: './file-upload.component.scss'\n})\nexport class FileUploadComponent extends BaseControl {\n @HostBinding('class') hostWrapperClasses = '';\n\n @Output() readonly fileChanged = new EventEmitter<OptionalType<FileUploadChangedEvent>>();\n\n readonly fileName = input<string>();\n readonly title = input<TextModel>();\n readonly allowFilesDrop = input(false);\n readonly isMultiple = input(false); // TODO: implement\n readonly allowedExtensions = input('');\n readonly minFileSize = input<number>();\n readonly maxFileSize = input<number>();\n readonly layout = input<HorizontalVerticalType>('vertical');\n readonly isOver = signal(false);\n readonly showValidationStatus = computed(() =>\n !!this.validationStatus() && (this.validationStatus() === 'invalid' \|\| this.showValidStatus())\n );\n readonly validationStatusClass = computed(() => {\n if (this.showValidationStatus()) {\n return `is-${this.validationStatus()}`;\n }\n\n return '';\n });\n readonly validationStatusBorderClass = computed(() => {\n if (this.showValidationStatus()) {\n return this.validationStatus() === 'invalid' ? 'border-danger' : 'border-success';\n }\n\n return '';\n });\n readonly errorsList = computed(() => [...this.validationStatusTexts.concat(this.fileUploadErrors())]);\n readonly currentFiles = signal<OptionalType<File[]>>(undefined);\n readonly labelSizeClasses = computed(() => {\n if (this.layout() !== 'horizontal') {\n return 'form-label';\n }\n\n return ColumnSizeHelper.getClasses(\n 'col-form-label',\n ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3)\n );\n });\n readonly firstFileName = computed(() => (this.currentFiles()?.length \|\| 0) > 0 ? this.currentFiles()![0].name : this.fileName());\n\n get titleText(): string {\n return this._textService.getText(this.title(), { isMultiple: this.isMultiple() });\n }\n get dropDescriptionText(): string {\n return !!this.descriptionText\n ? this.descriptionText\n : this._textService.getText(\n this.platformService.isMobile ? this.defaultMobileDesc : this.defaultDesktopDesc, { isMultiple: this.isMultiple() }\n );\n }\n get supportsAdvancedUpload(): boolean {\n const div = document.createElement('div');\n return (('draggable' in div) \|\| ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;\n }\n\n private readonly defaultMobileDesc: TextModel = {\n text: 'UpDevs.FormControls.FileUpload.DropzoneMobileDescription',\n isTranslated: false\n };\n private readonly defaultDesktopDesc: TextModel = {\n text: 'UpDevs.FormControls.FileUpload.DropzoneDesktopDescription',\n isTranslated: false\n };\n private readonly fileUploadErrors = signal<string[]>([]);\n private readonly platformService = inject(PlatformService);\n\n onFileChange(event: Event): void {\n event.stopPropagation();\n\n const files = Array.from((event.target as any).files as FileList);\n\n if (!!files) {\n this.currentFiles.set([...files]);\n this._updateFormControl([...files], true);\n\n const errors = files.map(f => this.getFileErrors(f)).reduce((acc, e) => acc.concat(e), []);\n\n if (errors.length > 0) {\n this.fileUploadErrors.set([...errors]);\n return;\n }\n\n if (this.isMultiple()) {\n // TODO: implement\n } else {\n const file = files[0];\n const reader = new FileReader();\n reader.onload = (fileReader: any) => this.fileChanged.emit({ file: file, dataUrl: fileReader.target.result });\n\n reader.readAsDataURL(file);\n }\n }\n }\n\n removeFile(): void {\n this.currentFiles.set([]);\n this._updateFormControl([], true);\n this.fileChanged.emit(undefined);\n }\n\n onDrag(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n onDragStart(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n }\n\n onDragEnd(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n }\n\n onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(true);\n }\n\n onDragEnter(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(true);\n }\n\n onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n }\n\n onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isOver.set(false);\n\n // TODO: const droppedFiles = event.dataTransfer!.files;\n }\n\n protected _getValue(): any {\n return this.currentFiles();\n }\n\n protected _updateValue(value: any): void {\n this.currentFiles.set(value);\n }\n\n private getFileErrors(file: File): string[] {\n const extension = `.${file.name.split('.').pop() \|\| ''}`;\n const fileSizeInKB = Math.round(file.size / 1024);\n const errors: string[] = [];\n\n if (this.allowedExtensions() !== '' && !this.allowedExtensions().includes(extension)) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.ExtensionNotAllowed', isTranslated: false },\n {\n fileName: file.name,\n extension,\n hasMultipleExt: this.allowedExtensions().includes(','),\n allowedExtensions: this.allowedExtensions()\n }\n )\n );\n }\n\n if (!!this.minFileSize() && fileSizeInKB < this.minFileSize()!) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.MinSizeNotMet', isTranslated: false },\n {\n fileName: file.name,\n fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n minAllowedSize: Tools.Text.formatKilobytes(this.minFileSize()!)\n }\n )\n );\n }\n\n if (!!this.maxFileSize() && fileSizeInKB > this.maxFileSize()!) {\n errors.push(\n this._textService.getText(\n { text: 'UpDevs.FormControls.FileUpload.MaxSizeExceeded', isTranslated: false },\n {\n fileName: file.name,\n fileSize: Tools.Text.formatKilobytes(fileSizeInKB),\n maxAllowedSize: Tools.Text.formatKilobytes(this.maxFileSize()!)\n }\n )\n );\n }\n\n return errors;\n }\n}\n","<input class=\"d-none\" [attr.id]=\"name()\" [attr.name]=\"name()\" type=\"file\" [attr.multiple]=\"isMultiple() ? true : undefined\"\n [accept]=\"allowedExtensions()\" (change)=\"onFileChange($event)\" />\n\n<div class=\"row\">\n <ng-container transloco=\"let t; prefix: 'UpDevs.FormControls.FileUpload'\">\n @if (!!labelText) {\n <div [ngClass]=\"labelSizeClasses()\">\n <label [class.required]=\"isRequired()\">{{ labelText }}</label>\n\n @if (!!hintText \|\| !!this.hintTemplate()) {\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n }\n </div>\n }\n\n @if (supportsAdvancedUpload && allowFilesDrop()) {\n <div class=\"d-flex flex-column border rounded-2 p-2 w-100 h-100\" [ngClass]=\"validationStatusBorderClass()\"\n [class.bg-muted-lt]=\"!isOver()\" [class.bg-primary-lt]=\"isOver()\" (drag)=\"onDrag($event)\" (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n @if (!!titleText) {\n <span class=\"fw-bold align-self-center cursor-pointer\" [innerHTML]=\"titleText\"></span>\n }\n\n <label [for]=\"name()\" class=\"text-secondary align-self-center cursor-pointer\" [innerHTML]=\"dropDescriptionText\"></label>\n\n @if (!labelText && (!!hintText \|\| !!this.hintTemplate())) {\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n }\n </div>\n } @else {\n @if (!labelText && (!!hintText \|\| !!this.hintTemplate())) {\n <div class=\"row g-2\">\n <div class=\"col\">\n <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n </div>\n <div class=\"col-auto align-self-center\">\n <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n </div>\n </div>\n } @else {\n <ng-template [ngTemplateOutlet]=\"inputTpl\"></ng-template>\n }\n }\n @if (validationStatus() === 'invalid' && errorsList().length > 0) {\n @for (desc of errorsList(); track desc) {\n <div class=\"invalid-feedback\">{{ desc }}</div>\n }\n }\n\n <ng-template #inputTpl>\n <div class=\"input-group col\">\n <label class=\"input-group-text cursor-pointer\" [ngClass]=\"validationStatusBorderClass()\" [for]=\"name()\">\n {{ t('SelectFile', { isMultiple: isMultiple() }) }}\n </label>\n <input type=\"text\" class=\"form-control text-truncate\" [class.border-end-0]=\"!!firstFileName()\"\n [value]=\"firstFileName() \|\| ''\"\n [ngClass]=\"validationStatusClass()\" placeholder=\"{{ t('NoFileSelected', { isMultiple: isMultiple() }) }}\"\n [attr.disabled]=\"isDisabled() \|\| undefined\" readonly>\n\n @if (!!firstFileName()) {\n <div class=\"input-group-text bg-transparent\" [ngClass]=\"validationStatusBorderClass()\">\n <upd-button [shouldIgnoreBtnClass]=\"true\" (clicked)=\"removeFile()\" customClasses=\"link-secondary cursor-pointer\">\n <upd-icon tablerIcon=\"trash\" [tablerIconSize]=\"18\"></upd-icon>\n </upd-button>\n </div>\n }\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<ng-template #hintTpl>\n <span class=\"form-help ms-2\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n ?\n </span>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslocoModule, TranslocoService } from '@jsverse/transloco';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\nimport { UpdPopoverModule } from '@updevs/components/popover';\n\nimport as en from './assets/i18n/en.json';\nimport * as pt from './assets/i18n/pt.json';\nimport { FileUploadComponent } from './file-upload.component';\n\n@NgModule({\n imports: [\n CommonModule,\n TranslocoModule,\n UpdButtonModule,\n UpdIconsModule,\n UpdPopoverModule\n ],\n declarations: [\n FileUploadComponent\n ],\n exports: [\n FileUploadComponent\n ]\n})\nexport class UpdFileUploadModule {\n constructor(translocoService: TranslocoService) {\n translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });\n translocoService.setTranslation(en, 'en');\n translocoService.setTranslation(pt, 'pt');\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["i2","en","pt","i1"],"mappings":"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"}

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

@@ -428,7 +428,7 @@ class SelectComponent extends BaseSelectComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: { classPropertyName: "useSystemStyle", publicName: "useSystemStyle", isSignal: true, isRequired: false, transformFunction: null }, shouldShowClearButton: { classPropertyName: "shouldShowClearButton", publicName: "shouldShowClearButton", isSignal: true, isRequired: false, transformFunction: null }, shouldTruncateSelectedText: { classPropertyName: "shouldTruncateSelectedText", publicName: "shouldTruncateSelectedText", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle()) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (shouldShowHintWithoutLabel()) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (shouldShowHintWithoutLabel()) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #hintTpl>\n    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [class.select-cursor-default]=\"!isDisabled()\"\n            [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span [ngClass]=\"canTruncateText ? 'd-block text-truncate' : ''\">{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton()) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'x', tablerIconSize: 16}\">\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'chevron-down', tablerIconSize: 16}\">\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact()\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        [class.disabled]=\"isDisabled()\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems(); track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-cursor-default{cursor:default}.select-cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { 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"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: { classPropertyName: "useSystemStyle", publicName: "useSystemStyle", isSignal: true, isRequired: false, transformFunction: null }, shouldShowClearButton: { classPropertyName: "shouldShowClearButton", publicName: "shouldShowClearButton", isSignal: true, isRequired: false, transformFunction: null }, shouldTruncateSelectedText: { classPropertyName: "shouldTruncateSelectedText", publicName: "shouldTruncateSelectedText", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle()) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (shouldShowHintWithoutLabel()) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (shouldShowHintWithoutLabel()) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #hintTpl>\n    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [class.select-cursor-default]=\"!isDisabled()\"\n            [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span [ngClass]=\"canTruncateText ? 'd-block text-truncate' : ''\">{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton()) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'x', tablerIconSize: 16}\">\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'chevron-down', tablerIconSize: 16}\">\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact()\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        [class.disabled]=\"isDisabled()\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems(); track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-cursor-default{cursor:default}.select-cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { 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", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -524,7 +524,7 @@ class SelectMultipleComponent extends BaseSelectComponent {
         this._setupLocalItems(this._localBackupItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectMultipleComponent, selector: "upd-select-multiple", inputs: { selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { 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"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectMultipleComponent, selector: "upd-select-multiple", inputs: { selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { 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", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,