@aquera/nile-elements 0.0.1-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C;;;;;GAKG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QASE,gBAAgB;QAEP,YAAO,GAAG,KAAK,CAAC,CAAC,qFAAqF;QACtG,aAAQ,GAAG,KAAK,CAAC,CAAC,sDAAsD;QACxE,WAAM,GAAG,KAAK,CAAC,CAAC,uBAAuB;QACvC,aAAQ,GAAG,KAAK,CAAC,CAAC,yEAAyE;QAEpG;;;;WAIG;QAC0B,UAAK,GAAG,EAAE,CAAC;QAExC,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;QAE7D,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;QAwE7D,qBAAqB;QACrB,kBAAkB;QAClB,qCAAqC;QACrC,uCAAuC;QACvC,uCAAuC;QACvC,mCAAmC;QACnC,MAAM;QACN,gBAAgB;IAClB,CAAC;IA1GC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAsBD,qBAAqB;IAEb,uBAAuB;QAC7B,yCAAyC;QACzC,4CAA4C;QAC5C,qDAAqD;QACrD,sCAAsC;QACtC,YAAY;QACZ,IAAI;QACJ,4EAA4E;QAC5E,4CAA4C;QAC5C,sCAAsC;QACtC,oFAAoF;QACpF,IAAI;IACN,CAAC;IAED,gEAAgE;IAChE,YAAY;QACV,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IACD;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;8BAEgB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;4BACtC,IAAI,CAAC,YAAY;4BACjB,IAAI,CAAC,YAAY;;gBAE7B,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;+BAGS,IAAI,CAAC,QAAQ;qBACvB;gBACL,CAAC,CAAC,EAAE;;;;;;;;;;gCAUY,IAAI,CAAC,uBAAuB;;;;gBAI5C,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC/B,CAAC,CAAC,IAAI,CAAA,oDAAoD;gBAC1D,CAAC,CAAC,EAAE;;WAET;YACH,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CAUF,CAAA;AAhGU;IAAR,KAAK,EAAE;2CAAiB;AAChB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;0CAAgB;AACf;IAAR,KAAK,EAAE;4CAAkB;AAOG;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AA3BlD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2GtB;SA3GY,UAAU;AA6GvB,eAAe,UAAU,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-option.css';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n@customElement('nile-option')\nexport class NileOption extends LitElement {\n  /**\n   * The styles for Option\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /* #endregion */\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hidden = false; // the option is hidden\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /* #region Methods */\n\n  private handleDefaultSlotChange() {\n    // const textLabel = this.getTextLabel();\n    // // Ignore the first time the label is set\n    // if (typeof this.cachedTextLabel === 'undefined') {\n    //   this.cachedTextLabel = textLabel;\n    //   return;\n    // }\n    // When the label changes, emit a slotchange event so parent controls see it\n    // if (textLabel !== this.cachedTextLabel) {\n    //   this.cachedTextLabel = textLabel;\n    //   this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  onMouseEnter(): void {\n    this.hasHover = true;\n  }\n\n  onMouseLeave(): void {\n    this.hasHover = false;\n  }\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      ${!this.hidden\n        ? html`\n            <div\n              class=\"option ${this.multiple ? 'extra-padding' : ''}\"\n              @mouseenter=${this.onMouseEnter}\n              @mouseleave=${this.onMouseLeave}\n            >\n              ${this.multiple\n                ? html`<input\n                    type=\"checkbox\"\n                    style=\"pointer-events: none;\"\n                    ?checked=${this.selected}\n                  />`\n                : ''}\n\n              <span class=\"label-container\">\n                <span class=\"prefix\">\n                  <slot part=\"prefix\" name=\"prefix\"></slot>\n                </span>\n\n                <slot\n                  part=\"label\"\n                  class=\"label\"\n                  @slotchange=${this.handleDefaultSlotChange}\n                ></slot>\n                <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n              </span>\n              ${this.selected && !this.multiple\n                ? html`<nile-icon name=\"tick\" class=\"check\"> </nile-icon>`\n                : ''}\n            </div>\n          `\n        : ''}\n    `;\n  }\n\n  // class=${classMap({\n  //   option: true,\n  //   'option--current': this.current,\n  //   'option--disabled': this.disabled,\n  //   'option--selected': this.selected,\n  //   'option--hover': this.hasHover\n  // })}\n  /* #endregion */\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

package/dist/src/nile-option-2/index.d.ts

@@ -0,0 +1 @@
+export { NileOption_2 } from './nile-option-2';

package/dist/src/nile-option-2/index.js

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

