@updevs/components 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -0,0 +1 @@
+{"version":3,"file":"updevs-components-card.mjs","sources":["../../../../libs/components/card/src/directives/card-actions.directive.ts","../../../../libs/components/card/src/directives/card-footer.directive.ts","../../../../libs/components/card/src/directives/card-header.directive.ts","../../../../libs/components/card/src/directives/card-image.directive.ts","../../../../libs/components/card/src/card.component.ts","../../../../libs/components/card/src/card.component.html","../../../../libs/components/card/src/upd-card.module.ts","../../../../libs/components/card/src/updevs-components-card.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updCardActions]'\n})\nexport class CardActionsDirective {\n    public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updCardFooter]'\n})\nexport class CardFooterDirective {\n    public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updCardHeader]'\n})\nexport class CardHeaderDirective {\n    public readonly templateRef = inject(TemplateRef<any>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n    selector: 'ng-template[updCardImage]'\n})\nexport class CardImageDirective {\n    public readonly templateRef = inject(TemplateRef<any>);\n}\n","import {\n    Component,\n    Input,\n    ContentChild,\n    SimpleChanges,\n    OnInit,\n    OnChanges,\n    ViewEncapsulation, HostBinding\n} from '@angular/core';\nimport { ButtonModel } from '@updevs/sdk/layout';\nimport { TopBottomLeftRightType, BgColorStyleType } from '@updevs/sdk/types';\nimport { IconModel } from '@updevs/icons';\n\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { HoverEffectType } from './types/hover-effect.type';\nimport { CardStateType } from './types/card-state.type';\nimport { StatusPositionType } from './types/status-position.type';\nimport { RibbonStyleType } from './types/ribbon-style.type';\nimport { CardStyleType } from './types/card-style.type';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@Component({\n    selector: 'upd-card',\n    templateUrl: './card.component.html',\n    styleUrls: ['./card.component.scss'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class CardComponent implements OnInit, OnChanges {\n    @HostBinding('class') @Input() wrapperClasses = '';\n    @ContentChild(CardHeaderDirective) headerTemplate?: CardHeaderDirective;\n    @ContentChild(CardFooterDirective) footerTemplate?: CardFooterDirective;\n    @ContentChild(CardImageDirective) imageTemplate?: CardImageDirective;\n    @ContentChild(CardActionsDirective) actionsTemplate?: CardActionsDirective;\n\n    @Input() title?: string;\n    @Input() subtitle?: string;\n    @Input() hoverEffect?: HoverEffectType;\n    @Input() state?: CardStateType;\n    @Input() type?: CardStyleType;\n    @Input() imagePosition?: TopBottomLeftRightType;\n    @Input() bgColor?: BgColorStyleType;\n    @Input() stampIcon?: IconModel;\n    @Input() stampBackground: BgColorStyleType = 'primary';\n    @Input() statusBackground?: BgColorStyleType;\n    @Input() statusPosition: StatusPositionType = 'top';\n    @Input() ribbonBackground?: BgColorStyleType;\n    @Input() ribbonStyle: RibbonStyleType = 'default';\n    @Input() ribbonIcon?: IconModel = { tablerIcon: 'star' };\n    @Input() ribbonText?: string;\n    @Input() rotate?: 'right' | 'left';\n    @Input() removeBorder = false;\n    @Input() useLightHeader = false;\n    /**\n     * Whether the header should be displayed.\n     */\n    @Input() showHeader = true;\n    @Input() isFooterTransparent = false;\n    @Input() footerText?: string;\n    @Input() showProgressBar = false;\n    @Input() progress?: number;\n    @Input() actions: ButtonModel[] = [];\n\n    classes: string[] = [];\n\n    ngOnInit(): void {\n        this.updateClasses();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.updateClasses();\n    }\n\n    private updateClasses(): void {\n        const lClasses: string[] = [];\n\n        if (this.removeBorder) {\n            lClasses.push('card-borderless');\n        }\n\n        if (!!this.hoverEffect) {\n            lClasses.push('card-link');\n\n            if (this.hoverEffect !== 'default') {\n                lClasses.push(`card-link-${this.hoverEffect}`);\n            }\n        }\n\n        if (!!this.state) {\n            lClasses.push(`card-${this.state}`);\n        }\n\n        if (!!this.bgColor) {\n            lClasses.push(`bg-${this.bgColor}`);\n        }\n\n        if (!!this.rotate) {\n            lClasses.push(`card-rotate-${this.rotate}`);\n        }\n\n        if (!!this.type) {\n            lClasses.push(`card-${this.type}`);\n        }\n\n        if (!!this.hoverEffect) {\n            this.classes = [...lClasses];\n        } else {\n            this.wrapperClasses = 'card ' + lClasses.join(' ');\n        }\n    }\n}\n","<ng-template *ngIf=\"!hoverEffect; else linkTpl\" [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n\n<!-- Template for cards that are links -->\n<ng-template #linkTpl>\n    <a href=\"#\" class=\"card\" [ngClass]=\"classes\">\n        <ng-template [ngTemplateOutlet]=\"structureTpl\"></ng-template>\n    </a>\n</ng-template>\n\n<ng-template #structureTpl>\n    <!-- Ribbon -->\n    <div *ngIf=\"!!ribbonBackground\" class=\"ribbon {{ribbonStyle === 'default' ? '' : 'ribbon-' + ribbonStyle}} bg-{{ribbonBackground}}\">\n        <span *ngIf=\"!!ribbonText; else ribbonIconTpl\">{{ribbonText}}</span>\n        <ng-template #ribbonIconTpl>\n            <upd-icon [model]=\"ribbonIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </ng-template>\n    </div>\n\n    <!-- Status -->\n    <div *ngIf=\"!!statusBackground\" class=\"card-status-{{statusPosition}} bg-{{statusBackground}}\"></div>\n\n    <!-- Stamp -->\n    <div *ngIf=\"!!stampIcon\" class=\"card-stamp\">\n        <div class=\"card-stamp-icon bg-{{stampBackground}}\">\n            <upd-icon [model]=\"stampIcon\" wrapperClasses=\"icon\" [removeDefaultClasses]=\"true\"></upd-icon>\n        </div>\n    </div>\n\n    <!-- Header section -->\n    <div *ngIf=\"showHeader && (!!title || !!headerTemplate?.templateRef)\" class=\"card-header\" [class.card-header-light]=\"useLightHeader\">\n        <ng-container *ngIf=\"!headerTemplate?.templateRef; else customHeaderTpl\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-template #customHeaderTpl [ngTemplateOutlet]=\"headerTemplate?.templateRef || null\"></ng-template>\n\n        <!-- Actions -->\n        <div *ngIf=\"!!actionsTemplate || actions.length > 0\" class=\"card-actions\">\n            <ng-container *ngIf=\"actions.length > 0; else customActionsTpl\">\n                <upd-button *ngFor=\"let btn of actions\" [model]=\"btn\" customClasses=\"me-1\"></upd-button>\n            </ng-container>\n            <ng-template #customActionsTpl [ngTemplateOutlet]=\"actionsTemplate?.templateRef || null\"></ng-template>\n        </div>\n    </div>\n\n    <!-- Body -->\n    <ng-container *ngIf=\"!!imageTemplate; else bodyTpl\">\n        <ng-template *ngIf=\"imagePosition === 'left' || imagePosition === 'right'; else bodyWithTopBottomImageTpl\"\n            [ngTemplateOutlet]=\"bodyWithSideImageTpl\"></ng-template>\n    </ng-container>\n\n    <!-- Footer -->\n    <div *ngIf=\"!!footerText || !!footerTemplate\" class=\"card-footer\" [class.card-footer-transparent]=\"isFooterTransparent\">\n        <ng-container *ngIf=\"!footerTemplate?.templateRef; else customFooterTpl\">\n            <span *ngIf=\"!!footerText\">{{footerText}}</span>\n        </ng-container>\n        <ng-template #customFooterTpl [ngTemplateOutlet]=\"footerTemplate?.templateRef || null\"></ng-template>\n    </div>\n\n    <!-- Progress bar -->\n    <div *ngIf=\"showProgressBar\" class=\"progress progress-sm card-progress\">\n        <div class=\"progress-bar\" [style.width.%]=\"progress\" role=\"progressbar\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\"\n            aria-valuemax=\"100\">\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on either side -->\n<ng-template #bodyWithSideImageTpl>\n    <div class=\"row row-0\">\n        <div class=\"col-3\" [class.order-md-last]=\"imagePosition === 'right'\">\n            <div class=\"card-image-{{imagePosition}}\">\n                <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n            </div>\n        </div>\n        <div class=\"col\">\n            <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body with an image on top or bottom -->\n<ng-template #bodyWithTopBottomImageTpl>\n    <div *ngIf=\"imagePosition === 'top'\" class=\"img-responsive-21x9 card-img-top\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"bodyTpl\"></ng-template>\n    <div *ngIf=\"imagePosition === 'bottom'\" class=\"img-responsive-21x9 card-img-bottom\">\n        <div class=\"card-image-{{imagePosition}}\">\n            <ng-template [ngTemplateOutlet]=\"imageTemplate!.templateRef\"></ng-template>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Body -->\n<ng-template #bodyTpl>\n    <div class=\"card-body\">\n        <!-- If title was set, but the header section is hidden, we add the title to the body -->\n        <ng-container *ngIf=\"!showHeader && !!title\">\n            <h3 class=\"card-title\">{{title}} <span *ngIf=\"!!subtitle\" class=\"card-subtitle\">{{subtitle}}</span></h3>\n        </ng-container>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { UpdIconsModule } from '@updevs/icons';\nimport { UpdButtonModule } from '@updevs/components/button';\n\nimport { CardComponent } from './card.component';\nimport { CardHeaderDirective } from './directives/card-header.directive';\nimport { CardFooterDirective } from './directives/card-footer.directive';\nimport { CardImageDirective } from './directives/card-image.directive';\nimport { CardActionsDirective } from './directives/card-actions.directive';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        UpdIconsModule,\n        UpdButtonModule\n    ],\n    declarations: [\n        CardComponent,\n        CardHeaderDirective,\n        CardFooterDirective,\n        CardImageDirective,\n        CardActionsDirective\n    ],\n    exports: [\n        CardComponent,\n        CardHeaderDirective,\n        CardFooterDirective,\n        CardImageDirective\n    ]\n})\nexport class UpdCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/updevs-components-drag-and-drop.mjs

@@ -0,0 +1,185 @@
+import * as i0 from '@angular/core';
+import { signal, input, model, computed, inject, Component, NgModule } from '@angular/core';
+import { TextService } from '@updevs/sdk';
+import * as i1 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import { CommonModule } from '@angular/common';
+
+class DragAndDropItemModel {
+    get isDraggable() {
+        return this.canDrag && !this.isDisabled;
+    }
+    constructor(init) {
+        this.isDisabled = false;
+        this.canDrag = true;
+        this.canBeEmpty = true; // TODO: implement
+        this.isBeingDragged = signal(false);
+        Object.assign(this, init);
+    }
+}
+
+class DragAndDropColumnModel {
+    constructor(init) {
+        Object.assign(this, init);
+        this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));
+    }
+}
+
+class DragAndDropComponent {
+    constructor() {
+        this.config = input.required();
+        this.columns = model([]);
+        this.showHandler = computed(() => this.config().showHandler || false);
+        this.canReorder = computed(() => this.config().canReorder || false);
+        this.textService = inject(TextService);
+        this.isReordering = signal(false);
+        this.draggedItem = signal(undefined);
+        this.dragEnterCounter = 0;
+    }
+    ngOnInit() {
+        this.columns.set(this.config().columns.map(c => new DragAndDropColumnModel(c)));
+    }
+    canShowHandler(item) {
+        return this.showHandler() && item.isDraggable;
+    }
+    startDrag(event, item, origin) {
+        item.origin = origin;
+        this.draggedItem.set(item);
+        item.isBeingDragged.set(true);
+        event.dataTransfer.effectAllowed = 'move';
+    }
+    endDrag(item) {
+        item.isBeingDragged.set(false);
+        this.draggedItem.set(undefined);
+    }
+    drop(event, destination) {
+        event.preventDefault();
+        this.dragEnterCounter = 0;
+        const dataTransfer = event.dataTransfer;
+        dataTransfer.dropEffect = 'move';
+        const itemName = this.draggedItem()?.name;
+        const origin = this.draggedItem()?.origin;
+        const item = this.columns().find(c => c.name === origin)?.items().find(i => i.name === itemName);
+        if (!!item && (this.canReorder() || destination !== origin)) {
+            const destinationColumn = this.columns().find(c => c.name === destination);
+            const originColumn = this.columns().find(c => c.name === origin);
+            if (!!destinationColumn) {
+                item.isBeingDragged.set(false);
+                this.draggedItem.set(undefined);
+                // We only move items if it's a move between containers, if it's a reorder, nothing needs to be done.
+                // The item was correctly replaced during dragOver.
+                if (destination !== origin) {
+                    const originIdx = originColumn.items().findIndex(i => i.name === itemName);
+                    const destinationIdx = destinationColumn.items().findIndex(i => i.name === itemName);
+                    originColumn.items().splice(originIdx, 1);
+                    // This is required, because the item may have been added during dragOver. TODO: check
+                    if (destinationIdx >= 0) {
+                        dataTransfer.clearData();
+                        return;
+                    }
+                    destinationColumn.items().push(item);
+                    const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);
+                    this.columns.update(curr => {
+                        curr[destinationColumnIdx] = destinationColumn;
+                        return [...curr];
+                    });
+                }
+                dataTransfer.clearData();
+            }
+        }
+    }
+    dragOver(event, destination) {
+        event.preventDefault();
+        const destinationColumn = this.columns().find(c => c.name === destination);
+        if (this.isReordering() || destinationColumn.items().length === 0) {
+            return;
+        }
+        event.dataTransfer.dropEffect = 'move';
+        this.isReordering.set(true);
+        const element = event.target;
+        if (!!element.id && !!this.draggedItem() && element.id !== this.draggedItem().name) {
+            const destinationHoverIdx = destinationColumn.items().findIndex(i => i.name === element.id);
+            const rect = element.getBoundingClientRect();
+            const y = event.clientY - rect.top;
+            const newOverZone = y <= rect.height / 2 ? 'top' : 'bottom';
+            destinationColumn.items.update(curr => {
+                const originalArray = [...curr];
+                if (destinationHoverIdx >= 0) {
+                    if (destinationHoverIdx === 0 && newOverZone === 'top') {
+                        originalArray.unshift(this.draggedItem());
+                    }
+                    else if (destinationHoverIdx === curr.length - 1 && newOverZone === 'bottom') {
+                        originalArray.push(this.draggedItem());
+                    }
+                    else {
+                        const originalItem = curr[destinationHoverIdx];
+                        originalArray.splice(destinationHoverIdx, 1);
+                        originalArray.splice(destinationHoverIdx + (newOverZone === 'top' ? -1 : 1), 0, originalItem);
+                    }
+                }
+                else if (!!this.draggedItem()) {
+                    originalArray.push(this.draggedItem());
+                }
+                return originalArray;
+            });
+            const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);
+            this.columns.update(curr => {
+                curr[destinationColumnIdx] = destinationColumn;
+                return [...curr];
+            });
+        }
+        this.isReordering.set(false);
+    }
+    dragEnter() {
+        this.dragEnterCounter++;
+    }
+    dragLeave(columnName) {
+        this.dragEnterCounter--;
+        if (this.dragEnterCounter === 0 && !!this.draggedItem()?.origin && this.draggedItem()?.origin !== columnName) {
+            const column = this.columns().find(c => c.name === columnName);
+            const idx = column.items().findIndex(i => i.name === this.draggedItem()?.name);
+            if (idx >= 0) {
+                column.items.update(curr => {
+                    curr.splice(idx, 1);
+                    return [...curr];
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DragAndDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DragAndDropComponent, selector: "upd-drag-and-drop", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DragAndDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-drag-and-drop', template: "<div class=\"d-flex w-100\">\n    @for (col of columns(); track col.name) {\n        <div class=\"d-flex flex-column w-100 me-2 bg-body p-4 rounded\" (drop)=\"drop($event, col.name)\"\n            (dragover)=\"dragOver($event, col.name)\" (dragenter)=\"dragEnter()\" (dragleave)=\"dragLeave(col.name)\">\n            @if (!!col.title) {\n                <div class=\"mb-2\">\n                    <h1>{{ textService.getText(col.title) }}</h1>\n                </div>\n            }\n            @for (item of col.items(); track item.name) {\n                <div class=\"d-flex border p-2 mb-1 bg-muted-lt rounded\" [attr.draggable]=\"item.isDraggable\" [attr.id]=\"item.name\"\n                    [class.draggable]=\"item.isDraggable\" [class.opacity-25]=\"item.isBeingDragged()\"\n                    (dragstart)=\"startDrag($event, item, col.name)\" (dragend)=\"endDrag(item)\">\n                    @if (canShowHandler(item)) {\n                        <upd-icon tablerIcon=\"grip-vertical\" customClasses=\"me-2\"></upd-icon>\n                    }\n                    <div class=\"flex-grow-1 align-content-center\">\n                        <span>{{ textService.getText(item.text) }}</span>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".draggable{cursor:move;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
+
+class UpdDragAndDropModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, declarations: [DragAndDropComponent], imports: [CommonModule,
+            UpdIconsModule], exports: [DragAndDropComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, imports: [CommonModule,
+            UpdIconsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDragAndDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdIconsModule
+                    ],
+                    declarations: [
+                        DragAndDropComponent
+                    ],
+                    exports: [
+                        DragAndDropComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DragAndDropColumnModel, DragAndDropComponent, UpdDragAndDropModule };
+//# sourceMappingURL=updevs-components-drag-and-drop.mjs.map

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

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

package/fesm2022/updevs-components-dropdown.mjs

@@ -0,0 +1,226 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, input, inject, NgZone, ElementRef, Renderer2, RendererStyleFlags2, Component, ViewEncapsulation, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { BaseComponent, PositioningService, DomEventsService } from '@updevs/sdk/layout';
+import { TextService } from '@updevs/sdk';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import * as i3 from '@updevs/components/form-controls/radio';
+import { UpdRadioModule } from '@updevs/components/form-controls/radio';
+import * as i4 from '@updevs/components/form-controls/checkbox';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import * as i5 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+
+class DropdownComponent extends BaseComponent {
+    set isOpen(value) {
+        this.updateOpenState(value);
+        if (this.shouldCloseOnOutsideClick) {
+            this.closeOnOutsideClick();
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
+    get overflowClass() {
+        switch (this.textOverflowStrategy()) {
+            case 'no-wrap':
+                return 'text-nowrap';
+            case 'wrap':
+                return 'text-wrap';
+            case 'word-break':
+                return 'text-break';
+            default:
+                return 'text-truncate';
+        }
+    }
+    constructor() {
+        super();
+        this.localWrapperClasses = '';
+        this.items = [];
+        this.shouldCloseOnOutsideClick = false;
+        this.wrapperClasses = '';
+        /**
+         * If a reference is provided, this will be the position of the dropdown in relation to that reference.
+         */
+        this.dropdownReferencePosition = 'bottom';
+        this.isOpenChange = new EventEmitter();
+        this.selectedItem = new EventEmitter();
+        this.checkboxChanged = new EventEmitter();
+        this.textOverflowStrategy = input('wrap');
+        this.textService = inject(TextService);
+        this.baseWrapperClasses = 'dropdown-menu';
+        this._isOpen = false;
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.positioningService = inject(PositioningService);
+        this.domEventsService = inject(DomEventsService);
+        this.dropdownElement = this.elementRef.nativeElement;
+    }
+    ngOnInit() {
+        this.updateStyle();
+    }
+    ngOnChanges() {
+        this.updateStyle();
+    }
+    onSelect(item) {
+        this.selectedItem.emit(item);
+    }
+    onCheckboxChange(item, isChecked) {
+        item.isChecked = isChecked;
+        this.checkboxChanged.emit(item);
+    }
+    adaptAction(btn, item) {
+        const defaultFunction = btn.clickFunction;
+        btn.clickFunction = (evt) => {
+            evt.event?.preventDefault();
+            evt.event?.stopPropagation();
+            if (!!defaultFunction) {
+                defaultFunction({ event: evt.event, data: { item, button: btn } });
+            }
+        };
+        return btn;
+    }
+    closeOnOutsideClick() {
+        const excludedElements = [];
+        if (!!this.dropdownReference) {
+            excludedElements.push(this.dropdownReference.nativeElement);
+        }
+        const outsideClickSub = this.domEventsService.startOutsideClickListener(() => this.ngZone.run(() => {
+            this.updateOpenState(false);
+            this.ngZone.run(() => this.updateWrapperClasses());
+        }), this.dropdownElement, true, ...excludedElements);
+        this.addSubscriptions(outsideClickSub);
+    }
+    updateStyle() {
+        this.updateWrapperClasses();
+        this.updateMaxHeight();
+        this.startPositionUpdate();
+    }
+    updateWrapperClasses() {
+        this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;
+        if (this.isOpen) {
+            this.localWrapperClasses += ' dropdown-show';
+        }
+        if (!!this.arrowType) {
+            this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');
+        }
+        if (!!this.maxHeight) {
+            this.localWrapperClasses += ' dropdown-overflow';
+        }
+    }
+    updateOpenState(isOpen) {
+        this._isOpen = isOpen;
+        this.isOpenChange.emit(isOpen);
+    }
+    updateMaxHeight() {
+        this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);
+    }
+    startPositionUpdate() {
+        if (!this.dropdownReference) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => this.positioningService
+            .computePosition(this.dropdownReference, this.elementRef, { placement: this.dropdownReferencePosition }, undefined, undefined, true)
+            .subscribe(resp => this.updatePosition(resp)));
+    }
+    updatePosition(result) {
+        const reference = this.dropdownReference.nativeElement.getBoundingClientRect();
+        const ddElement = this.dropdownElement;
+        const width = Math.abs(reference.width);
+        let widthOffset = 0;
+        if (!!this.maxWidth) {
+            this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
+        }
+        if (!!this.minWidth) {
+            this.renderer.setStyle(ddElement, 'min-width', `${this.minWidth}px`, RendererStyleFlags2.Important);
+            widthOffset = (this.minWidth > width ? this.minWidth - width : 0) / 2; // TODO: check logic
+        }
+        this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'width', `${width}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'left', `${result.x - widthOffset}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: DropdownComponent, selector: "upd-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: false, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: false, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: false, isRequired: false, transformFunction: null }, elementsExcludedFromOutsideClick: { classPropertyName: "elementsExcludedFromOutsideClick", publicName: "elementsExcludedFromOutsideClick", isSignal: false, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, dropdownReference: { classPropertyName: "dropdownReference", publicName: "dropdownReference", isSignal: false, isRequired: false, transformFunction: null }, dropdownReferencePosition: { classPropertyName: "dropdownReferencePosition", publicName: "dropdownReferencePosition", isSignal: false, isRequired: false, transformFunction: null }, textOverflowStrategy: { classPropertyName: "textOverflowStrategy", publicName: "textOverflowStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", selectedItem: "selectedItem", checkboxChanged: "checkboxChanged" }, host: { properties: { "class": "this.localWrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track item) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i3.RadioComponent, selector: "upd-radio", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline"], outputs: ["selected"] }, { kind: "component", type: i4.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-dropdown', encapsulation: ViewEncapsulation.None, template: "@if (!!header) {\n    <h6 class=\"dropdown-header\">{{ header }}</h6>\n}\n\n@for (item of items; track item) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"\n                [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                {{ textService.getText(item.text) }}\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </upd-button>\n        }\n        @case ('radio') {\n            <upd-radio (selected)=\"onSelect(item)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-radio>\n        }\n        @case ('checkbox') {\n            <upd-checkbox (changed)=\"onCheckboxChange(item, $event)\" [label]=\"item.text\" [isChecked]=\"item.isChecked || false\"\n                [isSwitch]=\"item.isSwitch || false\"\n                [wrapperClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"></upd-checkbox>\n        }\n        @case ('with-toolbar') {\n            <div class=\"dropdown-item\" [class.disabled]=\"item.isDisabled\" [class.active]=\"item.isActive\" (click)=\"onSelect(item)\">\n                @if (!!item.icon) {\n                    <upd-icon [model]=\"item.icon\" customClasses=\"dropdown-item-icon\"></upd-icon>\n                }\n\n                @if (!!item.leftBoxText || !!item.leftBoxImage) {\n                    <span style=\"background-image: url({{item.leftBoxImage}})\"\n                        class=\"avatar avatar-xs rounded me-2\">{{ item.leftBoxText }}</span>\n                }\n\n                <span [ngClass]=\"overflowClass\">\n                    {{ textService.getText(item.text) }}\n                </span>\n\n                @if ((item.actionButtons?.length || 0) > 0) {\n                    <div class=\"ms-auto d-flex\" [class.btn-group]=\"item.toolbarType === 'grouped'\"\n                        [class.gap-1]=\"item.toolbarType === 'spaced'\">\n                        @for (btn of item.actionButtons; track btn) {\n                            <upd-button [model]=\"adaptAction(btn, item)\"></upd-button>\n                        }\n                    </div>\n                }\n\n                @if (!!item.badgeColor) {\n                    <span class=\"badge bg-{{item.badgeColor}} ms-auto\">{{ item.badgeText }}</span>\n                }\n            </div>\n        }\n    }\n}\n\n<ng-content></ng-content>\n", styles: [".dropdown-show{display:inline-block!important;width:100%!important;position:relative;top:0!important;margin-bottom:1rem!important}.dropdown-item>.form-check{margin-bottom:0!important}.dropdown-item{cursor:pointer!important}.dropdown-overflow{overflow-y:auto!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { localWrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], items: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], shouldCloseOnOutsideClick: [{
+                type: Input
+            }], arrowType: [{
+                type: Input
+            }], wrapperClasses: [{
+                type: Input
+            }], elementsExcludedFromOutsideClick: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], dropdownReference: [{
+                type: Input
+            }], dropdownReferencePosition: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }], selectedItem: [{
+                type: Output
+            }], checkboxChanged: [{
+                type: Output
+            }] } });
+
+class UpdDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, declarations: [DropdownComponent], imports: [CommonModule,
+            UpdIconsModule,
+            UpdRadioModule,
+            UpdCheckboxModule,
+            UpdButtonModule], exports: [DropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, imports: [CommonModule,
+            UpdIconsModule,
+            UpdRadioModule,
+            UpdCheckboxModule,
+            UpdButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdIconsModule,
+                        UpdRadioModule,
+                        UpdCheckboxModule,
+                        UpdButtonModule
+                    ],
+                    declarations: [
+                        DropdownComponent
+                    ],
+                    exports: [
+                        DropdownComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, UpdDropdownModule };
+//# sourceMappingURL=updevs-components-dropdown.mjs.map

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

@@ -0,0 +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} 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';\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 readonly dropdownElement: HTMLElement;\n    private readonly ngZone = inject(NgZone);\n    private readonly elementRef = inject(ElementRef);\n    private readonly renderer = inject(Renderer2);\n    private readonly positioningService = inject(PositioningService);\n    private readonly domEventsService = inject(DomEventsService);\n\n    constructor() {\n        super();\n        this.dropdownElement = this.elementRef.nativeElement;\n    }\n\n    ngOnInit(): void {\n        this.updateStyle();\n    }\n\n    ngOnChanges(): 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        return btn;\n    }\n\n    private closeOnOutsideClick(): void {\n        const excludedElements = [];\n\n        if (!!this.dropdownReference) {\n            excludedElements.push(this.dropdownReference.nativeElement);\n        }\n\n        const outsideClickSub = this.domEventsService.startOutsideClickListener(\n            () => this.ngZone.run(() => {\n                this.updateOpenState(false);\n                this.ngZone.run(() => this.updateWrapperClasses());\n            }),\n            this.dropdownElement,\n            true,\n            ...excludedElements\n        );\n        this.addSubscriptions(outsideClickSub);\n    }\n\n    private updateStyle(): void {\n        this.updateWrapperClasses();\n        this.updateMaxHeight();\n        this.startPositionUpdate();\n    }\n\n    private updateWrapperClasses(): void {\n        this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;\n\n        if (this.isOpen) {\n            this.localWrapperClasses += ' dropdown-show';\n        }\n\n        if (!!this.arrowType) {\n            this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');\n        }\n\n        if (!!this.maxHeight) {\n            this.localWrapperClasses += ' dropdown-overflow';\n        }\n    }\n\n    private updateOpenState(isOpen: boolean): void {\n        this._isOpen = isOpen;\n        this.isOpenChange.emit(isOpen);\n    }\n\n    private updateMaxHeight(): void {\n        this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);\n    }\n\n    private startPositionUpdate(): void {\n        if (!this.dropdownReference) {\n            return;\n        }\n\n        this.ngZone.runOutsideAngular(() =>\n            this.positioningService\n                .computePosition(\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    }\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 item) {\n    @switch (item.type) {\n        @case ('divider') {\n            <div class=\"dropdown-divider\"></div>\n        }\n        @case ('default') {\n            <upd-button [customClasses]=\"'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')\"\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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"}