import * as i0 from '@angular/core';
import { input, computed, Component, inject, ElementRef, NgZone, output, signal, Directive, model } from '@angular/core';
import { Avatar } from '@masterteam/components/avatar';
import { Button } from '@masterteam/components/button';
import { SecureImagePipe } from '@masterteam/components/upload-field';
import { Progress } from '@masterteam/components/progress';
import { CdkDrag, CdkDropList, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common';

class EntityText {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    displayValue = computed(() => {
        const d = this.data();
        if (d) {
            return typeof d.value === 'string' ? d.value : '';
        }
        return this.value() ?? '';
    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: EntityText, isStandalone: true, selector: "mt-entity-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-text', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });

class EntityDate {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    displayValue = computed(() => {
        const d = this.data();
        if (d) {
            return typeof d.value === 'string' ? d.value : '';
        }
        return this.value() ?? '';
    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: EntityDate, isStandalone: true, selector: "mt-entity-date", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-date', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });

class EntityStatus {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    statusValue = computed(() => {
        const d = this.data();
        if (d && typeof d.value === 'object' && d.value !== null) {
            return d.value;
        }
        return this.value() ?? null;
    }, ...(ngDevMode ? [{ debugName: "statusValue" }] : []));
    badgeStyle = computed(() => {
        const status = this.statusValue();
        if (!status?.color)
            return {};
        return {
            color: status.color,
            backgroundColor: this.hexToRgba(status.color, 0.12),
        };
    }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
    hexToRgba(hex, alpha) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityStatus, isStandalone: true, selector: "mt-entity-status", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\r\n  @if (statusValue(); as status) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ status.display }}\r\n    </span>\r\n  }\r\n  <!-- <span class=\"text-xs text-gray-500\">{{ displayName() }}</span> -->\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-status', standalone: true, template: "<div class=\"flex flex-col gap-1\">\r\n  @if (statusValue(); as status) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ status.display }}\r\n    </span>\r\n  }\r\n  <!-- <span class=\"text-xs text-gray-500\">{{ displayName() }}</span> -->\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });

class EntityUser {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    displayName = input(...(ngDevMode ? [undefined, { debugName: "displayName" }] : []));
    photoUrl = input(...(ngDevMode ? [undefined, { debugName: "photoUrl" }] : []));
    userName = computed(() => this.data()?.displayName ?? this.displayName() ?? '', ...(ngDevMode ? [{ debugName: "userName" }] : []));
    userPhoto = computed(() => this.data()?.photoUrl ?? this.photoUrl() ?? '', ...(ngDevMode ? [{ debugName: "userPhoto" }] : []));
    labelText = computed(() => '', ...(ngDevMode ? [{ debugName: "labelText" }] : []));
    initials = computed(() => {
        const name = this.userName();
        if (!name)
            return '';
        const parts = name.trim().split(/\s+/);
        if (parts.length >= 2) {
            return (parts[0][0] + parts[1][0]).toUpperCase();
        }
        return name.substring(0, 2).toUpperCase();
    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
    // ── Configuration-driven visibility ──
    config = computed(() => this.data()?.configuration ?? {}, ...(ngDevMode ? [{ debugName: "config" }] : []));
    showDisplayName = computed(() => this.config().showDisplayName ?? true, ...(ngDevMode ? [{ debugName: "showDisplayName" }] : []));
    showPhoneNumber = computed(() => this.config().showPhoneNumber ?? false, ...(ngDevMode ? [{ debugName: "showPhoneNumber" }] : []));
    showEmail = computed(() => this.config().showEmail ?? false, ...(ngDevMode ? [{ debugName: "showEmail" }] : []));
    phoneNumber = computed(() => this.data()?.phoneNumber ?? '', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
    email = computed(() => this.data()?.email ?? '', ...(ngDevMode ? [{ debugName: "email" }] : []));
    hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
        (this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, photoUrl: { classPropertyName: "photoUrl", publicName: "photoUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : undefined : 'avatar/')\r\n        : ''\r\n    \"\r\n    [label]=\"initials()\"\r\n    styleClass=\"w-11! h-11! text-lg!  text-white! bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm font-semibold truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a [href]=\"'tel:' + phoneNumber()\" [title]=\"phoneNumber()\">\r\n          <mt-button\r\n            icon=\"communication.phone\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"phoneNumber()\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a [href]=\"'mailto:' + email()\" [title]=\"email()\">\r\n          <mt-button\r\n            icon=\"communication.mail-01\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"email()\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityUser, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar, Button, SecureImagePipe], template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : undefined : 'avatar/')\r\n        : ''\r\n    \"\r\n    [label]=\"initials()\"\r\n    styleClass=\"w-11! h-11! text-lg!  text-white! bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm font-semibold truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a [href]=\"'tel:' + phoneNumber()\" [title]=\"phoneNumber()\">\r\n          <mt-button\r\n            icon=\"communication.phone\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"phoneNumber()\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a [href]=\"'mailto:' + email()\" [title]=\"email()\">\r\n          <mt-button\r\n            icon=\"communication.mail-01\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"email()\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayName", required: false }] }], photoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoUrl", required: false }] }] } });

class EntityPercentage {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    displayValue = computed(() => {
        const d = this.data();
        if (d) {
            return typeof d.value === 'string' ? d.value : '';
        }
        return this.value() ?? '';
    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
    numericValue = computed(() => {
        const raw = this.data()?.rawValue ?? this.rawValue() ?? this.value();
        const num = parseFloat(raw ?? '0');
        return isNaN(num) ? 0 : Math.min(num, 100);
    }, ...(ngDevMode ? [{ debugName: "numericValue" }] : []));
    maxValue = computed(() => {
        const raw = this.data()?.rawValue ?? this.rawValue() ?? this.value();
        const num = parseFloat(raw ?? '0');
        if (isNaN(num))
            return 100;
        return num > 100 ? Math.ceil(num) : 100;
    }, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
    // ── Configuration-driven visibility ──
    config = computed(() => this.data()?.configuration ?? {}, ...(ngDevMode ? [{ debugName: "config" }] : []));
    showName = computed(() => this.config().showName ?? true, ...(ngDevMode ? [{ debugName: "showName" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\r\n  <div class=\"flex items-center justify-between\">\r\n    @if (showName()) {\r\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n    }\r\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"!showName()\">{{\r\n      displayValue()\r\n    }}</span>\r\n  </div>\r\n  <mt-progress\r\n    [value]=\"numericValue()\"\r\n    [showLabel]=\"false\"\r\n    [height]=\"9\"\r\n    [maxValue]=\"maxValue()\"\r\n  >\r\n  </mt-progress>\r\n</div>\r\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-percentage', standalone: true, imports: [Progress], template: "<div class=\"flex flex-col gap-1\">\r\n  <div class=\"flex items-center justify-between\">\r\n    @if (showName()) {\r\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n    }\r\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"!showName()\">{{\r\n      displayValue()\r\n    }}</span>\r\n  </div>\r\n  <mt-progress\r\n    [value]=\"numericValue()\"\r\n    [showLabel]=\"false\"\r\n    [height]=\"9\"\r\n    [maxValue]=\"maxValue()\"\r\n  >\r\n  </mt-progress>\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });

class EntityCurrency {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    displayValue = computed(() => {
        const d = this.data();
        if (d) {
            return typeof d.value === 'string' ? d.value : '';
        }
        return this.value() ?? '';
    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: EntityCurrency, isStandalone: true, selector: "mt-entity-currency", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-currency', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });

class EntityCheckbox {
    /** Full entity data object */
    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
    /** Individual inputs (used when data is not provided) */
    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
    rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
    displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
    isChecked = computed(() => {
        const raw = this.data()?.rawValue ?? this.rawValue();
        if (raw !== undefined) {
            return raw.toLowerCase() === 'true';
        }
        const val = this.data()?.value ?? this.value();
        if (typeof val === 'string') {
            return val.toLowerCase() === 'true';
        }
        return false;
    }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityCheckbox, isStandalone: true, selector: "mt-entity-checkbox", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n  @if (isChecked()) {\r\n    <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  } @else {\r\n    <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  }\r\n  <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCheckbox, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-checkbox', standalone: true, template: "<div class=\"flex items-center gap-2\">\r\n  @if (isChecked()) {\r\n    <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  } @else {\r\n    <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  }\r\n  <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n</div>\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });

class EntityPreview {
    /** Single entity data to display */
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: EntityText, selector: "mt-entity-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityDate, selector: "mt-entity-date", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data", "displayName", "photoUrl"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entity-preview', standalone: true, imports: [
                        EntityText,
                        EntityDate,
                        EntityStatus,
                        EntityUser,
                        EntityPercentage,
                        EntityCurrency,
                        EntityCheckbox,
                    ], host: {
                        class: 'w-full',
                    }, template: "@switch (data().viewType) {\r\n  @case (\"Text\") {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n  @case (\"Date\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"DateTime\") {\r\n    <mt-entity-date [data]=\"data()\" />\r\n  }\r\n  @case (\"Status\") {\r\n    <mt-entity-status [data]=\"data()\" />\r\n  }\r\n  @case (\"User\") {\r\n    <mt-entity-user [data]=\"data()\" />\r\n  }\r\n  @case (\"Percentage\") {\r\n    <mt-entity-percentage [data]=\"data()\" />\r\n  }\r\n  @case (\"Currency\") {\r\n    <mt-entity-currency [data]=\"data()\" />\r\n  }\r\n  @case (\"Checkbox\") {\r\n    <mt-entity-checkbox [data]=\"data()\" />\r\n  }\r\n  @default {\r\n    <mt-entity-text [data]=\"data()\" />\r\n  }\r\n}\r\n" }]
        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });

class EntitiesPreview {
    /** Array of entity data to display */
    entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : []));
    /** Entities sorted by order */
    sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : []));
    /** Returns the grid-column span for a given entity size (1-12) */
    getColSpan(entity) {
        const size = entity.configuration?.size ?? 4;
        return `span ${size}`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-10\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview [data]=\"entity\" />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-10\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview [data]=\"entity\" />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
        }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }] } });

/**
 * Base class that encapsulates all entity resize-via-drag logic.
 *
 * Extend this directive in any component that needs column-resize behaviour
 * on a 12-column CSS grid.  The subclass must:
 *   - Provide a `model.required<EntityData[]>()` (or equivalent) for the
 *     entity list so `updateEntitySize()` can be called after resize.
 *   - Contain a `.grid` element (or override `getGridElement()`).
 *
 * Resize flow:
 *   1. `onResizeStart(event, entity)` — called from a mousedown on the handle
 *   2. mousemove  → snaps to nearest column, updates `resizePreviewSize`
 *   3. mouseup    → emits `entityResized` with previous & new size
 */
class EntitiesResizeBase {
    elRef = inject(ElementRef);
    zone = inject(NgZone);
    doc = inject(DOCUMENT);
    /** Emits when an entity is resized via the drag handle */
    entityResized = output();
    // ── Resize state ──
    /** The entity currently being resized (null when idle) */
    resizingEntity = signal(null, ...(ngDevMode ? [{ debugName: "resizingEntity" }] : []));
    /** Live preview size while dragging */
    resizePreviewSize = signal(null, ...(ngDevMode ? [{ debugName: "resizePreviewSize" }] : []));
    /** Bound listeners kept for cleanup */
    _onMouseMove = null;
    _onMouseUp = null;
    // ── Public API ──
    /**
     * Returns the grid element used to compute column widths.
     * Override if the grid selector differs.
     */
    getGridElement() {
        return this.elRef.nativeElement.querySelector('.grid');
    }
    /**
     * Returns the grid-column span string for a given entity.
     * While resizing the active entity, returns the preview size.
     */
    getResizeColSpan(entity) {
        if (this.resizingEntity() === entity && this.resizePreviewSize() !== null) {
            return `span ${this.resizePreviewSize()}`;
        }
        const size = entity.configuration?.size ?? 4;
        return `span ${size}`;
    }
    /** Starts a resize operation from the right-edge handle */
    onResizeStart(event, entity) {
        // Prevent the drag-drop from starting
        event.preventDefault();
        event.stopPropagation();
        const gridEl = this.getGridElement();
        if (!gridEl)
            return;
        const gridRect = gridEl.getBoundingClientRect();
        const gridWidth = gridRect.width;
        const columnWidth = gridWidth / 12;
        const previousSize = entity.configuration?.size ?? 4;
        // Left edge of the entity cell
        const cellEl = event.target.closest('.entity-cell');
        if (!cellEl)
            return;
        const cellLeft = cellEl.getBoundingClientRect().left;
        this.resizingEntity.set(entity);
        this.resizePreviewSize.set(previousSize);
        // Run mouse listeners outside Angular zone for performance
        this.zone.runOutsideAngular(() => {
            this._onMouseMove = (e) => {
                const rawWidth = e.clientX - cellLeft;
                // Snap to nearest full column (min 1, max 12)
                let cols = Math.round(rawWidth / columnWidth);
                cols = Math.max(1, Math.min(12, cols));
                const current = this.resizePreviewSize();
                if (current !== cols) {
                    this.zone.run(() => this.resizePreviewSize.set(cols));
                }
            };
            this._onMouseUp = () => {
                this._cleanupListeners();
                const newSize = this.resizePreviewSize();
                this.resizingEntity.set(null);
                this.resizePreviewSize.set(null);
                if (newSize !== previousSize) {
                    this.zone.run(() => {
                        this.onResizeComplete(entity, previousSize, newSize);
                    });
                }
            };
            this.doc.addEventListener('mousemove', this._onMouseMove);
            this.doc.addEventListener('mouseup', this._onMouseUp, { once: true });
        });
    }
    /** Removes global mouse listeners */
    _cleanupListeners() {
        if (this._onMouseMove) {
            this.doc.removeEventListener('mousemove', this._onMouseMove);
            this._onMouseMove = null;
        }
        if (this._onMouseUp) {
            this.doc.removeEventListener('mouseup', this._onMouseUp);
            this._onMouseUp = null;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesResizeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: EntitiesResizeBase, isStandalone: true, outputs: { entityResized: "entityResized" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesResizeBase, decorators: [{
            type: Directive
        }], propDecorators: { entityResized: [{ type: i0.Output, args: ["entityResized"] }] } });

class EntitiesManage extends EntitiesResizeBase {
    /** Array of entity data – supports two-way binding to keep order in sync */
    entities = model.required(...(ngDevMode ? [{ debugName: "entities" }] : []));
    /** Emits the reordered entities array after each drag-drop */
    entitiesReordered = output();
    /** Entities sorted by their order field */
    sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : []));
    /** Returns the grid-column span for a given entity size (1-12) */
    getColSpan(entity) {
        return this.getResizeColSpan(entity);
    }
    /** Handle drag-drop reorder */
    onDrop(event) {
        if (event.previousIndex === event.currentIndex)
            return;
        const items = [...this.sortedEntities()];
        const [moved] = items.splice(event.previousIndex, 1);
        items.splice(event.currentIndex, 0, moved);
        // Reassign order based on new positions
        const reordered = items.map((item, index) => ({
            ...item,
            order: index + 1,
        }));
        // Update the model (two-way binding)
        this.entities.set(reordered);
        // Emit the reordered list
        this.entitiesReordered.emit(reordered);
    }
    // ── Resize completion (from EntitiesResizeBase) ──
    onResizeComplete(entity, previousSize, newSize) {
        // Update entity in the list
        const updated = this.entities().map((e) => e === entity
            ? {
                ...e,
                configuration: {
                    ...e.configuration,
                    size: newSize,
                },
            }
            : e);
        this.entities.set(updated);
        this.entityResized.emit({
            entity: {
                ...entity,
                configuration: { ...entity.configuration, size: newSize },
            },
            previousSize,
            newSize,
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-12 gap-x-4 gap-y-10\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, decorators: [{
            type: Component,
            args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-12 gap-x-4 gap-y-10\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"] }]
        }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }, { type: i0.Output, args: ["entitiesChange"] }], entitiesReordered: [{ type: i0.Output, args: ["entitiesReordered"] }] } });

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

export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityCheckbox, EntityCurrency, EntityDate, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
//# sourceMappingURL=masterteam-components-entities.mjs.map
