@aquera/nile-elements 0.0.82 → 0.0.85

package/dist/src/nile-detail/nile-detail.js

@@ -0,0 +1,225 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { styles } from './nile-detail.css';
+import NileElement from '../internal/nile-element';
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+/**
+ * Nile detail component.
+ *
+ * @tag nile-accordion
+ *
+ */
+let NileDetail = class NileDetail extends NileElement {
+    constructor() {
+        /**
+         * @summary Details show a brief summary and expand to show additional content.
+         *
+         * @dependency nile-icon
+         *
+         * @slot - The details' main content.
+         * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+         * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
+         * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
+         *
+         * @event nile-show - Emitted when the details opens.
+         * @event nile-after-show - Emitted after the details opens and all animations are complete.
+         * @event nile-hide - Emitted when the details closes.
+         * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+         *
+         * @csspart base - The component's base wrapper.
+         * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+         * @csspart summary - The container that wraps the summary.
+         * @csspart summary-icon - The container that wraps the expand/collapse icons.
+         * @csspart content - The details content.
+         *
+         * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+         * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+         */
+        super(...arguments);
+        /**
+         * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+         * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+         */
+        this.open = false;
+        /** Disables the details so it can't be toggled. */
+        this.disabled = false;
+    }
+    firstUpdated() {
+        this.body.hidden = !this.open;
+        this.body.style.height = this.open ? 'auto' : '0';
+    }
+    handleSummaryClick() {
+        if (!this.disabled) {
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+            this.header.focus();
+        }
+    }
+    handleSummaryKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.hide();
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.show();
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            // Show
+            const nileShow = this.emit('nile-show', { cancelable: true });
+            if (nileShow.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            await stopAnimations(this.body);
+            this.body.hidden = false;
+            const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.style.height = 'auto';
+            this.emit('nile-after-show');
+        }
+        else {
+            // Hide
+            const nileHide = this.emit('nile-hide', { cancelable: true });
+            if (nileHide.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.hidden = true;
+            this.body.style.height = 'auto';
+            this.emit('nile-after-hide');
+        }
+    }
+    /** Shows the details. */
+    async show() {
+        if (this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, 'nile-after-show');
+    }
+    /** Hides the details */
+    async hide() {
+        if (!this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, 'nile-after-hide');
+    }
+    render() {
+        const isRtl = false;
+        return html `
+    <div
+      part="base"
+      class=${classMap({
+            details: true,
+            'details--open': this.open,
+            'details--disabled': this.disabled,
+            'details--rtl': isRtl
+        })}
+    >
+      <div
+        part="header"
+        id="header"
+        class="details__header"
+        role="button"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls="content"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.handleSummaryClick}
+        @keydown=${this.handleSummaryKeyDown}
+      >
+        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+        <span part="summary-icon" class="details__summary-icon">
+          <slot name="expand-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+          <slot name="collapse-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+        </span>
+      </div>
+
+      <div class="details__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" class="details__content"></slot>
+      </div>
+    </div>
+  `;
+    }
+};
+NileDetail.styles = styles;
+__decorate([
+    query('.details')
+], NileDetail.prototype, "details", void 0);
+__decorate([
+    query('.details__header')
+], NileDetail.prototype, "header", void 0);
+__decorate([
+    query('.details__body')
+], NileDetail.prototype, "body", void 0);
+__decorate([
+    query('.details__expand-icon-slot')
+], NileDetail.prototype, "expandIconSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDetail.prototype, "open", void 0);
+__decorate([
+    property()
+], NileDetail.prototype, "summary", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDetail.prototype, "disabled", void 0);
+__decorate([
+    watch('open', { waitUntilFirstUpdate: true })
+], NileDetail.prototype, "handleOpenChange", null);
+NileDetail = __decorate([
+    customElement('nile-accordion')
+], NileDetail);
+export { NileDetail };
+setDefaultAnimation('details.show', {
+    keyframes: [
+        { height: '0', opacity: '0' },
+        { height: 'auto', opacity: '1' }
+    ],
+    options: { duration: 250, easing: 'linear' }
+});
+setDefaultAnimation('details.hide', {
+    keyframes: [
+        { height: 'auto', opacity: '1' },
+        { height: '0', opacity: '0' }
+    ],
+    options: { duration: 250, easing: 'linear' }
+});
+export default NileDetail;
+//# sourceMappingURL=nile-detail.js.map

package/dist/src/nile-detail/nile-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-detail.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-detail.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileDetail extends NileElement {\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the details opens.\n * @event nile-after-show - Emitted after the details opens and all animations are complete.\n * @event nile-hide - Emitted when the details closes.\n * @event nile-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.details') details: HTMLElement;\n@query('.details__header') header: HTMLElement;\n@query('.details__body') body: HTMLElement;\n@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the details so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n  this.body.hidden = !this.open;\n  this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n  if (!this.disabled) {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    this.hide();\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    this.show();\n  }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n  if (this.open) {\n    // Show\n    const nileShow = this.emit('nile-show', { cancelable: true });\n    if (nileShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-show');\n  } else {\n    // Hide\n    const nileHide = this.emit('nile-hide', { cancelable: true });\n    if (nileHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = 'auto';\n\n    this.emit('nile-after-hide');\n  }\n}\n\n/** Shows the details. */\nasync show() {\n  if (this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = true;\n  return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the details */\nasync hide() {\n  if (!this.open || this.disabled) {\n    return undefined;\n  }\n\n  this.open = false;\n  return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n  const isRtl = false;\n\n  return html`\n    <div\n      part=\"base\"\n      class=${classMap({\n        details: true,\n        'details--open': this.open,\n        'details--disabled': this.disabled,\n        'details--rtl': isRtl\n      })}\n    >\n      <div\n        part=\"header\"\n        id=\"header\"\n        class=\"details__header\"\n        role=\"button\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"content\"\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleSummaryClick}\n        @keydown=${this.handleSummaryKeyDown}\n      >\n        <slot name=\"summary\" part=\"summary\" class=\"details__summary\">${this.summary}</slot>\n\n        <span part=\"summary-icon\" class=\"details__summary-icon\">\n          <slot name=\"expand-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n          <slot name=\"collapse-icon\">\n            <nile-icon name=\"arrowright\"></nile-icon>\n          </slot>\n        </span>\n      </div>\n\n      <div class=\"details__body\" role=\"region\" aria-labelledby=\"header\">\n        <slot part=\"content\" id=\"content\" class=\"details__content\"></slot>\n      </div>\n    </div>\n  `;\n}\n}\n\nsetDefaultAnimation('details.show', {\nkeyframes: [\n  { height: '0', opacity: '0' },\n  { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('details.hide', {\nkeyframes: [\n  { height: 'auto', opacity: '1' },\n  { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileDetail;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-accordion': NileDetail;\n  }\n}\n"]}

package/dist/src/nile-divider/index.d.ts

@@ -0,0 +1 @@
+export { NileDivider } from './nile-divider';

package/dist/src/nile-divider/index.js

@@ -0,0 +1,2 @@
+export { NileDivider } from './nile-divider';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { NileDivider } from './nile-divider';"]}

package/dist/src/nile-divider/nile-divider.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * Divider CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-divider/nile-divider.css.js

@@ -0,0 +1,40 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * Divider CSS
+ */
+export const styles = css `
+	:host {
+		display: block;
+		height: 100%;
+	}
+
+	.divider {
+		background-color: var(--nile-colors-gray-light-mode-200, #eaecf0);;
+	}
+	
+	.horizontal {
+		height: 2px;
+		width: 100%;
+		margin: 8px 0;
+	}
+
+	.vertical {
+		height: 100%;
+		width: 2px;
+		margin: 0 8px;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.inset {
+		margin-left: 72px;
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-divider.css.js.map

package/dist/src/nile-divider/nile-divider.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-divider.css.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Divider CSS\n */\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\theight: 100%;\n\t}\n\n\t.divider {\n\t\tbackground-color: var(--nile-colors-gray-light-mode-200, #eaecf0);;\n\t}\n\t\n\t.horizontal {\n\t\theight: 2px;\n\t\twidth: 100%;\n\t\tmargin: 8px 0;\n\t}\n\n\t.vertical {\n\t\theight: 100%;\n\t\twidth: 2px;\n\t\tmargin: 0 8px;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n\n\t.inset {\n\t\tmargin-left: 72px;\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-divider/nile-divider.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+export declare class NileDivider extends NileElement {
+    /**
+     * The styles for nile-divider
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    inset: boolean;
+    vertical: boolean;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileDivider;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-divider': NileDivider;
+    }
+}

package/dist/src/nile-divider/nile-divider.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-divider.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+let NileDivider = class NileDivider extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.inset = false;
+        this.vertical = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for nile-divider
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    /* #endregion */
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
+			`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDivider.prototype, "inset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDivider.prototype, "vertical", void 0);
+NileDivider = __decorate([
+    customElement('nile-divider')
+], NileDivider);
+export { NileDivider };
+export default NileDivider;
+//# sourceMappingURL=nile-divider.js.map

package/dist/src/nile-divider/nile-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-divider.js","sourceRoot":"","sources":["../../../src/nile-divider/nile-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAE,QAAQ,EAAiC,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QASqC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAgB5D,gBAAgB;IACjB,CAAC;IAzBA;;;OAGG;IACI,MAAM,KAAK,MAAM;QACvB,OAAO,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC;IAID,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACZ,OAAO,IAAI,CAAA;wCAC2B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;IAC1G,CAAC;IACJ,CAAC;CAGD,CAAA;AAlB2C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;0CAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAC,IAAI,EAAE,CAAC;6CAAkB;AAVhD,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2BvB;SA3BY,WAAW;AA6BxB,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-divider.css';\nimport NileElement from '../internal/nile-element';\n\n\n/**\n * Nile divider component.\n *\n * @tag nile-divider\n *\n */\n@customElement('nile-divider')\nexport class NileDivider extends NileElement {\n\n\t/**\n\t * The styles for nile-divider\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\t@property({ type: Boolean, reflect:true }) inset = false;\n\t@property({ type: Boolean, reflect:true }) vertical = false;\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<div part=\"divider\" class=\"divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}\"></div>\n\t\t\t`;\n\t}\n\n\t/* #endregion */\n}\n\nexport default NileDivider;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-divider': NileDivider;\n  }\n}"]}

