quang 19.0.27 → 20.0.0

package/fesm2022/quang-components-wysiwyg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-wysiwyg.mjs","sources":["../../../projects/quang/components/wysiwyg/wysiwyg.component.ts","../../../projects/quang/components/wysiwyg/wysiwyg.component.html","../../../projects/quang/components/wysiwyg/quang-components-wysiwyg.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { AbstractControl, NG_VALUE_ACCESSOR, ValidationErrors, Validators } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { filter, take } from 'rxjs'\nimport sunEditor from 'suneditor'\nimport SunEditorCore from 'suneditor/src/lib/core'\nimport { SunEditorOptions } from 'suneditor/src/options'\nimport plugins from 'suneditor/src/plugins'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type QuangWysiwygOptions = SunEditorOptions\n\n@Component({\n  selector: 'quang-wysiwyg',\n  templateUrl: './wysiwyg.component.html',\n  styleUrl: './wysiwyg.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangWysiwygComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgIf, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * WYSIWYG (What You See Is What You Get) component based on {@link https://github.com/JiHong88/SunEditor}.\n *\n * This component provides a rich text editor for users to create and edit HTML content.\n * It supports a wide range of formatting options.\n *\n * @usageNotes\n * The component allows you to show or hide buttons from the WYSIWYG editor.\n * By default, all the available buttons are shown in the editor bar.\n *\n * The height of the editor can be customized by setting the `minHeight` property. By default, it is `200px`.\n */\nexport class QuangWysiwygComponent extends QuangBaseComponent<string> implements AfterViewInit {\n  _inputForWysiwyg = viewChild<ElementRef>('inputForWysiwyg')\n\n  minHeight = input<string | undefined>('200px')\n\n  font = input<boolean>(true)\n\n  fontSize = input<boolean>(true)\n\n  formatBlock = input<boolean>(true)\n\n  paragraphStyle = input<boolean>(true)\n\n  blockquote = input<boolean>(true)\n\n  bold = input<boolean>(true)\n\n  underline = input<boolean>(true)\n\n  italic = input<boolean>(true)\n\n  strike = input<boolean>(true)\n\n  fontColor = input<boolean>(true)\n\n  highlightColor = input<boolean>(true)\n\n  textStyle = input<boolean>(true)\n\n  removeFormat = input<boolean>(true)\n\n  align = input<boolean>(true)\n\n  list = input<boolean>(true)\n\n  table = input<boolean>(true)\n\n  link = input<boolean>(true)\n\n  image = input<boolean>(true)\n\n  fullScreen = input<boolean>(true)\n\n  showBlocks = input<boolean>(true)\n\n  onImageUploadError = input<(errorMessage: any, result: any, core: any) => boolean>()\n  onFileDrop = input<(e: any, cleanData: any, maxCharCount: any, core: any) => boolean>()\n\n  wysiwygOptions = input<QuangWysiwygOptions | undefined>(undefined)\n\n  _sunEditorWysiwygInstance = signal<SunEditorCore | undefined>(undefined)\n  _sunEditorWysiwygInstance$ = toObservable(this._sunEditorWysiwygInstance)\n\n  changeDetectorRef = signal(inject(ChangeDetectorRef))\n\n  _generateSunEditorWysiwygEffect = effect(() => {\n    try {\n      const inputForWysiwyg = this._inputForWysiwyg()?.nativeElement\n      if (inputForWysiwyg) {\n        const sunEditorOptions: SunEditorOptions = {\n          plugins,\n          defaultTag: 'div',\n          buttonList: this._ngControl()?.control?.enabled && !this.isReadonly() ? [this.getButtonList()] : [],\n          minHeight: this.minHeight(),\n          width: '100%',\n          ...(this.wysiwygOptions() ?? {}),\n        }\n\n        let sunEditorWysiwygInstance = this._sunEditorWysiwygInstance()\n        const ngControl = this._ngControl()\n\n        if (sunEditorWysiwygInstance) {\n          if (ngControl?.control?.enabled) {\n            sunEditorWysiwygInstance.enable()\n          }\n          sunEditorWysiwygInstance.setOptions(sunEditorOptions)\n        } else {\n          sunEditorWysiwygInstance = sunEditor.create(inputForWysiwyg, sunEditorOptions)\n          this._sunEditorWysiwygInstance.set(sunEditorWysiwygInstance)\n        }\n\n        const imageUploadError = this.onImageUploadError()\n        const onFileDrop = this.onFileDrop()\n\n        if (imageUploadError && sunEditorWysiwygInstance) {\n          sunEditorWysiwygInstance.onImageUploadError = imageUploadError\n        }\n        if (onFileDrop && sunEditorWysiwygInstance) {\n          sunEditorWysiwygInstance.onDrop = onFileDrop\n        }\n\n        this.registerEvents()\n      }\n    } catch (_) {\n      // we usually end up here when we are in a modal and then it starts in the right way\n    }\n  })\n\n  STRIP_HTML_REGEX = /<[^>]*>/g\n\n  registerEvents(): void {\n    const sunEditorInstance = this._sunEditorWysiwygInstance()\n    if (sunEditorInstance) {\n      sunEditorInstance.onChange = (contents) => {\n        this.onChangedHandler(contents)\n        this.changeDetectorRef().markForCheck()\n      }\n      sunEditorInstance.onBlur = () => {\n        this.onBlurHandler()\n      }\n      if (this._isDisabled()) {\n        sunEditorInstance.disable()\n      }\n    }\n  }\n\n  override writeValue(val: string): void {\n    super.writeValue(val)\n    this._sunEditorWysiwygInstance$\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter((x) => !!x),\n        take(1)\n      )\n      .subscribe((sunEditorWysiwygInstance) => {\n        if (sunEditorWysiwygInstance) {\n          try {\n            sunEditorWysiwygInstance.setContents(val)\n          } catch (_) {\n            // we usually end up here when we are in a modal and then it starts in the right way\n          }\n        }\n      })\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (control.hasValidator(Validators.required) && control.value?.replace(this.STRIP_HTML_REGEX, '') === '') {\n      return { required: true }\n    }\n    return null\n  }\n\n  override onChangedHandler(value: string): void {\n    super.onChangedHandler(value)\n    const control = this._ngControl()\n    if (control?.control) {\n      if (this.validate(control.control)) control.control.setErrors(this.validate(control.control))\n    }\n  }\n\n  getButtonList(): string[] {\n    const buttonList: string[] = []\n    if (this.font()) {\n      buttonList.push('font')\n    }\n    if (this.fontSize()) {\n      buttonList.push('fontSize')\n    }\n    if (this.formatBlock()) {\n      buttonList.push('formatBlock')\n    }\n    if (this.paragraphStyle()) {\n      buttonList.push('paragraphStyle')\n    }\n    if (this.blockquote()) {\n      buttonList.push('blockquote')\n    }\n    if (this.bold()) {\n      buttonList.push('bold')\n    }\n    if (this.underline()) {\n      buttonList.push('underline')\n    }\n    if (this.italic()) {\n      buttonList.push('italic')\n    }\n    if (this.strike()) {\n      buttonList.push('strike')\n    }\n    if (this.fontColor()) {\n      buttonList.push('fontColor')\n    }\n    if (this.highlightColor()) {\n      buttonList.push('hiliteColor')\n    }\n    if (this.textStyle()) {\n      buttonList.push('textStyle')\n    }\n    if (this.removeFormat()) {\n      buttonList.push('removeFormat')\n    }\n    if (this.align()) {\n      buttonList.push('align')\n    }\n    if (this.list()) {\n      buttonList.push('list')\n    }\n    if (this.table()) {\n      buttonList.push('table')\n    }\n    if (this.link()) {\n      buttonList.push('link')\n    }\n    if (this.image()) {\n      buttonList.push('image')\n    }\n    if (this.fullScreen()) {\n      buttonList.push('fullScreen')\n    }\n    if (this.showBlocks()) {\n      buttonList.push('showBlocks')\n    }\n    return buttonList\n  }\n}\n","<div class=\"mb-3\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-wysiwyg-container is-invalid\"\n  >\n    <textarea\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      #inputForWysiwyg\n      class=\"form-control\"\n    ></textarea>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AA0CA;;;;;;;;;;;AAWG;AACG,MAAO,qBAAsB,SAAQ,kBAA0B,CAAA;AA1BrE,IAAA,WAAA,GAAA;;AA2BE,QAAA,IAAA,CAAA,gBAAgB,GAAG,SAAS,CAAa,iBAAiB,CAAC;AAE3D,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAqB,OAAO,CAAC;AAE9C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,IAAI,CAAC;AAE/B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,IAAI,CAAC;AAElC,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,IAAI,CAAC;AAErC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,IAAI,CAAC;AAEjC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,CAAC;AAEhC,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,IAAI,CAAC;AAE7B,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,IAAI,CAAC;AAE7B,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,CAAC;AAEhC,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,IAAI,CAAC;AAErC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,CAAC;AAEhC,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAU,IAAI,CAAC;AAEnC,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,IAAI,CAAC;AAE5B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,IAAI,CAAC;AAE5B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,IAAI,CAAC;AAE3B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,IAAI,CAAC;AAE5B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,IAAI,CAAC;AAEjC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,IAAI,CAAC;QAEjC,IAAkB,CAAA,kBAAA,GAAG,KAAK,EAA0D;QACpF,IAAU,CAAA,UAAA,GAAG,KAAK,EAAqE;AAEvF,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAkC,SAAS,CAAC;AAElE,QAAA,IAAA,CAAA,yBAAyB,GAAG,MAAM,CAA4B,SAAS,CAAC;AACxE,QAAA,IAAA,CAAA,0BAA0B,GAAG,YAAY,CAAC,IAAI,CAAC,yBAAyB,CAAC;QAEzE,IAAiB,CAAA,iBAAA,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAErD,QAAA,IAAA,CAAA,+BAA+B,GAAG,MAAM,CAAC,MAAK;AAC5C,YAAA,IAAI;gBACF,MAAM,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,aAAa;gBAC9D,IAAI,eAAe,EAAE;AACnB,oBAAA,MAAM,gBAAgB,GAAqB;wBACzC,OAAO;AACP,wBAAA,UAAU,EAAE,KAAK;wBACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,EAAE;AACnG,wBAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;AAC3B,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC;qBACjC;AAED,oBAAA,IAAI,wBAAwB,GAAG,IAAI,CAAC,yBAAyB,EAAE;AAC/D,oBAAA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE;oBAEnC,IAAI,wBAAwB,EAAE;AAC5B,wBAAA,IAAI,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE;4BAC/B,wBAAwB,CAAC,MAAM,EAAE;;AAEnC,wBAAA,wBAAwB,CAAC,UAAU,CAAC,gBAAgB,CAAC;;yBAChD;wBACL,wBAAwB,GAAG,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC;AAC9E,wBAAA,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,wBAAwB,CAAC;;AAG9D,oBAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,EAAE;AAClD,oBAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AAEpC,oBAAA,IAAI,gBAAgB,IAAI,wBAAwB,EAAE;AAChD,wBAAA,wBAAwB,CAAC,kBAAkB,GAAG,gBAAgB;;AAEhE,oBAAA,IAAI,UAAU,IAAI,wBAAwB,EAAE;AAC1C,wBAAA,wBAAwB,CAAC,MAAM,GAAG,UAAU;;oBAG9C,IAAI,CAAC,cAAc,EAAE;;;YAEvB,OAAO,CAAC,EAAE;;;AAGd,SAAC,CAAC;QAEF,IAAgB,CAAA,gBAAA,GAAG,UAAU;AAoH9B;IAlHC,cAAc,GAAA;AACZ,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,EAAE;QAC1D,IAAI,iBAAiB,EAAE;AACrB,YAAA,iBAAiB,CAAC,QAAQ,GAAG,CAAC,QAAQ,KAAI;AACxC,gBAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/B,gBAAA,IAAI,CAAC,iBAAiB,EAAE,CAAC,YAAY,EAAE;AACzC,aAAC;AACD,YAAA,iBAAiB,CAAC,MAAM,GAAG,MAAK;gBAC9B,IAAI,CAAC,aAAa,EAAE;AACtB,aAAC;AACD,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACtB,iBAAiB,CAAC,OAAO,EAAE;;;;AAKxB,IAAA,UAAU,CAAC,GAAW,EAAA;AAC7B,QAAA,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;AACrB,QAAA,IAAI,CAAC;aACF,IAAI,CACH,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,EACnC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClB,IAAI,CAAC,CAAC,CAAC;AAER,aAAA,SAAS,CAAC,CAAC,wBAAwB,KAAI;YACtC,IAAI,wBAAwB,EAAE;AAC5B,gBAAA,IAAI;AACF,oBAAA,wBAAwB,CAAC,WAAW,CAAC,GAAG,CAAC;;gBACzC,OAAO,CAAC,EAAE;;;;AAIhB,SAAC,CAAC;;AAGN,IAAA,QAAQ,CAAC,OAAwB,EAAA;QAC/B,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE;AACzG,YAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;;AAE3B,QAAA,OAAO,IAAI;;AAGJ,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACrC,QAAA,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AACjC,QAAA,IAAI,OAAO,EAAE,OAAO,EAAE;AACpB,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;;;IAIjG,aAAa,GAAA;QACX,MAAM,UAAU,GAAa,EAAE;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,YAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEzB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;;AAE7B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACtB,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAEhC,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC;;AAEnC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,YAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEzB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;AAE9B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAE3B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAE3B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;AAE9B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAEhC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC;;AAE9B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;AAEjC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;;AAE1B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,YAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEzB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;;AAE1B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,YAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;;AAEzB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;;AAE1B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,OAAO,UAAU;;+GApNR,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAtBrB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,qBAAqB,CAAC;AACpD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtCH,+oCAyCA,EDFY,MAAA,EAAA,CAAA,g6EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,aAAa,EAAE,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAe3B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA1BjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAGd,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,2BAA2B,CAAC;AACpD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EACQ,OAAA,EAAA,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,EAAA,eAAA,EACtB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+oCAAA,EAAA,MAAA,EAAA,CAAA,g6EAAA,CAAA,EAAA;;;AExCjD;;AAEG;;;;"}
+{"version":3,"file":"quang-components-wysiwyg.mjs","sources":["../../../projects/quang/components/wysiwyg/wysiwyg.component.ts","../../../projects/quang/components/wysiwyg/wysiwyg.component.html","../../../projects/quang/components/wysiwyg/quang-components-wysiwyg.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { AbstractControl, NG_VALUE_ACCESSOR, ValidationErrors, Validators } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { filter, take } from 'rxjs'\nimport sunEditor from 'suneditor'\nimport SunEditorCore from 'suneditor/src/lib/core'\nimport { SunEditorOptions } from 'suneditor/src/options'\nimport plugins from 'suneditor/src/plugins'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type QuangWysiwygOptions = SunEditorOptions\n\n@Component({\n  selector: 'quang-wysiwyg',\n  templateUrl: './wysiwyg.component.html',\n  styleUrl: './wysiwyg.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangWysiwygComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * WYSIWYG (What You See Is What You Get) component based on {@link https://github.com/JiHong88/SunEditor}.\n *\n * This component provides a rich text editor for users to create and edit HTML content.\n * It supports a wide range of formatting options.\n *\n * @usageNotes\n * The component allows you to show or hide buttons from the WYSIWYG editor.\n * By default, all the available buttons are shown in the editor bar.\n *\n * The height of the editor can be customized by setting the `minHeight` property. By default, it is `200px`.\n */\nexport class QuangWysiwygComponent extends QuangBaseComponent<string> implements AfterViewInit {\n  _inputForWysiwyg = viewChild<ElementRef>('inputForWysiwyg')\n\n  minHeight = input<string | undefined>('200px')\n\n  font = input<boolean>(true)\n\n  fontSize = input<boolean>(true)\n\n  formatBlock = input<boolean>(true)\n\n  paragraphStyle = input<boolean>(true)\n\n  blockquote = input<boolean>(true)\n\n  bold = input<boolean>(true)\n\n  underline = input<boolean>(true)\n\n  italic = input<boolean>(true)\n\n  strike = input<boolean>(true)\n\n  fontColor = input<boolean>(true)\n\n  highlightColor = input<boolean>(true)\n\n  textStyle = input<boolean>(true)\n\n  removeFormat = input<boolean>(true)\n\n  align = input<boolean>(true)\n\n  list = input<boolean>(true)\n\n  table = input<boolean>(true)\n\n  link = input<boolean>(true)\n\n  image = input<boolean>(true)\n\n  fullScreen = input<boolean>(true)\n\n  showBlocks = input<boolean>(true)\n\n  onImageUploadError = input<(errorMessage: any, result: any, core: any) => boolean>()\n  onFileDrop = input<(e: any, cleanData: any, maxCharCount: any, core: any) => boolean>()\n\n  wysiwygOptions = input<QuangWysiwygOptions | undefined>(undefined)\n\n  _sunEditorWysiwygInstance = signal<SunEditorCore | undefined>(undefined)\n  _sunEditorWysiwygInstance$ = toObservable(this._sunEditorWysiwygInstance)\n\n  changeDetectorRef = signal(inject(ChangeDetectorRef))\n\n  _generateSunEditorWysiwygEffect = effect(() => {\n    try {\n      const inputForWysiwyg = this._inputForWysiwyg()?.nativeElement\n      if (inputForWysiwyg) {\n        const sunEditorOptions: SunEditorOptions = {\n          plugins,\n          defaultTag: 'div',\n          buttonList: this._ngControl()?.control?.enabled && !this.isReadonly() ? [this.getButtonList()] : [],\n          minHeight: this.minHeight(),\n          width: '100%',\n          ...(this.wysiwygOptions() ?? {}),\n        }\n\n        let sunEditorWysiwygInstance = this._sunEditorWysiwygInstance()\n        const ngControl = this._ngControl()\n\n        if (sunEditorWysiwygInstance) {\n          if (ngControl?.control?.enabled) {\n            sunEditorWysiwygInstance.enable()\n          }\n          sunEditorWysiwygInstance.setOptions(sunEditorOptions)\n        } else {\n          sunEditorWysiwygInstance = sunEditor.create(inputForWysiwyg, sunEditorOptions)\n          this._sunEditorWysiwygInstance.set(sunEditorWysiwygInstance)\n        }\n\n        const imageUploadError = this.onImageUploadError()\n        const onFileDrop = this.onFileDrop()\n\n        if (imageUploadError && sunEditorWysiwygInstance) {\n          sunEditorWysiwygInstance.onImageUploadError = imageUploadError\n        }\n        if (onFileDrop && sunEditorWysiwygInstance) {\n          sunEditorWysiwygInstance.onDrop = onFileDrop\n        }\n\n        this.registerEvents()\n      }\n    } catch (_) {\n      // we usually end up here when we are in a modal and then it starts in the right way\n    }\n  })\n\n  STRIP_HTML_REGEX = /<[^>]*>/g\n\n  registerEvents(): void {\n    const sunEditorInstance = this._sunEditorWysiwygInstance()\n    if (sunEditorInstance) {\n      sunEditorInstance.onChange = (contents) => {\n        this.onChangedHandler(contents)\n        this.changeDetectorRef().markForCheck()\n      }\n      sunEditorInstance.onBlur = () => {\n        this.onBlurHandler()\n      }\n      if (this._isDisabled()) {\n        sunEditorInstance.disable()\n      }\n    }\n  }\n\n  override writeValue(val: string): void {\n    super.writeValue(val)\n    this._sunEditorWysiwygInstance$\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter((x) => !!x),\n        take(1)\n      )\n      .subscribe((sunEditorWysiwygInstance) => {\n        if (sunEditorWysiwygInstance) {\n          try {\n            sunEditorWysiwygInstance.setContents(val)\n          } catch (_) {\n            // we usually end up here when we are in a modal and then it starts in the right way\n          }\n        }\n      })\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (control.hasValidator(Validators.required) && control.value?.replace(this.STRIP_HTML_REGEX, '') === '') {\n      return { required: true }\n    }\n    return null\n  }\n\n  override onChangedHandler(value: string): void {\n    super.onChangedHandler(value)\n    const control = this._ngControl()\n    if (control?.control) {\n      if (this.validate(control.control)) control.control.setErrors(this.validate(control.control))\n    }\n  }\n\n  getButtonList(): string[] {\n    const buttonList: string[] = []\n    if (this.font()) {\n      buttonList.push('font')\n    }\n    if (this.fontSize()) {\n      buttonList.push('fontSize')\n    }\n    if (this.formatBlock()) {\n      buttonList.push('formatBlock')\n    }\n    if (this.paragraphStyle()) {\n      buttonList.push('paragraphStyle')\n    }\n    if (this.blockquote()) {\n      buttonList.push('blockquote')\n    }\n    if (this.bold()) {\n      buttonList.push('bold')\n    }\n    if (this.underline()) {\n      buttonList.push('underline')\n    }\n    if (this.italic()) {\n      buttonList.push('italic')\n    }\n    if (this.strike()) {\n      buttonList.push('strike')\n    }\n    if (this.fontColor()) {\n      buttonList.push('fontColor')\n    }\n    if (this.highlightColor()) {\n      buttonList.push('hiliteColor')\n    }\n    if (this.textStyle()) {\n      buttonList.push('textStyle')\n    }\n    if (this.removeFormat()) {\n      buttonList.push('removeFormat')\n    }\n    if (this.align()) {\n      buttonList.push('align')\n    }\n    if (this.list()) {\n      buttonList.push('list')\n    }\n    if (this.table()) {\n      buttonList.push('table')\n    }\n    if (this.link()) {\n      buttonList.push('link')\n    }\n    if (this.image()) {\n      buttonList.push('image')\n    }\n    if (this.fullScreen()) {\n      buttonList.push('fullScreen')\n    }\n    if (this.showBlocks()) {\n      buttonList.push('showBlocks')\n    }\n    return buttonList\n  }\n}\n","<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-wysiwyg-container is-invalid\"\n  >\n    <textarea\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      #inputForWysiwyg\n      class=\"form-control\"\n    ></textarea>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-device.mjs

@@ -24,10 +24,10 @@ class ResizeObservableService {
     widthResizeObservable(elem) {
         return this.resizeObservable(elem).pipe(map((entry) => entry.borderBoxSize[0].inlineSize), filter(Boolean));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ResizeObservableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResizeObservableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/quang-device.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-device.mjs","sources":["../../../projects/quang/device/resize-observable.service.ts","../../../projects/quang/device/quang-device.ts"],"sourcesContent":["import { Injectable } from '@angular/core'\n\nimport { NextObserver, Observable, Subscriber, filter, map, throttleTime } from 'rxjs'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ResizeObservableService {\n  private resizeObserver: ResizeObserver\n\n  private notifiers: NextObserver<ResizeObserverEntry[]>[] = []\n\n  constructor() {\n    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.notifiers.forEach((obs) => obs.next(entries))\n    })\n  }\n\n  resizeObservable(elem: Element): Observable<ResizeObserverEntry> {\n    this.resizeObserver.observe(elem)\n    const newObserverCandidate = new Observable<ResizeObserverEntry[]>(\n      (subscriber: Subscriber<ResizeObserverEntry[]>) => {\n        this.notifiers.push(subscriber)\n\n        return () => {\n          const idx = this.notifiers.findIndex((val) => val === subscriber)\n          this.notifiers.splice(idx, 1)\n          this.resizeObserver.unobserve(elem)\n        }\n      }\n    )\n\n    return newObserverCandidate.pipe(\n      map((entries) => entries.find((entry) => entry.target === elem)),\n      filter(Boolean),\n      throttleTime(30)\n    )\n  }\n\n  widthResizeObservable(elem: Element): Observable<number> {\n    return this.resizeObservable(elem).pipe(\n      map((entry) => entry.borderBoxSize[0].inlineSize),\n      filter(Boolean)\n    )\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,uBAAuB,CAAA;AAKlC,IAAA,WAAA,GAAA;QAFQ,IAAS,CAAA,SAAA,GAA0C,EAAE;QAG3D,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAA8B,KAAI;AAC1E,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACpD,SAAC,CAAC;;AAGJ,IAAA,gBAAgB,CAAC,IAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,MAAM,oBAAoB,GAAG,IAAI,UAAU,CACzC,CAAC,UAA6C,KAAI;AAChD,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;AAE/B,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,UAAU,CAAC;gBACjE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;AAC7B,gBAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC;AACrC,aAAC;AACH,SAAC,CACF;AAED,QAAA,OAAO,oBAAoB,CAAC,IAAI,CAC9B,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,EAChE,MAAM,CAAC,OAAO,CAAC,EACf,YAAY,CAAC,EAAE,CAAC,CACjB;;AAGH,IAAA,qBAAqB,CAAC,IAAa,EAAA;AACjC,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CACrC,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,EACjD,MAAM,CAAC,OAAO,CAAC,CAChB;;+GApCQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,cAFtB,MAAM,EAAA,CAAA,CAAA;;4FAEP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACND;;AAEG;;;;"}
+{"version":3,"file":"quang-device.mjs","sources":["../../../projects/quang/device/resize-observable.service.ts","../../../projects/quang/device/quang-device.ts"],"sourcesContent":["import { Injectable } from '@angular/core'\n\nimport { NextObserver, Observable, Subscriber, filter, map, throttleTime } from 'rxjs'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ResizeObservableService {\n  private resizeObserver: ResizeObserver\n\n  private notifiers: NextObserver<ResizeObserverEntry[]>[] = []\n\n  constructor() {\n    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.notifiers.forEach((obs) => obs.next(entries))\n    })\n  }\n\n  resizeObservable(elem: Element): Observable<ResizeObserverEntry> {\n    this.resizeObserver.observe(elem)\n    const newObserverCandidate = new Observable<ResizeObserverEntry[]>(\n      (subscriber: Subscriber<ResizeObserverEntry[]>) => {\n        this.notifiers.push(subscriber)\n\n        return () => {\n          const idx = this.notifiers.findIndex((val) => val === subscriber)\n          this.notifiers.splice(idx, 1)\n          this.resizeObserver.unobserve(elem)\n        }\n      }\n    )\n\n    return newObserverCandidate.pipe(\n      map((entries) => entries.find((entry) => entry.target === elem)),\n      filter(Boolean),\n      throttleTime(30)\n    )\n  }\n\n  widthResizeObservable(elem: Element): Observable<number> {\n    return this.resizeObservable(elem).pipe(\n      map((entry) => entry.borderBoxSize[0].inlineSize),\n      filter(Boolean)\n    )\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,uBAAuB,CAAA;AAKlC,IAAA,WAAA,GAAA;QAFQ,IAAS,CAAA,SAAA,GAA0C,EAAE;QAG3D,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAA8B,KAAI;AAC1E,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACpD,SAAC,CAAC;;AAGJ,IAAA,gBAAgB,CAAC,IAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;QACjC,MAAM,oBAAoB,GAAG,IAAI,UAAU,CACzC,CAAC,UAA6C,KAAI;AAChD,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;AAE/B,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,UAAU,CAAC;gBACjE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;AAC7B,gBAAA,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC;AACrC,aAAC;AACH,SAAC,CACF;AAED,QAAA,OAAO,oBAAoB,CAAC,IAAI,CAC9B,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,EAChE,MAAM,CAAC,OAAO,CAAC,EACf,YAAY,CAAC,EAAE,CAAC,CACjB;;AAGH,IAAA,qBAAqB,CAAC,IAAa,EAAA;AACjC,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CACrC,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,EACjD,MAAM,CAAC,OAAO,CAAC,CAChB;;8GApCQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,cAFtB,MAAM,EAAA,CAAA,CAAA;;2FAEP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAHnC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACND;;AAEG;;;;"}

package/fesm2022/quang-loader.mjs

@@ -3,7 +3,6 @@ import { computed, Injectable, InjectionToken, inject, input, ChangeDetectionStr
 import { getExcludedUrlsByMethod, isHttpMethod } from 'quang/shared';
 import { finalize, map, of, timer, switchAll } from 'rxjs';
 import { signalState, patchState } from '@ngrx/signals';
-import { NgIf } from '@angular/common';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { quangFeature } from 'quang';
 
@@ -18,10 +17,10 @@ class QuangLoaderService {
     hide() {
         patchState(this.loaderState, { count: this.loaderState().count - 1 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -70,12 +69,12 @@ class QuangLoaderComponent {
         this.showLoaderBuffer$ = toObservable(this.isLoading).pipe(map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))), switchAll());
         this.showLoader = toSignal(this.showLoaderBuffer$);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  *ngIf=\"showLoader()\"\n  class=\"loader-container\"\n>\n  <ng-container *ngIf=\"!ref?.children?.length\">\n    <span class=\"loader\"></span>\n  </ng-container>\n  <div #ref>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-loader', imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"showLoader()\"\n  class=\"loader-container\"\n>\n  <ng-container *ngIf=\"!ref?.children?.length\">\n    <span class=\"loader\"></span>\n  </ng-container>\n  <div #ref>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
+            args: [{ selector: 'quang-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
         }] });
 
 /**

package/fesm2022/quang-loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-loader.mjs","sources":["../../../projects/quang/loader/loader.service.ts","../../../projects/quang/loader/loader.interceptor.ts","../../../projects/quang/loader/loader.component.ts","../../../projects/quang/loader/loader.component.html","../../../projects/quang/loader/loader-providers.ts","../../../projects/quang/loader/quang-loader.ts"],"sourcesContent":["import { Injectable, computed } from '@angular/core'\n\nimport { patchState, signalState } from '@ngrx/signals'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class QuangLoaderService {\n  private loaderState = signalState({ count: 0 })\n\n  public isLoading = computed(() => this.loaderState.count() > 0)\n\n  public show(): void {\n    patchState(this.loaderState, { count: this.loaderState().count + 1 })\n  }\n\n  public hide(): void {\n    patchState(this.loaderState, { count: this.loaderState().count - 1 })\n  }\n}\n","import { HttpInterceptorFn } from '@angular/common/http'\nimport { InjectionToken, inject } from '@angular/core'\n\nimport { UrlData, getExcludedUrlsByMethod, isHttpMethod } from 'quang/shared'\nimport { finalize } from 'rxjs'\n\nimport { QuangLoaderService } from './loader.service'\n\nexport const LOADER_EXCLUDED_URLS = new InjectionToken<UrlData[]>('LOADER_EXCLUDED_URLS')\n\n/**\n *  @deprecated\n *  @see {@link LOADER_EXCLUDED_URLS}\n */\nexport const EXCLUDED_URL = LOADER_EXCLUDED_URLS\n\nexport const quangLoaderInterceptor: HttpInterceptorFn = (request, next) => {\n  const excludedUrlsByMethod = getExcludedUrlsByMethod(inject(LOADER_EXCLUDED_URLS, { optional: true }) ?? [])\n  const loaderService = inject(QuangLoaderService)\n  if (!isHttpMethod(request.method)) {\n    return next(request)\n  }\n\n  if (\n    Array.from(excludedUrlsByMethod.get(request.method) ?? []).some((excludedUrl) =>\n      request.url.match(excludedUrl.replace(/\\//g, '\\\\/'))\n    )\n  ) {\n    return next(request)\n  }\n\n  loaderService.show()\n\n  return next(request).pipe(\n    finalize(() => {\n      loaderService.hide()\n    })\n  )\n}\n","import { NgIf } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, inject, input } from '@angular/core'\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop'\n\nimport { map, of, switchAll, timer } from 'rxjs'\n\nimport { QuangLoaderService } from './loader.service'\n\n/**\n * @example\n * <quang-loader></quang-loader>\n *\n * @example\n * <quang-loader>\n *  custom loader here\n * </quang-loader>\n */\n@Component({\n  selector: 'quang-loader',\n  imports: [NgIf],\n  templateUrl: './loader.component.html',\n  styleUrl: './loader.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangLoaderComponent {\n  /**\n   * Minimum time (in milliseconds) to show the loader for\n   * @default 500\n   */\n  showAtLeastFor = input<number>(500)\n\n  private readonly loaderService = inject(QuangLoaderService)\n\n  isLoading = this.loaderService.isLoading\n\n  showLoaderBuffer$ = toObservable(this.isLoading).pipe(\n    map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))),\n    switchAll()\n  )\n\n  showLoader = toSignal(this.showLoaderBuffer$)\n}\n","<div\n  *ngIf=\"showLoader()\"\n  class=\"loader-container\"\n>\n  <ng-container *ngIf=\"!ref?.children?.length\">\n    <span class=\"loader\"></span>\n  </ng-container>\n  <div #ref>\n    <ng-content></ng-content>\n  </div>\n</div>\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core'\n\nimport { QuangFeature, QuangFeatureKind, quangFeature } from 'quang'\nimport { UrlData } from 'quang/shared'\n\nimport { LOADER_EXCLUDED_URLS } from './loader.interceptor'\n\n/**\n * @example\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideLoader([\n *       {\n *         url: 'assets',\n *         method: 'GET',\n *       },\n *     ])\n *   ]\n * }\n */\nexport function provideQuangLoaderExcludedUrls(excludedUrls: UrlData[]): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: LOADER_EXCLUDED_URLS,\n      useValue: excludedUrls,\n    },\n  ])\n}\n\nexport function withLoaderExcludedUrls(excludedUrls: UrlData[]): QuangFeature<QuangFeatureKind.LoaderFeature> {\n  return quangFeature(QuangFeatureKind.LoaderFeature, [provideQuangLoaderExcludedUrls(excludedUrls)])\n}\n\n/**\n * @deprecated\n * @see {@link provideQuangLoaderExcludedUrls}\n */\nexport const provideLoader = provideQuangLoaderExcludedUrls\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-loader.mjs","sources":["../../../projects/quang/loader/loader.service.ts","../../../projects/quang/loader/loader.interceptor.ts","../../../projects/quang/loader/loader.component.ts","../../../projects/quang/loader/loader.component.html","../../../projects/quang/loader/loader-providers.ts","../../../projects/quang/loader/quang-loader.ts"],"sourcesContent":["import { Injectable, computed } from '@angular/core'\n\nimport { patchState, signalState } from '@ngrx/signals'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class QuangLoaderService {\n  private loaderState = signalState({ count: 0 })\n\n  public isLoading = computed(() => this.loaderState.count() > 0)\n\n  public show(): void {\n    patchState(this.loaderState, { count: this.loaderState().count + 1 })\n  }\n\n  public hide(): void {\n    patchState(this.loaderState, { count: this.loaderState().count - 1 })\n  }\n}\n","import { HttpInterceptorFn } from '@angular/common/http'\nimport { InjectionToken, inject } from '@angular/core'\n\nimport { UrlData, getExcludedUrlsByMethod, isHttpMethod } from 'quang/shared'\nimport { finalize } from 'rxjs'\n\nimport { QuangLoaderService } from './loader.service'\n\nexport const LOADER_EXCLUDED_URLS = new InjectionToken<UrlData[]>('LOADER_EXCLUDED_URLS')\n\n/**\n *  @deprecated\n *  @see {@link LOADER_EXCLUDED_URLS}\n */\nexport const EXCLUDED_URL = LOADER_EXCLUDED_URLS\n\nexport const quangLoaderInterceptor: HttpInterceptorFn = (request, next) => {\n  const excludedUrlsByMethod = getExcludedUrlsByMethod(inject(LOADER_EXCLUDED_URLS, { optional: true }) ?? [])\n  const loaderService = inject(QuangLoaderService)\n  if (!isHttpMethod(request.method)) {\n    return next(request)\n  }\n\n  if (\n    Array.from(excludedUrlsByMethod.get(request.method) ?? []).some((excludedUrl) =>\n      request.url.match(excludedUrl.replace(/\\//g, '\\\\/'))\n    )\n  ) {\n    return next(request)\n  }\n\n  loaderService.show()\n\n  return next(request).pipe(\n    finalize(() => {\n      loaderService.hide()\n    })\n  )\n}\n","import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core'\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop'\n\nimport { map, of, switchAll, timer } from 'rxjs'\n\nimport { QuangLoaderService } from './loader.service'\n\n/**\n * @example\n * <quang-loader></quang-loader>\n *\n * @example\n * <quang-loader>\n *  custom loader here\n * </quang-loader>\n */\n@Component({\n  selector: 'quang-loader',\n  imports: [],\n  templateUrl: './loader.component.html',\n  styleUrl: './loader.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangLoaderComponent {\n  /**\n   * Minimum time (in milliseconds) to show the loader for\n   * @default 500\n   */\n  showAtLeastFor = input<number>(500)\n\n  private readonly loaderService = inject(QuangLoaderService)\n\n  isLoading = this.loaderService.isLoading\n\n  showLoaderBuffer$ = toObservable(this.isLoading).pipe(\n    map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))),\n    switchAll()\n  )\n\n  showLoader = toSignal(this.showLoaderBuffer$)\n}\n","@if (showLoader()) {\n  <div class=\"loader-container\">\n    @if (!ref?.children?.length) {\n      <span class=\"loader\"></span>\n    }\n    <div #ref>\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core'\n\nimport { QuangFeature, QuangFeatureKind, quangFeature } from 'quang'\nimport { UrlData } from 'quang/shared'\n\nimport { LOADER_EXCLUDED_URLS } from './loader.interceptor'\n\n/**\n * @example\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideLoader([\n *       {\n *         url: 'assets',\n *         method: 'GET',\n *       },\n *     ])\n *   ]\n * }\n */\nexport function provideQuangLoaderExcludedUrls(excludedUrls: UrlData[]): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    {\n      provide: LOADER_EXCLUDED_URLS,\n      useValue: excludedUrls,\n    },\n  ])\n}\n\nexport function withLoaderExcludedUrls(excludedUrls: UrlData[]): QuangFeature<QuangFeatureKind.LoaderFeature> {\n  return quangFeature(QuangFeatureKind.LoaderFeature, [provideQuangLoaderExcludedUrls(excludedUrls)])\n}\n\n/**\n * @deprecated\n * @see {@link provideQuangLoaderExcludedUrls}\n */\nexport const provideLoader = provideQuangLoaderExcludedUrls\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-overlay-modal.mjs

@@ -99,10 +99,10 @@ class QuangModalComponent {
         this.overlayRef?.detach();
         this.overlayRef?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-modal', imports: [PortalModule, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }], propDecorators: { portal: [{

package/fesm2022/quang-overlay-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-overlay-modal.mjs","sources":["../../../projects/quang/overlay/modal/modal.component.ts","../../../projects/quang/overlay/modal/modal.component.html","../../../projects/quang/overlay/modal/quang-overlay-modal.ts"],"sourcesContent":["import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'\nimport { CdkPortal, PortalModule } from '@angular/cdk/portal'\nimport { NgStyle } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  ViewChild,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\n\nexport type ModalAnimationMode =\n  | 'SLIDE_FROM_LEFT_TO_RIGHT'\n  | 'SLIDE_FROM_RIGHT_TO_LEFT'\n  | 'SLIDE_TOP_TO_BOTTOM'\n  | 'SLIDE_BOTTOM_TO_TOP'\n  | 'FADE'\n\n@Component({\n  selector: 'quang-modal',\n  imports: [PortalModule, NgStyle],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Modal component that leverages Angular CDK's Overlay and Portal modules to create modals with flexible positioning and configurations.\n *\n * @usageNotes\n * The component can be shown by using its selector `quang-modal` with a boolean binded to the Angular directive `*ngIf`.\n *\n * Its structure is divided in 3 `ng-content` to set the header, body and footer.\n * Every section has its own selector and can be used to render custom content in a simple way.\n *\n * `header` section is placed on top, `footer` section is placed on bottom.\n *\n * @example\n * <quang-modal\n *   (backdropClick)=\"closeModal()\"\n *   *ngIf=\"showModal\"\n *   position=\"right\"\n * >\n *   <ng-container header>\n *     <h2>Modal header</h2>\n *   </ng-container>\n *   <ng-container body>\n *     <h3>Modal body</h3>\n *   </ng-container>\n *   <ng-container footer>\n *     <h3>Modal footer</h3>\n *   </ng-container>\n * </quang-modal>\n */\nexport class QuangModalComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(CdkPortal) public readonly portal?: CdkPortal\n\n  backdropClick = output<void>()\n\n  position = input.required<'right' | 'left' | 'center'>()\n\n  height = input<string>('80vh')\n\n  width = input<string>('80vw')\n\n  padding = input<string>('0 1rem')\n\n  containerClass = input<string>('')\n\n  animationMode = input<ModalAnimationMode>()\n\n  backgroundColor = input<string>()\n\n  showBackdrop = input<boolean>(true)\n\n  positionStrategy = computed(() => {\n    switch (this.position()) {\n      case 'right':\n        return this.overlay.position().global().right().top()\n      case 'left':\n        return this.overlay.position().global().left().top()\n      case 'center':\n      default:\n        return this.overlay.position().global().centerHorizontally().centerVertically()\n    }\n  })\n\n  animationClassEnter = computed(() => {\n    switch (this.animationMode()) {\n      case 'SLIDE_FROM_LEFT_TO_RIGHT':\n        return 'left-to-right-enter-active'\n      case 'SLIDE_FROM_RIGHT_TO_LEFT':\n        return 'right-to-left-enter-active'\n      case 'SLIDE_TOP_TO_BOTTOM':\n        return 'top-to-bottom-enter-active'\n      case 'SLIDE_BOTTOM_TO_TOP':\n        return 'top-to-bottom-enter-active'\n      case 'FADE':\n        return 'fade-enter-active'\n      default:\n        return ''\n    }\n  })\n\n  private readonly destroyRef = inject(DestroyRef)\n\n  private overlayConfig?: OverlayConfig\n\n  private overlayRef?: OverlayRef\n\n  constructor(private readonly overlay: Overlay) {}\n\n  ngAfterViewInit(): void {\n    this.overlayConfig = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy: this.positionStrategy(),\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      backdropClass: this.showBackdrop() ? undefined : '',\n    })\n    this.overlayRef = this.overlay.create(this.overlayConfig)\n    this.overlayRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.backdropClick.emit()\n      })\n    this.overlayRef?.attach(this.portal)\n  }\n\n  ngOnDestroy(): void {\n    this.closeModal()\n  }\n\n  closeModal(): void {\n    this.overlayRef?.detach()\n    this.overlayRef?.dispose()\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\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":"quang-overlay-modal.mjs","sources":["../../../projects/quang/overlay/modal/modal.component.ts","../../../projects/quang/overlay/modal/modal.component.html","../../../projects/quang/overlay/modal/quang-overlay-modal.ts"],"sourcesContent":["import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'\nimport { CdkPortal, PortalModule } from '@angular/cdk/portal'\nimport { NgStyle } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  OnDestroy,\n  ViewChild,\n  computed,\n  inject,\n  input,\n  output,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\n\nexport type ModalAnimationMode =\n  | 'SLIDE_FROM_LEFT_TO_RIGHT'\n  | 'SLIDE_FROM_RIGHT_TO_LEFT'\n  | 'SLIDE_TOP_TO_BOTTOM'\n  | 'SLIDE_BOTTOM_TO_TOP'\n  | 'FADE'\n\n@Component({\n  selector: 'quang-modal',\n  imports: [PortalModule, NgStyle],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Modal component that leverages Angular CDK's Overlay and Portal modules to create modals with flexible positioning and configurations.\n *\n * @usageNotes\n * The component can be shown by using its selector `quang-modal` with a boolean binded to the Angular directive `*ngIf`.\n *\n * Its structure is divided in 3 `ng-content` to set the header, body and footer.\n * Every section has its own selector and can be used to render custom content in a simple way.\n *\n * `header` section is placed on top, `footer` section is placed on bottom.\n *\n * @example\n * <quang-modal\n *   (backdropClick)=\"closeModal()\"\n *   *ngIf=\"showModal\"\n *   position=\"right\"\n * >\n *   <ng-container header>\n *     <h2>Modal header</h2>\n *   </ng-container>\n *   <ng-container body>\n *     <h3>Modal body</h3>\n *   </ng-container>\n *   <ng-container footer>\n *     <h3>Modal footer</h3>\n *   </ng-container>\n * </quang-modal>\n */\nexport class QuangModalComponent implements AfterViewInit, OnDestroy {\n  @ViewChild(CdkPortal) public readonly portal?: CdkPortal\n\n  backdropClick = output<void>()\n\n  position = input.required<'right' | 'left' | 'center'>()\n\n  height = input<string>('80vh')\n\n  width = input<string>('80vw')\n\n  padding = input<string>('0 1rem')\n\n  containerClass = input<string>('')\n\n  animationMode = input<ModalAnimationMode>()\n\n  backgroundColor = input<string>()\n\n  showBackdrop = input<boolean>(true)\n\n  positionStrategy = computed(() => {\n    switch (this.position()) {\n      case 'right':\n        return this.overlay.position().global().right().top()\n      case 'left':\n        return this.overlay.position().global().left().top()\n      case 'center':\n      default:\n        return this.overlay.position().global().centerHorizontally().centerVertically()\n    }\n  })\n\n  animationClassEnter = computed(() => {\n    switch (this.animationMode()) {\n      case 'SLIDE_FROM_LEFT_TO_RIGHT':\n        return 'left-to-right-enter-active'\n      case 'SLIDE_FROM_RIGHT_TO_LEFT':\n        return 'right-to-left-enter-active'\n      case 'SLIDE_TOP_TO_BOTTOM':\n        return 'top-to-bottom-enter-active'\n      case 'SLIDE_BOTTOM_TO_TOP':\n        return 'top-to-bottom-enter-active'\n      case 'FADE':\n        return 'fade-enter-active'\n      default:\n        return ''\n    }\n  })\n\n  private readonly destroyRef = inject(DestroyRef)\n\n  private overlayConfig?: OverlayConfig\n\n  private overlayRef?: OverlayRef\n\n  constructor(private readonly overlay: Overlay) {}\n\n  ngAfterViewInit(): void {\n    this.overlayConfig = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy: this.positionStrategy(),\n      scrollStrategy: this.overlay.scrollStrategies.block(),\n      backdropClass: this.showBackdrop() ? undefined : '',\n    })\n    this.overlayRef = this.overlay.create(this.overlayConfig)\n    this.overlayRef\n      .backdropClick()\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.backdropClick.emit()\n      })\n    this.overlayRef?.attach(this.portal)\n  }\n\n  ngOnDestroy(): void {\n    this.closeModal()\n  }\n\n  closeModal(): void {\n    this.overlayRef?.detach()\n    this.overlayRef?.dispose()\n  }\n}\n","<ng-template cdkPortal>\n  <div\n    [ngStyle]=\"{\n      '--quang-modal-panel-width': width(),\n      '--quang-modal-panel-height': height(),\n      '--quang-modal-panel-background': backgroundColor(),\n      '--quang-modal-panel-padding': padding(),\n    }\"\n    class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n  >\n    <div class=\"dialog__header\">\n      <ng-content select=\"[header]\"></ng-content>\n    </div>\n    <div class=\"dialog__body\">\n      <ng-content select=\"[body]\"></ng-content>\n    </div>\n    <div class=\"dialog__footer\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </div>\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/quang-overlay-popover.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, signal, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { QuangBaseOverlayDirective } from 'quang/overlay/shared';
-import { NgTemplateOutlet, NgClass, NgIf } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
@@ -38,12 +38,12 @@ class QuangPopoverComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [ngClass]=\"getPopoverPosition()\"\n  *ngIf=\"overlayContent()\"\n  class=\"popover-container\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"overlayContent()\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: payload(),\n    }\"\n  ></ng-container>\n</div>\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlayContent()) {\n  <div\n    [ngClass]=\"getPopoverPosition()\"\n    class=\"popover-container\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"overlayContent()\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: payload(),\n      }\"\n    ></ng-container>\n  </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"getPopoverPosition()\"\n  *ngIf=\"overlayContent()\"\n  class=\"popover-container\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"overlayContent()\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: payload(),\n    }\"\n  ></ng-container>\n</div>\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"] }]
+            args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (overlayContent()) {\n  <div\n    [ngClass]=\"getPopoverPosition()\"\n    class=\"popover-container\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"overlayContent()\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: payload(),\n      }\"\n    ></ng-container>\n  </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"] }]
         }] });
 
 class QuangPopoverDirective extends QuangBaseOverlayDirective {
@@ -52,10 +52,10 @@ class QuangPopoverDirective extends QuangBaseOverlayDirective {
         this.targetComponentType = signal(QuangPopoverComponent);
         this.content = input.required({ alias: 'quangPopover' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: QuangPopoverDirective, isStandalone: true, selector: "[quangPopover]", inputs: { content: { classPropertyName: "content", publicName: "quangPopover", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: QuangPopoverDirective, isStandalone: true, selector: "[quangPopover]", inputs: { content: { classPropertyName: "content", publicName: "quangPopover", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPopoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangPopover]',

package/fesm2022/quang-overlay-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n  selector: 'quang-popover',\n  imports: [NgTemplateOutlet, NgClass, NgIf],\n  templateUrl: './popover.component.html',\n  styleUrl: './popover.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n        [quangPopover]=\"popoverTest\"\n        [scrollCloseThreshold]=\"undefined\"\n        class=\"btn popover-test-button\"\n        overlayPosition=\"top\"\n        showMethod=\"click\"\n      >\n        {{ 'buttons.popover' | transloco }}\n        <span>CLICK</span>\n      </button>\n      <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n  overlayContent = input<TemplateRef<any> | null>(null)\n\n  positionPair = signal<ConnectionPositionPair | null>(null)\n\n  payload = input<any>()\n\n  getPopoverPosition = signal<string>('')\n\n  onChangePositionPair$ = toObservable(this.positionPair)\n    .pipe(takeUntilDestroyed())\n    .subscribe((positionPair) => {\n      const originX = positionPair?.originX\n      const originY = positionPair?.originY\n      if (originX && originY) {\n        this.getPopoverPosition.set(`${originX}-${originY}`)\n      } else {\n        this.getPopoverPosition.set('')\n      }\n    })\n}\n","<div\n  [ngClass]=\"getPopoverPosition()\"\n  *ngIf=\"overlayContent()\"\n  class=\"popover-container\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"overlayContent()\"\n    [ngTemplateOutletContext]=\"{\n      $implicit: payload(),\n    }\"\n  ></ng-container>\n</div>\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, TemplateRef, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangPopoverComponent } from './popover.component'\n\n@Directive({\n  selector: '[quangPopover]',\n})\nexport class QuangPopoverDirective extends QuangBaseOverlayDirective<QuangPopoverComponent> {\n  override targetComponentType = signal<ComponentType<QuangPopoverComponent> | undefined>(QuangPopoverComponent)\n\n  override content = input.required<TemplateRef<any> | null>({ alias: 'quangPopover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAcA;;;;;;;;;;;;;;AAcG;MACU,qBAAqB,CAAA;AAtBlC,IAAA,WAAA,GAAA;AAuBE,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAA0B,IAAI,CAAC;AAErD,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAgC,IAAI,CAAC;QAE1D,IAAO,CAAA,OAAA,GAAG,KAAK,EAAO;AAEtB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAS,EAAE,CAAC;AAEvC,QAAA,IAAA,CAAA,qBAAqB,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY;aACnD,IAAI,CAAC,kBAAkB,EAAE;AACzB,aAAA,SAAS,CAAC,CAAC,YAAY,KAAI;AAC1B,YAAA,MAAM,OAAO,GAAG,YAAY,EAAE,OAAO;AACrC,YAAA,MAAM,OAAO,GAAG,YAAY,EAAE,OAAO;AACrC,YAAA,IAAI,OAAO,IAAI,OAAO,EAAE;gBACtB,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAG,EAAA,OAAO,CAAI,CAAA,EAAA,OAAO,CAAE,CAAA,CAAC;;iBAC/C;AACL,gBAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;;AAEnC,SAAC,CAAC;AACL;+GApBY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,sWC7BlC,iRAYA,EAAA,MAAA,EAAA,CAAA,izDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDHY,gBAAgB,EAAE,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,oFAAE,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAoB9B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAtBjC,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,EAAA,eAAA,EAGzB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iRAAA,EAAA,MAAA,EAAA,CAAA,izDAAA,CAAA,EAAA;;;AEF3C,MAAO,qBAAsB,SAAQ,yBAAgD,CAAA;AAH3F,IAAA,WAAA,GAAA;;AAIW,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAmD,qBAAqB,CAAC;QAErG,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC,QAAQ,CAA0B,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC;AACtF;+GAJY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC3B,iBAAA;;;ACTD;;AAEG;;;;"}
+{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n  selector: 'quang-popover',\n  imports: [NgTemplateOutlet, NgClass],\n  templateUrl: './popover.component.html',\n  styleUrl: './popover.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n        [quangPopover]=\"popoverTest\"\n        [scrollCloseThreshold]=\"undefined\"\n        class=\"btn popover-test-button\"\n        overlayPosition=\"top\"\n        showMethod=\"click\"\n      >\n        {{ 'buttons.popover' | transloco }}\n        <span>CLICK</span>\n      </button>\n      <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n  overlayContent = input<TemplateRef<any> | null>(null)\n\n  positionPair = signal<ConnectionPositionPair | null>(null)\n\n  payload = input<any>()\n\n  getPopoverPosition = signal<string>('')\n\n  onChangePositionPair$ = toObservable(this.positionPair)\n    .pipe(takeUntilDestroyed())\n    .subscribe((positionPair) => {\n      const originX = positionPair?.originX\n      const originY = positionPair?.originY\n      if (originX && originY) {\n        this.getPopoverPosition.set(`${originX}-${originY}`)\n      } else {\n        this.getPopoverPosition.set('')\n      }\n    })\n}\n","@if (overlayContent()) {\n  <div\n    [ngClass]=\"getPopoverPosition()\"\n    class=\"popover-container\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"overlayContent()\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: payload(),\n      }\"\n    ></ng-container>\n  </div>\n}\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, TemplateRef, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangPopoverComponent } from './popover.component'\n\n@Directive({\n  selector: '[quangPopover]',\n})\nexport class QuangPopoverDirective extends QuangBaseOverlayDirective<QuangPopoverComponent> {\n  override targetComponentType = signal<ComponentType<QuangPopoverComponent> | undefined>(QuangPopoverComponent)\n\n  override content = input.required<TemplateRef<any> | null>({ alias: 'quangPopover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-overlay-shared.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, signal, Component, inject, DestroyRef, computed, ElementRef, HostListener, Directive, Optional, Inject, Injectable } from '@angular/core';
+import { input, signal, Component, inject, DestroyRef, computed, ElementRef, HostListener, Directive, DOCUMENT, Optional, Inject, Injectable } from '@angular/core';
 import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DEFAULT_RESIZE_TIME } from '@angular/cdk/scrolling';
-import { DOCUMENT } from '@angular/common';
 import { Subject, auditTime } from 'rxjs';
 import * as i1 from '@angular/cdk/platform';
 
@@ -14,10 +13,10 @@ class QuangBaseOverlayComponent {
         this.payload = input();
         this.positionPair = signal(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangBaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: QuangBaseOverlayComponent, isStandalone: true, selector: "quang-base-overlay-component", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangBaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: QuangBaseOverlayComponent, isStandalone: true, selector: "quang-base-overlay-component", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangBaseOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangBaseOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'quang-base-overlay-component',
@@ -198,10 +197,10 @@ class QuangBaseOverlayDirective {
     ngOnDestroy() {
         this.detachOverlay();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangBaseOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: QuangBaseOverlayDirective, isStandalone: true, inputs: { scrollCloseThreshold: { classPropertyName: "scrollCloseThreshold", publicName: "scrollCloseThreshold", isSignal: true, isRequired: false, transformFunction: null }, showMethod: { classPropertyName: "showMethod", publicName: "showMethod", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, quangOverlayPayload: { classPropertyName: "quangOverlayPayload", publicName: "quangOverlayPayload", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mouseenter": "onHover()", "mouseleave": "onLeave()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangBaseOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: QuangBaseOverlayDirective, isStandalone: true, inputs: { scrollCloseThreshold: { classPropertyName: "scrollCloseThreshold", publicName: "scrollCloseThreshold", isSignal: true, isRequired: false, transformFunction: null }, showMethod: { classPropertyName: "showMethod", publicName: "showMethod", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, quangOverlayPayload: { classPropertyName: "quangOverlayPayload", publicName: "quangOverlayPayload", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mouseenter": "onHover()", "mouseleave": "onLeave()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangBaseOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangBaseOverlayDirective, decorators: [{
             type: Directive
         }], propDecorators: { onClick: [{
                 type: HostListener,
@@ -338,10 +337,10 @@ class CustomViewportRuler {
             ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
             : { width: 0, height: 0 };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomViewportRuler, deps: [{ token: i1.Platform }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomViewportRuler, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CustomViewportRuler, deps: [{ token: i1.Platform }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CustomViewportRuler, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomViewportRuler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CustomViewportRuler, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Platform }, { type: i0.NgZone }, { type: undefined, decorators: [{