@sdcorejs/angular 19.1.6 → 19.2.1

package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-modal-resizable.mjs","sources":["../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sdcorejs-angular/components/modal-resizable/sdcorejs-angular-components-modal-resizable.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\n\n@Component({\n  selector: 'sd-modal-resizable',\n  templateUrl: './modal-resizable.component.html',\n  styleUrl: './modal-resizable.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule],\n})\nexport class SdModalResizable {\n  readonly id = `I${Utilities.generateUuid()}`;\n  readonly portal = viewChild.required(CdkPortal);\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  readonly width = input<string>('480px');\n  readonly editingChanged = output<boolean>();\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #loadingService = inject(SdLoadingService);\n  readonly #destroyRef = inject(DestroyRef);\n  readonly isEditing = signal(false);\n  readonly isOpened = signal(false);\n  readonly isHover = signal(false);\n  readonly isLoading = signal(false);\n  readonly isMinimum = signal(false);\n  readonly isMaximum = signal(false);\n\n  constructor() {\n    afterNextRender(() => {\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\n      const outlet = new DomPortalOutlet(document.body);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n      this.#detectChanges();\n    });\n\n    this.#destroyRef.onDestroy(() => {\n      this.#embeddedViewRef?.destroy();\n    });\n  }\n\n  open = () => {\n    this.isOpened.set(true);\n    this.#detectChanges();\n\n    const element = this.#getElement();\n    if (element && !element.classList.contains('c-minium')) {\n      setTimeout(() => {\n        const maximumWidth = element.offsetWidth;\n        if (maximumWidth > 0) {\n          element.dataset['width'] = maximumWidth.toString();\n        }\n        element.classList.remove('c-closed');\n      }, 100);\n    }\n\n    this.maximize();\n  };\n\n  close = () => {\n    this.isOpened.set(false);\n    this.#detectChanges();\n    setTimeout(() => {\n      const element = this.#getElement();\n      element?.style.setProperty('width', '0px');\n      element?.style.setProperty('right', '0px');\n      element?.classList.remove('c-minium');\n      element?.classList.add('c-closed');\n    }, 100);\n    this.stopLoading();\n\n    this.#arrangePanels();\n  };\n\n  minimize = () => {\n    this.isMinimum.set(true);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  maximize = () => {\n    this.isMinimum.set(false);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  toggleMaximum = () => {\n    this.isMaximum.update(isMaximum => !isMaximum);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  startLoading = () => {\n    this.isLoading.set(true);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  stopLoading = () => {\n    this.isLoading.set(false);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  toggleEditable() {\n    this.isEditing.update(isEditing => !isEditing);\n    this.#detectChanges();\n    this.editingChanged.emit(this.isEditing());\n  }\n\n  onFocus = () => {\n    this.isHover.set(true);\n  };\n\n  onBlur = () => {\n    this.isHover.set(false);\n  };\n\n  #arrangePanels = () => {\n    setTimeout(() => {\n      let totalRight = 0;\n      const minimumWidth = 300;\n      document.querySelectorAll<HTMLElement>('.modal-resizable').forEach(item => {\n        if (item.classList.contains('c-minium')) {\n          item.style.setProperty('width', `${minimumWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n          totalRight += minimumWidth + 8;\n          return;\n        }\n\n        if (item.classList.contains('c-closed')) {\n          return;\n        }\n\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\n        if (Number.isNaN(expandedWidth)) {\n          return;\n        }\n\n        if (item.classList.contains('c-fullscreen')) {\n          item.style.setProperty('width', 'calc(100% - 16px)');\n          item.style.setProperty('right', '8px');\n        } else {\n          item.style.setProperty('width', `${expandedWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n        }\n        totalRight += expandedWidth + 8;\n      });\n    }, 200);\n  };\n\n  #getElement() {\n    return document.getElementById(this.id);\n  }\n\n  #detectChanges() {\n    this.#ref.markForCheck();\n    this.#embeddedViewRef?.detectChanges();\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;MA8Ba,gBAAgB,CAAA;AAClB,IAAA,EAAE,GAAG,CAAA,CAAA,EAAI,SAAS,CAAC,YAAY,EAAE,EAAE;AACnC,IAAA,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;IACtC,QAAQ,GAAG,KAAK,CAAwB,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAC/E,IAAA,KAAK,GAAG,KAAK,CAAS,OAAO,CAAC;IAC9B,cAAc,GAAG,MAAM,EAAW;AAC3C,IAAA,gBAAgB;AACP,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC1C,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AACxB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;AACvB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AACzB,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;AAElC,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;;;;YAInB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjD,YAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAClE,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,YAAA,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE;AAClC,QAAA,CAAC,CAAC;IACJ;IAEA,IAAI,GAAG,MAAK;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE;AAErB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACtD,UAAU,CAAC,MAAK;AACd,gBAAA,MAAM,YAAY,GAAG,OAAO,CAAC,WAAW;AACxC,gBAAA,IAAI,YAAY,GAAG,CAAC,EAAE;oBACpB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,QAAQ,EAAE;gBACpD;AACA,gBAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;YACtC,CAAC,EAAE,GAAG,CAAC;QACT;QAEA,IAAI,CAAC,QAAQ,EAAE;AACjB,IAAA,CAAC;IAED,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;QACrB,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;YAClC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;YAC1C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,YAAA,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;AACrC,YAAA,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;QACpC,CAAC,EAAE,GAAG,CAAC;QACP,IAAI,CAAC,WAAW,EAAE;QAElB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,QAAQ,GAAG,MAAK;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,QAAQ,GAAG,MAAK;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,aAAa,GAAG,MAAK;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,YAAY,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE;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,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;AAC1C,IAAA,CAAC;IAED,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;IAC5C;IAEA,OAAO,GAAG,MAAK;AACb,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,IAAA,CAAC;IAED,MAAM,GAAG,MAAK;AACZ,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;IAED,cAAc,GAAG,MAAK;QACpB,UAAU,CAAC,MAAK;YACd,IAAI,UAAU,GAAG,CAAC;YAClB,MAAM,YAAY,GAAG,GAAG;YACxB,QAAQ,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;gBACxE,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;oBACvC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,CAAC;oBACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI,CAAC;AAClD,oBAAA,UAAU,IAAI,YAAY,GAAG,CAAC;oBAC9B;gBACF;gBAEA,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;oBACvC;gBACF;AAEA,gBAAA,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;AACtE,gBAAA,IAAI,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;oBAC/B;gBACF;gBAEA,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;oBAC3C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,mBAAmB,CAAC;oBACpD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;gBACxC;qBAAO;oBACL,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,CAAC;oBACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA,EAAG,UAAU,CAAA,EAAA,CAAI,CAAC;gBACpD;AACA,gBAAA,UAAU,IAAI,aAAa,GAAG,CAAC;AACjC,YAAA,CAAC,CAAC;QACJ,CAAC,EAAE,GAAG,CAAC;AACT,IAAA,CAAC;IAED,WAAW,GAAA;QACT,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IACzC;IAEA,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxB,QAAA,IAAI,CAAC,gBAAgB,EAAE,aAAa,EAAE;IACxC;wGAtJW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEU,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChChD,q4EAwDA,EAAA,MAAA,EAAA,CAAA,08QAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5BY,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,eAAe,2IAAE,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;;4FAEnE,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,mBAGb,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP,CAAC,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,q4EAAA,EAAA,MAAA,EAAA,CAAA,08QAAA,CAAA,EAAA;;;AE5BjF;;AAEG;;;;"}
+{"version":3,"file":"sdcorejs-angular-components-modal-resizable.mjs","sources":["../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.registry.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.ts","../../../projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.html","../../../projects/sdcorejs-angular/components/modal-resizable/sdcorejs-angular-components-modal-resizable.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Injectable, inject } from '@angular/core';\n\n/**\n * Sổ đăng ký các panel `<sd-modal-resizable>` đang sống.\n *\n * why: mỗi panel được portal ra thẳng `document.body` nên việc xếp chỗ (width/right) là bài toán\n * chung của cả stack. Trước đây `#arrangePanels` quét `document.querySelectorAll('.modal-resizable')`\n * — query đó bắt MỌI phần tử mang class này trong tài liệu, kể cả markup của component khác hoặc\n * của app dùng trùng tên class, rồi ghi đè inline style lên chúng. Registry giới hạn phạm vi ghi\n * đúng vào các instance do library tạo ra và còn sống.\n */\n@Injectable({ providedIn: 'root' })\nexport class SdModalResizableRegistry {\n  // why: dùng token DOCUMENT thay vì global `document`, đồng bộ với `preview-image` — service\n  // `providedIn:'root'` có thể được khởi tạo trong quá trình render phía server.\n  readonly #document = inject(DOCUMENT);\n\n  // Set giữ nguyên thứ tự đăng ký → thứ tự xếp chỗ ổn định, khớp thứ tự panel được mở.\n  readonly #ids = new Set<string>();\n\n  register(id: string): void {\n    this.#ids.add(id);\n  }\n\n  unregister(id: string): void {\n    this.#ids.delete(id);\n  }\n\n  /**\n   * Phần tử panel của các instance đã đăng ký và đang có mặt trong DOM.\n   * Instance đã destroy hoặc chưa attach portal sẽ bị bỏ qua.\n   */\n  panels(): HTMLElement[] {\n    const elements: HTMLElement[] = [];\n    for (const id of this.#ids) {\n      const element = this.#document.getElementById(id);\n      if (element) elements.push(element);\n    }\n    return elements;\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EmbeddedViewRef,\n  afterNextRender,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { Utilities } from '@sdcorejs/utils/fns';\nimport { CdkPortal, DomPortalOutlet, PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { SdLoadingService } from '@sdcorejs/angular/services';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { SdModalResizableRegistry } from './modal-resizable.registry';\n\n/**\n * `<sd-modal-resizable>` — right-docked, non-modal panel that can be minimized, expanded or pushed\n * fullscreen. Several panels stack side by side along the right edge of the viewport, so the user\n * can keep multiple records open at once while still working with the page behind them.\n *\n * Use it for side-by-side comparison / inspector workflows. Use `<sd-modal>` when the task is\n * blocking, and `<sd-side-drawer>` when a single overlay with a backdrop is enough.\n *\n * NOTE ON DOCS: this component deliberately has **no** sibling `sd-modal-resizable.md`. Every `*.md`\n * under the library is swept into `published-docs/<version>/index.json` by `scripts/collect-docs.mjs`,\n * and `scripts/generate-showcase-example-sources.test.mjs` asserts that list is 1:1 with the\n * `publishedDocId` set in the showcase documentation registry. A published doc with no showcase page\n * therefore turns that release guard red. Keep the reference here until the component ships a\n * showcase demo + registry entry; only then add the `.md`.\n *\n * ```ts\n * import { SdModalResizable } from '@sdcorejs/angular/components/modal-resizable';\n * ```\n *\n * ```html\n * <sd-button title=\"Open detail\" type=\"fill\" color=\"primary\" (click)=\"panel.open()\"></sd-button>\n *\n * <sd-modal-resizable #panel width=\"520px\">\n *   <span sdTitle>Đơn hàng #1024</span>\n *\n *   <div sdBody class=\"panel-body\">\n *     <sd-section icon=\"receipt\" title=\"Thông tin chung\">\n *       <sd-section-item label=\"Khách hàng\">Nguyen Van An</sd-section-item>\n *     </sd-section>\n *   </div>\n *\n *   <sd-button sdFooterRight type=\"text\" title=\"Đóng\" (click)=\"panel.close()\"></sd-button>\n * </sd-modal-resizable>\n * ```\n *\n * ### Slots\n * | Selector          | Where it renders          |\n * | ----------------- | ------------------------- |\n * | `[sdTitle]`       | Header title area.        |\n * | `[sdBody]`        | Scrollable content area.  |\n * | `[sdFooterLeft]`  | Footer left action group. |\n * | `[sdFooterRight]` | Footer right action group.|\n *\n * Header, body and footer only render while the panel is open.\n *\n * ### Panel stacking\n * The panel is portalled onto `document.body` (via `CdkPortal` + `DomPortalOutlet`), so laying panels\n * out is a concern shared by all live instances rather than by a single view. Arrangement is scoped\n * through the root-provided `SdModalResizableRegistry`: each instance registers its panel id on\n * construction and unregisters it on destroy. `open`, `close`, `minimize`, `maximize` and\n * `toggleMaximum` re-run the arrangement and rewrite inline `width` / `right` **only on registered,\n * still-mounted panels**, in registration order. Consequences worth knowing:\n * - Markup of your own that happens to carry the `.modal-resizable` class is **not** touched.\n *   (Earlier builds ran `document.querySelectorAll('.modal-resizable')` and rewrote every match.)\n * - A destroyed panel immediately stops taking up a slot for the instances that outlive it.\n * - Panels marked `c-closed`, and expanded panels with no captured `data-width`, are skipped.\n *\n * ### Lifecycle / teardown\n * `open()`, `close()` and the arrangement pass each schedule a short `setTimeout` (100ms / 100ms /\n * 200ms) that mutates DOM. All of them are tracked and cleared in `DestroyRef.onDestroy`, together\n * with unregistering from the registry and destroying the portal view. Destroying the component\n * mid-animation cannot run layout work against a detached panel.\n *\n * ### Anti-patterns\n * - Rendering it inside a scroll container and expecting it to be clipped — it lives on `<body>`.\n * - Reusing the `.modal-resizable` class on your own elements to \"join\" the stack; register a real\n *   component instead.\n * - Writing inline `width` / `right` on a panel yourself — the next arrangement pass overwrites both.\n *\n * ### Tests\n * `src/modal-resizable.component.spec.ts` — portal attach, open/close/minimize/maximize math,\n * loading, editing, timer teardown, registry scoping. Run:\n * `npx ng test sdcorejs-angular --watch=false --browsers=ChromeHeadless --include='projects/sdcorejs-angular/components/modal-resizable/src/modal-resizable.component.spec.ts'`\n *\n * ### Related\n * `<sd-modal>` (blocking dialog / bottom-sheet), `<sd-side-drawer>` (single right-side overlay with\n * a body scroll lock), `SdLoadingService` (powers `startLoading()` / `stopLoading()`).\n */\n@Component({\n  selector: 'sd-modal-resizable',\n  templateUrl: './modal-resizable.component.html',\n  styleUrl: './modal-resizable.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatDialogModule, MatButtonModule, PortalModule],\n})\nexport class SdModalResizable {\n  /** Generated DOM id of the panel element (`I<uuid>`). */\n  readonly id = `I${Utilities.generateUuid()}`;\n  readonly portal = viewChild.required(CdkPortal);\n  /** Marks the panel as editable. Bare attribute = `true`. Default `false`. */\n  readonly editable = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  /** CSS width used while the panel is expanded (not a minimum). Default `'480px'`. */\n  readonly width = input<string>('480px');\n  /** Emitted by `toggleEditable()` with the new editing state. */\n  readonly editingChanged = output<boolean>();\n  #embeddedViewRef!: EmbeddedViewRef<any>;\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #loadingService = inject(SdLoadingService);\n  readonly #destroyRef = inject(DestroyRef);\n  readonly #registry = inject(SdModalResizableRegistry);\n  // why: open/close/#arrangePanels đều hẹn setTimeout thao tác DOM. Gom id vào một set để\n  // onDestroy clear sạch, tránh callback chạy trên portal đã tháo (element không còn, hoặc tệ\n  // hơn: element của instance khác vừa tái sử dụng id).\n  readonly #timers = new Set<ReturnType<typeof setTimeout>>();\n  // Trạng thái panel — đọc được từ ngoài (template/consumer), chỉ component tự ghi.\n  readonly isEditing = signal(false);\n  readonly isOpened = signal(false);\n  readonly isHover = signal(false);\n  readonly isLoading = signal(false);\n  readonly isMinimum = signal(false);\n  readonly isMaximum = signal(false);\n\n  constructor() {\n    this.#registry.register(this.id);\n\n    afterNextRender(() => {\n      // why: attachTemplatePortal tạo embedded view từ VCR của chính CdkPortal →\n      // KHÔNG cần appRef/injector/document. Chỉ truyền outletElement để tương thích\n      // mọi CDK (19 còn slot ComponentFactoryResolver, 20/21 đã bỏ → tránh lệch arg).\n      const outlet = new DomPortalOutlet(document.body);\n      this.#embeddedViewRef = outlet.attachTemplatePortal(this.portal());\n      this.#detectChanges();\n    });\n\n    this.#destroyRef.onDestroy(() => {\n      this.#registry.unregister(this.id);\n      for (const timer of this.#timers) clearTimeout(timer);\n      this.#timers.clear();\n      this.#embeddedViewRef?.destroy();\n    });\n  }\n\n  /** setTimeout có theo dõi — huỷ được hàng loạt trong onDestroy. */\n  #schedule(callback: () => void, delay: number): void {\n    const timer = setTimeout(() => {\n      this.#timers.delete(timer);\n      callback();\n    }, delay);\n    this.#timers.add(timer);\n  }\n\n  /** Opens the panel, captures its rendered width, and expands it. */\n  open = () => {\n    this.isOpened.set(true);\n    this.#detectChanges();\n\n    const element = this.#getElement();\n    if (element && !element.classList.contains('c-minium')) {\n      this.#schedule(() => {\n        const maximumWidth = element.offsetWidth;\n        if (maximumWidth > 0) {\n          element.dataset['width'] = maximumWidth.toString();\n        }\n        element.classList.remove('c-closed');\n      }, 100);\n    }\n\n    this.maximize();\n  };\n\n  /** Collapses the panel to zero width and stops loading. */\n  close = () => {\n    this.isOpened.set(false);\n    this.#detectChanges();\n    this.#schedule(() => {\n      const element = this.#getElement();\n      element?.style.setProperty('width', '0px');\n      element?.style.setProperty('right', '0px');\n      element?.classList.remove('c-minium');\n      element?.classList.add('c-closed');\n    }, 100);\n    this.stopLoading();\n\n    this.#arrangePanels();\n  };\n\n  /** Shrinks the panel to the 300px minimum strip. */\n  minimize = () => {\n    this.isMinimum.set(true);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Restores the panel to its expanded width. */\n  maximize = () => {\n    this.isMinimum.set(false);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Toggles fullscreen (`calc(100% - 16px)`). */\n  toggleMaximum = () => {\n    this.isMaximum.update(isMaximum => !isMaximum);\n    this.#detectChanges();\n    this.#arrangePanels();\n  };\n\n  /** Drives the scoped loading overlay through `SdLoadingService`. */\n  startLoading = () => {\n    this.isLoading.set(true);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n    this.#loadingService.start(`#${this.id}`);\n  };\n\n  /** Stops the scoped loading overlay. */\n  stopLoading = () => {\n    this.isLoading.set(false);\n    this.#detectChanges();\n    this.#loadingService.stop(`#${this.id}`);\n  };\n\n  /** Flips `isEditing` and emits `editingChanged`. */\n  toggleEditable() {\n    this.isEditing.update(isEditing => !isEditing);\n    this.#detectChanges();\n    this.editingChanged.emit(this.isEditing());\n  }\n\n  /** Hover state hook bound in the template. */\n  onFocus = () => {\n    this.isHover.set(true);\n  };\n\n  /** Hover state hook bound in the template. */\n  onBlur = () => {\n    this.isHover.set(false);\n  };\n\n  #arrangePanels = () => {\n    this.#schedule(() => {\n      let totalRight = 0;\n      const minimumWidth = 300;\n      // why: chỉ xếp chỗ các panel do <sd-modal-resizable> đang sống sở hữu (registry), KHÔNG\n      // querySelectorAll('.modal-resizable') toàn document — query đó ghi đè inline width/right\n      // lên mọi phần tử trùng class, kể cả markup của component khác không liên quan.\n      this.#registry.panels().forEach(item => {\n        if (item.classList.contains('c-minium')) {\n          item.style.setProperty('width', `${minimumWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n          totalRight += minimumWidth + 8;\n          return;\n        }\n\n        if (item.classList.contains('c-closed')) {\n          return;\n        }\n\n        const expandedWidth = Number.parseInt(item.dataset['width'] || '', 10);\n        if (Number.isNaN(expandedWidth)) {\n          return;\n        }\n\n        if (item.classList.contains('c-fullscreen')) {\n          item.style.setProperty('width', 'calc(100% - 16px)');\n          item.style.setProperty('right', '8px');\n        } else {\n          item.style.setProperty('width', `${expandedWidth}px`);\n          item.style.setProperty('right', `${totalRight}px`);\n        }\n        totalRight += expandedWidth + 8;\n      });\n    }, 200);\n  };\n\n  #getElement() {\n    return document.getElementById(this.id);\n  }\n\n  #detectChanges() {\n    this.#ref.markForCheck();\n    this.#embeddedViewRef?.detectChanges();\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [id]=\"id\"\n    class=\"modal-resizable\"\n    [style.width]=\"width()\"\n    [class.modal-resizable--active]=\"isOpened()\"\n    [class.modal-resizable--loading]=\"isLoading()\"\n    [class.c-minium]=\"isMinimum()\"\n    [class.c-fullscreen]=\"isMaximum()\"\n    (mouseover)=\"onFocus()\"\n    (focus)=\"onFocus()\"\n    (mouseout)=\"onBlur()\"\n    (blur)=\"onBlur()\">\n    @if (isOpened()) {\n      <div class=\"modal-resizable__header\">\n        <div class=\"modal-resizable__title\">\n          <ng-content select=\"[sdTitle]\"></ng-content>\n        </div>\n        <div class=\"modal-resizable__actions\">\n          @if (!isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-min\" (click)=\"minimize()\" mat-icon-button title=\"Thu nhỏ\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (isMinimum()) {\n            <button type=\"button\" class=\"c-action--white c-max\" (click)=\"maximize()\" mat-icon-button title=\"Phóng to\">\n              <sd-icon name=\"remove\"></sd-icon>\n            </button>\n          }\n          @if (!isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Toàn màn hình\">\n              <sd-icon name=\"open_in_full\"></sd-icon>\n            </button>\n          }\n          @if (isMaximum()) {\n            <button type=\"button\" class=\"c-action--white\" (click)=\"toggleMaximum()\" mat-icon-button title=\"Thoát toàn màn hình\">\n              <sd-icon name=\"fullscreen_exit\"></sd-icon>\n            </button>\n          }\n          <button type=\"button\" class=\"c-action--white\" (click)=\"close()\" mat-icon-button title=\"Đóng\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-resizable__body\">\n        <div class=\"modal-resizable__content\">\n          <ng-content select=\"[sdBody]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"modal-resizable__footer\">\n        <div class=\"modal-resizable__footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"modal-resizable__footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-modal.mjs

@@ -48,6 +48,32 @@ class SdModal {
     constructor() {
         this.#isMobile = BrowserUtilities.isMobile();
     }
+    // why: PHẢI là ngOnDestroy, KHÔNG phải #destroyRef.onDestroy. Angular chạy executeOnDestroys
+    // (ngOnDestroy) TRƯỚC processCleanups (mọi callback DestroyRef.onDestroy). `sdClosed = output()`
+    // tự đăng ký một DestroyRef.onDestroy trong constructor của OutputEmitterRef ngay lúc khởi tạo
+    // field — tức TRƯỚC hook nào đăng ký trong constructor của component. Đăng ký ở constructor thì
+    // tới lượt mình chạy, emitter đã `destroyed = true` và `emit()` chỉ log cảnh báo rồi thoát.
+    ngOnDestroy() {
+        // why: overlay của MatDialog/MatBottomSheet sống trong CDK overlay container ở <body>,
+        // KHÔNG nằm trong view của <sd-modal>. Host bị destroy (điều hướng route, @if tắt nhánh…)
+        // mà không close ref thì overlay + backdrop ở lại mồ côi, che và chặn click cả trang.
+        // Dùng forceClose (không qua beforeClose) vì đã destroy thì không thể huỷ việc đóng.
+        //
+        // Emit TRƯỚC khi forceClose: afterClosed()/afterDismissed() bắn BẤT ĐỒNG BỘ, mà subscription
+        // của chúng dùng takeUntilDestroyed(#destroyRef) nên đã bị gỡ trước khi tới lượt. Không emit
+        // ở đây thì destroy một modal đang mở sẽ đóng overlay mà KHÔNG bao giờ báo (sdClosed).
+        this.#markClosed();
+        this.forceClose();
+    }
+    // why: idempotent — chốt trên isOpened(). Đường destroy emit trước, nếu sau đó
+    // afterClosed()/afterDismissed() vẫn kịp bắn thì lần thứ hai là no-op, không double-emit.
+    #markClosed = () => {
+        if (!this.isOpened())
+            return;
+        this.isOpened.set(false);
+        this.#closeRequest = undefined;
+        this.sdClosed.emit();
+    };
     #resolveWidth() {
         const w = this.width() || '80vw';
         if (this.#isMobile)
@@ -78,14 +104,7 @@ class SdModal {
                 disableClose: this.disableBackdropClose() || !!this.beforeClose(),
             });
             this.#bindGuardedDismiss(this.#bottomSheetRef);
-            this.#bottomSheetRef
-                .afterDismissed()
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe(() => {
-                this.isOpened.set(false);
-                this.#closeRequest = undefined;
-                this.sdClosed.emit();
-            });
+            this.#bottomSheetRef.afterDismissed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);
         }
         else {
             this.#dialogRef = this.#dialog.open(this.templateRef(), {
@@ -95,14 +114,7 @@ class SdModal {
                 disableClose: this.disableBackdropClose() || !!this.beforeClose(),
             });
             this.#bindGuardedDismiss(this.#dialogRef);
-            this.#dialogRef
-                .afterClosed()
-                .pipe(takeUntilDestroyed(this.#destroyRef))
-                .subscribe(() => {
-                this.isOpened.set(false);
-                this.#closeRequest = undefined;
-                this.sdClosed.emit();
-            });
+            this.#dialogRef.afterClosed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);
         }
     };
     close = () => {
@@ -179,11 +191,11 @@ class SdModal {
         return classes;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", 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 }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdCloseError: "sdCloseError" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", 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 }, beforeClose: { classPropertyName: "beforeClose", publicName: "beforeClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed", sdCloseError: "sdCloseError" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-root button:focus-visible{outline:2px solid var(--sd-primary, #005cbb)!important;outline-offset:2px}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdModal, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"] }]
+            args: [{ selector: 'sd-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".sd-modal-root button:focus{outline:none!important}.sd-modal-root button:focus-visible{outline:2px solid var(--sd-primary, #005cbb)!important;outline-offset:2px}.sd-modal-panel,.sd-modal-bottom-sheet-panel{--sd-modal-radius: var(--sd-overlay-radius, 24px);--sd-modal-bottom-sheet-radius: var(--sd-overlay-bottom-sheet-radius, 28px);--sd-modal-surface: var(--sd-surface, #fff);--sd-modal-border: var(--sd-border, #dde0e5);--sd-modal-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12)}.sd-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-shape: var(--sd-modal-radius);--mat-dialog-container-shape: var(--sd-modal-radius)}.sd-modal-panel .mat-mdc-dialog-surface,.sd-modal-panel .mdc-dialog__surface,.sd-modal-panel .mat-dialog-container{padding:0!important;border-radius:var(--sd-modal-radius)!important;background:var(--sd-modal-surface);max-height:calc(100vh - 32px);overflow:hidden;box-shadow:var(--sd-modal-shadow)}.sd-modal-panel .mat-dialog-container .mat-dialog-content,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-content,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-content{max-height:80vh}.sd-modal-panel .mat-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-dialog-container .mat-mdc-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-dialog-actions,.sd-modal-panel .mat-mdc-dialog-container .mat-mdc-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.sd-modal-root{display:flex;width:100%;max-height:inherit;flex-direction:column;background:var(--sd-modal-surface, var(--sd-surface, #fff));border-radius:inherit;overflow:hidden}.sd-modal-header{min-height:64px;padding:16px;display:flex;align-items:center;gap:16px}.sd-modal-header-left{display:flex;align-items:center;flex:1 1 auto;min-width:0}.sd-modal-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.sd-modal-title{min-width:0}.sd-modal-body{flex:1 1 auto;min-height:0;width:100%;max-height:80vh;overflow:auto;padding:0}.sd-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sd-text-secondary);line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 80ms ease,color 80ms ease}.sd-modal-close-btn:hover{background:var(--sd-surface-muted);color:var(--sd-text)}.sd-modal-close-btn:active{background:var(--sd-border)}.sd-modal-close-btn:focus{outline:none!important}.sd-modal-close-btn:focus-visible{outline:2px solid var(--sd-primary)!important;outline-offset:2px}.sd-modal-close-btn sd-icon{display:block;width:20px;height:20px;font-size:20px;line-height:20px}.sd-modal-bottom-sheet-panel.mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel.mat-mdc-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-bottom-sheet-container,.sd-modal-bottom-sheet-panel .mat-mdc-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:min(80vh,100vh - 16px);overflow:hidden;border-radius:var(--sd-modal-bottom-sheet-radius) var(--sd-modal-bottom-sheet-radius) 0 0!important;background:var(--sd-modal-surface);box-shadow:var(--sd-modal-shadow);display:flex;flex-direction:column}.sd-modal-footer{min-height:56px;padding:16px;border-top:1px solid var(--sd-modal-border);display:flex;align-items:center;justify-content:space-between;gap:16px}.sd-modal-footer-left,.sd-modal-footer-right{display:flex;align-items:center;gap:8px;min-width:0}.sd-modal-footer-left{flex:1 1 auto}.sd-modal-footer-right{flex:0 0 auto;margin-left:auto;justify-content:flex-end}.sd-modal-footer-left:empty,.sd-modal-footer-right:empty{display:none}.sd-modal-footer:has(.sd-modal-footer-left:empty):has(.sd-modal-footer-right:empty){display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/sdcorejs-angular-components-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-components-modal.mjs","sources":["../../../projects/sdcorejs-angular/components/modal/src/modal.component.ts","../../../projects/sdcorejs-angular/components/modal/src/modal.component.html","../../../projects/sdcorejs-angular/components/modal/sdcorejs-angular-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { Observable } from 'rxjs';\n\nexport type SdModalBeforeClose = () => boolean | Promise<boolean>;\n\ninterface SdModalDismissRef {\n  backdropClick?: () => Observable<MouseEvent>;\n  keydownEvents?: () => Observable<KeyboardEvent>;\n}\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: v => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: v => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: v => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: v => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, {\n    transform: v => v ?? undefined,\n  });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', {\n    transform: v => v ?? '',\n  });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n  beforeClose = input<SdModalBeforeClose | undefined>(undefined);\n\n  sdClosed = output<void>();\n  sdCloseError = output<unknown>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n  #closeRequest?: Promise<boolean>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg':\n        return '80vw';\n      case 'md':\n        return '60vw';\n      case 'sm':\n        return '40vw';\n      case 'sx':\n        return '20vw';\n      default:\n        return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.#resolvePanelClass('sd-modal-bottom-sheet-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#bottomSheetRef);\n      this.#bottomSheetRef\n        .afterDismissed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.#closeRequest = undefined;\n          this.sdClosed.emit();\n        });\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.#resolvePanelClass('sd-modal-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#dialogRef);\n      this.#dialogRef\n        .afterClosed()\n        .pipe(takeUntilDestroyed(this.#destroyRef))\n        .subscribe(() => {\n          this.isOpened.set(false);\n          this.#closeRequest = undefined;\n          this.sdClosed.emit();\n        });\n    }\n  };\n\n  close = (): void => {\n    if (this.beforeClose()) {\n      void this.requestClose();\n      return;\n    }\n    this.forceClose();\n  };\n\n  requestClose = (): Promise<boolean> => {\n    const guard = this.beforeClose();\n    if (!guard) {\n      this.forceClose();\n      return Promise.resolve(true);\n    }\n    if (this.#closeRequest) return this.#closeRequest;\n\n    const request = Promise.resolve()\n      .then(() => guard())\n      .then(canClose => {\n        if (!canClose) return false;\n        this.forceClose();\n        return true;\n      })\n      .catch((error: unknown) => {\n        this.sdCloseError.emit(error);\n        return false;\n      });\n\n    this.#closeRequest = request;\n    void request.finally(() => {\n      if (this.#closeRequest === request) this.#closeRequest = undefined;\n    });\n    return request;\n  };\n\n  forceClose = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n\n  #bindGuardedDismiss(ref: MatDialogRef<any> | MatBottomSheetRef<any>): void {\n    if (!this.beforeClose() || this.disableBackdropClose()) return;\n\n    const dismissRef = ref as SdModalDismissRef;\n    dismissRef\n      .backdropClick?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(() => this.close());\n    dismissRef\n      .keydownEvents?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((event: KeyboardEvent) => {\n        if (event.key === 'Escape') this.close();\n      });\n  }\n\n  #resolvePanelClass(baseClass: string): string[] {\n    const customClass = this.modalClass();\n    const classes = [baseClass];\n\n    if (typeof customClass === 'string') {\n      classes.push(...customClass.split(/\\s+/).filter(Boolean));\n      return classes;\n    }\n\n    if (Array.isArray(customClass)) {\n      classes.push(...customClass.filter(Boolean));\n      return classes;\n    }\n\n    if (customClass && typeof customClass === 'object') {\n      Object.entries(customClass).forEach(([className, enabled]) => {\n        if (enabled) classes.push(className);\n      });\n    }\n\n    return classes;\n  }\n}\n","<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-components-modal.mjs","sources":["../../../projects/sdcorejs-angular/components/modal/src/modal.component.ts","../../../projects/sdcorejs-angular/components/modal/src/modal.component.html","../../../projects/sdcorejs-angular/components/modal/sdcorejs-angular-components-modal.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  OnDestroy,\n  TemplateRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { BrowserUtilities } from '@sdcorejs/utils/fns';\nimport { Color, Size } from '@sdcorejs/utils/models';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport { Observable } from 'rxjs';\n\nexport type SdModalBeforeClose = () => boolean | Promise<boolean>;\n\ninterface SdModalDismissRef {\n  backdropClick?: () => Observable<MouseEvent>;\n  keydownEvents?: () => Observable<KeyboardEvent>;\n}\n\n@Component({\n  selector: 'sd-modal',\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [SdIcon, CommonModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule],\n})\nexport class SdModal implements OnDestroy {\n  static index = signal(0);\n\n  templateRef = viewChild.required<TemplateRef<any>>('templateRef');\n  modal = viewChild<ElementRef>('modal');\n\n  // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải\n  // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).\n  readonly autoIdInput = input<string | undefined | null>(undefined, { alias: 'autoId' });\n  readonly autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined));\n  readonly closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined));\n  readonly dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'));\n\n  title = input<string, string | null | undefined>('', { transform: v => v ?? '' });\n  color = input<Color, Color | null | undefined>('primary', { transform: v => v ?? 'primary' });\n  width = input<Size | string, Size | string | null | undefined>('md', { transform: v => v ?? 'md' });\n  height = input<string, string | null | undefined>('auto', { transform: v => v ?? 'auto' });\n  view = input<'dialog' | 'bottom-sheet' | undefined, 'dialog' | 'bottom-sheet' | null | undefined>(undefined, {\n    transform: v => v ?? undefined,\n  });\n  modalClass = input<string | string[] | Record<string, boolean>, string | string[] | Record<string, boolean> | null | undefined>('', {\n    transform: v => v ?? '',\n  });\n  lazyLoadContent = input(true, { transform: booleanAttribute });\n  hideClose = input<boolean, boolean | ''>(false, { transform: booleanAttribute });\n  disableBackdropClose = input<boolean, boolean | ''>(true, { transform: booleanAttribute }); // default to true to keep backward compatibility\n  beforeClose = input<SdModalBeforeClose | undefined>(undefined);\n\n  sdClosed = output<void>();\n  sdCloseError = output<unknown>();\n\n  isOpened = signal(false);\n  alreadyOpened = signal(false);\n\n  #isMobile = false;\n  #resolvedWidth = 'md';\n  #bottomSheetRef!: MatBottomSheetRef<any>;\n  #dialogRef!: MatDialogRef<any>;\n  #closeRequest?: Promise<boolean>;\n\n  #dialog = inject(MatDialog);\n  #bottomSheet = inject(MatBottomSheet);\n  #destroyRef = inject(DestroyRef);\n\n  constructor() {\n    this.#isMobile = BrowserUtilities.isMobile();\n  }\n\n  // why: PHẢI là ngOnDestroy, KHÔNG phải #destroyRef.onDestroy. Angular chạy executeOnDestroys\n  // (ngOnDestroy) TRƯỚC processCleanups (mọi callback DestroyRef.onDestroy). `sdClosed = output()`\n  // tự đăng ký một DestroyRef.onDestroy trong constructor của OutputEmitterRef ngay lúc khởi tạo\n  // field — tức TRƯỚC hook nào đăng ký trong constructor của component. Đăng ký ở constructor thì\n  // tới lượt mình chạy, emitter đã `destroyed = true` và `emit()` chỉ log cảnh báo rồi thoát.\n  ngOnDestroy(): void {\n    // why: overlay của MatDialog/MatBottomSheet sống trong CDK overlay container ở <body>,\n    // KHÔNG nằm trong view của <sd-modal>. Host bị destroy (điều hướng route, @if tắt nhánh…)\n    // mà không close ref thì overlay + backdrop ở lại mồ côi, che và chặn click cả trang.\n    // Dùng forceClose (không qua beforeClose) vì đã destroy thì không thể huỷ việc đóng.\n    //\n    // Emit TRƯỚC khi forceClose: afterClosed()/afterDismissed() bắn BẤT ĐỒNG BỘ, mà subscription\n    // của chúng dùng takeUntilDestroyed(#destroyRef) nên đã bị gỡ trước khi tới lượt. Không emit\n    // ở đây thì destroy một modal đang mở sẽ đóng overlay mà KHÔNG bao giờ báo (sdClosed).\n    this.#markClosed();\n    this.forceClose();\n  }\n\n  // why: idempotent — chốt trên isOpened(). Đường destroy emit trước, nếu sau đó\n  // afterClosed()/afterDismissed() vẫn kịp bắn thì lần thứ hai là no-op, không double-emit.\n  #markClosed = (): void => {\n    if (!this.isOpened()) return;\n    this.isOpened.set(false);\n    this.#closeRequest = undefined;\n    this.sdClosed.emit();\n  };\n\n  #resolveWidth(): string {\n    const w = this.width() || '80vw';\n    if (this.#isMobile) return w;\n    switch (w) {\n      case 'lg':\n        return '80vw';\n      case 'md':\n        return '60vw';\n      case 'sm':\n        return '40vw';\n      case 'sx':\n        return '20vw';\n      default:\n        return w;\n    }\n  }\n\n  open = (): void => {\n    if (this.isOpened()) {\n      return;\n    }\n    this.alreadyOpened.set(true);\n    this.isOpened.set(true);\n    this.#resolvedWidth = this.#resolveWidth();\n\n    if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {\n      this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {\n        panelClass: this.#resolvePanelClass('sd-modal-bottom-sheet-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#bottomSheetRef);\n      this.#bottomSheetRef.afterDismissed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);\n    } else {\n      this.#dialogRef = this.#dialog.open(this.templateRef(), {\n        width: this.#resolvedWidth,\n        maxWidth: this.#resolvedWidth,\n        panelClass: this.#resolvePanelClass('sd-modal-panel'),\n        disableClose: this.disableBackdropClose() || !!this.beforeClose(),\n      });\n      this.#bindGuardedDismiss(this.#dialogRef);\n      this.#dialogRef.afterClosed().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(this.#markClosed);\n    }\n  };\n\n  close = (): void => {\n    if (this.beforeClose()) {\n      void this.requestClose();\n      return;\n    }\n    this.forceClose();\n  };\n\n  requestClose = (): Promise<boolean> => {\n    const guard = this.beforeClose();\n    if (!guard) {\n      this.forceClose();\n      return Promise.resolve(true);\n    }\n    if (this.#closeRequest) return this.#closeRequest;\n\n    const request = Promise.resolve()\n      .then(() => guard())\n      .then(canClose => {\n        if (!canClose) return false;\n        this.forceClose();\n        return true;\n      })\n      .catch((error: unknown) => {\n        this.sdCloseError.emit(error);\n        return false;\n      });\n\n    this.#closeRequest = request;\n    void request.finally(() => {\n      if (this.#closeRequest === request) this.#closeRequest = undefined;\n    });\n    return request;\n  };\n\n  forceClose = (): void => {\n    this.#bottomSheetRef?.dismiss();\n    this.#dialogRef?.close();\n  };\n\n  #bindGuardedDismiss(ref: MatDialogRef<any> | MatBottomSheetRef<any>): void {\n    if (!this.beforeClose() || this.disableBackdropClose()) return;\n\n    const dismissRef = ref as SdModalDismissRef;\n    dismissRef\n      .backdropClick?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe(() => this.close());\n    dismissRef\n      .keydownEvents?.()\n      .pipe(takeUntilDestroyed(this.#destroyRef))\n      .subscribe((event: KeyboardEvent) => {\n        if (event.key === 'Escape') this.close();\n      });\n  }\n\n  #resolvePanelClass(baseClass: string): string[] {\n    const customClass = this.modalClass();\n    const classes = [baseClass];\n\n    if (typeof customClass === 'string') {\n      classes.push(...customClass.split(/\\s+/).filter(Boolean));\n      return classes;\n    }\n\n    if (Array.isArray(customClass)) {\n      classes.push(...customClass.filter(Boolean));\n      return classes;\n    }\n\n    if (customClass && typeof customClass === 'object') {\n      Object.entries(customClass).forEach(([className, enabled]) => {\n        if (enabled) classes.push(className);\n      });\n    }\n\n    return classes;\n  }\n}\n","<ng-template #templateRef>\n  <div\n    class=\"sd-modal-root\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      @if (title()) {\n        <div class=\"sd-modal-header\">\n          <div class=\"sd-modal-header-left\">\n            <ng-content select=\"[sdHeaderLeft]\">\n              <div class=\"sd-modal-title T18M\">{{ title() }}</div>\n            </ng-content>\n          </div>\n          <div class=\"sd-modal-header-right\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            @if (!hideClose()) {\n              <button\n                type=\"button\"\n                class=\"sd-modal-close-btn\"\n                aria-label=\"Close\"\n                (click)=\"close()\"\n                [attr.data-autoId]=\"closeButtonAutoId()\">\n                <sd-icon name=\"close\"></sd-icon>\n              </button>\n            }\n          </div>\n        </div>\n      }\n      <div class=\"sd-modal-body\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"sd-modal-footer\" #footer>\n        <div class=\"sd-modal-footer-left\"><ng-content select=\"[sdFooterLeft]\"></ng-content></div>\n        <div class=\"sd-modal-footer-right\"><ng-content select=\"[sdFooterRight]\"></ng-content></div>\n      </div>\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-components-operator.mjs

@@ -62,11 +62,11 @@ class SdOperator {
         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 _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\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 });
+    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 _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-text\">\n        <span class=\"c-op-label\">{{ item.display }}</span>\n        <span class=\"c-op-code\">{{ item.value }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\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 .c-op-row.mat-mdc-menu-item{min-height:0;height:auto;padding-top:6px;padding-bottom:6px;line-height:normal}::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-text{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}::ng-deep .c-op-menu .c-op-label{font-weight:400;line-height:1.3;white-space:nowrap}::ng-deep .c-op-menu .c-op-code{color:var(--sd-text-muted, #7a7a7a);font-size:11px;line-height:1.2;font-family:monospace;white-space:nowrap}::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 _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-label\">{{ item.display }}</span>\n      <span class=\"c-op-code\">{{ item.value }}</span>\n    </button>\n  }\n</mat-menu>\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"] }]
+            args: [{ selector: 'sd-operator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, MatTooltipModule], template: "@let _model = model();\n\n<button\n  type=\"button\"\n  class=\"c-op-trigger\"\n  [disabled]=\"disabled()\"\n  [matMenuTriggerFor]=\"menu\"\n  [matTooltip]=\"currentLabel()\"\n  matTooltipPosition=\"above\"\n  [attr.data-autoId]=\"autoId() ?? null\">\n  <span class=\"c-op-icon\" [innerHTML]=\"currentIcon()\"></span>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"c-op-menu\">\n  @for (item of items(); track item.value) {\n    <button\n      type=\"button\"\n      mat-menu-item\n      class=\"c-op-row\"\n      [class.c-op-active]=\"item.value === _model\"\n      (click)=\"select(item.value)\">\n      <span class=\"c-op-icon\" [innerHTML]=\"item.icon\"></span>\n      <span class=\"c-op-text\">\n        <span class=\"c-op-label\">{{ item.display }}</span>\n        <span class=\"c-op-code\">{{ item.value }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\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 .c-op-row.mat-mdc-menu-item{min-height:0;height:auto;padding-top:6px;padding-bottom:6px;line-height:normal}::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-text{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;min-width:0}::ng-deep .c-op-menu .c-op-label{font-weight:400;line-height:1.3;white-space:nowrap}::ng-deep .c-op-menu .c-op-code{color:var(--sd-text-muted, #7a7a7a);font-size:11px;line-height:1.2;font-family:monospace;white-space:nowrap}::ng-deep .c-op-menu .c-op-row.c-op-active{background:var(--sd-primary-light, rgba(15, 118, 110, .08))}\n"] }]
         }] });
 
 /**

package/fesm2022/sdcorejs-angular-components-operator.mjs.map

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