@sd-angular/core 19.0.31 → 19.0.33
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/assets/scss/core/_read-state-panel.scss +57 -0
- package/components/data-state/index.d.ts +1 -0
- package/components/data-state/src/data-state.component.d.ts +41 -0
- package/components/import-excel/src/import-excel.component.d.ts +23 -1
- package/components/index.d.ts +1 -0
- package/components/quick-action/src/quick-action.component.d.ts +3 -1
- package/components/table/src/components/selector-action/selector-action.component.d.ts +12 -0
- package/components/table/src/models/table-option-selector.model.d.ts +2 -0
- package/components/table/src/table.component.d.ts +10 -1
- package/components/upload-file/src/upload-file.component.d.ts +5 -1
- package/fesm2022/sd-angular-core-components-badge.mjs +2 -2
- package/fesm2022/sd-angular-core-components-badge.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-button.mjs +2 -2
- package/fesm2022/sd-angular-core-components-button.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-data-state.mjs +72 -0
- package/fesm2022/sd-angular-core-components-data-state.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-form-generic.mjs +14 -14
- package/fesm2022/sd-angular-core-components-form-generic.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-import-excel.mjs +67 -18
- package/fesm2022/sd-angular-core-components-import-excel.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-inform.mjs +6 -6
- package/fesm2022/sd-angular-core-components-inform.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-query-bar.mjs +3 -3
- package/fesm2022/sd-angular-core-components-query-bar.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-query-builder.mjs +1 -1
- package/fesm2022/sd-angular-core-components-query-builder.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-quick-action.mjs +4 -2
- package/fesm2022/sd-angular-core-components-quick-action.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-stepper.mjs +2 -2
- package/fesm2022/sd-angular-core-components-stepper.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +125 -31
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-tree.mjs +1 -1
- package/fesm2022/sd-angular-core-components-tree.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-upload-file.mjs +20 -6
- package/fesm2022/sd-angular-core-components-upload-file.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components.mjs +1 -0
- package/fesm2022/sd-angular-core-components.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs +247 -59
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-date-range.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-date-range.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-date.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-date.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-datetime.mjs +2 -2
- package/fesm2022/sd-angular-core-forms-datetime.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-select.mjs +290 -67
- package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
- package/fesm2022/sd-angular-core-i18n.mjs +160 -0
- package/fesm2022/sd-angular-core-i18n.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-layout.mjs +756 -15
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-read-state.mjs +87 -0
- package/fesm2022/sd-angular-core-utilities-read-state.mjs.map +1 -0
- package/fesm2022/sd-angular-core-utilities.mjs +1 -0
- package/fesm2022/sd-angular-core-utilities.mjs.map +1 -1
- package/forms/autocomplete/src/autocomplete.component.d.ts +13 -2
- package/forms/select/src/select.component.d.ts +11 -1
- package/i18n/src/en.d.ts +32 -0
- package/modules/layout/components/layout-main/layout-main.component.d.ts +1 -1
- package/modules/layout/components/sidebar-mobile-v1/components/sidebar/sidebar.component.d.ts +2 -2
- package/modules/layout/components/sidebar-mobile-v1/main.component.d.ts +2 -2
- package/modules/layout/components/sidebar-v2/components/sidebar/sidebar.component.d.ts +56 -0
- package/modules/layout/components/sidebar-v2/components/user/user.component.d.ts +22 -0
- package/modules/layout/components/sidebar-v2/main.component.d.ts +25 -0
- package/modules/layout/configurations/layout.configuration.d.ts +5 -1
- package/modules/layout/services/layout.service.d.ts +2 -2
- package/package.json +9 -1
- package/utilities/index.d.ts +1 -0
- package/utilities/read-state/index.d.ts +1 -0
- package/utilities/read-state/src/read-state.d.ts +37 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// why: panel hẹp dùng state căn giữa; compact ở trang/bảng vẫn giữ bố cục riêng.
|
|
2
|
+
@mixin read-state-panel {
|
|
3
|
+
.sd-read-state-region {
|
|
4
|
+
container: sd-read-panel / inline-size;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
width: 100%;
|
|
7
|
+
min-width: 0;
|
|
8
|
+
text-align: center;
|
|
9
|
+
|
|
10
|
+
.sd-data-state.sd-data-state--compact {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: center;
|
|
14
|
+
min-height: 120px;
|
|
15
|
+
padding: 20px 16px;
|
|
16
|
+
text-align: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.sd-data-state.sd-data-state--compact .sd-data-state__symbol {
|
|
20
|
+
margin: 0 0 8px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.sd-data-state.sd-data-state--compact .sd-data-state__message {
|
|
24
|
+
max-width: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sd-data-state.sd-data-state--compact .sd-data-state__actions {
|
|
28
|
+
justify-content: center;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@container sd-read-panel (max-width: 220px) {
|
|
33
|
+
.sd-read-state-region .sd-data-state.sd-data-state--compact {
|
|
34
|
+
padding: 8px 10px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sd-read-state-region .sd-data-state.sd-data-state--compact .sd-data-state__symbol {
|
|
38
|
+
width: 24px;
|
|
39
|
+
height: 24px;
|
|
40
|
+
margin-bottom: 4px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sd-read-state-region .sd-data-state.sd-data-state--compact .sd-data-state__icon {
|
|
44
|
+
width: 18px;
|
|
45
|
+
height: 18px;
|
|
46
|
+
font-size: 18px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.sd-read-state-region .sd-data-state.sd-data-state--compact .sd-data-state__message {
|
|
50
|
+
line-height: 18px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.sd-read-state-region .sd-data-state.sd-data-state--compact .sd-data-state__actions {
|
|
54
|
+
margin-top: 6px;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './src/data-state.component';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export type SdIconSet = 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'lucide';
|
|
4
|
+
export type SdDataStateKind = 'loading' | 'empty' | 'error' | 'forbidden' | 'success';
|
|
5
|
+
export interface SdDataStateTemplateContext {
|
|
6
|
+
readonly $implicit: SdDataStateKind;
|
|
7
|
+
readonly state: SdDataStateKind;
|
|
8
|
+
readonly retry: () => void;
|
|
9
|
+
readonly action: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare class SdDataStateTemplateDirective {
|
|
12
|
+
readonly template: TemplateRef<SdDataStateTemplateContext>;
|
|
13
|
+
static ngTemplateContextGuard(_directive: SdDataStateTemplateDirective, _context: unknown): _context is SdDataStateTemplateContext;
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdDataStateTemplateDirective, never>;
|
|
15
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SdDataStateTemplateDirective, "ng-template[sdDataStateTemplate]", never, {}, {}, never, never, true, never>;
|
|
16
|
+
}
|
|
17
|
+
export declare class SdDataState {
|
|
18
|
+
readonly state: import("@angular/core").InputSignal<SdDataStateKind>;
|
|
19
|
+
readonly title: import("@angular/core").InputSignal<string | null | undefined>;
|
|
20
|
+
readonly message: import("@angular/core").InputSignal<string | null | undefined>;
|
|
21
|
+
readonly icon: import("@angular/core").InputSignal<string | null | undefined>;
|
|
22
|
+
readonly fontSet: import("@angular/core").InputSignal<SdIconSet | undefined>;
|
|
23
|
+
readonly retryable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
24
|
+
readonly retryLabel: import("@angular/core").InputSignal<string | null | undefined>;
|
|
25
|
+
readonly actionLabel: import("@angular/core").InputSignal<string | null | undefined>;
|
|
26
|
+
readonly compact: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
27
|
+
readonly fullPage: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
28
|
+
readonly sdRetry: import("@angular/core").OutputEmitterRef<void>;
|
|
29
|
+
readonly sdAction: import("@angular/core").OutputEmitterRef<void>;
|
|
30
|
+
protected readonly customTemplate: import("@angular/core").Signal<SdDataStateTemplateDirective | undefined>;
|
|
31
|
+
protected readonly effectiveFontSet: import("@angular/core").Signal<SdIconSet>;
|
|
32
|
+
protected readonly effectiveIcon: import("@angular/core").Signal<string | null>;
|
|
33
|
+
protected readonly titleKey: import("@angular/core").Signal<string>;
|
|
34
|
+
protected readonly messageKey: import("@angular/core").Signal<string>;
|
|
35
|
+
protected readonly role: import("@angular/core").Signal<"alert" | "status">;
|
|
36
|
+
protected readonly retry: () => void;
|
|
37
|
+
protected readonly action: () => void;
|
|
38
|
+
protected readonly templateContext: import("@angular/core").Signal<SdDataStateTemplateContext>;
|
|
39
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdDataState, never>;
|
|
40
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdDataState, "sd-data-state", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "retryable": { "alias": "retryable"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "fullPage": { "alias": "fullPage"; "required": false; "isSignal": true; }; }, { "sdRetry": "sdRetry"; "sdAction": "sdAction"; }, ["customTemplate"], ["*"], true, never>;
|
|
41
|
+
}
|
|
@@ -19,13 +19,35 @@ export declare class SdImportExcel implements OnInit, OnDestroy {
|
|
|
19
19
|
excelItems: SdImportExcelItem[];
|
|
20
20
|
hasDescription: boolean;
|
|
21
21
|
showing: 'ALL' | 'SUCCESS' | 'WARNING' | 'ERROR';
|
|
22
|
+
readonly filters: readonly [{
|
|
23
|
+
readonly value: "ALL";
|
|
24
|
+
readonly label: "core.component.import-excel.filter-all";
|
|
25
|
+
readonly icon: "list_alt";
|
|
26
|
+
}, {
|
|
27
|
+
readonly value: "SUCCESS";
|
|
28
|
+
readonly label: "core.component.import-excel.filter-success";
|
|
29
|
+
readonly icon: "check_circle_outline";
|
|
30
|
+
}, {
|
|
31
|
+
readonly value: "WARNING";
|
|
32
|
+
readonly label: "core.component.import-excel.filter-warning";
|
|
33
|
+
readonly icon: "warning_amber";
|
|
34
|
+
}, {
|
|
35
|
+
readonly value: "ERROR";
|
|
36
|
+
readonly label: "core.component.import-excel.filter-error";
|
|
37
|
+
readonly icon: "error_outline";
|
|
38
|
+
}];
|
|
39
|
+
filterCount: (value: "ALL" | "SUCCESS" | "WARNING" | "ERROR") => number;
|
|
40
|
+
protected validationMessages: (item: SdImportExcelItem) => {
|
|
41
|
+
errors: string[];
|
|
42
|
+
warnings: string[];
|
|
43
|
+
};
|
|
22
44
|
filteredItems: SdImportExcelItem[];
|
|
23
45
|
viewItems: SdImportExcelItem[];
|
|
24
46
|
numberOfSuccess: number;
|
|
25
47
|
numberOfError: number;
|
|
26
48
|
numberOfWarning: number;
|
|
27
49
|
file?: File;
|
|
28
|
-
set paginator(paginator: MatPaginator);
|
|
50
|
+
set paginator(paginator: MatPaginator | undefined);
|
|
29
51
|
uploading: boolean;
|
|
30
52
|
isUploaded: boolean;
|
|
31
53
|
isDownloadTemplate: boolean;
|
package/components/index.d.ts
CHANGED
|
@@ -25,3 +25,4 @@ export * from '@sd-angular/core/components/editor';
|
|
|
25
25
|
export * from '@sd-angular/core/components/splitter';
|
|
26
26
|
export * from '@sd-angular/core/components/preview';
|
|
27
27
|
export * from '@sd-angular/core/components/autoid-inspector';
|
|
28
|
+
export * from '@sd-angular/core/components/data-state';
|
|
@@ -4,6 +4,8 @@ export declare class SdQuickAction {
|
|
|
4
4
|
* Toggle visibility of the floating toolbar. Bare attribute = true.
|
|
5
5
|
*/
|
|
6
6
|
readonly opened: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
7
|
+
/** Keep the toolbar in its owner's layout (for a sticky table footer or a drawer). */
|
|
8
|
+
readonly contained: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
7
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdQuickAction, never>;
|
|
8
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "contained": { "alias": "contained"; "required": false; "isSignal": true; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
|
|
9
11
|
}
|
|
@@ -10,7 +10,19 @@ export declare class SelectorActionComponent {
|
|
|
10
10
|
clear: import("@angular/core").OutputEmitterRef<void>;
|
|
11
11
|
autoId: import("@angular/core").Signal<string>;
|
|
12
12
|
message: import("@angular/core").Signal<string>;
|
|
13
|
+
readonly actions: import("@angular/core").Signal<Action[]>;
|
|
14
|
+
readonly compactActionBar: import("@angular/core").Signal<boolean>;
|
|
13
15
|
opened: import("@angular/core").Signal<boolean>;
|
|
16
|
+
readonly directActions: import("@angular/core").Signal<{
|
|
17
|
+
action: Action;
|
|
18
|
+
index: number;
|
|
19
|
+
}[]>;
|
|
20
|
+
readonly overflowActions: import("@angular/core").Signal<{
|
|
21
|
+
action: Action;
|
|
22
|
+
index: number;
|
|
23
|
+
}[]>;
|
|
24
|
+
readonly moreLabel: import("@angular/core").Signal<string>;
|
|
25
|
+
readonly clearLabel: import("@angular/core").Signal<string>;
|
|
14
26
|
onClear: () => void;
|
|
15
27
|
onClickAction: (action: Action) => void;
|
|
16
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<SelectorActionComponent, never>;
|
|
@@ -7,6 +7,8 @@ export interface SdTableOptionSelector<T = any> {
|
|
|
7
7
|
single?: boolean;
|
|
8
8
|
/** Danh sách action hiển thị khi có item được chọn. */
|
|
9
9
|
actions?: SdTableAction<T>[];
|
|
10
|
+
/** Kiểu action bar: classic (mặc định) giữ thanh nổi cũ; compact dùng thanh trong bảng và menu Thêm. */
|
|
11
|
+
actionBar?: 'classic' | 'compact';
|
|
10
12
|
/** Nội dung hiển thị bên cạnh selector/action bar. */
|
|
11
13
|
message?: string | ((selectedItems?: T[]) => string);
|
|
12
14
|
/** Callback khi user chọn/bỏ chọn một dòng. */
|
|
@@ -13,6 +13,8 @@ import { SdTableColumn } from './models/table-column.model';
|
|
|
13
13
|
import { SdTableOption } from './models/table-option.model';
|
|
14
14
|
import { SdTableFilterRequest, TableFilterRegister, TableFilterValue } from './services/table-filter/table-filter.model';
|
|
15
15
|
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
|
|
16
|
+
import { SdDataStateTemplateDirective } from '@sd-angular/core/components/data-state';
|
|
17
|
+
import { SdReadState } from '@sd-angular/core/utilities/read-state';
|
|
16
18
|
import { SdQuickAction } from '@sd-angular/core/components/quick-action';
|
|
17
19
|
import { SdScrollDirective } from '@sd-angular/core/directives';
|
|
18
20
|
import { Operator } from '@sdcorejs/utils/models';
|
|
@@ -39,6 +41,11 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
|
|
|
39
41
|
autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
|
|
40
42
|
autoId: import("@angular/core").Signal<string | undefined>;
|
|
41
43
|
option: import("@angular/core").InputSignal<SdTableOption<T>>;
|
|
44
|
+
/** Hide the integrated error region while retaining read state, events and retry. */
|
|
45
|
+
readonly hideReadError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
46
|
+
readonly sdReadStateChange: import("@angular/core").OutputEmitterRef<SdReadState>;
|
|
47
|
+
readonly readState: import("@angular/core").Signal<SdReadState>;
|
|
48
|
+
readonly dataStateTemplate: import("@angular/core").Signal<SdDataStateTemplateDirective | undefined>;
|
|
42
49
|
table: import("@angular/core").Signal<MatTable<any> | undefined>;
|
|
43
50
|
configComponent: import("@angular/core").Signal<ConfigComponent | undefined>;
|
|
44
51
|
sdPopupExport: import("@angular/core").Signal<SdPopupExport | undefined>;
|
|
@@ -80,6 +87,8 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
|
|
|
80
87
|
ngAfterViewInit(): void;
|
|
81
88
|
ngOnDestroy(): void;
|
|
82
89
|
getFilterRequest: () => SdTableFilterRequest;
|
|
90
|
+
/** Retry only the still-valid failed server request, without resetting filters or paging. */
|
|
91
|
+
retryRead: () => Promise<void>;
|
|
83
92
|
reload: (force?: boolean, scrollTop?: boolean) => Promise<void>;
|
|
84
93
|
exportExcel: (columns?: SdExcelColumn[]) => void;
|
|
85
94
|
exportCSV: (columns?: SdExcelColumn[]) => void;
|
|
@@ -128,5 +137,5 @@ export declare class SdTable<T = unknown> implements AfterViewInit, OnDestroy {
|
|
|
128
137
|
reorderSortPredicate: (index: number, drag: CdkDrag<SdTableItem<T>>, drop: CdkDropList<SdTableItem<T>[]>) => boolean;
|
|
129
138
|
onReorderDrop(event: CdkDragDrop<SdTableItem<T>[]>): void;
|
|
130
139
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdTable<any>, never>;
|
|
131
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; }, {}, ["sdSubInformation", "sdGroupDef", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
|
|
140
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdTable<any>, "sd-table", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": true; "isSignal": true; }; "hideReadError": { "alias": "hideReadError"; "required": false; "isSignal": true; }; }, { "sdReadStateChange": "sdReadStateChange"; }, ["dataStateTemplate", "sdSubInformation", "sdGroupDef", "sdCellDefs", "sdFooterDefs", "sdFilterDefs", "sdTitleDefs"], ["[sdTableTop]"], true, never>;
|
|
132
141
|
}
|
|
@@ -28,6 +28,7 @@ export declare class SdUploadFile<TArgs = any> {
|
|
|
28
28
|
readonly label: import("@angular/core").InputSignal<string | undefined>;
|
|
29
29
|
readonly key: import("@angular/core").InputSignal<string | undefined>;
|
|
30
30
|
readonly description: import("@angular/core").InputSignal<string | undefined>;
|
|
31
|
+
readonly appearance: import("@angular/core").InputSignal<"dropzone" | "compact">;
|
|
31
32
|
readonly previewWidth: import("@angular/core").InputSignal<string>;
|
|
32
33
|
readonly previewHeight: import("@angular/core").InputSignal<string>;
|
|
33
34
|
readonly align: import("@angular/core").InputSignal<"left" | "center">;
|
|
@@ -58,6 +59,9 @@ export declare class SdUploadFile<TArgs = any> {
|
|
|
58
59
|
onDrop: (event: CdkDragDrop<string[]>) => void;
|
|
59
60
|
onImgError: (previewFile: PreviewFile) => void;
|
|
60
61
|
onSelect: (file: PreviewFile) => void;
|
|
62
|
+
readonly isTouchDevice: boolean;
|
|
63
|
+
onUploadKeydown: (event: Event) => void;
|
|
64
|
+
onSelectKeydown: (file: PreviewFile, event: KeyboardEvent) => void;
|
|
61
65
|
/**
|
|
62
66
|
* Lấy danh sách các File từ previewFiles (chưa upload).
|
|
63
67
|
*/
|
|
@@ -86,5 +90,5 @@ export declare class SdUploadFile<TArgs = any> {
|
|
|
86
90
|
onDownload: (previewFile: PreviewFile) => void;
|
|
87
91
|
isLastVisibleOverlay(fileIndex: number): boolean;
|
|
88
92
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdUploadFile<any>, never>;
|
|
89
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "args": { "alias": "args"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "previewHeight": { "alias": "previewHeight"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "uploadInput": { "alias": "upload"; "required": false; "isSignal": true; }; "details": { "alias": "details"; "required": false; "isSignal": true; }; "downloadInput": { "alias": "download"; "required": false; "isSignal": true; }; "imageValidator": { "alias": "imageValidator"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "nameInput": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxOfImage": { "alias": "maxOfImage"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "loaded": "loaded"; "filesChanged": "filesChanged"; "model": "modelChange"; }, ["sdLabelDef"], never, true, never>;
|
|
93
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdUploadFile<any>, "sd-upload-file", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "args": { "alias": "args"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "previewWidth": { "alias": "previewWidth"; "required": false; "isSignal": true; }; "previewHeight": { "alias": "previewHeight"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "uploadInput": { "alias": "upload"; "required": false; "isSignal": true; }; "details": { "alias": "details"; "required": false; "isSignal": true; }; "downloadInput": { "alias": "download"; "required": false; "isSignal": true; }; "imageValidator": { "alias": "imageValidator"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "scaleToPixel": { "alias": "scaleToPixel"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "nameInput": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "maxOfImage": { "alias": "maxOfImage"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "loaded": "loaded"; "filesChanged": "filesChanged"; "model": "modelChange"; }, ["sdLabelDef"], never, true, never>;
|
|
90
94
|
}
|
|
@@ -121,11 +121,11 @@ class SdBadge {
|
|
|
121
121
|
...this.iconColorClasses(),
|
|
122
122
|
}));
|
|
123
123
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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 });
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"c-badge-copy\">\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{display:inline-flex;align-items:center;min-width:0;max-width:100%}.c-badge-icon .c-icon{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:16px;height:16px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:18px;height:18px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:24px;height:24px;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-icon .c-badge-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow-wrap:anywhere}.c-badge-icon .c-badge-title{line-height:20px}.c-badge-icon .c-badge-description{line-height:14px}.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 });
|
|
125
125
|
}
|
|
126
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdBadge, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
|
-
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"] }]
|
|
128
|
+
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\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"c-badge-copy\">\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{display:inline-flex;align-items:center;min-width:0;max-width:100%}.c-badge-icon .c-icon{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.c-badge-icon .c-material-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1}.c-badge-icon .c-material-icon.c-sm{width:16px;height:16px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:18px;height:18px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:24px;height:24px;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-icon .c-badge-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;overflow-wrap:anywhere}.c-badge-icon .c-badge-title{line-height:20px}.c-badge-icon .c-badge-description{line-height:14px}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
|
|
129
129
|
}], propDecorators: { click: [{
|
|
130
130
|
type: Output
|
|
131
131
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-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 '@sd-angular/core/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 styleUrl: './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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"}
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-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 '@sd-angular/core/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 styleUrl: './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\" [ngClass]=\"iconCombinedClasses()\">\n {{ iconName }}\n </span>\n <div class=\"c-badge-copy\">\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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"}
|