@sd-angular/core 19.0.0-beta.53 → 19.0.0-beta.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/components/section/src/section.component.d.ts +10 -11
  2. package/fesm2022/sd-angular-core-components-button.mjs +2 -2
  3. package/fesm2022/sd-angular-core-components-section.mjs +24 -42
  4. package/fesm2022/sd-angular-core-components-section.mjs.map +1 -1
  5. package/fesm2022/sd-angular-core-components-table.mjs +1 -1
  6. package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
  7. package/fesm2022/sd-angular-core-components-workflow.mjs +15 -15
  8. package/fesm2022/sd-angular-core-components-workflow.mjs.map +1 -1
  9. package/fesm2022/sd-angular-core-modules-layout.mjs +20 -28
  10. package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
  11. package/forms/select/src/select.component.d.ts +3 -3
  12. package/modules/layout/components/page/page.component.d.ts +5 -7
  13. package/package.json +67 -67
  14. package/sd-angular-core-19.0.0-beta.55.tgz +0 -0
  15. package/utilities/models/src/nested-key-of.model.d.ts +1 -1
  16. package/sd-angular-core-19.0.0-beta.53.tgz +0 -0
package/components/section/src/section.component.d.ts CHANGED
@@ -2,17 +2,16 @@ import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
2
2
  import { SdColor } from '@sd-angular/core/utilities';
3
3
  import * as i0 from "@angular/core";
4
4
  export declare class SdSection extends SdBaseSecureComponent {
5
- title?: string | null;
6
- subTitle?: string;
7
- icon?: string | null;
8
- iconColor?: SdColor;
9
- collapsed: boolean;
10
- set _collapsed(val: boolean | '' | undefined | null);
11
- collapsable: boolean;
12
- set _collapsable(val: boolean | '' | undefined | null);
13
- hideHeader: boolean;
14
- set _hideHeader(val: boolean | '' | undefined | null);
5
+ private el;
6
+ title: import("@angular/core").InputSignal<string | null>;
7
+ subTitle: import("@angular/core").InputSignal<string>;
8
+ icon: import("@angular/core").InputSignal<string | null>;
9
+ iconColor: import("@angular/core").InputSignal<SdColor>;
10
+ collapsed: import("@angular/core").ModelSignal<boolean>;
11
+ collapsable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
12
+ hideHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
13
+ constructor();
15
14
  toggleCollapse: () => void;
16
15
  static ɵfac: i0.ɵɵFactoryDeclaration<SdSection, never>;
17
- static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_collapsed": { "alias": "collapsed"; "required": false; }; "_collapsable": { "alias": "collapsable"; "required": false; }; "_hideHeader": { "alias": "hideHeader"; "required": false; }; }, {}, never, ["[sdHeaderRight]", "*"], true, never>;
16
+ static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderRight]", "*"], true, never>;
18
17
  }
package/fesm2022/sd-angular-core-components-button.mjs CHANGED
@@ -93,7 +93,7 @@ class SdButton extends SdBaseSecureComponent {
93
93
  this.#subscription.unsubscribe();
94
94
  }
95
95
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
96
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdButton, isStandalone: true, selector: "sd-button", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n}\n\n<ng-template #contentTpl>\n <div class=\"c-button-content-wrapper\">\n @if (btnLoad) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (pIcon) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n }\n\n @if (btnTitle) {\n <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n {{ btnTitle }}\n </span>\n }\n\n @if (sIcon && !btnLoad) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n }\n\n @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n }\n </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
96
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdButton, isStandalone: true, selector: "sd-button", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "attr.disabled": "disabled() ? \"true\" : null" } }, usesInheritance: true, ngImport: i0, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n}\n\n<ng-template #contentTpl>\n <div class=\"c-button-content-wrapper\">\n @if (btnLoad) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (pIcon) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n }\n\n @if (btnTitle) {\n <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n {{ btnTitle }}\n </span>\n }\n\n @if (sIcon && !btnLoad) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n }\n\n @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n }\n </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:20px!important;width:20px!important;font-size:20px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
97
97
  }
