@daffodil/design 0.85.0 → 0.87.0

package/select/select/select.component.d.ts

@@ -0,0 +1,170 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { DaffFormFieldComponent, DaffFormFieldControl, DaffOpenableDirective } from '@daffodil/design';
+import { DaffSelectAnimationState } from '../animation/state.enum';
+import { DaffSelectOptionDirective } from '../option/option.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+/**
+ * DaffSelectComponent is a form control component that presents a list of selectable options,
+ * similar to the native `<select>` element we call `<daff-native-select>`.
+ *
+ */
+export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {
+    private cd;
+    private document;
+    ngControl: NgControl;
+    private overlay;
+    private openDirective;
+    private formField;
+    /** @docs-private */
+    controlType: string;
+    /**
+     * @docs-private
+     */
+    supportsAutoLabelling: boolean;
+    private _destroyed;
+    private _overlay;
+    private _value;
+    private _highlighted;
+    private _animationState;
+    private _animationFinishCallbackQueue;
+    /**
+     * @docs-private
+     */
+    get focused(): boolean;
+    /**
+     * @docs-private
+     */
+    get raised(): boolean;
+    /** @docs-private */
+    focus(): void;
+    /** @docs-private */
+    blur(): void;
+    /**
+     * @docs-private
+     */
+    _disabled: boolean;
+    disabled: boolean;
+    options: T[];
+    /**
+     * @docs-private
+     */
+    get isOpen(): boolean;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * @docs-private
+     */
+    get disabledClass(): boolean;
+    /**
+     * @docs-private
+     *
+     * `aria-labelledby` for the select.
+     */
+    ariaLabelledBy: string;
+    /**
+     * The unique id of the select options. Defaults to an autogenerated value.
+     */
+    optionsId: string;
+    constructor(cd: ChangeDetectorRef, document: Document, ngControl: NgControl, overlay: Overlay, openDirective: DaffOpenableDirective, formField: DaffFormFieldComponent);
+    /**
+     * @docs-private
+     */
+    buttonElement: ElementRef<HTMLButtonElement>;
+    /**
+     * @docs-private
+     */
+    optionsTemplatePortal: TemplatePortal<unknown>;
+    /**
+     * @docs-private
+     */
+    optionsElement: ElementRef<HTMLDivElement>;
+    /**
+     * @docs-private
+     */
+    optionTemplate?: DaffSelectOptionDirective;
+    /**
+     * @docs-private
+     */
+    get animationState(): DaffSelectAnimationState;
+    /**
+     * @docs-private
+     */
+    get value(): any;
+    /**
+     * @docs-private
+     */
+    get highlighted(): number;
+    set highlighted(val: number);
+    private focusOptionsList;
+    private focusButton;
+    /**
+     * @docs-private
+     */
+    ngOnDestroy(): void;
+    private onChange;
+    private onTouched;
+    /**
+     * @docs-private
+     */
+    writeValue(value: T): void;
+    /**
+     * @docs-private
+     */
+    registerOnChange(fn: (value: T) => void): void;
+    /**
+     * @docs-private
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * @docs-private
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * @docs-private
+     */
+    flushValue(): void;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * @docs-private
+     */
+    animationFinished(): void;
+    /**
+     * Opens the options list.
+     */
+    open(event?: KeyboardEvent | MouseEvent): void;
+    /**
+     * Closes the options list.
+     */
+    close(event?: KeyboardEvent | MouseEvent): void;
+    /**
+     * Selects the value in a particular position in the options list.
+     */
+    private selectValueInPosition;
+    /**
+     * Selects an option.
+     */
+    selectOption(option: T): void;
+    /**
+     * Selects the option referenced by the highlighted index.
+     */
+    selectHighlighted(event?: KeyboardEvent | MouseEvent): void;
+    /**
+     * Highlights the next option in the list.
+     */
+    highlightNext(event?: KeyboardEvent | MouseEvent): void;
+    /**
+     * Highlights the previous option in the list.
+     */
+    highlightPrevious(event?: KeyboardEvent | MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectComponent<any>, [null, null, { optional: true; self: true; }, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSelectComponent<any>, "daff-select", never, { "disabled": { "alias": "disabled"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsId": { "alias": "optionsId"; "required": false; }; }, {}, ["optionTemplate"], never, true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: {}; }]>;
+}

package/select/select.d.ts

@@ -0,0 +1,4 @@
+import { DaffErrorMessageComponent, DaffFormLabelDirective } from '@daffodil/design';
+import { DaffSelectOptionDirective } from './option/option.directive';
+import { DaffSelectComponent } from './select/select.component';
+export declare const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective];

package/select/src/select-theme.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+@use '../../scss/theming' as *;
+@use '../../scss/core';
+
+// stylelint-disable selector-class-pattern
+@mixin daff-select-theme($theme) {
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
+	$border-color-light: daff-color($neutral, 30);
+	$border-color-dark: daff-color($neutral, 70);
+
+	.daff-select {
+		$root: '.daff-select';
+
+		@include light($mode) {
+			&.disabled {
+				#{$root}__field {
+					color: daff-color($neutral, 50);
+				}
+			}
+
+			&__option {
+				background-color: $base;
+				border-bottom: 1px solid $border-color-light;
+				border-left: 1px solid $border-color-light;
+				border-right: 1px solid $border-color-light;
+				color: $base-contrast;
+
+				&:first-of-type {
+					border-top: 1px solid $border-color-light;
+				}
+
+				&:hover,
+				&.highlighted {
+					background-color: daff-color($neutral, 10);
+				}
+			}
+		}
+
+		@include dark($mode) {
+			&.disabled {
+				#{$root}__field {
+					color: daff-color($neutral, 70);
+				}
+			}
+
+			&__option {
+				background-color: $base;
+				border-bottom: 1px solid $border-color-dark;
+				border-left: 1px solid $border-color-dark;
+				border-right: 1px solid $border-color-dark;
+				color: $base-contrast;
+
+				&:first-of-type {
+					border-top: 1px solid $border-color-dark;
+				}
+
+				&:hover,
+				&.highlighted {
+					background-color: daff-color($neutral, 90);
+				}
+			}
+		}
+
+		&__field {
+			color: $base-contrast;
+
+			&::after {
+				border-color: daff-color($neutral);
+			}
+		}
+	}
+}

package/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -10,11 +10,23 @@
 	$neutral: daff-get-palette($theme, neutral);
 	$mode: daff-get-theme-mode($theme);
 
+	// stylelint-disable selector-class-pattern
 	.daff-form-field {
 		@include light($mode) {
 			.daff-form-field__control {
 				border: 1px solid daff-color($neutral);
 				color: daff-color($neutral);
+
+				* {
+					::-webkit-input-placeholder {
+						color: daff-color($neutral);
+					}
+				}
+			}
+
+			.daff-prefix,
+			.daff-suffix {
+				color: daff-color($neutral);
 			}
 		}
 
@@ -22,6 +34,17 @@
 			.daff-form-field__control {
 				border: 1px solid daff-color($neutral, 40);
 				color: daff-color($neutral, 40);
+
+				* {
+					::-webkit-input-placeholder {
+						color: daff-color($neutral, 40);
+					}
+				}
+			}
+
+			.daff-prefix,
+			.daff-suffix {
+				color: daff-color($neutral, 40);
 			}
 		}
 
@@ -29,8 +52,13 @@
 			.daff-form-field__control {
 				border: 1px solid daff-color($primary);
 			}
-			.daff-form-label {
-				color: daff-color($primary);
+
+			&.fluid {
+				.daff-form-label,
+				label,
+				.daff-form-field__label {
+					color: daff-color($primary);
+				}
 			}
 		}
 
@@ -39,8 +67,12 @@
 				border: 1px solid daff-color($critical);
 			}
 
