@daffodil/design 0.86.0 → 0.87.1

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);
 			}
 		}
 
@@ -30,10 +53,12 @@
 				border: 1px solid daff-color($primary);
 			}
 
-			.daff-form-label,
-			label,
-			.daff-form-field__label {
-				color: daff-color($primary);
+			&.fluid {
+				.daff-form-label,
+				label,
+				.daff-form-field__label {
+					color: daff-color($primary);
+				}
 			}
 		}
 
@@ -42,10 +67,12 @@
 				border: 1px solid daff-color($critical);
 			}
 
-			.daff-form-label,
-			label,
-			.daff-form-field__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>;
+}