@daffodil/design 0.89.0 → 0.91.0

package/README.md

@@ -38,6 +38,7 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
   * [Quantity Field](/libs/design/src/atoms/form/quantity-field/README.md)
 * [Image](/libs/design/image/README.md)
 * [Loading Icon](/libs/design/loading-icon/README.md)
+* [Tag](/libs/design/tag/README.md)
 
 ### Molecules
 * [Accordion](/libs/design/accordion/README.md)

package/accordion/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
+import { DaffOpenable, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * Groups accordion items.
@@ -39,6 +39,7 @@ declare class DaffAccordionComponent {
  */
 declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
     private openDirective;
+    private disabledDirective;
     /**
      * The unique id of an accordion item. Defaults to an autogenerated value.
      */
@@ -52,10 +53,12 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
      */
     initiallyExpanded: boolean;
     /**
-     * Disables an accordion item and prevents it from being expanded or collapsed.
+     * @docs-private
+     *
+     * Internal function to access the disabled property of the DaffDisableableDirective
      */
-    disabled: boolean;
-    constructor(openDirective: DaffOpenableDirective);
+    get disabled(): boolean;
+    constructor(openDirective: DaffOpenableDirective, disabledDirective: DaffDisableableDirective);
     /**
      * @docs-private
      */
@@ -77,7 +80,7 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: { "toggled": "toggled"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: { "toggled": "toggled"; }; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**

package/article/README.md

@@ -31,7 +31,7 @@ The link style in an article uses the default browser link style.
 <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
 
 ### Code
-These are styles for inline and multiline blocks of code.
+These are styles for inline and multiline blocks of code. By default, a copy button is added to all code blocks. Disable this by adding a `nocopy` attribute to the `pre` element.
 
 #### Inline code
 <design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>

package/article/index.d.ts

@@ -1,10 +1,30 @@
 import * as i0 from '@angular/core';
+import { ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common';
 
+declare class DaffArticleCopyButtonService {
+    private buttons;
+    /**
+     * Finds all code blocks and adds copy buttons to them.
+     * Skips code blocks with the `nocopy` attribute.
+     * @param hostElement - The host element to search for code blocks.
+     * @param viewContainerRef - The view container to create the copy button components.
+     */
+    addCopyButtonsToCodeBlocks(hostElement: HTMLElement, viewContainerRef: ViewContainerRef): void;
+    /**
+     * Cleanup copy button references
+     */
+    cleanup(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleCopyButtonService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffArticleCopyButtonService>;
+}
+
 /**
  * A component for creating articles within your page.
  */
 declare class DaffArticleComponent {
+    private copyButtonService;
+    constructor(copyButtonService: DaffArticleCopyButtonService);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], true, never>;
 }

package/article/src/article-theme.scss

@@ -36,6 +36,11 @@
 				}
 			}
 
+			&__copy-button {
+				background: daff-color($neutral, 10);
+				border: 1px solid daff-color($neutral, 20);
+			}
+
 			hr {
 				background: daff-color($neutral, 20);
 			}
@@ -109,6 +114,11 @@
 				}
 			}
 
+			&__copy-button {
+				background: daff-color($neutral, 90);
+				border: 1px solid daff-color($neutral, 80);
+			}
+
 			hr {
 				background: daff-color($neutral, 80);
 			}

package/button/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * The size types that the DaffButtonComponent can implement.
@@ -14,6 +14,7 @@ declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButton
 
 declare class DaffButtonBaseDirective {
     private size;
+    private disabledDirective;
     /**
      * @docs-private
      */
@@ -22,19 +23,18 @@ declare class DaffButtonBaseDirective {
      * @docs-private
      */
     _suffix: DaffSuffixDirective;
-    constructor(size: DaffButtonSizableDirective);
+    constructor(size: DaffButtonSizableDirective, disabledDirective: DaffDisableableDirective);
     /**
      * Sets the tabindex.
      */
     tabindex: number;
-    private _disabled;
     /**
      * The disabled state of the button.
      */
     get disabled(): any;
     set disabled(value: any);
     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: {}; }]>;
