@aquera/nile-elements 0.1.58-beta-1.0 → 0.1.58

package/dist/src/nile-table-header-item/nile-table-header-item.js

@@ -57,95 +57,51 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
         this.emit('nile-search', { value: e.detail.value });
     }
     render() {
-        if (this.resizable) {
-            return html `
-        <div class="header__item__wrapper" part="nile__table-header-cell">
-          <div class="headers">
-            <slot> </slot>
-            ${this.havesort && this.sorting_ct % 3 === 0
-                ? html `<nile-icon
-                  name="sortdown"
-                  size="16"
-                  @click=${this.handleSort}
-                  class="hover__arrow"
-                ></nile-icon>`
-                : null}
-            ${this.havesort && this.sorting_ct % 3 === 1
-                ? html `<nile-icon
-                  name="sortdown"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>`
-                : null}
-            ${this.havesort && this.sorting_ct % 3 === 2
-                ? html `<nile-icon
-                  name="sortup"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>`
-                : null}
-            ${this.iconName
-                ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-                : html ``}
-            ${this.havefilter
-                ? html ` <nile-popover title="Filter" placement="bottom">
-                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                  <nile-input
-                    placeholder="Search"
-                    @nile-input=${this.handleSearch}
-                    part="filter__search"
-                  ></nile-input>
-                  <slot name="filter__content" part="filter__content"></slot>
-                </nile-popover>`
-                : html ``}
-          </div>
-          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
-        </div>`;
-        }
-        else {
-            return html `
-        <div class="header__item__wrapper" part="nile__table-header-cell">
-          <div class="headers">
-            <slot> </slot>
-            ${this.havesort && this.sorting_ct % 3 === 0
-                ? html `<nile-icon
-                  name="sortdown"
-                  size="16"
-                  @click=${this.handleSort}
-                  class="hover__arrow"
-                ></nile-icon>`
-                : null}
-            ${this.havesort && this.sorting_ct % 3 === 1
-                ? html `<nile-icon
-                  name="sortdown"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>`
-                : null}
-            ${this.havesort && this.sorting_ct % 3 === 2
-                ? html `<nile-icon
-                  name="sortup"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>`
-                : null}
-            ${this.iconName
-                ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
-                : html ``}
-            ${this.havefilter
-                ? html ` <nile-popover title="Filter" placement="bottom">
-                  <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
-                  <nile-input
-                    placeholder="Search"
-                    @nile-input=${this.handleSearch}
-                    part="filter__search"
-                  ></nile-input>
-                  <slot name="filter__content" part="filter__content"></slot>
-                </nile-popover>`
-                : html ``}
-          </div>
-        </div>`;
-        }
+        return html `
+      <div class="header__item__wrapper" part="nile__table-header-cell">
+        <div class="headers">
+          <slot> </slot>
+          ${this.havesort && this.sorting_ct % 3 === 0
+            ? html `<nile-icon
+                name="sortdown"
+                size="16"
+                @click=${this.handleSort}
+                class="hover__arrow"
+              ></nile-icon>`
+            : null}
+          ${this.havesort && this.sorting_ct % 3 === 1
+            ? html `<nile-icon
+                name="sortdown"
+                size="16"
+                @click=${this.handleSort}
+              ></nile-icon>`
+            : null}
+          ${this.havesort && this.sorting_ct % 3 === 2
+            ? html `<nile-icon
+                name="sortup"
+                size="16"
+                @click=${this.handleSort}
+              ></nile-icon>`
+            : null}
+          ${this.iconName
+            ? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+            : html ``}
+          ${this.havefilter
+            ? html ` <nile-popover title="Filter" placement="bottom">
+                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                <nile-input
+                  placeholder="Search"
+                  @nile-input=${this.handleSearch}
+                  part="filter__search"
+                ></nile-input>
+                <slot name="filter__content" part="filter__content"></slot>
+              </nile-popover>`
+            : html ``}
+        </div>
+        ${this.resizable
+            ? html `<div class="resizer" @mousedown=${this.handleResizeStart}></div>`
+            : null}
+      </div>`;
     }
 };
 __decorate([

package/dist/src/nile-table-header-item/nile-table-header-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.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  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\nimport { createResizeHandler } from '../internal/resizable-table-helper';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\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  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havefilter = false;\n\n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  /** Enables the resize functionality. */\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  @state() sorting_ct = 0;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleSort(e: any) {\n    this.sorting_ct++;\n    let curr_sort_string = this.hasSlotController.host.innerHTML;\n    const order = ['normal', 'asc', 'des'];\n    this.emit('nile-click-sort', {\n      value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n    });\n  }\n\n  private handleSearch(e: any) {\n    this.emit('nile-search', { value: e.detail.value });\n  }\n\n  private handleResizeStart = createResizeHandler(this, 50);\n\n  public render(): TemplateResult {\n    if (this.resizable) {\n      return html`\n        <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n          <div class=\"headers\">\n            <slot> </slot>\n            ${this.havesort && this.sorting_ct % 3 === 0\n              ? html`<nile-icon\n                  name=\"sortdown\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                  class=\"hover__arrow\"\n                ></nile-icon>`\n              : null}\n            ${this.havesort && this.sorting_ct % 3 === 1\n              ? html`<nile-icon\n                  name=\"sortdown\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>`\n              : null}\n            ${this.havesort && this.sorting_ct % 3 === 2\n              ? html`<nile-icon\n                  name=\"sortup\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>`\n              : null}\n            ${this.iconName\n              ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n              : html``}\n            ${this.havefilter\n              ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                  <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                  <nile-input\n                    placeholder=\"Search\"\n                    @nile-input=${this.handleSearch}\n                    part=\"filter__search\"\n                  ></nile-input>\n                  <slot name=\"filter__content\" part=\"filter__content\"></slot>\n                </nile-popover>`\n              : html``}\n          </div>\n          <div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>\n        </div>`;\n    } else {\n      return html`\n        <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n          <div class=\"headers\">\n            <slot> </slot>\n            ${this.havesort && this.sorting_ct % 3 === 0\n              ? html`<nile-icon\n                  name=\"sortdown\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                  class=\"hover__arrow\"\n                ></nile-icon>`\n              : null}\n            ${this.havesort && this.sorting_ct % 3 === 1\n              ? html`<nile-icon\n                  name=\"sortdown\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>`\n              : null}\n            ${this.havesort && this.sorting_ct % 3 === 2\n              ? html`<nile-icon\n                  name=\"sortup\"\n                  size=\"16\"\n                  @click=${this.handleSort}\n                ></nile-icon>`\n              : null}\n            ${this.iconName\n              ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n              : html``}\n            ${this.havefilter\n              ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                  <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                  <nile-input\n                    placeholder=\"Search\"\n                    @nile-input=${this.handleSearch}\n                    part=\"filter__search\"\n                  ></nile-input>\n                  <slot name=\"filter__content\" part=\"filter__content\"></slot>\n                </nile-popover>`\n              : html``}\n          </div>\n        </div>`;\n    }\n  }\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.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  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\nimport { createResizeHandler } from '../internal/resizable-table-helper';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n  private readonly hasSlotController = new HasSlotController(this, '[default]');\n  /**\n   * The styles for TableHeaderItem\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  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havesort = false;\n\n  /** Enables the sort functionality. */\n  @property({ type: Boolean, reflect: true }) havefilter = false;\n\n  /** Places the icon . */\n  @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n    '';\n\n  /** Enables the resize functionality. */\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  @state() sorting_ct = 0;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  private handleSort(e: any) {\n    this.sorting_ct++;\n    let curr_sort_string = this.hasSlotController.host.innerHTML;\n    const order = ['normal', 'asc', 'des'];\n    this.emit('nile-click-sort', {\n      value: { curr_sort_string, order: order[this.sorting_ct % 3] },\n    });\n  }\n\n  private handleSearch(e: any) {\n    this.emit('nile-search', { value: e.detail.value });\n  }\n\n  private handleResizeStart = createResizeHandler(this, 50);\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n        <div class=\"headers\">\n          <slot> </slot>\n          ${this.havesort && this.sorting_ct % 3 === 0\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n                class=\"hover__arrow\"\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 1\n            ? html`<nile-icon\n                name=\"sortdown\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.havesort && this.sorting_ct % 3 === 2\n            ? html`<nile-icon\n                name=\"sortup\"\n                size=\"16\"\n                @click=${this.handleSort}\n              ></nile-icon>`\n            : null}\n          ${this.iconName\n            ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n            : html``}\n          ${this.havefilter\n            ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n                <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n                <nile-input\n                  placeholder=\"Search\"\n                  @nile-input=${this.handleSearch}\n                  part=\"filter__search\"\n                ></nile-input>\n                <slot name=\"filter__content\" part=\"filter__content\"></slot>\n              </nile-popover>`\n            : html``}\n        </div>\n        ${this.resizable \n          ? html`<div class=\"resizer\" @mousedown=${this.handleResizeStart}></div>`\n          : null}\n      </div>`;\n  }\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-table-header-item': NileTableHeaderItem;\n  }\n}\n"]}