@sd-angular/core 19.0.0-beta.54 → 19.0.0-beta.56

package/fesm2022/sd-angular-core-components-section.mjs

@@ -1,62 +1,44 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
+import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdSection extends SdBaseSecureComponent {
-    title; // Tiêu đề của section
-    subTitle; // sub Tiêu đề của section
-    icon;
-    iconColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'
-    collapsed = false;
-    set _collapsed(val) {
-        this.collapsed = val === '' || !!val;
-    }
-    collapsable = false;
-    set _collapsable(val) {
-        this.collapsable = val === '' || !!val;
-    }
-    hideHeader = false;
-    set _hideHeader(val) {
-        this.hideHeader = val === '' || !!val;
+    el = inject(ElementRef);
+    title = input('', { alias: 'title' });
+    subTitle = input('', { alias: 'subTitle' });
+    icon = input(null, { alias: 'icon' });
+    iconColor = input('primary', { alias: 'iconColor' });
+    collapsed = model(false, { alias: 'collapsed' });
+    collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });
+    hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });
+    constructor() {
+        super();
+        effect(() => {
+            if (this.title()) {
+                this.el.nativeElement.removeAttribute('title');
+            }
+        });
     }
     toggleCollapse = () => {
-        if (this.collapsable) {
-            this.collapsed = !this.collapsed;
+        if (this.collapsable()) {
+            this.collapsed.set(!this.collapsed());
         }
         else {
-            if (this.collapsed) {
-                this.collapsed = false;
+            if (this.collapsed()) {
+                this.collapsed.set(false);
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSection, isStandalone: true, selector: "sd-section", inputs: { title: "title", subTitle: "subTitle", icon: "icon", iconColor: "iconColor", _collapsed: ["collapsed", "_collapsed"], _collapsable: ["collapsable", "_collapsable"], _hideHeader: ["hideHeader", "_hideHeader"] }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.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: "19.2.17", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 } }, outputs: { collapsed: "collapsedChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n  @if (!hideHeader()) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"iconColor() === 'primary'\"\r\n              [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n              [class.text-error]=\"iconColor() === 'error'\"\r\n              [class.text-warning]=\"iconColor() === 'warning'\"\r\n              [class.text-success]=\"iconColor() === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (title()) {\r\n              <div class=\"T16M\">{{ title() }}</div>\r\n            }\r\n            @if (subTitle()) {\r\n              <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable()) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed()) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed() || hideHeader()) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.c-shadow-section{box-shadow:-1px 0 #f2f2f2 inset,1px 0 #f2f2f2 inset,0 1px #f2f2f2 inset,0 -1px #f2f2f2 inset,0 1px 2px #2f31361a}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.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"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: [{ required: true }]
-            }], subTitle: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], _collapsed: [{
-                type: Input,
-                args: ['collapsed']
-            }], _collapsable: [{
-                type: Input,
-                args: ['collapsable']
-            }], _hideHeader: [{
-                type: Input,
-                args: ['hideHeader']
-            }] } });
+            args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n  @if (!hideHeader()) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"iconColor() === 'primary'\"\r\n              [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n              [class.text-error]=\"iconColor() === 'error'\"\r\n              [class.text-warning]=\"iconColor() === 'warning'\"\r\n              [class.text-success]=\"iconColor() === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (title()) {\r\n              <div class=\"T16M\">{{ title() }}</div>\r\n            }\r\n            @if (subTitle()) {\r\n              <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable()) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed()) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed() || hideHeader()) {\r\n    <!-- N\u1EBFu header b\u1ECB \u1EA9n th\u00EC kh\u00F4ng c\u1EA7n border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{width:100%;display:block}.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: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sd-angular-core-components-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { Component, Input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n  selector: 'sd-section',\r\n  templateUrl: './section.component.html',\r\n  styleUrls: ['./section.component.scss'],\r\n  imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n  @Input({ required: true }) title?: string | null; // Tiêu đề của section\r\n  @Input() subTitle?: string; // sub Tiêu đề của section\r\n\r\n  @Input() icon?: string | null;\r\n  @Input() iconColor?: SdColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'\r\n  collapsed = false;\r\n  @Input('collapsed') set _collapsed(val: boolean | '' | undefined | null) {\r\n    this.collapsed = val === '' || !!val;\r\n  }\r\n  collapsable = false;\r\n  @Input('collapsable') set _collapsable(val: boolean | '' | undefined | null) {\r\n    this.collapsable = val === '' || !!val;\r\n  }\r\n\r\n  hideHeader = false;\r\n  @Input('hideHeader') set _hideHeader(val: boolean | '' | undefined | null) {\r\n    this.hideHeader = val === '' || !!val;\r\n  }\r\n  toggleCollapse = () => {\r\n    if (this.collapsable) {\r\n      this.collapsed = !this.collapsed;\r\n    } else {\r\n      if (this.collapsed) {\r\n        this.collapsed = false;\r\n      }\r\n    }\r\n  };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed }\">\r\n  @if (!hideHeader) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        @if (icon) {\r\n          <span\r\n            class=\"mr-8 material-icons-outlined\"\r\n            [class.text-primary]=\"iconColor === 'primary'\"\r\n            [class.text-secondary]=\"iconColor === 'secondary'\"\r\n            [class.text-error]=\"iconColor === 'error'\"\r\n            [class.text-warning]=\"iconColor === 'warning'\"\r\n            [class.text-success]=\"iconColor === 'success'\">\r\n            {{ icon }}\r\n          </span>\r\n        }\r\n        <div>\r\n          @if (title) {\r\n            <div class=\"T16M\">{{ title }}</div>\r\n          }\r\n          @if (subTitle) {\r\n            <div class=\"T12R text-secondary\">{{ subTitle }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed || hideHeader) {\r\n    <!-- Nếu header bị ẩn thì không cần border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;IACvB,KAAK,CAAiB;IACxC,QAAQ,CAAU;AAElB,IAAA,IAAI;AACJ,IAAA,SAAS,GAAa,SAAS,CAAC;IACzC,SAAS,GAAG,KAAK;IACjB,IAAwB,UAAU,CAAC,GAAoC,EAAA;QACrE,IAAI,CAAC,SAAS,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACtC;IACA,WAAW,GAAG,KAAK;IACnB,IAA0B,YAAY,CAAC,GAAoC,EAAA;QACzE,IAAI,CAAC,WAAW,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACxC;IAEA,UAAU,GAAG,KAAK;IAClB,IAAyB,WAAW,CAAC,GAAoC,EAAA;QACvE,IAAI,CAAC,UAAU,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,GAAG;IACvC;IACA,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;QAClC;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACxB;QACF;AACF,IAAA,CAAC;wGA3BU,SAAS,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,CAAA,WAAA,EAAA,YAAA,CAAA,EAAA,YAAA,EAAA,CAAA,aAAA,EAAA,cAAA,CAAA,EAAA,WAAA,EAAA,CAAA,YAAA,EAAA,aAAA,CAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtB,ixDAgDA,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDtCY,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAEZ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAGb,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,ixDAAA,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA;8BAGG,KAAK,EAAA,CAAA;sBAA/B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBAEuB,UAAU,EAAA,CAAA;sBAAjC,KAAK;uBAAC,WAAW;gBAIQ,YAAY,EAAA,CAAA;sBAArC,KAAK;uBAAC,aAAa;gBAKK,WAAW,EAAA,CAAA;sBAAnC,KAAK;uBAAC,YAAY;;;AE5BrB;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n  selector: 'sd-section',\r\n  templateUrl: './section.component.html',\r\n  styleUrls: ['./section.component.scss'],\r\n  imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n  private el = inject(ElementRef);\r\n\r\n  title = input<string | null>('', { alias: 'title' });\r\n  subTitle = input<string>('', { alias: 'subTitle' });\r\n  icon = input<string | null>(null, { alias: 'icon' });\r\n  iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n  collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n  collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });\r\n  hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this.title()) {\r\n        this.el.nativeElement.removeAttribute('title');\r\n      }\r\n    });\r\n  }\r\n\r\n  toggleCollapse = () => {\r\n    if (this.collapsable()) {\r\n      this.collapsed.set(!this.collapsed());\r\n    } else {\r\n      if (this.collapsed()) {\r\n        this.collapsed.set(false);\r\n      }\r\n    }\r\n  };\r\n}\r\n","<div class=\"rounded-8 bg-white\" [class]=\"{ 'c-shadow-section': !collapsed() }\">\r\n  @if (!hideHeader()) {\r\n    <div\r\n      class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n      (click)=\"toggleCollapse()\"\r\n      aria-hidden=\"true\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdHeaderLeft]\">\r\n          @if (icon()) {\r\n            <span\r\n              class=\"mr-8 material-icons-outlined\"\r\n              [class.text-primary]=\"iconColor() === 'primary'\"\r\n              [class.text-secondary]=\"iconColor() === 'secondary'\"\r\n              [class.text-error]=\"iconColor() === 'error'\"\r\n              [class.text-warning]=\"iconColor() === 'warning'\"\r\n              [class.text-success]=\"iconColor() === 'success'\">\r\n              {{ icon() }}\r\n            </span>\r\n          }\r\n          <div>\r\n            @if (title()) {\r\n              <div class=\"T16M\">{{ title() }}</div>\r\n            }\r\n            @if (subTitle()) {\r\n              <div class=\"T12R text-secondary\">{{ subTitle() }}</div>\r\n            }\r\n          </div>\r\n        </ng-content>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n        @if (collapsable()) {\r\n          <div class=\"d-flex align-items-center\">\r\n            @if (collapsed()) {\r\n              <mat-icon>expand_more</mat-icon>\r\n            } @else {\r\n              <mat-icon>expand_less</mat-icon>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (!collapsed() || hideHeader()) {\r\n    <!-- Nếu header bị ẩn thì không cần border top -->\r\n    <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}