@daffodil/design 0.87.1 → 0.88.1

package/fesm2022/daffodil-design-notification.mjs

@@ -1,101 +1,106 @@
-import { NgIf, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, EventEmitter, Output, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Directive, EventEmitter, Output, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1 from '@daffodil/design';
 import { DaffStatusEnum, DaffPrefixDirective, DaffArticleEncapsulatedDirective, DaffStatusableDirective, DaffPrefixSuffixModule } from '@daffodil/design';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
+/**
+ * Enum for representing the available notification orientations.
+ * See {@link DaffNotificationOrientation} for descriptions of each orientation.
+ */
+var DaffNotificationOrientationEnum;
+(function (DaffNotificationOrientationEnum) {
+    DaffNotificationOrientationEnum["Horizontal"] = "horizontal";
+    DaffNotificationOrientationEnum["Vertical"] = "vertical";
+})(DaffNotificationOrientationEnum || (DaffNotificationOrientationEnum = {}));
+
+/* eslint-disable quote-props */
+/**
+ * Actions is used to include actionable buttons related to the notification (e.g., dismiss, navigate).
+ *
+ * @example
+ * ```html
+ * <div daffNotificationActions>
+ *  <button daff-button>Update payment</button>
+ *  <button daff-button>Contact support</button>
+ * </div>
+ * ```
+ */
 class DaffNotificationActionsDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationActionsDirective, isStandalone: true, selector: "[daffNotificationActions]", host: { properties: { "class.daff-notification__actions": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationActionsDirective, isStandalone: true, selector: "[daffNotificationActions]", host: { classAttribute: "daff-notification__actions" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffNotificationActions]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-notification__actions',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-notification__actions']
-            }] } });
+        }] });
 
