@sd-angular/core 19.0.0-beta.99 → 19.0.3

package/fesm2022/sd-angular-core-components-modal-resizable.mjs

@@ -0,0 +1,158 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, booleanAttribute, output, inject, ViewContainerRef, ApplicationRef, Injector, ChangeDetectorRef, DestroyRef, signal, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/cdk/portal';
+import { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { SdLoadingService } from '@sd-angular/core/services';
+import * as uuid from 'uuid';
+
+class SdModalResizable {
+    id = `I${uuid.v4()}`;
+    portal = viewChild.required(CdkPortal);
+    editable = input(false, { transform: booleanAttribute });
+    width = input('480px');
+    editingChanged = output();
+    #embeddedViewRef;
+    #viewContainerRef = inject(ViewContainerRef);
+    #ar = inject(ApplicationRef);
+    #injector = inject(Injector);
+    #ref = inject(ChangeDetectorRef);
+    #loadingService = inject(SdLoadingService);
+    #destroyRef = inject(DestroyRef);
+    isEditing = signal(false);
+    isOpened = signal(false);
+    isHover = signal(false);
+    isLoading = signal(false);
+    isMinimum = signal(false);
+    isMaximum = signal(false);
+    constructor() {
+        afterNextRender(() => {
+            const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);
+            this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());
+            this.#detectChanges();
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#embeddedViewRef?.destroy();
+        });
+    }
+    open = () => {
+        this.isOpened.set(true);
+        this.#detectChanges();
+        const element = this.#getElement();
+        if (element && !element.classList.contains('c-minium')) {
+            setTimeout(() => {
+                const maximumWidth = element.offsetWidth;
+                if (maximumWidth > 0) {
+                    element.dataset['width'] = maximumWidth.toString();
+                }
+                element.classList.remove('c-closed');
+            }, 100);
+        }
+        this.maximize();
+    };
+    close = () => {
+        this.isOpened.set(false);
+        this.#detectChanges();
+        setTimeout(() => {
+            const element = this.#getElement();
+            element?.style.setProperty('width', '0px');
+            element?.style.setProperty('right', '0px');
+            element?.classList.remove('c-minium');
+            element?.classList.add('c-closed');
+        }, 100);
+        this.stopLoading();
+        this.#arrangePanels();
+    };
+    minimize = () => {
+        this.isMinimum.set(true);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    maximize = () => {
+        this.isMinimum.set(false);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    toggleMaximum = () => {
+        this.isMaximum.update(isMaximum => !isMaximum);
+        this.#detectChanges();
+        this.#arrangePanels();
+    };
+    startLoading = () => {
+        this.isLoading.set(true);
+        this.#detectChanges();
+        this.#loadingService.stop(`#${this.id}`);
+        this.#loadingService.start(`#${this.id}`);
+    };
+    stopLoading = () => {
+        this.isLoading.set(false);
+        this.#detectChanges();
+        this.#loadingService.stop(`#${this.id}`);
+    };
+    toggleEditable() {
+        this.isEditing.update(isEditing => !isEditing);
+        this.#detectChanges();
+        this.editingChanged.emit(this.isEditing());
+    }
+    onFocus = () => {
+        this.isHover.set(true);
+    };
+    onBlur = () => {
+        this.isHover.set(false);
+    };
+    #arrangePanels = () => {
+        setTimeout(() => {
+            let totalRight = 0;
+            const minimumWidth = 300;
+            document.querySelectorAll('.modal-resizable').forEach(item => {
+                if (item.classList.contains('c-minium')) {
+                    item.style.setProperty('width', `${minimumWidth}px`);
+                    item.style.setProperty('right', `${totalRight}px`);
+                    totalRight += minimumWidth + 8;
+                    return;
+                }
+                if (item.classList.contains('c-closed')) {
+                    return;
+                }
+                const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);
+                if (Number.isNaN(expandedWidth)) {
+                    return;
+                }
+                if (item.classList.contains('c-fullscreen')) {
+                    item.style.setProperty('width', 'calc(100% - 16px)');
+                    item.style.setProperty('right', '8px');
+                }
+                else {
+                    item.style.setProperty('width', `${expandedWidth}px`);
+                    item.style.setProperty('right', `${totalRight}px`);
+                }
+                totalRight += expandedWidth + 8;
+            });
+        }, 200);
+    };
+    #getElement() {
+        return document.getElementById(this.id);
+    }
+    #detectChanges() {
+        this.#ref.markForCheck();
+        this.#embeddedViewRef?.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModalResizable, isStandalone: true, selector: "sd-modal-resizable", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editingChanged: "editingChanged" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"modal-resizable\"\r\n    [style.width]=\"width()\"\r\n    [class.modal-resizable--active]=\"isOpened()\"\r\n    [class.modal-resizable--loading]=\"isLoading()\"\r\n    [class.c-minium]=\"isMinimum()\"\r\n    [class.c-fullscreen]=\"isMaximum()\"\r\n    (mouseover)=\"onFocus()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseout)=\"onBlur()\"\r\n    (blur)=\"onBlur()\">\r\n    @if (isOpened()) {\r\n      <div class=\"modal-resizable__header\">\r\n        <div class=\"modal-resizable__title\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-resizable__actions\">\r\n          @if (!isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (!isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\r\n              <mat-icon>open_in_full</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\r\n              <mat-icon>fullscreen_exit</mat-icon>\r\n            </button>\r\n          }\r\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__body\">\r\n        <div class=\"modal-resizable__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\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}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon .mat-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModalResizable, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-modal-resizable', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"modal-resizable\"\r\n    [style.width]=\"width()\"\r\n    [class.modal-resizable--active]=\"isOpened()\"\r\n    [class.modal-resizable--loading]=\"isLoading()\"\r\n    [class.c-minium]=\"isMinimum()\"\r\n    [class.c-fullscreen]=\"isMaximum()\"\r\n    (mouseover)=\"onFocus()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseout)=\"onBlur()\"\r\n    (blur)=\"onBlur()\">\r\n    @if (isOpened()) {\r\n      <div class=\"modal-resizable__header\">\r\n        <div class=\"modal-resizable__title\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-resizable__actions\">\r\n          @if (!isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nh\u1ECF\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Ph\u00F3ng to\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (!isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"To\u00E0n m\u00E0n h\u00ECnh\">\r\n              <mat-icon>open_in_full</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Tho\u00E1t to\u00E0n m\u00E0n h\u00ECnh\">\r\n              <mat-icon>fullscreen_exit</mat-icon>\r\n            </button>\r\n          }\r\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"\u0110\u00F3ng\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__body\">\r\n        <div class=\"modal-resizable__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\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}.modal-resizable{position:fixed;right:12px;top:80px;bottom:0;background-color:#fff;z-index:998;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(0,100%,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003;border-radius:4px 4px 0 0}.modal-resizable button.c-action--white:focus{outline:none!important}.modal-resizable.c-minium-of-list{top:auto;bottom:0;opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable.c-minium{top:auto!important;z-index:998!important}.modal-resizable.c-minium .modal-resizable__body,.modal-resizable.c-minium .modal-resizable__footer{display:none}.modal-resizable.c-fullscreen{top:0;z-index:999}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.c-action--white.c-min{margin-bottom:-12px}.c-action--white.c-max{margin-top:-12px}.modal-resizable__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.modal-resizable__icon .mat-icon{float:left}.modal-resizable__header{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-height:40px;padding:0 16px;background-color:#5d6165;border-radius:4px 4px 0 0}.modal-resizable__body{flex:1;position:relative}.modal-resizable__content{position:absolute;padding:8px 16px 16px;inset:0;overflow:auto}.modal-resizable__footer{border-top:1px solid #dde0e5;padding:5px 0}.modal-resizable--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.modal-resizable__title{flex:1 1 0;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-resizable__actions{display:flex;align-items:center;flex:0 0 auto;gap:4px;margin-left:auto}.modal-resizable__actions .c-action--white{flex:0 0 auto;width:32px;height:32px;line-height:32px}.modal-resizable__actions .c-action--white.c-min,.modal-resizable__actions .c-action--white.c-max{margin:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdModalResizable };
+//# sourceMappingURL=sd-angular-core-components-modal-resizable.mjs.map

