@aquera/nile-elements 0.0.38 → 0.0.40-1

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

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

package/dist/src/nile-icon/icons/svg/users-02.js

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

package/dist/src/nile-icon/icons/svg/users-02.js.map

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

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

@@ -9,13 +9,13 @@ import { css } from 'lit-element';
  * Menu CSS
  */
 export const styles = css `
- :host {
+  :host {
     display: block;
     position: relative;
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
     border-radius: 0.25rem;
-    padding: 0.5rem 0;
+    padding: 12px 9px;
     overflow: auto;
     overscroll-behavior: none;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAexB,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 * Menu CSS\n */\nexport const styles = css`\n :host {\n    display: block;\n    position: relative;\n    background: hsl(0, 0%, 100%);\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 0.25rem;\n    padding: 0.5rem 0;\n    overflow: auto;\n    overscroll-behavior: none;\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: 0.5rem;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAexB,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 * Menu CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: relative;\n    background: hsl(0, 0%, 100%);\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 0.25rem;\n    padding: 12px 9px;\n    overflow: auto;\n    overscroll-behavior: none;\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: 0.5rem;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -14,6 +14,11 @@ import type NileMenuItem from '../nile-menu-item/nile-menu-item';
  */
 export declare class NileMenu extends NileElement {
     static styles: CSSResultGroup;
+    searchValue: string;
+    searchWidth: number;
+    searchEnabled: boolean;
+    showNoResults: boolean;
+    noResultsMessage: string;
     defaultSlot: HTMLSlotElement;
     connectedCallback(): void;
     private handleClick;
@@ -33,6 +38,7 @@ export declare class NileMenu extends NileElement {
      * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
      */
     setCurrentItem(item: NileMenuItem): void;
+    private handleSearchChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default NileMenu;

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { query } from 'lit/decorators.js';
 import NileElement from '../internal/nile-element';
 import { styles } from './nile-menu.css';
@@ -16,6 +16,14 @@ import { styles } from './nile-menu.css';
  * @csspart button - The button
  */
 let NileMenu = class NileMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.searchValue = '';
+        this.searchWidth = 0;
+        this.searchEnabled = false;
+        this.showNoResults = false;
+        this.noResultsMessage = 'No results found';
+    }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'menu');
@@ -119,18 +127,67 @@ let NileMenu = class NileMenu extends NileElement {
             i.setAttribute('tabindex', i === item ? '0' : '-1');
         });
     }
+    handleSearchChange(e) {
+        let items = this.getAllItems();
+        let counter = 0;
+        items.map(curr_item => {
+            this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
+            if (curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())) {
+                curr_item.style.display = 'block';
+                counter++;
+            }
+            else {
+                curr_item.style.display = 'none';
+            }
+        });
+        this.showNoResults = counter === 0;
+    }
     render() {
         return html `
-      <slot
-        @slotchange=${this.handleSlotChange}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleMouseDown}
-      ></slot>
-  `;
+      <div>
+          ${this.searchEnabled
+            ? html ` <nile-input
+                size="medium"
+                clearable
+                style=${this.searchWidth
+                ? `width: ${this.searchWidth}px;`
+                : 'width: 100%;'}
+                .value=${this.searchValue}
+                placeholder="Search..."
+                @nile-input=${this.handleSearchChange}
+              >
+                <nile-icon name="search" slot="suffix"> </nile-icon>
+              </nile-input>`
+            : html ``}
+        ${this.showNoResults
+            ? html ` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
+            : ''}
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @mousedown=${this.handleMouseDown}
+        ></slot>
+      </div>
+    `;
     }
 };
 NileMenu.styles = styles;