98
98
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdButton, decorators: [{
99
99
  type: Component,
@@ -101,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
101
101
  '[class.sd-disabled]': 'disabled()',
102
102
  '[class.sd-loading]': 'loading()',
103
103
  '[attr.disabled]': 'disabled() ? "true" : null',
104
- }, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n}\n\n<ng-template #contentTpl>\n <div class=\"c-button-content-wrapper\">\n @if (btnLoad) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (pIcon) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n }\n\n @if (btnTitle) {\n <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n {{ btnTitle }}\n </span>\n }\n\n @if (sIcon && !btnLoad) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n }\n\n @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n }\n </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"] }]
104
+ }, template: "@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n} @else if (btnType === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n [attr.data-autoId]=\"autoId()\"\n [style.width]=\"width()\"\n [matTooltip]=\"tooltip() || ''\"\n matTooltipPosition=\"above\"\n (click)=\"onInternalClick($event)\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </button>\n}\n\n<ng-template #contentTpl>\n <div class=\"c-button-content-wrapper\">\n @if (btnLoad) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (pIcon) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-prefix\">{{ pIcon }}</mat-icon>\n }\n\n @if (btnTitle) {\n <span class=\"c-title\" [class.ml-8]=\"btnLoad || pIcon\" [class.mr-8]=\"sIcon && !btnLoad\">\n {{ btnTitle }}\n </span>\n }\n\n @if (sIcon && !btnLoad) {\n <mat-icon [fontSet]=\"fSet\" class=\"c-icon-suffix\">{{ sIcon }}</mat-icon>\n }\n\n @if (!btnTitle && !pIcon && !btnLoad && sIcon) {\n <mat-icon [fontSet]=\"fSet\">{{ sIcon }}</mat-icon>\n }\n </div>\n</ng-template>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:inline-block;pointer-events:auto}:host.sd-disabled{cursor:not-allowed}:host.sd-loading{cursor:wait}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto}:host ::ng-deep button.c-button .mat-button-wrapper,:host ::ng-deep button.c-button .mdc-button__label{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep button.c-button[disabled],:host ::ng-deep button.c-button.mat-button-disabled{pointer-events:none;color:#a6a6a6!important;background-color:#e9e9e9!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;height:32px;line-height:20px!important;padding:2px 12px!important;font-weight:400}:host ::ng-deep button.c-button.c-sm mat-icon{height:16px!important;width:16px!important;font-size:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-md{font-size:16px;height:40px;line-height:20px;padding:2px 16px!important;font-weight:400}:host ::ng-deep button.c-button.c-md mat-icon{height:20px!important;width:20px!important;font-size:20px!important}:host ::ng-deep button.c-button.c-md.c-square{width:40px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;line-height:20px!important;padding:2px 16px!important;height:48px}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important;min-width:auto!important;padding:0!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-disabled{opacity:.5}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error);color:#fff}:host ::ng-deep button.c-button.c-fill.mat-mdc-unelevated-button.mat-secondary{background-color:#000!important;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#fff!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary{background-color:var(--sd-primary-light);color:var(--sd-primary)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info{background-color:var(--sd-info-light);color:var(--sd-info)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success{background-color:var(--sd-success-light);color:var(--sd-success)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning{background-color:var(--sd-warning-light);color:var(--sd-warning)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error{background-color:var(--sd-error-light);color:var(--sd-error)}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary{background-color:var(--sd-secondary-light);color:#000!important}:host ::ng-deep button.c-button.c-light.mat-mdc-unelevated-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep button.c-button.c-outline.mat-mdc-outlined-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary{color:var(--sd-primary)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-primary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-primary)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info{color:var(--sd-info)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-info .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-info)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success{color:var(--sd-success)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-success .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-success)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning{color:var(--sd-warning)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-warning .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-warning)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error{color:var(--sd-error)}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-error .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:var(--sd-error)!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary{color:#000!important}:host ::ng-deep button.c-button.c-link.mat-mdc-button.mat-secondary .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic circle{stroke:#000!important}:host ::ng-deep .c-button-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;pointer-events:none}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"] }]
105
105
  }], ctorParameters: () => [] });
106
106
 
107
107
  /**
package/fesm2022/sd-angular-core-components-section.mjs CHANGED
@@ -1,62 +1,44 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, Component } from '@angular/core';
2
+ import { inject, ElementRef, input, model, booleanAttribute, effect, Component } from '@angular/core';
3
3
  import * as i1 from '@angular/material/icon';
4
4
  import { MatIconModule } from '@angular/material/icon';
5
5
  import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
6
6
 
7
7
  /* eslint-disable @angular-eslint/no-input-rename */
