@sd-angular/core 19.0.0-beta.71 → 19.0.0-beta.73
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/components/chart/index.d.ts +4 -0
- package/components/chart/src/bar-chart.component.d.ts +19 -0
- package/components/chart/src/doughnut-chart.component.d.ts +16 -0
- package/components/chart/src/line-chart.component.d.ts +16 -0
- package/components/chart/src/pie-chart.component.d.ts +16 -0
- package/components/index.d.ts +1 -0
- package/components/modal/src/modal.component.d.ts +1 -1
- package/components/section/src/section.component.d.ts +3 -3
- package/components/upload-file/src/configurations/upload-file.configuration.d.ts +33 -0
- package/components/upload-file/src/upload-file.component.d.ts +5 -2
- package/components/workflow/src/models/form-generic-expression.model.d.ts +1 -0
- package/components/workflow/src/pipes/html.pipe.d.ts +4 -4
- package/fesm2022/sd-angular-core-components-chart.mjs +284 -0
- package/fesm2022/sd-angular-core-components-chart.mjs.map +1 -0
- package/fesm2022/sd-angular-core-components-section.mjs +5 -5
- package/fesm2022/sd-angular-core-components-section.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-side-drawer.mjs +2 -2
- package/fesm2022/sd-angular-core-components-side-drawer.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +7 -5
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-upload-file.mjs +61 -9
- package/fesm2022/sd-angular-core-components-upload-file.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-workflow.mjs +125 -118
- package/fesm2022/sd-angular-core-components-workflow.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-modules-layout.mjs +2 -3
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-permission.mjs +160 -74
- package/fesm2022/sd-angular-core-modules-permission.mjs.map +1 -1
- package/fesm2022/sd-angular-core-utilities-extensions.mjs +27 -35
- package/fesm2022/sd-angular-core-utilities-extensions.mjs.map +1 -1
- package/fesm2022/sd-angular-core.mjs +0 -1
- package/fesm2022/sd-angular-core.mjs.map +1 -1
- package/modules/layout/services/menu/menu.model.d.ts +1 -0
- package/modules/permission/src/configurations/permission.configuration.d.ts +56 -2
- package/modules/permission/src/directives/permission.directive.d.ts +5 -8
- package/modules/permission/src/guards/permission.guard.d.ts +2 -1
- package/modules/permission/src/services/permission.service.d.ts +6 -9
- package/package.json +88 -91
- package/public-api.d.ts +0 -1
- package/sd-angular-core-19.0.0-beta.73.tgz +0 -0
- package/fesm2022/sd-angular-core-guards-permission.mjs +0 -155
- package/fesm2022/sd-angular-core-guards-permission.mjs.map +0 -1
- package/fesm2022/sd-angular-core-guards.mjs +0 -6
- package/fesm2022/sd-angular-core-guards.mjs.map +0 -1
- package/guards/index.d.ts +0 -1
- package/guards/permission/index.d.ts +0 -4
- package/guards/permission/src/configurations/index.d.ts +0 -1
- package/guards/permission/src/configurations/permission.configuration.d.ts +0 -8
- package/guards/permission/src/directives/index.d.ts +0 -1
- package/guards/permission/src/directives/permission.directive.d.ts +0 -12
- package/guards/permission/src/guards/index.d.ts +0 -1
- package/guards/permission/src/guards/permission.guard.d.ts +0 -13
- package/guards/permission/src/services/index.d.ts +0 -1
- package/guards/permission/src/services/permission.service.d.ts +0 -15
- package/sd-angular-core-19.0.0-beta.71.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n #el = inject(ElementRef);\r\n\r\n title = input<string | null>(
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-section.mjs","sources":["../../../projects/sd-angular/components/section/src/section.component.ts","../../../projects/sd-angular/components/section/src/section.component.html","../../../projects/sd-angular/components/section/src/section-item/section-item.component.ts","../../../projects/sd-angular/components/section/src/section-item/section-item.component.html","../../../projects/sd-angular/components/section/sd-angular-core-components-section.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename */\r\nimport { booleanAttribute, Component, effect, ElementRef, inject, input, model } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdColor } from '@sd-angular/core/utilities';\r\n\r\n@Component({\r\n selector: 'sd-section',\r\n templateUrl: './section.component.html',\r\n styleUrls: ['./section.component.scss'],\r\n imports: [MatIconModule],\r\n})\r\nexport class SdSection extends SdBaseSecureComponent {\r\n #el = inject(ElementRef);\r\n\r\n title = input<string | undefined | null>(undefined);\r\n subTitle = input<string | undefined | null>(undefined);\r\n icon = input<string | undefined | null>(undefined);\r\n iconColor = input<SdColor>('primary', { alias: 'iconColor' });\r\n\r\n collapsed = model<boolean>(false, { alias: 'collapsed' });\r\n collapsable = input(false, { transform: booleanAttribute });\r\n hideHeader = input(false, { transform: booleanAttribute });\r\n noPaddingBody = input(false, { transform: booleanAttribute });\r\n\r\n constructor() {\r\n super();\r\n effect(() => {\r\n if (this.title()) {\r\n this.#el.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n\r\n toggleCollapse = () => {\r\n if (this.collapsable()) {\r\n this.collapsed.set(!this.collapsed());\r\n } else {\r\n if (this.collapsed()) {\r\n this.collapsed.set(false);\r\n }\r\n }\r\n };\r\n}\r\n","@let _hideHeader = hideHeader();\r\n@let _collapsable = collapsable();\r\n@let _collapsed = collapsed();\r\n@let _title = title();\r\n@let _subTitle = subTitle();\r\n@let _iconColor = iconColor();\r\n<div class=\"rounded-8 bg-white\" [class.c-shadow-section]=\"!_collapsed\">\r\n @if (!_hideHeader) {\r\n <div\r\n class=\"d-flex align-items-center justify-content-between w-full px-16 py-8 cursor-pointer\"\r\n (click)=\"toggleCollapse()\"\r\n aria-hidden=\"true\">\r\n <div class=\"d-flex align-items-center\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n @if (icon()) {\r\n <span\r\n class=\"mr-8 material-icons-outlined\"\r\n [class.text-primary]=\"_iconColor === 'primary'\"\r\n [class.text-secondary]=\"_iconColor === 'secondary'\"\r\n [class.text-error]=\"_iconColor === 'error'\"\r\n [class.text-warning]=\"_iconColor === 'warning'\"\r\n [class.text-success]=\"_iconColor === 'success'\">\r\n {{ icon() }}\r\n </span>\r\n }\r\n <div>\r\n @if (_title) {\r\n <div class=\"T16M\">{{ _title }}</div>\r\n }\r\n @if (_subTitle) {\r\n <div class=\"T12R text-secondary\">{{ _subTitle }}</div>\r\n }\r\n </div>\r\n </ng-content>\r\n </div>\r\n <div class=\"d-flex\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (_collapsable) {\r\n <div class=\"d-flex align-items-center\">\r\n @if (_collapsed) {\r\n <mat-icon>expand_more</mat-icon>\r\n } @else {\r\n <mat-icon>expand_less</mat-icon>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (!_collapsed || _hideHeader) {\r\n <!-- Nếu header bị ẩn thì không cần border top -->\r\n <div [class.p-16]=\"!noPaddingBody()\" [class.c-no-padding-body]=\"noPaddingBody()\" [style.border-top]=\"_hideHeader ? 'none' : '1px solid #e6e6e6'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n","import { Component, input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sd-section-item',\r\n templateUrl: './section-item.component.html',\r\n styleUrls: ['section-item.component.scss'],\r\n standalone: true,\r\n})\r\nexport class SdSectionItem {\r\n label = input.required<string>();\r\n labelWidth = input<string, string | null | undefined>('150px', {\r\n transform: (val: any): string => {\r\n return val || '150px';\r\n },\r\n });\r\n}\r\n","<div class=\"c-item\">\r\n <div class=\"T14R text-black400\" [style.width]=\"labelWidth()\">{{ label() }}</div>\r\n <div style=\"flex: 1;\"><ng-content></ng-content></div>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;AAYM,MAAO,SAAU,SAAQ,qBAAqB,CAAA;AAClD,IAAA,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC;AAExB,IAAA,KAAK,GAAG,KAAK,CAA4B,SAAS,CAAC;AACnD,IAAA,QAAQ,GAAG,KAAK,CAA4B,SAAS,CAAC;AACtD,IAAA,IAAI,GAAG,KAAK,CAA4B,SAAS,CAAC;IAClD,SAAS,GAAG,KAAK,CAAU,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAE7D,SAAS,GAAG,KAAK,CAAU,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IACzD,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC3D,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC1D,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE7D,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YACjD;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC;aAAO;AACL,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B;QACF;AACF,IAAA,CAAC;wGA9BU,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZtB,6oEAwDA,EAAA,MAAA,EAAA,CAAA,4OAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED9CY,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAEZ,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EAGb,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,6oEAAA,EAAA,MAAA,EAAA,CAAA,4OAAA,CAAA,EAAA;;;MEFb,aAAa,CAAA;AACxB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAU;AAChC,IAAA,UAAU,GAAG,KAAK,CAAoC,OAAO,EAAE;AAC7D,QAAA,SAAS,EAAE,CAAC,GAAQ,KAAY;YAC9B,OAAO,GAAG,IAAI,OAAO;QACvB,CAAC;AACF,KAAA,CAAC;wGANS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,qVCR1B,yLAGM,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA,CAAA;;4FDKO,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,cAGf,IAAI,EAAA,QAAA,EAAA,yLAAA,EAAA,MAAA,EAAA,CAAA,8JAAA,CAAA,EAAA;;;AENlB;;AAEG;;;;"}
|
|
@@ -108,11 +108,11 @@ class SdSideDrawer extends SdBaseSecureComponent {
|
|
|
108
108
|
this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
|
|
109
109
|
}
|
|
110
110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"
|
|
111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, drawerClass: { classPropertyName: "drawerClass", publicName: "drawerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"sd-side-drawer-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
112
112
|
}
|
|
113
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, decorators: [{
|
|
114
114
|
type: Component,
|
|
115
|
-
args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"
|
|
115
|
+
args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PortalModule], template: "<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"sd-side-drawer-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n", styles: [".sd-side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.sd-side-drawer-active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.sd-side-drawer-header{min-height:64px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.sd-side-drawer-header-actions{display:flex;align-items:center;gap:8px}.sd-side-drawer-title{font-size:20px;line-height:28px;font-weight:500;flex:1;margin-right:16px}.sd-side-drawer-close-btn{background:transparent;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sd-secondary-color, #666);border-radius:50%;transition:background-color .2s,color .2s}.sd-side-drawer-close-btn:hover{background-color:#0000000a;color:var(--sd-primary-color, #333)}.sd-side-drawer-close-btn:focus{outline:none;background-color:#00000014}.sd-side-drawer-body{flex:1;position:relative}.sd-side-drawer-content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.sd-side-drawer-footer{border-top:1px solid #dde0e5;padding:8px}.sd-side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}\n"] }]
|
|
116
116
|
}], ctorParameters: () => [] });
|
|
117
117
|
|
|
118
118
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-side-drawer.mjs","sources":["../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sd-angular/components/side-drawer/sd-angular-core-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n ApplicationRef,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n DestroyRef,\r\n EmbeddedViewRef,\r\n Injector,\r\n ViewContainerRef,\r\n afterNextRender,\r\n booleanAttribute,\r\n inject,\r\n input,\r\n output,\r\n viewChild\r\n} from '@angular/core';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\r\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\r\n\r\n@Component({\r\n selector: 'sd-side-drawer',\r\n templateUrl: './side-drawer.component.html',\r\n styleUrls: ['./side-drawer.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, PortalModule],\r\n})\r\nexport class SdSideDrawer extends SdBaseSecureComponent {\r\n id = `I${uuid.v4()}`;\r\n \r\n portal = viewChild.required(CdkPortal);\r\n \r\n title = input<string>('');\r\n width = input<string>('480px');\r\n hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n disableBackdropClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n\r\n // Custom CSS class added to the root side-drawer container \r\n drawerClass = input<any>('');\r\n\r\n sdClosed = output<void>();\r\n\r\n #embeddedViewRef!: EmbeddedViewRef<any>;\r\n isOpened = false;\r\n isLoading = false;\r\n isHovered$!: Observable<boolean>;\r\n #destroy$ = new Subject<void>();\r\n #previousBodyOverflow: string | null = null;\r\n\r\n #viewContainerRef = inject(ViewContainerRef);\r\n #ar = inject(ApplicationRef);\r\n #injector = inject(Injector);\r\n #ref = inject(ChangeDetectorRef);\r\n #loadingService = inject(SdLoadingService);\r\n #destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n super();\r\n\r\n // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\r\n afterNextRender(() => {\r\n // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\r\n const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\r\n this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n \r\n // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\r\n this.#setupHoverSubscription();\r\n });\r\n\r\n // Thay thế ngOnDestroy bằng logic destroy trực tiếp \r\n this.#destroyRef.onDestroy(() => {\r\n this.#destroy$.next();\r\n this.#destroy$.complete();\r\n \r\n if (this.#embeddedViewRef) {\r\n this.#embeddedViewRef.destroy();\r\n }\r\n \r\n if (this.isOpened) {\r\n if (this.#previousBodyOverflow !== null) {\r\n document.body.style.overflow = this.#previousBodyOverflow;\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n });\r\n }\r\n\r\n open = () => {\r\n this.#ref.markForCheck();\r\n this.isOpened = true;\r\n \r\n // Chặn scroll ở document body\r\n this.#previousBodyOverflow = document.body.style.overflow;\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n close = () => {\r\n this.#ref.markForCheck();\r\n this.isOpened = false;\r\n this.sdClosed.emit();\r\n this.stopLoading();\r\n \r\n // Khôi phục lại scroll ở document body\r\n if (this.#previousBodyOverflow !== null) {\r\n document.body.style.overflow = this.#previousBodyOverflow;\r\n this.#previousBodyOverflow = null;\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n };\r\n\r\n startLoading = () => {\r\n this.isLoading = true;\r\n this.#loadingService.stop(`#${this.id}`);\r\n this.#loadingService.start(`#${this.id}`);\r\n };\r\n\r\n stopLoading = () => {\r\n this.isLoading = false;\r\n this.#loadingService.stop(`#${this.id}`);\r\n };\r\n\r\n preventScroll = (event: Event) => {\r\n event.preventDefault();\r\n };\r\n\r\n #setupHoverSubscription(): void {\r\n if (!this.#embeddedViewRef) return;\r\n\r\n // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\r\n const rootNodes = this.#embeddedViewRef.rootNodes;\r\n const element = rootNodes.find(\r\n (node) => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\r\n );\r\n\r\n if (!element) {\r\n console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\r\n return;\r\n }\r\n\r\n // 4. Gắn event listeners trực tiếp lên element thật\r\n const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\r\n const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\r\n\r\n this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(\r\n startWith(false),\r\n distinctUntilChanged(),\r\n takeUntil(this.#destroy$)\r\n );\r\n }\r\n}","<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"c-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCM,MAAO,YAAa,SAAQ,qBAAqB,CAAA;AACrD,IAAA,EAAE,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,EAAE,EAAE;AAEpB,IAAA,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;AAEtC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AACzB,IAAA,KAAK,GAAG,KAAK,CAAS,OAAO,CAAC;IAC9B,SAAS,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAChF,oBAAoB,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;AAG3F,IAAA,WAAW,GAAG,KAAK,CAAM,EAAE,CAAC;IAE5B,QAAQ,GAAG,MAAM,EAAQ;AAEzB,IAAA,gBAAgB;IAChB,QAAQ,GAAG,KAAK;IAChB,SAAS,GAAG,KAAK;AACjB,IAAA,UAAU;AACV,IAAA,SAAS,GAAG,IAAI,OAAO,EAAQ;IAC/B,qBAAqB,GAAkB,IAAI;AAE3C,IAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC5C,IAAA,GAAG,GAAG,MAAM,CAAC,cAAc,CAAC;AAC5B,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAEhC,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;QAGP,eAAe,CAAC,MAAK;;YAEnB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;AACnG,YAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;;YAGlE,IAAI,CAAC,uBAAuB,EAAE;AAChC,QAAA,CAAC,CAAC;;AAGF,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;AAEzB,YAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACjC;AAEA,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE;oBACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB;gBAC3D;qBAAO;oBACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;gBACnC;YACF;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;QAGpB,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACzD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;AACzC,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QACpB,IAAI,CAAC,WAAW,EAAE;;AAGlB,QAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,IAAI,EAAE;YACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB;AACzD,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;QACnC;aAAO;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;QACnC;AACF,IAAA,CAAC;IAED,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;QACxC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC3C,IAAA,CAAC;IAED,WAAW,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC1C,IAAA,CAAC;AAED,IAAA,aAAa,GAAG,CAAC,KAAY,KAAI;QAC/B,KAAK,CAAC,cAAc,EAAE;AACxB,IAAA,CAAC;IAED,uBAAuB,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE;;AAG5B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS;AACjD,QAAA,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAC5B,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAK,IAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAC7G;QAED,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,IAAI,CAAC,wEAAwE,CAAC;YACtF;QACF;;AAGA,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAC1E,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;QAE3E,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,IAAI,CACpD,SAAS,CAAC,KAAK,CAAC,EAChB,oBAAoB,EAAE,EACtB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B;IACH;wGA3HW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,o0BAGK,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCvC,siEA0DA,EAAA,MAAA,EAAA,CAAA,65CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED5BY,YAAY,iNAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAEzB,YAAY,EAAA,UAAA,EAAA,CAAA;kBARxB,SAAS;+BACE,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,siEAAA,EAAA,MAAA,EAAA,CAAA,65CAAA,CAAA,EAAA;;;AE9BvC;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-side-drawer.mjs","sources":["../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.ts","../../../projects/sd-angular/components/side-drawer/src/side-drawer.component.html","../../../projects/sd-angular/components/side-drawer/sd-angular-core-components-side-drawer.ts"],"sourcesContent":["import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport {\r\n ApplicationRef,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n DestroyRef,\r\n EmbeddedViewRef,\r\n Injector,\r\n ViewContainerRef,\r\n afterNextRender,\r\n booleanAttribute,\r\n inject,\r\n input,\r\n output,\r\n viewChild\r\n} from '@angular/core';\r\nimport { SdBaseSecureComponent } from '@sd-angular/core/components/base';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\r\nimport { map, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';\r\n\r\n@Component({\r\n selector: 'sd-side-drawer',\r\n templateUrl: './side-drawer.component.html',\r\n styleUrls: ['./side-drawer.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, PortalModule],\r\n})\r\nexport class SdSideDrawer extends SdBaseSecureComponent {\r\n id = `I${uuid.v4()}`;\r\n \r\n portal = viewChild.required(CdkPortal);\r\n \r\n title = input<string>('');\r\n width = input<string>('480px');\r\n hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n disableBackdropClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n\r\n // Custom CSS class added to the root side-drawer container \r\n drawerClass = input<any>('');\r\n\r\n sdClosed = output<void>();\r\n\r\n #embeddedViewRef!: EmbeddedViewRef<any>;\r\n isOpened = false;\r\n isLoading = false;\r\n isHovered$!: Observable<boolean>;\r\n #destroy$ = new Subject<void>();\r\n #previousBodyOverflow: string | null = null;\r\n\r\n #viewContainerRef = inject(ViewContainerRef);\r\n #ar = inject(ApplicationRef);\r\n #injector = inject(Injector);\r\n #ref = inject(ChangeDetectorRef);\r\n #loadingService = inject(SdLoadingService);\r\n #destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n super();\r\n\r\n // Thay thế ngAfterViewInit, tự động chạy nội dung này khi DOM sẵn sàng để render\r\n afterNextRender(() => {\r\n // 1. Gắn portal vào body và lưu lại EmbeddedViewRef\r\n const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\r\n this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n \r\n // 2. Setup sự kiện hover ngay sau khi DOM thật đã được in ra\r\n this.#setupHoverSubscription();\r\n });\r\n\r\n // Thay thế ngOnDestroy bằng logic destroy trực tiếp \r\n this.#destroyRef.onDestroy(() => {\r\n this.#destroy$.next();\r\n this.#destroy$.complete();\r\n \r\n if (this.#embeddedViewRef) {\r\n this.#embeddedViewRef.destroy();\r\n }\r\n \r\n if (this.isOpened) {\r\n if (this.#previousBodyOverflow !== null) {\r\n document.body.style.overflow = this.#previousBodyOverflow;\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n });\r\n }\r\n\r\n open = () => {\r\n this.#ref.markForCheck();\r\n this.isOpened = true;\r\n \r\n // Chặn scroll ở document body\r\n this.#previousBodyOverflow = document.body.style.overflow;\r\n document.body.style.overflow = 'hidden';\r\n };\r\n\r\n close = () => {\r\n this.#ref.markForCheck();\r\n this.isOpened = false;\r\n this.sdClosed.emit();\r\n this.stopLoading();\r\n \r\n // Khôi phục lại scroll ở document body\r\n if (this.#previousBodyOverflow !== null) {\r\n document.body.style.overflow = this.#previousBodyOverflow;\r\n this.#previousBodyOverflow = null;\r\n } else {\r\n document.body.style.overflow = '';\r\n }\r\n };\r\n\r\n startLoading = () => {\r\n this.isLoading = true;\r\n this.#loadingService.stop(`#${this.id}`);\r\n this.#loadingService.start(`#${this.id}`);\r\n };\r\n\r\n stopLoading = () => {\r\n this.isLoading = false;\r\n this.#loadingService.stop(`#${this.id}`);\r\n };\r\n\r\n preventScroll = (event: Event) => {\r\n event.preventDefault();\r\n };\r\n\r\n #setupHoverSubscription(): void {\r\n if (!this.#embeddedViewRef) return;\r\n\r\n // 3. Lấy DOM element trực tiếp từ rootNodes của EmbeddedViewRef\r\n const rootNodes = this.#embeddedViewRef.rootNodes;\r\n const element = rootNodes.find(\r\n (node) => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('sd-side-drawer')\r\n );\r\n\r\n if (!element) {\r\n console.warn('SdSideDrawer: Cannot find sd-side-drawer element to attach hover event');\r\n return;\r\n }\r\n\r\n // 4. Gắn event listeners trực tiếp lên element thật\r\n const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));\r\n const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));\r\n\r\n this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(\r\n startWith(false),\r\n distinctUntilChanged(),\r\n takeUntil(this.#destroy$)\r\n );\r\n }\r\n}","<ng-template cdkPortal>\r\n <div\r\n [id]=\"id\"\r\n class=\"sd-side-drawer\"\r\n [ngStyle]=\"{ width: width() }\"\r\n [ngClass]=\"drawerClass()\"\r\n [class.sd-side-drawer-active]=\"isOpened\"\r\n #drawerContainer>\r\n @if (isOpened) {\r\n <ng-container>\r\n <div class=\"sd-side-drawer-header\">\r\n <div class=\"sd-side-drawer-title\">\r\n <ng-content select=\"[sdHeaderLeft]\">\r\n {{ title() }}\r\n </ng-content>\r\n </div>\r\n <div class=\"sd-side-drawer-header-actions\">\r\n <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n @if (!hideClose()) {\r\n <button type=\"button\" class=\"sd-side-drawer-close-btn\" (click)=\"close()\" aria-label=\"Close\">\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n height=\"24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n fill=\"none\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n @if (isOpened) {\r\n <div class=\"sd-side-drawer-body\">\r\n <div class=\"sd-side-drawer-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"sd-side-drawer-footer\">\r\n <ng-content select=\"[sdFooter]\"></ng-content>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n @if (isOpened) {\r\n <div\r\n aria-hidden=\"true\"\r\n class=\"sd-side-drawer-backdrop\"\r\n (click)=\"disableBackdropClose() ? null : close()\"\r\n (wheel)=\"preventScroll($event)\"\r\n (touchmove)=\"preventScroll($event)\"></div>\r\n }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Directive, EventEmitter, isSignal, Output, ChangeDetectionStrategy, Component, Pipe, input, computed, InjectionToken, Inject, Optional, Injectable, HostListener, ViewChild, inject, ChangeDetectorRef, viewChild, signal,
|
|
2
|
+
import { Input, Directive, EventEmitter, isSignal, Output, ChangeDetectionStrategy, Component, Pipe, input, computed, InjectionToken, Inject, Optional, Injectable, HostListener, ViewChild, inject, ChangeDetectorRef, viewChild, signal, effect, ElementRef, DestroyRef, afterNextRender, contentChild, contentChildren, untracked } from '@angular/core';
|
|
3
3
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
4
4
|
import * as i4$2 from '@angular/material/paginator';
|
|
5
5
|
import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
@@ -844,7 +844,8 @@ class SdDesktopCellView {
|
|
|
844
844
|
return data?.id?.toString() || data?.code?.toString() || data?.value?.toString();
|
|
845
845
|
});
|
|
846
846
|
constructor() {
|
|
847
|
-
|
|
847
|
+
effect(() => {
|
|
848
|
+
this.charLimited();
|
|
848
849
|
const container = this.contentContainer();
|
|
849
850
|
if (container) {
|
|
850
851
|
this.#checkOverflow(container.nativeElement);
|
|
@@ -865,11 +866,11 @@ class SdDesktopCellView {
|
|
|
865
866
|
this.isCollapsed.update(current => !current);
|
|
866
867
|
};
|
|
867
868
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
868
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div
|
|
869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div\r\n #contentContainer\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n <a [attr.data-autoId]=\"autoId\" href=\"javascript:;\" (click)=\"view.click()\">\r\n {{ view.data }}\r\n </a>\r\n </div>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"isCollapsed()\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n {{ view.data }}\r\n </div>\r\n\r\n <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\r\n {{ view.data }}\r\n </div>\r\n }\r\n <!-- End -->\r\n }\r\n }\r\n }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "pipe", type: ToStringPipe, name: "asString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
869
870
|
}
|
|
870
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, decorators: [{
|
|
871
872
|
type: Component,
|
|
872
|
-
args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div
|
|
873
|
+
args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip || ''\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div\r\n #contentContainer\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n <a [attr.data-autoId]=\"autoId\" href=\"javascript:;\" (click)=\"view.click()\">\r\n {{ view.data }}\r\n </a>\r\n </div>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"isCollapsed()\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n {{ view.data }}\r\n </div>\r\n\r\n <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || ''\">\r\n {{ view.data }}\r\n </div>\r\n }\r\n <!-- End -->\r\n }\r\n }\r\n }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"] }]
|
|
873
874
|
}], ctorParameters: () => [] });
|
|
874
875
|
|
|
875
876
|
class SdDesktopCell {
|
|
@@ -895,7 +896,8 @@ class SdDesktopCell {
|
|
|
895
896
|
isCollapsed = signal(true);
|
|
896
897
|
isOverflowing = signal(false);
|
|
897
898
|
constructor() {
|
|
898
|
-
|
|
899
|
+
effect(() => {
|
|
900
|
+
this.charLimited();
|
|
899
901
|
const container = this.contentContainer();
|
|
900
902
|
if (container) {
|
|
901
903
|
this.#checkOverflow(container.nativeElement);
|