package/dist/src/nile-option-2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-option-2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { NileOption_2 } from './nile-option-2';\n"]}

package/dist/src/nile-option-2/nile-option-2.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.
+*/
+/**
+ * Option_2 CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

package/dist/src/nile-option-2/nile-option-2.css.js

@@ -0,0 +1,97 @@
+/**
+* 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';
+/**
+ * Option_2 CSS
+ */
+export const styles = css `
+
+
+:host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height:  1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);;
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    transition: 150ms fill;
+    cursor: pointer;
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: hsl(240 4.8% 95.9%);
+    color: hsl(0, 0%, 0%);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: hsl(200.4 98% 39.4%);
+    color: hsl(0, 0%, 100%);
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: 1.4;
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: 0.25rem;
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-option-2.css.js.map

package/dist/src/nile-option-2/nile-option-2.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option-2.css.js","sourceRoot":"","sources":["../../../src/nile-option-2/nile-option-2.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFxB,CAAC;AAIF,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 * Option_2 CSS\n */\nexport const styles = css`\n\n\n:host {\n    display: block;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height:  1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);;\n    padding: 0.5rem 1rem 0.5rem 0.5rem;\n    transition: 150ms fill;\n    cursor: pointer;\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(0, 0%, 0%);\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: 0.25rem;\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\n\n\nexport default [styles];\n"]}

package/dist/src/nile-option-2/nile-option-2.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 { TemplateResult } from 'lit-element';
+import '../nile-icon';
+import type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-option-2
+ *
+ */
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @status stable
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export declare class NileOption_2 extends NileElement {
+    static styles: CSSResultGroup;
+    private cachedTextLabel;
+    defaultSlot: HTMLSlotElement;
+    current: boolean;
+    selected: boolean;
+    hasHover: boolean;
+    /**
+     * The option's value. When selected, the containing form control will receive this value. The value must be unique
+     * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+     * multiple values.
+     */
+    value: string;
+    /** Draws the option in a disabled state, preventing selection. */
+    disabled: boolean;
+    connectedCallback(): void;
+    private handleDefaultSlotChange;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleValueChange(): void;
+    /** Returns a plain text label based on the option's content. */
+    getTextLabel(): string;
+    render(): TemplateResult<1>;
+}
+export default NileOption_2;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-option-2': NileOption_2;
+    }
+}

package/dist/src/nile-option-2/nile-option-2.js

@@ -0,0 +1,152 @@
+/**
+ * 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 { styles } from './nile-option-2.css';
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-option-2
+ *
+ */
+/**
+ * @summary Options define the selectable items within various form controls such as [select](/components/select).
+ * @status stable
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The option's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The option's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+let NileOption_2 = class NileOption_2 extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+        this.selected = false; // the option is selected and has aria-selected="true"
+        this.hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
+        /**
+         * The option's value. When selected, the containing form control will receive this value. The value must be unique
+         * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+         * multiple values.
+         */
+        this.value = '';
+        /** Draws the option in a disabled state, preventing selection. */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+        this.setAttribute('aria-selected', 'false');
+    }
+    handleDefaultSlotChange() {
+        const textLabel = this.getTextLabel();
+        // Ignore the first time the label is set
+        if (typeof this.cachedTextLabel === 'undefined') {
+            this.cachedTextLabel = textLabel;
+            return;
+        }
+        // When the label changes, emit a slotchange event so parent controls see it
+        if (textLabel !== this.cachedTextLabel) {
+            this.cachedTextLabel = textLabel;
+            this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
+        }
+    }
+    handleMouseEnter() {
+        this.hasHover = true;
+    }
+    handleMouseLeave() {
+        this.hasHover = false;
+    }
+    handleDisabledChange() {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+    handleSelectedChange() {
+        this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+    }
+    handleValueChange() {
+        // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
+        // instead of requiring them to cast the value to a string.
+        if (typeof this.value !== 'string') {
+            this.value = String(this.value);
+        }
+        if (this.value.includes(' ')) {
+            console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+            this.value = this.value.replace(/ /g, '_');
+        }
+    }
+    /** Returns a plain text label based on the option's content. */
+    getTextLabel() {
+        return (this.textContent ?? '').trim();
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            option: true,
+            'option--current': this.current,
+            'option--disabled': this.disabled,
+            'option--selected': this.selected,
+            'option--hover': this.hasHover
+        })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <nile-icon part="checked-icon" class="option__check" name="tick" color=${this.current ? 'white' : ''}  aria-hidden="true"></nile-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+    }
+};
+NileOption_2.styles = styles;
+__decorate([
+    query('.option__label')
+], NileOption_2.prototype, "defaultSlot", void 0);
+__decorate([
+    state()
+], NileOption_2.prototype, "current", void 0);
+__decorate([
+    state()
+], NileOption_2.prototype, "selected", void 0);
+__decorate([
+    state()
+], NileOption_2.prototype, "hasHover", void 0);
+__decorate([
+    property({ reflect: true })
+], NileOption_2.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileOption_2.prototype, "disabled", void 0);
+__decorate([
+    watch('disabled')
+], NileOption_2.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('selected')
+], NileOption_2.prototype, "handleSelectedChange", null);
+__decorate([
+    watch('value')
+], NileOption_2.prototype, "handleValueChange", null);
+NileOption_2 = __decorate([
+    customElement('nile-option-2')
+], NileOption_2);
+export { NileOption_2 };
+export default NileOption_2;
+//# sourceMappingURL=nile-option-2.js.map

