@simplysm/angular 14.0.30 → 14.0.33

package/dist/data/permission-table/sd-permission-table.js

@@ -0,0 +1,467 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, model, signal, ViewEncapsulation, } from "@angular/core";
+import { obj } from "@simplysm/core-common";
+import { SdCheckbox } from "../../controls/checkbox/sd-checkbox";
+import { SdCollapseIcon } from "../../controls/collapse/sd-collapse-icon";
+import { SdTypedTemplate } from "../../core/template/sd-typed-template";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import * as i0 from "@angular/core";
+const _c0 = a0 => ({ item: a0, parentKey: "root", depth: 0, parent: undefined });
+const _c1 = (a0, a1, a2, a3) => ({ item: a0, parentKey: a1, depth: a2, parent: a3 });
+const _forTrack0 = ($index, $item) => $item.codeChain.join(".");
+function SdPermissionTable_For_3_ng_template_0_Template(rf, ctx) { }
+function SdPermissionTable_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdPermissionTable_For_3_ng_template_0_Template, 0, 0, "ng-template", 1);
+} if (rf & 2) {
+    const item_r1 = ctx.$implicit;
+    i0.ɵɵnextContext();
+    const itemTpl_r2 = i0.ɵɵreference(5);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r2)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, item_r1));
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 3);
+    i0.ɵɵtext(1, "\u00A0");
+    i0.ɵɵelementEnd();
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-anchor", 8);
+    i0.ɵɵlistener("click", function SdPermissionTable_ng_template_4_Conditional_0_Conditional_4_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r3); const item_r4 = i0.ɵɵnextContext(2).item; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onPermCollapseToggle(item_r4)); });
+    i0.ɵɵelement(1, "sd-collapse-icon", 9);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext(2).item;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("open", !ctx_r4.getIsPermCollapsed(item_r4));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r4.title, " ");
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext(2).item;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r4.title, " ");
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 6);
+    i0.ɵɵtext(1, "\u00A0");
+    i0.ɵɵelementEnd();
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-checkbox", 10);
+    i0.ɵɵlistener("valueChange", function SdPermissionTable_ng_template_4_Conditional_0_Conditional_9_Template_sd_checkbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const item_r4 = i0.ɵɵnextContext(2).item; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onPermCheckChange(item_r4, "use", $event)); });
+    i0.ɵɵtext(1, " \uC0AC\uC6A9 ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext(2).item;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("inline", true)("value", ctx_r4.getIsPermChecked(item_r4, "use"))("disabled", ctx_r4.disabled());
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-checkbox", 10);
+    i0.ɵɵlistener("valueChange", function SdPermissionTable_ng_template_4_Conditional_0_Conditional_11_Template_sd_checkbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const item_r4 = i0.ɵɵnextContext(2).item; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onPermCheckChange(item_r4, "edit", $event)); });
+    i0.ɵɵtext(1, " \uD3B8\uC9D1 ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext(2).item;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("inline", true)("value", ctx_r4.getIsPermChecked(item_r4, "edit"))("disabled", ctx_r4.getEditDisabled(item_r4));
+} }
+function SdPermissionTable_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵrepeaterCreate(1, SdPermissionTable_ng_template_4_Conditional_0_For_2_Template, 2, 0, "td", 3, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "td", 4);
+    i0.ɵɵconditionalCreate(4, SdPermissionTable_ng_template_4_Conditional_0_Conditional_4_Template, 3, 2, "sd-anchor")(5, SdPermissionTable_ng_template_4_Conditional_0_Conditional_5_Template, 2, 1, "div", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(6, SdPermissionTable_ng_template_4_Conditional_0_For_7_Template, 2, 0, "td", 6, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(8, "td", 6);
+    i0.ɵɵconditionalCreate(9, SdPermissionTable_ng_template_4_Conditional_0_Conditional_9_Template, 2, 3, "sd-checkbox", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "td", 6);
+    i0.ɵɵconditionalCreate(11, SdPermissionTable_ng_template_4_Conditional_0_Conditional_11_Template, 2, 3, "sd-checkbox", 7);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    const item_r4 = ctx_r7.item;
+    const depth_r9 = ctx_r7.depth;
+    const parent_r10 = ctx_r7.parent;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-sd-collapse", !!parent_r10 && ctx_r4.getIsPermCollapsed(parent_r10))("data-sd-theme", depth_r9 === 0 ? "first" : depth_r9 % 3 === 0 ? "success" : depth_r9 % 3 === 1 ? "info" : "warning");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r4.arr(depth_r9 + 1));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r4.children && item_r4.children.length > 0 ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r4.arr(ctx_r4.depthLength() - (depth_r9 + 1)));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r4.getIsPermExists(item_r4, "use") ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r4.getIsPermExists(item_r4, "edit") ? 11 : -1);
+} }
+function SdPermissionTable_ng_template_4_Conditional_1_For_1_ng_template_0_Template(rf, ctx) { }
+function SdPermissionTable_ng_template_4_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdPermissionTable_ng_template_4_Conditional_1_For_1_ng_template_0_Template, 0, 0, "ng-template", 1);
+} if (rf & 2) {
+    const child_r11 = ctx.$implicit;
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    const item_r4 = ctx_r7.item;
+    const parentKey_r12 = ctx_r7.parentKey;
+    const depth_r9 = ctx_r7.depth;
+    i0.ɵɵnextContext();
+    const itemTpl_r2 = i0.ɵɵreference(5);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r2)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c1, child_r11, parentKey_r12 + "_" + item_r4.codeChain.join("."), depth_r9 + 1, item_r4));
+} }
+function SdPermissionTable_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SdPermissionTable_ng_template_4_Conditional_1_For_1_Template, 1, 7, null, 1, _forTrack0);
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().item;
+    i0.ɵɵrepeater(item_r4.children);
+} }
+function SdPermissionTable_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SdPermissionTable_ng_template_4_Conditional_0_Template, 12, 5, "tr");
+    i0.ɵɵconditionalCreate(1, SdPermissionTable_ng_template_4_Conditional_1_Template, 2, 0);
+} if (rf & 2) {
+    const item_r4 = ctx.item;
+    i0.ɵɵconditional(item_r4.children && item_r4.children.length !== 0 || item_r4.perms && item_r4.perms.length > 0 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.children && item_r4.children.length > 0 ? 1 : -1);
+} }
+export class SdPermissionTable {
+    value = model({}, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    collapsedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedItems" }] : /* istanbul ignore next */ []));
+    depthLength = computed(() => {
+        return this._getDepthLength(this.items(), 0);
+    }, ...(ngDevMode ? [{ debugName: "depthLength" }] : /* istanbul ignore next */ []));
+    _permExistsCache = computed(() => {
+        const cache = new Map();
+        const walk = (item, type) => {
+            const key = item.codeChain.join(".") + "." + type;
+            const cached = cache.get(key);
+            if (cached !== undefined)
+                return cached;
+            if (item.perms) {
+                const result = item.perms.includes(type);
+                cache.set(key, result);
+                return result;
+            }
+            let result = false;
+            if (item.children) {
+                for (const child of item.children) {
+                    if (walk(child, type)) {
+                        result = true;
+                    }
+                }
+            }
+            cache.set(key, result);
+            return result;
+        };
+        for (const item of this.items()) {
+            walk(item, "use");
+            walk(item, "edit");
+        }
+        return cache;
+    }, ...(ngDevMode ? [{ debugName: "_permExistsCache" }] : /* istanbul ignore next */ []));
+    _permCheckedCache = computed(() => {
+        const cache = new Map();
+        const value = this.value();
+        const walk = (item, type) => {
+            const key = item.codeChain.join(".") + "." + type;
+            const cached = cache.get(key);
+            if (cached !== undefined)
+                return cached;
+            if (item.perms) {
+                const permCode = item.codeChain.join(".");
+                const result = value[permCode + "." + type] ?? false;
+                cache.set(key, result);
+                return result;
+            }
+            let result = false;
+            if (item.children) {
+                for (const child of item.children) {
+                    if (walk(child, type)) {
+                        result = true;
+                    }
+                }
+            }
+            cache.set(key, result);
+            return result;
+        };
+        for (const item of this.items()) {
+            walk(item, "use");
+            walk(item, "edit");
+        }
+        return cache;
+    }, ...(ngDevMode ? [{ debugName: "_permCheckedCache" }] : /* istanbul ignore next */ []));
+    _editDisabledCache = computed(() => {
+        const cache = new Map();
+        const isDisabled = this.disabled();
+        const existsCache = this._permExistsCache();
+        const checkedCache = this._permCheckedCache();
+        const walk = (item) => {
+            const key = item.codeChain.join(".");
+            const cached = cache.get(key);
+            if (cached !== undefined)
+                return cached;
+            if (isDisabled) {
+                cache.set(key, true);
+                return true;
+            }
+            if (item.perms) {
+                const useExists = existsCache.get(key + ".use") ?? false;
+                const useChecked = checkedCache.get(key + ".use") ?? false;
+                const result = useExists && !useChecked;
+                cache.set(key, result);
+                return result;
+            }
+            if (item.children) {
+                for (const child of item.children) {
+                    walk(child);
+                }
+                const result = item.children.every((child) => !(existsCache.get(child.codeChain.join(".") + ".edit") ?? false) ||
+                    (cache.get(child.codeChain.join(".")) ?? false));
+                cache.set(key, result);
+                return result;
+            }
+            cache.set(key, false);
+            return false;
+        };
+        for (const item of this.items()) {
+            walk(item);
+        }
+        return cache;
+    }, ...(ngDevMode ? [{ debugName: "_editDisabledCache" }] : /* istanbul ignore next */ []));
+    _arrCache = new Map();
+    arr(len) {
+        let cached = this._arrCache.get(len);
+        if (cached == null) {
+            cached = Array(len)
+                .fill(0)
+                .map((_, i) => i);
+            this._arrCache.set(len, cached);
+        }
+        return cached;
+    }
+    getIsPermCollapsed(item) {
+        return this.collapsedItems().has(item);
+    }
+    getAllChildren(item) {
+        return item.children?.mapMany((child) => [child, ...this.getAllChildren(child)]) ?? [];
+    }
+    getEditDisabled(item) {
+        return this._editDisabledCache().get(item.codeChain.join(".")) ?? false;
+    }
+    getIsPermExists(item, type) {
+        return this._permExistsCache().get(item.codeChain.join(".") + "." + type) ?? false;
+    }
+    getIsPermChecked(item, type) {
+        return this._permCheckedCache().get(item.codeChain.join(".") + "." + type) ?? false;
+    }
+    onPermCollapseToggle(item) {
+        this.collapsedItems.update((v) => {
+            const r = new Set(v);
+            if (r.has(item)) {
+                r.delete(item);
+            }
+            else {
+                r.add(item);
+                const allChildren = this.getAllChildren(item);
+                for (const allChild of allChildren) {
+                    r.add(allChild);
+                }
+            }
+            return r;
+        });
+    }
+    onPermCheckChange(item, type, val) {
+        this.value.update((v) => {
+            const r = obj.clone(v);
+            this._changePermCheck(r, item, type, val);
+            return r;
+        });
+    }
+    _changePermCheck(value, item, type, val) {
+        let changed = false;
+        if (item.perms) {
+            const permCode = item.codeChain.join(".");
+            if (type === "edit" &&
+                val &&
+                this.getIsPermExists(item, "use") &&
+                !(value[permCode + ".use"] ?? false)) {
+                // use가 체크되지 않은 상태에서 edit 체크 시도 → 무시
+            }
+            else {
+                if (this.getIsPermExists(item, type) && value[permCode + "." + type] !== val) {
+                    value[permCode + "." + type] = val;
+                    changed = true;
+                }
+            }
+            // USE권한 지우면 EDIT권한도 자동으로 지움
+            if (type === "use" &&
+                !val &&
+                this.getIsPermExists(item, "edit") &&
+                value[permCode + ".edit"]) {
+                value[permCode + ".edit"] = false;
+                changed = true;
+            }
+        }
+        // 하위 권한을 함께 변경함
+        if (item.children) {
+            for (const child of item.children) {
+                const childChanged = this._changePermCheck(value, child, type, val);
+                if (childChanged) {
+                    changed = true;
+                }
+            }
+        }
+        return changed;
+    }
+    _getDepthLength(items, depth) {
+        return (items.max((item) => {
+            if (item.children) {
+                return this._getDepthLength(item.children, depth + 1);
+            }
+            else {
+                return depth + 1;
+            }
+        }) ?? depth);
+    }
+    itemTemplateType;
+    static ɵfac = function SdPermissionTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPermissionTable)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdPermissionTable, selectors: [["sd-permission-table"]], inputs: { value: [1, "value"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { value: "valueChange" }, decls: 6, vars: 1, consts: [["itemTpl", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "typed"], [1, "_before"], [1, "_title"], [2, "padding-left", "14px"], [1, "_after"], [3, "inline", "value", "disabled"], [3, "click"], [3, "open"], [3, "valueChange", "inline", "value", "disabled"]], template: function SdPermissionTable_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "table")(1, "tbody");
+            i0.ɵɵrepeaterCreate(2, SdPermissionTable_For_3_Template, 1, 4, null, 1, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(4, SdPermissionTable_ng_template_4_Template, 2, 2, "ng-template", 2, 0, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.items());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("typed", ctx.itemTemplateType);
+        } }, dependencies: [SdTypedTemplate,
+            NgTemplateOutlet,
+            SdCollapseIcon,
+            SdCheckbox,
+            SdAnchor], styles: ["sd-permission-table table {\n  border-collapse: collapse;\n}\nsd-permission-table table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-lg);\n  position: sticky;\n  top: 0;\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  color: var(--text-trans-default);\n}\nsd-permission-table table > * > tr > * > * {\n  color: var(--text-trans-default) !important;\n}\nsd-permission-table table > * > tr > *._title {\n  border-top-left-radius: 14px;\n  border-bottom-left-radius: 14px;\n  padding-left: var(--gap-lg);\n}\nsd-permission-table table > * > tr[data-sd-collapse=true] {\n  display: none;\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title, sd-permission-table table > * > tr[data-sd-theme=first] > *._after {\n  background: var(--theme-info-default);\n  color: var(--text-trans-rev-default);\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title > *, sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {\n  color: var(--text-trans-rev-default) !important;\n}\nsd-permission-table table > * > tr[data-sd-theme=info] > *._title, sd-permission-table table > * > tr[data-sd-theme=info] > *._after {\n  background: var(--theme-info-lightest);\n}\nsd-permission-table table > * > tr[data-sd-theme=warning] > *._title, sd-permission-table table > * > tr[data-sd-theme=warning] > *._after {\n  background: var(--theme-warning-lightest);\n}\nsd-permission-table table > * > tr[data-sd-theme=success] > *._title, sd-permission-table table > * > tr[data-sd-theme=success] > *._after {\n  background: var(--theme-success-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPermissionTable, [{
+        type: Component,
+        args: [{ selector: "sd-permission-table", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                    SdTypedTemplate,
+                    NgTemplateOutlet,
+                    SdCollapseIcon,
+                    SdCheckbox,
+                    SdAnchor,
+                ], template: `
+    <table>
+      <tbody>
+        @for (item of items(); track item.codeChain.join(".")) {
+          <ng-template
+            [ngTemplateOutlet]="itemTpl"
+            [ngTemplateOutletContext]="{
+              item: item,
+              parentKey: 'root',
+              depth: 0,
+              parent: undefined,
+            }"
+          ></ng-template>
+        }
+      </tbody>
+    </table>
+
+    <ng-template
+      #itemTpl
+      [typed]="itemTemplateType"
+      let-item="item"
+      let-parentKey="parentKey"
+      let-depth="depth"
+      let-parent="parent"
+    >
+      @if (
+        (item.children && item.children.length !== 0) || (item.perms && item.perms.length > 0)
+      ) {
+        <tr
+          [attr.data-sd-collapse]="!!parent && getIsPermCollapsed(parent)"
+          [attr.data-sd-theme]="
+            depth === 0
+              ? 'first'
+              : depth % 3 === 0
+                ? 'success'
+                : depth % 3 === 1
+                  ? 'info'
+                  : 'warning'
+          "
+        >
+          @for (i of arr(depth + 1); track i) {
+            <td class="_before">&nbsp;</td>
+          }
+
+          <td class="_title">
+            @if (item.children && item.children.length > 0) {
+              <sd-anchor (click)="onPermCollapseToggle(item)">
+                <sd-collapse-icon [open]="!getIsPermCollapsed(item)" />
+                {{ item.title }}
+              </sd-anchor>
+            } @else {
+              <div style="padding-left: 14px;">
+                {{ item.title }}
+              </div>
+            }
+          </td>
+
+          @for (i of arr(depthLength() - (depth + 1)); track i) {
+            <td class="_after">&nbsp;</td>
+          }
+
+          <td class="_after">
+            @if (getIsPermExists(item, "use")) {
+              <sd-checkbox
+                [inline]="true"
+                [value]="getIsPermChecked(item, 'use')"
+                (valueChange)="onPermCheckChange(item, 'use', $event)"
+                [disabled]="disabled()"
+              >
+                사용
+              </sd-checkbox>
+            }
+          </td>
+
+          <td class="_after">
+            @if (getIsPermExists(item, "edit")) {
+              <sd-checkbox
+                [inline]="true"
+                [value]="getIsPermChecked(item, 'edit')"
+                (valueChange)="onPermCheckChange(item, 'edit', $event)"
+                [disabled]="getEditDisabled(item)"
+              >
+                편집
+              </sd-checkbox>
+            }
+          </td>
+        </tr>
+      }
+      @if (item.children && item.children.length > 0) {
+        @for (child of item.children; track child.codeChain.join(".")) {
+          <ng-template
+            [ngTemplateOutlet]="itemTpl"
+            [ngTemplateOutletContext]="{
+              item: child,
+              parentKey: parentKey + '_' + item.codeChain.join('.'),
+              depth: depth + 1,
+              parent: item,
+            }"
+          ></ng-template>
+        }
+      }
+    </ng-template>
+  `, styles: ["sd-permission-table table {\n  border-collapse: collapse;\n}\nsd-permission-table table > * > tr > * {\n  padding: var(--gap-sm) var(--gap-lg);\n  position: sticky;\n  top: 0;\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  color: var(--text-trans-default);\n}\nsd-permission-table table > * > tr > * > * {\n  color: var(--text-trans-default) !important;\n}\nsd-permission-table table > * > tr > *._title {\n  border-top-left-radius: 14px;\n  border-bottom-left-radius: 14px;\n  padding-left: var(--gap-lg);\n}\nsd-permission-table table > * > tr[data-sd-collapse=true] {\n  display: none;\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title, sd-permission-table table > * > tr[data-sd-theme=first] > *._after {\n  background: var(--theme-info-default);\n  color: var(--text-trans-rev-default);\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title > *, sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {\n  color: var(--text-trans-rev-default) !important;\n}\nsd-permission-table table > * > tr[data-sd-theme=info] > *._title, sd-permission-table table > * > tr[data-sd-theme=info] > *._after {\n  background: var(--theme-info-lightest);\n}\nsd-permission-table table > * > tr[data-sd-theme=warning] > *._title, sd-permission-table table > * > tr[data-sd-theme=warning] > *._after {\n  background: var(--theme-warning-lightest);\n}\nsd-permission-table table > * > tr[data-sd-theme=success] > *._title, sd-permission-table table > * > tr[data-sd-theme=success] > *._after {\n  background: var(--theme-success-lightest);\n}"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPermissionTable, { className: "SdPermissionTable", filePath: "packages/angular/src/data/permission-table/sd-permission-table.ts", lineNumber: 212, forbidOrphanRendering: true }); })();

package/dist/data/shared-data/matchesSearchText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchesSearchText.d.ts","sourceRoot":"","sources":["../../../src/data/shared-data/matchesSearchText.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,OAAO,CAYT"}

package/dist/data/shared-data/sd-shared-data-select-button.d.ts

@@ -0,0 +1,16 @@
+import { TemplateRef } from "@angular/core";
+import type { SharedDataBase } from "../../core/shared-data/sd-shared-data.provider";
+import { type SdItemOfTemplateContext } from "../../core/template/sd-item-of-template";
+import { SdDataSelectButtonBase } from "../data-select-button/sd-data-select-button.base";
+import type { SdSelectModal, SdSelectModalInfo } from "../../controls/button/sd-modal-select-button";
+import type { SelectModeValue } from "../../controls/select/sd-select";
+import * as i0 from "@angular/core";
+export declare class SdSharedDataSelectButton<TItem extends SharedDataBase<string | number>, TMode extends keyof SelectModeValue<string | number>, TModal extends SdSelectModal<any>> extends SdDataSelectButtonBase<TItem, string | number, TMode> {
+    items: import("@angular/core").InputSignal<TItem[]>;
+    modal: import("@angular/core").InputSignal<SdSelectModalInfo<TModal>>;
+    itemTplRef: import("@angular/core").Signal<TemplateRef<SdItemOfTemplateContext<TItem>>>;
+    load(keys: (string | number)[]): TItem[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSharedDataSelectButton<any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSharedDataSelectButton<any, any, any>, "sd-shared-data-select-button", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": true; "isSignal": true; }; }, {}, ["itemTplRef"], ["*"], true, never>;
+}
+//# sourceMappingURL=sd-shared-data-select-button.d.ts.map

package/dist/data/shared-data/sd-shared-data-select-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-shared-data-select-button.d.ts","sourceRoot":"","sources":["../../../src/data/shared-data/sd-shared-data-select-button.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,WAAW,EAEZ,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kDAAkD,CAAC;AAC1F,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EAClB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;;AAEvE,qBAuBa,wBAAwB,CACnC,KAAK,SAAS,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAC7C,KAAK,SAAS,MAAM,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,EACpD,MAAM,SAAS,aAAa,CAAC,GAAG,CAAC,CACjC,SAAQ,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC;IAC7D,KAAK,+CAAsB;IAC3B,KAAK,iEAA+C;IAEpD,UAAU,8EAGR;IAEO,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE;yCAbtC,wBAAwB;2CAAxB,wBAAwB;CAgBpC"}

package/dist/data/shared-data/sd-shared-data-select-button.js

@@ -0,0 +1,67 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, contentChild, input, TemplateRef, ViewEncapsulation, } from "@angular/core";
+import { SdItemOfTemplate, } from "../../core/template/sd-item-of-template";
+import { SdDataSelectButton } from "../data-select-button/sd-data-select-button";
+import { SdDataSelectButtonBase } from "../data-select-button/sd-data-select-button.base";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+const _c1 = (a0, a1, a2) => ({ $implicit: a0, item: a1, index: a2, depth: 0 });
+function SdSharedDataSelectButton_ng_template_1_ng_template_0_Template(rf, ctx) { }
+function SdSharedDataSelectButton_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSharedDataSelectButton_ng_template_1_ng_template_0_Template, 0, 0, "ng-template", 1);
+} if (rf & 2) {
+    const item_r1 = ctx.$implicit;
+    const index_r2 = ctx.index;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTplRef())("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c1, item_r1, item_r1, index_r2));
+} }
+export class SdSharedDataSelectButton extends SdDataSelectButtonBase {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    modal = input.required(...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    itemTplRef = contentChild.required(SdItemOfTemplate, { read: TemplateRef });
+    load(keys) {
+        return this.items().filter((item) => keys.includes(item.__valueKey));
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵSdSharedDataSelectButton_BaseFactory; return function SdSharedDataSelectButton_Factory(__ngFactoryType__) { return (ɵSdSharedDataSelectButton_BaseFactory || (ɵSdSharedDataSelectButton_BaseFactory = i0.ɵɵgetInheritedFactory(SdSharedDataSelectButton)))(__ngFactoryType__ || SdSharedDataSelectButton); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSharedDataSelectButton, selectors: [["sd-shared-data-select-button"]], contentQueries: function SdSharedDataSelectButton_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTplRef, SdItemOfTemplate, 5, TemplateRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { items: [1, "items"], modal: [1, "modal"] }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 1, consts: [[3, "itemOf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSharedDataSelectButton_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "sd-data-select-button");
+            i0.ɵɵtemplate(1, SdSharedDataSelectButton_ng_template_1_Template, 1, 6, "ng-template", 0);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("itemOf", ctx.items());
+        } }, dependencies: [SdDataSelectButton, NgTemplateOutlet, SdItemOfTemplate], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSharedDataSelectButton, [{
+        type: Component,
+        args: [{
+                selector: "sd-shared-data-select-button",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [SdDataSelectButton, NgTemplateOutlet, SdItemOfTemplate],
+                template: `
+    <sd-data-select-button>
+      <ng-template [itemOf]="items()" let-item let-index="index">
+        <ng-template
+          [ngTemplateOutlet]="itemTplRef()"
+          [ngTemplateOutletContext]="{
+            $implicit: item,
+            item: item,
+            index: index,
+            depth: 0,
+          }"
+        />
+      </ng-template>
+      <ng-content />
+    </sd-data-select-button>
+  `,
+            }]
+    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: true }] }], itemTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSharedDataSelectButton, { className: "SdSharedDataSelectButton", filePath: "packages/angular/src/data/shared-data/sd-shared-data-select-button.ts", lineNumber: 46, forbidOrphanRendering: true }); })();

