@aquera/nile-elements 0.0.1-beta.3 → 0.0.1-beta.5

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

@@ -0,0 +1,180 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-chip.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../internal/slot';
+import NileElement from '../internal/nile-element';
+let NileChip = class NileChip extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+        this.tags = [];
+        this.inputValue = '';
+        this.isDropdownOpen = false;
+        /** The input's label. If you need to display HTML, use the `label` slot instead. */
+        this.label = '';
+        /** Adds a clear button when the input is not empty. */
+        this.acceptUserInput = false;
+        /** Adds a clear button when the input is not empty. */
+        this.clearable = false;
+        /** Placeholder text to show as a hint when the input is empty. */
+        this.placeholder = '';
+        /** Makes the input readonly. */
+        this.readonly = false;
+        /** Disables the input. */
+        this.disabled = false;
+        /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+        this.helpText = '';
+        // Auto-complete options
+        this.autoCompleteOptions = [];
+    }
+    static get styles() {
+        return [styles];
+    }
+    handleSelect(event) {
+        // Add the selected value to the tags array
+        this.tags = [...this.tags, event.detail.value];
+        // Emit a custom event with the selected value
+        this.emit('nile-chip-change', { value: this.tags });
+        // Reset the input field
+        this.resetInput();
+    }
+    handleRemove(value) {
+        // Remove the tag from the tags array
+        this.tags = this.tags.filter(tag => tag !== value);
+        this.emit('nile-chip-change', { value: this.tags });
+    }
+    handleInputChange(event) {
+        // Update the input value
+        this.inputValue = event.detail.value;
+    }
+    handleInputKeydown(event) {
+        if (!this.acceptUserInput) {
+            return;
+        }
+        if (event.key === 'Enter' && this.inputValue) {
+            this.tags = [...this.tags, this.inputValue];
+            this.resetInput();
+            this.emit('nile-chip-change', { value: this.tags });
+        }
+    }
+    handleFocus() {
+        this.isDropdownOpen = true;
+    }
+    resetInput() {
+        // Reset the input-related properties
+        this.inputValue = '';
+        this.isDropdownOpen = false;
+        this.autoComplete.value = '';
+        this.autoComplete.handleFocus();
+    }
+    render() {
+        // Check if slots are present
+        const hasLabelSlot = this.hasSlotController.test('label');
+        const hasHelpTextSlot = this.hasSlotController.test('help-text');
+        // Check if label and help text are present
+        const hasLabel = this.label ? true : !!hasLabelSlot;
+        const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+        return html `
+      <div
+        part="form-control"
+        class=${classMap({
+            'form-control': true,
+            'form-control--medium': true,
+            'form-control--has-label': hasLabel,
+            'form-control--has-help-text': hasHelpText,
+            'nile-chip--disabled': this.disabled,
+        })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div class="nile-chip">
+          ${this.tags.map(tag => html `
+            <nile-tag class="nile-chip__tags" @nile-remove=${() => this.handleRemove(tag)} removable pill>
+              ${tag}
+            </nile-tag>
+          `)}
+          <div class="nile-chip__auto-complete">
+            <nile-auto-complete
+              .allMenuItems=${this.autoCompleteOptions}
+              .value=${this.inputValue}
+              ?isDropdownOpen=${this.isDropdownOpen}
+              .noBorder=${true}
+              openOnFocus
+              .placeholder=${this.placeholder}
+              @nile-input=${this.handleInputChange}
+              @keydown=${this.handleInputKeydown}
+              @nile-focus=${this.handleFocus}
+              @nile-complete=${this.handleSelect}
+            ></nile-auto-complete>
+          </div>
+          <slot
+            name="help-text"
+            part="form-control-help-text"
+            id="help-text"
+            class="form-control__help-text"
+            aria-hidden=${hasHelpText ? 'false' : 'true'}
+          >
+            ${this.helpText}
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], NileChip.prototype, "tags", void 0);
+__decorate([
+    state()
+], NileChip.prototype, "inputValue", void 0);
+__decorate([
+    state()
+], NileChip.prototype, "isDropdownOpen", void 0);
+__decorate([
+    query('nile-auto-complete')
+], NileChip.prototype, "autoComplete", void 0);
+__decorate([
+    property()
+], NileChip.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "acceptUserInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "clearable", void 0);
+__decorate([
+    property()
+], NileChip.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'help-text' })
+], NileChip.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Array })
+], NileChip.prototype, "autoCompleteOptions", void 0);
+NileChip = __decorate([
+    customElement('nile-chip')
+], NileChip);
+export { NileChip };
+export default NileChip;
+//# sourceMappingURL=nile-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult\n} from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\n\ninterface CustomEventDetail {\n  value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n  @state() tags: string[] = [];\n\n  @state() inputValue: string = '';\n\n  @state() isDropdownOpen: boolean = false;\n\n  @query('nile-auto-complete') autoComplete!: any;\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) acceptUserInput = false;\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  // Auto-complete options\n  @property({ type: Array }) autoCompleteOptions : any[] = [];\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n\n    // Add the selected value to the tags array\n    this.tags = [...this.tags, event.detail.value];\n\n    // Emit a custom event with the selected value\n    this.emit('nile-chip-change', { value: this.tags });\n\n    // Reset the input field\n    this.resetInput();\n  }\n\n  private handleRemove(value: string) {\n    // Remove the tag from the tags array\n    this.tags = this.tags.filter(tag => tag !== value);\n    this.emit('nile-chip-change', { value: this.tags });\n\n  }\n\n  private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n    // Update the input value\n    this.inputValue = event.detail.value;\n  }\n\n  private handleInputKeydown(event: KeyboardEvent) {\n    if (!this.acceptUserInput) {\n      return;\n    }\n\n    if (event.key === 'Enter' && this.inputValue) {\n      this.tags = [...this.tags, this.inputValue];\n\n      this.resetInput();\n      this.emit('nile-chip-change', { value: this.tags });\n    }\n\n\n  }\n\n  private handleFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  private resetInput() {\n    // Reset the input-related properties\n    this.inputValue = '';\n    this.isDropdownOpen = false;\n    this.autoComplete.value = '';\n    this.autoComplete.handleFocus();\n  }\n\n  render() {\n    // Check if slots are present\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n    // Check if label and help text are present\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'nile-chip--disabled': this.disabled,\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"nile-chip\">\n          ${this.tags.map(tag => html`\n            <nile-tag class=\"nile-chip__tags\" @nile-remove=${() => this.handleRemove(tag)} removable pill>\n              ${tag}\n            </nile-tag>\n          `)}\n          <div class=\"nile-chip__auto-complete\">\n            <nile-auto-complete\n              .allMenuItems=${this.autoCompleteOptions}\n              .value=${this.inputValue}\n              ?isDropdownOpen=${this.isDropdownOpen}\n              .noBorder=${true}\n              openOnFocus\n              .placeholder=${this.placeholder}\n              @nile-input=${this.handleInputChange}\n              @keydown=${this.handleInputKeydown}\n              @nile-focus=${this.handleFocus}\n              @nile-complete=${this.handleSelect}\n            ></nile-auto-complete>\n          </div>\n          <slot\n            name=\"help-text\"\n            part=\"form-control-help-text\"\n            id=\"help-text\"\n            class=\"form-control__help-text\"\n            aria-hidden=${hasHelpText ? 'false' : 'true'}\n          >\n            ${this.helpText}\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { NileDropdown } from './nile-dropdown';

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+/**
+* 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';
+/**
+ * Dropdown CSS
+ */
+export const styles = css `
+:host {
+    display: inline-block;
+  }
+
+  .dropdown::part(popup) {
+    z-index: 900;
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    font-size: 1rem;
+    font-weight: 400;
+    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+    border-radius: 0.25rem;
+    pointer-events: none;
+  }
+
+  .dropdown--open .dropdown__panel {
+    display: block;
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(nile-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-dropdown.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dropdown.css.js","sourceRoot":"","sources":["../../../src/nile-dropdown/nile-dropdown.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+CxB,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 * Dropdown CSS\n */\nexport const styles = css`\n:host {\n    display: inline-block;\n  }\n\n  .dropdown::part(popup) {\n    z-index: 900;\n  }\n\n  .dropdown[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .dropdown[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .dropdown[data-current-placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .dropdown[data-current-placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .dropdown__trigger {\n    display: block;\n  }\n\n  .dropdown__panel {\n    font-size: 1rem;\n    font-weight: 400;\n    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);\n    border-radius: 0.25rem;\n    pointer-events: none;\n  }\n\n  .dropdown--open .dropdown__panel {\n    display: block;\n    pointer-events: all;\n  }\n\n  /* When users slot a menu, make sure it conforms to the popup's auto-size */\n  ::slotted(nile-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -0,0 +1,105 @@
+/**
+ * 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';
+import type { NileMenu } from '../nile-menu';
+import type { NilePopup } from '../nile-popup';
+import '../nile-popup';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-dropdown
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @dependency nile-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<nile-button>` element.
+ *
+ * @event nile-show - Emitted when the dropdown opens.
+ * @event nile-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event nile-hide - Emitted when the dropdown closes.
+ * @event nile-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+export declare class NileDropdown extends NileElement {
+    static styles: CSSResultGroup;
+    popup: NilePopup;
+    trigger: HTMLSlotElement;
+    panel: HTMLSlotElement;
+    /**
+     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+     */
+    open: boolean;
+    /**
+     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed 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';
+    /** Disables the dropdown so the panel will not open. */
+    disabled: boolean;
+    /**
+     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+     * dropdowns that allow for multiple interactions.
+     */
+    stayOpenOnSelect: boolean;
+    /**
+     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+     * components that use a dropdown internally.
+     */
+    containingElement?: HTMLElement;
+    /** The distance in pixels from which to offset the panel away from its trigger. */
+    distance: number;
+    noOpenOnClick: boolean;
+    /** The distance in pixels from which to offset the panel along its trigger. */
+    skidding: number;
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    focusOnTrigger(): void;
+    getMenu(): NileMenu | undefined;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDocumentKeyDown(event: KeyboardEvent): void;
+    handleDocumentMouseDown(event: MouseEvent): void;
+    handlePanelSelect(event: any): void;
+    handleTriggerClick(): void;
+    handleTriggerKeyDown(event: KeyboardEvent): void;
+    handleTriggerKeyUp(event: KeyboardEvent): void;
+    handleTriggerSlotChange(): void;
+    updateAccessibleTrigger(): void;
+    /** Shows the dropdown panel. */
+    show(): Promise<void>;
+    /** Hides the dropdown panel */
+    hide(): Promise<void>;
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    reposition(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
+    handleOpenChange(): Promise<void>;
+    render(): TemplateResult<1>;
+}
+export default NileDropdown;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-dropdown': NileDropdown;
+    }
+}