@ni/nimble-components 1.0.0-beta.81 → 1.0.0-beta.85

package/dist/esm/drawer/tests/drawer-matrix.stories.js

@@ -0,0 +1,48 @@
+import { withXD } from 'storybook-addon-xd-designs';
+import { html } from '@microsoft/fast-element';
+import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
+import { backgroundStates } from '../../tests/utilities/theme-test-helpers';
+import '../index';
+const metadata = {
+    title: 'Tests/Drawer',
+    decorators: [withXD],
+    parameters: {
+        design: {
+            artboardUrl: 'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/730cdeb8-a4b5-4dcc-9fe4-718a75da7aff/specs/'
+        }
+    }
+};
+export default metadata;
+// The drawer uses a customized theme wrapper (not themeWrapper like the other controls) because only
+// a single drawer can be visible at a time. So, we create different stories for each theme, rather
+// than having a single Theme Matrix story (as multiple drawers wouldn't render correctly in that mode).
+const singleThemeWrapper = (template, backgroundState) => html `
+    <nimble-theme-provider theme="${backgroundState.theme}">
+        <div
+            style="
+                background-color: ${backgroundState.value};
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0px;
+                top: 0px;
+            "
+        ></div>
+        ${template}
+    </nimble-theme-provider>
+`;
+const component = html `
+    <nimble-drawer state="opened" location="right" modal>
+        <p style="margin: 10px;">Drawer containing text content</p>
+    </nimble-drawer>
+`;
+const [lightThemeWhiteBackground, colorThemeGreenBackground, colorThemeDarkGreenBackground, darkThemeBlackBackground, legacyBlueThemeWhiteBackground, ...remaining] = backgroundStates;
+if (remaining.length > 0) {
+    throw new Error('New backgrounds need to be supported');
+}
+export const drawerLightThemeWhiteBackground = createRenderer(singleThemeWrapper(component, lightThemeWhiteBackground));
+export const drawerColorThemeGreenBackground = createRenderer(singleThemeWrapper(component, colorThemeGreenBackground));
+export const drawerColorThemeDarkGreenBackground = createRenderer(singleThemeWrapper(component, colorThemeDarkGreenBackground));
+export const drawerDarkThemeBlackBackground = createRenderer(singleThemeWrapper(component, darkThemeBlackBackground));
+export const drawerLegacyBlueThemeWhiteBackground = createRenderer(singleThemeWrapper(component, legacyBlueThemeWhiteBackground));
+//# sourceMappingURL=drawer-matrix.stories.js.map

package/dist/esm/drawer/tests/drawer-matrix.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-matrix.stories.js","sourceRoot":"","sources":["../../../../src/drawer/tests/drawer-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAEH,gBAAgB,EACnB,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAElB,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;KACJ;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,qGAAqG;AACrG,mGAAmG;AACnG,wGAAwG;AACxG,MAAM,kBAAkB,GAAG,CACvB,QAAsB,EACtB,eAAgC,EACpB,EAAE,CAAC,IAAI,CAAA;oCACa,eAAe,CAAC,KAAK;;;oCAGrB,eAAe,CAAC,KAAK;;;;;;;;UAQ/C,QAAQ;;CAEjB,CAAC;AAEF,MAAM,SAAS,GAAG,IAAI,CAAA;;;;CAIrB,CAAC;AAEF,MAAM,CACF,yBAAyB,EACzB,yBAAyB,EACzB,6BAA6B,EAC7B,wBAAwB,EACxB,8BAA8B,EAC9B,GAAG,SAAS,CACf,GAAG,gBAAgB,CAAC;AAErB,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;IACtB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;CAC3D;AAED,MAAM,CAAC,MAAM,+BAA+B,GAAU,cAAc,CAChE,kBAAkB,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAC3D,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAU,cAAc,CAChE,kBAAkB,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAC3D,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAAU,cAAc,CACpE,kBAAkB,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAU,cAAc,CAC/D,kBAAkB,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAC1D,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAAU,cAAc,CACrE,kBAAkB,CAAC,SAAS,EAAE,8BAA8B,CAAC,CAChE,CAAC"}