package/fesm2022/sd-angular-core-components-modal-resizable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-modal-resizable.mjs","sources":["../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sd-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sd-angular/components/modal-resizable/sd-angular-core-components-modal-resizable.ts"],"sourcesContent":["import {\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  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdLoadingService } from '@sd-angular/core/services';\r\nimport * as uuid from 'uuid';\r\n\r\n@Component({\r\n  selector: 'sd-modal-resizable',\r\n  templateUrl: './modal-resizable.component.html',\r\n  styleUrls: ['./modal-resizable.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule],\r\n})\r\nexport class SdModalResizable {\r\n  readonly id = `I${uuid.v4()}`;\r\n  readonly portal = viewChild.required(CdkPortal);\r\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  readonly width = input<string>('480px');\r\n  readonly editingChanged = output<boolean>();\r\n  #embeddedViewRef!: EmbeddedViewRef<any>;\r\n  readonly #viewContainerRef = inject(ViewContainerRef);\r\n  readonly #ar = inject(ApplicationRef);\r\n  readonly #injector = inject(Injector);\r\n  readonly #ref = inject(ChangeDetectorRef);\r\n  readonly #loadingService = inject(SdLoadingService);\r\n  readonly #destroyRef = inject(DestroyRef);\r\n  readonly isEditing = signal(false);\r\n  readonly isOpened = signal(false);\r\n  readonly isHover = signal(false);\r\n  readonly isLoading = signal(false);\r\n  readonly isMinimum = signal(false);\r\n  readonly isMaximum = signal(false);\r\n\r\n  constructor() {\r\n    afterNextRender(() => {\r\n      const outlet = new DomPortalOutlet(document.body, this.#viewContainerRef, this.#ar, this.#injector);\r\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\r\n      this.#detectChanges();\r\n    });\r\n\r\n    this.#destroyRef.onDestroy(() => {\r\n      this.#embeddedViewRef?.destroy();\r\n    });\r\n  }\r\n\r\n  open = () => {\r\n    this.isOpened.set(true);\r\n    this.#detectChanges();\r\n\r\n    const element = this.#getElement();\r\n    if (element && !element.classList.contains('c-minium')) {\r\n      setTimeout(() => {\r\n        const maximumWidth = element.offsetWidth;\r\n        if (maximumWidth > 0) {\r\n          element.dataset['width'] = maximumWidth.toString();\r\n        }\r\n        element.classList.remove('c-closed');\r\n      }, 100);\r\n    }\r\n\r\n    this.maximize();\r\n  };\r\n\r\n  close = () => {\r\n    this.isOpened.set(false);\r\n    this.#detectChanges();\r\n    setTimeout(() => {\r\n      const element = this.#getElement();\r\n      element?.style.setProperty('width', '0px');\r\n      element?.style.setProperty('right', '0px');\r\n      element?.classList.remove('c-minium');\r\n      element?.classList.add('c-closed');\r\n    }, 100);\r\n    this.stopLoading();\r\n\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  minimize = () => {\r\n    this.isMinimum.set(true);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  maximize = () => {\r\n    this.isMinimum.set(false);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  toggleMaximum = () => {\r\n    this.isMaximum.update(isMaximum => !isMaximum);\r\n    this.#detectChanges();\r\n    this.#arrangePanels();\r\n  };\r\n\r\n  startLoading = () => {\r\n    this.isLoading.set(true);\r\n    this.#detectChanges();\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.set(false);\r\n    this.#detectChanges();\r\n    this.#loadingService.stop(`#${this.id}`);\r\n  };\r\n\r\n  toggleEditable() {\r\n    this.isEditing.update(isEditing => !isEditing);\r\n    this.#detectChanges();\r\n    this.editingChanged.emit(this.isEditing());\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isHover.set(true);\r\n  };\r\n\r\n  onBlur = () => {\r\n    this.isHover.set(false);\r\n  };\r\n\r\n  #arrangePanels = () => {\r\n    setTimeout(() => {\r\n      let totalRight = 0;\r\n      const minimumWidth = 300;\r\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\r\n        if (item.classList.contains('c-minium')) {\r\n          item.style.setProperty('width', `${minimumWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n          totalRight += minimumWidth + 8;\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-closed')) {\r\n          return;\r\n        }\r\n\r\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\r\n        if (Number.isNaN(expandedWidth)) {\r\n          return;\r\n        }\r\n\r\n        if (item.classList.contains('c-fullscreen')) {\r\n          item.style.setProperty('width', 'calc(100% - 16px)');\r\n          item.style.setProperty('right', '8px');\r\n        } else {\r\n          item.style.setProperty('width', `${expandedWidth}px`);\r\n          item.style.setProperty('right', `${totalRight}px`);\r\n        }\r\n        totalRight += expandedWidth + 8;\r\n      });\r\n    }, 200);\r\n  };\r\n\r\n  #getElement() {\r\n    return document.getElementById(this.id);\r\n  }\r\n\r\n  #detectChanges() {\r\n    this.#ref.markForCheck();\r\n    this.#embeddedViewRef?.detectChanges();\r\n  }\r\n}\r\n","<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"modal-resizable\"\r\n    [style.width]=\"width()\"\r\n    [class.modal-resizable--active]=\"isOpened()\"\r\n    [class.modal-resizable--loading]=\"isLoading()\"\r\n    [class.c-minium]=\"isMinimum()\"\r\n    [class.c-fullscreen]=\"isMaximum()\"\r\n    (mouseover)=\"onFocus()\"\r\n    (focus)=\"onFocus()\"\r\n    (mouseout)=\"onBlur()\"\r\n    (blur)=\"onBlur()\">\r\n    @if (isOpened()) {\r\n      <div class=\"modal-resizable__header\">\r\n        <div class=\"modal-resizable__title\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <div class=\"modal-resizable__actions\">\r\n          @if (!isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMinimum()) {\r\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\r\n              <mat-icon>remove</mat-icon>\r\n            </button>\r\n          }\r\n          @if (!isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\r\n              <mat-icon>open_in_full</mat-icon>\r\n            </button>\r\n          }\r\n          @if (isMaximum()) {\r\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\r\n              <mat-icon>fullscreen_exit</mat-icon>\r\n            </button>\r\n          }\r\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__body\">\r\n        <div class=\"modal-resizable__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"modal-resizable__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    }\r\n  </div>\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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"}