-var DaffNotificationOrientationEnum;
-(function (DaffNotificationOrientationEnum) {
-    DaffNotificationOrientationEnum["Horizontal"] = "horizontal";
-    DaffNotificationOrientationEnum["Vertical"] = "vertical";
-})(DaffNotificationOrientationEnum || (DaffNotificationOrientationEnum = {}));
+/* eslint-disable quote-props */
 /**
- * DaffNotificationComponent provides a way to display and communicate
- * information related to user actions within a page's content.
+ * Notifications provide contextual feedback or information related to user actions within a page's content.
+ *
+ * Use [Toast](/libs/design/toast/README.md) for app-level alerts.
+ *
+ * @example
+ * ```html
+ * <daff-notification>
+ *  <fa-icon daffPrefix [icon]="faExclamation"></fa-icon>
+ *  <div daffNotificationTitle>Payment Failed</div>
+ *  <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>
+ *  <div daffNotificationActions>
+ *    <button daff-button>Update payment</button>
+ *    <button daff-button>Contact support</button>
+ *  </div>
+ * </daff-notification>
+ * ```
  */
 class DaffNotificationComponent {
     /**
+     * @docs-private
+     *
      * Sets role to alert when `status="warn"` or `status="critical"`.
      * Sets role to status on all other instances.
      */
-    /**
-     * @docs-private
-     */
     get role() {
         return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Critical ? 'alert' : 'status';
     }
     ;
-    /**
-     * @docs-private
-     */
-    get verticalOrientation() {
-        return this.orientation === DaffNotificationOrientationEnum.Vertical;
-    }
-    /**
-     * @docs-private
-     */
-    get horizontalOrientation() {
-        return this.orientation === DaffNotificationOrientationEnum.Horizontal;
-    }
     constructor(statusDirective) {
         this.statusDirective = statusDirective;
-        this.faTimes = faTimes;
         /**
          * @docs-private
          */
-        this.class = true;
-        /**
-         * @docs-private
+        this.faTimes = faTimes;
+        /** Whether the notification can be dismissed by the user.
+         * Displays a close icon if `true`.
          */
-        this.tabindex = '0';
-        /** Whether or not a notification is closable */
         this.dismissible = false;
-        this._orientation = DaffNotificationOrientationEnum.Vertical;
         /**
-         * Output event triggered when the close icon is clicked.
+         * The orientation of a notification.
+         */
+        this.orientation = 'vertical';
+        /**
+         * Emits when the notification is closed.
          */
         this.closeNotification = new EventEmitter();
     }
-    get orientation() {
-        return this._orientation;
-    }
-    set orientation(value) {
-        if (value === null || value === undefined || value === '') {
-            this._orientation = DaffNotificationOrientationEnum.Vertical;
-        }
-        else {
-            this._orientation = value;
-        }
-    }
-    ;
+    /**
+     * @docs-private
+     *
+     * Internal handler for the close icon click.
+     */
     onCloseNotification(event) {
         this.closeNotification.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationComponent, deps: [{ token: i1.DaffStatusableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffNotificationComponent, isStandalone: true, selector: "daff-notification", inputs: { dismissible: "dismissible", orientation: "orientation" }, outputs: { closeNotification: "closeNotification" }, host: { properties: { "class.daff-notification": "this.class", "attr.tabindex": "this.tabindex", "attr.role": "this.role", "class.vertical": "this.verticalOrientation", "class.horizontal": "this.horizontalOrientation", "class.dismissible": "this.dismissible" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_actions", first: true, predicate: DaffNotificationActionsDirective, descendants: true }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationSubtitle]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"_actions\">\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  </ng-container>\n</div>\n<button class=\"daff-notification__close-icon\" *ngIf=\"dismissible\" (click)=\"onCloseNotification($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n</button>", styles: [".daff-notification{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative}.daff-notification .daff-prefix{padding:1rem 0 1rem 1rem}.daff-notification__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-notification__body{display:flex;font-size:1rem;line-height:1.5rem;padding:1rem;width:100%}.daff-notification__content{display:flex;flex-direction:column;gap:.25rem}.daff-notification__title{font-size:1rem;font-weight:600;line-height:1.5rem}.daff-notification__subtitle{font-size:1rem;font-weight:400;line-height:1.25rem}.daff-notification__actions{display:flex;gap:.5rem}.daff-notification.dismissible.horizontal .daff-notification__actions{padding:.5rem 0}.daff-notification.vertical .daff-notification__body{flex-direction:column;gap:1rem}.daff-notification.horizontal .daff-prefix{padding:.75rem 0 .75rem 1rem}.daff-notification.horizontal .daff-notification__subtitle{align-self:center}.daff-notification.horizontal .daff-notification__body{flex-direction:row;gap:0;padding:0}.daff-notification.horizontal .daff-notification__content{flex-direction:row;flex-wrap:wrap;flex-grow:1;padding:.75rem 1rem .75rem .75rem}.daff-notification.horizontal .daff-notification__actions{min-height:3rem;padding:.5rem 1rem .5rem 0;margin:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffNotificationComponent, isStandalone: true, selector: "daff-notification", inputs: { dismissible: "dismissible", orientation: ["orientation", "orientation", (value) => value || DaffNotificationOrientationEnum.Vertical] }, outputs: { closeNotification: "closeNotification" }, host: { attributes: { "tabindex": "0" }, properties: { "class.vertical": "orientation === \"vertical\"", "class.horizontal": "orientation === \"horizontal\"", "class.dismissible": "dismissible", "attr.role": "role" }, classAttribute: "daff-notification" }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_actions", first: true, predicate: DaffNotificationActionsDirective, descendants: true }], hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }, { directive: i1.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationMessage]\"></ng-content>\n  </div>\n  @if (_actions) {\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  }\n</div>\n@if (dismissible) {\n  <button class=\"daff-notification__close-icon\" (click)=\"onCloseNotification($event)\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}", styles: [".daff-notification{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative}.daff-notification .daff-prefix{padding:1rem 0 1rem 1rem}.daff-notification__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-notification__body{display:flex;font-size:1rem;line-height:1.5rem;padding:1rem;width:100%}.daff-notification__content{display:flex;flex-direction:column;gap:.25rem}.daff-notification__title{font-size:1rem;font-weight:600;line-height:1.5rem}.daff-notification__message{font-size:1rem;font-weight:400;line-height:1.25rem}.daff-notification__actions{display:flex;gap:.5rem}.daff-notification.dismissible.horizontal .daff-notification__actions{padding:.5rem 0}.daff-notification.vertical .daff-notification__body{flex-direction:column;gap:1rem}.daff-notification.horizontal .daff-prefix{padding:.75rem 0 .75rem 1rem}.daff-notification.horizontal .daff-notification__message{align-self:center}.daff-notification.horizontal .daff-notification__body{flex-direction:row;gap:0;padding:0}.daff-notification.horizontal .daff-notification__content{flex-direction:row;flex-wrap:wrap;flex-grow:1;padding:.75rem 1rem .75rem .75rem}.daff-notification.horizontal .daff-notification__actions{min-height:3rem;padding:.5rem 1rem .5rem 0;margin:0}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationComponent, decorators: [{
             type: Component,
@@ -105,105 +110,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             directive: DaffStatusableDirective,
                             inputs: ['status'],
                         },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
+                    ], host: {
+                        'class': 'daff-notification',
+                        '[class.vertical]': 'orientation === "vertical"',
+                        '[class.horizontal]': 'orientation === "horizontal"',
+                        '[class.dismissible]': 'dismissible',
+                        'tabindex': '0',
+                        '[attr.role]': 'role',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FaIconComponent,
                         DaffPrefixDirective,
-                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationSubtitle]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"_actions\">\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  </ng-container>\n</div>\n<button class=\"daff-notification__close-icon\" *ngIf=\"dismissible\" (click)=\"onCloseNotification($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n</button>", styles: [".daff-notification{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative}.daff-notification .daff-prefix{padding:1rem 0 1rem 1rem}.daff-notification__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-notification__body{display:flex;font-size:1rem;line-height:1.5rem;padding:1rem;width:100%}.daff-notification__content{display:flex;flex-direction:column;gap:.25rem}.daff-notification__title{font-size:1rem;font-weight:600;line-height:1.5rem}.daff-notification__subtitle{font-size:1rem;font-weight:400;line-height:1.25rem}.daff-notification__actions{display:flex;gap:.5rem}.daff-notification.dismissible.horizontal .daff-notification__actions{padding:.5rem 0}.daff-notification.vertical .daff-notification__body{flex-direction:column;gap:1rem}.daff-notification.horizontal .daff-prefix{padding:.75rem 0 .75rem 1rem}.daff-notification.horizontal .daff-notification__subtitle{align-self:center}.daff-notification.horizontal .daff-notification__body{flex-direction:row;gap:0;padding:0}.daff-notification.horizontal .daff-notification__content{flex-direction:row;flex-wrap:wrap;flex-grow:1;padding:.75rem 1rem .75rem .75rem}.daff-notification.horizontal .daff-notification__actions{min-height:3rem;padding:.5rem 1rem .5rem 0;margin:0}\n"] }]
+                    ], template: "@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationMessage]\"></ng-content>\n  </div>\n  @if (_actions) {\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  }\n</div>\n@if (dismissible) {\n  <button class=\"daff-notification__close-icon\" (click)=\"onCloseNotification($event)\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}", styles: [".daff-notification{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative}.daff-notification .daff-prefix{padding:1rem 0 1rem 1rem}.daff-notification__close-icon{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-notification__body{display:flex;font-size:1rem;line-height:1.5rem;padding:1rem;width:100%}.daff-notification__content{display:flex;flex-direction:column;gap:.25rem}.daff-notification__title{font-size:1rem;font-weight:600;line-height:1.5rem}.daff-notification__message{font-size:1rem;font-weight:400;line-height:1.25rem}.daff-notification__actions{display:flex;gap:.5rem}.daff-notification.dismissible.horizontal .daff-notification__actions{padding:.5rem 0}.daff-notification.vertical .daff-notification__body{flex-direction:column;gap:1rem}.daff-notification.horizontal .daff-prefix{padding:.75rem 0 .75rem 1rem}.daff-notification.horizontal .daff-notification__message{align-self:center}.daff-notification.horizontal .daff-notification__body{flex-direction:row;gap:0;padding:0}.daff-notification.horizontal .daff-notification__content{flex-direction:row;flex-wrap:wrap;flex-grow:1;padding:.75rem 1rem .75rem .75rem}.daff-notification.horizontal .daff-notification__actions{min-height:3rem;padding:.5rem 1rem .5rem 0;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.DaffStatusableDirective }], propDecorators: { _prefix: [{
                 type: ContentChild,
                 args: [DaffPrefixDirective]
             }], _actions: [{
                 type: ContentChild,
                 args: [DaffNotificationActionsDirective]
-            }], class: [{
-                type: HostBinding,
-                args: ['class.daff-notification']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], verticalOrientation: [{
-                type: HostBinding,
-                args: ['class.vertical']
-            }], horizontalOrientation: [{
-                type: HostBinding,
-                args: ['class.horizontal']
             }], dismissible: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.dismissible']
             }], orientation: [{
-                type: Input
+                type: Input,
+                args: [{ transform: (value) => value || DaffNotificationOrientationEnum.Vertical }]
             }], closeNotification: [{
                 type: Output
             }] } });
 
