@daffodil/design 0.78.0 → 0.79.0

package/atoms/form/form-field/form-field/form-field.component.d.ts

@@ -11,7 +11,7 @@ export declare class DaffFormFieldComponent implements DoCheck, AfterContentInit
      * The tracking property used to determine if the parent form has been submitted,
      * and thus show an error message (even if the field hasn't been touched).
      *
-     * @deprecated
+     * @deprecated Deprecated in version 0.78.0. Will be removed in version 0.81.0.
      */
     formSubmitted: boolean;
     /**

package/button/README.md

@@ -34,7 +34,7 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
 ## Usage
 
 ### Within a standalone component
-To use button in a standalone component, import it directly into your custom component:
+To use button in a standalone component, import it directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
 
 ```ts
 @Component({
@@ -42,7 +42,7 @@ To use button in a standalone component, import it directly into your custom com
   templateUrl: './custom-component.component.html',
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
   ],
 })
 export class CustomComponent {}
@@ -89,7 +89,7 @@ Supported colors: `primary | secondary | tertiary | black | white | theme | them
 ## Status Indicators
 Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 

package/button/button/basic/button.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffButtonComponent is a rectangular contained button with background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-button>
+ *  <div daffPrefix></div>
+ *  Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-button>
+ *  <div daffPrefix></div>
+ *  Linked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/button-base.directive.d.ts

@@ -0,0 +1,51 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffButtonSizableDirective } from './button-sizable.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+import * as i2 from "./button-sizable.directive";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the button mixins
+ */
+declare class DaffButtonBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffButtonBase: (new (...args: any[]) => {
+    [x: string]: any;
+    _prefix: import("@daffodil/design").DaffPrefixDirective;
+}) & (new (...args: any[]) => {
+    [x: string]: any;
+    _suffix: import("@daffodil/design").DaffSuffixDirective;
+}) & typeof DaffButtonBase;
+export declare class DaffButtonBaseDirective extends _daffButtonBase implements DaffPrefixable, DaffSuffixable {
+    private elementRef;
+    private renderer;
+    private size;
+    constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
+    /**
+     * @docs-private
+     */
+    get disabledClass(): any;
+    loading: boolean;
+    /**
+     * Set the `tabindex` to 0.
+     */
+    tabindex: number;
+    _disabled: boolean;
+    /**
+     * The disabled state of the button.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    get disabledAttribute(): boolean;
+    get ariaDisabled(): boolean;
+    /**
+     * Set the `tabindex` to -1 if the button is disabled.
+     */
+    get disabledTabIndex(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+}
+export {};

package/button/button/flat/flat.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffFlatButtonComponent is a rectangular contained button no background.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Flat Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Linked flat button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffFlatButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFlatButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFlatButtonComponent, "button[daff-flat-button],a[daff-flat-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/icon/icon.component.d.ts

@@ -0,0 +1,24 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffIconButtonComponent is an icon button used with icon fonts.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </button>
+ *
+ * <a href="/" daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </a>
+ * ```
+ */
+export declare class DaffIconButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffIconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffIconButtonComponent, "button[daff-icon-button],a[daff-icon-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/raised/raised.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Raised Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Linked raised button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffRaisedButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedButtonComponent, "button[daff-raised-button],a[daff-raised-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/stroked/stroked.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffStrokedButtonComponent is a rectangular outlined button with no background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Stroked Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Linked stroked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/underline/underline.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Underline Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Linked underline button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffUnderlineButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffUnderlineButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffUnderlineButtonComponent, "button[daff-underline-button],a[daff-underline-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button.d.ts

@@ -1,3 +1,8 @@
 import { DaffPrefixSuffixModule } from '@daffodil/design';
-import { DaffButtonComponent } from './button/button.component';
-export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule];
+import { DaffButtonComponent } from './button/basic/button.component';
+import { DaffFlatButtonComponent } from './button/flat/flat.component';
+import { DaffIconButtonComponent } from './button/icon/icon.component';
+import { DaffRaisedButtonComponent } from './button/raised/raised.component';
+import { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
+import { DaffUnderlineButtonComponent } from './button/underline/underline.component';
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];

package/button/button.module.d.ts

@@ -1,10 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "./button/button.component";
-import * as i3 from "@daffodil/design";
+import * as i2 from "./button/basic/button.component";
+import * as i3 from "./button/flat/flat.component";
+import * as i4 from "./button/icon/icon.component";
+import * as i5 from "./button/raised/raised.component";
+import * as i6 from "./button/stroked/stroked.component";
+import * as i7 from "./button/underline/underline.component";
+import * as i8 from "@daffodil/design";
 /** @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS} */
 export declare class DaffButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent, typeof i8.DaffPrefixSuffixModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffButtonModule>;
 }

package/button/public_api.d.ts

@@ -1,4 +1,9 @@
 export { DaffButtonModule } from './button.module';
 export { DAFF_BUTTON_COMPONENTS } from './button';
-export { DaffButtonComponent } from './button/button.component';
+export { DaffButtonComponent } from './button/basic/button.component';
 export { DaffButtonSizableDirective } from './button/button-sizable.directive';
+export { DaffFlatButtonComponent } from './button/flat/flat.component';
+export { DaffRaisedButtonComponent } from './button/raised/raised.component';
+export { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
+export { DaffUnderlineButtonComponent } from './button/underline/underline.component';
+export { DaffIconButtonComponent } from './button/icon/icon.component';

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

@@ -0,0 +1,145 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-button-theme-variant(
+	$base-color,
+	$hover-color,
+	$active-color: $hover-color
+) {
+	background-color: $base-color;
+	color: theming.daff-text-contrast($base-color);
+
+	&:after {
+		background: $hover-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($hover-color);
+	}
+
+	&:active {
+		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background: $active-color;
+		}
+	}
+}
+
+@mixin daff-button-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$info: map.get($theme, info);
+	$warn: map.get($theme, warn);
+	$critical: map.get($theme, critical);
+	$success: map.get($theme, success);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	.daff-button {
+		@include daff-button-theme-variant(
+			theming.daff-illuminate($base, $neutral, 2),
+			theming.daff-illuminate($base, $neutral, 3),
+			theming.daff-illuminate($base, $neutral, 4)
+		);
+
+		&.daff-primary {
+			@include daff-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.daff-color($primary, 80)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70),
+				theming.daff-color($secondary, 80)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70),
+				theming.daff-color($tertiary, 80)
+			);
+		}
+
+		&.daff-black {
+			@include daff-button-theme-variant(
+				$black,
+				theming.daff-color($neutral, 90),
+				theming.daff-color($neutral, 80)
+			);
+		}
+
+		&.daff-white {
+			@include daff-button-theme-variant(
+				$white,
+				theming.daff-color($neutral, 20),
+				theming.daff-color($neutral, 30)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $neutral, 2),
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $neutral, 2),
+				theming.daff-illuminate($base-contrast, $neutral, 3)
+			);
+		}
+
+		&[disabled],
+		&.disabled {
+			@include daff-button-theme-variant(
+				theming.daff-illuminate($base, $neutral, 3),
+				theming.daff-illuminate($base, $neutral, 3),
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $neutral, 5);
+			}
+		}
+
+		&.daff-warn {
+			@include daff-button-theme-variant(
+				theming.daff-color($warn),
+				theming.daff-color($warn, 70),
+				theming.daff-color($warn, 80)
+			);
+		}
+
+		&.daff-success {
+			@include daff-button-theme-variant(
+				theming.daff-color($success),
+				theming.daff-color($success, 70),
+				theming.daff-color($success, 80)
+			);
+		}
+
+		&.daff-critical {
+			@include daff-button-theme-variant(
+				theming.daff-color($critical),
+				theming.daff-color($critical, 70),
+				theming.daff-color($critical, 80)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,79 @@
+@use '../../../scss/interactions';
+@use '../../../scss/typography' as t;
+
+@mixin daff-button-base {
+	@include interactions.clickable();
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+	appearance: none;
+	border: none;
+	border-radius: 0.25rem;
+	position: relative;
+	text-align: center;
+	text-decoration: none;
+
+	&[disabled],
+	&.disabled {
+		cursor: not-allowed;
+	}
+
+	.daff-button__content,
+	.daff-prefix,
+	.daff-suffix {
+		z-index: 2;
+	}
+
+	.daff-button__loading {
+		max-width: 1.5rem;
+	}
+
+	.daff-button__content {
+		@include t.text-truncate();
+	}
+}
+
+@mixin daff-button-background($border-radius) {
+	&:after {
+		content: '';
+		border-radius: $border-radius;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		transition: opacity 300ms;
+	}
+
+	&:hover,
+	&:active {
+		&:after {
+			opacity: 1;
+		}
+	}
+}
+
+@mixin daff-button-sizes {
+	min-width: 96px;
+
+	&.daff-sm {
+		font-size: t.$small-font-size;
+		line-height: 2rem;
+		height: 2rem;
+		padding: 0 1rem;
+	}
+
+	&.daff-md {
+		font-size: t.$normal-font-size;
+		line-height: 3rem;
+		height: 3rem;
+		padding: 0 1.5rem;
+	}
+
+	&.daff-lg {
+		font-size: t.$medium-font-size;
+		line-height: 3.5rem;
+		height: 3.5rem;
+		padding: 0 1.5rem;
+	}
+}

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

@@ -0,0 +1,143 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-flat-button-theme-variant(
+	$base-color,
+	$active-color
+) {
+	color: $base-color;
+
+	&:after {
+		background-color: $base-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($base-color);
+	}
+
+	&:active {
+		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background-color: $active-color;
+		}
+	}
+}
+
+@mixin daff-flat-button-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$info: map.get($theme, info);
+	$warn: map.get($theme, warn);
+	$critical: map.get($theme, critical);
+	$success: map.get($theme, success);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	.daff-flat-button {
+		color: currentColor;
+
+		&:after {
+			background-color: theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&:active {
+			&:after {
+				background-color: theming.daff-illuminate($base, $neutral, 3);
+			}
+		}
+
+		&:hover,
+		&:active {
+			color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 2));
+		}
+
+		&.daff-primary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70)
+			);
+		}
+
+		&.daff-black {
+			@include daff-flat-button-theme-variant(
+				$black,
+				theming.daff-color($neutral, 100)
+			);
+		}
+
+		&.daff-white {
+			@include daff-flat-button-theme-variant(
+				$white,
+				theming.daff-color($neutral, 20)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-flat-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $neutral, 2)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-flat-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $neutral, 2)
+			);
+		}
+
+		&[disabled],
+		&.disabled {
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&:hover,
+			&:focus,
+			&:active {
+				&:after {
+					background: transparent;
+				}
+			}
+		}
+
+		&.daff-warn {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($warn),
+				theming.daff-color($warn, 70)
+			);
+		}
+
+		&.daff-critical {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($critical),
+				theming.daff-color($critical, 70)
+			);
+		}
+
+		&.daff-success {
+			@include daff-flat-button-theme-variant(
+				theming.daff-color($success),
+				theming.daff-color($success, 70)
+			);
+		}
+	}
+}