@daffodil/design 0.77.0 → 0.79.0

package/fesm2022/daffodil-design.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, APP_INITIALIZER } from '@angular/core';
+import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, APP_INITIALIZER, isDevMode } from '@angular/core';
 import * as i2$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
@@ -49,7 +49,7 @@ class DaffFormFieldComponent {
          * The tracking property used to determine if the parent form has been submitted,
          * and thus show an error message (even if the field hasn't been touched).
          *
-         * @deprecated
+         * @deprecated Deprecated in version 0.78.0. Will be removed in version 0.81.0.
          */
         // eslint-disable-next-line @typescript-eslint/no-inferrable-types
         this.formSubmitted = false;
@@ -1606,15 +1606,16 @@ const SERVER_SAFE_BREAKPOINT_OBSERVER = new InjectionToken('SERVER_SAFE_BREAKPOI
  */
 var DaffStatusEnum;
 (function (DaffStatusEnum) {
+    DaffStatusEnum["Info"] = "info";
     DaffStatusEnum["Warn"] = "warn";
-    DaffStatusEnum["Danger"] = "danger";
+    DaffStatusEnum["Critical"] = "critical";
     DaffStatusEnum["Success"] = "success";
 })(DaffStatusEnum || (DaffStatusEnum = {}));
 
 /**
  * `DaffStatusableDirective` allows a component to conditionally apply status-specific
  * styles by setting CSS classes based on the specified status. This directive is useful
- * for indicating different statuses such as warning, danger, or success states.
+ * for indicating different statuses such as info, warning, critical, or success states.
  *
  * ## Usage
  *
@@ -1643,7 +1644,7 @@ var DaffStatusEnum;
  * ```scss
  * .custom-component {
  *
- *  &.daff-danger {
+ *  &.daff-critical {
  *    background: daff-color($red, 10);
  *    color: daff-color($red, 90);
  *  }
@@ -1653,8 +1654,9 @@ var DaffStatusEnum;
  *
  * The directive applies the following CSS classes based on the status:
  *
+ * - `daff-info`: Applied when the status is `info`.
  * - `daff-warn`: Applied when the status is `warn`.
- * - `daff-danger`: Applied when the status is `danger`.
+ * - `daff-critical`: Applied when the status is `critical`.
  * - `daff-success`: Applied when the status is `success`.
  */
 class DaffStatusableDirective {
@@ -1664,8 +1666,9 @@ class DaffStatusableDirective {
      */
     get class() {
         return {
+            'daff-info': this.status === DaffStatusEnum.Info,
             'daff-warn': this.status === DaffStatusEnum.Warn,
-            'daff-danger': this.status === DaffStatusEnum.Danger,
+            'daff-critical': this.status === DaffStatusEnum.Critical,
             'daff-success': this.status === DaffStatusEnum.Success,
         };
     }
@@ -2443,6 +2446,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 type: Input
             }] } });
 
+const DaffOpenableStateError = '`open` cannot be set as an input property on the DaffOpenableDirective if it is not stateless. Did you mean to call `reveal`, `hide`, or `toggle`?';
+
+/**
+ * A directive that opens or closes a component. It should only be used as an [Angular Host Directive](https://angular.dev/guide/directives/directive-composition-api).
+ * This directive is stateless by default, but it supports both a state and stateless implementation. Only one version should be used within a component.
+ *
+ * ## Example
+ * ```ts
+ * import {
+ *  Component,
+ *  ChangeDetectionStrategy,
+ * } from '@angular/core';
+ *
+ * import { DaffOpenableDirective } from '@daffodil/design';
+ *
+ * @Component({
+ *   selector: 'custom-component',
+ *   template: `
+ *     <button (click)="toggle()">Click me!</button>
+ *     <div class="hidden-block">This is a hidden block that can be shown by clicking the button.</div>
+ *   `,
+ *   styles: [`
+ *   :host {
+ *     .hidden-block {
+ *       display: none;
+ *     }
+ *
+ *     &.daff-open {
+ *       .hidden-block {
+ *         display: block;
+ *       }
+ *     }
+ *   }`],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ *   hostDirectives: [{
+ *     directive: DaffOpenableDirective,
+ *   }],
+ * })
+ * export class CustomComponent {
+ *   constructor(private openDirective: DaffOpenableDirective) {}
+ *
+ *   toggle() {
+ *     this.openDirective.toggle();
+ *   }
+ * }
+ * ```
+ */
+class DaffOpenableDirective {
+    constructor() {
+        /** Whether or not a component implementing the directive is open */
+        this.open = false;
+        /** Whether or not a component should handle state
+         *
+         * ```ts
+         * constructor(private openDirective: DaffOpenableDirective) {
+         *  this.openDirective.stateless = false;
+         * }
+         * ```
+         */
+        this.stateless = true;
+        /**
+         * Event fired when a component is opened (true) or closed (false)
+         */
+        this.toggled = new EventEmitter();
+    }
+    _setOpen(v) {
+        if (!this.stateless) {
+            this.open = v;
+        }
+    }
+    /**
+     * Open the component
+     */
+    reveal() {
+        this._setOpen(true);
+        this.toggled.emit(true);
+    }
+    /**
+     * Close the component
+     */
+    hide() {
+        this._setOpen(false);
+        this.toggled.emit(false);
+    }
+    /**
+     * Open or close the component, depending on if it's currently open or not
+     */
+    toggle() {
+        const state = !this.open;
+        this._setOpen(state);
+        this.toggled.emit(state);
+    }
+    ngOnChanges(changes) {
+        /**
+         * Throw an error if open is set in a component that is not stateless
+         */
+        if (changes.open.currentValue && !this.stateless) {
+            this.open = changes.open.previousValue;
+            if (isDevMode()) {
+                throw new Error(DaffOpenableStateError);
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "this.open" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DaffOpenableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffOpenable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.daff-open']
+            }], toggled: [{
+                type: Output
+            }] } });
+
 // Core
 
 /*
@@ -2459,5 +2583,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector, daffPrefixableMixin, daffSuffixableMixin };
+export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector, daffPrefixableMixin, daffSuffixableMixin };
 //# sourceMappingURL=daffodil-design.mjs.map