@daffodil/design 0.79.0 → 0.80.0

package/switch/src/switch-theme.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-switch-theme($theme) {
+	$primary: core.daff-map-get($theme, primary);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+
+	.daff-switch {
+		&__toggle {
+			background-color: theming.daff-illuminate($base, $neutral, 3);
+			border: 2px solid transparent;
+
+			&:focus-within {
+				border: 2px solid theming.daff-illuminate($base, $neutral, 2);
+			}
+
+			&.daff-checked {
+				background-color: theming.daff-color($primary);
+			}
+
+			&::before {
+				background-color: $base;
+			}
+		}
+	}
+}

package/switch/switch/label-position.d.ts

@@ -0,0 +1,10 @@
+export type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';
+/**
+ * The position of the label relative to the switch.
+ */
+export declare enum DaffLabelPositionEnum {
+    LEFT = "daff-left",
+    RIGHT = "daff-right",
+    TOP = "daff-top",
+    BOTTOM = "daff-bottom"
+}

package/switch/switch/switch.component.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '@angular/core';
+import { DaffLabelPosition } from './label-position';
+import * as i0 from "@angular/core";
+/**
+ * The switch component provides a way to toggle between two settings.
+ *
+ * ## Usage
+ * <daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="daff-left">
+ *    Label
+ *    <daff-error-message>Error message</daff-error-message>
+ * </daff-switch>
+ */
+export declare class DaffSwitchComponent {
+    /**
+     * Whether the switch is disabled and/or loading.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    get disabledAttribute(): boolean;
+    get ariaDisabled(): boolean;
+    get classes(): string;
+    /**
+     * Whether the switch is loading.
+     */
+    loading: boolean;
+    /**
+     * Current state of switch (on/off).
+     */
+    checked: boolean;
+    /**
+     * The position of the label relative to the switch. Defaults to 'daff-left'.
+     */
+    labelPosition: DaffLabelPosition;
+    /**
+     * Whether the switch shows an error.
+     */
+    error: boolean;
+    _disabled: boolean;
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * @docs-private
+     */
+    private externalAriaLabel;
+    /**
+     * aria-label for the switch.
+     */
+    ariaLabel: string;
+    id: string;
+    toggled: EventEmitter<boolean>;
+    onToggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
+}

package/switch/switch.d.ts

@@ -0,0 +1,3 @@
+import { DaffErrorMessageModule } from '@daffodil/design';
+import { DaffSwitchComponent } from './switch/switch.component';
+export declare const DAFF_SWITCH_COMPONENTS: readonly [typeof DaffSwitchComponent, typeof DaffErrorMessageModule];

package/tabs/src/tabs-theme.scss

