@daffodil/design 0.77.0 → 0.78.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';
@@ -2443,6 +2443,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 +2580,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