-			.daff-form-label {
-				color: daff-color($critical);
+			&.fluid {
+				.daff-form-label,
+				label,
+				.daff-form-field__label {
+					color: daff-color($critical);
+				}
 			}
 		}
 

package/textarea/README.md

@@ -0,0 +1,28 @@
+# Textarea
+Textarea allows a native HTML `<textarea>` element to work with the [Form Field](/libs/design/src/atoms/form/form-field/README.md) component.
+
+## Overview
+The textarea component has the same functionality as a native HTML `<textarea>` element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [DaffFormFieldComponent](/libs/design/src/atoms/form/form-field/README.md).
+
+<design-land-example-viewer-container example="basic-textarea"></design-land-example-viewer-container>
+
+## Usage
+To use textarea, import `DaffTextareaComponent` directly into your custom component:
+
+```ts
+import { DaffTextareaComponent } from '@daffodil/design/textarea';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffTextareaComponent,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Examples
+
+### Disabled textarea
+<design-land-example-viewer-container example="basic-textarea"></design-land-example-viewer-container>

package/textarea/examples/basic-textarea/basic-textarea.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class BasicTextareaComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTextareaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicTextareaComponent, "basic-textarea", never, {}, {}, never, never, true, never>;
+}

package/textarea/examples/examples.d.ts

@@ -0,0 +1,2 @@
+import { BasicTextareaComponent } from './basic-textarea/basic-textarea.component';
+export declare const TEXTAREA_EXAMPLES: (typeof BasicTextareaComponent)[];

package/textarea/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/textarea/examples/public_api.d.ts

@@ -0,0 +1 @@
+export { TEXTAREA_EXAMPLES } from './examples';

package/textarea/examples/textarea-disabled/textarea-disabled.component.d.ts

@@ -0,0 +1,7 @@
+import { UntypedFormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class TextareaDisabledComponent {
+    disabled: UntypedFormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextareaDisabledComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaDisabledComponent, "textarea-disabled", never, {}, {}, never, never, true, never>;
+}

package/textarea/examples/textarea-error/textarea-error.component.d.ts

@@ -0,0 +1,7 @@
+import { UntypedFormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class TextareaErrorComponent {
+    control: UntypedFormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextareaErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaErrorComponent, "textarea-error", never, {}, {}, never, never, true, never>;
+}

package/textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/textarea/public_api.d.ts

@@ -0,0 +1 @@
+export { DaffTextareaComponent } from './textarea.component';

package/textarea/textarea.component.d.ts

@@ -0,0 +1,59 @@
+import { ElementRef, OnInit } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { DaffFormFieldComponent, DaffFormFieldControl } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * DaffTextareaComponent provides the same functionality as a native `<textarea>` and contains custom styling and functionality.
+ */
+export declare class DaffTextareaComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
+    /**
+     * @docs-private
+     */
+    ngControl: NgControl;
+    private _elementRef;
+    private formField;
+    /** @docs-private */
+    controlType: string;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * @docs-private
+     */
+    focused: boolean;
+    private get _id();
+    /**
+     * @docs-private
+     */
+    get internalId(): string;
+    /**
+     * @docs-private
+     */
+    focus(): void;
+    /**
+     * @docs-private
+     */
+    blur(): void;
+    /**
+     * @docs-private
+     */
+    get ariaDescribedBy(): string;
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
+    /** @docs-private */
+    ngOnInit(): void;
+    /**
+     * @docs-private
+     */
+    onFocus(): void;
+    /**
+     * @docs-private
+     */
+    get value(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextareaComponent, [{ optional: true; self: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextareaComponent, "textarea[daff-textarea]", never, {}, {}, never, ["*"], true, never>;
+}

package/toast/README.md

@@ -8,7 +8,7 @@ Toasts should be used to display temporary messages about actions or events that
 <design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
 
 ## Setting up the component
-`provideDaffToast()` must be added as a provider in your application's root component for global use or in a specific feature component for the toast functionality to work properly.
+`provideDaffToast()` must be added as a provider in your application's root component for the toast to work properly.
 
 ```ts
 import { provideDaffToast } from '@daffodil/design/toast';
