@daffodil/design 0.93.1 → 0.94.0

package/fesm2022/daffodil-design-paginator.mjs

@@ -1,15 +1,13 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { input, output, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { RouterLink, RouterModule } from '@angular/router';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
 const DaffPaginatorNumberOfPagesErrorMessage = 'The numberOfPages in the daff-paginator must not be less than 1';
 const DaffPaginatorPageOutOfRangeErrorMessage = 'The numberOfPages in the daff-paginator should not be less than the currentPage';
 
-/* eslint-disable quote-props */
 const visiblePageRange = 2;
 class DaffPaginatorComponent {
     constructor() {
@@ -21,62 +19,71 @@ class DaffPaginatorComponent {
          * @docs-private
          */
         this.faChevronLeft = faChevronLeft;
+        /**
+         * The total number of pages the paginator tracks. This number can change dynamically, but the end user is responsible for keeping `numberOfPages`
+         * and `currentPage` in sync.
+         *
+         * For example, if the `numberOfPages` is dynamically changed to a value less than the `currentPage`, the paginator will break.
+         */
+        this.numberOfPages = input.required(...(ngDevMode ? [{ debugName: "numberOfPages" }] : /* istanbul ignore next */ []));
+        /**
+         * The currently selected page.
+         */
+        this.currentPage = input.required(...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
         /**
          * Replace the paginator buttons with links. `url` is required if using this mode.
          */
-        this.linkMode = false;
+        this.linkMode = input(false, ...(ngDevMode ? [{ debugName: "linkMode" }] : /* istanbul ignore next */ []));
+        /**
+         * The url to which to navigate if the paginator is in link mode.
+         * This paginator component will set the page query param.
+         */
+        this.url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
         /**
          * The query param to which the paginator component will set the current page value in link mode.
          */
-        this.queryParam = 'page';
+        this.queryParam = input('page', ...(ngDevMode ? [{ debugName: "queryParam" }] : /* istanbul ignore next */ []));
         /**
          * Emits when the current page changes with the new current page.
          */
-        this.notifyPageChange = new EventEmitter();
-    }
-    /**
-     * Determines when ellipsis after the first page number should show.
-     *
-     * @docs-private
-     */
-    get _showFirstEllipsis() {
-        return this.currentPage >= visiblePageRange + 2;
-    }
-    /**
-     * Determines when ellipsis before the final page number should show.
-     *
-     * @docs-private
-     */
-    get _showLastEllipsis() {
-        return this.currentPage < (this.numberOfPages - visiblePageRange);
-    }
-    /**
-     * Determines when the Previous button should be disabled.
-     *
-     * @docs-private
-     */
-    get _disablePrev() {
-        return this.currentPage === 1;
-    }
-    /**
-     * Determines when the Next button should be disabled.
-     *
-     * @docs-private
-     */
-    get _disableNext() {
-        return this.currentPage === this.numberOfPages;
-    }
-    /**
-     * @docs-private
-     */
-    ngOnChanges() {
-        if (this.numberOfPages < 1) {
-            throw new Error(DaffPaginatorNumberOfPagesErrorMessage);
-        }
-        else if (this.numberOfPages < this.currentPage) {
-            throw new Error(DaffPaginatorPageOutOfRangeErrorMessage);
-        }
-        this._numberOfPagesArray = this.numberOfPages < 2 ? [] : Array(this.numberOfPages - 2).fill(this.numberOfPages - 2).map((x, i) => i + 2);
+        this.notifyPageChange = output();
+        /**
+         * @docs-private
+         */
+        this._numberOfPagesArray = computed(() => {
+            const numberOfPages = this.numberOfPages();
+            if (numberOfPages < 1) {
+                throw new Error(DaffPaginatorNumberOfPagesErrorMessage);
+            }
+            else if (numberOfPages < this.currentPage()) {
+                throw new Error(DaffPaginatorPageOutOfRangeErrorMessage);
+            }
+            return numberOfPages < 2 ? [] : Array(numberOfPages - 2).fill(numberOfPages - 2).map((x, i) => i + 2);
+        }, ...(ngDevMode ? [{ debugName: "_numberOfPagesArray" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines when ellipsis after the first page number should show.
+         *
+         * @docs-private
+         */
+        this._showFirstEllipsis = computed(() => this.currentPage() >= visiblePageRange + 2, ...(ngDevMode ? [{ debugName: "_showFirstEllipsis" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines when ellipsis before the final page number should show.
+         *
+         * @docs-private
+         */
+        this._showLastEllipsis = computed(() => this.currentPage() < (this.numberOfPages() - visiblePageRange), ...(ngDevMode ? [{ debugName: "_showLastEllipsis" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines when the Previous button should be disabled.
+         *
+         * @docs-private
+         */
+        this._disablePrev = computed(() => this.currentPage() === 1, ...(ngDevMode ? [{ debugName: "_disablePrev" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines when the Next button should be disabled.
+         *
+         * @docs-private
+         */
+        this._disableNext = computed(() => this.currentPage() === this.numberOfPages(), ...(ngDevMode ? [{ debugName: "_disableNext" }] : /* istanbul ignore next */ []));
     }
     /**
      * Emits the previous page number through notifyPageChange Output.
@@ -84,7 +91,7 @@ class DaffPaginatorComponent {
      * @docs-private
      */
     _onNotifyPrevPageChange() {
-        this.notifyPageChange.emit(this.currentPage - 1);
+        this.notifyPageChange.emit(this.currentPage() - 1);
     }
     /**
      * Emits the next page number through notifyPageChange Output.
@@ -92,7 +99,7 @@ class DaffPaginatorComponent {
      * @docs-private
      */
     _onNotifyNextPageChange() {
-        this.notifyPageChange.emit(this.currentPage + 1);
+        this.notifyPageChange.emit(this.currentPage() + 1);
     }
     /**
      * Emits a pageNumber to notifyPageChange Output.
@@ -108,7 +115,7 @@ class DaffPaginatorComponent {
      * @docs-private
      */
     _isSelected(page) {
-        return page === this.currentPage;
+        return page === this.currentPage();
     }
     /**
      * Determines if the given page number should be shown. The two additional 'or' conditionals are needed
@@ -117,43 +124,31 @@ class DaffPaginatorComponent {
      * @docs-private
      */
     _showNumber(pageNumber) {
-        return Math.abs(this.currentPage - pageNumber) < visiblePageRange
-            || (this.currentPage <= visiblePageRange && pageNumber <= 2 * visiblePageRange)
-            || (this.currentPage > this.numberOfPages - visiblePageRange && pageNumber > this.numberOfPages - 2 * visiblePageRange);
+        return Math.abs(this.currentPage() - pageNumber) < visiblePageRange
+            || (this.currentPage() <= visiblePageRange && pageNumber <= 2 * visiblePageRange)
+            || (this.currentPage() > this.numberOfPages() - visiblePageRange && pageNumber > this.numberOfPages() - 2 * visiblePageRange);
     }
     /**
      * @docs-private
      */
     _buildPageQueryParams(page) {
         return {
-            [this.queryParam]: page,
+            [this.queryParam()]: page,
         };
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffPaginatorComponent, isStandalone: true, selector: "daff-paginator", inputs: { numberOfPages: "numberOfPages", currentPage: "currentPage", linkMode: "linkMode", url: "url", queryParam: "queryParam" }, outputs: { notifyPageChange: "notifyPageChange" }, host: { attributes: { "role": "navigation" }, classAttribute: "daff-paginator" }, usesOnChanges: true, ngImport: i0, template: "@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode) {\n  @if (!_disablePrev) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray; track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages < 2)) {\n  @if (!linkMode) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages)\">\n        <span>{{ numberOfPages }}</span>\n    </button>\n  }\n  @if (linkMode) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages)\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      attr.aria-label=\"Go to Page {{numberOfPages}}\">\n        <span>{{ numberOfPages }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode) {\n  @if (!_disableNext) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n", styles: [":host{display:flex;gap:.25rem}.daff-paginator__page-link,.daff-paginator__previous,.daff-paginator__next{text-decoration:none}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;gap:.5rem;height:2rem;padding:0 .5rem}.daff-paginator__previous[disabled],.daff-paginator__next[disabled]{cursor:not-allowed;opacity:.5}.daff-paginator__ellipsis{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;min-width:2rem;height:2rem;padding:0 .25rem;position:relative}.daff-paginator__page-link span{z-index:2}.daff-paginator__page-link:after{content:\"\";border-radius:.25rem;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s}@media(hover:hover){.daff-paginator__page-link:hover:after{opacity:1}}.daff-paginator__page-link:active:after,.daff-paginator__page-link.selected:after{opacity:1}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffPaginatorComponent, isStandalone: true, selector: "daff-paginator", inputs: { numberOfPages: { classPropertyName: "numberOfPages", publicName: "numberOfPages", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, linkMode: { classPropertyName: "linkMode", publicName: "linkMode", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, queryParam: { classPropertyName: "queryParam", publicName: "queryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifyPageChange: "notifyPageChange" }, host: { attributes: { "role": "navigation" }, classAttribute: "daff-paginator" }, ngImport: i0, template: "@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disablePrev()) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url()\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev()) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode()) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url()\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray(); track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode()) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode()) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url()\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages() < 2)) {\n  @if (!linkMode()) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages()}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages())\">\n        <span>{{ numberOfPages() }}</span>\n    </button>\n  }\n  @if (linkMode()) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url()\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages())\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      attr.aria-label=\"Go to Page {{numberOfPages()}}\">\n        <span>{{ numberOfPages() }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode()) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disableNext()) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url()\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext()) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n", styles: [":host{display:flex;gap:.25rem}.daff-paginator__page-link,.daff-paginator__previous,.daff-paginator__next{text-decoration:none}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;gap:.5rem;height:2rem;padding:0 .5rem}.daff-paginator__previous[disabled],.daff-paginator__next[disabled]{cursor:not-allowed;opacity:.5}.daff-paginator__ellipsis{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;min-width:2rem;height:2rem;padding:0 .25rem;position:relative}.daff-paginator__page-link span{z-index:2}.daff-paginator__page-link:after{content:\"\";border-radius:.25rem;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s}@media(hover:hover){.daff-paginator__page-link:hover:after{opacity:1}}.daff-paginator__page-link:active:after,.daff-paginator__page-link.selected:after{opacity:1}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-paginator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'class': 'daff-paginator',
-                        'role': 'navigation',
+                        class: 'daff-paginator',
+                        role: 'navigation',
                     }, imports: [
                         FaIconComponent,
-                        RouterModule,
-                    ], template: "@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode) {\n  @if (!_disablePrev) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray; track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages < 2)) {\n  @if (!linkMode) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages)\">\n        <span>{{ numberOfPages }}</span>\n    </button>\n  }\n  @if (linkMode) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages)\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      attr.aria-label=\"Go to Page {{numberOfPages}}\">\n        <span>{{ numberOfPages }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode) {\n  @if (!_disableNext) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n", styles: [":host{display:flex;gap:.25rem}.daff-paginator__page-link,.daff-paginator__previous,.daff-paginator__next{text-decoration:none}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;gap:.5rem;height:2rem;padding:0 .5rem}.daff-paginator__previous[disabled],.daff-paginator__next[disabled]{cursor:not-allowed;opacity:.5}.daff-paginator__ellipsis{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;min-width:2rem;height:2rem;padding:0 .25rem;position:relative}.daff-paginator__page-link span{z-index:2}.daff-paginator__page-link:after{content:\"\";border-radius:.25rem;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s}@media(hover:hover){.daff-paginator__page-link:hover:after{opacity:1}}.daff-paginator__page-link:active:after,.daff-paginator__page-link.selected:after{opacity:1}\n"] }]
-        }], propDecorators: { numberOfPages: [{
-                type: Input
-            }], currentPage: [{
-                type: Input
-            }], linkMode: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], queryParam: [{
-                type: Input
-            }], notifyPageChange: [{
-                type: Output
-            }] } });
+                        RouterLink,
+                    ], template: "@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disablePrev()) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url()\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev()) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode()) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url()\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray(); track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode()) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode()) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url()\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages() < 2)) {\n  @if (!linkMode()) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages()}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages())\">\n        <span>{{ numberOfPages() }}</span>\n    </button>\n  }\n  @if (linkMode()) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url()\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages())\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      attr.aria-label=\"Go to Page {{numberOfPages()}}\">\n        <span>{{ numberOfPages() }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode()) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disableNext()) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url()\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext()) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n", styles: [":host{display:flex;gap:.25rem}.daff-paginator__page-link,.daff-paginator__previous,.daff-paginator__next{text-decoration:none}.daff-paginator__previous,.daff-paginator__next{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;gap:.5rem;height:2rem;padding:0 .5rem}.daff-paginator__previous[disabled],.daff-paginator__next[disabled]{cursor:not-allowed;opacity:.5}.daff-paginator__ellipsis{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center}.daff-paginator__page-link{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:0;border-radius:.25rem;min-width:2rem;height:2rem;padding:0 .25rem;position:relative}.daff-paginator__page-link span{z-index:2}.daff-paginator__page-link:after{content:\"\";border-radius:.25rem;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s}@media(hover:hover){.daff-paginator__page-link:hover:after{opacity:1}}.daff-paginator__page-link:active:after,.daff-paginator__page-link.selected:after{opacity:1}\n"] }]
+        }], propDecorators: { numberOfPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfPages", required: true }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }], linkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkMode", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], queryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParam", required: false }] }], notifyPageChange: [{ type: i0.Output, args: ["notifyPageChange"] }] } });
 
 /**
  * @deprecated in favor of {@link DAFF_PAGINATOR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.

package/fesm2022/daffodil-design-paginator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-paginator.mjs","sources":["../../../libs/design/paginator/src/utils/paginator-errors.ts","../../../libs/design/paginator/src/paginator/paginator.component.ts","../../../libs/design/paginator/src/paginator/paginator.component.html","../../../libs/design/paginator/src/paginator.module.ts","../../../libs/design/paginator/src/paginator.ts","../../../libs/design/paginator/src/daffodil-design-paginator.ts"],"sourcesContent":["export const DaffPaginatorNumberOfPagesErrorMessage = 'The numberOfPages in the daff-paginator must not be less than 1';\nexport const DaffPaginatorPageOutOfRangeErrorMessage = 'The numberOfPages in the daff-paginator should not be less than the currentPage';\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  OnChanges,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport {\n  Params,\n  RouterModule,\n} from '@angular/router';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faChevronRight,\n  faChevronLeft,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffPaginatorNumberOfPagesErrorMessage,\n  DaffPaginatorPageOutOfRangeErrorMessage,\n} from '../utils/paginator-errors';\n\nconst visiblePageRange = 2;\n\n@Component({\n  selector: 'daff-paginator',\n  styleUrls: ['./paginator.component.scss'],\n  templateUrl: './paginator.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'daff-paginator',\n    'role': 'navigation',\n  },\n  imports: [\n    FaIconComponent,\n    RouterModule,\n  ],\n})\nexport class DaffPaginatorComponent implements OnChanges {\n  /**\n   * @docs-private\n   */\n  faChevronRight = faChevronRight;\n  /**\n   * @docs-private\n   */\n  faChevronLeft = faChevronLeft;\n\n  /**\n   * The total number of pages the paginator tracks. This number can change dynamically, but the end user is responsible for keeping `numberOfPages`\n   * and `currentPage` in sync.\n   *\n   * For example, if the `numberOfPages` is dynamically changed to a value less than the `currentPage`, the paginator will break.\n   */\n  @Input() numberOfPages: number;\n\n  /**\n   * The currently selected page.\n   */\n  @Input() currentPage: number;\n\n  /**\n   * Replace the paginator buttons with links. `url` is required if using this mode.\n   */\n  @Input() linkMode = false;\n\n  /**\n   * The url to which to navigate if the paginator is in link mode.\n   * This paginator component will set the page query param.\n   */\n  @Input() url?: string;\n\n  /**\n   * The query param to which the paginator component will set the current page value in link mode.\n   */\n  @Input() queryParam = 'page';\n\n  /**\n   * @docs-private\n   */\n  _numberOfPagesArray: number[];\n\n  /**\n   * Emits when the current page changes with the new current page.\n   */\n  @Output() notifyPageChange: EventEmitter<any> = new EventEmitter();\n\n  /**\n   * Determines when ellipsis after the first page number should show.\n   *\n   * @docs-private\n   */\n  get _showFirstEllipsis(): boolean {\n    return this.currentPage >= visiblePageRange+2;\n  }\n\n  /**\n   * Determines when ellipsis before the final page number should show.\n   *\n   * @docs-private\n   */\n  get _showLastEllipsis(): boolean {\n    return this.currentPage < (this.numberOfPages - visiblePageRange);\n  }\n\n  /**\n   * Determines when the Previous button should be disabled.\n   *\n   * @docs-private\n   */\n  get _disablePrev(): boolean {\n    return this.currentPage === 1;\n  }\n\n  /**\n   * Determines when the Next button should be disabled.\n   *\n   * @docs-private\n   */\n  get _disableNext(): boolean {\n    return this.currentPage === this.numberOfPages;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnChanges() {\n    if(this.numberOfPages < 1) {\n      throw new Error(DaffPaginatorNumberOfPagesErrorMessage);\n    } else if(this.numberOfPages < this.currentPage) {\n      throw new Error(DaffPaginatorPageOutOfRangeErrorMessage);\n    }\n\n    this._numberOfPagesArray = this.numberOfPages < 2 ? [] : Array(this.numberOfPages-2).fill(this.numberOfPages-2).map((x,i)=>i+2);\n  }\n\n  /**\n   * Emits the previous page number through notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyPrevPageChange() {\n    this.notifyPageChange.emit(this.currentPage - 1);\n  }\n\n  /**\n   * Emits the next page number through notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyNextPageChange() {\n    this.notifyPageChange.emit(this.currentPage + 1);\n  }\n\n  /**\n   * Emits a pageNumber to notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyPageChange(pageNumber: number) {\n    this.notifyPageChange.emit(pageNumber);\n  }\n\n  /**\n   * A simple function that determines if the given page number is the current page number.\n   *\n   * @docs-private\n   */\n  _isSelected(page: number): boolean {\n    return page === this.currentPage;\n  }\n\n  /**\n   * Determines if the given page number should be shown. The two additional 'or' conditionals are needed\n   * so the paginator retains the same total width at the extreme page numbers (1 and numberOfPages).\n   *\n   * @docs-private\n   */\n  _showNumber(pageNumber: number): boolean {\n    return Math.abs(this.currentPage - pageNumber) < visiblePageRange\n      || (this.currentPage <= visiblePageRange && pageNumber <= 2*visiblePageRange)\n      || (this.currentPage > this.numberOfPages - visiblePageRange && pageNumber > this.numberOfPages - 2*visiblePageRange);\n  }\n\n  /**\n   * @docs-private\n   */\n  _buildPageQueryParams(page: number): Params {\n    return {\n      [this.queryParam]: page,\n    };\n  }\n}\n","@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode) {\n  @if (!_disablePrev) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray; track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages < 2)) {\n  @if (!linkMode) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages)\">\n        <span>{{ numberOfPages }}</span>\n    </button>\n  }\n  @if (linkMode) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages)\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages)\"\n      attr.aria-label=\"Go to Page {{numberOfPages}}\">\n        <span>{{ numberOfPages }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode) {\n  @if (!_disableNext) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffPaginatorComponent } from './paginator/paginator.component';\n\n/**\n * @deprecated in favor of {@link DAFF_PAGINATOR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    RouterModule,\n    FontAwesomeModule,\n    DaffPaginatorComponent,\n  ],\n  exports: [\n    DaffPaginatorComponent,\n  ],\n})\nexport class DaffPaginatorModule {}\n","import { DaffPaginatorComponent } from './paginator/paginator.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_PAGINATOR_COMPONENTS = <const> [\n  DaffPaginatorComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-paginator.mjs","sources":["../../../libs/design/paginator/src/utils/paginator-errors.ts","../../../libs/design/paginator/src/paginator/paginator.component.ts","../../../libs/design/paginator/src/paginator/paginator.component.html","../../../libs/design/paginator/src/paginator.module.ts","../../../libs/design/paginator/src/paginator.ts","../../../libs/design/paginator/src/daffodil-design-paginator.ts"],"sourcesContent":["export const DaffPaginatorNumberOfPagesErrorMessage = 'The numberOfPages in the daff-paginator must not be less than 1';\nexport const DaffPaginatorPageOutOfRangeErrorMessage = 'The numberOfPages in the daff-paginator should not be less than the currentPage';\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  computed,\n} from '@angular/core';\nimport {\n  Params,\n  RouterLink,\n} from '@angular/router';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport {\n  faChevronRight,\n  faChevronLeft,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffPaginatorNumberOfPagesErrorMessage,\n  DaffPaginatorPageOutOfRangeErrorMessage,\n} from '../utils/paginator-errors';\n\nconst visiblePageRange = 2;\n\n@Component({\n  selector: 'daff-paginator',\n  templateUrl: './paginator.component.html',\n  styleUrl: './paginator.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'daff-paginator',\n    role: 'navigation',\n  },\n  imports: [\n    FaIconComponent,\n    RouterLink,\n  ],\n})\nexport class DaffPaginatorComponent {\n  /**\n   * @docs-private\n   */\n  faChevronRight = faChevronRight;\n  /**\n   * @docs-private\n   */\n  faChevronLeft = faChevronLeft;\n\n  /**\n   * The total number of pages the paginator tracks. This number can change dynamically, but the end user is responsible for keeping `numberOfPages`\n   * and `currentPage` in sync.\n   *\n   * For example, if the `numberOfPages` is dynamically changed to a value less than the `currentPage`, the paginator will break.\n   */\n  numberOfPages = input.required<number>();\n\n  /**\n   * The currently selected page.\n   */\n  currentPage = input.required<number>();\n\n  /**\n   * Replace the paginator buttons with links. `url` is required if using this mode.\n   */\n  linkMode = input(false);\n\n  /**\n   * The url to which to navigate if the paginator is in link mode.\n   * This paginator component will set the page query param.\n   */\n  url = input<string>();\n\n  /**\n   * The query param to which the paginator component will set the current page value in link mode.\n   */\n  queryParam = input('page');\n\n  /**\n   * Emits when the current page changes with the new current page.\n   */\n  notifyPageChange = output<any>();\n\n  /**\n   * @docs-private\n   */\n  _numberOfPagesArray = computed<number[]>(() => {\n    const numberOfPages = this.numberOfPages();\n\n    if(numberOfPages < 1) {\n      throw new Error(DaffPaginatorNumberOfPagesErrorMessage);\n    } else if(numberOfPages < this.currentPage()) {\n      throw new Error(DaffPaginatorPageOutOfRangeErrorMessage);\n    }\n\n    return numberOfPages < 2 ? [] : Array(numberOfPages-2).fill(numberOfPages-2).map((x,i)=>i+2);\n  });\n\n  /**\n   * Determines when ellipsis after the first page number should show.\n   *\n   * @docs-private\n   */\n  _showFirstEllipsis = computed<boolean>(() => this.currentPage() >= visiblePageRange+2);\n\n  /**\n   * Determines when ellipsis before the final page number should show.\n   *\n   * @docs-private\n   */\n  _showLastEllipsis = computed<boolean>(() => this.currentPage() < (this.numberOfPages() - visiblePageRange));\n\n  /**\n   * Determines when the Previous button should be disabled.\n   *\n   * @docs-private\n   */\n  _disablePrev = computed<boolean>(() => this.currentPage() === 1);\n\n  /**\n   * Determines when the Next button should be disabled.\n   *\n   * @docs-private\n   */\n  _disableNext = computed<boolean>(() => this.currentPage() === this.numberOfPages());\n\n  /**\n   * Emits the previous page number through notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyPrevPageChange() {\n    this.notifyPageChange.emit(this.currentPage() - 1);\n  }\n\n  /**\n   * Emits the next page number through notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyNextPageChange() {\n    this.notifyPageChange.emit(this.currentPage() + 1);\n  }\n\n  /**\n   * Emits a pageNumber to notifyPageChange Output.\n   *\n   * @docs-private\n   */\n  _onNotifyPageChange(pageNumber: number) {\n    this.notifyPageChange.emit(pageNumber);\n  }\n\n  /**\n   * A simple function that determines if the given page number is the current page number.\n   *\n   * @docs-private\n   */\n  _isSelected(page: number): boolean {\n    return page === this.currentPage();\n  }\n\n  /**\n   * Determines if the given page number should be shown. The two additional 'or' conditionals are needed\n   * so the paginator retains the same total width at the extreme page numbers (1 and numberOfPages).\n   *\n   * @docs-private\n   */\n  _showNumber(pageNumber: number): boolean {\n    return Math.abs(this.currentPage() - pageNumber) < visiblePageRange\n      || (this.currentPage() <= visiblePageRange && pageNumber <= 2*visiblePageRange)\n      || (this.currentPage() > this.numberOfPages() - visiblePageRange && pageNumber > this.numberOfPages() - 2*visiblePageRange);\n  }\n\n  /**\n   * @docs-private\n   */\n  _buildPageQueryParams(page: number): Params {\n    return {\n      [this.queryParam()]: page,\n    };\n  }\n}\n","@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__previous\"\n    [disabled]=\"_disablePrev()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Previous Page\"\n    (click)=\"_onNotifyPrevPageChange()\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disablePrev()) {\n    <a class=\"daff-paginator__previous\"\n      attr.aria-label=\"Go to Previous Page\"\n      [routerLink]=\"url()\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() - 1)\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </a>\n  }\n  @if (_disablePrev()) {\n    <span class=\"daff-paginator__previous disabled\"\n      attr.aria-label=\"Go to Previous Page\"\n      [attr.disabled]=\"true\">\n      <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n    </span>\n  }\n}\n\n@if (!linkMode()) {\n  <button type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(1)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Page 1\"\n    (click)=\"_onNotifyPageChange(1)\">\n      <span>1</span>\n  </button>\n}\n\n@if (linkMode()) {\n  <a class=\"daff-paginator__page-link\"\n    [routerLink]=\"url()\"\n    [queryParams]=\"_buildPageQueryParams(1)\"\n    queryParamsHandling=\"merge\"\n    [class.selected]=\"_isSelected(1)\"\n    attr.aria-label=\"Go to Page 1\">\n      <span>1</span>\n  </a>\n}\n\n@if (_showFirstEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@for (pageNumber of _numberOfPagesArray(); track pageNumber) {\n  @if (_showNumber(pageNumber)) {\n    @if (!linkMode()) {\n      <button type=\"button\" class=\"daff-paginator__page-link\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        [attr.data-page-number]=\"pageNumber\"\n        tabindex=\"0\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\"\n        aria-current=\"_isSelected(pageNumber)\"\n        (click)=\"_onNotifyPageChange(pageNumber)\">\n        <span>{{ pageNumber }}</span>\n      </button>\n    }\n    @if (linkMode()) {\n      <a class=\"daff-paginator__page-link\"\n        [attr.data-page-number]=\"pageNumber\"\n        [routerLink]=\"url()\"\n        [queryParams]=\"_buildPageQueryParams(pageNumber)\"\n        queryParamsHandling=\"merge\"\n        [class.selected]=\"_isSelected(pageNumber)\"\n        attr.aria-label=\"Go to Page {{pageNumber}}\">\n          <span>{{ pageNumber }}</span>\n      </a>\n    }\n  }\n}\n\n@if (_showLastEllipsis()) {\n  <span class=\"daff-paginator__ellipsis\">...</span>\n}\n\n@if (!(numberOfPages() < 2)) {\n  @if (!linkMode()) {\n    <button type=\"button\" class=\"daff-paginator__page-link\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      tabindex=\"0\"\n      attr.aria-label=\"Go To Page {{numberOfPages()}}\"\n      (click)=\"_onNotifyPageChange(numberOfPages())\">\n        <span>{{ numberOfPages() }}</span>\n    </button>\n  }\n  @if (linkMode()) {\n    <a class=\"daff-paginator__page-link\"\n      [routerLink]=\"url()\"\n      [queryParams]=\"_buildPageQueryParams(numberOfPages())\"\n      queryParamsHandling=\"merge\"\n      [class.selected]=\"_isSelected(numberOfPages())\"\n      attr.aria-label=\"Go to Page {{numberOfPages()}}\">\n        <span>{{ numberOfPages() }}</span>\n    </a>\n  }\n}\n\n@if (!linkMode()) {\n  <button class=\"daff-paginator__next\"\n    [disabled]=\"_disableNext()\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go to Next Page\"\n    (click)=\"_onNotifyNextPageChange()\">\n    Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </button>\n}\n@if (linkMode()) {\n  @if (!_disableNext()) {\n    <a class=\"daff-paginator__next\"\n      [routerLink]=\"url()\"\n      attr.aria-label=\"Go to Next Page\"\n      queryParamsHandling=\"merge\"\n      [queryParams]=\"_buildPageQueryParams(currentPage() + 1)\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </a>\n  }\n\n  @if (_disableNext()) {\n    <span class=\"daff-paginator__next disabled\"\n      attr.aria-label=\"Go to Next Page\"\n      [attr.disabled]=\"true\">\n      <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n    </span>\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffPaginatorComponent } from './paginator/paginator.component';\n\n/**\n * @deprecated in favor of {@link DAFF_PAGINATOR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    RouterModule,\n    FontAwesomeModule,\n    DaffPaginatorComponent,\n  ],\n  exports: [\n    DaffPaginatorComponent,\n  ],\n})\nexport class DaffPaginatorModule {}\n","import { DaffPaginatorComponent } from './paginator/paginator.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_PAGINATOR_COMPONENTS = <const> [\n  DaffPaginatorComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/daffodil-design-progress-bar.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, booleanAttribute, Output, Input, ContentChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directive, contentChild, input, computed, booleanAttribute, output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffColorableDirective } from '@daffodil/design';
 
@@ -37,10 +37,29 @@ let daffProgressBarId = 0;
  * ```
  */
 class DaffProgressBarComponent {
-    constructor(_changeDetectorRef, colorable) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor(colorable) {
         this.colorable = colorable;
-        this._percentage = 0;
+        /**
+         * @docs-private
+         */
+        this._label = contentChild(DaffProgressBarLabelDirective, ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
+        /**
+         * Sets the percentage completion of the progression,
+         * expressed as a whole number between 0 and 100.
+         */
+        this.percentage = input(0, { ...(ngDevMode ? { debugName: "percentage" } : /* istanbul ignore next */ {}), transform: (val) => clamp(val, 0, 100) });
+        /**
+         * @docs-private
+         */
+        this.ariaValueNow = computed(() => this.indeterminate() ? null : this.percentage(), ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
+        /**
+         * @docs-private
+         */
+        this.ariaLabelledBy = computed(() => {
+            if (!this.ariaLabel() && this.id) {
+                return this.id;
+            }
+        }, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
         /**
          * @docs-private
          *
@@ -50,54 +69,28 @@ class DaffProgressBarComponent {
         /**
          * An `aria-label` for the progress bar.
          */
-        this.ariaLabel = '';
+        this.ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         /**
          * Property to set the animation of a progress bar to
          * run for an indefinite amount of time.
          *
          * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
          **/
-        this.indeterminate = false;
+        this.indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * An event that emits each time the progression reaches 100%
          * and the animation is finished.
          */
-        this.finished = new EventEmitter();
+        this.finished = output();
         this.colorable.defaultColor = 'primary';
     }
-    /**
-     * Sets the percentage completion of the progression,
-     * expressed as a whole number between 0 and 100.
-     */
-    get percentage() {
-        return this._percentage;
-    }
-    ;
-    set percentage(val) {
-        this._percentage = clamp(val, 0, 100);
-        this._changeDetectorRef.markForCheck();
-    }
-    /**
-     * @docs-private
-     */
-    get ariaValueNow() {
-        return this.indeterminate ? null : this.percentage;
-    }
-    /**
-     * @docs-private
-     */
-    get ariaLabelledBy() {
-        if (!this.ariaLabel && this.id) {
-            return this.id;
-        }
-    }
     /**
      * @docs-private
      *
      * Returns the transform style for the determinate progress bar.
      */
     _determinateBarTransform() {
-        return `scaleX(${this.percentage / 100})`;
+        return `scaleX(${this.percentage() / 100})`;
     }
     /**
      * @docs-private
@@ -105,12 +98,12 @@ class DaffProgressBarComponent {
      * Handles the CSS transition end event.
      */
     onTransitionEnd(event) {
-        if (event.propertyName === 'transform' && this.percentage === 100) {
+        if (event.propertyName === 'transform' && this.percentage() === 100) {
             this.finished.emit();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffProgressBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DaffColorableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffProgressBarComponent, isStandalone: true, selector: "daff-progress-bar", inputs: { percentage: "percentage", ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute] }, outputs: { finished: "finished" }, host: { properties: { "class.indeterminate": "indeterminate" }, classAttribute: "daff-progress-bar" }, queries: [{ propertyName: "_label", first: true, predicate: DaffProgressBarLabelDirective, descendants: true }], hostDirectives: [{ directive: i1.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: "@if (_label) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy\">\n\t@if (indeterminate) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}:host(.daff-progress-bar) .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition:transform .1s ease-in-out}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition-duration:.2s}}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar).indeterminate .indeterminate-bar{animation-duration:3.5s}}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffProgressBarComponent, deps: [{ token: i1.DaffColorableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DaffProgressBarComponent, isStandalone: true, selector: "daff-progress-bar", inputs: { percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished" }, host: { properties: { "class.indeterminate": "indeterminate()" }, classAttribute: "daff-progress-bar" }, queries: [{ propertyName: "_label", first: true, predicate: DaffProgressBarLabelDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: "@if (_label()) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow()\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy()\">\n\t@if (indeterminate()) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}:host(.daff-progress-bar) .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition:transform .1s ease-in-out}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition-duration:.2s}}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar).indeterminate .indeterminate-bar{animation-duration:3.5s}}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffProgressBarComponent, decorators: [{
             type: Component,
@@ -121,22 +114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         },
                     ], host: {
                         class: 'daff-progress-bar',
-                        '[class.indeterminate]': 'indeterminate',
-                    }, template: "@if (_label) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy\">\n\t@if (indeterminate) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}:host(.daff-progress-bar) .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition:transform .1s ease-in-out}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition-duration:.2s}}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar).indeterminate .indeterminate-bar{animation-duration:3.5s}}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DaffColorableDirective }], propDecorators: { _label: [{
-                type: ContentChild,
-                args: [DaffProgressBarLabelDirective]
-            }], percentage: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], indeterminate: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], finished: [{
-                type: Output
-            }] } });
+                        '[class.indeterminate]': 'indeterminate()',
+                    }, template: "@if (_label()) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow()\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy()\">\n\t@if (indeterminate()) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>", styles: [":host(.daff-progress-bar){display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;width:100%}:host(.daff-progress-bar) .daff-progress-bar__label{font-size:.875rem;line-height:1rem}:host(.daff-progress-bar) .daff-progress-bar__track{height:4px;position:relative;width:100%}:host(.daff-progress-bar) .daff-progress-bar__fill{height:4px;width:100%;transform:scaleX(0);transform-origin:0 center}:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition:transform .1s ease-in-out}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar) .daff-progress-bar__fill.determinate-bar{transition-duration:.2s}}:host(.daff-progress-bar).indeterminate{overflow:hidden}:host(.daff-progress-bar).indeterminate .indeterminate-bar{height:100%;width:100%;animation:indeterminate-animation 1.5s infinite linear;transform-origin:0% 50%}@media screen and (prefers-reduced-motion:reduce){:host(.daff-progress-bar).indeterminate .indeterminate-bar{animation-duration:3.5s}}@keyframes indeterminate-animation{0%{transform:translate(0) scaleX(0)}20%{transform:translate(0) scaleX(25%)}to{transform:translate(100%) scaleX(25%)}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DaffColorableDirective }], propDecorators: { _label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DaffProgressBarLabelDirective), { isSignal: true }] }], percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }] } });
 
 /**
  * @deprecated in favor of {@link DAFF_PROGRESS_BAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.

package/fesm2022/daffodil-design-progress-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-progress-bar.mjs","sources":["../../../libs/design/progress-bar/src/progress-bar-label/progress-bar-label.directive.ts","../../../libs/design/progress-bar/src/progress-bar.component.ts","../../../libs/design/progress-bar/src/progress-bar.component.html","../../../libs/design/progress-bar/src/progress-bar.module.ts","../../../libs/design/progress-bar/src/progress-bar.ts","../../../libs/design/progress-bar/src/daffodil-design-progress-bar.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Use label to help users understand what the progress represents.\n *\n * @usage\n * ```html\n * <daff-progress-bar-label>File upload</daff-progress-bar-label>\n * ```\n */\n@Directive({\n  /* eslint-disable-next-line @angular-eslint/directive-selector */\n  selector: 'daff-progress-bar-label',\n})\nexport class DaffProgressBarLabelDirective {}\n","import {\n  Component,\n  Input,\n  ChangeDetectionStrategy,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  booleanAttribute,\n  ContentChild,\n} from '@angular/core';\n\nimport { DaffColorableDirective } from '@daffodil/design';\n\nimport { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nlet daffProgressBarId = 0;\n\n/**\n * A progress bar provides visual feedback about the duration or progress of a task or operation.\n *\n * @usage\n * ```html\n * <daff-progress-bar>\n *  <daff-progress-bar-label>File upload</daff-progress-bar-label>\n * </daff-progress-bar>\n * ```\n */\n@Component({\n  selector: 'daff-progress-bar',\n  templateUrl: './progress-bar.component.html',\n  styleUrls: ['./progress-bar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n  ],\n  host: {\n    class: 'daff-progress-bar',\n    '[class.indeterminate]': 'indeterminate',\n  },\n})\nexport class DaffProgressBarComponent {\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private colorable: DaffColorableDirective,\n  ) {\n    this.colorable.defaultColor = 'primary';\n  }\n\n  private _percentage = 0;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffProgressBarLabelDirective) _label: DaffProgressBarLabelDirective;\n\n  /**\n   * Sets the percentage completion of the progression,\n   * expressed as a whole number between 0 and 100.\n   */\n  @Input() get percentage(): number {\n    return this._percentage;\n  };\n  set percentage(val: number) {\n    this._percentage = clamp(val, 0, 100);\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * @docs-private\n   */\n  get ariaValueNow() {\n    return this.indeterminate ? null : this.percentage;\n  }\n\n  /**\n   * @docs-private\n   */\n  get ariaLabelledBy() {\n    if(!this.ariaLabel && this.id) {\n      return this.id;\n    }\n  }\n\n  /**\n   * @docs-private\n   *\n   * The unique id of the progress bar.\n   */\n  id = 'daff-progress-bar-' + ++daffProgressBarId;\n\n  /**\n   * An `aria-label` for the progress bar.\n   */\n  @Input('aria-label') ariaLabel = '';\n\n  /**\n   * Property to set the animation of a progress bar to\n   * run for an indefinite amount of time.\n   *\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\n   **/\n  @Input({ transform: booleanAttribute }) indeterminate = false;\n\n  /**\n   * @docs-private\n   *\n   * Returns the transform style for the determinate progress bar.\n   */\n  _determinateBarTransform(): string {\n    return `scaleX(${this.percentage / 100})`;\n  }\n\n  /**\n   * An event that emits each time the progression reaches 100%\n   * and the animation is finished.\n   */\n  @Output() finished: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * @docs-private\n   *\n   * Handles the CSS transition end event.\n   */\n  onTransitionEnd(event: TransitionEvent): void {\n    if (event.propertyName === 'transform' && this.percentage === 100) {\n      this.finished.emit();\n    }\n  }\n}\n","@if (_label) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy\">\n\t@if (indeterminate) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\nimport { DaffProgressBarComponent } from './progress-bar.component';\n\n/**\n * @deprecated in favor of {@link DAFF_PROGRESS_BAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffProgressBarComponent,\n    DaffProgressBarLabelDirective,\n  ],\n  exports: [\n    DaffProgressBarComponent,\n    DaffProgressBarLabelDirective,\n  ],\n})\nexport class DaffProgressBarModule { }\n","import { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\nimport { DaffProgressBarComponent } from './progress-bar.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_PROGRESS_BAR_COMPONENTS = <const> [\n  DaffProgressBarComponent,\n  DaffProgressBarLabelDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAEA;;;;;;;AAOG;MAKU,6BAA6B,CAAA;iIAA7B,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAJzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,yBAAyB;AACpC,iBAAA;;;ACEM,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC;AAErG,IAAI,iBAAiB,GAAG,CAAC;AAEzB;;;;;;;;;AASG;MAiBU,wBAAwB,CAAA;IACnC,WAAA,CACU,kBAAqC,EACrC,SAAiC,EAAA;QADjC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;QAClB,IAAA,CAAA,SAAS,GAAT,SAAS;QAKX,IAAA,CAAA,WAAW,GAAG,CAAC;AAmCvB;;;;AAIG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,oBAAoB,GAAG,EAAE,iBAAiB;AAE/C;;AAEG;QACkB,IAAA,CAAA,SAAS,GAAG,EAAE;AAEnC;;;;;AAKI;QACoC,IAAA,CAAA,aAAa,GAAG,KAAK;AAW7D;;;AAGG;AACO,QAAA,IAAA,CAAA,QAAQ,GAAuB,IAAI,YAAY,EAAE;AAvEzD,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,SAAS;IACzC;AASA;;;AAGG;AACH,IAAA,IAAa,UAAU,GAAA;QACrB,OAAO,IAAI,CAAC,WAAW;IACzB;;IACA,IAAI,UAAU,CAAC,GAAW,EAAA;QACxB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;AACrC,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;IACxC;AAEA;;AAEG;AACH,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU;IACpD;AAEA;;AAEG;AACH,IAAA,IAAI,cAAc,GAAA;QAChB,IAAG,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,EAAE,EAAE;YAC7B,OAAO,IAAI,CAAC,EAAE;QAChB;IACF;AAsBA;;;;AAIG;IACH,wBAAwB,GAAA;AACtB,QAAA,OAAO,UAAU,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG;IAC3C;AAQA;;;;AAIG;AACH,IAAA,eAAe,CAAC,KAAsB,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,YAAY,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,KAAK,GAAG,EAAE;AACjE,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QACtB;IACF;iIAvFW,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EA6Df,gBAAgB,CAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,eAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAhDtB,6BAA6B,wIC1D7C,ssBAqBM,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDwBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAhBpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,sBAAsB;4BACjC,MAAM,EAAE,CAAC,OAAO,CAAC;AAClB,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,mBAAmB;AAC1B,wBAAA,uBAAuB,EAAE,eAAe;AACzC,qBAAA,EAAA,QAAA,EAAA,ssBAAA,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA;;sBAeA,YAAY;uBAAC,6BAA6B;;sBAM1C;;sBAkCA,KAAK;uBAAC,YAAY;;sBAQlB,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAerC;;;AEnHH;;AAEG;MAYU,qBAAqB,CAAA;iIAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAT9B,YAAY;YACZ,wBAAwB;AACxB,YAAA,6BAA6B,aAG7B,wBAAwB;YACxB,6BAA6B,CAAA,EAAA,CAAA,CAAA;AAGpB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAT9B,YAAY,CAAA,EAAA,CAAA,CAAA;;2FASH,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,wBAAwB;wBACxB,6BAA6B;AAC9B,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;wBACxB,6BAA6B;AAC9B,qBAAA;AACF,iBAAA;;;AChBD;;AAEG;AACI,MAAM,4BAA4B,GAAW;IAClD,wBAAwB;IACxB,6BAA6B;;;ACR/B;;AAEG;;;;"}
+{"version":3,"file":"daffodil-design-progress-bar.mjs","sources":["../../../libs/design/progress-bar/src/progress-bar-label/progress-bar-label.directive.ts","../../../libs/design/progress-bar/src/progress-bar.component.ts","../../../libs/design/progress-bar/src/progress-bar.component.html","../../../libs/design/progress-bar/src/progress-bar.module.ts","../../../libs/design/progress-bar/src/progress-bar.ts","../../../libs/design/progress-bar/src/daffodil-design-progress-bar.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Use label to help users understand what the progress represents.\n *\n * @usage\n * ```html\n * <daff-progress-bar-label>File upload</daff-progress-bar-label>\n * ```\n */\n@Directive({\n  /* eslint-disable-next-line @angular-eslint/directive-selector */\n  selector: 'daff-progress-bar-label',\n})\nexport class DaffProgressBarLabelDirective {}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  booleanAttribute,\n  input,\n  output,\n  computed,\n  contentChild,\n} from '@angular/core';\n\nimport { DaffColorableDirective } from '@daffodil/design';\n\nimport { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nlet daffProgressBarId = 0;\n\n/**\n * A progress bar provides visual feedback about the duration or progress of a task or operation.\n *\n * @usage\n * ```html\n * <daff-progress-bar>\n *  <daff-progress-bar-label>File upload</daff-progress-bar-label>\n * </daff-progress-bar>\n * ```\n */\n@Component({\n  selector: 'daff-progress-bar',\n  templateUrl: './progress-bar.component.html',\n  styleUrl: './progress-bar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DaffColorableDirective,\n      inputs: ['color'],\n    },\n  ],\n  host: {\n    class: 'daff-progress-bar',\n    '[class.indeterminate]': 'indeterminate()',\n  },\n})\nexport class DaffProgressBarComponent {\n  constructor(\n    private colorable: DaffColorableDirective,\n  ) {\n    this.colorable.defaultColor = 'primary';\n  }\n\n  /**\n   * @docs-private\n   */\n  _label = contentChild(DaffProgressBarLabelDirective);\n\n  /**\n   * Sets the percentage completion of the progression,\n   * expressed as a whole number between 0 and 100.\n   */\n  percentage = input(0, { transform: (val: number) => clamp(val, 0, 100) });\n\n  /**\n   * @docs-private\n   */\n  ariaValueNow = computed(() => this.indeterminate() ? null : this.percentage());\n\n  /**\n   * @docs-private\n   */\n  ariaLabelledBy = computed(() => {\n    if(!this.ariaLabel() && this.id) {\n      return this.id;\n    }\n  });\n\n  /**\n   * @docs-private\n   *\n   * The unique id of the progress bar.\n   */\n  id = 'daff-progress-bar-' + ++daffProgressBarId;\n\n  /**\n   * An `aria-label` for the progress bar.\n   */\n  ariaLabel = input('', { alias: 'aria-label' });\n\n  /**\n   * Property to set the animation of a progress bar to\n   * run for an indefinite amount of time.\n   *\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress\n   **/\n  indeterminate = input(false, { transform: booleanAttribute });\n\n  /**\n   * @docs-private\n   *\n   * Returns the transform style for the determinate progress bar.\n   */\n  _determinateBarTransform(): string {\n    return `scaleX(${this.percentage() / 100})`;\n  }\n\n  /**\n   * An event that emits each time the progression reaches 100%\n   * and the animation is finished.\n   */\n  finished = output<void>();\n\n  /**\n   * @docs-private\n   *\n   * Handles the CSS transition end event.\n   */\n  onTransitionEnd(event: TransitionEvent): void {\n    if (event.propertyName === 'transform' && this.percentage() === 100) {\n      this.finished.emit();\n    }\n  }\n}\n","@if (_label()) {\n\t<div class=\"daff-progress-bar__label\"\n\t\t[attr.id]=\"id\">\n\t\t<ng-content select=\"daff-progress-bar-label\"></ng-content>\n\t</div>\n}\n<div class=\"daff-progress-bar__track\"\n\trole=\"progressbar\"\n\taria-valuemin=\"0\"\n\taria-valuemax=\"100\"\n\t[attr.aria-valuenow]=\"ariaValueNow()\"\n\t[attr.aria-labelledby]=\"ariaLabelledBy()\">\n\t@if (indeterminate()) {\n\t\t<div class=\"daff-progress-bar__fill indeterminate-bar\" aria-hidden=\"true\"></div>\n\t} @else {\n\t\t<div class=\"daff-progress-bar__fill determinate-bar\"\n\t\t\taria-hidden=\"true\"\n\t\t\t[style.transform]=\"_determinateBarTransform()\"\n\t\t\t(transitionend)=\"onTransitionEnd($event)\">\n\t\t</div>\n\t}\n</div>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\nimport { DaffProgressBarComponent } from './progress-bar.component';\n\n/**\n * @deprecated in favor of {@link DAFF_PROGRESS_BAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffProgressBarComponent,\n    DaffProgressBarLabelDirective,\n  ],\n  exports: [\n    DaffProgressBarComponent,\n    DaffProgressBarLabelDirective,\n  ],\n})\nexport class DaffProgressBarModule { }\n","import { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';\nimport { DaffProgressBarComponent } from './progress-bar.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_PROGRESS_BAR_COMPONENTS = <const> [\n  DaffProgressBarComponent,\n  DaffProgressBarLabelDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAEA;;;;;;;AAOG;MAKU,6BAA6B,CAAA;iIAA7B,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAJzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,yBAAyB;AACpC,iBAAA;;;ACCM,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC;AAErG,IAAI,iBAAiB,GAAG,CAAC;AAEzB;;;;;;;;;AASG;MAiBU,wBAAwB,CAAA;AACnC,IAAA,WAAA,CACU,SAAiC,EAAA;QAAjC,IAAA,CAAA,SAAS,GAAT,SAAS;AAKnB;;AAEG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,YAAY,CAAC,6BAA6B,6EAAC;AAEpD;;;AAGG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,CAAC,kFAAI,SAAS,EAAE,CAAC,GAAW,KAAK,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,EAAA,CAAG;AAEzE;;AAEG;QACH,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAE9E;;AAEG;AACH,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;YAC7B,IAAG,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE;gBAC/B,OAAO,IAAI,CAAC,EAAE;YAChB;AACF,QAAA,CAAC,qFAAC;AAEF;;;;AAIG;AACH,QAAA,IAAA,CAAA,EAAE,GAAG,oBAAoB,GAAG,EAAE,iBAAiB;AAE/C;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,EAAE,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;AAE9C;;;;;AAKI;QACJ,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAW7D;;;AAGG;QACH,IAAA,CAAA,QAAQ,GAAG,MAAM,EAAQ;AA7DvB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,SAAS;IACzC;AA+CA;;;;AAIG;IACH,wBAAwB,GAAA;QACtB,OAAO,CAAA,OAAA,EAAU,IAAI,CAAC,UAAU,EAAE,GAAG,GAAG,GAAG;IAC7C;AAQA;;;;AAIG;AACH,IAAA,eAAe,CAAC,KAAsB,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,YAAY,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,EAAE;AACnE,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QACtB;IACF;iIA5EW,wBAAwB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,iBAAA,EAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAUb,6BAA6B,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtDrD,8sBAqBM,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDuBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAhBpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,sBAAsB;4BACjC,MAAM,EAAE,CAAC,OAAO,CAAC;AAClB,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,mBAAmB;AAC1B,wBAAA,uBAAuB,EAAE,iBAAiB;AAC3C,qBAAA,EAAA,QAAA,EAAA,8sBAAA,EAAA,MAAA,EAAA,CAAA,ooCAAA,CAAA,EAAA;wJAYqB,6BAA6B,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEhDrD;;AAEG;MAYU,qBAAqB,CAAA;iIAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAT9B,YAAY;YACZ,wBAAwB;AACxB,YAAA,6BAA6B,aAG7B,wBAAwB;YACxB,6BAA6B,CAAA,EAAA,CAAA,CAAA;AAGpB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAT9B,YAAY,CAAA,EAAA,CAAA,CAAA;;2FASH,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAXjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,wBAAwB;wBACxB,6BAA6B;AAC9B,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;wBACxB,6BAA6B;AAC9B,qBAAA;AACF,iBAAA;;;AChBD;;AAEG;AACI,MAAM,4BAA4B,GAAW;IAClD,wBAAwB;IACxB,6BAA6B;;;ACR/B;;AAEG;;;;"}

package/fesm2022/daffodil-design-select.mjs

@@ -116,7 +116,7 @@ class DaffSelectComponent extends DaffFormFieldControl {
         if (!this.formField) {
             throw new Error('DaffSelectComponent needs to be used with the DaffFormFieldComponent.');
         }
-        this.ariaLabelledBy = this.formField.id;
+        this.ariaLabelledBy = this.formField.id();
         this.openDirective.stateless = false;
         this.document.addEventListener('keydown', (event) => {
             if (event.key === 'Tab' && this.isOpen) {