package/dist/esm/drawer/tests/drawer.spec.d.ts

@@ -0,0 +1 @@
+import '..';

package/dist/esm/drawer/tests/drawer.spec.js

@@ -0,0 +1,59 @@
+import { DOM, html } from '@microsoft/fast-element';
+import { fixture } from '../../tests/utilities/fixture';
+import '..';
+import { DrawerState } from '../types';
+async function setup() {
+    return fixture(html ` <nimble-drawer> </nimble-drawer>`);
+}
+describe('Drawer', () => {
+    let element;
+    let connect;
+    let disconnect;
+    beforeEach(async () => {
+        ({ element, connect, disconnect } = await setup());
+        await connect();
+        await DOM.nextUpdate();
+    });
+    afterEach(async () => {
+        await disconnect();
+    });
+    async function waitForDrawerAnimationsCompleted() {
+        await Promise.all(element.dialog
+            .getAnimations()
+            .map(async (animation) => animation.finished));
+        await DOM.nextUpdate();
+    }
+    it('element is hidden and does not trap focus by default', async () => {
+        expect(element.hidden).toBe(true);
+        expect(element.trapFocus).toBe(false);
+    });
+    it('state=opening animates to shown/state=opened, and state=closing animates to hidden/state=closed', async () => {
+        element.state = DrawerState.Opening;
+        await waitForDrawerAnimationsCompleted();
+        expect(element.hidden).toBe(false);
+        expect(element.state).toEqual('opened');
+        element.state = DrawerState.Closing;
+        await waitForDrawerAnimationsCompleted();
+        expect(element.hidden).toBe(true);
+        expect(element.state).toEqual('closed');
+    });
+    it('show() is equivalent to state=opening, and hide() is equivalent to state=closing', async () => {
+        element.show();
+        await waitForDrawerAnimationsCompleted();
+        expect(element.hidden).toBe(false);
+        expect(element.state).toEqual('opened');
+        element.hide();
+        await waitForDrawerAnimationsCompleted();
+        expect(element.hidden).toBe(true);
+        expect(element.state).toEqual('closed');
+    });
+    it('showing then hiding element (without waiting for slide-in animation to finish) works correctly (element ends as hidden)', async () => {
+        element.show();
+        await DOM.nextUpdate();
+        element.hide();
+        await waitForDrawerAnimationsCompleted();
+        expect(element.hidden).toBe(true);
+        expect(element.state).toEqual('closed');
+    });
+});
+//# sourceMappingURL=drawer.spec.js.map

package/dist/esm/drawer/tests/drawer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.spec.js","sourceRoot":"","sources":["../../../../src/drawer/tests/drawer.spec.ts"],"names":[],"mappings":"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"}

package/dist/esm/drawer/tests/drawer.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, Story } from '@storybook/html';
+import '../../button/index';
+import '../index';
+import { DrawerLocation, DrawerState } from '../types';
+import type { Drawer } from '../index';
+declare enum ExampleContentType {
+    SimpleTextContent = "SimpleTextContent",
+    HeaderContentFooter = "HeaderContentFooter"
+}
+interface DrawerArgs {
+    location: DrawerLocation;
+    state: DrawerState;
+    modal: boolean;
+    preventDismiss: boolean;
+    content: ExampleContentType;
+    drawer: Drawer;
+}
+declare const metadata: Meta<DrawerArgs>;
+export default metadata;
+export declare const drawer: Story<DrawerArgs>;

package/dist/esm/drawer/tests/drawer.stories.js