+    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: {}; }]>;
 }
 
 /**

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

@@ -12,7 +12,7 @@
 		}
 
 		&[disabled],
-		&.disabled {
+		&.daff-disabled {
 			&:hover {
 				box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
 					0 4px 8px 0 rgba(0, 0, 0, 0.05);
@@ -35,7 +35,7 @@
 	text-decoration: none;
 
 	&[disabled],
-	&.disabled {
+	&.daff-disabled {
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
@@ -52,7 +52,7 @@
 }
 
 @mixin daff-button-background($border-radius) {
-	&:not(&[disabled], &.disabled) {
+	&:not(&[disabled], &.daff-disabled) {
 		&::after {
 			content: '';
 			border-radius: $border-radius;

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

@@ -1,21 +1,15 @@
 @use '../../../../scss/theming' as *;
 
 @mixin daff-raised-button-theme-variant($base-color) {
-	@if daff-contrast-ratio(
-			$base-color,
-			daff-text-contrast($base-color)
-		) < 4.5 {
+	@if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
 		@error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	@if daff-contrast-ratio(
-			$base-color,
-			daff-text-contrast($base-color)
-		) < 4.5 {
+	@if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
 		@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	$black: daff-color($daff-neutral, 110);
+	$black: daff-get-base-color($theme, 'black');
 	background-color: $base-color;
 	border: 1px solid $base-color;
 	box-shadow: 0 1px 5px -4px rgba($black, 0.5), 0 4px 8px 0 rgba($black, 0.05);
@@ -41,9 +35,7 @@
 	$neutral: daff-get-palette($theme, neutral);
 
 	.daff-raised-button {
-		@include daff-raised-button-theme-variant(
-			daff-color($neutral, 20)
-		);
+		@include daff-raised-button-theme-variant(daff-color($neutral, 20));
 
 		&.daff-primary {
 			@include daff-raised-button-theme-variant(daff-color($primary));
@@ -74,10 +66,8 @@
 		}
 
 		&[disabled],
-		&.disabled {
-			@include daff-raised-button-theme-variant(
-				daff-color($neutral, 30)
-			);
+		&.daff-disabled {
+			@include daff-raised-button-theme-variant(daff-color($neutral, 30));
 			color: daff-color($neutral, 50);
 
 			&::after {

package/card/README.md

@@ -130,11 +130,3 @@ Use the `orientation` property to stack card content either `vertical` (default)
 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>
-
-## Deprecations
-The raised card style has been deprecated in favor of the `elevated` property. Replace `<daff-raised-card>` with `<daff-card [elevated]="true">`
-
-```html
-<daff-card [elevated]="true">
-</daff-card>
-```

package/card/index.d.ts

@@ -1,37 +1,17 @@
 import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-
-/**
- * The available orientations for a card.
- *
- * | Orientation | Description |
- * | -- | -- |
- * | `vertical` | Stacks card content from top to bottom. This is the default orientation. |
- * | `horizontal` | Places card content side-by-side. On smaller screens, horizontal cards automatically switch to vertical for responsiveness. |
- */
-type DaffCardOrientation = 'vertical' | 'horizontal';
-/**
- * Enum for representing the available card orientations.
- * See {@link DaffCardOrientation} for descriptions of each orientation.
- */
-declare enum DaffCardOrientationEnum {
-    Vertical = "vertical",
-    Horizontal = "horizontal"
-}
+import { DaffOrientableDirective } from '@daffodil/design';
 
 declare class DaffCardBaseDirective {
-    /**
-     * The orientation of a card.
-     */
-    orientation: DaffCardOrientation;
+    private orientation;
     /**
      * Whether or not a card displays a shadow.
      */
     elevated: boolean;
+    constructor(orientation: DaffOrientableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "orientation": { "alias": "orientation"; "required": false; }; "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
-    static ngAcceptInputType_orientation: DaffCardOrientation | null | undefined;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
 }
 
 /**
@@ -57,14 +37,6 @@ declare class DaffCardComponent extends DaffCardBaseDirective {
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,a[daff-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
 }
 
-/**
- * @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
- */
-declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedCardComponent, "daff-raised-card,a[daff-raised-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
-}
-
 /**
  * A card variant with a stroked (outlined) border instead of a filled background.
  *
@@ -172,7 +144,7 @@ declare class DaffCardActionsDirective {
  */
 declare class DaffCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective], [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective], [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffCardModule>;
 }
 
