import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
import * as i1 from '@ironsource/fusion-ui/components/icon/v1';
import { IconModule } from '@ironsource/fusion-ui/components/icon/v1';
import { DragAndDropDirective } from '@ironsource/fusion-ui/directives/drag-and-drop';
import { IconButtonComponent } from '@ironsource/fusion-ui/components/button/v4';

const _forTrack0 = ($index, $item) => $item.label;
function DraggableItemsListComponent_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 2, 0)(2, "div", 3);
    i0.ɵɵelement(3, "fusion-icon", 4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 5)(5, "div", 6);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "fusion-icon-button", 7);
    i0.ɵɵlistener("click", function DraggableItemsListComponent_For_2_Template_fusion_icon_button_click_7_listener() { const ɵ$index_3_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeItem(ɵ$index_3_r2)); });
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const item_r4 = ctx.$implicit;
    i0.ɵɵattribute("data-id", item_r4.id);
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate(item_r4.label);
} }
class DraggableItemsListComponent {
    constructor() {
        this.orderChanged = new EventEmitter();
        this.itemRemoved = new EventEmitter();
        this.#items = [];
    }
    set items(value) {
        if (Array.isArray(value)) {
            this.#items = [...value];
        }
    }
    get items() {
        return this.#items;
    }
    #items;
    removeItem(index) {
        this.#items.splice(index, 1);
        this.itemRemoved.emit({ removedAtIndex: index, itemList: this.items });
    }
    static { this.ɵfac = function DraggableItemsListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DraggableItemsListComponent)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DraggableItemsListComponent, selectors: [["fusion-draggable-items-list"]], hostAttrs: [1, "fusion-v4"], inputs: { items: "items" }, outputs: { orderChanged: "orderChanged", itemRemoved: "itemRemoved" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 0, consts: [["draggableItem", ""], ["fusionDragAndDrop", "", 1, "fu-items-wrapper", 3, "dragElementDrop"], [1, "fu-list-item"], [1, "fu-item-drag-icon"], ["name", "ph/bold/dots-six-vertical", 1, "fu-drag-icon"], [1, "fu-item-content"], [1, "fu-item-label"], ["iconName", "ph/x", "size", "extraSmall", 3, "click"]], template: function DraggableItemsListComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "ul", 1);
            i0.ɵɵlistener("dragElementDrop", function DraggableItemsListComponent_Template_ul_dragElementDrop_0_listener($event) { return ctx.orderChanged.emit($event); });
            i0.ɵɵrepeaterCreate(1, DraggableItemsListComponent_For_2_Template, 8, 2, "li", 2, _forTrack0);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵrepeater(ctx.items);
        } }, dependencies: [IconModule, i1.IconComponent, DragAndDropDirective, IconButtonComponent], styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%], .font-v4-chart-2[_ngcontent-%COMP%], .font-v4-chart-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold[_ngcontent-%COMP%], .font-v4-chip-label[_ngcontent-%COMP%], .font-v4-table-label[_ngcontent-%COMP%], .font-v4-button[_ngcontent-%COMP%], .font-v4-heading-6[_ngcontent-%COMP%], .font-v4-heading-5[_ngcontent-%COMP%], .font-v4-heading-4[_ngcontent-%COMP%], .font-v4-heading-3[_ngcontent-%COMP%], .font-v4-heading-2[_ngcontent-%COMP%], .font-v4-heading-1[_ngcontent-%COMP%], .font-v4-title[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium[_ngcontent-%COMP%], .font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-input-label[_ngcontent-%COMP%], .font-v4-overline[_ngcontent-%COMP%], .font-v4-subtitle-2[_ngcontent-%COMP%], .font-v4-subtitle-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular[_ngcontent-%COMP%], .font-v4-caption[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]   .fu-item-label[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title[_ngcontent-%COMP%]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2[_ngcontent-%COMP%]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3[_ngcontent-%COMP%]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5[_ngcontent-%COMP%]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6[_ngcontent-%COMP%]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-v4-body-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]   .fu-item-label[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2[_ngcontent-%COMP%]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.font-v4-table-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem}.font-v4-chip-label[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:normal}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ngcontent-%COMP%_shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}[_nghost-%COMP%]{--fu-list-items-gap: 6px;--fu-list-item-padding: 0 8px 0 0;--fu-list-item-heigth: 32px;--fu-list-item-background-color: var(--background-paper, hsl(0, 0%, 99%));--fu-list-item-drag-over-background-color: var(--background-paper-elevation-2, hsl(0, 0%, 92%));--fu-list-item-drag-over-border-color: var(--background-paper-elevation-2, hsl(0, 0%, 92%));--fu-list-item-border-color: var(--default-outlinedBorder, hsl(0, 0%, 73.2%));--fu-list-item-hover-border-color: var(--action-active, hsl(0, 0%, 50.3%));--fu-list-item-border: 1px solid var(--fu-list-item-border-color);--fu-list-item-border-radius: 4px;--fu-list-item-drag-icon-size: 20px;--fu-list-item-drag-icon-padding: 0 8px;--fu-list-item-drag-icon-color: var(--action-active, hsl(0, 0%, 50.3%));--fu-list-item-hover-drag-icon-color: var(--action-primary, hsl(0, 0%, 12.5%));--fu-list-item-drag-label-color: var(--text-primary, hsl(0, 0%, 12.5%));--fu-list-item-draging-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, .08), 0px 4px 6px -2px rgba(16, 24, 40, .03);--fu-list-item-content-gap: 4px}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:var(--fu-list-items-gap);padding:0;margin:0;list-style-type:none}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]{-webkit-user-select:none;user-select:none;padding:var(--fu-list-item-padding);margin:0;width:100%;height:var(--fu-list-item-heigth);display:flex;align-items:center;border:var(--fu-list-item-border);border-radius:var(--fu-list-item-border-radius);background-color:var(--fu-list-item-background-color)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-drag-icon[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;padding:var(--fu-list-item-drag-icon-padding)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-drag-icon[_ngcontent-%COMP%]   .fu-drag-icon[_ngcontent-%COMP%]{width:var(--fu-list-item-drag-icon-size);height:var(--fu-list-item-drag-icon-size);color:var(--fu-list-item-drag-icon-color)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]{flex:1;display:flex;align-items:center;gap:var(--fu-list-item-border)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]   .fu-item-label[_ngcontent-%COMP%]{color:var(--fu-list-item-drag-label-color)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]   fusion-icon-button[_ngcontent-%COMP%]{margin-left:auto}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]:hover{border-color:var(--fu-list-item-hover-border-color);cursor:grab}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item[_ngcontent-%COMP%]:hover   .fu-item-drag-icon[_ngcontent-%COMP%]   .fu-drag-icon[_ngcontent-%COMP%]{color:var(--fu-list-item-hover-drag-icon-color)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging[_ngcontent-%COMP%]{cursor:grab}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging[_ngcontent-%COMP%]:active{cursor:grab;box-shadow:var(--fu-list-item-draging-box-shadow)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging-transit[_ngcontent-%COMP%]{color:transparent;background-color:var(--fu-list-item-drag-over-background-color);border-color:var(--fu-list-item-drag-over-border-color)}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging-transit[_ngcontent-%COMP%]   .fu-item-drag-icon[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging-transit[_ngcontent-%COMP%]   .fu-item-content[_ngcontent-%COMP%]{visibility:hidden}[_nghost-%COMP%]   .fu-items-wrapper[_ngcontent-%COMP%]   .fu-list-item.dragging-transit[_ngcontent-%COMP%]:hover{border-color:var(--fu-list-item-drag-over-border-color)}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DraggableItemsListComponent, [{
        type: Component,
        args: [{ selector: 'fusion-draggable-items-list', standalone: true, host: { class: 'fusion-v4' }, imports: [IconModule, DragAndDropDirective, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"fu-items-wrapper\"\n    fusionDragAndDrop\n    (dragElementDrop)=\"orderChanged.emit($event)\"\n>\n    @for (item of items; track item.label; let i = $index) {\n        <li #draggableItem class=\"fu-list-item\" [attr.data-id]=\"item.id\">\n            <div class=\"fu-item-drag-icon\">\n                <fusion-icon class=\"fu-drag-icon\" name=\"ph/bold/dots-six-vertical\"></fusion-icon>\n            </div>\n            <div class=\"fu-item-content\">\n                <div class=\"fu-item-label\">{{ item.label }}</div>\n                <fusion-icon-button\n                        iconName=\"ph/x\"\n                        size=\"extraSmall\"\n                        (click)=\"removeItem(i)\"\n                ></fusion-icon-button>\n            </div>\n        </li>\n    }\n</ul>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold,.font-v4-tab-label-2,.font-v4-chart-2,.font-v4-chart-1{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold,.font-v4-chip-label,.font-v4-table-label,.font-v4-button,.font-v4-heading-6,.font-v4-heading-5,.font-v4-heading-4,.font-v4-heading-3,.font-v4-heading-2,.font-v4-heading-1,.font-v4-title{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium,.font-v4-tab-label-1,.font-v4-input-label,.font-v4-overline,.font-v4-subtitle-2,.font-v4-subtitle-1{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular,.font-v4-caption,:host .fu-items-wrapper .fu-list-item .fu-item-content .fu-item-label,.font-v4-body-2,.font-v4-body-1{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-v4-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}:host .fu-items-wrapper .fu-list-item .fu-item-content .fu-item-label,.font-v4-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption{font-size:.75rem;line-height:1rem}.font-v4-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1,.font-v4-tab-label-2{font-size:.875rem;line-height:1rem}.font-v4-chip-label{font-size:.75rem;line-height:1rem;letter-spacing:normal}:host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}:host{--fu-list-items-gap: 6px;--fu-list-item-padding: 0 8px 0 0;--fu-list-item-heigth: 32px;--fu-list-item-background-color: var(--background-paper, hsl(0, 0%, 99%));--fu-list-item-drag-over-background-color: var(--background-paper-elevation-2, hsl(0, 0%, 92%));--fu-list-item-drag-over-border-color: var(--background-paper-elevation-2, hsl(0, 0%, 92%));--fu-list-item-border-color: var(--default-outlinedBorder, hsl(0, 0%, 73.2%));--fu-list-item-hover-border-color: var(--action-active, hsl(0, 0%, 50.3%));--fu-list-item-border: 1px solid var(--fu-list-item-border-color);--fu-list-item-border-radius: 4px;--fu-list-item-drag-icon-size: 20px;--fu-list-item-drag-icon-padding: 0 8px;--fu-list-item-drag-icon-color: var(--action-active, hsl(0, 0%, 50.3%));--fu-list-item-hover-drag-icon-color: var(--action-primary, hsl(0, 0%, 12.5%));--fu-list-item-drag-label-color: var(--text-primary, hsl(0, 0%, 12.5%));--fu-list-item-draging-box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, .08), 0px 4px 6px -2px rgba(16, 24, 40, .03);--fu-list-item-content-gap: 4px}:host .fu-items-wrapper{display:flex;flex-direction:column;gap:var(--fu-list-items-gap);padding:0;margin:0;list-style-type:none}:host .fu-items-wrapper .fu-list-item{-webkit-user-select:none;user-select:none;padding:var(--fu-list-item-padding);margin:0;width:100%;height:var(--fu-list-item-heigth);display:flex;align-items:center;border:var(--fu-list-item-border);border-radius:var(--fu-list-item-border-radius);background-color:var(--fu-list-item-background-color)}:host .fu-items-wrapper .fu-list-item .fu-item-drag-icon{display:flex;align-items:center;justify-content:center;padding:var(--fu-list-item-drag-icon-padding)}:host .fu-items-wrapper .fu-list-item .fu-item-drag-icon .fu-drag-icon{width:var(--fu-list-item-drag-icon-size);height:var(--fu-list-item-drag-icon-size);color:var(--fu-list-item-drag-icon-color)}:host .fu-items-wrapper .fu-list-item .fu-item-content{flex:1;display:flex;align-items:center;gap:var(--fu-list-item-border)}:host .fu-items-wrapper .fu-list-item .fu-item-content .fu-item-label{color:var(--fu-list-item-drag-label-color)}:host .fu-items-wrapper .fu-list-item .fu-item-content fusion-icon-button{margin-left:auto}:host .fu-items-wrapper .fu-list-item:hover{border-color:var(--fu-list-item-hover-border-color);cursor:grab}:host .fu-items-wrapper .fu-list-item:hover .fu-item-drag-icon .fu-drag-icon{color:var(--fu-list-item-hover-drag-icon-color)}:host .fu-items-wrapper .fu-list-item.dragging{cursor:grab}:host .fu-items-wrapper .fu-list-item.dragging:active{cursor:grab;box-shadow:var(--fu-list-item-draging-box-shadow)}:host .fu-items-wrapper .fu-list-item.dragging-transit{color:transparent;background-color:var(--fu-list-item-drag-over-background-color);border-color:var(--fu-list-item-drag-over-border-color)}:host .fu-items-wrapper .fu-list-item.dragging-transit .fu-item-drag-icon,:host .fu-items-wrapper .fu-list-item.dragging-transit .fu-item-content{visibility:hidden}:host .fu-items-wrapper .fu-list-item.dragging-transit:hover{border-color:var(--fu-list-item-drag-over-border-color)}\n"] }]
    }], null, { items: [{
            type: Input
        }], orderChanged: [{
            type: Output
        }], itemRemoved: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DraggableItemsListComponent, { className: "DraggableItemsListComponent", filePath: "v4/draggable-items-list.component.ts", lineNumber: 16 }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { DraggableItemsListComponent };
//# sourceMappingURL=ironsource-fusion-ui-components-draggable-items-list.mjs.map