@@ -0,0 +1,98 @@
+import { html, ref } from '@microsoft/fast-element';
+import { withXD } from 'storybook-addon-xd-designs';
+import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
+import '../../button/index';
+import '../index';
+import { DrawerLocation, DrawerState } from '../types';
+var ExampleContentType;
+(function (ExampleContentType) {
+    ExampleContentType["SimpleTextContent"] = "SimpleTextContent";
+    ExampleContentType["HeaderContentFooter"] = "HeaderContentFooter";
+})(ExampleContentType || (ExampleContentType = {}));
+const simpleDrawerContent = '<section>This is a drawer which can slide in from either side of the screen and display custom content.</section>';
+// prettier-ignore
+const drawerHeaderFooterContentTemplate = html `
+    <header>Header</header>
+    <section>
+        <p>This is a drawer with header and footer regions.</p>
+        <p>
+            Uses header, section, footer HTML elements
+            <br/>
+            (Drawer element includes styling for them)
+        </p>
+        <div style="height: 1000px;">
+            (Large-height content to ensure content scrollbar appears)
+        </div>
+    </section>
+    <footer>
+        <nimble-button appearance="ghost">Cancel</nimble-button>
+        <nimble-button appearance="outline">OK</nimble-button>
+    </footer>`;
+const drawerHeaderFooterContent = drawerHeaderFooterContentTemplate.html;
+const metadata = {
+    title: 'Drawer',
+    decorators: [withXD],
+    parameters: {
+        design: {
+            artboardUrl: 'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/730cdeb8-a4b5-4dcc-9fe4-718a75da7aff/specs/'
+        }
+    },
+    // prettier-ignore
+    render: createRenderer(html `
+        <nimble-drawer ${ref('drawer')}
+            modal="${x => x.modal}"
+            ?prevent-dismiss="${x => x.preventDismiss}"
+            location="${x => x.location}"
+            state="${x => x.state}"            
+            :innerHTML="${x => x.content}">
+        </nimble-drawer>
+        <nimble-button
+            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
+            @click="${({ drawer }) => { drawer.state = drawer.hidden ? DrawerState.Opening : DrawerState.Closing; }}"
+        >
+            Show/Hide Drawer (animated)
+        </nimble-button>
+    `),
+    argTypes: {
+        location: {
+            options: [DrawerLocation.Left, DrawerLocation.Right],
+            control: { type: 'radio' }
+        },
+        state: {
+            options: [
+                DrawerState.Opening,
+                DrawerState.Opened,
+                DrawerState.Closing,
+                DrawerState.Closed
+            ],
+            control: { type: 'select' }
+        },
+        content: {
+            options: [
+                ExampleContentType.SimpleTextContent,
+                ExampleContentType.HeaderContentFooter
+            ],
+            mapping: {
+                [ExampleContentType.SimpleTextContent]: simpleDrawerContent,
+                [ExampleContentType.HeaderContentFooter]: drawerHeaderFooterContent
+            },
+            control: {
+                type: 'radio',
+                labels: {
+                    [ExampleContentType.SimpleTextContent]: 'Simple Text Content',
+                    [ExampleContentType.HeaderContentFooter]: 'Header/Content/Footer Example'
+                }
+            }
+        }
+    },
+    args: {
+        location: DrawerLocation.Left,
+        state: DrawerState.Opened,
+        modal: true,
+        preventDismiss: false,
+        content: ExampleContentType.SimpleTextContent
+    }
+};
+export default metadata;
+export const drawer = {};
+//# sourceMappingURL=drawer.stories.js.map