package/dist/src/nile-icon/icons/svg/headphones-01.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+declare const _default: "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";
+export default _default;

package/dist/src/nile-icon/icons/svg/headphones-01.js

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";
+//# sourceMappingURL=headphones-01.js.map

package/dist/src/nile-icon/icons/svg/headphones-01.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headphones-01.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/headphones-01.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,sqBAAsqB,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+\";"]}

package/dist/src/nile-icon/icons/svg/index.d.ts

@@ -240,6 +240,7 @@ export { default as headerflows } from './header-flows';
 export { default as headerfunctions } from './header-functions';
 export { default as headertasks } from './header-tasks';
 export { default as headervariable } from './header-variable';
+export { default as headphones01 } from './headphones-01';
 export { default as help1 } from './help-1';
 export { default as helpcircle } from './help-circle';
 export { default as help } from './help';
@@ -264,6 +265,7 @@ export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
+export { default as keyboard01 } from './keyboard-01';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
@@ -303,6 +305,7 @@ export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
 export { default as monitor01 } from './monitor-01';
+export { default as mouse } from './mouse';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';
@@ -359,6 +362,7 @@ export { default as predefined } from './predefined';
 export { default as prevup } from './prev-up';
 export { default as prev } from './prev';
 export { default as preview } from './preview';
+export { default as printer } from './printer';
 export { default as priorityhigh } from './priority-high';
 export { default as priorityhighest } from './priority-highest';
 export { default as prioritylow } from './priority-low';

package/dist/src/nile-icon/icons/svg/index.js

@@ -240,6 +240,7 @@ export { default as headerflows } from './header-flows';
 export { default as headerfunctions } from './header-functions';
 export { default as headertasks } from './header-tasks';
 export { default as headervariable } from './header-variable';
+export { default as headphones01 } from './headphones-01';
 export { default as help1 } from './help-1';
 export { default as helpcircle } from './help-circle';
 export { default as help } from './help';
@@ -264,6 +265,7 @@ export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
+export { default as keyboard01 } from './keyboard-01';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
@@ -303,6 +305,7 @@ export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
 export { default as monitor01 } from './monitor-01';
+export { default as mouse } from './mouse';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';
@@ -359,6 +362,7 @@ export { default as predefined } from './predefined';
 export { default as prevup } from './prev-up';
 export { default as prev } from './prev';
 export { default as preview } from './preview';
+export { default as printer } from './printer';
 export { default as priorityhigh } from './priority-high';
 export { default as priorityhighest } from './priority-highest';
 export { default as prioritylow } from './priority-low';