+/* eslint-disable quote-props */
+/**
+ * Message provides additional details or supporting context that supplements
+ * the notification title. Keep this brief—ideally one to two short sentences.
+ *
+ * @example
+ * ```html
+ * <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>
+ * ```
+ */
 class DaffNotificationMessageDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationMessageDirective, isStandalone: true, selector: "[daffNotificationMessage]", host: { properties: { "class.daff-notification__message": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationMessageDirective, isStandalone: true, selector: "[daffNotificationMessage]", host: { classAttribute: "daff-notification__message" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffNotificationMessage]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-notification__message',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-notification__message']
-            }] } });
+        }] });
 
+/* eslint-disable quote-props */
+/**
+ * @deprecated in favor of DaffNotificationMessageDirective. Deprecated in version 0.88.0. Will be removed in version 0.91.0.
+ */
 class DaffNotificationSubtitleDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationSubtitleDirective, isStandalone: true, selector: "[daffNotificationSubtitle]", host: { properties: { "class.daff-notification__subtitle": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationSubtitleDirective, isStandalone: true, selector: "[daffNotificationSubtitle]", host: { classAttribute: "daff-notification__subtitle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffNotificationSubtitle]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-notification__subtitle',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-notification__subtitle']
-            }] } });
+        }] });
 