package/dist/esm/drawer/tests/drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.stories.js","sourceRoot":"","sources":["../../../../src/drawer/tests/drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvD,IAAK,kBAGJ;AAHD,WAAK,kBAAkB;IACnB,6DAAuC,CAAA;IACvC,iEAA2C,CAAA;AAC/C,CAAC,EAHI,kBAAkB,KAAlB,kBAAkB,QAGtB;AAWD,MAAM,mBAAmB,GAAG,mHAAmH,CAAC;AAEhJ,kBAAkB;AAClB,MAAM,iCAAiC,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;cAgBhC,CAAC;AACf,MAAM,yBAAyB,GAAG,iCAAiC,CAAC,IAAc,CAAC;AAEnF,MAAM,QAAQ,GAAqB;IAC/B,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,WAAW,EACP,wHAAwH;SAC/H;KACJ;IACD,kBAAkB;IAClB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;yBACN,GAAG,CAAC,QAAQ,CAAC;qBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gCACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;wBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;qBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;0BACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;;;sBAIlB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;;;;KAI9G,CAAC;IACF,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,OAAO,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;YACpD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;QACD,KAAK,EAAE;YACH,OAAO,EAAE;gBACL,WAAW,CAAC,OAAO;gBACnB,WAAW,CAAC,MAAM;gBAClB,WAAW,CAAC,OAAO;gBACnB,WAAW,CAAC,MAAM;aACrB;YACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,OAAO,EAAE;YACL,OAAO,EAAE;gBACL,kBAAkB,CAAC,iBAAiB;gBACpC,kBAAkB,CAAC,mBAAmB;aACzC;YACD,OAAO,EAAE;gBACL,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,mBAAmB;gBAC3D,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,EACpC,yBAAyB;aAChC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE;oBACJ,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAClC,qBAAqB;oBACzB,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,EACpC,+BAA+B;iBACtC;aACJ;SACJ;KACJ;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,cAAc,CAAC,IAAI;QAC7B,KAAK,EAAE,WAAW,CAAC,MAAM;QACzB,KAAK,EAAE,IAAI;QACX,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,kBAAkB,CAAC,iBAAiB;KAChD;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAsB,EAAE,CAAC"}

package/dist/esm/drawer/types.d.ts

@@ -0,0 +1,10 @@
+export declare enum DrawerLocation {
+    Left = "left",
+    Right = "right"
+}
+export declare enum DrawerState {
+    Opening = "opening",
+    Opened = "opened",
+    Closing = "closing",
+    Closed = "closed"
+}

package/dist/esm/drawer/types.js

