@sdcorejs/angular 21.0.7 → 21.0.8
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.
- package/README.md +8 -2
- package/assets/STYLE-GUIDE.md +13 -0
- package/fesm2022/sdcorejs-angular-components-anchor.mjs +2 -3
- package/fesm2022/sdcorejs-angular-components-anchor.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs +195 -25
- package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-badge.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-badge.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-button.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-button.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-document-builder.mjs +5 -6
- package/fesm2022/sdcorejs-angular-components-document-builder.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-editor.mjs +4 -4
- package/fesm2022/sdcorejs-angular-components-editor.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-form-generic.mjs +4 -4
- package/fesm2022/sdcorejs-angular-components-form-generic.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-import-excel.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-inform.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-inform.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-modal.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-modal.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-operator.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-operator.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-org-chart.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-org-chart.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-preview.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-preview.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-query-bar.mjs +8 -8
- package/fesm2022/sdcorejs-angular-components-query-bar.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-section.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-section.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-side-drawer.mjs +6 -4
- package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-table.mjs +8 -9
- package/fesm2022/sdcorejs-angular-components-table.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-tree.mjs +2 -2
- package/fesm2022/sdcorejs-angular-components-tree.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-upload-file.mjs +6 -7
- package/fesm2022/sdcorejs-angular-components-upload-file.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs +4 -5
- package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-checkbox.mjs +3 -3
- package/fesm2022/sdcorejs-angular-forms-checkbox.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs +4 -4
- package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-chip.mjs +4 -4
- package/fesm2022/sdcorejs-angular-forms-chip.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-date-range.mjs +8 -9
- package/fesm2022/sdcorejs-angular-forms-date-range.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-date.mjs +5 -6
- package/fesm2022/sdcorejs-angular-forms-date.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-datetime.mjs +5 -6
- package/fesm2022/sdcorejs-angular-forms-datetime.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-inline-text.mjs +2 -2
- package/fesm2022/sdcorejs-angular-forms-inline-text.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-input-number.mjs +5 -6
- package/fesm2022/sdcorejs-angular-forms-input-number.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-input.mjs +3 -3
- package/fesm2022/sdcorejs-angular-forms-input.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-radio.mjs +3 -4
- package/fesm2022/sdcorejs-angular-forms-radio.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-select.mjs +2 -2
- package/fesm2022/sdcorejs-angular-forms-select.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-switch.mjs +3 -4
- package/fesm2022/sdcorejs-angular-forms-switch.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-textarea.mjs +5 -7
- package/fesm2022/sdcorejs-angular-forms-textarea.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-modules-layout.mjs +2 -3
- package/fesm2022/sdcorejs-angular-modules-layout.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-services-api.mjs +1 -2
- package/fesm2022/sdcorejs-angular-services-api.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-services-confirm.mjs +2 -2
- package/fesm2022/sdcorejs-angular-services-confirm.mjs.map +1 -1
- package/package.json +1 -1
- package/types/sdcorejs-angular-components-autoid-inspector.d.ts +47 -137
- package/types/sdcorejs-angular-forms-input-number.d.ts +0 -1
|
@@ -113,11 +113,11 @@ class SdBadge {
|
|
|
113
113
|
...this.iconColorClasses(),
|
|
114
114
|
}), ...(ngDevMode ? [{ debugName: "iconCombinedClasses" }] : /* istanbul ignore next */ []));
|
|
115
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@let badgeType = type();\n@let tt = tooltip();\n@let titleText = title();\n@let descText = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (badgeType === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n @if (icon()) {\n <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <span class=\"c-badge-title\">{{ titleText }}</span>\n </div>\n} @else if (badgeType === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\n @if (descText) {\n <span class=\"T12R c-badge-description\">{{ descText }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"badgeType === 'icon'\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\n @if (descText) {\n <span class=\"T10R c-badge-description\">{{ descText }}</span>\n }\n </div>\n </div>\n </div>\n}\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}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{padding:0}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px;line-height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px;line-height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px;line-height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n @if (icon()) {\n <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <span class=\"c-badge-title\">{{ _title }}</span>\n </div>\n} @else if (_type === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T12R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"_type === 'icon'\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T10R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n}\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}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{padding:0}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px;line-height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px;line-height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px;line-height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
117
117
|
}
|
|
118
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdBadge, decorators: [{
|
|
119
119
|
type: Component,
|
|
120
|
-
args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@let
|
|
120
|
+
args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n @if (icon()) {\n <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <span class=\"c-badge-title\">{{ _title }}</span>\n </div>\n} @else if (_type === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T12R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"_type === 'icon'\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T10R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n}\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}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-badge--has-icon{display:inline-flex;align-items:center;gap:4px}.c-badge .c-material-icon{padding:0}.c-badge .c-material-icon.c-sm{font-size:16px;width:16px;height:16px;line-height:16px}.c-badge .c-material-icon.c-md{font-size:18px;width:18px;height:18px;line-height:18px}.c-badge .c-material-icon.c-lg{font-size:24px;width:24px;height:24px;line-height:24px}.c-badge.c-badge--sm:not(.c-badge--tag){padding:2px 10px}.c-badge.c-badge--md:not(.c-badge--tag){padding:4px 12px}.c-badge.c-badge--lg:not(.c-badge--tag){padding:6px 16px}.c-badge.c-badge--sm .c-badge-title{font-size:14px}.c-badge.c-badge--md .c-badge-title{font-size:16px}.c-badge.c-badge--lg .c-badge-title{font-size:18px}.c-badge.c-badge--sm .c-badge-description{font-size:12px}.c-badge.c-badge--md .c-badge-description{font-size:13px}.c-badge.c-badge--lg .c-badge-description{font-size:14px}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag.c-badge--sm{padding:1px 7px}.c-badge.c-badge--tag.c-badge--md{padding:2px 10px}.c-badge.c-badge--tag.c-badge--lg{padding:4px 12px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
|
|
121
121
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], click: [{
|
|
122
122
|
type: Output
|
|
123
123
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdcorejs-angular-components-badge.mjs","sources":["../../../projects/sdcorejs-angular/components/badge/src/badge.component.ts","../../../projects/sdcorejs-angular/components/badge/src/badge.component.html","../../../projects/sdcorejs-angular/components/badge/sdcorejs-angular-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\n\n@Component({\n selector: 'sd-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, MatTooltipModule],\n})\nexport class SdBadge {\n defaultIcon = 'fiber_manual_record';\n\n // ==========================================\n // 1. SIGNAL INPUTS\n // ==========================================\n type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\n transform: value => value || 'icon',\n });\n\n color = input<Color, Color | undefined | null>('secondary', {\n transform: value => value || 'secondary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\n transform: value => value || 'material-icons',\n });\n\n title = input<string | number | undefined | null>();\n description = input<string | undefined | null>();\n tooltip = input<string | undefined | null>();\n icon = input<string | undefined | null>();\n\n size = input<Size, Size | undefined | null>('sm', {\n transform: value => value || 'sm',\n });\n\n // ==========================================\n // 2. OUTPUT\n // ==========================================\n @Output() click = new EventEmitter<Event>();\n\n onClick = (event: Event) => {\n event.stopPropagation();\n this.click.emit(event);\n };\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n\n effectiveColor = computed(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.success()) return 'success';\n if (this.info()) return 'info';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n baseColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-black400': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconSizeAndFontClasses = computed(() => {\n const s = this.size();\n const f = this.fontSet();\n return {\n 'c-sm': s === 'sm',\n 'c-md': s === 'md',\n 'c-lg': s === 'lg',\n 'material-icons': f === 'material-icons',\n 'material-icons-outlined': f === 'material-icons-outlined',\n 'material-icons-round': f === 'material-icons-round',\n 'material-icons-sharp': f === 'material-icons-sharp',\n };\n });\n\n // why: size modifier cho container .c-badge (round + tag). Tách prefix c-badge--<size>\n // để không đụng class .c-sm/.c-md/.c-lg đang dùng trên icon span.\n containerSizeClasses = computed(() => {\n const s = this.size();\n return {\n 'c-badge--sm': s === 'sm',\n 'c-badge--md': s === 'md',\n 'c-badge--lg': s === 'lg',\n };\n });\n\n // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)\n tagIconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.baseColorClasses(),\n }));\n\n // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)\n containerCombinedClasses = computed(() => ({\n ...this.baseColorClasses(),\n ...this.containerSizeClasses(),\n }));\n\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\n iconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.iconColorClasses(),\n }));\n}\n","@let badgeType = type();\n@let tt = tooltip();\n@let titleText = title();\n@let descText = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (badgeType === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n @if (icon()) {\n <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <span class=\"c-badge-title\">{{ titleText }}</span>\n </div>\n} @else if (badgeType === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\n @if (descText) {\n <span class=\"T12R c-badge-description\">{{ descText }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"tt || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"badgeType === 'icon'\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\n @if (descText) {\n <span class=\"T10R c-badge-description\">{{ descText }}</span>\n }\n </div>\n </div>\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sdcorejs-angular-components-badge.mjs","sources":["../../../projects/sdcorejs-angular/components/badge/src/badge.component.ts","../../../projects/sdcorejs-angular/components/badge/src/badge.component.html","../../../projects/sdcorejs-angular/components/badge/sdcorejs-angular-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\n\n// Export các Type để dùng chung\nexport type SdBadgeType = 'tag' | 'round' | 'icon';\n\n@Component({\n selector: 'sd-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, MatTooltipModule],\n})\nexport class SdBadge {\n defaultIcon = 'fiber_manual_record';\n\n // ==========================================\n // 1. SIGNAL INPUTS\n // ==========================================\n type = input<SdBadgeType, SdBadgeType | undefined | null>('icon', {\n transform: value => value || 'icon',\n });\n\n color = input<Color, Color | undefined | null>('secondary', {\n transform: value => value || 'secondary',\n });\n\n primary = input(false, { transform: booleanAttribute });\n secondary = input(false, { transform: booleanAttribute });\n success = input(false, { transform: booleanAttribute });\n info = input(false, { transform: booleanAttribute });\n warning = input(false, { transform: booleanAttribute });\n error = input(false, { transform: booleanAttribute });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>('material-icons', {\n transform: value => value || 'material-icons',\n });\n\n title = input<string | number | undefined | null>();\n description = input<string | undefined | null>();\n tooltip = input<string | undefined | null>();\n icon = input<string | undefined | null>();\n\n size = input<Size, Size | undefined | null>('sm', {\n transform: value => value || 'sm',\n });\n\n // ==========================================\n // 2. OUTPUT\n // ==========================================\n @Output() click = new EventEmitter<Event>();\n\n onClick = (event: Event) => {\n event.stopPropagation();\n this.click.emit(event);\n };\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n\n effectiveColor = computed(() => {\n if (this.primary()) return 'primary';\n if (this.secondary()) return 'secondary';\n if (this.success()) return 'success';\n if (this.info()) return 'info';\n if (this.warning()) return 'warning';\n if (this.error()) return 'error';\n return this.color();\n });\n\n baseColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-secondary': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconColorClasses = computed(() => {\n const c = this.effectiveColor();\n return {\n 'c-primary': c === 'primary',\n 'c-black400': c === 'secondary',\n 'c-info': c === 'info',\n 'c-success': c === 'success',\n 'c-warning': c === 'warning',\n 'c-error': c === 'error',\n };\n });\n\n iconSizeAndFontClasses = computed(() => {\n const s = this.size();\n const f = this.fontSet();\n return {\n 'c-sm': s === 'sm',\n 'c-md': s === 'md',\n 'c-lg': s === 'lg',\n 'material-icons': f === 'material-icons',\n 'material-icons-outlined': f === 'material-icons-outlined',\n 'material-icons-round': f === 'material-icons-round',\n 'material-icons-sharp': f === 'material-icons-sharp',\n };\n });\n\n // why: size modifier cho container .c-badge (round + tag). Tách prefix c-badge--<size>\n // để không đụng class .c-sm/.c-md/.c-lg đang dùng trên icon span.\n containerSizeClasses = computed(() => {\n const s = this.size();\n return {\n 'c-badge--sm': s === 'sm',\n 'c-badge--md': s === 'md',\n 'c-badge--lg': s === 'lg',\n };\n });\n\n // GỘP CLASS CHO BADGE TYPE = 'TAG' (cũng dùng lại cho 'ROUND' khi có icon)\n tagIconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.baseColorClasses(),\n }));\n\n // GỘP CLASS CHO CONTAINER round/tag (color tint + size modifier)\n containerCombinedClasses = computed(() => ({\n ...this.baseColorClasses(),\n ...this.containerSizeClasses(),\n }));\n\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\n iconCombinedClasses = computed(() => ({\n ...this.iconSizeAndFontClasses(),\n ...this.iconColorClasses(),\n }));\n}\n","@let _type = type();\n@let _tooltip = tooltip();\n@let _title = title();\n@let _description = description();\n@let iconName = icon() || defaultIcon;\n@let isPointer = click.observed;\n\n@if (_type === 'round') {\n <div\n class=\"c-badge\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.c-badge--has-icon]=\"!!icon()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n @if (icon()) {\n <span class=\"c-material-icon\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <span class=\"c-badge-title\">{{ _title }}</span>\n </div>\n} @else if (_type === 'tag') {\n <div\n class=\"c-badge c-badge--tag\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [ngClass]=\"containerCombinedClasses()\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n @if (icon()) {\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\n {{ iconName }}\n </span>\n }\n <div class=\"d-flex flex-column align-items-start\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T12R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n} @else {\n <div\n class=\"d-flex\"\n matTooltipPosition=\"above\"\n [matTooltip]=\"_tooltip || ''\"\n matTooltipClass=\"sd-multiline-tooltip\"\n [class.c-badge-icon]=\"_type === 'icon'\"\n [class.pointer]=\"isPointer\"\n (click)=\"onClick($event)\"\n aria-hidden=\"true\">\n <div class=\"c-icon d-flex align-items-center\">\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"d-flex flex-column\">\n <span class=\"T14R c-badge-title\">{{ _title }}</span>\n @if (_description) {\n <span class=\"T10R c-badge-description\">{{ _description }}</span>\n }\n </div>\n </div>\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -86,7 +86,7 @@ class SdButton {
|
|
|
86
86
|
this.#subscription.unsubscribe();
|
|
87
87
|
}
|
|
88
88
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "class.sd-block": "block()", "attr.disabled": "disabled() ? \"true\" : null" } }, 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@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}: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%;min-width:0}: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-block{width:100%!important}: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%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}: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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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 });
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, htmlType: { classPropertyName: "htmlType", publicName: "htmlType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.sd-disabled": "disabled()", "class.sd-loading": "loading()", "class.sd-block": "block()", "attr.disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_loading) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (_prefixIcon) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n }\n\n @if (_title) {\n <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n {{ _title }}\n </span>\n }\n\n @if (_suffixIcon && !_loading) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n }\n\n @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</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.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}: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%;min-width:0}: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-block{width:100%!important}: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%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}: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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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 });
|
|
90
90
|
}
|
|
91
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdButton, decorators: [{
|
|
92
92
|
type: Component,
|
|
@@ -95,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
95
95
|
'[class.sd-loading]': 'loading()',
|
|
96
96
|
'[class.sd-block]': 'block()',
|
|
97
97
|
'[attr.disabled]': 'disabled() ? "true" : null',
|
|
98
|
-
}, 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@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}: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%;min-width:0}: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-block{width:100%!important}: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%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"] }]
|
|
98
|
+
}, template: "@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_loading) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (_prefixIcon) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n }\n\n @if (_title) {\n <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n {{ _title }}\n </span>\n }\n\n @if (_suffixIcon && !_loading) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n }\n\n @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</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.sd-block{display:block;width:100%}:host.sd-block button{width:100%}:host ::ng-deep button.c-button{pointer-events:auto;min-width:auto;white-space:nowrap}: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%;min-width:0}: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-block{width:100%!important}: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%;min-width:0;pointer-events:none}:host ::ng-deep .c-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .c-spinner{display:inline-block}:host.sd-loading ::ng-deep button.c-button{pointer-events:none;opacity:.85}\n"] }]
|
|
99
99
|
}], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fontSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSet", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], htmlType: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlType", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
|
|
100
100
|
|
|
101
101
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdcorejs-angular-components-button.mjs","sources":["../../../projects/sdcorejs-angular/components/button/src/button.component.ts","../../../projects/sdcorejs-angular/components/button/src/button.component.html","../../../projects/sdcorejs-angular/components/button/sdcorejs-angular-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n OnDestroy,\n OnInit,\n booleanAttribute,\n computed,\n inject,\n input,\n output,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color } from '@sdcorejs/utils/models';\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, throttleTime } from 'rxjs/operators';\n\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\nexport type SdButtonHtmlType = 'button' | 'submit' | 'reset';\n\n@Component({\n selector: 'sd-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\n host: {\n '[class.sd-disabled]': 'disabled()',\n '[class.sd-loading]': 'loading()',\n '[class.sd-block]': 'block()',\n '[attr.disabled]': 'disabled() ? \"true\" : null',\n }\n})\nexport class SdButton implements OnInit, OnDestroy {\n // ==========================================\n // 1. INJECTS\n // ==========================================\n private el = inject(ElementRef);\n\n // ==========================================\n // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\n // ==========================================\n autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n \n type = input<SdButtonType, SdButtonType | undefined | null>('light', {\n transform: (value) => value || 'light'\n });\n\n color = input<Color, Color | undefined | null>('secondary', {\n transform: (value) => value || 'secondary'\n });\n\n size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\n transform: (value) => value || 'sm'\n });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\n transform: (value) => value || DefaultMaterialIconFontSet\n });\n\n title = input<string | undefined | null>(undefined);\n width = input<string | undefined | null>(undefined);\n tooltip = input<string | undefined | null>(undefined);\n prefixIcon = input<string | undefined | null>(undefined);\n suffixIcon = input<string | undefined | null>(undefined);\n\n disabled = input(false, { transform: booleanAttribute });\n loading = input(false, { transform: booleanAttribute });\n block = input(false, { transform: booleanAttribute });\n\n htmlType = input<SdButtonHtmlType, SdButtonHtmlType | undefined | null>('button', {\n transform: (value) => value || 'button'\n });\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n autoId = computed(() => this.autoIdInput() ? `components-button-${this.autoIdInput()}` : undefined);\n \n buttonClasses = computed(() => ({\n 'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\n 'c-sm': this.size() === 'sm',\n 'c-md': this.size() === 'md',\n 'c-lg': this.size() === 'lg',\n 'c-disabled': this.disabled(),\n 'c-block': this.block(),\n }));\n\n // ==========================================\n // 4. OUTPUT & RXJS STREAMS\n // ==========================================\n click = output<Event>();\n\n #clickSubject = new Subject<Event>();\n #subscription = new Subscription();\n\n constructor() {\n\n // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\n // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\n this.el.nativeElement.addEventListener(\n 'click',\n (event: Event) => {\n if (this.disabled() || this.loading()) {\n // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n },\n { capture: true }\n );\n }\n\n ngOnInit() {\n this.#subscription.add(\n this.#clickSubject\n .pipe(\n throttleTime(300, undefined, { leading: true, trailing: false }),\n filter(() => !this.disabled() && !this.loading())\n )\n .subscribe(event => {\n this.click.emit(event);\n })\n );\n }\n\n // Nhận click từ thẻ button con bên trong\n onInternalClick(event: Event) {\n event.stopPropagation();\n \n if (this.disabled() || this.loading()) {\n return;\n }\n\n this.#clickSubject.next(event);\n }\n\n ngOnDestroy() {\n this.#subscription.unsubscribe();\n }\n}","@let btnType = type();\n@let btnLoad = loading();\n@let btnTitle = title();\n@let pIcon = prefixIcon();\n@let sIcon = suffixIcon();\n@let fSet = fontSet();\n@let hType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (btnType === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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 [type]=\"hType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"btnLoad ? 'true' : 'false'\"\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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AA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1CrB,61GA0GA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxEY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,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,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQvF,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAdpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,WACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,wBAAwB,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAC7F;AACJ,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,oBAAoB,EAAE,WAAW;AACjC,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,iBAAiB,EAAE,4BAA4B;AAChD,qBAAA,EAAA,QAAA,EAAA,61GAAA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA;;;AExCH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"sdcorejs-angular-components-button.mjs","sources":["../../../projects/sdcorejs-angular/components/button/src/button.component.ts","../../../projects/sdcorejs-angular/components/button/src/button.component.html","../../../projects/sdcorejs-angular/components/button/sdcorejs-angular-components-button.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n OnDestroy,\n OnInit,\n booleanAttribute,\n computed,\n inject,\n input,\n output,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Color } from '@sdcorejs/utils/models';\nimport { DefaultMaterialIconFontSet, MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, throttleTime } from 'rxjs/operators';\n\n// Export các Type ra ngoài để tái sử dụng ở file config/interface\nexport type SdButtonType = 'fill' | 'light' | 'outline' | 'link';\nexport type SdButtonSize = 'sm' | 'md' | 'lg';\nexport type SdButtonHtmlType = 'button' | 'submit' | 'reset';\n\n@Component({\n selector: 'sd-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule, MatTooltipModule],\n host: {\n '[class.sd-disabled]': 'disabled()',\n '[class.sd-loading]': 'loading()',\n '[class.sd-block]': 'block()',\n '[attr.disabled]': 'disabled() ? \"true\" : null',\n }\n})\nexport class SdButton implements OnInit, OnDestroy {\n // ==========================================\n // 1. INJECTS\n // ==========================================\n private el = inject(ElementRef);\n\n // ==========================================\n // 2. SIGNAL INPUTS (Bảo mật 100% với Null/Undefined)\n // ==========================================\n autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n \n type = input<SdButtonType, SdButtonType | undefined | null>('light', {\n transform: (value) => value || 'light'\n });\n\n color = input<Color, Color | undefined | null>('secondary', {\n transform: (value) => value || 'secondary'\n });\n\n size = input<SdButtonSize, SdButtonSize | undefined | null>('sm', {\n transform: (value) => value || 'sm'\n });\n\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet | undefined | null>(DefaultMaterialIconFontSet, {\n transform: (value) => value || DefaultMaterialIconFontSet\n });\n\n title = input<string | undefined | null>(undefined);\n width = input<string | undefined | null>(undefined);\n tooltip = input<string | undefined | null>(undefined);\n prefixIcon = input<string | undefined | null>(undefined);\n suffixIcon = input<string | undefined | null>(undefined);\n\n disabled = input(false, { transform: booleanAttribute });\n loading = input(false, { transform: booleanAttribute });\n block = input(false, { transform: booleanAttribute });\n\n htmlType = input<SdButtonHtmlType, SdButtonHtmlType | undefined | null>('button', {\n transform: (value) => value || 'button'\n });\n\n // ==========================================\n // 3. COMPUTED STATE\n // ==========================================\n autoId = computed(() => this.autoIdInput() ? `components-button-${this.autoIdInput()}` : undefined);\n \n buttonClasses = computed(() => ({\n 'c-square': (this.prefixIcon() || this.suffixIcon()) && !this.title(),\n 'c-sm': this.size() === 'sm',\n 'c-md': this.size() === 'md',\n 'c-lg': this.size() === 'lg',\n 'c-disabled': this.disabled(),\n 'c-block': this.block(),\n }));\n\n // ==========================================\n // 4. OUTPUT & RXJS STREAMS\n // ==========================================\n click = output<Event>();\n\n #clickSubject = new Subject<Event>();\n #subscription = new Subscription();\n\n constructor() {\n\n // Kỹ thuật Đánh chặn sự kiện (Capture Phase)\n // Tóm sống mọi sự kiện click ngay khi nó vừa chạm vào component\n this.el.nativeElement.addEventListener(\n 'click',\n (event: Event) => {\n if (this.disabled() || this.loading()) {\n // Nghiền nát sự kiện, không cho Angular phát (click) ra component cha\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n },\n { capture: true }\n );\n }\n\n ngOnInit() {\n this.#subscription.add(\n this.#clickSubject\n .pipe(\n throttleTime(300, undefined, { leading: true, trailing: false }),\n filter(() => !this.disabled() && !this.loading())\n )\n .subscribe(event => {\n this.click.emit(event);\n })\n );\n }\n\n // Nhận click từ thẻ button con bên trong\n onInternalClick(event: Event) {\n event.stopPropagation();\n \n if (this.disabled() || this.loading()) {\n return;\n }\n\n this.#clickSubject.next(event);\n }\n\n ngOnDestroy() {\n this.#subscription.unsubscribe();\n }\n}","@let _type = type();\n@let _loading = loading();\n@let _title = title();\n@let _prefixIcon = prefixIcon();\n@let _suffixIcon = suffixIcon();\n@let _fontSet = fontSet();\n@let _htmlType = htmlType();\n@let _disabled = disabled();\n@let _color = color();\n@let _autoId = autoId();\n@let _width = width();\n@let _tooltip = tooltip();\n\n@if (_type === 'fill') {\n <button\n mat-flat-button\n class=\"c-button c-fill\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'light') {\n <button\n mat-flat-button\n class=\"c-button c-light\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'outline') {\n <button\n mat-stroked-button\n class=\"c-button c-outline\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_type === 'link') {\n <button\n mat-button\n class=\"c-button c-link\"\n [type]=\"_htmlType\"\n [ngClass]=\"buttonClasses()\"\n [disabled]=\"_disabled\"\n [color]=\"_color\"\n [attr.data-autoId]=\"_autoId\"\n [attr.data-disabled]=\"_disabled ? 'true' : 'false'\"\n [attr.data-loading]=\"_loading ? 'true' : 'false'\"\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 (_loading) {\n <mat-spinner mode=\"indeterminate\" diameter=\"18\" strokeWidth=\"2\" class=\"c-spinner\"></mat-spinner>\n } @else if (_prefixIcon) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-prefix\">{{ _prefixIcon }}</mat-icon>\n }\n\n @if (_title) {\n <span class=\"c-title\" [class.ml-8]=\"_loading || _prefixIcon\" [class.mr-8]=\"_suffixIcon && !_loading\">\n {{ _title }}\n </span>\n }\n\n @if (_suffixIcon && !_loading) {\n <mat-icon [fontSet]=\"_fontSet\" class=\"c-icon-suffix\">{{ _suffixIcon }}</mat-icon>\n }\n\n @if (!_title && !_prefixIcon && !_loading && _suffixIcon) {\n <mat-icon [fontSet]=\"_fontSet\">{{ _suffixIcon }}</mat-icon>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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AA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,eAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1CrB,27GA0GA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDxEY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,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,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAQvF,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAdpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,WACP,CAAC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,wBAAwB,EAAE,gBAAgB,CAAC,EAAA,IAAA,EAC7F;AACJ,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,oBAAoB,EAAE,WAAW;AACjC,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,iBAAiB,EAAE,4BAA4B;AAChD,qBAAA,EAAA,QAAA,EAAA,27GAAA,EAAA,MAAA,EAAA,CAAA,23ZAAA,CAAA,EAAA;;;AExCH;;AAEG;;;;"}
|
|
@@ -7,8 +7,7 @@ import { I18nService } from '@sdcorejs/angular/i18n';
|
|
|
7
7
|
import { Plugin, ButtonView, ClassicEditor, Essentials, Paragraph, Bold, Italic, Underline, FontSize, FontColor, FontBackgroundColor, Alignment, Widget, toWidget, ViewUpcastWriter, Matcher, ViewDocument, ViewDomConverter, ClipboardPipeline, ContextualBalloon, FontFamily, Heading, List, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, PageBreak, Undo, Subscript, Superscript, Image, ImageUpload, ImageToolbar, ImageCaption, ImageResize, ImageStyle, ImageBlock, Indent, IndentBlock } from 'ckeditor5';
|
|
8
8
|
import { SdCKEditorStyles } from '@sdcorejs/angular/components/ckeditor-styles';
|
|
9
9
|
import { Subscription, Subject, throttleTime } from 'rxjs';
|
|
10
|
-
import { ColorUtilities, BrowserUtilities } from '@sdcorejs/utils/fns';
|
|
11
|
-
import { v4 } from 'uuid';
|
|
10
|
+
import { Utilities, ColorUtilities, BrowserUtilities } from '@sdcorejs/utils/fns';
|
|
12
11
|
import { resolveMaybeAsync } from '@sdcorejs/utils/models';
|
|
13
12
|
|
|
14
13
|
class PageNumberPlugin extends Plugin {
|
|
@@ -516,7 +515,7 @@ class VariablePlugin extends Plugin {
|
|
|
516
515
|
return modelWriter.createElement('variable', {
|
|
517
516
|
id: viewElement.getAttribute('data-id'),
|
|
518
517
|
// Fix trùng uuid: Nếu đang paste, TẠO MỚI uuid thay vì dùng uuid cũ từ HTML
|
|
519
|
-
uuid: isPasting ?
|
|
518
|
+
uuid: isPasting ? Utilities.generateUuid() : (viewElement.getAttribute('data-uuid') ?? Utilities.generateUuid()),
|
|
520
519
|
value: viewElement.getAttribute('data-value'),
|
|
521
520
|
display: viewElement.getAttribute('data-display'),
|
|
522
521
|
...(bindingValue ? { bindingValue } : {}),
|
|
@@ -562,7 +561,7 @@ class VariablePlugin extends Plugin {
|
|
|
562
561
|
let insertedUuid = '';
|
|
563
562
|
editor.model.change(writer => {
|
|
564
563
|
// 4.1. Chèn biến
|
|
565
|
-
insertedUuid =
|
|
564
|
+
insertedUuid = Utilities.generateUuid();
|
|
566
565
|
const variableElem = writer.createElement('variable', {
|
|
567
566
|
id: variable.id,
|
|
568
567
|
uuid: insertedUuid,
|
|
@@ -796,7 +795,7 @@ class VariablePlugin extends Plugin {
|
|
|
796
795
|
content: fragment.content,
|
|
797
796
|
variable: resolved ?? {
|
|
798
797
|
id: '',
|
|
799
|
-
uuid:
|
|
798
|
+
uuid: Utilities.generateUuid(),
|
|
800
799
|
value: fragment.display,
|
|
801
800
|
display: fragment.display,
|
|
802
801
|
},
|
|
@@ -822,7 +821,7 @@ class VariablePlugin extends Plugin {
|
|
|
822
821
|
else if (fragment.type === 'variable' && fragment.variable) {
|
|
823
822
|
const variableElem = writer.createElement('variable', {
|
|
824
823
|
id: fragment.variable.id,
|
|
825
|
-
uuid:
|
|
824
|
+
uuid: Utilities.generateUuid(),
|
|
826
825
|
value: fragment.variable.value,
|
|
827
826
|
display: fragment.variable.display,
|
|
828
827
|
});
|