npm - @sd-angular/core - Versions diffs - 19.0.0-beta.91 → 19.0.0-beta.92 - Mend

@sd-angular/core 19.0.0-beta.91 → 19.0.0-beta.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/components/badge/src/badge.component.d.ts CHANGED Viewed

@@ -39,7 +39,6 @@ export declare class SdBadge {
         'c-error': boolean;
     }>;
     iconSizeAndFontClasses: import("@angular/core").Signal<{
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
@@ -55,7 +54,6 @@ export declare class SdBadge {
         'c-success': boolean;
         'c-warning': boolean;
         'c-error': boolean;
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
@@ -71,7 +69,6 @@ export declare class SdBadge {
         'c-success': boolean;
         'c-warning': boolean;
         'c-error': boolean;
-        'c-xs': boolean;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;

package/components/table/src/directives/index.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export * from './sd-table-column-filter-def.directive';
 export * from './sticky-shadow.directive';
 export * from './sd-table-title-def.directive';
 export * from './sd-table-cell-def.directive';
+export * from './sd-column-resize.directive';

package/components/table/src/directives/sd-column-resize.directive.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdColumnResizeDirective implements OnDestroy {
+    #private;
+    sdColumnResize: import("@angular/core").InputSignal<boolean>;
+    minWidth: import("@angular/core").InputSignal<string | undefined>;
+    maxWidth: import("@angular/core").InputSignal<string | undefined>;
+    resizeEnd: import("@angular/core").OutputEmitterRef<string>;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdColumnResizeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdColumnResizeDirective, "[sdColumnResize]", never, { "sdColumnResize": { "alias": "sdColumnResize"; "required": true; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; }, never, never, true, never>;
+}

package/components/table/src/models/table-option-config.model.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { SdTableColumn } from './table-column.model';
 export interface TableOptionConfig {
     visible?: boolean;
+    resizable?: boolean;
 }
 export interface OriginColumn {
     field: string;

package/components/table/src/services/config.service.d.ts CHANGED Viewed

@@ -7,10 +7,15 @@ export declare class ConfigService {
     #private;
     private storageService;
     tableConfiguration: ISdTableConfiguration;
+    widthChange$: import("rxjs").Observable<{
+        field: string;
+        width: string;
+    }>;
     constructor(storageService: SdStorageService, tableConfiguration: ISdTableConfiguration);
     loadConfiguredTable: (option: SdTableOption) => ConfiguredTable;
     loadConfigurationResult: (option: SdTableOption, configuration: ConfiguredTable) => ConfiguredTableResult;
     init: (tableOption: SdTableOption) => SdStorage<ConfiguredTable>;
+    persistColumnWidth: (field: string, width: string) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfigService, [null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ConfigService>;
 }

package/components/table/src/table.component.d.ts CHANGED Viewed

@@ -94,6 +94,7 @@ export declare class SdTable<T = unknown> extends SdBaseSecureComponent implemen
     get dataItems(): T[];
     get selectedItems(): T[];
     detectChanges: () => void;
+    onColumnResize: (field: string, width: string) => void;
     onOperatorChange: (column: SdTableColumn, operator: SdOperator) => void;
     trackBy: (index: number, item: SdTableItem) => string;
     isReorderDisabled(item: SdTableItem<T>): boolean;

package/fesm2022/sd-angular-core-components-badge.mjs CHANGED Viewed

@@ -86,7 +86,6 @@ class SdBadge {
         const s = this.size();
         const f = this.fontSet();
         return {
-            'c-xs': s === 'xs',
             'c-sm': s === 'sm',
             'c-md': s === 'md',
             'c-lg': s === 'lg',

package/fesm2022/sd-angular-core-components-badge.mjs.map CHANGED Viewed

	@@ -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 /\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\n\r\n// Export các Type để dùng chung\r\nexport type SdBadgeType = 'tag' \| 'round' \| 'icon';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n defaultIcon = 'fiber_manual_record';\r\n\r\n // ==========================================\r\n // 1. SIGNAL INPUTS\r\n // ==========================================\r\n type = input<SdBadgeType, SdBadgeType \| undefined \| null>('icon', {\r\n transform: value => value \|\| 'icon',\r\n });\r\n\r\n color = input<SdColor, SdColor \| undefined \| null>('secondary', {\r\n transform: value => value \|\| 'secondary',\r\n });\r\n\r\n primary = input(false, { transform: booleanAttribute });\r\n secondary = input(false, { transform: booleanAttribute });\r\n success = input(false, { transform: booleanAttribute });\r\n info = input(false, { transform: booleanAttribute });\r\n warning = input(false, { transform: booleanAttribute });\r\n error = input(false, { transform: booleanAttribute });\r\n\r\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\r\n transform: value => value \|\| 'material-icons',\r\n });\r\n\r\n title = input<string \| number \| undefined \| null>();\r\n description = input<string \| undefined \| null>();\r\n tooltip = input<string \| undefined \| null>();\r\n icon = input<string \| undefined \| null>();\r\n\r\n size = input<SdSize, SdSize \| undefined \| null>('sm', {\r\n transform: value => value \|\| 'sm',\r\n });\r\n\r\n // ==========================================\r\n // 2. OUTPUT\r\n // ==========================================\r\n @Output() click = new EventEmitter<Event>();\r\n\r\n onClick = (event: Event) => {\r\n event.stopPropagation();\r\n this.click.emit(event);\r\n };\r\n\r\n // ==========================================\r\n // 3. COMPUTED STATE\r\n // ==========================================\r\n\r\n effectiveColor = computed(() => {\r\n if (this.primary()) return 'primary';\r\n if (this.secondary()) return 'secondary';\r\n if (this.success()) return 'success';\r\n if (this.info()) return 'info';\r\n if (this.warning()) return 'warning';\r\n if (this.error()) return 'error';\r\n return this.color();\r\n });\r\n\r\n baseColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-secondary': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-black400': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconSizeAndFontClasses = computed(() => {\r\n const s = this.size();\r\n const f = this.fontSet();\r\n return {\r\n 'c-xs': s === 'xs',\r\n 'c-sm': s === 'sm',\r\n 'c-md': s === 'md',\r\n 'c-lg': s === 'lg',\r\n 'material-icons': f === 'material-icons',\r\n 'material-icons-outlined': f === 'material-icons-outlined',\r\n 'material-icons-round': f === 'material-icons-round',\r\n 'material-icons-sharp': f === 'material-icons-sharp',\r\n };\r\n });\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'TAG'\r\n tagIconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.baseColorClasses(),\r\n }));\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\r\n iconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.iconColorClasses(),\r\n }));\r\n}\r\n","@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() \|\| defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n <div\r\n class=\"c-badge\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n {{ titleText }}\r\n </div>\r\n} @else if (badgeType === 'tag') {\r\n <div\r\n class=\"c-badge c-badge--tag\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n @if (icon()) {\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n }\r\n <div class=\"d-flex flex-column align-items-start\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"d-flex\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\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 /\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\n\r\n// Export các Type để dùng chung\r\nexport type SdBadgeType = 'tag' \| 'round' \| 'icon';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n defaultIcon = 'fiber_manual_record';\r\n\r\n // ==========================================\r\n // 1. SIGNAL INPUTS\r\n // ==========================================\r\n type = input<SdBadgeType, SdBadgeType \| undefined \| null>('icon', {\r\n transform: value => value \|\| 'icon',\r\n });\r\n\r\n color = input<SdColor, SdColor \| undefined \| null>('secondary', {\r\n transform: value => value \|\| 'secondary',\r\n });\r\n\r\n primary = input(false, { transform: booleanAttribute });\r\n secondary = input(false, { transform: booleanAttribute });\r\n success = input(false, { transform: booleanAttribute });\r\n info = input(false, { transform: booleanAttribute });\r\n warning = input(false, { transform: booleanAttribute });\r\n error = input(false, { transform: booleanAttribute });\r\n\r\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\r\n transform: value => value \|\| 'material-icons',\r\n });\r\n\r\n title = input<string \| number \| undefined \| null>();\r\n description = input<string \| undefined \| null>();\r\n tooltip = input<string \| undefined \| null>();\r\n icon = input<string \| undefined \| null>();\r\n\r\n size = input<SdSize, SdSize \| undefined \| null>('sm', {\r\n transform: value => value \|\| 'sm',\r\n });\r\n\r\n // ==========================================\r\n // 2. OUTPUT\r\n // ==========================================\r\n @Output() click = new EventEmitter<Event>();\r\n\r\n onClick = (event: Event) => {\r\n event.stopPropagation();\r\n this.click.emit(event);\r\n };\r\n\r\n // ==========================================\r\n // 3. COMPUTED STATE\r\n // ==========================================\r\n\r\n effectiveColor = computed(() => {\r\n if (this.primary()) return 'primary';\r\n if (this.secondary()) return 'secondary';\r\n if (this.success()) return 'success';\r\n if (this.info()) return 'info';\r\n if (this.warning()) return 'warning';\r\n if (this.error()) return 'error';\r\n return this.color();\r\n });\r\n\r\n baseColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-secondary': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-black400': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconSizeAndFontClasses = computed(() => {\r\n const s = this.size();\r\n const f = this.fontSet();\r\n return {\r\n 'c-sm': s === 'sm',\r\n 'c-md': s === 'md',\r\n 'c-lg': s === 'lg',\r\n 'material-icons': f === 'material-icons',\r\n 'material-icons-outlined': f === 'material-icons-outlined',\r\n 'material-icons-round': f === 'material-icons-round',\r\n 'material-icons-sharp': f === 'material-icons-sharp',\r\n };\r\n });\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'TAG'\r\n tagIconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.baseColorClasses(),\r\n }));\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\r\n iconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.iconColorClasses(),\r\n }));\r\n}\r\n","@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() \|\| defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n <div\r\n class=\"c-badge\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n {{ titleText }}\r\n </div>\r\n} @else if (badgeType === 'tag') {\r\n <div\r\n class=\"c-badge c-badge--tag\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n @if (icon()) {\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n }\r\n <div class=\"d-flex flex-column align-items-start\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"d-flex\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}