@@ -47,6 +47,26 @@ You can set the status of a toast when opening it with `DaffToastService`, using
 
 <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
 
+## Positions
+Toasts are displayed in the top-right corner of the screen by default on desktop devices.
+
+You can customize the position of toast notifications by configuring the `position` property in the `provideDaffToast` provider.
+
+To customize toast positions, configure the `position` property in the `provideDaffToast` provider of your root component:
+
+```ts
+providers: [
+  provideDaffToast({
+    position: {
+      vertical: 'bottom',
+      horizontal: 'right',
+    },
+  }),
+],
+```
+
+> Note: On mobile devices, toasts will always appear in the bottom-center position, regardless of configuration settings.
+
 ## Accessibility
 By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement.
 

package/toast/examples/public_api.d.ts

@@ -1,6 +1,5 @@
 import { DefaultToastComponent } from './default-toast/default-toast.component';
 import { DismissibleToastComponent } from './dismissible-toast/dismissible-toast.component';
-import { ToastPositionsComponent } from './toast-positions/toast-positions.component';
 import { ToastStatusComponent } from './toast-status/toast-status.component';
 import { ToastWithCustomDurationComponent } from './toast-with-custom-duration/toast-with-custom-duration.component';
-export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof DismissibleToastComponent | typeof ToastPositionsComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];
+export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof DismissibleToastComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];