@@ -0,0 +1,13 @@
+export var DrawerLocation;
+(function (DrawerLocation) {
+    DrawerLocation["Left"] = "left";
+    DrawerLocation["Right"] = "right";
+})(DrawerLocation || (DrawerLocation = {}));
+export var DrawerState;
+(function (DrawerState) {
+    DrawerState["Opening"] = "opening";
+    DrawerState["Opened"] = "opened";
+    DrawerState["Closing"] = "closing";
+    DrawerState["Closed"] = "closed";
+})(DrawerState || (DrawerState = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/drawer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}

package/dist/esm/icon-base/index.d.ts

@@ -3,7 +3,10 @@ import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-i
 /**
  * The base class for icon components
  */
-export declare abstract class Icon extends FoundationElement {
+export declare class Icon extends FoundationElement {
     icon: NimbleIcon;
     constructor(icon: NimbleIcon);
 }
+declare type IconClass = typeof Icon;
+export declare const registerIcon: (baseName: string, iconClass: IconClass) => void;
+export {};

package/dist/esm/icon-base/index.js

@@ -1,4 +1,6 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { template } from './template';
+import { styles } from './styles';
 /**
  * The base class for icon components
  */
@@ -8,4 +10,13 @@ export class Icon extends FoundationElement {
         this.icon = icon;
     }
 }
+export const registerIcon = (baseName, iconClass) => {
+    const composedIcon = iconClass.compose({
+        baseName,
+        template,
+        styles,
+        baseClass: iconClass
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/icon-base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,iBAAiB;IAChD,YAA0B,IAAgB;QACtC,KAAK,EAAE,CAAC;QADc,SAAI,GAAJ,IAAI,CAAY;IAE1C,CAAC;CACJ"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/icon-base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;IACvC,YAA0B,IAAgB;QACtC,KAAK,EAAE,CAAC;QADc,SAAI,GAAJ,IAAI,CAAY;IAE1C,CAAC;CACJ;AAID,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,SAAoB,EAAQ,EAAE;IACzE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC;QACnC,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,SAAS,EAAE,SAAS;KACvB,CAAC,CAAC;IAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7E,CAAC,CAAC"}

package/dist/esm/icon-base/template.js

@@ -1,7 +1,7 @@
 import { html } from '@microsoft/fast-element';
 export const template = html `
-        <template slot="start">
-                <div class="icon" :innerHTML=${x => x.icon.data}></div>
-        </template
+    <template slot="start">
+        <div class="icon" :innerHTML=${x => x.icon.data}></div>
+    </template
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/icon-base/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/icon-base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;+CAEa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;CAE9D,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/icon-base/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;uCAEK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;CAEtD,CAAC"}

package/dist/esm/icon-base/tests/icon-matrix.stories.d.ts

@@ -1,5 +1,4 @@
 import type { Story, Meta } from '@storybook/html';
-import '../index';
 import '../../icons/check';
 declare const metadata: Meta;
 export default metadata;

package/dist/esm/icon-base/tests/icon-matrix.stories.js

@@ -1,10 +1,10 @@
 import { withXD } from 'storybook-addon-xd-designs';
 import { html } from '@microsoft/fast-element';
 import { createMatrix, themeWrapper } from '../../tests/utilities/theme-test-helpers';
-import '../index';
 import '../../icons/check';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
 import { IconStatus } from './types';
+import { contentFontColor } from '../../theme-provider/design-tokens';
 const metadata = {
     title: 'Tests/Icon',
     decorators: [withXD],
@@ -13,15 +13,15 @@ const metadata = {
     }
 };
 export default metadata;
-const iconStates = [
+const iconStatusStates = [
     ['Pass', IconStatus.Pass],
     ['Fail', IconStatus.Fail],
     ['Warning', IconStatus.Warning],
     ['Regular', IconStatus.Regular]
 ];
 const component = ([stateName, state]) => html `
-    <nimble-text-field readonly value="${stateName}"></<nimble-text-field>
-    <nimble-check-icon class="${state}"> </nimble-check-icon>
+    <span style="color: ${contentFontColor.createCSS()};">${stateName}</span>
+    <nimble-check-icon class="${state}"></nimble-check-icon>
 `;
-export const iconThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [iconStates])));
+export const iconThemeMatrix = createRenderer(themeWrapper(createMatrix(component, [iconStatusStates])));
 //# sourceMappingURL=icon-matrix.stories.js.map

package/dist/esm/icon-base/tests/icon-matrix.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-matrix.stories.js","sourceRoot":"","sources":["../../../../src/icon-base/tests/icon-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,UAAU,GAAG;IACf,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;IACzB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;IACzB,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;IAC/B,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;CAClC,CAAC;AAGF,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,CAAY,EAAgB,EAAE,CAAC,IAAI,CAAA;yCAC9B,SAAS;gCAClB,KAAK;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CACtD,CAAC"}
+{"version":3,"file":"icon-matrix.stories.js","sourceRoot":"","sources":["../../../../src/icon-base/tests/icon-matrix.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,YAAY,EACZ,YAAY,EACf,MAAM,0CAA0C,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,QAAQ,GAAS;IACnB,KAAK,EAAE,YAAY;IACnB,UAAU,EAAE,CAAC,MAAM,CAAC;IACpB,UAAU,EAAE;QACR,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;CACJ,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,gBAAgB,GAAG;IACrB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;IACzB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC;IACzB,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;IAC/B,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;CAClC,CAAC;AAGF,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,CAAkB,EAAgB,EAAE,CAAC,IAAI,CAAA;0BACnD,gBAAgB,CAAC,SAAS,EAAE,MAAM,SAAS;gCACrC,KAAK;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,cAAc,CAChD,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC5D,CAAC"}

package/dist/esm/icon-base/tests/icons.stories.js

@@ -1,6 +1,7 @@
 import * as nimbleIconsMap from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { withXD } from 'storybook-addon-xd-designs';
 import { html, repeat } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
 import * as nimbleIconComponentsMap from '../../icons/all-icons';
 import { IconStatus } from './types';
 import { createRenderer } from '../../tests/utilities/storybook-test-helpers';
@@ -54,6 +55,21 @@ export const rawIcons = {
         </div>
     `)
 };
+// The binding in this template generates a new template on the fly
+// which is not a recommended practice by FAST. This is done because
+// bindings can't be used for the element tag name, i.e.:
+// static string interpolation works: html`<${tagName}></${tagName}>`
+// dynamic template binding doesn't work: html`<${() => tagName}></${() => tagName}>`
+const iconTemplate = html `
+    ${(x, c) => html `
+        <${DesignSystem.tagFor(x)}
+            class="${c.parent.status}"
+            title=${DesignSystem.tagFor(x)}
+            style="padding: 5px;"
+        >
+        </${DesignSystem.tagFor(x)}>
+    `}
+`;
 // prettier-ignore
 export const componentIcons = {
     args: { status: IconStatus.Regular },
@@ -64,8 +80,8 @@ export const componentIcons = {
         }
     },
     render: createRenderer(html `
-        <div class="container" :innerHTML=
-            ${x => nimbleIconComponents.map(element => `<${element.iconName} class="${x.status}" title="${element.iconName}" style="padding: 5px"></${element.iconName}>`).join('')}>
+        <div class="container">
+            ${repeat(() => nimbleIconComponents, iconTemplate)}
         </div>
     `)
 };