+/* eslint-disable quote-props */
+/**
+ * Title is the primary text summarizing the notification.
+ *
+ * @example
+ * ```html
+ * <div daffNotificationTitle>Payment Failed</div>
+ * ```
+ */
 class DaffNotificationTitleDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationTitleDirective, isStandalone: true, selector: "[daffNotificationTitle]", host: { properties: { "class.daff-notification__title": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffNotificationTitleDirective, isStandalone: true, selector: "[daffNotificationTitle]", host: { classAttribute: "daff-notification__title" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNotificationTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffNotificationTitle]',
-                    standalone: true,
+                    host: {
+                        'class': 'daff-notification__title',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-notification__title']
-            }] } });
+        }] });
 
 /**
  * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
@@ -268,5 +264,5 @@ const DAFF_NOTIFICATION_COMPONENTS = [
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_NOTIFICATION_COMPONENTS, DaffNotificationActionsDirective, DaffNotificationComponent, DaffNotificationMessageDirective, DaffNotificationModule, DaffNotificationSubtitleDirective, DaffNotificationTitleDirective };
+export { DAFF_NOTIFICATION_COMPONENTS, DaffNotificationActionsDirective, DaffNotificationComponent, DaffNotificationMessageDirective, DaffNotificationModule, DaffNotificationOrientationEnum, DaffNotificationSubtitleDirective, DaffNotificationTitleDirective };
 //# sourceMappingURL=daffodil-design-notification.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-notification.mjs","sources":["../../../libs/design/notification/src/notification-actions/notification-actions.directive.ts","../../../libs/design/notification/src/notification/notification.component.ts","../../../libs/design/notification/src/notification/notification.component.html","../../../libs/design/notification/src/notification-message/notification-message.directive.ts","../../../libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts","../../../libs/design/notification/src/notification-title/notification-title.directive.ts","../../../libs/design/notification/src/notification.module.ts","../../../libs/design/notification/src/notification.ts","../../../libs/design/notification/src/daffodil-design-notification.ts"],"sourcesContent":["import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffNotificationActions]',\n  standalone: true,\n})\n\nexport class DaffNotificationActionsDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-notification__actions') class = true;\n}\n","import { NgIf } from '@angular/common';\nimport {\n  Component,\n  Input,\n  HostBinding,\n  ContentChild,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  Output,\n  EventEmitter,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffPrefixDirective,\n  DaffStatusableDirective,\n  DaffStatusEnum,\n} from '@daffodil/design';\n\nimport { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';\n\nexport type DaffNotificationOrientation = 'horizontal' | 'vertical';\n\nenum DaffNotificationOrientationEnum {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\n/**\n * DaffNotificationComponent provides a way to display and communicate\n * information related to user actions within a page's content.\n */\n@Component({\n  selector: 'daff-notification',\n  templateUrl: './notification.component.html',\n  styleUrls: ['./notification.component.scss'],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffStatusableDirective,\n      inputs: ['status'],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgIf,\n    FaIconComponent,\n    DaffPrefixDirective,\n  ],\n})\nexport class DaffNotificationComponent {\n  faTimes = faTimes;\n\n  @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;\n\n  @ContentChild(DaffNotificationActionsDirective) _actions: DaffNotificationActionsDirective;\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-notification') class = true;\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.tabindex') tabindex = '0';\n\n  /**\n   * Sets role to alert when `status=\"warn\"` or `status=\"critical\"`.\n   * Sets role to status on all other instances.\n   */\n  /**\n   * @docs-private\n   */\n  @HostBinding('attr.role') get role() {\n    return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Critical ? 'alert' : 'status';\n  };\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.vertical') get verticalOrientation() {\n    return this.orientation === DaffNotificationOrientationEnum.Vertical;\n  }\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.horizontal') get horizontalOrientation() {\n    return this.orientation === DaffNotificationOrientationEnum.Horizontal;\n  }\n\n  /** Whether or not a notification is closable */\n  @Input() @HostBinding('class.dismissible') dismissible = false;\n\n  constructor(private statusDirective: DaffStatusableDirective) {}\n\n  private _orientation: DaffNotificationOrientation = DaffNotificationOrientationEnum.Vertical;\n\n  @Input()\n  get orientation() {\n    return this._orientation;\n  }\n\n  set orientation(value: DaffNotificationOrientation) {\n    if(value === null || value === undefined || <unknown>value === '') {\n      this._orientation = DaffNotificationOrientationEnum.Vertical;\n    } else {\n      this._orientation = value;\n    }\n  };\n\n  /**\n   * Output event triggered when the close icon is clicked.\n   */\n  @Output() closeNotification: EventEmitter<void> = new EventEmitter();\n\n  onCloseNotification(event: Event) {\n    this.closeNotification.emit();\n  }\n}\n","@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationSubtitle]\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"_actions\">\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  </ng-container>\n</div>\n<button class=\"daff-notification__close-icon\" *ngIf=\"dismissible\" (click)=\"onCloseNotification($event)\">\n  <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n</button>","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffNotificationMessage]',\n  standalone: true,\n})\n\nexport class DaffNotificationMessageDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-notification__message') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffNotificationSubtitle]',\n  standalone: true,\n})\n\nexport class DaffNotificationSubtitleDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-notification__subtitle') class = true;\n}\n","import {\n  Directive,\n  HostBinding,\n} from '@angular/core';\n\n@Directive({\n  selector: '[daffNotificationTitle]',\n  standalone: true,\n})\n\nexport class DaffNotificationTitleDirective {\n\n  /**\n   * @docs-private\n   */\n  @HostBinding('class.daff-notification__title') class = true;\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffPrefixSuffixModule } from '@daffodil/design';\n\nimport { DaffNotificationComponent } from './notification/notification.component';\nimport { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';\nimport { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';\nimport { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';\nimport { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffPrefixSuffixModule,\n    FontAwesomeModule,\n    DaffNotificationComponent,\n    DaffNotificationActionsDirective,\n    DaffNotificationMessageDirective,\n    DaffNotificationTitleDirective,\n    DaffNotificationSubtitleDirective,\n  ],\n  exports: [\n    DaffNotificationComponent,\n    DaffNotificationActionsDirective,\n    DaffNotificationMessageDirective,\n    DaffNotificationTitleDirective,\n    DaffNotificationSubtitleDirective,\n    DaffPrefixSuffixModule,\n  ],\n})\nexport class DaffNotificationModule { }\n","import { DaffPrefixDirective } from '@daffodil/design';\n\nimport { DaffNotificationComponent } from './notification/notification.component';\nimport { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';\nimport { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';\nimport { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';\nimport { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_NOTIFICATION_COMPONENTS = <const> [\n  DaffNotificationComponent,\n  DaffNotificationActionsDirective,\n  DaffNotificationMessageDirective,\n  DaffNotificationTitleDirective,\n  DaffNotificationSubtitleDirective,\n  DaffPrefixDirective,\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-notification.mjs","sources":["../../../libs/design/notification/src/helpers/notification-orientation.ts","../../../libs/design/notification/src/notification-actions/notification-actions.directive.ts","../../../libs/design/notification/src/notification/notification.component.ts","../../../libs/design/notification/src/notification/notification.component.html","../../../libs/design/notification/src/notification-message/notification-message.directive.ts","../../../libs/design/notification/src/notification-subtitle/notification-subtitle.directive.ts","../../../libs/design/notification/src/notification-title/notification-title.directive.ts","../../../libs/design/notification/src/notification.module.ts","../../../libs/design/notification/src/notification.ts","../../../libs/design/notification/src/daffodil-design-notification.ts"],"sourcesContent":["/**\n * The available orientations for a notification.\n *\n * | Orientation | Description |\n * | -- | -- |\n * | `vertical` | Stacks notification content from top to bottom. This is the default orientation. |\n * | `horizontal` | Places notification content side-by-side. |\n */\nexport type DaffNotificationOrientation = 'horizontal' | 'vertical';\n\n/**\n * Enum for representing the available notification orientations.\n * See {@link DaffNotificationOrientation} for descriptions of each orientation.\n */\nexport enum DaffNotificationOrientationEnum {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Actions is used to include actionable buttons related to the notification (e.g., dismiss, navigate).\n *\n * @example\n * ```html\n * <div daffNotificationActions>\n *  <button daff-button>Update payment</button>\n *  <button daff-button>Contact support</button>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[daffNotificationActions]',\n  host: {\n    'class': 'daff-notification__actions',\n  },\n})\n\nexport class DaffNotificationActionsDirective {}\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  ContentChild,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n  Output,\n  EventEmitter,\n} from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\n\nimport {\n  DaffArticleEncapsulatedDirective,\n  DaffPrefixDirective,\n  DaffStatusableDirective,\n  DaffStatusEnum,\n} from '@daffodil/design';\n\nimport {\n  DaffNotificationOrientation,\n  DaffNotificationOrientationEnum,\n} from '../helpers/notification-orientation';\nimport { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';\n\n/**\n * Notifications provide contextual feedback or information related to user actions within a page's content.\n *\n * Use [Toast](/libs/design/toast/README.md) for app-level alerts.\n *\n * @example\n * ```html\n * <daff-notification>\n *  <fa-icon daffPrefix [icon]=\"faExclamation\"></fa-icon>\n *  <div daffNotificationTitle>Payment Failed</div>\n *  <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>\n *  <div daffNotificationActions>\n *    <button daff-button>Update payment</button>\n *    <button daff-button>Contact support</button>\n *  </div>\n * </daff-notification>\n * ```\n */\n@Component({\n  selector: 'daff-notification',\n  templateUrl: './notification.component.html',\n  styleUrls: ['./notification.component.scss'],\n  hostDirectives: [\n    { directive: DaffArticleEncapsulatedDirective },\n    {\n      directive: DaffStatusableDirective,\n      inputs: ['status'],\n    },\n  ],\n  host: {\n    'class': 'daff-notification',\n    '[class.vertical]': 'orientation === \"vertical\"',\n    '[class.horizontal]': 'orientation === \"horizontal\"',\n    '[class.dismissible]': 'dismissible',\n    'tabindex': '0',\n    '[attr.role]': 'role',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    FaIconComponent,\n    DaffPrefixDirective,\n  ],\n})\nexport class DaffNotificationComponent {\n  /**\n   * @docs-private\n   */\n  faTimes = faTimes;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffPrefixDirective) _prefix: DaffPrefixDirective;\n\n  /**\n   * @docs-private\n   */\n  @ContentChild(DaffNotificationActionsDirective) _actions: DaffNotificationActionsDirective;\n\n  /**\n   * @docs-private\n   *\n   * Sets role to alert when `status=\"warn\"` or `status=\"critical\"`.\n   * Sets role to status on all other instances.\n   */\n  get role() {\n    return this.statusDirective.status === DaffStatusEnum.Warn || this.statusDirective.status === DaffStatusEnum.Critical ? 'alert' : 'status';\n  };\n\n  /** Whether the notification can be dismissed by the user.\n   * Displays a close icon if `true`.\n   */\n  @Input() dismissible = false;\n\n  constructor(private statusDirective: DaffStatusableDirective) {}\n\n  /**\n   * The orientation of a notification.\n   */\n  @Input({ transform: (value: DaffNotificationOrientation | null | undefined) => value || DaffNotificationOrientationEnum.Vertical })\n  orientation: DaffNotificationOrientation = 'vertical';\n\n  /**\n   * Emits when the notification is closed.\n   */\n  @Output() closeNotification: EventEmitter<void> = new EventEmitter();\n\n  /**\n   * @docs-private\n   *\n   * Internal handler for the close icon click.\n   */\n  onCloseNotification(event: Event) {\n    this.closeNotification.emit();\n  }\n}\n","@if (_prefix) {\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n}\n<div class=\"daff-notification__body\">\n  <div class=\"daff-notification__content\">\n    <ng-content select=\"[daffNotificationTitle]\"></ng-content>\n    <ng-content select=\"[daffNotificationMessage]\"></ng-content>\n  </div>\n  @if (_actions) {\n    <ng-content select=\"[daffNotificationActions]\"></ng-content>\n  }\n</div>\n@if (dismissible) {\n  <button class=\"daff-notification__close-icon\" (click)=\"onCloseNotification($event)\">\n    <fa-icon [icon]=\"faTimes\" [fixedWidth]=\"true\"></fa-icon>\n  </button>\n}","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Message provides additional details or supporting context that supplements\n * the notification title. Keep this brief—ideally one to two short sentences.\n *\n * @example\n * ```html\n * <div daffNotificationMessage>We were unable to process your payment for order #12345. Please update your payment details and try again.</div>\n * ```\n */\n@Directive({\n  selector: '[daffNotificationMessage]',\n  host: {\n    'class': 'daff-notification__message',\n  },\n})\n\nexport class DaffNotificationMessageDirective {}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * @deprecated in favor of DaffNotificationMessageDirective. Deprecated in version 0.88.0. Will be removed in version 0.91.0.\n */\n@Directive({\n  selector: '[daffNotificationSubtitle]',\n  host: {\n    'class': 'daff-notification__subtitle',\n  },\n})\n\nexport class DaffNotificationSubtitleDirective {}\n","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Title is the primary text summarizing the notification.\n *\n * @example\n * ```html\n * <div daffNotificationTitle>Payment Failed</div>\n * ```\n */\n@Directive({\n  selector: '[daffNotificationTitle]',\n  host: {\n    'class': 'daff-notification__title',\n  },\n})\n\nexport class DaffNotificationTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\nimport { DaffPrefixSuffixModule } from '@daffodil/design';\n\nimport { DaffNotificationComponent } from './notification/notification.component';\nimport { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';\nimport { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';\nimport { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';\nimport { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffPrefixSuffixModule,\n    FontAwesomeModule,\n    DaffNotificationComponent,\n    DaffNotificationActionsDirective,\n    DaffNotificationMessageDirective,\n    DaffNotificationTitleDirective,\n    DaffNotificationSubtitleDirective,\n  ],\n  exports: [\n    DaffNotificationComponent,\n    DaffNotificationActionsDirective,\n    DaffNotificationMessageDirective,\n    DaffNotificationTitleDirective,\n    DaffNotificationSubtitleDirective,\n    DaffPrefixSuffixModule,\n  ],\n})\nexport class DaffNotificationModule { }\n","import { DaffPrefixDirective } from '@daffodil/design';\n\nimport { DaffNotificationComponent } from './notification/notification.component';\nimport { DaffNotificationActionsDirective } from './notification-actions/notification-actions.directive';\nimport { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';\nimport { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';\nimport { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';\n\n/**\n * @docs-private\n */\nexport const DAFF_NOTIFICATION_COMPONENTS = <const> [\n  DaffNotificationComponent,\n  DaffNotificationActionsDirective,\n  DaffNotificationMessageDirective,\n  DaffNotificationTitleDirective,\n  DaffNotificationSubtitleDirective,\n  DaffPrefixDirective,\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-paginator.mjs

@@ -1,6 +1,6 @@
 import { NgIf, NgFor, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } 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 { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -9,18 +9,11 @@ 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(elementRef) {
         this.elementRef = elementRef;
-        /**
-         * @docs-private
-         */
-        this.class = true;
-        /**
-         * @docs-private
-         */
-        this.role = 'navigation';
         /**
          * @docs-private
          */
@@ -108,7 +101,6 @@ class DaffPaginatorComponent {
      * Emits a pageNumber to notifyPageChange Output.
      *
      * @docs-private
-     * @param pageNumber a page number
      */
     _onNotifyPageChange(pageNumber) {
         this.notifyPageChange.emit(pageNumber);
@@ -117,7 +109,6 @@ class DaffPaginatorComponent {
      * A simple function that determines if the given page number is the current page number.
      *
      * @docs-private
-     * @param page a page number
      */
     _isSelected(page) {
         return page === this.currentPage;
@@ -127,7 +118,6 @@ class DaffPaginatorComponent {
      * so the paginator retains the same total width at the extreme page numbers (1 and numberOfPages).
      *
      * @docs-private
-     * @param pageNumber page number to check.
      */
     _showNumber(pageNumber) {
         return Math.abs(this.currentPage - pageNumber) < visiblePageRange
@@ -143,23 +133,20 @@ class DaffPaginatorComponent {
         };
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPaginatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffPaginatorComponent, isStandalone: true, selector: "daff-paginator", inputs: { numberOfPages: "numberOfPages", currentPage: "currentPage", linkMode: "linkMode", url: "url", queryParam: "queryParam" }, outputs: { notifyPageChange: "notifyPageChange" }, host: { properties: { "class.daff-paginator": "this.class", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__previous\"\n    *ngIf=\"!_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\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  <span class=\"daff-paginator__previous disabled\"\n    *ngIf=\"_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n  </span>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  <span>1</span>\n</button>\n<a *ngIf=\"linkMode\" 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 of {{_paginatorId}} Paginator\"\n><span>1</span></a>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <ng-container *ngIf=\"_showNumber(pageNumber)\">\n    <button *ngIf=\"!linkMode\" 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}} of {{_paginatorId}} Paginator\"\n      aria-current=\"_isSelected(pageNumber)\"\n      (click)=\"_onNotifyPageChange(pageNumber)\">\n      <span>{{ pageNumber }}</span>\n    </button>\n    <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n    ><span>{{ pageNumber }}</span></a>\n  </ng-container>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis\">...</span>\n\n<ng-container *ngIf=\"!(numberOfPages < 2)\">\n  <button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(numberOfPages)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n    (click)=\"_onNotifyPageChange(numberOfPages)\"\n  >\n    <span>{{ numberOfPages }}</span>\n  </button>\n  <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n  ><span>{{ numberOfPages }}</span></a>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__next\"\n    *ngIf=\"!_disableNext\"\n    [routerLink]=\"url\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    queryParamsHandling=\"merge\"\n    [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </a>\n  <span class=\"daff-paginator__next disabled\"\n    *ngIf=\"_disableNext\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </span>\n</ng-container>\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}.daff-paginator__page-link:hover:after,.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"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__previous\"\n    *ngIf=\"!_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\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  <span class=\"daff-paginator__previous disabled\"\n    *ngIf=\"_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n  </span>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  <span>1</span>\n</button>\n<a *ngIf=\"linkMode\" 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 of {{_paginatorId}} Paginator\"\n><span>1</span></a>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <ng-container *ngIf=\"_showNumber(pageNumber)\">\n    <button *ngIf=\"!linkMode\" 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}} of {{_paginatorId}} Paginator\"\n      aria-current=\"_isSelected(pageNumber)\"\n      (click)=\"_onNotifyPageChange(pageNumber)\">\n      <span>{{ pageNumber }}</span>\n    </button>\n    <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n    ><span>{{ pageNumber }}</span></a>\n  </ng-container>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis\">...</span>\n\n<ng-container *ngIf=\"!(numberOfPages < 2)\">\n  <button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(numberOfPages)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n    (click)=\"_onNotifyPageChange(numberOfPages)\"\n  >\n    <span>{{ numberOfPages }}</span>\n  </button>\n  <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n  ><span>{{ numberOfPages }}</span></a>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__next\"\n    *ngIf=\"!_disableNext\"\n    [routerLink]=\"url\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    queryParamsHandling=\"merge\"\n    [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </a>\n  <span class=\"daff-paginator__next disabled\"\n    *ngIf=\"_disableNext\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </span>\n</ng-container>\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}.daff-paginator__page-link:hover:after,.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"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'daff-paginator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'daff-paginator',
+                        'role': 'navigation',
+                    }, imports: [
                         FaIconComponent,
                         RouterModule,
                         NgIf,
                         NgFor,
                     ], template: "<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__previous\"\n  [disabled]=\"_disablePrev\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPrevPageChange()\">\n  <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon> Previous\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__previous\"\n    *ngIf=\"!_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\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  <span class=\"daff-paginator__previous disabled\"\n    *ngIf=\"_disablePrev\"\n    attr.aria-label=\"Go to Previous Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <fa-icon [icon]=\"faChevronLeft\" size=\"sm\"></fa-icon><span>Previous</span>\n  </span>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n  [class.selected]=\"_isSelected(1)\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Page 1 of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyPageChange(1)\">\n  <span>1</span>\n</button>\n<a *ngIf=\"linkMode\" 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 of {{_paginatorId}} Paginator\"\n><span>1</span></a>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showFirstEllipsis\">...</span>\n\n<ng-container *ngFor=\"let pageNumber of _numberOfPagesArray\">\n  <ng-container *ngIf=\"_showNumber(pageNumber)\">\n    <button *ngIf=\"!linkMode\" 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}} of {{_paginatorId}} Paginator\"\n      aria-current=\"_isSelected(pageNumber)\"\n      (click)=\"_onNotifyPageChange(pageNumber)\">\n      <span>{{ pageNumber }}</span>\n    </button>\n    <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n    ><span>{{ pageNumber }}</span></a>\n  </ng-container>\n</ng-container>\n\n<span class=\"daff-paginator__ellipsis\" *ngIf=\"_showLastEllipsis\">...</span>\n\n<ng-container *ngIf=\"!(numberOfPages < 2)\">\n  <button *ngIf=\"!linkMode\" type=\"button\" class=\"daff-paginator__page-link\"\n    [class.selected]=\"_isSelected(numberOfPages)\"\n    tabindex=\"0\"\n    attr.aria-label=\"Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator\"\n    (click)=\"_onNotifyPageChange(numberOfPages)\"\n  >\n    <span>{{ numberOfPages }}</span>\n  </button>\n  <a *ngIf=\"linkMode\" 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}} of {{_paginatorId}} Paginator\"\n  ><span>{{ numberOfPages }}</span></a>\n</ng-container>\n\n<button *ngIf=\"!linkMode\" class=\"daff-paginator__next\"\n  [disabled]=\"_disableNext\"\n  tabindex=\"0\"\n  attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n  (click)=\"_onNotifyNextPageChange()\">\n  Next <fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n</button>\n<ng-container *ngIf=\"linkMode\">\n  <a class=\"daff-paginator__next\"\n    *ngIf=\"!_disableNext\"\n    [routerLink]=\"url\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    queryParamsHandling=\"merge\"\n    [queryParams]=\"_buildPageQueryParams(currentPage + 1)\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </a>\n  <span class=\"daff-paginator__next disabled\"\n    *ngIf=\"_disableNext\"\n    attr.aria-label=\"Go to Next Page of {{_paginatorId}} Paginator\"\n    [attr.disabled]=\"true\">\n    <span>Next</span><fa-icon [icon]=\"faChevronRight\" size=\"sm\"></fa-icon>\n  </span>\n</ng-container>\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}.daff-paginator__page-link:hover:after,.daff-paginator__page-link:active:after,.daff-paginator__page-link.selected:after{opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-paginator']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], numberOfPages: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { numberOfPages: [{
                 type: Input
             }], currentPage: [{
                 type: Input