package/toast/helpers/toast-position.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The available vertical positions for toasts.
+ */
+export type DaffToastVerticalPosition = 'top' | 'bottom';
+/**
+ * The available horizontal positions for toasts.
+ */
+export type DaffToastHorizontalPosition = 'left' | 'center' | 'right';

package/toast/interfaces/toast-options.d.ts

@@ -0,0 +1,19 @@
+import { DaffToastHorizontalPosition, DaffToastVerticalPosition } from '../helpers/toast-position';
+export interface DaffToastVerticalPositionInterface {
+    vertical: DaffToastVerticalPosition;
+}
+export interface DaffToastHorizontalPositionInterface {
+    horizontal: DaffToastHorizontalPosition;
+}
+export type DaffToastPosition = DaffToastVerticalPositionInterface & DaffToastHorizontalPositionInterface;
+export interface DaffToastOptions {
+    /**
+     * The position of all toasts.
+     */
+    position: DaffToastPosition;
+    /** @docs-private */
+    useParent?: boolean;
+}
+export declare const daffToastDefaultOptions: DaffToastOptions;
+export declare const provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | import("@angular/core").InjectionToken<Partial<R>>) => import("@angular/core").FactoryProvider;
+export declare const DAFF_TOAST_OPTIONS: import("@angular/core").InjectionToken<DaffToastOptions>;

package/toast/interfaces/toast.d.ts

@@ -22,5 +22,5 @@ export interface DaffToast extends DaffToastData {
     /**
      * The observable that emits when the toast is closed.
      */
-    dismissalStream: Observable<void | number>;
+    dismissalStream: Observable<void>;
 }

package/toast/public_api.d.ts

@@ -1,8 +1,8 @@
-export { DaffToastPositionService } from './service/position.service';
 export { DaffToastService } from './service/toast.service';
 export { DaffToastConfiguration } from './toast/toast-config';
 export { DaffToast, DaffToastData, } from './interfaces/toast';
 export { DaffToastAction } from './interfaces/toast-action';
-export { DAFF_TOAST_OPTIONS, provideDaffToastOptions, } from './options/daff-toast-options';
 export { provideDaffToast } from './toast/toast-provider';
 export { DaffToastActionButtonSize, DaffToastActionButtonType, } from './interfaces/toast-action.type';
+export { DaffToastOptions, DaffToastPosition, } from './interfaces/toast-options';
+export { DaffToastVerticalPosition, DaffToastHorizontalPosition, } from './helpers/toast-position';

package/toast/service/position-strategy.d.ts

@@ -1,3 +1,3 @@
 import { PositionStrategy } from '@angular/cdk/overlay';
-import { DaffToastPosition } from '../options/daff-toast-options';
+import { DaffToastPosition } from '../interfaces/toast-options';
 export declare const createPositionStrategy: (position: DaffToastPosition) => PositionStrategy;

package/toast/service/position.service.d.ts

