@daffodil/design 0.60.0 → 0.62.0

package/tree/interfaces/tree-data.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A basic tree type supporting supplemental data on a tree node.
+ *
+ * Tree elements are often slightly more than just basic titles and child items.
+ * There may be other important data that needs to be available at render time.
+ */
+export interface DaffTreeData<T> {
+    title: string;
+    url: string;
+    id: string;
+    items: DaffTreeData<T>[];
+    data: T;
+}

package/tree/interfaces/tree-ui.d.ts

@@ -0,0 +1,11 @@
+import { DaffTreeData } from './tree-data';
+/**
+ * A DaffTreeUi is the internal data structure used during tree rendering.
+ *
+ * This is an internal implementation detail type that.
+ */
+export interface DaffTreeUi<T> extends DaffTreeData<T> {
+    open: boolean;
+    items: DaffTreeUi<T>[];
+    parent: DaffTreeUi<T>;
+}

package/tree/package.json

@@ -0,0 +1 @@
+{"name":"@daffodil/design/tree","module":"../fesm2015/daffodil-design-tree.mjs","es2020":"../fesm2020/daffodil-design-tree.mjs","esm2020":"../esm2020/tree/daffodil-design-tree.mjs","fesm2020":"../fesm2020/daffodil-design-tree.mjs","fesm2015":"../fesm2015/daffodil-design-tree.mjs","typings":"daffodil-design-tree.d.ts","sideEffects":false,"version":"0.62.0"}

package/tree/public_api.d.ts

@@ -0,0 +1,6 @@
+export { DaffTreeModule } from './tree.module';
+export { DaffTreeComponent } from './tree/tree.component';
+export { DaffTreeItemDirective } from './tree-item/tree-item.directive';
+export { DaffTreeData } from './interfaces/tree-data';
+export { DaffTreeUi } from './interfaces/tree-ui';
+export { daffTransformTreeInPlace } from './utils/transform-in-place';

package/tree/src/tree-theme.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../../scss/theming';
+@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');
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+
+	.daff-tree-item {
+		$root: &;
+
+		background-color: $base;
+		color: theming.daff-illuminate($base-contrast, $gray, 2);
+
+		&:hover {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		&:after {
+			border-color: currentColor;
+		}
+
+		&.selected {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+			color: $base-contrast;
+
+			&:before {
+				background-color: theming.daff-color($primary);
+			}
+		}
+	}
+}

package/tree/tree/tree-notifier.service.d.ts

@@ -0,0 +1,32 @@
+import { OnDestroy } from '@angular/core';
+/**
+ * This service is used by tree-items to notify their parent
+ * that the tree has to be re-computed.
+ *
+ * This service is a multiton associated with each tree instance.
+ * It follows the same lifecycle has the tree it is associated with.
+ */
+export declare class DaffTreeNotifierService implements OnDestroy {
+    /**
+     * @docs-private
+     */
+    private _notice;
+    /**
+     * An observable that emits when the tree needs to be re-computed.
+     */
+    notice$: import("rxjs").Observable<boolean>;
+    /**
+     * `notify` can be called to trigger a re-computation of the tree
+     * if data has changed unexpectedly and a re-render did not occur.
+     *
+     * This should be used sparingly. Instead, prefer updating `data` on the tree
+     * itself for performance reasons.
+     */
+    notify(): void;
+    /**
+     * Cleanup when the tree is destroyed.
+     *
+     * @docs-private
+     */
+    ngOnDestroy(): void;
+}

package/tree/tree/tree.component.d.ts

