@daffodil/design 0.91.0 → 0.92.3-rc.0

package/button/index.d.ts

@@ -1,20 +1,26 @@
 import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
+import * as _daffodil_design_button from '@daffodil/design/button';
 import * as i1 from '@daffodil/design';
-import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective, DaffDisableableDirective } from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffSuffixDirective, DaffDisableableDirective, DaffLoadableDirective } from '@daffodil/design';
 
 /**
  * The size types that the DaffButtonComponent can implement.
  */
 type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
 declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {
+    /**
+     * @docs-private
+     */
+    defaultSize: DaffButtonSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonSizableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonSizableDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-declare class DaffButtonBaseDirective {
-    private size;
+declare class DaffButtonBaseDirective implements DaffDisableable {
+    private buttonSizable;
     private disabledDirective;
+    private loadingDirective;
     /**
      * @docs-private
      */
@@ -23,7 +29,7 @@ declare class DaffButtonBaseDirective {
      * @docs-private
      */
     _suffix: DaffSuffixDirective;
-    constructor(size: DaffButtonSizableDirective, disabledDirective: DaffDisableableDirective);
+    constructor(buttonSizable: DaffButtonSizableDirective, disabledDirective: DaffDisableableDirective, loadingDirective: DaffLoadableDirective);
     /**
      * Sets the tabindex.
      */
@@ -33,8 +39,20 @@ declare class DaffButtonBaseDirective {
      */
     get disabled(): any;
     set disabled(value: any);
+    /**
+     * @docs-private
+     *
+     * Internal function to access the loading property of the DaffLoadableDirective
+     */
+    get loading(): boolean;
+    /**
+     * @docs-private
+     *
+     * Internal function to access the size property of the DaffButtonSizableDirective
+     */
+    get buttonSize(): _daffodil_design_button.DaffButtonSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.DaffLoadableDirective; inputs: { "loading": "loading"; }; outputs: {}; }]>;
 }
 
 /**
@@ -163,6 +181,8 @@ declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
 }
 
 /**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
+ *
  * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
  *
  * @example Underline button
@@ -216,6 +236,7 @@ declare const DAFF_ICON_BUTTON_COMPONENTS: readonly [typeof DaffIconButtonCompon
 declare const DAFF_STROKED_BUTTON_COMPONENTS: readonly [typeof DaffStrokedButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
 /**
  * @docs-private
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
  */
 declare const DAFF_UNDERLINE_BUTTON_COMPONENTS: readonly [typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
 

package/button/src/button/basic/button-theme.scss

@@ -12,8 +12,10 @@
 		background: $hover-color;
 	}
 
-	&:hover {
-		color: daff-text-contrast($hover-color);
+	@media (hover: hover) {
+		&:hover {
+			color: daff-text-contrast($hover-color);
+		}
 	}
 
 	&:active {

package/button/src/button/button-base.scss

@@ -7,8 +7,11 @@
 		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
 			0 4px 8px 0 rgba(0, 0, 0, 0.05);
 
-		&:hover {
-			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
+		@media (hover: hover) {
+			&:hover {
+				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08),
+					0 4px 6px rgba(0, 0, 0, 0.04);
+			}
 		}
 
 		&[disabled],
@@ -49,6 +52,19 @@
 	.daff-button__content {
 		@include t.text-truncate();
 	}
+
+	&.daff-loading {
+		.daff-button__content,
+		.daff-prefix,
+		.daff-suffix {
+			opacity: 0;
+		}
+
+		.daff-button__loading {
+			z-index: 5;
+			position: absolute;
+		}
+	}
 }
 
 @mixin daff-button-background($border-radius) {
@@ -65,12 +81,19 @@
 			z-index: 0;
 		}
 
-		&:hover,
 		&:active {
 			&::after {
 				opacity: 1;
 			}
 		}
+
+		@media (hover: hover) {
+			&:hover {
+				&::after {
+					opacity: 1;
+				}
+			}
+		}
 	}
 }
 

package/button/src/button/icon/icon-theme.scss

@@ -7,12 +7,16 @@
 ) {
 	color: $base-color;
 
-	&:hover {
-		color: $hover-color;
-		@if $base-color == currentColor {
-			opacity: 0.8;
-		} @else {
-			opacity: 1;
+	&:not(&[disabled], &.daff-disabled) {
+		@media (hover: hover) {
+			&:hover {
+				color: $hover-color;
+				@if $base-color == currentColor {
+					opacity: 0.8;
+				} @else {
+					opacity: 1;
+				}
+			}
 		}
 	}
 

package/button/src/button/raised/raised-theme.scss

@@ -15,8 +15,10 @@
 	box-shadow: 0 1px 5px -4px rgba($black, 0.5), 0 4px 8px 0 rgba($black, 0.05);
 	color: daff-text-contrast($base-color);
 
-	&:hover {
-		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
+	@media (hover: hover) {
+		&:hover {
+			box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
+		}
 	}
 }
 

package/callout/README.md

@@ -4,7 +4,7 @@ A callout is a versatile, pre-styled container used to highlight key pieces of c
 ## Overview
 Callouts help draw attention to important information and can be used multiple times on a page. They're flexible enough to support various content arrangements and include built-in containers for icons, taglines, titles, subtitles, and custom body content.
 
-<design-land-example-viewer-container example="basic-callout"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-callout"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -17,7 +17,7 @@ Callouts help draw attention to important information and can be used multiple t
 ## Usage
 
 ### Within a standalone component
-To use the callout components, import `DAFF_CALLOUT_COMPONENTS` into your custom component:
+Import `DAFF_CALLOUT_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
@@ -57,27 +57,8 @@ export class CustomComponentModule { }
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
 ## Anatomy
-A callout consists of the following components, displayed in the order listed:
+A callout is composed of a wrapper, icon, tagline, title, subtitle, and body, displayed in the order listed:
 
-### Container
-**`<daff-callout>`**: The main wrapper that holds all callout content.
-
-### Icon
-**`[daffCalloutIcon]`**: Displays a visual or branding element. Avoid using for interactive or actionable icons.
-
-### Tagline
-**`[daffCalloutTagline]`**: Short, memorable phrase that provides quick context.
-
-### Title
-**`[daffCalloutTitle]`**: The primary heading text. Applied to heading elements (`<h1>`, `<h2>`, etc.).
-
-### Subtitle
-**`[daffCalloutSubtitle]`**: Secondary descriptive text displayed beneath the title.
-
-### Body
-**`[daffCalloutBody]`**: Flexible container for additional content. It's unstyled except for spaicng and should only be used once per callout.
-
-### Basic structure
 ```html
 <daff-callout>
   <div daffCalloutIcon>
@@ -92,26 +73,33 @@ A callout consists of the following components, displayed in the order listed:
 </daff-callout>
 ```
 
+- **`<daff-callout>`**: The wrapper component that holds all callout content.
+- **`[daffCalloutIcon]`**: Displays a visual or branding element. Avoid using for interactive or actionable icons.
+- **`[daffCalloutTagline]`**: Short, memorable phrase that provides quick context.
+- **`[daffCalloutTitle]`**: The primary heading text. Applied to heading elements (`<h1>`, `<h2>`, etc.).
+- **`[daffCalloutSubtitle]`**: Secondary descriptive text displayed beneath the title.
+- **`[daffCalloutBody]`**: Flexible container for additional content. It's unstyled except for spacing and **should only be used once per callout**.
+
 ## Features
 
 ### Colors
 Use the `color` property to change the background of a callout.
 
-<design-land-example-viewer-container example="callout-theming"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-theming"></daff-docs-example-viewer>
 
 ### Text alignment
-Control callout-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect `[daffCalloutBody]` content or nested elements.
+Control callout-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect content placed within `[daffCalloutBody]`.
 
-<design-land-example-viewer-container example="callout-text-alignment"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-text-alignment"></daff-docs-example-viewer>
 
 ### Compact
 Use the `compact` property on callout to reduce padding and suit UIs with tighter spacing requirements.
 
-<design-land-example-viewer-container example="compact-callout"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="compact-callout"></daff-docs-example-viewer>
 
 ## Examples
 
 ### Callout with two columns
 Callouts are flexible enough to support custom grid layouts for more complex arrangements:
 
-<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-with-grid"></daff-docs-example-viewer>

package/card/README.md

@@ -4,11 +4,7 @@ A card is a flexible content container used to group related information and act
 ## Overview
 Cards help organize and present information in a clear and visually appealing way. There are two styles: **default (filled)** and **stroked**, and can include images, text, lists, actions, or even other components.
 
-**Default (filled) card**
-<design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
-
-**Stroked card**
-<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-cards"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -19,8 +15,7 @@ Cards help organize and present information in a clear and visually appealing wa
 
 ## Usage
 
-### Within a standalone component
-Import the card style(s) you need into a standalone component:
+Import the card style(s) you need into your component:
 
 Available imports:
 - Default (filled) cards: `DAFF_CARD_COMPONENTS`
@@ -40,55 +35,13 @@ import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use card in a module, import `DaffCardModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffCardModule } from '@daffodil/design/card';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffCardModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffCalloutModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A card consists of the following components, displayed in the order listed:
-
-### Container
-**`<daff-card>`** or **`<daff-stroked-card>`**: The main wrapper that holds all card content.
-
-### Image
-**`[daffCardImage]`**: Image element at the top of the card.
-
-### Icon
-**`[daffCardIcon]`**: Displays a visual or branding element. Avoid using for interactive icons.
-
-### Tagline
-**`[daffCardTagline]`**: Short phrase that provides quick context.
-
-### Title
-**`[daffCardTitle]`**: The primary heading of the card.
-
-### Content
-**`[daffCardContent]`**: Flexible container for body text or custom content. It's unstyled except for spacing and should only be used once per card.
+A card is composed of a container, image, icon, tagline, title, content, and actions, displayed in the order listed:
 
-### Actions
-**`[daffCardActions]`**: Container for buttons or links, positioned at the bottom.
-
-### Basic structure
 ```html
 <daff-card>
   <img daffCardImage src="/product.jpg" alt="Product image">
@@ -107,6 +60,27 @@ A card consists of the following components, displayed in the order listed:
 </daff-card>
 ```
 
+**`<daff-card>`** or **`<daff-stroked-card>`**\
+The wrapper component that holds all card content.
+
+**`[daffCardImage]`**\
+Image element at the top of the card.
+
+**`[daffCardIcon]`**\
+Displays a visual or branding element. Avoid using for interactive icons.
+
+**`[daffCardTagline]`**\
+Short phrase that provides quick context.
+
+**`[daffCardTitle]`**\
+The primary heading of the card.
+
+**`[daffCardContent]`**\
+Flexible container for body text or custom content. It's unstyled except for spacing and **should only be used once per card**.
+
+**`[daffCardActions]`**\
+Container for buttons or links, positioned at the bottom.
+
 ## Features
 
 ### Interactive card
@@ -114,19 +88,20 @@ An interactive card turns the entire card into a clickable area that navigates t
 
 To create an interactive card, apply the component selector to an `<a>` element. All card styles support interactive behavior.
 
-<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="linkable-card"></daff-docs-example-viewer>
+
+### Colors
+Cards default to a light gray background. Use the `color` property to change a card's color.
+
+<daff-docs-example-viewer example="card-theming"></daff-docs-example-viewer>
+
 
 ### Elevation
 Use the `elevated` property to add shadows to cards.
 
-<design-land-example-viewer-container example="elevated-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="elevated-card"></daff-docs-example-viewer>
 
 ### Orientation
 Use the `orientation` property to stack card content either `vertical` (default) or `horizontal`. Horizontal cards automatically switch to vertical on smaller screens.
 
-<design-land-example-viewer-container example="card-orientation"></design-land-example-viewer-container>
-
-### Colors
-Cards default to a light gray background. Use the `color` property to change a card's color.
-
-<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="card-orientation"></daff-docs-example-viewer>

package/container/README.md

@@ -1,32 +1,14 @@
 # Container
-Container is a basic structural element that restricts page content to a specific maximum width.
+Container is a structural element that restricts content to a maximum width.
 
 ## Overview
 Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.
 
-## Size
-The size of a container can be defined by using the `size` property. There is no default size set.
-
-Supported sizes: `xs | sm | md | lg | xl`
-
-| Description | Max Width | Value  |
-| ----------- | --------- | ------ |
-| Extra Small | 640px     | xs     |
-| Small       | 800px     | sm     |
-| Medium      | 1040px    | md     |
-| Large       | 1340px    | lg     |
-| Extra Large | 1920px    | xl     |
-
-<design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>
-
-
 ## Usage
-
 ### Within a standalone component
 To use container in a standalone component, import `DAFF_CONTAINER_COMPONENTS` directly into your custom component:
 
 ```ts
-
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 
 @Component({
@@ -40,11 +22,11 @@ export class CustomComponent {}
 ```
 
 ### Within a module (deprecated)
-To use container in a module, import `DaffCalloutModule` into your custom module:
+To use container in a module, import `DaffContainerModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-import { DaffCalloutModule } from '@daffodil/design/container';
+import { DaffContainerModule } from '@daffodil/design/container';
 import { CustomComponent } from './custom.component';
 
 @NgModule({
@@ -55,10 +37,23 @@ import { CustomComponent } from './custom.component';
     CustomComponent,
   ],
   imports: [
-    DaffCalloutModule,
+    DaffContainerModule,
   ],
 })
 export class CustomComponentModule { }
 ```
 
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Warning**
+>
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Sizes
+Set a size on container using the `size` property. There is no default size.
+
+| Size        | Max Width |
+| ----------- | --------- |
+| `xs`        | 640px     |
+| `sm`        | 800px     |
+| `md`        | 1040px    |
+| `lg`        | 1340px    |
+| `xl`        | 1920px    |

package/fesm2022/daffodil-design-accordion.mjs

@@ -22,10 +22,10 @@ import { DaffArticleEncapsulatedDirective, DaffOpenableDirective, DaffDisableabl
  * ```
  */
 class DaffAccordionComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-accordion', template: '<ng-content></ng-content>', hostDirectives: [{
                             directive: DaffArticleEncapsulatedDirective,
@@ -102,10 +102,10 @@ class DaffAccordionItemComponent {
     toggle() {
         this.openDirective.toggle();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }, { token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }, { token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-accordion-item', hostDirectives: [
                         {
@@ -137,10 +137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * ```
  */
 class DaffAccordionItemTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { classAttribute: "daff-accordion-item__title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { classAttribute: "daff-accordion-item__title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffAccordionItemTitle]',
@@ -154,16 +154,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 class DaffAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
             DaffAccordionComponent,
             DaffAccordionItemComponent,
             DaffAccordionItemTitleDirective], exports: [DaffAccordionComponent,
             DaffAccordionItemComponent,
             DaffAccordionItemTitleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-accordion.mjs","sources":["../../../libs/design/accordion/src/accordion/accordion/accordion.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html","../../../libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts","../../../libs/design/accordion/src/accordion.module.ts","../../../libs/design/accordion/src/accordion.ts","../../../libs/design/accordion/src/daffodil-design-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DaffArticleEncapsulatedDirective } from '@daffodil/design';\n\n/**\n * Groups accordion items.\n *\n * @example\n * ```html\n * <daff-accordion>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n * </daff-accordion>\n * ```\n */\n@Component({\n  selector: 'daff-accordion',\n  template: '<ng-content></ng-content>',\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  hostDirectives: [{\n    directive: DaffArticleEncapsulatedDirective,\n  }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class DaffAccordionComponent {}\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  OnInit,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  DaffDisableableDirective,\n  DaffOpenable,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\n\nlet daffAccordionItemId = 0;\nlet daffAccordionItemContentId = 0;\n\n/**\n * Contains the title and collapsible content. Handles expansion and collapse on user interaction. All `<daff-accordion-item>`s should be grouped inside a `<daff-accordion>`.\n *\n * @example\n * ```html\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Accordion content</div>\n *  </daff-accordion-item>\n * ```\n */\n@Component({\n  selector: 'daff-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n      outputs: ['toggled'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  host: {\n    'class': 'daff-accordion-item',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffAccordionItemComponent implements OnInit, DaffOpenable {\n  /**\n   * The unique id of an accordion item. Defaults to an autogenerated value.\n   */\n  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId;\n\n  /**\n   * The unique id of an accordion item content. Defaults to an autogenerated value.\n   */\n  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId;\n\n  /**\n   * Whether or not an accordion item is initially expanded by default.\n   */\n  @Input() initiallyExpanded = false;\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective\n   */\n  get disabled() {\n    return this.disabledDirective.disabled;\n  }\n\n  constructor(\n    private openDirective: DaffOpenableDirective,\n    private disabledDirective: DaffDisableableDirective,\n  ) {\n    this.openDirective.stateless = false;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.openDirective.open = this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open;\n  }\n\n  /**\n   * @docs-private\n   */\n  get open() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * Reveals the contents of the accordion item.\n   */\n  reveal() {\n    this.openDirective.reveal();\n  }\n\n  /**\n   * Hides the contents of the accordion item.\n   */\n  hide() {\n    this.openDirective.hide();\n  }\n\n  /**\n   * Toggles the visibility of the contents of the accordion item.\n   */\n  toggle() {\n    this.openDirective.toggle();\n  }\n}\n","<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Used to provide a high level overview of the panel content. It should be wrapped by a `<daff-accordion-item>`.\n *\n * @example\n * ```html\n * <div daffAccordionItemTitle>Title</div>\n * ```\n */\n@Directive({\n  selector: '[daffAccordionItemTitle]',\n  host: {\n    'class': 'daff-accordion-item__title',\n  },\n})\nexport class DaffAccordionItemTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n  exports: [\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n})\nexport class DaffAccordionModule { }\n","import { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @docs-private\n *\n * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.\n */\nexport const DAFF_ACCORDION_COMPONENTS = <const> [\n  DaffAccordionComponent,\n  DaffAccordionItemComponent,\n  DaffAccordionItemTitleDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;MAeU,sBAAsB,CAAA;iIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,gJAZvB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAY1B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;+BACE,gBAAgB,EAAA,QAAA,EAChB,2BAA2B,EAAA,cAAA,EAMrB,CAAC;AACf,4BAAA,SAAS,EAAE,gCAAgC;yBAC5C,CAAC,EAAA,eAAA,EACe,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;;;ACnCjD;AAgBA,IAAI,mBAAmB,GAAG,CAAC;AAC3B,IAAI,0BAA0B,GAAG,CAAC;AAElC;;;;;;;;;;AAUG;MAqBU,0BAA0B,CAAA;AAgBrC;;;;AAIG;AACH,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,QAAQ;IACxC;IAEA,WAAA,CACU,aAAoC,EACpC,iBAA2C,EAAA;QAD3C,IAAA,CAAA,aAAa,GAAb,aAAa;QACb,IAAA,CAAA,iBAAiB,GAAjB,iBAAiB;AA1B3B;;AAEG;AACM,QAAA,IAAA,CAAA,MAAM,GAAW,qBAAqB,GAAG,GAAG,GAAG,EAAE,mBAAmB;AAE7E;;AAEG;AACM,QAAA,IAAA,CAAA,SAAS,GAAW,6BAA6B,GAAG,GAAG,GAAG,EAAE,0BAA0B;AAE/F;;AAEG;QACM,IAAA,CAAA,iBAAiB,GAAG,KAAK;AAehC,QAAA,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,KAAK;IACtC;AAEA;;AAEG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI;IACrG;AAEA;;AAEG;AACH,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI;IAChC;AAEA;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;IAC7B;AAEA;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;IAC3B;AAEA;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;IAC7B;iIAjEW,0BAA0B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,wYClDvC,wdAWM,EAAA,MAAA,EAAA,CAAA,mwCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDuCO,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBApBtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,cAAA,EAGf;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,qBAAqB;4BAChC,OAAO,EAAE,CAAC,SAAS,CAAC;AACrB,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,wBAAwB;4BACnC,MAAM,EAAE,CAAC,UAAU,CAAC;AACrB,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,OAAO,EAAE,qBAAqB;AAC/B,qBAAA,EAAA,aAAA,EACc,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wdAAA,EAAA,MAAA,EAAA,CAAA,mwCAAA,CAAA,EAAA;iIAMtC,MAAM,EAAA,CAAA;sBAAd;gBAKQ,SAAS,EAAA,CAAA;sBAAjB;gBAKQ,iBAAiB,EAAA,CAAA;sBAAzB;;;AEhEH;AAGA;;;;;;;AAOG;MAOU,+BAA+B,CAAA;iIAA/B,+BAA+B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAA/B,+BAA+B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA/B,+BAA+B,EAAA,UAAA,EAAA,CAAA;kBAN3C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,0BAA0B;AACpC,oBAAA,IAAI,EAAE;AACJ,wBAAA,OAAO,EAAE,4BAA4B;AACtC,qBAAA;AACF,iBAAA;;;ACTD;;AAEG;MAcU,mBAAmB,CAAA;iIAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,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,mBAAmB,YAX5B,YAAY;YACZ,sBAAsB;YACtB,0BAA0B;AAC1B,YAAA,+BAA+B,aAG/B,sBAAsB;YACtB,0BAA0B;YAC1B,+BAA+B,CAAA,EAAA,CAAA,CAAA;AAGtB,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,mBAAmB,YAX5B,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAWH,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAb/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,sBAAsB;wBACtB,0BAA0B;wBAC1B,+BAA+B;AAChC,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,sBAAsB;wBACtB,0BAA0B;wBAC1B,+BAA+B;AAChC,qBAAA;AACF,iBAAA;;;AClBD;;;;AAIG;AACI,MAAM,yBAAyB,GAAW;IAC/C,sBAAsB;IACtB,0BAA0B;IAC1B,+BAA+B;;;ACZjC;;AAEG;;;;"}
+{"version":3,"file":"daffodil-design-accordion.mjs","sources":["../../../libs/design/accordion/src/accordion/accordion/accordion.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html","../../../libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts","../../../libs/design/accordion/src/accordion.module.ts","../../../libs/design/accordion/src/accordion.ts","../../../libs/design/accordion/src/daffodil-design-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DaffArticleEncapsulatedDirective } from '@daffodil/design';\n\n/**\n * Groups accordion items.\n *\n * @example\n * ```html\n * <daff-accordion>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n * </daff-accordion>\n * ```\n */\n@Component({\n  selector: 'daff-accordion',\n  template: '<ng-content></ng-content>',\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  hostDirectives: [{\n    directive: DaffArticleEncapsulatedDirective,\n  }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class DaffAccordionComponent {}\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  OnInit,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffOpenable,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\nlet daffAccordionItemId = 0;\nlet daffAccordionItemContentId = 0;\n\n/**\n * Contains the title and collapsible content. Handles expansion and collapse on user interaction. All `<daff-accordion-item>`s should be grouped inside a `<daff-accordion>`.\n *\n * @example\n * ```html\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Accordion content</div>\n *  </daff-accordion-item>\n * ```\n */\n@Component({\n  selector: 'daff-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n      outputs: ['toggled'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  host: {\n    'class': 'daff-accordion-item',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDisableable {\n  /**\n   * The unique id of an accordion item. Defaults to an autogenerated value.\n   */\n  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId;\n\n  /**\n   * The unique id of an accordion item content. Defaults to an autogenerated value.\n   */\n  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId;\n\n  /**\n   * Whether or not an accordion item is initially expanded by default.\n   */\n  @Input() initiallyExpanded = false;\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective\n   */\n  get disabled() {\n    return this.disabledDirective.disabled;\n  }\n\n  constructor(\n    private openDirective: DaffOpenableDirective,\n    private disabledDirective: DaffDisableableDirective,\n  ) {\n    this.openDirective.stateless = false;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.openDirective.open = this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open;\n  }\n\n  /**\n   * @docs-private\n   */\n  get open() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * Reveals the contents of the accordion item.\n   */\n  reveal() {\n    this.openDirective.reveal();\n  }\n\n  /**\n   * Hides the contents of the accordion item.\n   */\n  hide() {\n    this.openDirective.hide();\n  }\n\n  /**\n   * Toggles the visibility of the contents of the accordion item.\n   */\n  toggle() {\n    this.openDirective.toggle();\n  }\n}\n","<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Used to provide a high level overview of the panel content. It should be wrapped by a `<daff-accordion-item>`.\n *\n * @example\n * ```html\n * <div daffAccordionItemTitle>Title</div>\n * ```\n */\n@Directive({\n  selector: '[daffAccordionItemTitle]',\n  host: {\n    'class': 'daff-accordion-item__title',\n  },\n})\nexport class DaffAccordionItemTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n  exports: [\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n})\nexport class DaffAccordionModule { }\n","import { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @docs-private\n *\n * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.\n */\nexport const DAFF_ACCORDION_COMPONENTS = <const> [\n  DaffAccordionComponent,\n  DaffAccordionItemComponent,\n  DaffAccordionItemTitleDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}