import * as i0 from '@angular/core';
import { Input, 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;
    }
    toggleCollapse = () => {
        if (this.collapsable) {
            this.collapsed = !this.collapsed;
        }
        else {
            if (this.collapsed) {
                this.collapsed = 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"] }] });
}
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']
            }] } });

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

export { SdSection };
//# sourceMappingURL=sd-angular-core-components-section.mjs.map