@@ -1,5 +1,5 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DaffToastOptions, DaffToastPosition } from '../options/daff-toast-options';
+import { DaffToastOptions, DaffToastPosition } from '../interfaces/toast-options';
 import * as i0 from "@angular/core";
 export declare class DaffToastPositionService {
     private options;

package/toast/service/toast.service.d.ts

@@ -4,7 +4,7 @@ import { Injector, OnDestroy } from '@angular/core';
 import { DaffFocusStackService } from '@daffodil/design';
 import { DaffToastPositionService } from './position.service';
 import { DaffToast, DaffToastData } from '../interfaces/toast';
-import { DaffToastOptions } from '../options/daff-toast-options';
+import { DaffToastOptions } from '../interfaces/toast-options';
 import { DaffToastConfiguration } from '../toast/toast-config';
 import * as i0 from "@angular/core";
 /**

package/toast/toast/toast-provider.d.ts

@@ -1,6 +1,7 @@
 import { Provider } from '@angular/core';
+import { DaffToastOptions } from '../interfaces/toast-options';
 /**
- * Registers the `DaffToastService` and `DaffToastPositionService` for displaying a toast. This provider ensures
+ * Registers the `DaffToastService` for displaying a toast. This provider ensures
  * toasts function correctly within your application.
  *
  * ```ts
@@ -8,11 +9,22 @@ import { Provider } from '@angular/core';
  *
  * @NgModule({
  * 	providers: [
- * 		provideDaffToast(),
- * 	]
+ *    provideDaffToast({
+ *      position: {
+ *        vertical: 'bottom',
+ *        horizontal: 'left',
+ *      },
+ *    }),
+ *  ]
  * )}
  *
  * export class AppModule {}
  * ```
+ * @param config Sets the configuration for all toasts.
+ * Toasts are displayed in the top-right corner of the screen by default on desktop devices.
+ *
+ * On mobile devices, toasts will always appear in the bottom-center position,
+ * regardless of configuration settings.
+ *
  */
-export declare const provideDaffToast: () => Provider[];
+export declare const provideDaffToast: (config?: DaffToastOptions) => Provider[];

package/toast/toast/toast-template.component.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { DaffToast } from '../interfaces/toast';
-import { DaffToastOptions } from '../options/daff-toast-options';
+import { DaffToastOptions } from '../interfaces/toast-options';
 import { DaffToastPositionService } from '../service/position.service';
 import * as i0 from "@angular/core";
 export declare class DaffToastTemplateComponent {

package/core/skeletonable/skeletonable.d.ts

@@ -1,6 +0,0 @@
-/**
- * An interface for giving a component the ability to display a skeleton/loading UI.
- */
-export interface DaffSkeletonable {
-    skeleton: boolean;
-}

package/toast/examples/toast-positions/toast-positions.component.d.ts

@@ -1,20 +0,0 @@
-import { OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { DaffToastService, DaffToastPositionService } from '@daffodil/design/toast';
-import * as i0 from "@angular/core";
-export declare class ToastPositionsComponent implements OnInit {
-    private toastService;
-    private toastPositionService;
-    private toast;
-    constructor(toastService: DaffToastService, toastPositionService: DaffToastPositionService);
-    open(): void;
-    private count;
-    horizontalControl: FormControl;
-    verticalControl: FormControl;
-    /**
-     * @docs-private
-     */
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ToastPositionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToastPositionsComponent, "toast-positions", never, {}, {}, never, never, true, never>;
-}

package/toast/options/daff-toast-options.d.ts

@@ -1,14 +0,0 @@
-export interface VerticalPositionTypes {
-    vertical: 'top' | 'bottom';
-}
-export interface HorizontalPositionTypes {
-    horizontal: 'left' | 'center' | 'right';
-}
-export type DaffToastPosition = VerticalPositionTypes & HorizontalPositionTypes;
-export interface DaffToastOptions {
-    position: DaffToastPosition;
-    useParent: boolean;
-}
-export declare const daffToastDefaultOptions: DaffToastOptions;
-export declare const provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | import("@angular/core").InjectionToken<Partial<R>>) => import("@angular/core").FactoryProvider;
-export declare const DAFF_TOAST_OPTIONS: import("@angular/core").InjectionToken<DaffToastOptions>;