@@ -180,11 +152,6 @@ declare class DaffCardModule {
  * @docs-private
  */
 declare const DAFF_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
-/**
- * @docs-private
- * @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
- */
-declare const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
 /**
  * @docs-private
  */
@@ -192,7 +159,6 @@ declare const DAFF_STROKED_CARD_COMPONENTS: readonly [typeof DaffStrokedCardComp
 /**
  * @docs-private
  */
-declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
+declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
 
-export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS, DAFF_RAISED_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardOrientationEnum, DaffCardTaglineDirective, DaffCardTitleDirective, DaffRaisedCardComponent, DaffStrokedCardComponent };
-export type { DaffCardOrientation };
+export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardTaglineDirective, DaffCardTitleDirective, DaffStrokedCardComponent };

package/card/src/card-base-theme.scss

@@ -31,7 +31,6 @@
 	$tertiary: daff-get-palette($theme, tertiary);
 	$base: daff-get-base-color($theme, base);
 	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$black: daff-get-base-color($theme, 'black');
 	$neutral: daff-get-palette($theme, neutral);
 	$mode: daff-get-theme-mode($theme);
 
@@ -43,8 +42,7 @@
 		}
 	}
 
-	.daff-card,
-	.daff-raised-card {
+	.daff-card {
 		@include light($mode) {
 			@include daff-basic-card-theme-variant(daff-color($neutral, 10));
 
@@ -107,8 +105,7 @@
 			}
 		}
 
-		&.daff-card,
-		&.daff-raised-card {
+		&.daff-card {
 			@include light($mode) {
 				@include daff-linkable-card-theme-variant(daff-color($neutral, 20));
 

package/card/src/card-base.scss

@@ -32,7 +32,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
 		}
 	}
 
-	&.vertical {
+	&.daff-vertical {
 		flex-direction: column;
 
 		.daff-card__image {
@@ -44,7 +44,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
 		}
 	}
 
-	&.horizontal {
+	&.daff-horizontal {
 		flex-wrap: wrap;
 
 		@include layout.breakpoint(mobile) {

package/checkbox/index.d.ts

@@ -0,0 +1,177 @@
+import * as i0 from '@angular/core';
+import { ElementRef, EventEmitter, ChangeDetectorRef, QueryList, OnInit } from '@angular/core';
+import * as i1 from '@angular/common';
+import { UntypedFormArray, ControlValueAccessor, NgControl } from '@angular/forms';
+
+declare class DaffCheckboxComponent {
+    private _cdRef;
+    /**
+     * @docs-private
+     */
+    nativeCheckbox: ElementRef<HTMLInputElement>;
+    /**
+     * The name of the checkbox.
+     */
+    name: string;
+    /**
+     * The value of the checkbox.
+     */
+    value: any;
+    /**
+     * Boolean value to determine whether or not the checkbox is checked.
+     */
+    private _checked;
+    get checked(): boolean;
+    set checked(value: boolean);
+    /**
+     * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
+     */
+    id: string;
+    /**
+     * The aria-label of the checkbox.
+     */
+    label: string;
+    /**
+     * The aria-labeledby of the checkbox.
+     */
+    labeledBy: string;
+    /**
+     * Event on whether or not the selection has changed.
+     */
+    becameChecked: EventEmitter<boolean>;
+    becameUnchecked: EventEmitter<void>;
+    /**
+     * Whether the checkbox is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The role of the component. Set to "checkbox".
+     *
+     * @docs-private
+     */
+    role: string;
+    /**
+     * @docs-private
+     */
+    _onChange(val: Event): void;
+    /**
+     * @docs-private
+     */
+    get focusClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get disabledClass(): boolean;
+    /**
+     * Sets focused to false.
+     */
+    onBlur(): void;
+    /**
+     * Sets focused to true.
+     */
+    onFocus(): void;
+    constructor(_cdRef: ChangeDetectorRef);
+    /**
+     * Sets checked to true.
+     */
+    select(): void;
+    /**
+     * Sets checked to false
+     */
+    deselect(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labeledBy": { "alias": "aria-labelledby"; "required": false; }; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], true, never>;
+}
+
+declare class DaffCheckboxSetComponent {
+    formArray: UntypedFormArray;
+    /**
+     * The name of the checkbox-set
+     */
+    name: string;
+    /**
+     * The role of the component. Set to "checkbox".
+     *
+     * @docs-private
+     */
+    role: string;
+    /**
+     * The list of checkboxes in the set.
+     *
+     * @docs-private
+     */
+    checkboxes: QueryList<DaffCheckboxComponent>;
+    valueList: EventEmitter<any[]>;
+    getValues(): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxSetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": { "alias": "formArray"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], true, never>;
+}
+
+/**
+ * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
+ */
+declare class DaffCheckboxControlValueAccessorDirective implements OnInit, ControlValueAccessor {
+    _control: NgControl;
+    private _checkbox;
+    _onChange: (val: any) => void;
+    _onTouched: () => void;
+    /**
+     * The value of the ControlValueAccessor
+     */
+    value: any;
+    /**
+     * The name of the ControlValueAccessor
+     */
+    name: string;
+    constructor(_control: NgControl, _checkbox: DaffCheckboxComponent);
+    /**
+     * A lifecycle method called when the directive is initialized.
+     */
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * writes a new value down into the component.
+     */
+    writeValue(value: any): void;
+    /**
+     * Registers the change handler
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * Registers the touched handler
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * Sets the disabled state.
+     */
+    setDisabledState?(isDisabled: boolean): void;
+    /**
+     * calls the child checkbox's select function
+     */
+    fireSelect(): void;
+    /**
+     * calls the child checkbox's deselect function
+     */
+    fireDeselect(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxControlValueAccessorDirective, [{ optional: true; self: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class DaffCheckboxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCheckboxModule, never, [typeof i1.CommonModule, typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective], [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffCheckboxModule>;
+}
+
+/**
+ * @docs-private
+ */
+declare const DAFF_CHECKBOX_COMPONENTS: readonly [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective];
+
+export { DAFF_CHECKBOX_COMPONENTS, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent };

package/fesm2022/daffodil-design-accordion.mjs

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, Directive, NgModule } from '@angular/core';
 import * as i1 from '@daffodil/design';
-import { DaffArticleEncapsulatedDirective, DaffOpenableDirective } from '@daffodil/design';
+import { DaffArticleEncapsulatedDirective, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * Groups accordion items.
@@ -47,8 +47,17 @@ let daffAccordionItemContentId = 0;
  * ```
  */
 class DaffAccordionItemComponent {
-    constructor(openDirective) {
+    /**
+     * @docs-private
+     *
+     * Internal function to access the disabled property of the DaffDisableableDirective
+     */
+    get disabled() {
+        return this.disabledDirective.disabled;
+    }
+    constructor(openDirective, disabledDirective) {
         this.openDirective = openDirective;
+        this.disabledDirective = disabledDirective;
         /**
          * The unique id of an accordion item. Defaults to an autogenerated value.
          */
@@ -61,10 +70,6 @@ class DaffAccordionItemComponent {
          * Whether or not an accordion item is initially expanded by default.
          */
         this.initiallyExpanded = false;
-        /**
-         * Disables an accordion item and prevents it from being expanded or collapsed.
-         */
-        this.disabled = false;
         this.openDirective.stateless = false;
     }
     /**
@@ -97,25 +102,29 @@ 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 }], 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", disabled: "disabled" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }], 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__header[disabled]{cursor:not-allowed;opacity:.7}.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__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.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-accordion-item', hostDirectives: [{
+            args: [{ selector: 'daff-accordion-item', hostDirectives: [
+                        {
                             directive: DaffOpenableDirective,
                             outputs: ['toggled'],
-                        }], host: {
+                        },
+                        {
+                            directive: DaffDisableableDirective,
+                            inputs: ['disabled'],
+                        },
+                    ], host: {
                         'class': 'daff-accordion-item',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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__header[disabled]{cursor:not-allowed;opacity:.7}.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__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"] }]
-        }], ctorParameters: () => [{ type: i1.DaffOpenableDirective }], propDecorators: { itemId: [{
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [{ type: i1.DaffOpenableDirective }, { type: i1.DaffDisableableDirective }], propDecorators: { itemId: [{
                 type: Input
             }], contentId: [{
                 type: Input
             }], initiallyExpanded: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }] } });
 
 /* eslint-disable quote-props */