package/dist/src/nile-option-2/nile-option-2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-option-2.js","sourceRoot":"","sources":["../../../src/nile-option-2/nile-option-2.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, CSSResultArray, TemplateResult} from 'lit-element';\nimport {styles} from './nile-option-2.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option-2\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option-2')\nexport class NileOption_2 extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    if (this.value.includes(' ')) {\n      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);\n      this.value = this.value.replace(/ /g, '_');\n    }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          option: true,\n          'option--current': this.current,\n          'option--disabled': this.disabled,\n          'option--selected': this.selected,\n          'option--hover': this.hasHover\n        })}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <nile-icon part=\"checked-icon\" class=\"option__check\" name=\"tick\" color=${this.current ? 'white' : ''}  aria-hidden=\"true\"></nile-icon>\n        <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n        <slot part=\"label\" class=\"option__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n        <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileOption_2;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option-2': NileOption_2;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { NilePopup } from './nile-popup';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-popup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { NilePopup } from './nile-popup';\n"]}

package/dist/src/nile-popup/nile-popup.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.
+*/
+/**
+ * Popup CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

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

@@ -0,0 +1,52 @@
+/**
+* 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';
+/**
+ * Popup CSS
+ */
+export const styles = css `
+
+:host {
+    --arrow-color: var(--sl-color-neutral-1000);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-popup.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-popup.css.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,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 * Popup CSS\n */\nexport const styles = css`\n\n:host {\n    --arrow-color: var(--sl-color-neutral-1000);\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,126 @@
+/**
+ * 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 { TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popup
+ *
+ */
+export declare class NilePopup extends NileElement {
+    static styles: CSSResultGroup;
+    private anchorEl;
+    private cleanup;
+    /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
+    popup: HTMLElement;
+    private arrowEl;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
+     * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
+     */
+    anchor: Element | string;
+    /**
+     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+     * down and the popup will be hidden.
+     */
+    active: boolean;
+    /**
+     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+     * panel inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
+     * clipped, using a `fixed` position strategy can often workaround it.
+     */
+    strategy: 'absolute' | 'fixed';
+    /** The distance in pixels from which to offset the panel away from its anchor. */
+    distance: number;
+    /** The distance in pixels from which to offset the panel along its anchor. */
+    skidding: number;
+    /**
+     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+     * `::part(arrow)` in your stylesheet.
+     */
+    arrow: boolean;
+    /**
+     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+     * align the arrow to the start, end, or center of the popover instead.
+     */
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    /**
+     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+     * this will prevent it from overflowing the corners.
+     */
+    arrowPadding: number;
+    /**
+     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+     */
+    flip: boolean;
+    /**
+     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+     * fallback strategy will be used instead.
+     * */
+    flipFallbackPlacements: string;
+    /**
+     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+     * the popup should be positioned using the best available fit based on available space or as it was initially
+     * preferred.
+     */
+    flipFallbackStrategy: 'best-fit' | 'initial';
+    /**
+     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    flipBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+    flipPadding: number;
+    /** Moves the popup along the axis to keep it in view when clipped. */
+    shift: boolean;
+    /**
+     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    shiftBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
+    shiftPadding: number;
+    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
+    autoSize: 'horizontal' | 'vertical' | 'both';
+    /** Syncs the popup's width or height to that of the anchor element. */
+    sync: 'width' | 'height' | 'both';
+    /**
+     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    autoSizeBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
+    autoSizePadding: number;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    /** Forces the popup to recalculate and reposition itself. */
+    reposition(): void;
+    render(): TemplateResult<1>;
+}
+export default NilePopup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-popup': NilePopup;
+    }
+}