@ngneers/controls 0.0.1-pre4 → 0.0.1-pre6

package/fesm2022/ngneers-controls-paginator.mjs

@@ -20,30 +20,30 @@ class NgnPaginator extends NgnBase {
     /**
      * Total number of items to paginate.
      */
-    totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     /**
      * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.
      */
-    pageSize = model(...(ngDevMode ? [undefined, { debugName: "pageSize" }] : []));
+    pageSize = model(...(ngDevMode ? [undefined, { debugName: "pageSize" }] : /* istanbul ignore next */ []));
     /**
      * Possible page sizes to choose from.
      * @default [5, 10, 25, 50]
      */
-    possiblePageSizes = input([5, 10, 25, 50], { ...(ngDevMode ? { debugName: "possiblePageSizes" } : {}), transform: (sizes) => sizes.sort((a, b) => a - b) });
+    possiblePageSizes = input([5, 10, 25, 50], { ...(ngDevMode ? { debugName: "possiblePageSizes" } : /* istanbul ignore next */ {}), transform: (sizes) => sizes.sort((a, b) => a - b) });
     /**
      * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.
      * @default false
      */
-    fixedPageSize = input(false, ...(ngDevMode ? [{ debugName: "fixedPageSize" }] : []));
+    fixedPageSize = input(false, ...(ngDevMode ? [{ debugName: "fixedPageSize" }] : /* istanbul ignore next */ []));
     appliedPageSize = computed(() => this.pageSize() ||
         this.possiblePageSizes()[0] ||
-        throwExp('NgnPaginator', 'At least one page size must be provided'), ...(ngDevMode ? [{ debugName: "appliedPageSize" }] : []));
-    pageCount = computed(() => Math.ceil(this.totalItems() / this.appliedPageSize()), ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
-    pages = computed(() => Array.from({ length: this.pageCount() }, (_, i) => ({ page: i })), ...(ngDevMode ? [{ debugName: "pages" }] : []));
+        throwExp('NgnPaginator', 'At least one page size must be provided'), ...(ngDevMode ? [{ debugName: "appliedPageSize" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => Math.ceil(this.totalItems() / this.appliedPageSize()), ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Array.from({ length: this.pageCount() }, (_, i) => ({ page: i })), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
     pageSizeOptions = computed(() => this.possiblePageSizes().map(size => ({
         label: size.toString(),
         value: size,
-    })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     /**
      * Emits the current pagination state whenever the page or page size changes.
      */
@@ -52,7 +52,7 @@ class NgnPaginator extends NgnBase {
      * Current page index (zero-based).
      * @default 0
      */
-    page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
@@ -95,10 +95,10 @@ class NgnPaginator extends NgnBase {
             lineHeight: '0',
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnPaginator, isStandalone: true, selector: "ngn-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, possiblePageSizes: { classPropertyName: "possiblePageSizes", publicName: "possiblePageSizes", isSignal: true, isRequired: false, transformFunction: null }, fixedPageSize: { classPropertyName: "fixedPageSize", publicName: "fixedPageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", value: "value", page: "pageChange" }, providers: [provideSelf(NgnPaginator)], usesInheritance: true, ngImport: i0, template: "<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnItemView, selector: "ngn-item-view", inputs: ["idField", "items", "separator", "iconItemSeparator", "overflowStrategy", "overflowStrategyFreezeCount", "overflowStrategyIndex", "sameWidthItems"] }, { kind: "component", type: NgnSelect, selector: "ngn-select", inputs: ["popoverOptions", "options", "filter", "filterText", "filterIcon", "dropdownIcon", "virtual", "itemHeight", "editable", "editableAutoFilter", "multiple", "scrollToSelectedItemOnOpen", "tabindex", "checkbox"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NgnPaginator, isStandalone: true, selector: "ngn-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, possiblePageSizes: { classPropertyName: "possiblePageSizes", publicName: "possiblePageSizes", isSignal: true, isRequired: false, transformFunction: null }, fixedPageSize: { classPropertyName: "fixedPageSize", publicName: "fixedPageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", value: "value", page: "pageChange" }, providers: [provideSelf(NgnPaginator)], usesInheritance: true, ngImport: i0, template: "<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnItemView, selector: "ngn-item-view", inputs: ["idField", "items", "separator", "iconItemSeparator", "overflowStrategy", "overflowStrategyFreezeCount", "overflowStrategyIndex", "sameWidthItems"] }, { kind: "component", type: NgnSelect, selector: "ngn-select", inputs: ["popoverOptions", "options", "filter", "filterText", "filterIcon", "dropdownIcon", "virtual", "itemHeight", "editable", "editableAutoFilter", "multiple", "scrollToSelectedItemOnOpen", "tabindex", "checkbox"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPaginator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnPaginator, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-paginator', imports: [NgnButton, NgnIcon, NgnItemView, NgnSelect, NgnTemplate, NgStyle, NgnPt], providers: [provideSelf(NgnPaginator)], template: "<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], possiblePageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "possiblePageSizes", required: false }] }], fixedPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPageSize", required: false }] }], value: [{ type: i0.Output, args: ["value"] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });

package/fesm2022/ngneers-controls-paginator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-paginator.mjs","sources":["../../src/paginator/paginator.ts","../../src/paginator/paginator.html","../../src/paginator/ngneers-controls-paginator.ts"],"sourcesContent":["import { NgStyle } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnItemView } from '@ngneers/controls/item-view';\r\nimport { NgnSelect } from '@ngneers/controls/select';\r\nimport { throwExp } from '@ngneers/controls/utils';\r\nimport { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';\r\n\r\nimport type { PaginationState } from './types';\r\nimport type { NgnItem } from '@ngneers/controls/api';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-paginator',\r\n  templateUrl: './paginator.html',\r\n  imports: [NgnButton, NgnIcon, NgnItemView, NgnSelect, NgnTemplate, NgStyle, NgnPt],\r\n  providers: [provideSelf(NgnPaginator)],\r\n})\r\nexport class NgnPaginator extends NgnBase<'paginator'> {\r\n  protected readonly theme = this.injectThemeTemplate(paginatorControlTemplate, 'root');\r\n  protected readonly i18n = inject(I18n).translations;\r\n\r\n  /**\r\n   * Total number of items to paginate.\r\n   */\r\n  public readonly totalItems = input.required<number>();\r\n  /**\r\n   * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.\r\n   */\r\n  public readonly pageSize = model<number>();\r\n  /**\r\n   * Possible page sizes to choose from.\r\n   * @default [5, 10, 25, 50]\r\n   */\r\n  public readonly possiblePageSizes = input([5, 10, 25, 50], {\r\n    transform: (sizes: number[]) => sizes.sort((a, b) => a - b),\r\n  });\r\n  /**\r\n   * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.\r\n   * @default false\r\n   */\r\n  public readonly fixedPageSize = input(false);\r\n\r\n  protected readonly appliedPageSize = computed(\r\n    () =>\r\n      this.pageSize() ||\r\n      this.possiblePageSizes()[0] ||\r\n      throwExp('NgnPaginator', 'At least one page size must be provided')\r\n  );\r\n  protected readonly pageCount = computed(() =>\r\n    Math.ceil(this.totalItems() / this.appliedPageSize())\r\n  );\r\n  protected readonly pages = computed(() =>\r\n    Array.from({ length: this.pageCount() }, (_, i) => ({ page: i }))\r\n  );\r\n  protected readonly pageSizeOptions = computed<NgnItem[]>(() =>\r\n    this.possiblePageSizes().map(size => ({\r\n      label: size.toString(),\r\n      value: size,\r\n    }))\r\n  );\r\n\r\n  /**\r\n   * Emits the current pagination state whenever the page or page size changes.\r\n   */\r\n  public readonly value = output<PaginationState>();\r\n  /**\r\n   * Current page index (zero-based).\r\n   * @default 0\r\n   */\r\n  public readonly page = model(0);\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      const page = this.page();\r\n      const pageSize = this.appliedPageSize();\r\n      this.value.emit({\r\n        page: {\r\n          current: page,\r\n          size: pageSize,\r\n        },\r\n        slice: {\r\n          skip: page * pageSize,\r\n          take: pageSize,\r\n        },\r\n      });\r\n    });\r\n  }\r\n\r\n  protected previousPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.max(this.page() - amount, 0);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected nextPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.min(this.page() + amount, this.pageCount() - 1);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected getButtonFontStyles(page: number): {\r\n    [klass: string]: string;\r\n  } {\r\n    function getFontSizeMultiplier() {\r\n      const charCount = (page + 1).toString().length;\r\n      if (charCount <= 2) {\r\n        return 1;\r\n      }\r\n      return Math.pow(0.85, charCount - 2);\r\n    }\r\n\r\n    return {\r\n      fontSize: `${getFontSizeMultiplier()}em`,\r\n      width: 'calc(1rem + 2 * var(--padding))',\r\n      height: 'calc(1rem + 2 * var(--padding))',\r\n      lineHeight: '0',\r\n    };\r\n  }\r\n}\r\n","<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngneers-controls-paginator.mjs","sources":["../../src/paginator/paginator.ts","../../src/paginator/paginator.html","../../src/paginator/ngneers-controls-paginator.ts"],"sourcesContent":["import { NgStyle } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnItemView } from '@ngneers/controls/item-view';\r\nimport { NgnSelect } from '@ngneers/controls/select';\r\nimport { throwExp } from '@ngneers/controls/utils';\r\nimport { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';\r\n\r\nimport type { PaginationState } from './types';\r\nimport type { NgnItem } from '@ngneers/controls/api';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-paginator',\r\n  templateUrl: './paginator.html',\r\n  imports: [NgnButton, NgnIcon, NgnItemView, NgnSelect, NgnTemplate, NgStyle, NgnPt],\r\n  providers: [provideSelf(NgnPaginator)],\r\n})\r\nexport class NgnPaginator extends NgnBase<'paginator'> {\r\n  protected readonly theme = this.injectThemeTemplate(paginatorControlTemplate, 'root');\r\n  protected readonly i18n = inject(I18n).translations;\r\n\r\n  /**\r\n   * Total number of items to paginate.\r\n   */\r\n  public readonly totalItems = input.required<number>();\r\n  /**\r\n   * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.\r\n   */\r\n  public readonly pageSize = model<number>();\r\n  /**\r\n   * Possible page sizes to choose from.\r\n   * @default [5, 10, 25, 50]\r\n   */\r\n  public readonly possiblePageSizes = input([5, 10, 25, 50], {\r\n    transform: (sizes: number[]) => sizes.sort((a, b) => a - b),\r\n  });\r\n  /**\r\n   * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.\r\n   * @default false\r\n   */\r\n  public readonly fixedPageSize = input(false);\r\n\r\n  protected readonly appliedPageSize = computed(\r\n    () =>\r\n      this.pageSize() ||\r\n      this.possiblePageSizes()[0] ||\r\n      throwExp('NgnPaginator', 'At least one page size must be provided')\r\n  );\r\n  protected readonly pageCount = computed(() =>\r\n    Math.ceil(this.totalItems() / this.appliedPageSize())\r\n  );\r\n  protected readonly pages = computed(() =>\r\n    Array.from({ length: this.pageCount() }, (_, i) => ({ page: i }))\r\n  );\r\n  protected readonly pageSizeOptions = computed<NgnItem[]>(() =>\r\n    this.possiblePageSizes().map(size => ({\r\n      label: size.toString(),\r\n      value: size,\r\n    }))\r\n  );\r\n\r\n  /**\r\n   * Emits the current pagination state whenever the page or page size changes.\r\n   */\r\n  public readonly value = output<PaginationState>();\r\n  /**\r\n   * Current page index (zero-based).\r\n   * @default 0\r\n   */\r\n  public readonly page = model(0);\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      const page = this.page();\r\n      const pageSize = this.appliedPageSize();\r\n      this.value.emit({\r\n        page: {\r\n          current: page,\r\n          size: pageSize,\r\n        },\r\n        slice: {\r\n          skip: page * pageSize,\r\n          take: pageSize,\r\n        },\r\n      });\r\n    });\r\n  }\r\n\r\n  protected previousPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.max(this.page() - amount, 0);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected nextPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.min(this.page() + amount, this.pageCount() - 1);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected getButtonFontStyles(page: number): {\r\n    [klass: string]: string;\r\n  } {\r\n    function getFontSizeMultiplier() {\r\n      const charCount = (page + 1).toString().length;\r\n      if (charCount <= 2) {\r\n        return 1;\r\n      }\r\n      return Math.pow(0.85, charCount - 2);\r\n    }\r\n\r\n    return {\r\n      fontSize: `${getFontSizeMultiplier()}em`,\r\n      width: 'calc(1rem + 2 * var(--padding))',\r\n      height: 'calc(1rem + 2 * var(--padding))',\r\n      lineHeight: '0',\r\n    };\r\n  }\r\n}\r\n","<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-popover.mjs

@@ -24,37 +24,37 @@ class NgnPopover extends NgnBase {
      *
      * You probably want to react to openChange events from outside to update your variable accordingly.
      */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /**
      * The element to which the popover is anchored.
      */
-    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
     /**
      * The popover options.
      */
-    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
     /**
      * Set to true for scrollable/shrink-able content
      */
-    hasShrinkableContent = input(false, { ...(ngDevMode ? { debugName: "hasShrinkableContent" } : {}), transform: booleanAttribute });
+    hasShrinkableContent = input(false, { ...(ngDevMode ? { debugName: "hasShrinkableContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * How the drawer closes depending on user interaction.
      * @default 'any'
      */
-    closeBy = input('any', ...(ngDevMode ? [{ debugName: "closeBy" }] : []));
-    lazyContent = contentChild('lazy', ...(ngDevMode ? [{ debugName: "lazyContent" }] : []));
+    closeBy = input('any', ...(ngDevMode ? [{ debugName: "closeBy" }] : /* istanbul ignore next */ []));
+    lazyContent = contentChild('lazy', ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
     _content = viewChild.required('content');
-    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), ...(ngDevMode ? [{ debugName: "closeByPopover" }] : []));
-    isFullyClosed = signal(true, ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : []));
+    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), ...(ngDevMode ? [{ debugName: "closeByPopover" }] : /* istanbul ignore next */ []));
+    isFullyClosed = signal(true, ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : /* istanbul ignore next */ []));
     _skipEmitCloseEvent = false;
     _triggeredByInput = false;
     appliedOptions = computed(() => ({
         cache: false,
         ...this.options(),
-    }), ...(ngDevMode ? [{ debugName: "appliedOptions" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "appliedOptions" }] : /* istanbul ignore next */ []));
     _injector = inject(Injector);
     _popoverRef = viewChild.required('popover');
-    _popover = computed(() => this._popoverRef().nativeElement, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
+    _popover = computed(() => this._popoverRef().nativeElement, ...(ngDevMode ? [{ debugName: "_popover" }] : /* istanbul ignore next */ []));
     _autoPos = computedWithPrevious(prev => {
         prev?.stop();
         const popoverEl = this._popover();
@@ -151,10 +151,10 @@ class NgnPopover extends NgnBase {
             this.isFullyClosed.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: NgnPopover, isStandalone: true, selector: "ngn-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hasShrinkableContent: { classPropertyName: "hasShrinkableContent", publicName: "hasShrinkableContent", isSignal: true, isRequired: false, transformFunction: null }, closeBy: { classPropertyName: "closeBy", publicName: "closeBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closing: "closing", open: "openChange" }, host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [provideSelf(NgnPopover)], queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.2", type: NgnPopover, isStandalone: true, selector: "ngn-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hasShrinkableContent: { classPropertyName: "hasShrinkableContent", publicName: "hasShrinkableContent", isSignal: true, isRequired: false, transformFunction: null }, closeBy: { classPropertyName: "closeBy", publicName: "closeBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closing: "closing", open: "openChange" }, host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [provideSelf(NgnPopover)], queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnPopover, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-popover', imports: [NgnPt, NgnDefer], providers: [provideSelf(NgnPopover)], host: {
                         '(click)': '$event.stopPropagation()',

package/fesm2022/ngneers-controls-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../src/popover/popover.ts","../../src/popover/popover.html","../../src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  ElementRef,\r\n  inject,\r\n  Injector,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  TemplateRef,\r\n  untracked,\r\n  viewChild,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport {\r\n  type PopoverCloseBy,\r\n  toPopoverCloseBy,\r\n  autoPositionElement,\r\n  type AutoPositioningHandle,\r\n  type Openable,\r\n  type Anchor,\r\n} from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';\r\nimport { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';\r\n\r\nimport type { PopoverOptions } from './types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-popover',\r\n  templateUrl: './popover.html',\r\n  imports: [NgnPt, NgnDefer],\r\n  providers: [provideSelf(NgnPopover)],\r\n  host: {\r\n    '(click)': '$event.stopPropagation()',\r\n  },\r\n})\r\nexport class NgnPopover extends NgnBase<'popover'> implements Openable {\r\n  protected readonly theme = this.injectThemeTemplate(popoverControlTemplate);\r\n\r\n  /**\r\n   * Emits when the popover has fully closed.\r\n   */\r\n  public readonly closed = output();\r\n  /**\r\n   * Emits when the popover is closed.\r\n   */\r\n  public readonly closing = output();\r\n  /**\r\n   * Shows or hides the popover.\r\n   *\r\n   * You probably want to react to openChange events from outside to update your variable accordingly.\r\n   */\r\n  public readonly open = model<boolean>(false);\r\n  /**\r\n   * The element to which the popover is anchored.\r\n   */\r\n  public readonly anchor = input.required<Anchor>();\r\n  /**\r\n   * The popover options.\r\n   */\r\n  public readonly options = input<PopoverOptions>();\r\n  /**\r\n   * Set to true for scrollable/shrink-able content\r\n   */\r\n  public readonly hasShrinkableContent = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * How the drawer closes depending on user interaction.\r\n   * @default 'any'\r\n   */\r\n  public readonly closeBy = input<PopoverCloseBy>('any');\r\n\r\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\r\n  protected readonly _content = viewChild.required<ElementRef<HTMLElement>>('content');\r\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\r\n  protected readonly isFullyClosed = signal(true);\r\n\r\n  private _skipEmitCloseEvent = false;\r\n  private _triggeredByInput = false;\r\n\r\n  protected readonly appliedOptions = computed(() => ({\r\n    cache: false,\r\n    ...this.options(),\r\n  }));\r\n\r\n  private readonly _injector = inject(Injector);\r\n  private readonly _popoverRef = viewChild.required<ElementRef<HTMLElement>>('popover');\r\n  private readonly _popover = computed(() => this._popoverRef().nativeElement);\r\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\r\n    prev?.stop();\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      return undefined;\r\n    }\r\n    return autoPositionElement(this.anchor(), popoverEl, {\r\n      injector: this._injector,\r\n      stopped: true,\r\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\r\n      placement: this.appliedOptions()?.placement,\r\n      offset: this.appliedOptions()?.padding,\r\n      hasShrinkableContent: this.hasShrinkableContent(),\r\n    });\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    explicitAfterRenderEffect([this.open], ([open]) => {\r\n      if (!open) {\r\n        this._triggeredByInput = true;\r\n        this.hide();\r\n      }\r\n      if (open) {\r\n        this._triggeredByInput = true;\r\n        this.show();\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Opens the drawer. Alternatively, you can also set the `open` input to `true`.\r\n   */\r\n  public show() {\r\n    untracked(() => {\r\n      if (this.open() && !this._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._autoPos()?.start();\r\n      this._popover().togglePopover(true);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes the drawer. Alternatively, you can also set the `open` input to `false`.\r\n   */\r\n  public hide(emitCloseEvent = true) {\r\n    untracked(() => {\r\n      if (!this.open() && !this._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._skipEmitCloseEvent = !emitCloseEvent;\r\n      this._autoPos()?.stop();\r\n      this._popover().togglePopover(false);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.\r\n   */\r\n  public toggle() {\r\n    if (untracked(this.open)) {\r\n      this.hide();\r\n    } else {\r\n      this.show();\r\n    }\r\n  }\r\n\r\n  protected onToggle(event: Event) {\r\n    const evt = event as ToggleEvent;\r\n    if (evt.newState === 'closed') {\r\n      this.open.set(false);\r\n\r\n      if (this._skipEmitCloseEvent) {\r\n        this._skipEmitCloseEvent = false;\r\n      } else {\r\n        this.closing.emit();\r\n      }\r\n      this._autoPos()?.stop();\r\n\r\n      requestAnimationFrame(() => {\r\n        const allAnimationsDone = Promise.all(\r\n          this._content()\r\n            .nativeElement.getAnimations()\r\n            .map(x => x.finished)\r\n        );\r\n        allAnimationsDone\r\n          .then(() => {\r\n            this.isFullyClosed.set(true);\r\n            this.closed.emit();\r\n          })\r\n          .catch(() => {\r\n            // ignore cancelled animation\r\n          });\r\n      });\r\n    } else {\r\n      this.open.set(true);\r\n      this.isFullyClosed.set(false);\r\n    }\r\n  }\r\n}\r\n","<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAgCA;;AAEG;AAWG,MAAO,UAAW,SAAQ,OAAkB,CAAA;AAC7B,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,sBAAsB,CAAC;AAE3E;;AAEG;IACa,MAAM,GAAG,MAAM,EAAE;AACjC;;AAEG;IACa,OAAO,GAAG,MAAM,EAAE;AAClC;;;;AAIG;AACa,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,gDAAC;AAC5C;;AAEG;AACa,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAAU;AACjD;;AAEG;IACa,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAkB;AACjD;;AAEG;IACa,oBAAoB,GAAG,KAAK,CAAC,KAAK,iEAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACpF;;;AAGG;AACa,IAAA,OAAO,GAAG,KAAK,CAAiB,KAAK,mDAAC;AAEnC,IAAA,WAAW,GAAG,YAAY,CAAuB,MAAM,uDAAC;AACxD,IAAA,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAA0B,SAAS,CAAC;AACjE,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,0DAAC;AACjE,IAAA,aAAa,GAAG,MAAM,CAAC,IAAI,yDAAC;IAEvC,mBAAmB,GAAG,KAAK;IAC3B,iBAAiB,GAAG,KAAK;AAEd,IAAA,cAAc,GAAG,QAAQ,CAAC,OAAO;AAClD,QAAA,KAAK,EAAE,KAAK;QACZ,GAAG,IAAI,CAAC,OAAO,EAAE;AAClB,KAAA,CAAC,0DAAC;AAEc,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAA0B,SAAS,CAAC;AACpE,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,aAAa,oDAAC;AAC3D,IAAA,QAAQ,GAAG,oBAAoB,CAAoC,IAAI,IAAG;QACzF,IAAI,EAAE,IAAI,EAAE;AACZ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE;QACjC,IAAI,CAAC,SAAS,EAAE;AACd,YAAA,OAAO,SAAS;QAClB;QACA,OAAO,mBAAmB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE;YACnD,QAAQ,EAAE,IAAI,CAAC,SAAS;AACxB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,eAAe,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,eAAe;AACvD,YAAA,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,SAAS;AAC3C,YAAA,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO;AACtC,YAAA,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAAE;AAClD,SAAA,CAAC;AACJ,IAAA,CAAC,CAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AAEP,QAAA,yBAAyB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAI;YAChD,IAAI,CAAC,IAAI,EAAE;AACT,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;gBAC7B,IAAI,CAAC,IAAI,EAAE;YACb;YACA,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;gBAC7B,IAAI,CAAC,IAAI,EAAE;YACb;AACF,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACI,IAAI,GAAA;QACT,SAAS,CAAC,MAAK;YACb,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC1C;YACF;AACA,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;AAC9B,YAAA,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE;YACxB,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;AACrC,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACI,IAAI,CAAC,cAAc,GAAG,IAAI,EAAA;QAC/B,SAAS,CAAC,MAAK;YACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC3C;YACF;AACA,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;AAC9B,YAAA,IAAI,CAAC,mBAAmB,GAAG,CAAC,cAAc;AAC1C,YAAA,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE;YACvB,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;AACtC,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACI,MAAM,GAAA;AACX,QAAA,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACxB,IAAI,CAAC,IAAI,EAAE;QACb;aAAO;YACL,IAAI,CAAC,IAAI,EAAE;QACb;IACF;AAEU,IAAA,QAAQ,CAAC,KAAY,EAAA;QAC7B,MAAM,GAAG,GAAG,KAAoB;AAChC,QAAA,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AAEpB,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,gBAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;YAClC;iBAAO;AACL,gBAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB;AACA,YAAA,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE;YAEvB,qBAAqB,CAAC,MAAK;gBACzB,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,CACnC,IAAI,CAAC,QAAQ;qBACV,aAAa,CAAC,aAAa;qBAC3B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CACxB;gBACD;qBACG,IAAI,CAAC,MAAK;AACT,oBAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,oBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,gBAAA,CAAC;qBACA,KAAK,CAAC,MAAK;;AAEZ,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC,CAAC;QACJ;aAAO;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B;IACF;uGAzJW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,SAAA,EALV,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxCtC,qyBA8BA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDSY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAMd,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,aAAa,WAEd,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAA,SAAA,EACf,CAAC,WAAW,CAAA,UAAA,CAAY,CAAC,EAAA,IAAA,EAC9B;AACJ,wBAAA,SAAS,EAAE,0BAA0B;AACtC,qBAAA,EAAA,QAAA,EAAA,qyBAAA,EAAA;4tBAqCmE,MAAM,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACA,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAaR,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE9FtF;;AAEG;;;;"}
+{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../src/popover/popover.ts","../../src/popover/popover.html","../../src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  ElementRef,\r\n  inject,\r\n  Injector,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  TemplateRef,\r\n  untracked,\r\n  viewChild,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport {\r\n  type PopoverCloseBy,\r\n  toPopoverCloseBy,\r\n  autoPositionElement,\r\n  type AutoPositioningHandle,\r\n  type Openable,\r\n  type Anchor,\r\n} from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';\r\nimport { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';\r\n\r\nimport type { PopoverOptions } from './types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-popover',\r\n  templateUrl: './popover.html',\r\n  imports: [NgnPt, NgnDefer],\r\n  providers: [provideSelf(NgnPopover)],\r\n  host: {\r\n    '(click)': '$event.stopPropagation()',\r\n  },\r\n})\r\nexport class NgnPopover extends NgnBase<'popover'> implements Openable {\r\n  protected readonly theme = this.injectThemeTemplate(popoverControlTemplate);\r\n\r\n  /**\r\n   * Emits when the popover has fully closed.\r\n   */\r\n  public readonly closed = output();\r\n  /**\r\n   * Emits when the popover is closed.\r\n   */\r\n  public readonly closing = output();\r\n  /**\r\n   * Shows or hides the popover.\r\n   *\r\n   * You probably want to react to openChange events from outside to update your variable accordingly.\r\n   */\r\n  public readonly open = model<boolean>(false);\r\n  /**\r\n   * The element to which the popover is anchored.\r\n   */\r\n  public readonly anchor = input.required<Anchor>();\r\n  /**\r\n   * The popover options.\r\n   */\r\n  public readonly options = input<PopoverOptions>();\r\n  /**\r\n   * Set to true for scrollable/shrink-able content\r\n   */\r\n  public readonly hasShrinkableContent = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * How the drawer closes depending on user interaction.\r\n   * @default 'any'\r\n   */\r\n  public readonly closeBy = input<PopoverCloseBy>('any');\r\n\r\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\r\n  protected readonly _content = viewChild.required<ElementRef<HTMLElement>>('content');\r\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\r\n  protected readonly isFullyClosed = signal(true);\r\n\r\n  private _skipEmitCloseEvent = false;\r\n  private _triggeredByInput = false;\r\n\r\n  protected readonly appliedOptions = computed(() => ({\r\n    cache: false,\r\n    ...this.options(),\r\n  }));\r\n\r\n  private readonly _injector = inject(Injector);\r\n  private readonly _popoverRef = viewChild.required<ElementRef<HTMLElement>>('popover');\r\n  private readonly _popover = computed(() => this._popoverRef().nativeElement);\r\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\r\n    prev?.stop();\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      return undefined;\r\n    }\r\n    return autoPositionElement(this.anchor(), popoverEl, {\r\n      injector: this._injector,\r\n      stopped: true,\r\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\r\n      placement: this.appliedOptions()?.placement,\r\n      offset: this.appliedOptions()?.padding,\r\n      hasShrinkableContent: this.hasShrinkableContent(),\r\n    });\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    explicitAfterRenderEffect([this.open], ([open]) => {\r\n      if (!open) {\r\n        this._triggeredByInput = true;\r\n        this.hide();\r\n      }\r\n      if (open) {\r\n        this._triggeredByInput = true;\r\n        this.show();\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Opens the drawer. Alternatively, you can also set the `open` input to `true`.\r\n   */\r\n  public show() {\r\n    untracked(() => {\r\n      if (this.open() && !this._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._autoPos()?.start();\r\n      this._popover().togglePopover(true);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes the drawer. Alternatively, you can also set the `open` input to `false`.\r\n   */\r\n  public hide(emitCloseEvent = true) {\r\n    untracked(() => {\r\n      if (!this.open() && !this._triggeredByInput) {\r\n        return;\r\n      }\r\n      this._triggeredByInput = false;\r\n      this._skipEmitCloseEvent = !emitCloseEvent;\r\n      this._autoPos()?.stop();\r\n      this._popover().togglePopover(false);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Toggles the drawer open or closed. Alternatively, you can also set the `open` input accordingly.\r\n   */\r\n  public toggle() {\r\n    if (untracked(this.open)) {\r\n      this.hide();\r\n    } else {\r\n      this.show();\r\n    }\r\n  }\r\n\r\n  protected onToggle(event: Event) {\r\n    const evt = event as ToggleEvent;\r\n    if (evt.newState === 'closed') {\r\n      this.open.set(false);\r\n\r\n      if (this._skipEmitCloseEvent) {\r\n        this._skipEmitCloseEvent = false;\r\n      } else {\r\n        this.closing.emit();\r\n      }\r\n      this._autoPos()?.stop();\r\n\r\n      requestAnimationFrame(() => {\r\n        const allAnimationsDone = Promise.all(\r\n          this._content()\r\n            .nativeElement.getAnimations()\r\n            .map(x => x.finished)\r\n        );\r\n        allAnimationsDone\r\n          .then(() => {\r\n            this.isFullyClosed.set(true);\r\n            this.closed.emit();\r\n          })\r\n          .catch(() => {\r\n            // ignore cancelled animation\r\n          });\r\n      });\r\n    } else {\r\n      this.open.set(true);\r\n      this.isFullyClosed.set(false);\r\n    }\r\n  }\r\n}\r\n","<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'root'\"\r\n  #popover\r\n  [attr.popover]=\"closeByPopover()\"\r\n  (toggle)=\"onToggle($event)\"\r\n  [style.min-height]=\"\r\n    hasShrinkableContent()\r\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\r\n      : 'fit-content'\r\n  \"\r\n>\r\n  <div\r\n    #content\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      content: true,\r\n      'content-closing': !this.open() && !this.isFullyClosed(),\r\n    }\"\r\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"lazyContent()\"\r\n      [open]=\"open() || !isFullyClosed()\"\r\n      [cache]=\"appliedOptions().cache\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </ngn-defer>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-progress.mjs

@@ -16,32 +16,32 @@ class NgnProgress extends NgnBase {
     /**
      * The current progress value (0-100).
      */
-    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Whether the progress indicator is indeterminate.
      */
-    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : {}), transform: booleanAttribute });
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether the progress indicator is circular.
      */
-    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : {}), transform: booleanAttribute });
+    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Radius of the circular progress indicator (in px).
      */
-    radius = input(40, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    radius = input(40, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     /**
      * Thickness of the circular progress indicator stroke (in px).
      */
-    thickness = input(8, ...(ngDevMode ? [{ debugName: "thickness" }] : []));
-    safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100), ...(ngDevMode ? [{ debugName: "safeValue" }] : []));
-    safeRadius = computed(() => Math.max(this.radius(), 0), ...(ngDevMode ? [{ debugName: "safeRadius" }] : []));
-    safeThickness = computed(() => Math.max(this.thickness(), 1), ...(ngDevMode ? [{ debugName: "safeThickness" }] : []));
+    thickness = input(8, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100), ...(ngDevMode ? [{ debugName: "safeValue" }] : /* istanbul ignore next */ []));
+    safeRadius = computed(() => Math.max(this.radius(), 0), ...(ngDevMode ? [{ debugName: "safeRadius" }] : /* istanbul ignore next */ []));
+    safeThickness = computed(() => Math.max(this.thickness(), 1), ...(ngDevMode ? [{ debugName: "safeThickness" }] : /* istanbul ignore next */ []));
     svgSize = computed(() => {
         // Full size of the SVG in px.
         return this.safeRadius() * 2 + this.safeThickness();
-    }, ...(ngDevMode ? [{ debugName: "svgSize" }] : []));
-    svgCenter = computed(() => this.svgSize() / 2, ...(ngDevMode ? [{ debugName: "svgCenter" }] : []));
-    circumference = computed(() => TAU * this.safeRadius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []));
+    svgCenter = computed(() => this.svgSize() / 2, ...(ngDevMode ? [{ debugName: "svgCenter" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => TAU * this.safeRadius(), ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
     strokeDasharray = computed(() => {
         const circumference = this.circumference();
         // Arc length for indeterminate mode.
@@ -49,21 +49,21 @@ class NgnProgress extends NgnBase {
             return `${circumference * 0.28} ${circumference}`;
         }
         return `${circumference}`;
-    }, ...(ngDevMode ? [{ debugName: "strokeDasharray" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "strokeDasharray" }] : /* istanbul ignore next */ []));
     strokeDashoffset = computed(() => {
         const circumference = this.circumference();
         if (this.indeterminate()) {
             return `${circumference * 0.72}`;
         }
         return `${circumference * (1 - this.safeValue() / 100)}`;
-    }, ...(ngDevMode ? [{ debugName: "strokeDashoffset" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "strokeDashoffset" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnProgress, isStandalone: true, selector: "ngn-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "indeterminate() ? null : safeValue()", "style.--progress.%": "indeterminate() ? null : safeValue()" } }, providers: [provideSelf(NgnProgress)], usesInheritance: true, ngImport: i0, template: "@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NgnProgress, isStandalone: true, selector: "ngn-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "indeterminate() ? null : safeValue()", "style.--progress.%": "indeterminate() ? null : safeValue()" } }, providers: [provideSelf(NgnProgress)], usesInheritance: true, ngImport: i0, template: "@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnProgress, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnProgress, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-progress', imports: [NgnPt], providers: [provideSelf(NgnProgress)], host: {
                         role: 'progressbar',

package/fesm2022/ngneers-controls-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-progress.mjs","sources":["../../src/progress/progress.ts","../../src/progress/progress.html","../../src/progress/ngneers-controls-progress.ts"],"sourcesContent":["import {\r\n  Component,\r\n  input,\r\n  ChangeDetectionStrategy,\r\n  computed,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';\r\n\r\nconst TAU = Math.PI * 2;\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-progress',\r\n  templateUrl: './progress.html',\r\n  imports: [NgnPt],\r\n  providers: [provideSelf(NgnProgress)],\r\n  host: {\r\n    role: 'progressbar',\r\n    '[attr.aria-valuemin]': '0',\r\n    '[attr.aria-valuemax]': '100',\r\n    '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',\r\n    '[style.--progress.%]': 'indeterminate() ? null : safeValue()',\r\n  },\r\n})\r\nexport class NgnProgress extends NgnBase<'progress'> {\r\n  protected readonly theme = this.injectThemeTemplate(progressControlTemplate, {\r\n    root: true,\r\n    indeterminate: () => this.indeterminate(),\r\n    circular: () => this.circular(),\r\n  });\r\n\r\n  /**\r\n   * The current progress value (0-100).\r\n   */\r\n  public readonly value = input<number>(0);\r\n  /**\r\n   * Whether the progress indicator is indeterminate.\r\n   */\r\n  public readonly indeterminate = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Whether the progress indicator is circular.\r\n   */\r\n  public readonly circular = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Radius of the circular progress indicator (in px).\r\n   */\r\n  public readonly radius = input<number>(40);\r\n\r\n  /**\r\n   * Thickness of the circular progress indicator stroke (in px).\r\n   */\r\n  public readonly thickness = input<number>(8);\r\n\r\n  protected readonly safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\r\n\r\n  protected readonly safeRadius = computed(() => Math.max(this.radius(), 0));\r\n  protected readonly safeThickness = computed(() => Math.max(this.thickness(), 1));\r\n\r\n  protected readonly svgSize = computed(() => {\r\n    // Full size of the SVG in px.\r\n    return this.safeRadius() * 2 + this.safeThickness();\r\n  });\r\n\r\n  protected readonly svgCenter = computed(() => this.svgSize() / 2);\r\n\r\n  protected readonly circumference = computed(() => TAU * this.safeRadius());\r\n\r\n  protected readonly strokeDasharray = computed(() => {\r\n    const circumference = this.circumference();\r\n    // Arc length for indeterminate mode.\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.28} ${circumference}`;\r\n    }\r\n    return `${circumference}`;\r\n  });\r\n\r\n  protected readonly strokeDashoffset = computed(() => {\r\n    const circumference = this.circumference();\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.72}`;\r\n    }\r\n    return `${circumference * (1 - this.safeValue() / 100)}`;\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n}\r\n","@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAUA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC;AAEvB;;AAEG;AAeG,MAAO,WAAY,SAAQ,OAAmB,CAAA;AAC/B,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;AAC3E,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,QAAQ,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE;AAChC,KAAA,CAAC;AAEF;;AAEG;AACa,IAAA,KAAK,GAAG,KAAK,CAAS,CAAC,iDAAC;AACxC;;AAEG;IACa,aAAa,GAAG,KAAK,CAAC,KAAK,0DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC7E;;AAEG;IACa,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExE;;AAEG;AACa,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,kDAAC;AAE1C;;AAEG;AACa,IAAA,SAAS,GAAG,KAAK,CAAS,CAAC,qDAAC;IAEzB,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEpE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,sDAAC;AACvD,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,yDAAC;AAE7D,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;;QAEzC,OAAO,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE;AACrD,IAAA,CAAC,mDAAC;AAEiB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,qDAAC;AAE9C,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,yDAAC;AAEvD,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;;AAE1C,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,OAAO,GAAG,aAAa,GAAG,IAAI,CAAA,CAAA,EAAI,aAAa,EAAE;QACnD;QACA,OAAO,CAAA,EAAG,aAAa,CAAA,CAAE;AAC3B,IAAA,CAAC,2DAAC;AAEiB,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AAClD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAC1C,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;AACxB,YAAA,OAAO,CAAA,EAAG,aAAa,GAAG,IAAI,EAAE;QAClC;AACA,QAAA,OAAO,CAAA,EAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,CAAC,EAAE;AAC1D,IAAA,CAAC,4DAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;IACT;uGA/DW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,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,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,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,aAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,oBAAA,EAAA,sCAAA,EAAA,oBAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,SAAA,EATX,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBvC,onCAqCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlBY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAUJ,WAAW,EAAA,UAAA,EAAA,CAAA;kBAdvB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,cAAc,EAAA,OAAA,EAEf,CAAC,KAAK,CAAC,EAAA,SAAA,EACL,CAAC,WAAW,CAAA,WAAA,CAAa,CAAC,EAAA,IAAA,EAC/B;AACJ,wBAAA,IAAI,EAAE,aAAa;AACnB,wBAAA,sBAAsB,EAAE,GAAG;AAC3B,wBAAA,sBAAsB,EAAE,KAAK;AAC7B,wBAAA,sBAAsB,EAAE,sCAAsC;AAC9D,wBAAA,sBAAsB,EAAE,sCAAsC;AAC/D,qBAAA,EAAA,QAAA,EAAA,onCAAA,EAAA;;;AE3BH;;AAEG;;;;"}
+{"version":3,"file":"ngneers-controls-progress.mjs","sources":["../../src/progress/progress.ts","../../src/progress/progress.html","../../src/progress/ngneers-controls-progress.ts"],"sourcesContent":["import {\r\n  Component,\r\n  input,\r\n  ChangeDetectionStrategy,\r\n  computed,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';\r\n\r\nconst TAU = Math.PI * 2;\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-progress',\r\n  templateUrl: './progress.html',\r\n  imports: [NgnPt],\r\n  providers: [provideSelf(NgnProgress)],\r\n  host: {\r\n    role: 'progressbar',\r\n    '[attr.aria-valuemin]': '0',\r\n    '[attr.aria-valuemax]': '100',\r\n    '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',\r\n    '[style.--progress.%]': 'indeterminate() ? null : safeValue()',\r\n  },\r\n})\r\nexport class NgnProgress extends NgnBase<'progress'> {\r\n  protected readonly theme = this.injectThemeTemplate(progressControlTemplate, {\r\n    root: true,\r\n    indeterminate: () => this.indeterminate(),\r\n    circular: () => this.circular(),\r\n  });\r\n\r\n  /**\r\n   * The current progress value (0-100).\r\n   */\r\n  public readonly value = input<number>(0);\r\n  /**\r\n   * Whether the progress indicator is indeterminate.\r\n   */\r\n  public readonly indeterminate = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Whether the progress indicator is circular.\r\n   */\r\n  public readonly circular = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Radius of the circular progress indicator (in px).\r\n   */\r\n  public readonly radius = input<number>(40);\r\n\r\n  /**\r\n   * Thickness of the circular progress indicator stroke (in px).\r\n   */\r\n  public readonly thickness = input<number>(8);\r\n\r\n  protected readonly safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\r\n\r\n  protected readonly safeRadius = computed(() => Math.max(this.radius(), 0));\r\n  protected readonly safeThickness = computed(() => Math.max(this.thickness(), 1));\r\n\r\n  protected readonly svgSize = computed(() => {\r\n    // Full size of the SVG in px.\r\n    return this.safeRadius() * 2 + this.safeThickness();\r\n  });\r\n\r\n  protected readonly svgCenter = computed(() => this.svgSize() / 2);\r\n\r\n  protected readonly circumference = computed(() => TAU * this.safeRadius());\r\n\r\n  protected readonly strokeDasharray = computed(() => {\r\n    const circumference = this.circumference();\r\n    // Arc length for indeterminate mode.\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.28} ${circumference}`;\r\n    }\r\n    return `${circumference}`;\r\n  });\r\n\r\n  protected readonly strokeDashoffset = computed(() => {\r\n    const circumference = this.circumference();\r\n    if (this.indeterminate()) {\r\n      return `${circumference * 0.72}`;\r\n    }\r\n    return `${circumference * (1 - this.safeValue() / 100)}`;\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n}\r\n","@if (circular()) {\r\n  <svg\r\n    [attr.width]=\"svgSize()\"\r\n    [attr.height]=\"svgSize()\"\r\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'svg'\"\r\n  >\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'track'\"\r\n    />\r\n    <circle\r\n      [attr.cx]=\"svgCenter()\"\r\n      [attr.cy]=\"svgCenter()\"\r\n      [attr.r]=\"safeRadius()\"\r\n      [attr.stroke-width]=\"safeThickness()\"\r\n      fill=\"none\"\r\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\r\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'fill'\"\r\n    />\r\n  </svg>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\r\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\r\n    @if (indeterminate()) {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\r\n    }\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}