@@ -0,0 +1,75 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { DaffTreeData } from '../interfaces/tree-data';
+import { DaffTreeFlatNode } from '../utils/flatten-tree';
+import { DaffTreeNotifierService } from './tree-notifier.service';
+import * as i0 from "@angular/core";
+/**
+ * The `DaffTreeComponent` allows you to render tree structures as interactable ui.
+ *
+ * They can be used like:
+ *
+ * ```html
+ * <ul daff-tree [tree]="tree">
+ *   <ng-template #daffTreeItemWithChildrenTpl let-node>
+ *       <button daffTreeItem [node]="node">{{ node.title }} </button>
+ *   </ng-template>
+ *
+ *   <ng-template #daffTreeItemTpl let-node>
+ *       <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+ *   </ng-template>
+ * </ul>
+ * ```
+ *
+ * where `tree` is a {@link DaffTreeData}.
+ *
+ */
+export declare class DaffTreeComponent implements OnInit {
+    private notifier;
+    /**
+     * The css class of the daff-tree.
+     *
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * The internal tree element.
+     */
+    private tree;
+    /**
+     * The flattened tree data. You can iterate through this if you want to inspect
+     * the resulting array structure we computed to render the tree.
+     */
+    flatTree: DaffTreeFlatNode[];
+    /**
+     * @docs-private
+     */
+    private _dataTree;
+    /**
+     * The tree data you would like to render.
+     */
+    get dataTree(): DaffTreeData<unknown>;
+    set dataTree(dataTree: DaffTreeData<unknown>);
+    /**
+     * The template used to render tree-nodes that themselves have children.
+     *
+     * @docs-private
+     */
+    withChildrenTemplate: TemplateRef<any>;
+    /**
+     * The template used to render tree-nodes that have no children.
+     *
+     * @docs-private
+     */
+    treeItemTemplate: TemplateRef<any>;
+    constructor(notifier: DaffTreeNotifierService);
+    /**
+     * The track-by function used to reduce tree-item re-renders
+     */
+    trackByTreeElement(index: number, el: any): any;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTreeComponent, "ul[daff-tree]", never, { "dataTree": "tree"; }, {}, ["withChildrenTemplate", "treeItemTemplate"], never>;
+}

package/tree/tree-item/tree-item.directive.d.ts

@@ -0,0 +1,102 @@
+import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
+import { DaffTreeFlatNode } from '../utils/flatten-tree';
+import * as i0 from "@angular/core";
+/**
+ * The `DaffTreeItemDirective` allows you to demarcate the elements which are
+ * tree-children that interact with the parent tree.
+ *
+ * They can be used like:
+ *
+ * ```html
+ * <ul daff-tree [tree]="tree">
+ *   <ng-template #daffTreeItemWithChildrenTpl let-node>
+ *       <button daffTreeItem [node]="node">{{ node.title }} </button>
+ *   </ng-template>
+ *
+ *   <ng-template #daffTreeItemTpl let-node>
+ *       <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+ *   </ng-template>
+ * </ul>
+ * ```
+ *
+ * where `tree` is a {@link DaffTreeData} and `daff-tree` is a {@link DaffTreeComponent}.
+ *
+ */
+export declare class DaffTreeItemDirective {
+    private document;
+    private treeNotifier;
+    /**
+     * The css class of the daff-tree.
+     *
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * The css class of a DaffTreeItemDirective that has children.
+     *
+     * @docs-private
+     */
+    classParent: boolean;
+    /**
+     * The html `id` of the tree item. This is derived from the {@link DaffTreeData}.
+     *
+     * @docs-private
+     */
+    id: any;
+    /**
+     * Accessibility property, notifying users about whether
+     * or not the tree item is open.
+     *
+     * @docs-private
+     */
+    ariaExpanded: string;
+    /**
+     * A css variable indicating the depth of the tree.
+     * You can use this to style your templates if you want to
+     * use different designs at different depths.
+     */
+    depth: number;
+    /**
+     * The CSS class indicating whether or not the tree is `selected`.
+     */
+    get selectedClass(): boolean;
+    /**
+     * The CSS class indicating whether or not the tree is `open`.
+     */
+    openClass: boolean;
+    /**
+     * The {@link DaffTreeFlatNode} associated with this specific tree item.
+     *
+     * @docs-private
+     */
+    private _node;
+    /**
+     * The {@link DaffTreeFlatNode} associated with this specific tree item.
+     */
+    get node(): DaffTreeFlatNode;
+    set node(val: DaffTreeFlatNode);
+    /**
+     * Whether or not the tree item is the currently active item.
+     * Note that there is no requirement there there only be one active item at a time.
+     */
+    selected: boolean;
+    constructor(document: any, treeNotifier: DaffTreeNotifierService);
+    /**
+     * @docs-private
+     */
+    onEscape(): void;
+    /**
+     * @docs-private
+     */
+    onClick(): void;
+    /**
+     * Toggle the open state of the tree's parent.
+     */
+    toggleParent(node: DaffTreeFlatNode): void;
+    /**
+     * Toggle the open state of this specific subtree tree.
+     */
+    toggleTree(node: DaffTreeFlatNode): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTreeItemDirective, "[daffTreeItem]", never, { "node": "node"; "selected": "selected"; }, {}, never>;
+}