+__decorate([
+    state()
+], NileMenu.prototype, "searchValue", void 0);
+__decorate([
+    state()
+], NileMenu.prototype, "searchWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMenu.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileMenu.prototype, "showNoResults", void 0);
+__decorate([
+    property({ type: String })
+], NileMenu.prototype, "noResultsMessage", void 0);
 __decorate([
     query('slot')
 ], NileMenu.prototype, "defaultSlot", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {  query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport {styles} from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value :item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if ( !this.isMenuItem(el)) {\n      // if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n  `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}
+{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,IAAI,EAAO,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;GAUG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAEI,gBAAW,GAAW,EAAE,CAAC;QACzB,gBAAW,GAAW,CAAC,CAAC;QAEW,kBAAa,GAAG,KAAK,CAAC;QACrC,kBAAa,GAAY,KAAK,CAAC;QAEhC,qBAAgB,GAAW,kBAAkB,CAAC;IAkL5E,CAAC;IA9KC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAE9C,8CAA8C;QAC9C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,uCAAuC;QACvC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,6FAA6F;YAC7F,IAAI,EAAE,KAAK,EAAE,CAAC;SACf;QAED,0CAA0C;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,8CAA8C;QAC9C,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACzC,IAAI,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEvD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;oBAC7B,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;oBAClC,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;oBAC/B,KAAK,GAAG,CAAC,CAAC;iBACX;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;oBAC9B,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBAED,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC5B,KAAK,GAAG,CAAC,CAAC;iBACX;gBAED,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;aACtB;SACF;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,MAAsB,CAAC,CAAC;SAC7C;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,2DAA2D;QAC3D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC;IAEO,UAAU,CAAC,IAAiB;QAClC,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB;YAC/C,CAAC,UAAU,EAAE,kBAAkB,EAAE,eAAe,CAAC,CAAC,QAAQ,CACxD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAChC,CACF,CAAC;IACJ,CAAC;IAED,6FAA6F;IAC7F,WAAW;QACT,OAAO,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACrE,CAAC,EAAe,EAAE,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;gBACxB,0CAA0C;gBAC1C,OAAO,KAAK,CAAC;aACd;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CACgB,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,IAAkB;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,qBAAqB;QACrB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAChB,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB,CAAC,CAAM;QAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/B,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;YACrE,IACE,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,EACxE;gBACA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;gBAClC,OAAO,EAAE,CAAC;aACX;iBAAM;gBACL,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,GAAG,OAAO,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;YAEH,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;wBAGM,IAAI,CAAC,WAAW;gBACtB,CAAC,CAAC,UAAU,IAAI,CAAC,WAAW,KAAK;gBACjC,CAAC,CAAC,cAAc;yBACT,IAAI,CAAC,WAAW;;8BAEX,IAAI,CAAC,kBAAkB;;;4BAGzB;YAChB,CAAC,CAAC,IAAI,CAAA,EAAE;UACV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,gBAAgB,oBAAoB;YACnE,CAAC,CAAC,EAAE;;wBAEU,IAAI,CAAC,gBAAgB;mBAC1B,IAAI,CAAC,WAAW;qBACd,IAAI,CAAC,aAAa;uBAChB,IAAI,CAAC,eAAe;;;KAGtC,CAAC;IACJ,CAAC;;AAxLM,eAAM,GAAmB,MAAM,CAAC;AAC9B;IAAR,KAAK,EAAE;6CAA0B;AACzB;IAAR,KAAK,EAAE;6CAAyB;AAEW;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAuB;AACrC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAgC;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+C;AAE3D;IAAd,KAAK,CAAC,MAAM,CAAC;6CAA8B;AAVjC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0LpB;SA1LY,QAAQ;AA2LrB,eAAe,QAAQ,CAAC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed\n    if (event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move the selection when pressing down or up\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      <div>\n          ${this.searchEnabled\n            ? html` <nile-input\n                size=\"medium\"\n                clearable\n                style=${this.searchWidth\n                  ? `width: ${this.searchWidth}px;`\n                  : 'width: 100%;'}\n                .value=${this.searchValue}\n                placeholder=\"Search...\"\n                @nile-input=${this.handleSearchChange}\n              >\n                <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n              </nile-input>`\n            : html``}\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n        <slot\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n      </div>\n    `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}

package/dist/src/nile-menu-item/nile-menu-item.css.js

@@ -40,7 +40,7 @@ export const styles = css `
     line-height: 1.8;
     letter-spacing: normal;
     color: hsl(240 5.3% 26.1%);
-    padding: 0.25rem 0.25rem;
+    padding : 12px 0;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;

package/dist/src/nile-menu-item/nile-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\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.25rem 0.25rem;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-align: initial;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(0, 0%, 0%);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\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 : 12px 0;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-align: initial;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(0, 0%, 0%);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1 @@
+export { NilePopover } from './nile-popover';

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+/**
+ * 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';
+/**
+ * Popover CSS
+ */
+export const styles = css `
+  :host {
+    box-sizing: 'border-box';
+  }
+
+  .popover__title {
+    display: block;
+    color: var(--Dark-Normal, var(--Color-Text-Default, #000));
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: Colfax;
+    font-size: var(--nile-type-scale-4);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--nile-type-scale-4); /* 100% */
+    letter-spacing: 0.2px;
+  }
+
+  .popover__box {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-width: 352px;
+    gap: var(--nile-type-scale-4);
+    padding: var(--nile-type-scale-4);
+    border-radius: var(--nile-radius-base-standard);
+    background-color:var(--nile-colors-white-base);
+  }
+
+  .popover__action {
+    align-self: end;
+    display: inline;
+  }
+
+  nile-popup {
+    --arrow-size: 18px;
+    --arrow-color: #ffff;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-popover.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-popover.css.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,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 * Popover CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: 'border-box';\n  }\n\n  .popover__title {\n    display: block;\n    color: var(--Dark-Normal, var(--Color-Text-Default, #000));\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: Colfax;\n    font-size: var(--nile-type-scale-4);\n    font-style: normal;\n    font-weight: 500;\n    line-height: var(--nile-type-scale-4); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .popover__box {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    min-width: 352px;\n    gap: var(--nile-type-scale-4);\n    padding: var(--nile-type-scale-4);\n    border-radius: var(--nile-radius-base-standard);\n    background-color:var(--nile-colors-white-base);\n  }\n\n  .popover__action {\n    align-self: end;\n    display: inline;\n  }\n\n  nile-popup {\n    --arrow-size: 18px;\n    --arrow-color: #ffff;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,46 @@
+/**
+ * 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 { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popover
+ *
+ */
+export declare class NilePopover extends LitElement {
+    /**
+     * The styles for Popover
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    /**
+     * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** The distance in pixels from which to offset the popover away from its target. */
+    distance: number;
+    /** Gives the title to the popover */
+    title: string;
+    private isShow;
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    private handleDocumentClick;
+    render(): TemplateResult;
+}
+export default NilePopover;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-popover': NilePopover;
+    }
+}

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

@@ -0,0 +1,114 @@
+/**
+ * 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 { LitElement, html, property, } from 'lit-element';
+import { customElement, state } from 'lit/decorators.js';
+import { styles } from './nile-popover.css';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popover
+ *
+ */
+let NilePopover = class NilePopover extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip
+         * inside of the viewport.
+         */
+        this.placement = 'top';
+        /** The distance in pixels from which to offset the popover away from its target. */
+        this.distance = 18;
+        /** Gives the title to the popover */
+        this.title = '';
+        this.isShow = false;
+        this.arrowPlacement = 'anchor';
+        this.handleClick = () => {
+            this.isShow = !this.isShow;
+        };
+        this.handleDocumentClick = () => {
+            if (this.isShow) {
+                this.isShow = !this.isShow;
+            }
+        };
+        /* #endregion */
+    }
+    /**
+     * The styles for Popover
+     * @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
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    render() {
+        return html `
+      <nile-popup
+        active
+        ?arrow="${this.title ? this.isShow : false}"
+        distance="${this.distance}"
+        placement="${this.placement}"
+        @click=${(e) => e.stopPropagation()}
+        arrowPlacement="${this.arrowPlacement}"
+        flip
+        shift
+      >
+        <slot
+          slot="anchor"
+          name="anchor"
+          aria-describedby="tooltip"
+          @click=${this.handleClick}
+        ></slot>
+        ${this.title && this.isShow
+            ? html ` <div
+              part="popover"
+              class="popover__box"
+            >
+              <slot name="title" class="popover__title">${this.title}</slot>
+              <slot></slot>
+              <slot name="action" class="popover__action"> </slot>
+            </div>`
+            : html ``}
+      </nile-popup>
+    `;
+    }
+};
+__decorate([
+    property()
+], NilePopover.prototype, "placement", void 0);
+__decorate([
+    property({ type: Number })
+], NilePopover.prototype, "distance", void 0);
+__decorate([
+    property({ type: String })
+], NilePopover.prototype, "title", void 0);
+__decorate([
+    state()
+], NilePopover.prototype, "isShow", void 0);
+__decorate([
+    property({ attribute: 'arrow-placement' })
+], NilePopover.prototype, "arrowPlacement", void 0);
+NilePopover = __decorate([
+    customElement('nile-popover')
+], NilePopover);
+export { NilePopover };
+export default NilePopover;
+//# sourceMappingURL=nile-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-popover.js","sourceRoot":"","sources":["../../../src/nile-popover/nile-popover.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAI5C;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QASL;;;WAGG;QACS,cAAS,GAYJ,KAAK,CAAC;QAEvB,oFAAoF;QACxD,aAAQ,GAAG,EAAE,CAAC;QAE1C,qCAAqC;QACT,UAAK,GAAG,EAAE,CAAC;QAEtB,WAAM,GAAG,KAAK,CAAC;QAEY,mBAAc,GAI3C,QAAQ,CAAC;QAqBhB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B;QACH,CAAC,CAAC;QAkCF,gBAAgB;IAClB,CAAC;IAtGC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAkCD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAClE,CAAC;IAYM,MAAM;QACX,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;oBAC9B,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;iBAClB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;0BACxB,IAAI,CAAC,cAAc;;;;;;;;mBAQ1B,IAAI,CAAC,WAAW;;UAEzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;;;;0DAI0C,IAAI,CAAC,KAAK;;;mBAGjD;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAC;IACJ,CAAC;CAGF,CAAA;AA1Fa;IAAX,QAAQ,EAAE;8CAYY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAGd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;AAE9B;IAAR,KAAK,EAAE;2CAAwB;AAEY;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mDAInB;AAvCb,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuGvB;SAvGY,WAAW;AAyGxB,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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { styles } from './nile-popover.css';\nimport type NilePopup from '../nile-popup/nile-popup';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popover\n *\n */\n@customElement('nile-popover')\nexport class NilePopover extends LitElement {\n  /**\n   * The styles for Popover\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  /**\n   * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** The distance in pixels from which to offset the popover away from its target. */\n  @property({ type: Number }) distance = 18;\n\n  /** Gives the title to the popover */\n  @property({ type: String }) title = '';\n\n  @state() private isShow = false;\n\n  @property({ attribute: 'arrow-placement' }) arrowPlacement:\n    | 'start'\n    | 'end'\n    | 'center'\n    | 'anchor' = 'anchor';\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleClick = () => {\n    this.isShow = !this.isShow;\n  };\n\n  private handleDocumentClick = () => {\n    if (this.isShow) {\n      this.isShow = !this.isShow;\n    }\n  };\n\n  public render(): TemplateResult {\n    return html`\n      <nile-popup\n        active\n        ?arrow=\"${this.title ? this.isShow : false}\"\n        distance=\"${this.distance}\"\n        placement=\"${this.placement}\"\n        @click=${(e: Event) => e.stopPropagation()}\n        arrowPlacement=\"${this.arrowPlacement}\"\n        flip\n        shift\n      >\n        <slot\n          slot=\"anchor\"\n          name=\"anchor\"\n          aria-describedby=\"tooltip\"\n          @click=${this.handleClick}\n        ></slot>\n        ${this.title && this.isShow\n          ? html` <div\n              part=\"popover\"\n              class=\"popover__box\"\n            >\n              <slot name=\"title\" class=\"popover__title\">${this.title}</slot>\n              <slot></slot>\n              <slot name=\"action\" class=\"popover__action\"> </slot>\n            </div>`\n          : html``}\n      </nile-popup>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NilePopover;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popover': NilePopover;\n  }\n}\n"]}

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

@@ -119,5 +119,10 @@ export const styles = css `
     font-size: var(--nile-type-scale-3);
     margin-top: 2px;
   }
+  .radio__label_border {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid var(--Neutral-Normal, #E5E9EB);
+  }
 `;
 //# sourceMappingURL=nile-radio.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-radio.css.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GxB,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 * Radio CSS\n */\nexport const styles = css`\n\n\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n    margin: 10px 0;\n    align-items: center;\n  }\n\n  .radio--medium {\n    --toggle-size: 14px;\n    font-size: 14px;\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: var(--nile-colors-primary-600);\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-colors-neutral-700);\n    border-radius: 50%;\n    background-color: var(--nile-colors-white-base);\n    color: transparent;\n    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,\n    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-600);\n    background: var(--nile-colors-primary-100);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--nile-colors-primary-600);\n    border: 1px solid var(--nile-colors-primary-600);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio__checked-icon:hover {\n    background-color: var(--nile-colors-primary-900);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    border-color: 1px solid var(--nile-colors-neutral-500);\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900);\n    line-height: var(--nile-type-scale-3);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    font-size: var(--nile-type-scale-3);\n    margin-top: 2px;\n  }\n`;\n"]}
+{"version":3,"file":"nile-radio.css.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHxB,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 * Radio CSS\n */\nexport const styles = css`\n\n\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n    margin: 10px 0;\n    align-items: center;\n  }\n\n  .radio--medium {\n    --toggle-size: 14px;\n    font-size: 14px;\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: var(--nile-colors-primary-600);\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-colors-neutral-700);\n    border-radius: 50%;\n    background-color: var(--nile-colors-white-base);\n    color: transparent;\n    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,\n    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-600);\n    background: var(--nile-colors-primary-100);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--nile-colors-primary-600);\n    border: 1px solid var(--nile-colors-primary-600);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio__checked-icon:hover {\n    background-color: var(--nile-colors-primary-900);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    border-color: 1px solid var(--nile-colors-neutral-500);\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900);\n    line-height: var(--nile-type-scale-3);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    font-size: var(--nile-type-scale-3);\n    margin-top: 2px;\n  }\n  .radio__label_border {\n    padding: 0.75rem;\n    border-radius: 4px;\n    border: 1px solid var(--Neutral-Normal, #E5E9EB);\n  }\n`;\n"]}

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

@@ -36,6 +36,8 @@ export declare class NileRadio extends NileElement {
     size: 'small' | 'medium' | 'large';
     /** Disables the radio. */
     disabled: boolean;
+    /** The radio's labelborder. */
+    islabelborder: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private addEventListeners;

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

@@ -42,6 +42,8 @@ let NileRadio = class NileRadio extends NileElement {
         this.size = 'medium';
         /** Disables the radio. */
         this.disabled = false;
+        /** The radio's labelborder. */
+        this.islabelborder = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -107,6 +109,7 @@ let NileRadio = class NileRadio extends NileElement {
             'radio--disabled': this.disabled,
             'radio--focused': this.hasFocus,
             'radio--medium': this.size === 'medium',
+            'radio__label_border': this.islabelborder
         })}
       >
         <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
@@ -136,6 +139,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileRadio.prototype, "islabelborder", void 0);
 __decorate([
     watch('checked')
 ], NileRadio.prototype, "handleCheckedChange", null);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-radio.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.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 { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-radio.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { state } from 'lit/decorators.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-radio\n *\n *\n* @dependency nile-icon\n *\n * @slot - The radio's label.\n *\n * @event blur - Emitted when the control loses focus.\n * @event focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\n@customElement('nile-radio')\nexport class NileRadio extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string = '';\n\n  /** The radio's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n\n    this.setInitialAttributes();\n    this.addEventListeners();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n    this.emit('nile-destroy');\n  }\n\n  private addEventListeners() {\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  private removeEventListeners() {\n    this.removeEventListener('blur', this.handleBlur);\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('focus', this.handleFocus);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('nile-blur', {\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('nile-focus', {\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--medium': this.size === 'medium',\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <span class=\"radio__checked-icon\"></span> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default NileRadio;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-radio': NileRadio;\n  }\n}\n"]}
+{"version":3,"file":"nile-radio.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.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 { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-radio.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { state } from 'lit/decorators.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-radio\n *\n *\n* @dependency nile-icon\n *\n * @slot - The radio's label.\n *\n * @event blur - Emitted when the control loses focus.\n * @event focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\n@customElement('nile-radio')\nexport class NileRadio extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string = '';\n\n  /** The radio's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The radio's labelborder. */\n  @property({ type: Boolean, reflect: true }) islabelborder = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n\n    this.setInitialAttributes();\n    this.addEventListeners();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n    this.emit('nile-destroy');\n  }\n\n  private addEventListeners() {\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  private removeEventListeners() {\n    this.removeEventListener('blur', this.handleBlur);\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('focus', this.handleFocus);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('nile-blur', {\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('nile-focus', {\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--medium': this.size === 'medium',\n          'radio__label_border':this.islabelborder\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <span class=\"radio__checked-icon\"></span> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default NileRadio;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-radio': NileRadio;\n  }\n}\n"]}

package/dist/src/nile-radio-group/nile-radio-group.css.js

@@ -7,7 +7,7 @@ export default css `
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: 1.3rem !important;
+    margin-right: 24px !important;
   }
 
   .form-control {

package/dist/src/nile-radio-group/nile-radio-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-radio-group.css.js","sourceRoot":"","sources":["../../../src/nile-radio-group/nile-radio-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n\n  :host {\n    display: block;\n  }\n\n  .form-control--inline-radio ::slotted(nile-radio) {\n    display: inline-block;\n    margin-right: 1.3rem !important;\n  }\n\n  .form-control {\n    border: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .form-control__label {\n    padding: 0;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .radio-group--required .radio-group__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n"]}
+{"version":3,"file":"nile-radio-group.css.js","sourceRoot":"","sources":["../../../src/nile-radio-group/nile-radio-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n\n  :host {\n    display: block;\n  }\n\n  .form-control--inline-radio ::slotted(nile-radio) {\n    display: inline-block;\n    margin-right: 24px !important;\n  }\n\n  .form-control {\n    border: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  .form-control__label {\n    padding: 0;\n    font-size: 14px;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .radio-group--required .radio-group__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n"]}