@@ -3,19 +3,19 @@
 @use '../../scss/theming';
 
 @mixin daff-tabs-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$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');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
 
 	.daff-tab-activator {
 		border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
 
-		&.selected {
+		&.daff-selected {
 			border-bottom: 2px solid theming.daff-color($primary);
 		}
 	}

package/tabs/tabs/tab-activator/tab-activator.component.d.ts

@@ -1,7 +1,10 @@
 import { OnInit, ElementRef } from '@angular/core';
+import { DaffSelectableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
 export declare class DaffTabActivatorComponent implements OnInit {
     private el;
+    private selectableDirective;
     /**
      * @docs-private
      */
@@ -10,8 +13,6 @@ export declare class DaffTabActivatorComponent implements OnInit {
      * Sets the `role` to tab.
      */
     role: string;
-    /** Whether or not a tab is selected */
-    selected: boolean;
     /**
      * Sets `aria-selected` to true if the component is selected and false if it's not selected.
      */
@@ -21,17 +22,17 @@ export declare class DaffTabActivatorComponent implements OnInit {
      */
     get tabIndex(): "0" | "-1";
     ariaControls: string;
+    constructor(el: ElementRef, selectableDirective: DaffSelectableDirective);
     /**
      * The html id of the tab activator component
      */
     tabActivatorId: string;
     panelId: string;
     ngOnInit(): void;
-    constructor(el: ElementRef);
     /**
      * Sets focus to the native element of the component
      */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabActivatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "selected": { "alias": "selected"; "required": false; }; "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffSelectableDirective; inputs: { "selected": "selected"; }; outputs: {}; }]>;
 }

package/tabs/tabs/tabs.component.d.ts

@@ -3,7 +3,6 @@ import { DaffTabComponent } from './tab/tab.component';
 import { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';
 import { DaffTabLabelComponent } from './tab-label/tab-label.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@daffodil/design";
 /**
  * Tabs provide a way to navigate between panels that display related content.
  *
@@ -100,5 +99,5 @@ export declare class DaffTabsComponent implements AfterContentInit {
      */
     selectLast(event: KeyboardEvent | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabsComponent, "daff-tabs", never, { "initiallySelected": { "alias": "initiallySelected"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "tabChange": "tabChange"; }, ["_labels", "_tabs"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabsComponent, "daff-tabs", never, { "initiallySelected": { "alias": "initiallySelected"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "tabChange": "tabChange"; }, ["_labels", "_tabs"], never, true, never>;
 }

package/toast/src/toast-theme.scss

@@ -3,25 +3,25 @@
 @use '../../scss/theming';
 
 @mixin daff-toast-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);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$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');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$info: core.daff-map-get($theme, informational);
+	$warn: core.daff-map-get($theme, warn);
+	$critical: core.daff-map-get($theme, critical);
+	$success: core.daff-map-get($theme, success);
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
 
 	.daff-toast {
 		background: theming.daff-illuminate($base, $neutral, 1);
-		box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.10);
+		box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.1);
 		color: theming.daff-text-contrast($base);
 
-		&:before {
+		&::before {
 			background: theming.daff-illuminate($base, $neutral, 4);
 		}
 
@@ -32,8 +32,8 @@
 			.daff-prefix {
 				color: theming.daff-color($success);
 			}
-			
-			&:before {
+
+			&::before {
 				background: theming.daff-color($success);
 			}
 		}
@@ -46,7 +46,7 @@
 				color: theming.daff-color($warn);
 			}
 
-			&:before {
+			&::before {
 				background: theming.daff-color($warn);
 			}
 		}
@@ -59,7 +59,7 @@
 				color: theming.daff-color($critical);
 			}
 
-			&:before {
+			&::before {
 				background: theming.daff-color($critical);
 			}
 		}

package/toast/toast.module.d.ts

@@ -10,7 +10,7 @@ import * as i8 from "./toast-actions/toast-actions.directive";
 import * as i9 from "./toast-title/toast-title.directive";
 import * as i10 from "./toast-message/toast-message.directive";
 /**
- * @deprecated in favor of {@link provideDaffToast} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
+ * @deprecated in favor of {@link provideDaffToast}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastModule, never>;

package/tree/src/tree-theme.scss

@@ -3,18 +3,17 @@
 @use '../../scss/core';
 
 @mixin daff-tree-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$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');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 
 	.daff-tree-item {
 		$root: &;
-
 		background-color: $base;
 		color: theming.daff-illuminate($base-contrast, $neutral, 2);
 
@@ -22,15 +21,16 @@
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 		}
 
-		&:after {
+		&::after {
 			border-color: currentColor;
 		}
 
+		// stylelint-disable selector-class-pattern
 		&.selected {
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 			color: $base-contrast;
 
-			&:before {
+			&::before {
 				background-color: theming.daff-color($primary);
 			}
 		}

package/tree/tree.module.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "@angular/common";
 import * as i2 from "./tree/tree.component";
 import * as i3 from "./tree-item/tree-item.directive";
 /**
- * @deprecated in favor of {@link DAFF_TREE_COMPONENTS} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
+ * @deprecated in favor of {@link DAFF_TREE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeModule, never>;

package/scss/core/map/map-deep-check/map-deep-check.spec.scss

@@ -1,43 +0,0 @@
-@use 'true' as *;
-@use './map-deep-check' as *;
-
-@include describe('map-deep-check') {
-	$map: (
-		'nested': (
-			'string': '1',
-			'number': 2,
-			'map': (
-				'string': '3',
-				'number': 4
-			)
-		)
-	);
-
-	@include it('returns `true` if the map contains the key') {
-		@include assert-equal(
-			daff-map-deep-check($map, ('nested', 'string')),
-			true
-		);
-		@include assert-equal(
-			daff-map-deep-check($map, ('nested', 'number')),
-			true
-		);
-		@include assert-equal(daff-map-deep-check($map, ('nested', 'map')), true);
-		@include assert-equal(
-			daff-map-deep-check($map, ('nested', 'map', 'string')),
-			true
-		);
-		@include assert-equal(
-			daff-map-deep-check($map, ('nested', 'map', 'number')),
-			true
-		);
-	}
-
-	@include it('should return false if the $key is not in the list') {
-		@include assert-equal(
-			daff-map-deep-check($map, ('UNREALKEY', 'TEST')),
-			false
-		);
-		@include assert-equal(daff-map-deep-check($map, ('SOMEOTHER')), false);
-	}
-}

package/scss/core/map/map-deep-get/map-deep-get.spec.scss

@@ -1,25 +0,0 @@
-@use 'true' as *;
-@use './map-deep-get' as *;
-
-@include describe('map-deep-get') {
-	$nested-map: (
-		'string': '3',
-		'number': 4
-	);
-
-	$map: (
-		'nested': (
-			'string': '1',
-			'number': 2,
-			'map': $nested-map
-		)
-	);
-
-	@include it('returns the value of the nested key if it exists in the map') {
-		@include assert-equal(daff-map-deep-get($map, ('nested.string')), '1');
-		@include assert-equal(daff-map-deep-get($map, ('nested.number')), 2);
-		@include assert-equal(daff-map-deep-get($map, ('nested.map')), $nested-map);
-		@include assert-equal(daff-map-deep-get($map, ('nested.map.string')), '3');
-		@include assert-equal(daff-map-deep-get($map, ('nested.map.number')), 4);
-	}
-}