package/dist/data/shared-data/sd-shared-data-select-list.d.ts

@@ -0,0 +1,34 @@
+import { TemplateRef } from "@angular/core";
+import type { SharedDataBase } from "../../core/shared-data/sd-shared-data.provider";
+import { type SdItemOfTemplateContext } from "../../core/template/sd-item-of-template";
+import type { SdSelectModal, SdSelectModalInfo } from "../../controls/button/sd-modal-select-button";
+import * as i0 from "@angular/core";
+export declare class SdSharedDataSelectList<TItem extends SharedDataBase<string | number>, TModal extends SdSelectModal<any>> {
+    private readonly _sdModal;
+    selectedItem: import("@angular/core").ModelSignal<TItem | undefined>;
+    canChangeFn: import("@angular/core").InputSignal<(item: TItem | undefined) => boolean | Promise<boolean>>;
+    items: import("@angular/core").InputSignal<TItem[]>;
+    selectedIcon: import("@angular/core").InputSignal<string | undefined>;
+    useUndefined: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    filterFn: import("@angular/core").InputSignal<((item: TItem, index: number) => boolean) | undefined>;
+    modal: import("@angular/core").InputSignal<SdSelectModalInfo<TModal> | undefined>;
+    header: import("@angular/core").InputSignal<string | undefined>;
+    headerTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    filterTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    itemTplRef: import("@angular/core").Signal<TemplateRef<SdItemOfTemplateContext<TItem>> | undefined>;
+    undefinedTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
+    searchText: import("@angular/core").WritableSignal<string | undefined>;
+    pageItemCount: import("@angular/core").InputSignal<number | undefined>;
+    page: import("@angular/core").WritableSignal<number>;
+    private readonly _filteredItems;
+    pageLength: import("@angular/core").Signal<number>;
+    displayItems: import("@angular/core").Signal<TItem[]>;
+    constructor();
+    select(item: TItem | undefined): void;
+    toggle(item: TItem | undefined): void;
+    onModalButtonClick(): Promise<void>;
+    protected readonly tablerExternalLink = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6\"></path><path d=\"M11 13l9 -9\"></path><path d=\"M15 4h5v5\"></path></svg>";
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSharedDataSelectList<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSharedDataSelectList<any, any>, "sd-shared-data-select-list", never, { "selectedItem": { "alias": "selectedItem"; "required": false; "isSignal": true; }; "canChangeFn": { "alias": "canChangeFn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "selectedIcon": { "alias": "selectedIcon"; "required": false; "isSignal": true; }; "useUndefined": { "alias": "useUndefined"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "pageItemCount": { "alias": "pageItemCount"; "required": false; "isSignal": true; }; }, { "selectedItem": "selectedItemChange"; }, ["headerTplRef", "filterTplRef", "itemTplRef", "undefinedTplRef"], never, true, never>;
+}
+//# sourceMappingURL=sd-shared-data-select-list.d.ts.map

package/dist/data/shared-data/sd-shared-data-select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-shared-data-select-list.d.ts","sourceRoot":"","sources":["../../../src/data/shared-data/sd-shared-data-select-list.ts"],"names":[],"mappings":"AACA,OAAO,EAWL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AACrF,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,yCAAyC,CAAC;AAEjD,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EAClB,MAAM,8CAA8C,CAAC;;AAUtD,qBA2Fa,sBAAsB,CACjC,KAAK,SAAS,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAC7C,MAAM,SAAS,aAAa,CAAC,GAAG,CAAC;IAEjC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,YAAY,yDAAkB;IAC9B,WAAW,6CAAgB,KAAK,GAAG,SAAS,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAEzE;IAEF,KAAK,+CAA6B;IAClC,YAAY,0DAAmB;IAC/B,YAAY,qEAAiD;IAC7D,QAAQ,8CAAgB,KAAK,SAAS,MAAM,KAAK,OAAO,eAAI;IAE5D,KAAK,6EAAsC;IAE3C,MAAM,0DAAmB;IAEzB,YAAY,gEAET;IACH,YAAY,gEAET;IACH,UAAU,0FAGR;IACF,eAAe,gEAEZ;IAEH,UAAU,6DAAyC;IAEnD,aAAa,0DAAmB;IAChC,IAAI,iDAAa;IAEjB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAc5B;IAEH,UAAU,yCAMP;IAEH,YAAY,0CAST;;IAoBH,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI;IAIrC,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI;IAI/B,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBzC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,waAAsB;yCA3HhD,sBAAsB;2CAAtB,sBAAsB;CA4HlC"}