package/tree/tree.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tree/tree.component";
+import * as i2 from "./tree-item/tree-item.directive";
+import * as i3 from "@angular/common";
+export declare class DaffTreeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffTreeModule, [typeof i1.DaffTreeComponent, typeof i2.DaffTreeItemDirective], [typeof i3.CommonModule], [typeof i1.DaffTreeComponent, typeof i2.DaffTreeItemDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffTreeModule>;
+}

package/tree/utils/flatten-tree.d.ts

@@ -0,0 +1,19 @@
+import { DaffTreeUi } from '../interfaces/tree-ui';
+/**
+ * A flattened node of a tree. This is used when translating the tree data
+ * structure into an array.
+ */
+export interface DaffTreeFlatNode {
+    id: number | string;
+    title: string;
+    url: string;
+    level: number;
+    hasChildren: boolean;
+    data: unknown;
+    _treeRef: DaffTreeUi<unknown>;
+}
+/**
+ * Flatten a DaffTreeUi<unknown> into an array, removing elements from the array
+ * below nodes in the tree that are not open.
+ */
+export declare const flattenTree: (daffUiTree: DaffTreeUi<unknown>) => DaffTreeFlatNode[];

package/tree/utils/hydrate-tree.d.ts

@@ -0,0 +1,8 @@
+import { DaffTreeData } from '../interfaces/tree-data';
+import { DaffTreeUi } from '../interfaces/tree-ui';
+export declare const daffDataTreeToUiTree: <T>(data: DaffTreeData<T>, parent: DaffTreeUi<T>, open?: boolean) => DaffTreeUi<T>;
+/**
+ * This function translates the original data given to us by the client
+ * to the internal representation of the tree used by the {@link DaffTreeComponent}
+ */
+export declare const hydrateTree: <T>(data: DaffTreeData<T>) => DaffTreeUi<T>;

package/tree/utils/transform-in-place.d.ts

@@ -0,0 +1,15 @@
+import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
+import { DaffTreeData } from '../interfaces/tree-data';
+/**
+ * Transform a tree-like structure in-place into a {@link DaffTreeData}.
+ *
+ * This will mutate the original object, hydrating with additional properties.
+ *
+ * @param tree - The data structure representing tree-like data.
+ * @param transformFn - A user-supplied function that will transform the user
+ *  type into a {@link DaffTreeData}
+ * @param key - The property of the your tree that indicates which
+ *  key contains the "children" of your tree structure.
+ *
+ */
+export declare const daffTransformTreeInPlace: <T extends Record<any, any>>(tree: T, transformFn: (type: T) => T & DaffTreeData<unknown>, key: keyof { [P in keyof T as T[P] extends T[] ? P : never]: T[]; }) => DaffTreeData<unknown>;

package/tree/utils/traverse-tree.d.ts

