@sdcorejs/angular 20.0.0 → 20.0.3

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

@@ -60,10 +60,10 @@ class SdQueryBuilder {
     removeItem(parentGroup, index) {
         parentGroup.rules.splice(index, 1);
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdQueryBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", 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: "20.3.23", ngImport: i0, type: SdQueryBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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-quick-action.mjs

@@ -6,10 +6,10 @@ class SdQuickAction {
      * Toggle visibility of the floating toolbar. Bare attribute = true.
      */
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdQuickAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", 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: "20.3.23", ngImport: i0, type: SdQuickAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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 }] }] } });

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

@@ -33,10 +33,10 @@ class SdSection extends SdBaseSecureComponent {
             }
         }
     };
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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: "20.3.23", ngImport: i0, type: SdSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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: () => [], 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 }] }] } });
@@ -50,10 +50,10 @@ class SdSectionItem {
                 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", 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: "20.3.23", ngImport: i0, type: SdSectionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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 }] }] } });

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

@@ -113,12 +113,12 @@ 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", 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  @let _isOpened = isOpened();\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: "20.3.23", ngImport: i0, type: SdSideDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", 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"] }]
+            args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\n  @let _isOpened = isOpened();\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: () => [], 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"] }] } });
 
 /**

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

@@ -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.#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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"}
+{"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  @let _isOpened = isOpened();\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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"}

package/fesm2022/sdcorejs-angular-components-splitter.mjs

@@ -98,10 +98,10 @@ class SdSplitterHandleComponent {
         }
         this.dragEnd.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: SdSplitterHandleComponent, isStandalone: true, selector: "sd-splitter-handle", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "ariaValueMin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "ariaValueMax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "ariaValueNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", toggleRequest: "toggleRequest" }, host: { listeners: { "dblclick": "onDblClick()", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class.sd-splitter__handle--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter__handle--vertical": "orientation() === \"vertical\"", "class.sd-splitter__handle--disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-valuemin": "ariaValueMin() ?? null", "attr.aria-valuemax": "ariaValueMax() ?? null", "attr.aria-valuenow": "ariaValueNow() ?? null" }, classAttribute: "sd-splitter__handle" }, ngImport: i0, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-color-primary-light, #b0bec5);--sd-splitter-handle-hover-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-active-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: SdSplitterHandleComponent, isStandalone: true, selector: "sd-splitter-handle", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMin: { classPropertyName: "ariaValueMin", publicName: "ariaValueMin", isSignal: true, isRequired: false, transformFunction: null }, ariaValueMax: { classPropertyName: "ariaValueMax", publicName: "ariaValueMax", isSignal: true, isRequired: false, transformFunction: null }, ariaValueNow: { classPropertyName: "ariaValueNow", publicName: "ariaValueNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd", toggleRequest: "toggleRequest" }, host: { listeners: { "dblclick": "onDblClick()", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, properties: { "class.sd-splitter__handle--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter__handle--vertical": "orientation() === \"vertical\"", "class.sd-splitter__handle--disabled": "disabled()", "attr.tabindex": "disabled() ? -1 : 0", "attr.role": "\"separator\"", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-valuemin": "ariaValueMin() ?? null", "attr.aria-valuemax": "ariaValueMax() ?? null", "attr.aria-valuenow": "ariaValueNow() ?? null" }, classAttribute: "sd-splitter__handle" }, ngImport: i0, template: "<span class=\"sd-splitter__handle-bar\"></span>\n", styles: [":host{--sd-splitter-handle-size: 4px;--sd-splitter-handle-color: var(--sd-color-primary-light, #b0bec5);--sd-splitter-handle-hover-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-active-color: var(--sd-color-primary, #1976d2);--sd-splitter-handle-hit-area: 8px;--sd-splitter-handle-radius: 0;--sd-splitter-disabled-opacity: .5;display:flex;align-items:center;justify-content:center;flex:0 0 var(--sd-splitter-handle-hit-area);-webkit-user-select:none;user-select:none;outline:none}:host.sd-splitter__handle--horizontal{cursor:col-resize}:host.sd-splitter__handle--horizontal .sd-splitter__handle-bar{width:var(--sd-splitter-handle-size);height:100%}:host.sd-splitter__handle--vertical{cursor:row-resize;flex-direction:column}:host.sd-splitter__handle--vertical .sd-splitter__handle-bar{width:100%;height:var(--sd-splitter-handle-size)}:host .sd-splitter__handle-bar{background:var(--sd-splitter-handle-color);border-radius:var(--sd-splitter-handle-radius);transition:background-color .12s ease}:host:hover .sd-splitter__handle-bar{background:var(--sd-splitter-handle-hover-color)}:host:focus-visible{outline:2px solid var(--sd-splitter-handle-active-color);outline-offset:1px}:host.sd-splitter__handle--disabled{cursor:default;opacity:var(--sd-splitter-disabled-opacity);pointer-events:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter-handle', standalone: true, host: {
                         'class': 'sd-splitter__handle',
@@ -148,10 +148,10 @@ class SdSplitterPanelComponent {
     collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.23", type: SdSplitterPanelComponent, isStandalone: true, selector: "sd-splitter-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.sd-splitter__panel--flex": "unit() === \"flex\"", "class.sd-splitter__panel--px": "unit() === \"px\"", "class.sd-splitter__panel--collapsed": "collapsed()" }, classAttribute: "sd-splitter__panel" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow:hidden;box-sizing:border-box;min-width:0;min-height:0;transition:flex var(--sd-splitter-transition-duration, .2s) ease}:host.sd-splitter__panel--collapsed{flex:0 0 0!important}:host-context(.sd-splitter--dragging){transition:none!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: SdSplitterPanelComponent, isStandalone: true, selector: "sd-splitter-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.sd-splitter__panel--flex": "unit() === \"flex\"", "class.sd-splitter__panel--px": "unit() === \"px\"", "class.sd-splitter__panel--collapsed": "collapsed()" }, classAttribute: "sd-splitter__panel" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;overflow:hidden;box-sizing:border-box;min-width:0;min-height:0;transition:flex var(--sd-splitter-transition-duration, .2s) ease}:host.sd-splitter__panel--collapsed{flex:0 0 0!important}:host-context(.sd-splitter--dragging){transition:none!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter-panel', standalone: true, host: {
                         'class': 'sd-splitter__panel',
@@ -352,10 +352,10 @@ class SplitterStateService {
         }));
         this.committedLayout.set({ v: 1, panels });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SplitterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SplitterStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SplitterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SplitterStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SplitterStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SplitterStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -626,10 +626,10 @@ class SdSplitterComponent {
             throw new Error(`Splitter: no panel with id "${target}"`);
         return meta.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.23", type: SdSplitterComponent, isStandalone: true, selector: "sd-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd", collapsedChange: "collapsedChange", layoutChange: "layoutChange" }, host: { properties: { "class.sd-splitter--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter--vertical": "orientation() === \"vertical\"", "class.sd-splitter--disabled": "disabled()" }, classAttribute: "sd-splitter" }, providers: [SplitterStateService], queries: [{ propertyName: "panels", predicate: SdSplitterPanelComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"sd-splitter-panel\"></ng-content>\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}:host.sd-splitter--horizontal{flex-direction:row}:host.sd-splitter--vertical{flex-direction:column}:host.sd-splitter--disabled .sd-splitter__handle{pointer-events:none}:host.sd-splitter--dragging{-webkit-user-select:none;user-select:none}:host.sd-splitter--dragging .sd-splitter__panel{transition:none!important}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: SdSplitterComponent, isStandalone: true, selector: "sd-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd", collapsedChange: "collapsedChange", layoutChange: "layoutChange" }, host: { properties: { "class.sd-splitter--horizontal": "orientation() === \"horizontal\"", "class.sd-splitter--vertical": "orientation() === \"vertical\"", "class.sd-splitter--disabled": "disabled()" }, classAttribute: "sd-splitter" }, providers: [SplitterStateService], queries: [{ propertyName: "panels", predicate: SdSplitterPanelComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"sd-splitter-panel\"></ng-content>\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}:host.sd-splitter--horizontal{flex-direction:row}:host.sd-splitter--vertical{flex-direction:column}:host.sd-splitter--disabled .sd-splitter__handle{pointer-events:none}:host.sd-splitter--dragging{-webkit-user-select:none;user-select:none}:host.sd-splitter--dragging .sd-splitter__panel{transition:none!important}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sd-splitter', standalone: true, providers: [SplitterStateService], host: {
                         'class': 'sd-splitter',

package/fesm2022/sdcorejs-angular-components-stepper.mjs

@@ -27,10 +27,10 @@ class SdStep {
     selectChange = output();
     // Body template captured from projected <ng-content>.
     bodyTpl = viewChild.required('body');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.23", type: SdStep, isStandalone: true, selector: "sd-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: SdStep, isStandalone: true, selector: "sd-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectChange: "selectChange" }, viewQueries: [{ propertyName: "bodyTpl", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #body><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStep, decorators: [{
             type: Component,
             args: [{
                     selector: 'sd-step',
@@ -109,10 +109,10 @@ class SdStepper extends SdBaseSecureComponent {
         const step = this.steps()[ev.selectedIndex];
         step?.selectChange.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: SdStepper, isStandalone: true, selector: "sd-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "style.--sd-stepper-active-color": "this.cssActive", "style.--sd-stepper-active-bg": "this.cssActiveBg", "style.--sd-stepper-completed-color": "this.cssCompleted", "style.--sd-stepper-line-active-color": "this.cssLine" } }, queries: [{ propertyName: "steps", predicate: SdStep, isSignal: true }], viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdStepper, isStandalone: true, selector: "sd-stepper", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-autoId": "this.autoIdAttr", "style.--sd-stepper-active-color": "this.cssActive", "style.--sd-stepper-active-bg": "this.cssActiveBg", "style.--sd-stepper-completed-color": "this.cssCompleted", "style.--sd-stepper-line-active-color": "this.cssLine" } }, queries: [{ propertyName: "steps", predicate: SdStep, isSignal: true }], viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdStepper, decorators: [{
             type: Component,
             args: [{ selector: 'sd-stepper', standalone: true, imports: [MatStepperModule, MatIconModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-stepper\n  class=\"sd-stepper\"\n  [(selectedIndex)]=\"selectedIndex\"\n  [linear]=\"linear()\"\n  [orientation]=\"orientation()\"\n  [labelPosition]=\"labelPosition()\"\n  [headerPosition]=\"headerPosition()\"\n  [animationDuration]=\"animationDuration()\"\n  [disableRipple]=\"disableRipple()\"\n  (selectionChange)=\"onSelectionChange($event)\">\n  @for (step of steps(); track step; let i = $index) {\n    <mat-step\n      [stepControl]=\"step.stepControl() ?? undefined!\"\n      [optional]=\"step.optional()\"\n      [editable]=\"step.editable()\"\n      [state]=\"step.state() ?? ''\"\n      [errorMessage]=\"step.errorMessage() ?? ''\">\n      <ng-template matStepLabel>\n        <span class=\"sd-step__label\">\n          @if (step.icon(); as ic) {\n            <mat-icon class=\"sd-step__icon\">{{ ic }}</mat-icon>\n          }\n          <span class=\"sd-step__text\">{{ step.label() }}</span>\n        </span>\n      </ng-template>\n\n      <ng-template matStepContent>\n        <ng-container [ngTemplateOutlet]=\"step.bodyTpl()\"></ng-container>\n      </ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n", styles: [":host{display:block;--sd-stepper-active-color: var(--sd-primary, #1565c0);--sd-stepper-active-bg: var(--sd-primary, #1565c0);--sd-stepper-completed-color: var(--sd-primary, #1565c0);--sd-stepper-line-active-color: var(--sd-primary, #1565c0);--sd-stepper-error-color: var(--sd-error, #f44336);--sd-stepper-pending-bg: #e0e0e0;--sd-stepper-pending-color: rgba(0, 0, 0, .54);--sd-stepper-text-color: var(--sd-text-primary, #1a1a1a)}.sd-step__label{display:inline-flex;align-items:center;gap:4px}.sd-step__icon{font-size:18px;width:18px;height:18px;line-height:18px}.sd-step__text{white-space:nowrap}:host ::ng-deep .mat-step-icon{background-color:var(--sd-stepper-pending-bg);color:var(--sd-stepper-pending-color)}:host ::ng-deep .mat-step-icon-selected{background-color:var(--sd-stepper-active-bg)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-done,:host ::ng-deep .mat-step-icon-state-edit{background-color:var(--sd-stepper-completed-color)!important;color:#fff!important}:host ::ng-deep .mat-step-icon-state-error{background-color:var(--sd-stepper-error-color)!important;color:#fff!important}:host ::ng-deep .mat-step-label.mat-step-label-active .mat-step-text-label{color:var(--sd-stepper-text-color);font-weight:500}:host ::ng-deep .mat-step-label-selected .mat-step-text-label{color:var(--sd-stepper-active-color);font-weight:600}:host ::ng-deep .mat-stepper-horizontal-line,:host ::ng-deep .mat-stepper-vertical-line:before{border-color:#0000001f}:host ::ng-deep .mat-step-header.cdk-program-focused,:host ::ng-deep .mat-step-header:hover{background-color:#00000005}\n"] }]
         }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdStep), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matStepper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatStepper), { isSignal: true }] }], autoIdAttr: [{