npm - @sdcorejs/angular - Versions diffs - 19.0.0 → 20.0.0-rc.2 - Mend

@sdcorejs/angular 19.0.0 → 20.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (654) hide show

package/fesm2022/sdcorejs-angular-components-query-builder.mjs CHANGED Viewed

@@ -60,10 +60,10 @@ class SdQueryBuilder {
     removeItem(parentGroup, index) {
         parentGroup.rules.splice(index, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, host: { listeners: { "document:click": "closeAll()" } }, ngImport: i0, template: "<div class=\"qb-container\">\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\">\n    \n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n      <div class=\"qb-condition-switch\">\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'AND'\" \n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'OR'\" \n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        \n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\n        </div>\n\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      <div class=\"qb-list\">\n        <div *ngFor=\"let item of group.rules; let i = index\" \n             class=\"qb-treenode\"\n             [class.is-group]=\"isGroup(item)\"\n             [class.is-rule]=\"!isGroup(item)\">\n          \n          <ng-container *ngIf=\"!isGroup(item)\">\n            <div class=\"qb-rule-card\">\n              <div class=\"form-row\">\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n                <ng-container *ngIf=\"item.field\">\n                    <div class=\"divider\"></div>\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n                        <option value=\"Equal\">Equal</option>\n                        <option value=\"Not Equal\">Not Equal</option>\n                    </select>\n                    <div class=\"divider\"></div>\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n                </ng-container>\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"isGroup(item)\">\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdQueryBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.23", type: SdQueryBuilder, isStandalone: true, selector: "sd-query-builder", inputs: { group: "group" }, outputs: { groupChange: "groupChange" }, host: { listeners: { "document:click": "closeAll()" } }, ngImport: i0, template: "<div class=\"qb-container\">\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\">\n    \n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n      <div class=\"qb-condition-switch\">\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'AND'\" \n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'OR'\" \n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        \n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\n        </div>\n\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      <div class=\"qb-list\">\n        <div *ngFor=\"let item of group.rules; let i = index\" \n             class=\"qb-treenode\"\n             [class.is-group]=\"isGroup(item)\"\n             [class.is-rule]=\"!isGroup(item)\">\n          \n          <ng-container *ngIf=\"!isGroup(item)\">\n            <div class=\"qb-rule-card\">\n              <div class=\"form-row\">\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n                <ng-container *ngIf=\"item.field\">\n                    <div class=\"divider\"></div>\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n                        <option value=\"Equal\">Equal</option>\n                        <option value=\"Not Equal\">Not Equal</option>\n                    </select>\n                    <div class=\"divider\"></div>\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n                </ng-container>\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"isGroup(item)\">\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdQueryBuilder, decorators: [{
             type: Component,
             args: [{ selector: 'sd-query-builder', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"qb-container\">\n  <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n  <div class=\"qb-group\">\n    \n    <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n      <div class=\"qb-condition-switch\">\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'AND'\" \n                (click)=\"toggleCondition(group, 'AND')\">AND</button>\n        <button type=\"button\" \n                [class.active]=\"group.condition === 'OR'\" \n                (click)=\"toggleCondition(group, 'OR')\">OR</button>\n      </div>\n\n      <div class=\"qb-actions\">\n        <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n        \n        <div class=\"qb-dropdown\" *ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n          <button (click)=\"addGroup(group)\">+ Add Group</button>\n          <button (click)=\"addRule(group)\">+ Add Condition</button>\n        </div>\n\n        <button *ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">\u2715</button>\n      </div>\n    </div>\n\n    <div class=\"qb-body\">\n      <div class=\"qb-list\">\n        <div *ngFor=\"let item of group.rules; let i = index\" \n             class=\"qb-treenode\"\n             [class.is-group]=\"isGroup(item)\"\n             [class.is-rule]=\"!isGroup(item)\">\n          \n          <ng-container *ngIf=\"!isGroup(item)\">\n            <div class=\"qb-rule-card\">\n              <div class=\"form-row\">\n                <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n                <ng-container *ngIf=\"item.field\">\n                    <div class=\"divider\"></div>\n                    <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n                        <option value=\"Equal\">Equal</option>\n                        <option value=\"Not Equal\">Not Equal</option>\n                    </select>\n                    <div class=\"divider\"></div>\n                    <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n                </ng-container>\n                <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">\u2715</button>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"isGroup(item)\">\n            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>", styles: [":host{display:block;font-family:Segoe UI,Roboto,sans-serif;font-size:14px;color:#333}.qb-container{padding:20px;background:#fff}.qb-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;position:relative;z-index:1}.qb-header.is-open{z-index:1000}.qb-condition-switch{display:inline-flex;border-radius:4px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;height:32px}.qb-condition-switch button{border:none;background:transparent;padding:0 16px;font-weight:600;font-size:13px;cursor:pointer;color:#666;height:100%}.qb-condition-switch button.active{background:#6246a8;color:#fff}.qb-condition-switch button:hover:not(.active){background:#f5f5f5}.qb-actions{position:relative;display:flex;gap:4px}.qb-body{padding-left:28px}.qb-list{position:relative}.qb-treenode{position:relative;padding-left:24px;margin-bottom:12px}.qb-treenode:before{content:\"\";position:absolute;left:0;top:-12px;bottom:0;width:1px;border-left:1px dashed #c4c4c4}.qb-treenode:after{content:\"\";position:absolute;left:0;width:24px;height:1px;border-top:1px dashed #c4c4c4}.qb-treenode:first-child:before{top:-14px;height:calc(100% + 14px)}.qb-treenode.is-group:after{top:16px}.qb-treenode.is-group:last-child:before{height:auto;bottom:auto;top:-14px;height:30px}.qb-treenode.is-rule:after{top:26px}.qb-treenode.is-rule:last-child:before{height:auto;bottom:auto;top:-14px;height:40px}.qb-rule-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:10px 12px;transition:.2s}.qb-rule-card:hover{border-color:#ccc}.form-row{display:flex;align-items:center;gap:12px;height:32px}.form-input{border:none;background:transparent;font-size:14px;color:#333;outline:none;height:100%}.form-input::placeholder{color:#aaa}.divider{width:1px;height:20px;background:#ddd}.btn-icon{background:transparent;border:none;cursor:pointer;font-size:18px;color:#666;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.btn-icon:hover{background:#f0f0f0;color:#6246a8}.btn-remove{color:#999}.btn-remove:hover{color:#d32f2f;background:#ffebee}.btn-remove-rule{margin-left:auto;color:#999}.btn-remove-rule:hover{color:#d32f2f;background:none}.qb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 12px #00000026;border-radius:4px;min-width:160px;z-index:100}.qb-dropdown button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;font-size:13px;color:#333}.qb-dropdown button:hover{background:#f3f0fa;color:#6246a8}\n"] }]
         }], propDecorators: { group: [{

package/fesm2022/sdcorejs-angular-components-query-builder.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-query-builder.mjs","sources":["../../../projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts","../../../projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html","../../../projects/sdcorejs-angular/components/query-builder/sdcorejs-angular-components-query-builder.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nexport interface QueryRule {\n field: string;\n operator: string;\n value: any;\n}\n\nexport interface QueryGroup {\n condition: 'AND' \| 'OR';\n rules: (QueryRule \| QueryGroup)[];\n isOpen?: boolean; // Trạng thái mở menu\n}\n\n@Component({\n selector: 'sd-query-builder',\n standalone: true,\n imports: [CommonModule, FormsModule],\n templateUrl: './query-builder.component.html',\n styleUrls: ['./query-builder.component.scss']\n})\nexport class SdQueryBuilder {\n @Input() group: QueryGroup = {\n condition: 'AND',\n rules: [\n { field: 'Employee ID', operator: 'Equal', value: '1' },\n { field: 'Title', operator: 'Equal', value: 'Sales Manager' },\n {\n condition: 'OR',\n rules: [\n { field: 'Select Field', operator: '', value: '' }\n ]\n }\n ]\n };\n\n @Output() groupChange = new EventEmitter<QueryGroup>();\n\n isGroup(item: any): item is QueryGroup {\n return (item as QueryGroup).rules !== undefined;\n }\n\n toggleCondition(group: QueryGroup, condition: 'AND' \| 'OR') {\n group.condition = condition;\n }\n\n // --- LOGIC DROPDOWN & Z-INDEX ---\n toggleDropdown(group: QueryGroup, event: Event) {\n event.stopPropagation();\n // Đóng tất cả các dropdown khác để tránh chồng chéo\n if (!group.isOpen) {\n this.closeAllDropdowns(this.group);\n }\n group.isOpen = !group.isOpen;\n }\n\n @HostListener('document:click')\n closeAll() {\n this.closeAllDropdowns(this.group);\n }\n\n closeAllDropdowns(group: QueryGroup) {\n group.isOpen = false;\n group.rules.forEach(rule => {\n if (this.isGroup(rule)) this.closeAllDropdowns(rule);\n });\n }\n // --------------------------------\n\n addRule(group: QueryGroup) {\n group.rules.push({ field: '', operator: 'Equal', value: '' });\n group.isOpen = false;\n }\n\n addGroup(group: QueryGroup) {\n group.rules.push({\n condition: 'OR',\n rules: [{ field: '', operator: '', value: '' }]\n } as QueryGroup);\n group.isOpen = false;\n }\n\n removeItem(parentGroup: QueryGroup, index: number) {\n parentGroup.rules.splice(index, 1);\n }\n}","<div class=\"qb-container\">\n <ng-container ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n <div class=\"qb-group\">\n \n <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n <div class=\"qb-condition-switch\">\n <button type=\"button\" \n [class.active]=\"group.condition === 'AND'\" \n (click)=\"toggleCondition(group, 'AND')\">AND</button>\n <button type=\"button\" \n [class.active]=\"group.condition === 'OR'\" \n (click)=\"toggleCondition(group, 'OR')\">OR</button>\n </div>\n\n <div class=\"qb-actions\">\n <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n \n <div class=\"qb-dropdown\" ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n <button (click)=\"addGroup(group)\">+ Add Group</button>\n <button (click)=\"addRule(group)\">+ Add Condition</button>\n </div>\n\n <button ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">✕</button>\n </div>\n </div>\n\n <div class=\"qb-body\">\n <div class=\"qb-list\">\n <div ngFor=\"let item of group.rules; let i = index\" \n class=\"qb-treenode\"\n [class.is-group]=\"isGroup(item)\"\n [class.is-rule]=\"!isGroup(item)\">\n \n <ng-container ngIf=\"!isGroup(item)\">\n <div class=\"qb-rule-card\">\n <div class=\"form-row\">\n <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n <ng-container ngIf=\"item.field\">\n <div class=\"divider\"></div>\n <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n <option value=\"Equal\">Equal</option>\n <option value=\"Not Equal\">Not Equal</option>\n </select>\n <div class=\"divider\"></div>\n <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n </ng-container>\n <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">✕</button>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"isGroup(item)\">\n <ng-container ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;MAuBa,cAAc,CAAA;AAChB,IAAA,KAAK,GAAe;AAC3B,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE;YACvD,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE;AAC7D,YAAA;AACE,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,KAAK,EAAE;oBACL,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;AACjD;AACF;AACF;KACF;AAES,IAAA,WAAW,GAAG,IAAI,YAAY,EAAc;AAEtD,IAAA,OAAO,CAAC,IAAS,EAAA;AACf,QAAA,OAAQ,IAAmB,CAAC,KAAK,KAAK,SAAS;IACjD;IAEA,eAAe,CAAC,KAAiB,EAAE,SAAuB,EAAA;AACxD,QAAA,KAAK,CAAC,SAAS,GAAG,SAAS;IAC7B;;IAGA,cAAc,CAAC,KAAiB,EAAE,KAAY,EAAA;QAC5C,KAAK,CAAC,eAAe,EAAE;;AAEvB,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACf,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC;AACA,QAAA,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,MAAM;IAC9B;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;IACpC;AAEA,IAAA,iBAAiB,CAAC,KAAiB,EAAA;AACjC,QAAA,KAAK,CAAC,MAAM,GAAG,KAAK;AACpB,QAAA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACzB,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AAAE,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AACtD,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,OAAO,CAAC,KAAiB,EAAA;AACvB,QAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAC7D,QAAA,KAAK,CAAC,MAAM,GAAG,KAAK;IACtB;AAEA,IAAA,QAAQ,CAAC,KAAiB,EAAA;AACxB,QAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AACf,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;AACjC,SAAA,CAAC;AAChB,QAAA,KAAK,CAAC,MAAM,GAAG,KAAK;IACtB;IAEA,UAAU,CAAC,WAAuB,EAAE,KAAa,EAAA;QAC/C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACpC;wGA/DW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvB3B,y0FA6Dc,EAAA,MAAA,EAAA,CAAA,igFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1CF,YAAY,saAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAIxB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAChB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,y0FAAA,EAAA,MAAA,EAAA,CAAA,igFAAA,CAAA,EAAA~~;8BAK3B~~,~~KAAK,EAAA,CAAA;sBAAb;gBAcS,WAAW,EAAA,CAAA;sBAApB;gBAqBD,QAAQ,EAAA,CAAA;sBADP,~~YAAY;uBAAC,gBAAgB;;;AE1DhC;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-query-builder.mjs","sources":["../../../projects/sdcorejs-angular/components/query-builder/src/query-builder.component.ts","../../../projects/sdcorejs-angular/components/query-builder/src/query-builder.component.html","../../../projects/sdcorejs-angular/components/query-builder/sdcorejs-angular-components-query-builder.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nexport interface QueryRule {\n field: string;\n operator: string;\n value: any;\n}\n\nexport interface QueryGroup {\n condition: 'AND' \| 'OR';\n rules: (QueryRule \| QueryGroup)[];\n isOpen?: boolean; // Trạng thái mở menu\n}\n\n@Component({\n selector: 'sd-query-builder',\n standalone: true,\n imports: [CommonModule, FormsModule],\n templateUrl: './query-builder.component.html',\n styleUrls: ['./query-builder.component.scss']\n})\nexport class SdQueryBuilder {\n @Input() group: QueryGroup = {\n condition: 'AND',\n rules: [\n { field: 'Employee ID', operator: 'Equal', value: '1' },\n { field: 'Title', operator: 'Equal', value: 'Sales Manager' },\n {\n condition: 'OR',\n rules: [\n { field: 'Select Field', operator: '', value: '' }\n ]\n }\n ]\n };\n\n @Output() groupChange = new EventEmitter<QueryGroup>();\n\n isGroup(item: any): item is QueryGroup {\n return (item as QueryGroup).rules !== undefined;\n }\n\n toggleCondition(group: QueryGroup, condition: 'AND' \| 'OR') {\n group.condition = condition;\n }\n\n // --- LOGIC DROPDOWN & Z-INDEX ---\n toggleDropdown(group: QueryGroup, event: Event) {\n event.stopPropagation();\n // Đóng tất cả các dropdown khác để tránh chồng chéo\n if (!group.isOpen) {\n this.closeAllDropdowns(this.group);\n }\n group.isOpen = !group.isOpen;\n }\n\n @HostListener('document:click')\n closeAll() {\n this.closeAllDropdowns(this.group);\n }\n\n closeAllDropdowns(group: QueryGroup) {\n group.isOpen = false;\n group.rules.forEach(rule => {\n if (this.isGroup(rule)) this.closeAllDropdowns(rule);\n });\n }\n // --------------------------------\n\n addRule(group: QueryGroup) {\n group.rules.push({ field: '', operator: 'Equal', value: '' });\n group.isOpen = false;\n }\n\n addGroup(group: QueryGroup) {\n group.rules.push({\n condition: 'OR',\n rules: [{ field: '', operator: '', value: '' }]\n } as QueryGroup);\n group.isOpen = false;\n }\n\n removeItem(parentGroup: QueryGroup, index: number) {\n parentGroup.rules.splice(index, 1);\n }\n}","<div class=\"qb-container\">\n <ng-container ngTemplateOutlet=\"groupTemplate; context: { $implicit: group, isRoot: true }\"></ng-container>\n</div>\n\n<ng-template #groupTemplate let-group let-isRoot=\"isRoot\" let-parent=\"parent\" let-index=\"index\">\n <div class=\"qb-group\">\n \n <div class=\"qb-header\" [class.is-open]=\"group.isOpen\">\n <div class=\"qb-condition-switch\">\n <button type=\"button\" \n [class.active]=\"group.condition === 'AND'\" \n (click)=\"toggleCondition(group, 'AND')\">AND</button>\n <button type=\"button\" \n [class.active]=\"group.condition === 'OR'\" \n (click)=\"toggleCondition(group, 'OR')\">OR</button>\n </div>\n\n <div class=\"qb-actions\">\n <button type=\"button\" class=\"btn-icon btn-add\" (click)=\"toggleDropdown(group, $event)\">+</button>\n \n <div class=\"qb-dropdown\" ngIf=\"group.isOpen\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n <button (click)=\"addGroup(group)\">+ Add Group</button>\n <button (click)=\"addRule(group)\">+ Add Condition</button>\n </div>\n\n <button ngIf=\"!isRoot\" type=\"button\" class=\"btn-icon btn-remove\" (click)=\"removeItem(parent, index)\">✕</button>\n </div>\n </div>\n\n <div class=\"qb-body\">\n <div class=\"qb-list\">\n <div ngFor=\"let item of group.rules; let i = index\" \n class=\"qb-treenode\"\n [class.is-group]=\"isGroup(item)\"\n [class.is-rule]=\"!isGroup(item)\">\n \n <ng-container ngIf=\"!isGroup(item)\">\n <div class=\"qb-rule-card\">\n <div class=\"form-row\">\n <input class=\"form-input field-input\" [(ngModel)]=\"item.field\" placeholder=\"Select Field\">\n <ng-container ngIf=\"item.field\">\n <div class=\"divider\"></div>\n <select class=\"form-input\" [(ngModel)]=\"item.operator\">\n <option value=\"Equal\">Equal</option>\n <option value=\"Not Equal\">Not Equal</option>\n </select>\n <div class=\"divider\"></div>\n <input class=\"form-input\" [(ngModel)]=\"item.value\" placeholder=\"Value\">\n </ng-container>\n <button type=\"button\" class=\"btn-icon btn-remove-rule\" (click)=\"removeItem(group, i)\">✕</button>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"isGroup(item)\">\n <ng-container ngTemplateOutlet=\"groupTemplate; context: { $implicit: item, isRoot: false, parent: group, index: i }\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-quick-action.mjs CHANGED Viewed

@@ -5,14 +5,14 @@ class SdQuickAction {
     /**
      * Toggle visibility of the floating toolbar. Bare attribute = true.
      */
-    opened = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuickAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdQuickAction, isStandalone: true, selector: "sd-quick-action", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n  <div class=\"c-quick-action-message T14R\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <div class=\"c-quick-action-action\">\n    <ng-content select=\"[sdAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:8px;position:fixed;width:max-content;max-width:min(90vw,720px);background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:transform .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99;gap:16px}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}.c-quick-action-message{flex:1 1 auto;min-width:0}.c-quick-action-action{flex:0 0 auto;display:flex;align-items:center}.c-quick-action:has(.c-quick-action-action:empty){gap:0;padding-right:16px}.c-quick-action-action:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    opened = input(false, ...(ngDevMode ? [{ debugName: "opened", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdQuickAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: SdQuickAction, isStandalone: true, selector: "sd-quick-action", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n  <div class=\"c-quick-action-message T14R\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <div class=\"c-quick-action-action\">\n    <ng-content select=\"[sdAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:8px;position:fixed;width:max-content;max-width:min(90vw,720px);background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:transform .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99;gap:16px}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}.c-quick-action-message{flex:1 1 auto;min-width:0}.c-quick-action-action{flex:0 0 auto;display:flex;align-items:center}.c-quick-action:has(.c-quick-action-action:empty){gap:0;padding-right:16px}.c-quick-action-action:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQuickAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdQuickAction, decorators: [{
             type: Component,
             args: [{ selector: 'sd-quick-action', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n  <div class=\"c-quick-action-message T14R\">\n    <ng-content select=\"[sdMessage]\"></ng-content>\n  </div>\n  <div class=\"c-quick-action-action\">\n    <ng-content select=\"[sdAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".c-quick-action{box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:8px;position:fixed;width:max-content;max-width:min(90vw,720px);background-color:#fff;bottom:90px;left:0;right:0;margin:auto;visibility:hidden;opacity:0;pointer-events:none;transition:transform .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transform:translate3d(0,100%,0);z-index:99;gap:16px}.c-quick-action.active{transform:translateZ(0);opacity:1;visibility:visible;pointer-events:all}.c-quick-action-message{flex:1 1 auto;min-width:0}.c-quick-action-action{flex:0 0 auto;display:flex;align-items:center}.c-quick-action:has(.c-quick-action-action:empty){gap:0;padding-right:16px}.c-quick-action-action:empty{display:none}\n"] }]
-        }] });
+        }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sdcorejs-angular-components-quick-action.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-quick-action.mjs","sources":["../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.ts","../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.html","../../../projects/sdcorejs-angular/components/quick-action/sdcorejs-angular-components-quick-action.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-quick-action',\n templateUrl: './quick-action.component.html',\n styleUrls: ['./quick-action.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdQuickAction {\n /*\n Toggle visibility of the floating toolbar. Bare attribute = true.\n /\n readonly opened = input(false, { transform: booleanAttribute });\n}\n","<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n <div class=\"c-quick-action-message T14R\">\n <ng-content select=\"[sdMessage]\"></ng-content>\n </div>\n <div class=\"c-quick-action-action\">\n <ng-content select=\"[sdAction]\"></ng-content>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MASa,aAAa,CAAA;AACxB;;AAEG;~~IACM~~,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~;wGAJpD,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,kNCT1B,uTAQA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDCa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EAGf,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uTAAA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA;;;AEPjD;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-quick-action.mjs","sources":["../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.ts","../../../projects/sdcorejs-angular/components/quick-action/src/quick-action.component.html","../../../projects/sdcorejs-angular/components/quick-action/sdcorejs-angular-components-quick-action.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-quick-action',\n templateUrl: './quick-action.component.html',\n styleUrls: ['./quick-action.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdQuickAction {\n /*\n Toggle visibility of the floating toolbar. Bare attribute = true.\n /\n readonly opened = input(false, { transform: booleanAttribute });\n}\n","<div class=\"c-quick-action d-flex align-items-center\" [class.active]=\"opened()\">\n <div class=\"c-quick-action-message T14R\">\n <ng-content select=\"[sdMessage]\"></ng-content>\n </div>\n <div class=\"c-quick-action-action\">\n <ng-content select=\"[sdAction]\"></ng-content>\n </div>\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;MASa,aAAa,CAAA;AACxB;;AAEG;AACM,IAAA,MAAM,GAAG,KAAK,CAAC,KAAK,0CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;wGAJpD,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,kNCT1B,uTAQA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDCa,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EAGf,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uTAAA,EAAA,MAAA,EAAA,CAAA,stBAAA,CAAA,EAAA;;;AEPjD;;AAEG;;;;"}

package/fesm2022/sdcorejs-angular-components-section.mjs CHANGED Viewed

@@ -7,14 +7,14 @@ import { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdSection extends SdBaseSecureComponent {
     #el = inject(ElementRef);
-    title = input(undefined);
-    subTitle = input(undefined);
-    icon = input(undefined);
-    iconColor = input('primary', { alias: 'iconColor' });
-    collapsed = model(false, { alias: 'collapsed' });
-    collapsable = input(false, { transform: booleanAttribute });
-    hideHeader = input(false, { transform: booleanAttribute });
-    noPaddingBody = input(false, { transform: booleanAttribute });
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subTitle = input(undefined, ...(ngDevMode ? [{ debugName: "subTitle" }] : []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor", alias: 'iconColor' }] : [{ alias: 'iconColor' }]));
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed", alias: 'collapsed' }] : [{ alias: 'collapsed' }]));
+    collapsable = input(false, ...(ngDevMode ? [{ debugName: "collapsable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    hideHeader = input(false, ...(ngDevMode ? [{ debugName: "hideHeader", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    noPaddingBody = input(false, ...(ngDevMode ? [{ debugName: "noPaddingBody", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     constructor() {
         super();
         effect(() => {
@@ -33,28 +33,30 @@ class SdSection extends SdBaseSecureComponent {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, noPaddingBody: { classPropertyName: "noPaddingBody", publicName: "noPaddingBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (icon()) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ icon() }}\n            </span>\n          }\n          <div>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsable: { classPropertyName: "collapsable", publicName: "collapsable", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, noPaddingBody: { classPropertyName: "noPaddingBody", publicName: "noPaddingBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "@let _hideHeader = hideHeader();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (icon()) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ icon() }}\n            </span>\n          }\n          <div>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
             args: [{ selector: 'sd-section', imports: [MatIconModule], template: "@let _hideHeader = hideHeader();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n  @if (!_hideHeader) {\n    <div\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n      (click)=\"toggleCollapse()\"\n      aria-hidden=\"true\">\n      <div class=\"d-flex align-items-center\">\n        <ng-content select=\"[sdHeaderLeft]\">\n          @if (icon()) {\n            <span\n              class=\"mr-8 material-icons-outlined\"\n              [class.text-primary]=\"_iconColor === 'primary'\"\n              [class.text-secondary]=\"_iconColor === 'secondary'\"\n              [class.text-error]=\"_iconColor === 'error'\"\n              [class.text-warning]=\"_iconColor === 'warning'\"\n              [class.text-success]=\"_iconColor === 'success'\">\n              {{ icon() }}\n            </span>\n          }\n          <div>\n            @if (_title) {\n              <div class=\"T16M\">{{ _title }}</div>\n            }\n            @if (_subTitle) {\n              <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n            }\n          </div>\n        </ng-content>\n      </div>\n      <div class=\"d-flex\">\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\n        @if (_collapsable) {\n          <div class=\"d-flex align-items-center\">\n            @if (_collapsed) {\n              <mat-icon>expand_more</mat-icon>\n            } @else {\n              <mat-icon>expand_less</mat-icon>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (!_collapsed || _hideHeader) {\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\n    <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n", styles: [":host{width:100%;display:block}.c-no-padding-body{padding:0!important}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsable: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsable", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], noPaddingBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingBody", required: false }] }] } });
 class SdSectionItem {
-    label = input.required();
-    labelWidth = input('150px', {
-        transform: (val) => {
-            return val || '150px';
-        },
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdSectionItem, isStandalone: true, selector: "sd-section-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-item\">\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] });
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    labelWidth = input('150px', ...(ngDevMode ? [{ debugName: "labelWidth", transform: (val) => {
+                return val || '150px';
+            } }] : [{
+            transform: (val) => {
+                return val || '150px';
+            },
+        }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: SdSectionItem, isStandalone: true, selector: "sd-section-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c-item\">\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSectionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSectionItem, decorators: [{
             type: Component,
             args: [{ selector: 'sd-section-item', standalone: true, template: "<div class=\"c-item\">\n  <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n  <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>", styles: [":host{width:100%;display:block}.c-item{display:flex;flex-direction:row;align-items:center;column-gap:8px;padding:8px 16px;border-bottom:1px solid #f2f2f2}\n"] }]
-        }] });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sdcorejs-angular-components-section.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { Color } from '@sdcorejs/utils/models';\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrls: ['./section.component.scss'],\n imports: [MatIconModule],\n})\nexport class SdSection extends SdBaseSecureComponent {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsable = input(false, { transform: booleanAttribute });\n hideHeader = input(false, { transform: booleanAttribute });\n noPaddingBody = input(false, { transform: booleanAttribute });\n\n constructor() {\n super();\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsable()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n @if (!_hideHeader) {\n <div\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n (click)=\"toggleCollapse()\"\n aria-hidden=\"true\">\n <div class=\"d-flex align-items-center\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (icon()) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ icon() }}\n </span>\n }\n <div>\n @if (_title) {\n <div class=\"T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"d-flex\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsable) {\n <div class=\"d-flex align-items-center\">\n @if (_collapsed) {\n <mat-icon>expand_more</mat-icon>\n } @else {\n <mat-icon>expand_less</mat-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <!-- Nếu header bị ẩn thì không cần border top -->\n <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrls: ['section-item.component.scss'],\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;AAClD,IAAA,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;AAExB,IAAA,KAAK,GAAG,KAAK,CAA4B,SAAS,~~CAAC~~;AACnD,IAAA,QAAQ,GAAG,KAAK,CAA4B,SAAS,~~CAAC~~;AACtD,IAAA,IAAI,GAAG,KAAK,CAA4B,SAAS,~~CAAC~~;~~IAClD~~,SAAS,GAAG,KAAK,CAAQ,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,~~CAAC~~;~~IAE3D~~,SAAS,GAAG,KAAK,CAAU,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,~~CAAC~~;~~IACzD~~,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~;~~IAC3D~~,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~;~~IAC1D~~,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,~~CAAC~~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~~EAAU~~;~~AAChC~~,~~IAAA,~~UAAU,GAAG,KAAK,CAAoC,OAAO,EAAE;AAC7D,~~QAAA~~,SAAS,EAAE,CAAC,GAAQ,KAAY;~~YAC9B~~,OAAO,GAAG,IAAI,OAAO;~~QACvB~~,CAAC;AACF,~~KAAA~~,CAAC;wGANS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,qVCR1B,mLAGM,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA,CAAA;;4FDKO,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,cAGf,IAAI,EAAA,QAAA,EAAA,mLAAA,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA;;;AENlB;;AAEG;;;;"}
1	+ {"version":3,"file":"sdcorejs-angular-components-section.mjs","sources":["../../../projects/sdcorejs-angular/components/section/src/section.component.ts","../../../projects/sdcorejs-angular/components/section/src/section.component.html","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sdcorejs-angular/components/section/src/section-item/section-item.component.html","../../../projects/sdcorejs-angular/components/section/sdcorejs-angular-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { Color } from '@sdcorejs/utils/models';\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrls: ['./section.component.scss'],\n imports: [MatIconModule],\n})\nexport class SdSection extends SdBaseSecureComponent {\n #el = inject(ElementRef);\n\n title = input<string \| undefined \| null>(undefined);\n subTitle = input<string \| undefined \| null>(undefined);\n icon = input<string \| undefined \| null>(undefined);\n iconColor = input<Color>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsable = input(false, { transform: booleanAttribute });\n hideHeader = input(false, { transform: booleanAttribute });\n noPaddingBody = input(false, { transform: booleanAttribute });\n\n constructor() {\n super();\n effect(() => {\n if (this.title()) {\n this.#el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsable()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n}\n","@let _hideHeader = hideHeader();\n@let _collapsable = collapsable();\n@let _collapsed = collapsed();\n@let _title = title();\n@let _subTitle = subTitle();\n@let _iconColor = iconColor();\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\n @if (!_hideHeader) {\n <div\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\n (click)=\"toggleCollapse()\"\n aria-hidden=\"true\">\n <div class=\"d-flex align-items-center\">\n <ng-content select=\"[sdHeaderLeft]\">\n @if (icon()) {\n <span\n class=\"mr-8 material-icons-outlined\"\n [class.text-primary]=\"_iconColor === 'primary'\"\n [class.text-secondary]=\"_iconColor === 'secondary'\"\n [class.text-error]=\"_iconColor === 'error'\"\n [class.text-warning]=\"_iconColor === 'warning'\"\n [class.text-success]=\"_iconColor === 'success'\">\n {{ icon() }}\n </span>\n }\n <div>\n @if (_title) {\n <div class=\"T16M\">{{ _title }}</div>\n }\n @if (_subTitle) {\n <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\n }\n </div>\n </ng-content>\n </div>\n <div class=\"d-flex\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (_collapsable) {\n <div class=\"d-flex align-items-center\">\n @if (_collapsed) {\n <mat-icon>expand_more</mat-icon>\n } @else {\n <mat-icon>expand_less</mat-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!_collapsed \|\| _hideHeader) {\n <!-- Nếu header bị ẩn thì không cần border top -->\n <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n","import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'sd-section-item',\n templateUrl: './section-item.component.html',\n styleUrls: ['section-item.component.scss'],\n standalone: true,\n})\nexport class SdSectionItem {\n label = input.required<string>();\n labelWidth = input<string, string \| null \| undefined>('150px', {\n transform: (val: any): string => {\n return val \|\| '150px';\n },\n });\n}\n","<div class=\"c-item\">\n <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\n <div style=\"flex: 1;\"><ng-content></ng-content></div>\n</div>","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-side-drawer.mjs CHANGED Viewed

@@ -13,22 +13,22 @@ import { map, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators'
 class SdSideDrawer extends SdBaseSecureComponent {
     id = `I${uuid.v4()}`;
     portal = viewChild.required(CdkPortal);
-    title = input('');
-    width = input('480px');
-    hideClose = input(false, { transform: booleanAttribute });
-    disableBackdropClose = input(false, { transform: booleanAttribute });
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    width = input('480px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    hideClose = input(false, ...(ngDevMode ? [{ debugName: "hideClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disableBackdropClose = input(false, ...(ngDevMode ? [{ debugName: "disableBackdropClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     // Custom CSS class added to the root side-drawer container
-    drawerClass = input('');
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    autoId = computed(() => this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined);
+    drawerClass = input('', ...(ngDevMode ? [{ debugName: "drawerClass" }] : []));
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    autoId = computed(() => this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined, ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     sdClosed = output();
     #embeddedViewRef;
-    #isOpenedSignal = signal(false);
-    #isLoadingSignal = signal(false);
+    #isOpenedSignal = signal(false, ...(ngDevMode ? [{ debugName: "#isOpenedSignal" }] : []));
+    #isLoadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "#isLoadingSignal" }] : []));
     isOpened = this.#isOpenedSignal.asReadonly();
     isLoading = this.#isLoadingSignal.asReadonly();
-    dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));
-    dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));
+    dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataOpened" }] : []));
+    dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataLoading" }] : []));
     isHovered$;
     #destroy$ = new Subject();
     #previousBodyOverflow = null;
@@ -43,7 +43,7 @@ class SdSideDrawer extends SdBaseSecureComponent {
         // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render
         afterNextRender(() => {
             // 1. Gắn portal vào body và lưu lại EmbeddedViewRef
-            const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);
+            const outlet = new DomPortalOutlet(document.body, this.#ar, this.#injector);
             this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());
             // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra
             this.#setupHoverSubscription();
@@ -113,13 +113,13 @@ class SdSideDrawer extends SdBaseSecureComponent {
         const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));
         this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"sd-side-drawer\"\n    [ngStyle]=\"{ width: width() }\"\n    [ngClass]=\"drawerClass()\"\n    [class.sd-side-drawer-active]=\"isOpened()\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\"\n    [attr.data-loading]=\"dataLoading()\"\n    #drawerContainer>\n    @if (isOpened()) {\n      <ng-container>\n        <div class=\"sd-side-drawer-header\">\n          <div class=\"sd-side-drawer-title\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              {{ title() }}\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-actions\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  fill=\"none\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n              </button>\n            }\n          </div>\n        </div>\n        @if (isOpened()) {\n          <div class=\"sd-side-drawer-body\">\n            <div class=\"sd-side-drawer-content\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n        <div class=\"sd-side-drawer-footer\">\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </ng-container>\n    }\n  </div>\n  @if (isOpened()) {\n    <div\n      aria-hidden=\"true\"\n      class=\"sd-side-drawer-backdrop\"\n      (click)=\"disableBackdropClose() ? null : close()\"\n      (wheel)=\"preventScroll($event)\"\n      (touchmove)=\"preventScroll($event)\"></div>\n  }\n</ng-template>\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"sd-side-drawer\"\n    [ngStyle]=\"{ width: width() }\"\n    [ngClass]=\"drawerClass()\"\n    [class.sd-side-drawer-active]=\"isOpened()\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\"\n    [attr.data-loading]=\"dataLoading()\"\n    #drawerContainer>\n    @if (isOpened()) {\n      <ng-container>\n        <div class=\"sd-side-drawer-header\">\n          <div class=\"sd-side-drawer-title\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              {{ title() }}\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-actions\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  fill=\"none\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n              </button>\n            }\n          </div>\n        </div>\n        @if (isOpened()) {\n          <div class=\"sd-side-drawer-body\">\n            <div class=\"sd-side-drawer-content\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n        <div class=\"sd-side-drawer-footer\">\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </ng-container>\n    }\n  </div>\n  @if (isOpened()) {\n    <div\n      aria-hidden=\"true\"\n      class=\"sd-side-drawer-backdrop\"\n      (click)=\"disableBackdropClose() ? null : close()\"\n      (wheel)=\"preventScroll($event)\"\n      (touchmove)=\"preventScroll($event)\"></div>\n  }\n</ng-template>\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSideDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSideDrawer, decorators: [{
             type: Component,
             args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"sd-side-drawer\"\n    [ngStyle]=\"{ width: width() }\"\n    [ngClass]=\"drawerClass()\"\n    [class.sd-side-drawer-active]=\"isOpened()\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\"\n    [attr.data-loading]=\"dataLoading()\"\n    #drawerContainer>\n    @if (isOpened()) {\n      <ng-container>\n        <div class=\"sd-side-drawer-header\">\n          <div class=\"sd-side-drawer-title\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              {{ title() }}\n            </ng-content>\n          </div>\n          <div class=\"sd-side-drawer-header-actions\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  fill=\"none\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n              </button>\n            }\n          </div>\n        </div>\n        @if (isOpened()) {\n          <div class=\"sd-side-drawer-body\">\n            <div class=\"sd-side-drawer-content\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n        <div class=\"sd-side-drawer-footer\">\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </ng-container>\n    }\n  </div>\n  @if (isOpened()) {\n    <div\n      aria-hidden=\"true\"\n      class=\"sd-side-drawer-backdrop\"\n      (click)=\"disableBackdropClose() ? null : close()\"\n      (wheel)=\"preventScroll($event)\"\n      (touchmove)=\"preventScroll($event)\"></div>\n  }\n</ng-template>\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { portal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortal), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], drawerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerClass", required: false }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdcorejs-angular-components-side-drawer.mjs","sources":["../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sdcorejs-angular/components/side-drawer/sdcorejs-angular-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n ApplicationRef,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n EmbeddedViewRef,\n Injector,\n ViewContainerRef,\n afterNextRender,\n booleanAttribute,\n computed,\n inject,\n input,\n output,\n signal,\n viewChild\n} from '@angular/core';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport * as uuid from 'uuid';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\n\n@Component({\n selector: 'sd-side-drawer',\n templateUrl: './side-drawer.component.html',\n styleUrls: ['./side-drawer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, PortalModule],\n})\nexport class SdSideDrawer extends SdBaseSecureComponent {\n id = `I${uuid.v4()}`;\n \n portal = viewChild.required(CdkPortal);\n \n title = input<string>('');\n width = input<string>('480px');\n hideClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\n disableBackdropClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\n\n // Custom CSS class added to the root side-drawer container\n drawerClass = input<any>('');\n\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\n readonly autoId = computed(() =>\n this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined\n );\n\n sdClosed = output<void>();\n\n #embeddedViewRef!: EmbeddedViewRef<any>;\n\n readonly #isOpenedSignal = signal(false);\n readonly #isLoadingSignal = signal(false);\n readonly isOpened = this.#isOpenedSignal.asReadonly();\n readonly isLoading = this.#isLoadingSignal.asReadonly();\n readonly dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));\n readonly dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));\n\n isHovered$!: Observable<boolean>;\n #destroy$ = new Subject<void>();\n #previousBodyOverflow: string \| null = null;\n\n #viewContainerRef = inject(ViewContainerRef);\n #ar = inject(ApplicationRef);\n #injector = inject(Injector);\n #ref = inject(ChangeDetectorRef);\n #loadingService = inject(SdLoadingService);\n #destroyRef = inject(DestroyRef);\n\n constructor() {\n super();\n\n // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\n afterNextRender(() => {\n // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\n const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\n this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n \n // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\n this.#setupHoverSubscription();\n });\n\n // Thay thế ngOnDestroy bằng logic destroy trực tiếp \n this.#destroyRef.onDestroy(() => {\n this.#destroy$.next();\n this.#destroy$.complete();\n \n if (this.#embeddedViewRef) {\n this.#embeddedViewRef.destroy();\n }\n \n if (this.#isOpenedSignal()) {\n if (this.#previousBodyOverflow !== null) {\n document.body.style.overflow = this.#previousBodyOverflow;\n } else {\n document.body.style.overflow = '';\n }\n }\n });\n }\n\n open = () => {\n this.#ref.markForCheck();\n this.#isOpenedSignal.set(true);\n\n // Chặn scroll ở document body\n this.#previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n };\n\n close = () => {\n this.#ref.markForCheck();\n this.#isOpenedSignal.set(false);\n this.sdClosed.emit();\n this.stopLoading();\n \n // Khôi phục lại scroll ở document body\n if (this.#previousBodyOverflow !== null) {\n document.body.style.overflow = this.#previousBodyOverflow;\n this.#previousBodyOverflow = null;\n } else {\n document.body.style.overflow = '';\n }\n };\n\n startLoading = () => {\n this.#isLoadingSignal.set(true);\n this.#loadingService.stop(`#${this.id}`);\n this.#loadingService.start(`#${this.id}`);\n };\n\n stopLoading = () => {\n this.#isLoadingSignal.set(false);\n this.#loadingService.stop(`#${this.id}`);\n };\n\n preventScroll = (event: Event) => {\n event.preventDefault();\n };\n\n #setupHoverSubscription(): void {\n if (!this.#embeddedViewRef) return;\n\n // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\n const rootNodes = this.#embeddedViewRef.rootNodes;\n const element = rootNodes.find(\n (node) => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\n );\n\n if (!element) {\n console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\n return;\n }\n\n // 4. Gắn event listeners trực tiếp lên element thật\n const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\n const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\n\n this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(\n startWith(false),\n distinctUntilChanged(),\n takeUntil(this.#destroy$)\n );\n }\n}","<ng-template cdkPortal>\n <div\n [id]=\"id\"\n class=\"sd-side-drawer\"\n [ngStyle]=\"{ width: width() }\"\n [ngClass]=\"drawerClass()\"\n [class.sd-side-drawer-active]=\"isOpened()\"\n [attr.data-autoId]=\"autoId()\"\n [attr.data-opened]=\"dataOpened()\"\n [attr.data-loading]=\"dataLoading()\"\n #drawerContainer>\n @if (isOpened()) {\n <ng-container>\n <div class=\"sd-side-drawer-header\">\n <div class=\"sd-side-drawer-title\">\n <ng-content select=\"[sdHeaderLeft]\">\n {{ title() }}\n </ng-content>\n </div>\n <div class=\"sd-side-drawer-header-actions\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (!hideClose()) {\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n </div>\n @if (isOpened()) {\n <div class=\"sd-side-drawer-body\">\n <div class=\"sd-side-drawer-content\">\n <ng-content></ng-content>\n </div>\n </div>\n }\n <div class=\"sd-side-drawer-footer\">\n <ng-content select=\"[sdFooter]\"></ng-content>\n </div>\n </ng-container>\n }\n </div>\n @if (isOpened()) {\n <div\n aria-hidden=\"true\"\n class=\"sd-side-drawer-backdrop\"\n (click)=\"disableBackdropClose() ? null : close()\"\n (wheel)=\"preventScroll($event)\"\n (touchmove)=\"preventScroll($event)\"></div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sdcorejs-angular-components-side-drawer.mjs","sources":["../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sdcorejs-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sdcorejs-angular/components/side-drawer/sdcorejs-angular-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n ApplicationRef,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n EmbeddedViewRef,\n Injector,\n ViewContainerRef,\n afterNextRender,\n booleanAttribute,\n computed,\n inject,\n input,\n output,\n signal,\n viewChild\n} from '@angular/core';\nimport { SdBaseSecureComponent } from '@sdcorejs/angular/components/base';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport * as uuid from 'uuid';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\n\n@Component({\n selector: 'sd-side-drawer',\n templateUrl: './side-drawer.component.html',\n styleUrls: ['./side-drawer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, PortalModule],\n})\nexport class SdSideDrawer extends SdBaseSecureComponent {\n id = `I${uuid.v4()}`;\n \n portal = viewChild.required(CdkPortal);\n \n title = input<string>('');\n width = input<string>('480px');\n hideClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\n disableBackdropClose = input<boolean, boolean \| ''>(false, { transform: booleanAttribute });\n\n // Custom CSS class added to the root side-drawer container\n drawerClass = input<any>('');\n\n readonly autoIdInput = input<string \| undefined \| null>(undefined, { alias: 'autoId' });\n readonly autoId = computed(() =>\n this.autoIdInput() ? `components-side-drawer-${this.autoIdInput()}` : undefined\n );\n\n sdClosed = output<void>();\n\n #embeddedViewRef!: EmbeddedViewRef<any>;\n\n readonly #isOpenedSignal = signal(false);\n readonly #isLoadingSignal = signal(false);\n readonly isOpened = this.#isOpenedSignal.asReadonly();\n readonly isLoading = this.#isLoadingSignal.asReadonly();\n readonly dataOpened = computed(() => (this.#isOpenedSignal() ? 'true' : 'false'));\n readonly dataLoading = computed(() => (this.#isLoadingSignal() ? 'true' : 'false'));\n\n isHovered$!: Observable<boolean>;\n #destroy$ = new Subject<void>();\n #previousBodyOverflow: string \| null = null;\n\n #viewContainerRef = inject(ViewContainerRef);\n #ar = inject(ApplicationRef);\n #injector = inject(Injector);\n #ref = inject(ChangeDetectorRef);\n #loadingService = inject(SdLoadingService);\n #destroyRef = inject(DestroyRef);\n\n constructor() {\n super();\n\n // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\n afterNextRender(() => {\n // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\n const outlet = new DomPortalOutlet(document.body, this.#ar, this.#injector);\n this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n \n // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\n this.#setupHoverSubscription();\n });\n\n // Thay thế ngOnDestroy bằng logic destroy trực tiếp \n this.#destroyRef.onDestroy(() => {\n this.#destroy$.next();\n this.#destroy$.complete();\n \n if (this.#embeddedViewRef) {\n this.#embeddedViewRef.destroy();\n }\n \n if (this.#isOpenedSignal()) {\n if (this.#previousBodyOverflow !== null) {\n document.body.style.overflow = this.#previousBodyOverflow;\n } else {\n document.body.style.overflow = '';\n }\n }\n });\n }\n\n open = () => {\n this.#ref.markForCheck();\n this.#isOpenedSignal.set(true);\n\n // Chặn scroll ở document body\n this.#previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n };\n\n close = () => {\n this.#ref.markForCheck();\n this.#isOpenedSignal.set(false);\n this.sdClosed.emit();\n this.stopLoading();\n \n // Khôi phục lại scroll ở document body\n if (this.#previousBodyOverflow !== null) {\n document.body.style.overflow = this.#previousBodyOverflow;\n this.#previousBodyOverflow = null;\n } else {\n document.body.style.overflow = '';\n }\n };\n\n startLoading = () => {\n this.#isLoadingSignal.set(true);\n this.#loadingService.stop(`#${this.id}`);\n this.#loadingService.start(`#${this.id}`);\n };\n\n stopLoading = () => {\n this.#isLoadingSignal.set(false);\n this.#loadingService.stop(`#${this.id}`);\n };\n\n preventScroll = (event: Event) => {\n event.preventDefault();\n };\n\n #setupHoverSubscription(): void {\n if (!this.#embeddedViewRef) return;\n\n // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\n const rootNodes = this.#embeddedViewRef.rootNodes;\n const element = rootNodes.find(\n (node) => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\n );\n\n if (!element) {\n console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\n return;\n }\n\n // 4. Gắn event listeners trực tiếp lên element thật\n const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\n const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\n\n this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(\n startWith(false),\n distinctUntilChanged(),\n takeUntil(this.#destroy$)\n );\n }\n}","<ng-template cdkPortal>\n <div\n [id]=\"id\"\n class=\"sd-side-drawer\"\n [ngStyle]=\"{ width: width() }\"\n [ngClass]=\"drawerClass()\"\n [class.sd-side-drawer-active]=\"isOpened()\"\n [attr.data-autoId]=\"autoId()\"\n [attr.data-opened]=\"dataOpened()\"\n [attr.data-loading]=\"dataLoading()\"\n #drawerContainer>\n @if (isOpened()) {\n <ng-container>\n <div class=\"sd-side-drawer-header\">\n <div class=\"sd-side-drawer-title\">\n <ng-content select=\"[sdHeaderLeft]\">\n {{ title() }}\n </ng-content>\n </div>\n <div class=\"sd-side-drawer-header-actions\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (!hideClose()) {\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\n <svg\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n </div>\n @if (isOpened()) {\n <div class=\"sd-side-drawer-body\">\n <div class=\"sd-side-drawer-content\">\n <ng-content></ng-content>\n </div>\n </div>\n }\n <div class=\"sd-side-drawer-footer\">\n <ng-content select=\"[sdFooter]\"></ng-content>\n </div>\n </ng-container>\n }\n </div>\n @if (isOpened()) {\n <div\n aria-hidden=\"true\"\n class=\"sd-side-drawer-backdrop\"\n (click)=\"disableBackdropClose() ? null : close()\"\n (wheel)=\"preventScroll($event)\"\n (touchmove)=\"preventScroll($event)\"></div>\n }\n</ng-template>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}