package/dist/esm/icon-base/tests/icons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../../../src/icon-base/tests/icons.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,uBAAuB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAE9E,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAClD,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAMpE,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwBnB,CAAC;AAEF,MAAM,QAAQ,GAAmB;IAC7B,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,CAAC,MAAM,CAAC;CACvB,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAoB;IACrC,UAAU,EAAE;QACR,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;IACD,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;UACrB,WAAW;;cAEP,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,CAAY;;;6BAG3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kCACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;aAEhC,CAAC;;KAET,CAAC;CACL,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,IAAI,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,OAAO,EAAE;IACpC,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;IACD,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;;cAEjB,CAAC,CAAC,EAAE,CAAC,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,WAAW,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,QAAQ,4BAA4B,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;KAE9K,CAAC;CACL,CAAC"}
+{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../../../src/icon-base/tests/icons.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,KAAK,uBAAuB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAG9E,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;AAClD,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAMpE,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwBnB,CAAC;AAEF,MAAM,QAAQ,GAAmB;IAC7B,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,CAAC,MAAM,CAAC;CACvB,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAoB;IACrC,UAAU,EAAE;QACR,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE;KAC5C;IACD,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;UACrB,WAAW;;cAEP,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,CAAY;;;6BAG3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kCACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;aAEhC,CAAC;;KAET,CAAC;CACL,CAAC;AAGF,mEAAmE;AACnE,oEAAoE;AACpE,yDAAyD;AACzD,qEAAqE;AACrE,qFAAqF;AACrF,MAAM,YAAY,GAAG,IAAI,CAAqB;MACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;WACT,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;qBACZ,CAAC,CAAC,MAAM,CAAC,MAAM;oBAChB,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;;;YAG9B,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;KAC7B;CACJ,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC3C,IAAI,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,OAAO,EAAE;IACpC,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC7B;KACJ;IACD,MAAM,EAAE,cAAc,CAAC,IAAI,CAAA;;cAEjB,MAAM,CAAC,GAAG,EAAE,CAAC,oBAAoB,EAAE,YAAY,CAAC;;KAEzD,CAAC;CACL,CAAC"}

package/dist/esm/icons/access-control.d.ts

@@ -1,9 +1,7 @@
 import { Icon } from '../icon-base';
-export type { AccessControlIcon };
-export declare const baseName = "access-control-icon";
 /**
  * The icon component for the 'access-control' icon
  */
-declare class AccessControlIcon extends Icon {
+export declare class AccessControlIcon extends Icon {
     constructor();
 }

package/dist/esm/icons/access-control.js

@@ -1,31 +1,12 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
 import { accessControlKey16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { Icon } from '../icon-base';
-import { template } from '../icon-base/template';
-import { styles } from '../icon-base/styles';
-export const baseName = 'access-control-icon';
+import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'access-control' icon
  */
-class AccessControlIcon extends Icon {
+export class AccessControlIcon extends Icon {
     constructor() {
         super(accessControlKey16X16);
     }
 }
-/**
- * A function that returns a nimble-access-control-icon registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-access-control-icon\>
- *
- */
-const nimbleAccessControlIcon = AccessControlIcon.compose({
-    baseName,
-    template,
-    styles
-});
-DesignSystem.getOrCreate()
-    .withPrefix('nimble')
-    .register(nimbleAccessControlIcon());
+registerIcon('access-control-icon', AccessControlIcon);
 //# sourceMappingURL=access-control.js.map

package/dist/esm/icons/access-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"access-control.js","sourceRoot":"","sources":["../../../src/icons/access-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAE9C;;GAEG;AACH,MAAM,iBAAkB,SAAQ,IAAI;IAChC;QACI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACjC,CAAC;CACJ;AAED;;;;;;;GAOG;AACH,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ;IACR,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"access-control.js","sourceRoot":"","sources":["../../../src/icons/access-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAI;IACvC;QACI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACjC,CAAC;CACJ;AAED,YAAY,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/esm/icons/admin.d.ts

@@ -1,9 +1,7 @@
 import { Icon } from '../icon-base';
-export type { AdminIcon };
-export declare const baseName = "admin-icon";
 /**
  * The icon component for the 'admin' icon
  */
-declare class AdminIcon extends Icon {
+export declare class AdminIcon extends Icon {
     constructor();
 }

package/dist/esm/icons/admin.js

@@ -1,29 +1,12 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
 import { admin16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { Icon } from '../icon-base';
-import { template } from '../icon-base/template';
-import { styles } from '../icon-base/styles';
-export const baseName = 'admin-icon';
+import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'admin' icon
  */
-class AdminIcon extends Icon {
+export class AdminIcon extends Icon {
     constructor() {
         super(admin16X16);
     }
 }
-/**
- * A function that returns a nimble-admin-icon registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-admin-icon\>
- *
- */
-const nimbleAdminIcon = AdminIcon.compose({
-    baseName,
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAdminIcon());
+registerIcon('admin-icon', AdminIcon);
 //# sourceMappingURL=admin.js.map

package/dist/esm/icons/admin.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin.js","sourceRoot":"","sources":["../../../src/icons/admin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,SAAU,SAAQ,IAAI;IACxB;QACI,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACJ;AAED;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ;IACR,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"admin.js","sourceRoot":"","sources":["../../../src/icons/admin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,IAAI;IAC/B;QACI,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACJ;AAED,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

package/dist/esm/icons/administration.d.ts

@@ -1,9 +1,7 @@
 import { Icon } from '../icon-base';
-export type { AdministrationIcon };
-export declare const baseName = "administration-icon";
 /**
  * The icon component for the 'administration' icon
  */
-declare class AdministrationIcon extends Icon {
+export declare class AdministrationIcon extends Icon {
     constructor();
 }

package/dist/esm/icons/administration.js

@@ -1,31 +1,12 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
 import { administration16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { Icon } from '../icon-base';
-import { template } from '../icon-base/template';
-import { styles } from '../icon-base/styles';
-export const baseName = 'administration-icon';
+import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'administration' icon
  */
-class AdministrationIcon extends Icon {
+export class AdministrationIcon extends Icon {
     constructor() {
         super(administration16X16);
     }
 }
-/**
- * A function that returns a nimble-administration-icon registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-administration-icon\>
- *
- */
-const nimbleAdministrationIcon = AdministrationIcon.compose({
-    baseName,
-    template,
-    styles
-});
-DesignSystem.getOrCreate()
-    .withPrefix('nimble')
-    .register(nimbleAdministrationIcon());
+registerIcon('administration-icon', AdministrationIcon);
 //# sourceMappingURL=administration.js.map

package/dist/esm/icons/administration.js.map

@@ -1 +1 @@
-{"version":3,"file":"administration.js","sourceRoot":"","sources":["../../../src/icons/administration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAE9C;;GAEG;AACH,MAAM,kBAAmB,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED;;;;;;;GAOG;AACH,MAAM,wBAAwB,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACxD,QAAQ;IACR,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,wBAAwB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"administration.js","sourceRoot":"","sources":["../../../src/icons/administration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,IAAI;IACxC;QACI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED,YAAY,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC"}