import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, input, computed, booleanAttribute, contentChild, signal, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';

class SdOrgChartItemDefDirective {
    static ngTemplateContextGuard(_dir, _ctx) {
        return true;
    }
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdOrgChartItemDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: SdOrgChartItemDefDirective, isStandalone: true, selector: "[sdOrgChartItemDef]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdOrgChartItemDefDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sdOrgChartItemDef]',
                }]
        }] });

class SdOrgChart {
    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
    option = input(undefined, ...(ngDevMode ? [{ debugName: "option" }] : []));
    autoId = computed(() => {
        const scope = this.option()?.autoId ?? this.autoIdInput();
        return scope ? `components-org-chart-${scope}` : undefined;
    }, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
    items = input(undefined, ...(ngDevMode ? [{ debugName: "items" }] : []));
    itemTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    itemDef = contentChild(SdOrgChartItemDefDirective, ...(ngDevMode ? [{ debugName: "itemDef" }] : []));
    resolvedItems = computed(() => this.option()?.items ?? this.items() ?? [], ...(ngDevMode ? [{ debugName: "resolvedItems" }] : []));
    resolvedCollapsible = computed(() => this.option()?.collapsible ?? this.collapsible(), ...(ngDevMode ? [{ debugName: "resolvedCollapsible" }] : []));
    resolvedItemTemplate = computed(() => {
        return this.itemDef()?.templateRef || this.option()?.itemTemplate || this.itemTemplate() || undefined;
    }, ...(ngDevMode ? [{ debugName: "resolvedItemTemplate" }] : []));
    #expandedState = signal({}, ...(ngDevMode ? [{ debugName: "#expandedState" }] : []));
    trackByItem = (_index, item) => item.id;
    hasChildren = (item) => {
        return this.childrenOf(item).length > 0;
    };
    childrenOf = (item) => {
        return item.children || [];
    };
    isExpanded = (item) => {
        if (!this.resolvedCollapsible()) {
            return true;
        }
        const key = this.#itemKey(item);
        const state = this.#expandedState();
        return state[key] ?? item.expanded ?? true;
    };
    toggle = (item, event) => {
        event?.stopPropagation();
        if (!this.resolvedCollapsible() || !this.hasChildren(item)) {
            return;
        }
        const key = this.#itemKey(item);
        const expanded = !(this.#expandedState()[key] ?? item.expanded ?? true);
        this.#expandedState.update(state => ({
            ...state,
            [key]: expanded,
        }));
        this.option()?.onToggle?.({ item, expanded });
    };
    createContext = (item, depth, parent) => {
        const hasChildren = this.hasChildren(item);
        const expanded = this.isExpanded(item);
        return {
            $implicit: item,
            item,
            depth,
            parent,
            expanded,
            hasChildren,
            isLeaf: !hasChildren,
            toggle: () => this.toggle(item),
        };
    };
    nodeAutoId = (item, part) => {
        const base = this.autoId();
        if (!base) {
            return undefined;
        }
        return `${base}-${part}-${this.#autoIdKey(item)}`;
    };
    #itemKey = (item) => {
        return String(item.id);
    };
    #autoIdKey = (item) => {
        return this.#itemKey(item).replace(/[^a-zA-Z0-9_-]/g, '-');
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdOrgChart, isStandalone: true, selector: "sd-org-chart", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-autoid": "autoId()" } }, queries: [{ propertyName: "itemDef", first: true, predicate: SdOrgChartItemDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _items; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      @if (_hasChildren && collapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdOrgChart, decorators: [{
            type: Component,
            args: [{ selector: 'sd-org-chart', standalone: true, imports: [CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.data-autoid]': 'autoId()',
                    }, template: "@let _items = resolvedItems();\n@let _templateRef = resolvedItemTemplate();\n\n<div class=\"sd-org-chart\" role=\"tree\">\n  <ul class=\"sd-org-chart__tree\">\n    @for (item of _items; track trackByItem($index, item)) {\n      <ng-container\n        *ngTemplateOutlet=\"nodeTemplate; context: { $implicit: item, item: item, depth: 0, parent: null, templateRef: _templateRef }\" />\n    }\n  </ul>\n</div>\n\n<ng-template #nodeTemplate let-item let-depth=\"depth\" let-parent=\"parent\" let-templateRef=\"templateRef\">\n  @let _children = childrenOf(item);\n  @let _hasChildren = _children.length > 0;\n  @let _expanded = isExpanded(item);\n  @let _context = createContext(item, depth, parent);\n\n  <li\n    class=\"sd-org-chart__node\"\n    [class.sd-org-chart__node--expanded]=\"_hasChildren && _expanded\"\n    [class.sd-org-chart__node--collapsed]=\"_hasChildren && !_expanded\"\n    role=\"treeitem\"\n    [attr.aria-expanded]=\"_hasChildren ? _expanded : null\">\n    <div class=\"sd-org-chart__node-shell\">\n      <div\n        class=\"sd-org-chart__card\"\n        [class.sd-org-chart__card--no-image]=\"!item.image\"\n        [class.sd-org-chart__card--compact]=\"!item.image && !item.description\"\n        [attr.data-node-id]=\"item.id\"\n        [attr.data-autoid]=\"nodeAutoId(item, 'node')\"\n        [attr.data-depth]=\"depth\"\n        [style.--sd-org-node-color]=\"item.color || null\">\n        @if (templateRef) {\n          <ng-container *ngTemplateOutlet=\"templateRef; context: _context\" />\n        } @else {\n          @if (item.image) {\n            <img class=\"sd-org-chart__image\" [src]=\"item.image\" [alt]=\"item.title\" [attr.data-autoid]=\"nodeAutoId(item, 'image')\" />\n          }\n          <div class=\"sd-org-chart__title\" [attr.data-autoid]=\"nodeAutoId(item, 'title')\">{{ item.title }}</div>\n          @if (item.description) {\n            <div class=\"sd-org-chart__description\" [attr.data-autoid]=\"nodeAutoId(item, 'description')\">{{ item.description }}</div>\n          }\n        }\n      </div>\n\n      @if (_hasChildren && collapsible()) {\n        <button\n          type=\"button\"\n          class=\"sd-org-chart__toggle\"\n          [attr.aria-label]=\"_expanded ? 'Collapse children' : 'Expand children'\"\n          [attr.aria-expanded]=\"_expanded\"\n          [attr.data-autoid]=\"nodeAutoId(item, 'toggle')\"\n          (click)=\"toggle(item, $event)\">\n          <mat-icon>{{ _expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>\n        </button>\n      }\n    </div>\n\n    @if (_hasChildren && _expanded) {\n      <ul class=\"sd-org-chart__children\" role=\"group\">\n        @for (child of _children; track trackByItem($index, child)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              nodeTemplate;\n              context: { $implicit: child, item: child, depth: depth + 1, parent: item, templateRef: templateRef }\n            \" />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--sd-org-line: #d9e2ef;--sd-org-card-bg: #ffffff;--sd-org-text: #102047;--sd-org-text-muted: #4d5b73;--sd-org-shadow: 0 8px 20px rgba(24, 39, 75, .08);--sd-org-gap-x: 20px;--sd-org-gap-y: 32px;display:block;overflow-x:auto;overflow-y:hidden;padding:8px 0 12px}.sd-org-chart{display:inline-block;min-width:100%;padding:8px 16px 0}.sd-org-chart__tree,.sd-org-chart__children{display:flex;justify-content:center;align-items:flex-start;margin:0;padding:0;list-style:none}.sd-org-chart__node{position:relative;flex:0 0 auto;padding:var(--sd-org-gap-y) var(--sd-org-gap-x) 0;text-align:center}.sd-org-chart__tree>.sd-org-chart__node{padding-top:0}.sd-org-chart__children>.sd-org-chart__node:before,.sd-org-chart__children>.sd-org-chart__node:after{position:absolute;top:0;width:50%;height:calc(var(--sd-org-gap-y) / 2);border-top:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__children>.sd-org-chart__node:before{right:50%}.sd-org-chart__children>.sd-org-chart__node:after{left:50%}.sd-org-chart__children>.sd-org-chart__node:first-child:before,.sd-org-chart__children>.sd-org-chart__node:last-child:after{border-top:0}.sd-org-chart__children>.sd-org-chart__node:only-child{padding-top:calc(var(--sd-org-gap-y) / 2)}.sd-org-chart__children>.sd-org-chart__node:only-child:before,.sd-org-chart__children>.sd-org-chart__node:only-child:after{display:none}.sd-org-chart__node-shell{position:relative;display:flex;flex-direction:column;align-items:center}.sd-org-chart__children>.sd-org-chart__node>.sd-org-chart__node-shell:before{position:absolute;top:calc(var(--sd-org-gap-y) * -1);left:50%;width:0;height:var(--sd-org-gap-y);border-left:1px solid var(--sd-org-line);content:\"\"}.sd-org-chart__tree>.sd-org-chart__node>.sd-org-chart__node-shell:before{display:none}.sd-org-chart__card{position:relative;z-index:1;min-width:128px;min-height:110px;box-sizing:border-box;padding:16px 14px 14px;color:var(--sd-org-text);background:var(--sd-org-node-color, var(--sd-org-card-bg));border:1px solid color-mix(in srgb,var(--sd-org-node-color, var(--sd-org-line)) 36%,var(--sd-org-line));border-radius:6px;box-shadow:var(--sd-org-shadow)}.sd-org-chart__card--compact{min-width:74px;min-height:40px;padding:10px 16px}.sd-org-chart__card--no-image:not(.sd-org-chart__card--compact){min-height:78px}.sd-org-chart__image{display:block;width:44px;height:44px;margin:0 auto 10px;object-fit:cover;border-radius:50%}.sd-org-chart__title{max-width:150px;margin:0 auto;overflow-wrap:anywhere;font-size:14px;font-weight:700;line-height:1.35}.sd-org-chart__description{max-width:150px;margin:5px auto 0;overflow-wrap:anywhere;color:var(--sd-org-text-muted);font-size:13px;line-height:1.3}.sd-org-chart__toggle{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:-1px;padding:0;color:#52708f;background:#fff;border:1px solid var(--sd-org-line);border-radius:50%;cursor:pointer}.sd-org-chart__toggle:hover{background:#f4f7fb}.sd-org-chart__toggle:focus-visible{outline:2px solid var(--sd-primary, #2a66f4);outline-offset:2px}.sd-org-chart__toggle mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}\n"] }]
        }], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], itemDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdOrgChartItemDefDirective), { isSignal: true }] }] } });

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

export { SdOrgChart, SdOrgChartItemDefDirective };
//# sourceMappingURL=sdcorejs-angular-components-org-chart.mjs.map