@@ -0,0 +1,5 @@
+import { RecursiveTreeKeyOfType } from '../interfaces/recursive-key';
+/**
+ * Traverse the tree, pre-order, right-to-left
+ */
+export declare const traverse: <T extends Record<any, any>, V extends Record<any, any> = T>(tree: T, visit: (tree: T) => V, key: keyof { [P in keyof T as T[P] extends T[] ? P : never]: T[]; }) => V;

package/atoms/form/select/public_api.d.ts

@@ -1,2 +0,0 @@
-export * from './select/select.component';
-export { DaffNativeSelectModule } from './select.module';

package/esm2020/atoms/form/select/public_api.mjs

@@ -1,3 +0,0 @@
-export * from './select/select.component';
-export { DaffNativeSelectModule } from './select.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9hdG9tcy9mb3JtL3NlbGVjdC9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0saUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50JztcbmV4cG9ydCB7IERhZmZOYXRpdmVTZWxlY3RNb2R1bGUgfSBmcm9tICcuL3NlbGVjdC5tb2R1bGUnO1xuIl19

package/esm2020/atoms/form/select/select/select.component.mjs

@@ -1,64 +0,0 @@
-import { Component, ViewEncapsulation, Optional, Self, Input, ElementRef, HostListener, HostBinding, ChangeDetectionStrategy, } from '@angular/core';
-import { NgControl } from '@angular/forms';
-import { DaffFormFieldControl } from '../../form-field/form-field-control';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-export class DaffNativeSelectComponent {
-    constructor(
-    /**
-     * @docs-private
-     */
-    ngControl, _elementRef) {
-        this.ngControl = ngControl;
-        this._elementRef = _elementRef;
-        /**
-         * @docs-private
-         */
-        this.controlType = 'native-select';
-        this.class = true;
-        this.focused = false;
-    }
-    /**
-     * @docs-private
-     */
-    focus() {
-        this.focused = true;
-    }
-    /**
-     * @docs-private
-     */
-    blur() {
-        this.focused = false;
-    }
-    onFocus() {
-        this._elementRef.nativeElement.focus();
-    }
-}
-/** @nocollapse */ DaffNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNativeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DaffNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-native-select": "this.class" } }, providers: [
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
-    ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{-webkit-appearance:none;appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'select[daff-native-select]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                        { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
-                    ], styles: [".daff-native-select{-webkit-appearance:none;appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-native-select']
-            }], formSubmitted: [{
-                type: Input
-            }], focus: [{
-                type: HostListener,
-                args: ['focus']
-            }], blur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZGVzaWduL3NyYy9hdG9tcy9mb3JtL3NlbGVjdC9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULGlCQUFpQixFQUNqQixRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFdBQVcsRUFDWCx1QkFBdUIsR0FDeEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7QUFlM0UsTUFBTSxPQUFPLHlCQUF5QjtJQTRCcEM7SUFDRTs7T0FFRztJQUN3QixTQUFvQixFQUN2QyxXQUF5QztRQUR0QixjQUFTLEdBQVQsU0FBUyxDQUFXO1FBQ3ZDLGdCQUFXLEdBQVgsV0FBVyxDQUE4QjtRQWhDbkQ7O1dBRUc7UUFDSCxnQkFBVyxHQUFHLGVBQWUsQ0FBQztRQUVXLFVBQUssR0FBRyxJQUFJLENBQUM7UUFNdEQsWUFBTyxHQUFHLEtBQUssQ0FBQztJQXNCYixDQUFDO0lBcEJKOztPQUVHO0lBQ29CLEtBQUs7UUFDM0IsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7SUFDckIsQ0FBQztJQUVEOztPQUVHO0lBQ21CLElBQUk7UUFDeEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQVVELE9BQU87UUFDTCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN6QyxDQUFDOzt5SUF0Q1UseUJBQXlCOzZIQUF6Qix5QkFBeUIsME5BTnpCO1FBQ1QsbUVBQW1FO1FBQ25FLEVBQUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSx5QkFBeUIsRUFBRTtLQUMxRSwwQkFQUywyQkFBMkI7MkZBVTFCLHlCQUF5QjtrQkFickMsU0FBUzsrQkFFRSw0QkFBNEIsWUFDNUIsMkJBQTJCLGlCQUV0QixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDO3dCQUNULG1FQUFtRTt3QkFDbkUsRUFBRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsV0FBVywyQkFBMkIsRUFBRTtxQkFDMUU7OzBCQW1DRSxRQUFROzswQkFBSSxJQUFJO3FFQTFCc0IsS0FBSztzQkFBN0MsV0FBVzt1QkFBQywwQkFBMEI7Z0JBSzlCLGFBQWE7c0JBQXJCLEtBQUs7Z0JBTWlCLEtBQUs7c0JBQTNCLFlBQVk7dUJBQUMsT0FBTztnQkFPQyxJQUFJO3NCQUF6QixZQUFZO3VCQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBPcHRpb25hbCxcbiAgU2VsZixcbiAgSW5wdXQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSG9zdEJpbmRpbmcsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgRGFmZkZvcm1GaWVsZENvbnRyb2wgfSBmcm9tICcuLi8uLi9mb3JtLWZpZWxkL2Zvcm0tZmllbGQtY29udHJvbCc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ3NlbGVjdFtkYWZmLW5hdGl2ZS1zZWxlY3RdJyxcbiAgdGVtcGxhdGU6ICc8bmctY29udGVudD48L25nLWNvbnRlbnQ+JyxcbiAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLXVzZS1iZWZvcmUtZGVmaW5lXG4gICAgeyBwcm92aWRlOiBEYWZmRm9ybUZpZWxkQ29udHJvbCwgdXNlRXhpc3Rpbmc6IERhZmZOYXRpdmVTZWxlY3RDb21wb25lbnQgfSxcbiAgXSxcbn0pXG5cbmV4cG9ydCBjbGFzcyBEYWZmTmF0aXZlU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgRGFmZkZvcm1GaWVsZENvbnRyb2wge1xuICAvKipcbiAgICogQGRvY3MtcHJpdmF0ZVxuICAgKi9cbiAgY29udHJvbFR5cGUgPSAnbmF0aXZlLXNlbGVjdCc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kYWZmLW5hdGl2ZS1zZWxlY3QnKSBjbGFzcyA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEhhcyB0aGUgZm9ybSBiZWVuIHN1Ym1pdHRlZC5cbiAgICovXG4gIEBJbnB1dCgpIGZvcm1TdWJtaXR0ZWQ6IGJvb2xlYW47XG4gIGZvY3VzZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogQGRvY3MtcHJpdmF0ZVxuICAgKi9cbiAgQEhvc3RMaXN0ZW5lcignZm9jdXMnKSBmb2N1cygpIHtcblx0ICB0aGlzLmZvY3VzZWQgPSB0cnVlO1xuICB9XG5cbiAgLyoqXG4gICAqIEBkb2NzLXByaXZhdGVcbiAgICovXG4gIEBIb3N0TGlzdGVuZXIoJ2JsdXInKSBibHVyKCkge1xuICAgIHRoaXMuZm9jdXNlZCA9IGZhbHNlO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgLyoqXG4gICAgICogQGRvY3MtcHJpdmF0ZVxuICAgICAqL1xuICAgIEBPcHRpb25hbCgpIEBTZWxmKCkgcHVibGljIG5nQ29udHJvbDogTmdDb250cm9sLFxuICAgIHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD4sXG4gICkge31cblxuICBvbkZvY3VzKCkge1xuICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbn1cbiJdfQ==

package/src/atoms/button/button-theme-variants/focus.scss

@@ -1,6 +0,0 @@
-@mixin daff-button-focus-theme-variant($shadow-color) {
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
-	}
-}