package/fesm2022/sd-angular-core-components-modal.mjs

@@ -8,7 +8,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { SdUtilities } from '@sd-angular/core/utilities';
+import { BrowserUtilities } from '@sdcorejs/utils/fns';
 
 class SdModal {
     static index = signal(0);
@@ -40,7 +40,7 @@ class SdModal {
     #bottomSheet = inject(MatBottomSheet);
     #destroyRef = inject(DestroyRef);
     constructor() {
-        this.#isMobile = SdUtilities.isMobile();
+        this.#isMobile = BrowserUtilities.isMobile();
     }
     #resolveWidth() {
         const w = this.width() || '80vw';

package/fesm2022/sd-angular-core-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  TemplateRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdUtilities } from '@sd-angular/core/utilities';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\n\r\n@Component({\r\n  selector: 'sd-modal',\r\n  templateUrl: './modal.component.html',\r\n  styleUrls: ['./modal.component.scss'],\r\n  // encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\r\n})\r\nexport class SdModal {\r\n  static index = signal(0);\r\n\r\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\r\n  modal = viewChild<ElementRef>('modal');\r\n\r\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\r\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\r\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\r\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\r\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\r\n\r\n  title = input<string, string | null | undefined>('', { transform: (v) => v ?? '' });\r\n  color = input<SdColor, SdColor | null | undefined>('primary', { transform: (v) => v ?? 'primary' });\r\n  width = input<SdSize | string, SdSize | string | null | undefined>('md', { transform: (v) => v ?? 'md' });\r\n  height = input<string, string | null | undefined>('auto', { transform: (v) => v ?? 'auto' });\r\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, { transform: (v) => v ?? undefined });\r\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', { transform: (v) => v ?? '' });\r\n  lazyLoadContent = input(true, { transform: booleanAttribute });\r\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\r\n\r\n  sdClosed = output<void>();\r\n\r\n  isOpened = signal(false);\r\n  alreadyOpened = signal(false);\r\n\r\n  #isMobile = false;\r\n  #resolvedWidth = 'md';\r\n  #bottomSheetRef!: MatBottomSheetRef<any>;\r\n  #dialogRef!: MatDialogRef<any>;\r\n\r\n  #dialog = inject(MatDialog);\r\n  #bottomSheet = inject(MatBottomSheet);\r\n  #destroyRef = inject(DestroyRef);\r\n\r\n  constructor() {\r\n    this.#isMobile = SdUtilities.isMobile();\r\n  }\r\n\r\n  #resolveWidth(): string {\r\n    const w = this.width() || '80vw';\r\n    if (this.#isMobile) return w;\r\n    switch (w) {\r\n      case 'lg': return '80vw';\r\n      case 'md': return '60vw';\r\n      case 'sm': return '40vw';\r\n      case 'sx': return '20vw';\r\n      default: return w;\r\n    }\r\n  }\r\n\r\n  open = (): void => {\r\n    if (this.isOpened()) {\r\n      return;\r\n    }\r\n    this.alreadyOpened.set(true);\r\n    this.isOpened.set(true);\r\n    this.#resolvedWidth = this.#resolveWidth();\r\n\r\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\r\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\r\n        panelClass: this.modalClass() as string | string[],\r\n        disableClose: this.disableBackdropClose()\r\n      });\r\n      this.#bottomSheetRef.afterDismissed()\r\n        .pipe(takeUntilDestroyed(this.#destroyRef))\r\n        .subscribe(() => {\r\n          this.isOpened.set(false);\r\n          this.sdClosed.emit();\r\n        });\r\n    } else {\r\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\r\n        width: this.#resolvedWidth,\r\n        maxWidth: this.#resolvedWidth,\r\n        panelClass: this.modalClass() as string | string[],\r\n        disableClose: this.disableBackdropClose(),\r\n      });\r\n      this.#dialogRef.afterClosed()\r\n        .pipe(takeUntilDestroyed(this.#destroyRef))\r\n        .subscribe(() => {\r\n          this.isOpened.set(false);\r\n          this.sdClosed.emit();\r\n        });\r\n    }\r\n  };\r\n\r\n  close = (): void => {\r\n    this.#bottomSheetRef?.dismiss();\r\n    this.#dialogRef?.close();\r\n  };\r\n}\r\n","<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- Dùng scss thuần -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\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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"}
+{"version":3,"file":"sd-angular-core-components-modal.mjs","sources":["../../../projects/sd-angular/components/modal/src/modal.component.ts","../../../projects/sd-angular/components/modal/src/modal.component.html","../../../projects/sd-angular/components/modal/sd-angular-core-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  TemplateRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  viewChild\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\r\nimport { Color, Size } from '@sdcorejs/utils/models';\r\n\r\n@Component({\r\n  selector: 'sd-modal',\r\n  templateUrl: './modal.component.html',\r\n  styleUrls: ['./modal.component.scss'],\r\n  // encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\r\n})\r\nexport class SdModal {\r\n  static index = signal(0);\r\n\r\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\r\n  modal = viewChild<ElementRef>('modal');\r\n\r\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\r\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\r\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\r\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\r\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\r\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\r\n\r\n  title = input<string, string | null | undefined>('', { transform: (v) => v ?? '' });\r\n  color = input<Color, Color | null | undefined>('primary', { transform: (v) => v ?? 'primary' });\r\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: (v) => v ?? 'md' });\r\n  height = input<string, string | null | undefined>('auto', { transform: (v) => v ?? 'auto' });\r\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, { transform: (v) => v ?? undefined });\r\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', { transform: (v) => v ?? '' });\r\n  lazyLoadContent = input(true, { transform: booleanAttribute });\r\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\r\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\r\n\r\n  sdClosed = output<void>();\r\n\r\n  isOpened = signal(false);\r\n  alreadyOpened = signal(false);\r\n\r\n  #isMobile = false;\r\n  #resolvedWidth = 'md';\r\n  #bottomSheetRef!: MatBottomSheetRef<any>;\r\n  #dialogRef!: MatDialogRef<any>;\r\n\r\n  #dialog = inject(MatDialog);\r\n  #bottomSheet = inject(MatBottomSheet);\r\n  #destroyRef = inject(DestroyRef);\r\n\r\n  constructor() {\r\n    this.#isMobile = BrowserUtilities.isMobile();\r\n  }\r\n\r\n  #resolveWidth(): string {\r\n    const w = this.width() || '80vw';\r\n    if (this.#isMobile) return w;\r\n    switch (w) {\r\n      case 'lg': return '80vw';\r\n      case 'md': return '60vw';\r\n      case 'sm': return '40vw';\r\n      case 'sx': return '20vw';\r\n      default: return w;\r\n    }\r\n  }\r\n\r\n  open = (): void => {\r\n    if (this.isOpened()) {\r\n      return;\r\n    }\r\n    this.alreadyOpened.set(true);\r\n    this.isOpened.set(true);\r\n    this.#resolvedWidth = this.#resolveWidth();\r\n\r\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\r\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\r\n        panelClass: this.modalClass() as string | string[],\r\n        disableClose: this.disableBackdropClose()\r\n      });\r\n      this.#bottomSheetRef.afterDismissed()\r\n        .pipe(takeUntilDestroyed(this.#destroyRef))\r\n        .subscribe(() => {\r\n          this.isOpened.set(false);\r\n          this.sdClosed.emit();\r\n        });\r\n    } else {\r\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\r\n        width: this.#resolvedWidth,\r\n        maxWidth: this.#resolvedWidth,\r\n        panelClass: this.modalClass() as string | string[],\r\n        disableClose: this.disableBackdropClose(),\r\n      });\r\n      this.#dialogRef.afterClosed()\r\n        .pipe(takeUntilDestroyed(this.#destroyRef))\r\n        .subscribe(() => {\r\n          this.isOpened.set(false);\r\n          this.sdClosed.emit();\r\n        });\r\n    }\r\n  };\r\n\r\n  close = (): void => {\r\n    this.#bottomSheetRef?.dismiss();\r\n    this.#dialogRef?.close();\r\n  };\r\n}\r\n","<ng-template #templateRef>\r\n  <div class=\"sd-modal-root\"\r\n       [attr.data-autoId]=\"autoId()\"\r\n       [attr.data-opened]=\"dataOpened()\">\r\n    @if (!lazyLoadContent() || alreadyOpened()) {\r\n      <!-- Header -->\r\n      <!-- Dùng scss thuần -->\r\n      @if (title()) {\r\n        <div class=\"d-flex align-items-center p-16\">\r\n          <ng-content select=\"[sdHeaderLeft]\">\r\n            <div class=\"T18M\">{{ title() }}</div>\r\n          </ng-content>\r\n          <div class=\"d-flex align-items-center ml-auto\">\r\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\r\n            <ng-content select=\"[sdHeader]\"></ng-content>\r\n            @if (!hideClose()) {\r\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <!-- Body -->\r\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- Footer -->\r\n      <!-- <mat-divider></mat-divider> -->\r\n      <div class=\"d-flex align-items-center p-8\" #footer>\r\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n        <div class=\"ml-auto\">\r\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\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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"}

package/fesm2022/sd-angular-core-components-operator.mjs

@@ -0,0 +1,77 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, computed, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
+import { OPERATORS } from '@sdcorejs/utils/constants';
+import { I18nService } from '@sd-angular/core/i18n';
+
+class SdOperator {
+    // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.
+    static FALLBACK_ICON = '<path d="M4 5h16l-6.5 7.5V19l-3 2v-8.5z"/>';
+    #i18n = inject(I18nService);
+    #sanitizer = inject(DomSanitizer);
+    /** Operator hiện tại — binding hai chiều [(model)]. */
+    model = model();
+    /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */
+    operators = input([]);
+    /** Vô hiệu hóa trigger (không mở được menu). */
+    disabled = input(false, { transform: booleanAttribute });
+    /** data-autoId cho e2e selector. */
+    autoId = input();
+    /** Allowed operators map sang { value, icon, display } theo thứ tự input. */
+    items = computed(() => {
+        const out = [];
+        for (const value of this.operators()) {
+            const r = this.#resolve(value);
+            if (!r)
+                continue;
+            out.push({ value, icon: this.#svg(r.icon), display: r.display });
+        }
+        return out;
+    });
+    /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */
+    currentIcon = computed(() => {
+        return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);
+    });
+    /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */
+    currentLabel = computed(() => this.#resolve(this.model())?.display ?? '');
+    // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.
+    // why: OPERATORS[].display là i18n KEY ('core.operator.*.display'), KHÔNG phải text —
+    // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.
+    #resolve(value) {
+        if (value == null)
+            return undefined;
+        const entry = OPERATORS.find((o) => o.value === value);
+        return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;
+    }
+    // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer
+    // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.
+    #svg(inner) {
+        return this.#sanitizer.bypassSecurityTrustHtml(`<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`);
+    }
+    trigger = viewChild(MatMenuTrigger);
+    /** Open the operator menu programmatically (used by the query-bar build flow). */
+    open() {
+        this.trigger()?.openMenu();
+    }
+    /** Chọn operator từ menu. */
+    select(value) {
+        this.model.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOperator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdOperator, isStandalone: true, selector: "sd-operator", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdOperator, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n", styles: [".c-op-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;color:var(--sd-primary, #0f766e);cursor:pointer;border-radius:4px}.c-op-trigger:hover:not([disabled]){background:#0000000a}.c-op-trigger[disabled]{color:#00000042;cursor:default}.c-op-icon{display:inline-flex;align-items:center}.c-op-icon svg{display:block}::ng-deep .c-op-menu .mat-mdc-menu-item-text{display:flex;align-items:center;gap:8px;width:100%}::ng-deep .c-op-menu .c-op-icon{display:inline-flex;align-items:center;flex:0 0 auto}::ng-deep .c-op-menu .c-op-icon svg{display:block}::ng-deep .c-op-menu .c-op-label{flex:1 1 auto}::ng-deep .c-op-menu .c-op-code{margin-left:auto;padding-left:16px;color:var(--sd-text-muted, #7a7a7a);font-size:11px;font-family:monospace}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdOperator };
+//# sourceMappingURL=sd-angular-core-components-operator.mjs.map

package/fesm2022/sd-angular-core-components-operator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-operator.mjs","sources":["../../../projects/sd-angular/components/operator/src/operator.component.ts","../../../projects/sd-angular/components/operator/src/operator.component.html","../../../projects/sd-angular/components/operator/sd-angular-core-components-operator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model, viewChild } from '@angular/core';\r\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { OPERATORS } from '@sdcorejs/utils/constants';\r\nimport { Operator } from '@sdcorejs/utils/models';\r\nimport { I18nService } from '@sd-angular/core/i18n';\r\n\r\ninterface OperatorItem {\r\n  value: Operator;\r\n  icon: SafeHtml;\r\n  display: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'sd-operator',\r\n  templateUrl: './operator.component.html',\r\n  styleUrls: ['./operator.component.scss'],\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [MatMenuModule, MatTooltipModule],\r\n})\r\nexport class SdOperator {\r\n  // Inner SVG markup (hình phễu) dùng khi chưa chọn operator.\r\n  static readonly FALLBACK_ICON = '<path d=\"M4 5h16l-6.5 7.5V19l-3 2v-8.5z\"/>';\r\n\r\n  readonly #i18n = inject(I18nService);\r\n  readonly #sanitizer = inject(DomSanitizer);\r\n\r\n  /** Operator hiện tại — binding hai chiều [(model)]. */\r\n  model = model<Operator | undefined>();\r\n\r\n  /** Danh sách operator cho phép, giữ nguyên thứ tự truyền vào. */\r\n  operators = input<Operator[]>([]);\r\n\r\n  /** Vô hiệu hóa trigger (không mở được menu). */\r\n  disabled = input(false, { transform: booleanAttribute });\r\n\r\n  /** data-autoId cho e2e selector. */\r\n  autoId = input<string>();\r\n\r\n  /** Allowed operators map sang { value, icon, display } theo thứ tự input. */\r\n  readonly items = computed<OperatorItem[]>(() => {\r\n    const out: OperatorItem[] = [];\r\n    for (const value of this.operators()) {\r\n      const r = this.#resolve(value);\r\n      if (!r) continue;\r\n      out.push({ value, icon: this.#svg(r.icon), display: r.display });\r\n    }\r\n    return out;\r\n  });\r\n\r\n  /** Icon SVG ở trigger — fallback phễu khi model chưa set / không tìm thấy. */\r\n  readonly currentIcon = computed<SafeHtml>(() => {\r\n    return this.#svg(this.#resolve(this.model())?.icon ?? SdOperator.FALLBACK_ICON);\r\n  });\r\n\r\n  /** Tooltip = i18n label của operator hiện tại ('' khi chưa chọn). */\r\n  readonly currentLabel = computed<string>(() => this.#resolve(this.model())?.display ?? '');\r\n\r\n  // Resolve một operator → { inner-svg, nhãn đã dịch } từ bảng OPERATORS dùng chung.\r\n  // why: OPERATORS[].display là i18n KEY ('core.operator.*.display'), KHÔNG phải text —\r\n  // phải dịch qua I18nService, nếu không UI hiện key thô (code) thay vì nhãn đã dịch.\r\n  #resolve(value: Operator | undefined): { icon: string; display: string } | undefined {\r\n    if (value == null) return undefined;\r\n    const entry = OPERATORS.find((o) => o.value === value);\r\n    return entry ? { icon: entry.icon, display: this.#i18n.t(entry.display) } : undefined;\r\n  }\r\n\r\n  // why: OPERATORS.icon là inner SVG (path/line/rect). Bọc <svg> + bypass sanitizer\r\n  // (nguồn là hằng số nội bộ, không phải input người dùng) để Angular không strip svg con.\r\n  #svg(inner: string): SafeHtml {\r\n    return this.#sanitizer.bypassSecurityTrustHtml(\r\n      `<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${inner}</svg>`,\r\n    );\r\n  }\r\n\r\n  private readonly trigger = viewChild(MatMenuTrigger);\r\n\r\n  /** Open the operator menu programmatically (used by the query-bar build flow). */\r\n  open(): void {\r\n    this.trigger()?.openMenu();\r\n  }\r\n\r\n  /** Chọn operator từ menu. */\r\n  select(value: Operator): void {\r\n    this.model.set(value);\r\n  }\r\n}\r\n","@let _current = model();\r\n\r\n<button\r\n  type=\"button\"\r\n  class=\"c-op-trigger\"\r\n  [disabled]=\"disabled()\"\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [matTooltip]=\"currentLabel()\"\r\n  matTooltipPosition=\"above\"\r\n  [attr.data-autoId]=\"autoId() ?? null\">\r\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\r\n  @for (item of items(); track item.value) {\r\n    <button\r\n      type=\"button\"\r\n      mat-menu-item\r\n      class=\"c-op-row\"\r\n      [class.c-op-active]=\"item.value === _current\"\r\n      (click)=\"select(item.value)\">\r\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\r\n      <span class=\"c-op-label\">{{ item.display }}</span>\r\n      <span class=\"c-op-code\">{{ item.value }}</span>\r\n    </button>\r\n  }\r\n</mat-menu>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}