8
8
  class SdSection extends SdBaseSecureComponent {
9
- title; // Tiêu đề của section
10
- subTitle; // sub Tiêu đề của section
11
- icon;
12
- iconColor = 'primary'; // Màu sắc của icon, mặc định là 'primary'
13
- collapsed = false;
14
- set _collapsed(val) {
15
- this.collapsed = val === '' || !!val;
16
- }
17
- collapsable = false;
18
- set _collapsable(val) {
19
- this.collapsable = val === '' || !!val;
20
- }
21
- hideHeader = false;
22
- set _hideHeader(val) {
23
- this.hideHeader = val === '' || !!val;
9
+ el = inject(ElementRef);
10
+ title = input.required({ alias: 'title' });
11
+ subTitle = input('', { alias: 'subTitle' });
12
+ icon = input(null, { alias: 'icon' });
13
+ iconColor = input('primary', { alias: 'iconColor' });
14
+ collapsed = model(false, { alias: 'collapsed' });
15
+ collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });
16
+ hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });
17
+ constructor() {
18
+ super();
19
+ effect(() => {
20
+ if (this.title()) {
21
+ this.el.nativeElement.removeAttribute('title');
22
+ }
23
+ });
24
24
  }
25
25
  toggleCollapse = () => {
26
- if (this.collapsable) {
27
- this.collapsed = !this.collapsed;
26
+ if (this.collapsable()) {
27
+ this.collapsed.set(!this.collapsed());
28
28
  }
29
29
  else {
30
- if (this.collapsed) {
31
- this.collapsed = false;
30
+ if (this.collapsed()) {
31
+ this.collapsed.set(false);
32
32
  }
33
33
  }
34
34
  };
35
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: null, target: i0.ɵɵFactoryTarget.Component });
36
- 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"] }] });
35
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
+ 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: true, 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() }\">\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 @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 </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 no-padding\" [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-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"] }] });
37
37
  }
38
38
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSection, decorators: [{
39
39
  type: Component,
40
- 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"] }]
41
- }], propDecorators: { title: [{
42
- type: Input,
43
- args: [{ required: true }]
44
- }], subTitle: [{
45
- type: Input
46
- }], icon: [{
47
- type: Input
48
- }], iconColor: [{
49
- type: Input
50
- }], _collapsed: [{
51
- type: Input,
52
- args: ['collapsed']
53
- }], _collapsable: [{
54
- type: Input,
55
- args: ['collapsable']
56
- }], _hideHeader: [{
57
- type: Input,
58
- args: ['hideHeader']
59
- }] } });
40
+ args: [{ selector: 'sd-section', imports: [MatIconModule], template: "<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 @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 </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 no-padding\" [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-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"] }]
41
+ }], ctorParameters: () => [] });
60
42
 
61
43
  /**
62
44
  * Generated bundle index. Do not edit.
package/fesm2022/sd-angular-core-components-section.mjs.map CHANGED
@@ -1 +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;;;;"}
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 */\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\nimport { SdColor } from '@sd-angular/core/utilities';\n\n@Component({\n selector: 'sd-section',\n templateUrl: './section.component.html',\n styleUrls: ['./section.component.scss'],\n imports: [MatIconModule],\n})\nexport class SdSection extends SdBaseSecureComponent {\n private el = inject(ElementRef);\n\n title = input.required<string | null>({ alias: 'title' });\n subTitle = input<string>('', { alias: 'subTitle' });\n icon = input<string | null>(null, { alias: 'icon' });\n iconColor = input<SdColor>('primary', { alias: 'iconColor' });\n\n collapsed = model<boolean>(false, { alias: 'collapsed' });\n collapsable = input(false, { transform: booleanAttribute, alias: 'collapsable' });\n hideHeader = input(false, { transform: booleanAttribute, alias: 'hideHeader' });\n\n constructor() {\n super();\n effect(() => {\n if (this.title()) {\n this.el.nativeElement.removeAttribute('title');\n }\n });\n }\n\n toggleCollapse = () => {\n if (this.collapsable()) {\n this.collapsed.set(!this.collapsed());\n } else {\n if (this.collapsed()) {\n this.collapsed.set(false);\n }\n }\n };\n}\n","<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 @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 </div>\n <div class=\"d-flex\">\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\n @if (collapsable()) {\n <div class=\"d-flex align-items-center\">\n @if (collapsed()) {\n <mat-icon>expand_more</mat-icon>\n } @else {\n <mat-icon>expand_less</mat-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (!collapsed() || hideHeader()) {\n <!-- Nếu header bị ẩn thì không cần border top -->\n <div class=\"p-16 no-padding\" [style.border-top]=\"hideHeader() ? 'none' : '1px solid #e6e6e6'\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;AAC1C,IAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;IAE/B,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;IACzD,QAAQ,GAAG,KAAK,CAAS,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IACnD,IAAI,GAAG,KAAK,CAAgB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IACpD,SAAS,GAAG,KAAK,CAAU,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAE7D,SAAS,GAAG,KAAK,CAAU,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;AACzD,IAAA,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AACjF,IAAA,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AAE/E,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAChD;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B;QACF;AACF,IAAA,CAAC;wGA7BU,SAAS,EAAA,IAAA,EAAA,EAAA,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,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtB,qtDAgDA,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,qtDAAA,EAAA,MAAA,EAAA,CAAA,qMAAA,CAAA,EAAA;;;AEV1B;;AAEG;;;;"}
package/fesm2022/sd-angular-core-components-table.mjs CHANGED
@@ -415,7 +415,7 @@ class ExternalFilterComponent {
415
415
  });
