@daffodil/design 0.86.0 → 0.87.0

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>;
+}