416
416
  };
417
417
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
418
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n @if (!isMobileOrTablet && externalFilters.length) {\r\n <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n <div class=\"d-flex mr-4\" sdHeaderRight>\r\n <sd-button\r\n [autoId]=\"autoId + 'clearFilter'\"\r\n [disabled]=\"!filtered\"\r\n type=\"link\"\r\n prefixIcon=\"cleaning_services\"\r\n tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n <sd-button\r\n [autoId]=\"autoId + 'setting'\"\r\n type=\"link\"\r\n prefixIcon=\"settings\"\r\n tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"></sd-button>\r\n <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n @for (externalFilter of externalFilters; track externalFilter.field) {\r\n <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n <sd-checkbox\r\n [label]=\"externalFilter.title\"\r\n [model]=\"inlineExternal[externalFilter.field]\"\r\n [disabled]=\"externalFilter.required\" />\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n @for (item of externalFilters; track item.field) {\r\n @if (inlineExternal[item.field]) {\r\n <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n @if (item.type === 'string') {\r\n <sd-input\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (item.type === 'number') {\r\n <sd-input-number\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (item.type === 'boolean') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"[\r\n { value: true, display: item.option?.displayOnTrue || 'True' },\r\n { value: false, display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (item.type === 'datetime') {\r\n <sd-datetime\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-datetime>\r\n } @else if (item.type === 'daterange') {\r\n <sd-date-range\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (item.type === 'values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'lazy-values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'custom' && item.filterDef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n item.filterDef;\r\n context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n \"></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n @if (filter?.manualFilter) {\r\n <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n <sd-button\r\n [autoId]=\"autoId + 'onSubmit'\"\r\n [disabled]=\"form.invalid\"\r\n type=\"fill\"\r\n color=\"primary\"\r\n title=\"T\u00ECm ki\u1EBFm\"\r\n prefixIcon=\"filter_alt\"\r\n (click)=\"onSubmit()\">\r\n </sd-button>\r\n </div>\r\n }\r\n </sd-section>\r\n }\r\n <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
418
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n @if (!isMobileOrTablet && externalFilters.length) {\r\n <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n <div class=\"d-flex mr-4\" sdHeaderRight>\r\n <sd-button\r\n [autoId]=\"autoId + 'clearFilter'\"\r\n [disabled]=\"!filtered\"\r\n type=\"link\"\r\n prefixIcon=\"cleaning_services\"\r\n tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n <sd-button\r\n [autoId]=\"autoId + 'setting'\"\r\n type=\"link\"\r\n prefixIcon=\"settings\"\r\n tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"></sd-button>\r\n <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n @for (externalFilter of externalFilters; track externalFilter.field) {\r\n <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n <sd-checkbox\r\n [label]=\"externalFilter.title\"\r\n [model]=\"inlineExternal[externalFilter.field]\"\r\n [disabled]=\"externalFilter.required\" />\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n @for (item of externalFilters; track item.field) {\r\n @if (inlineExternal[item.field]) {\r\n <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n @if (item.type === 'string') {\r\n <sd-input\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (item.type === 'number') {\r\n <sd-input-number\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (item.type === 'boolean') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"[\r\n { value: true, display: item.option?.displayOnTrue || 'True' },\r\n { value: false, display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (item.type === 'datetime') {\r\n <sd-datetime\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-datetime>\r\n } @else if (item.type === 'daterange') {\r\n <sd-date-range\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (item.type === 'values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'lazy-values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'custom' && item.filterDef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n item.filterDef;\r\n context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n \"></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n @if (filter?.manualFilter) {\r\n <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n <sd-button\r\n [autoId]=\"autoId + 'onSubmit'\"\r\n [disabled]=\"form.invalid\"\r\n type=\"fill\"\r\n color=\"primary\"\r\n title=\"T\u00ECm ki\u1EBFm\"\r\n prefixIcon=\"filter_alt\"\r\n (click)=\"onSubmit()\">\r\n </sd-button>\r\n </div>\r\n }\r\n </sd-section>\r\n }\r\n <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
419
419
  }
420
420
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, decorators: [{
421
421
  type: Component,