@aquera/nile-elements 2.0.18 → 2.0.19

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js

@@ -27,6 +27,11 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
          * @slot This is a slot test
          */
         this.separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
+        /**
+         * Visual style of the item. `outlined` wraps the text in an outlined chip.
+         * Set automatically from the parent `nile-breadcrumb`'s `variant`.
+         */
+        this.variant = 'default';
         /* #endregion */
     }
     /**
@@ -48,6 +53,7 @@ let NileBreadcrumbItem = class NileBreadcrumbItem extends NileElement {
         class=${classMap({
             'nile-breadcrumb-item__slot-text': !this.isLast,
             'nile-breadcrumb-item__last-slot-text': this.isLast,
+            'nile-breadcrumb-item--outlined': this.variant === 'outlined',
         })}
         @click=${this.handleClick}
         >
@@ -73,6 +79,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileBreadcrumbItem.prototype, "separator", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileBreadcrumbItem.prototype, "variant", void 0);
 NileBreadcrumbItem = __decorate([
     customElement('nile-breadcrumb-item')
 ], NileBreadcrumbItem);

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAEyB,cAAS,GAAG,4DAA4D,CAAC;QAkCrG,gBAAgB;IAClB,CAAC;IAtDC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAeO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;SACpD,CAAC;iBACO,IAAI,CAAC,WAAW;;;;;eAKlB,IAAI,CAAC,SAAS;qBACR,IAAI,CAAC,SAAS;;;gBAGnB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AA9CkB;IAAhB,KAAK,EAAE;kDAAwB;AAWJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0E;AApB1F,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAuD9B;;AAED,eAAe,kBAAkB,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  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\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  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';\n\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n    <div part=\"item\"\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n        })}\n        @click=${this.handleClick}\n        >\n        <slot></slot>\n      </div>\n      <nile-icon\n        name=${this.separator}\n        aria-label=${this.separator}\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-breadcrumb-item.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QASY,WAAM,GAAG,KAAK,CAAC;QAEhC,gBAAgB;QAEhB,qBAAqB;QAErB;;;WAGG;QAEyB,cAAS,GAAG,4DAA4D,CAAC;QAErG;;;WAGG;QACwC,YAAO,GAA2B,SAAS,CAAC;QAmCvF,gBAAgB;IAClB,CAAC;IA7DC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAqBO,WAAW;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC/B,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,iCAAiC,EAAE,CAAC,IAAI,CAAC,MAAM;YAC/C,sCAAsC,EAAE,IAAI,CAAC,MAAM;YACnD,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SAC9D,CAAC;iBACO,IAAI,CAAC,WAAW;;;;;eAKlB,IAAI,CAAC,SAAS;qBACR,IAAI,CAAC,SAAS;;;gBAGnB,QAAQ,CAAC;YACf,6BAA6B,EAAE,IAAI;YACnC,oCAAoC,EAAE,IAAI,CAAC,MAAM;SAClD,CAAC;;;KAGL,CAAC;IACJ,CAAC;CAGF,CAAA;AArDkB;IAAhB,KAAK,EAAE;kDAAwB;AAWJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA0E;AAM1D;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA6C;AA1B5E,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA8D9B;;AAED,eAAe,kBAAkB,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  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-breadcrumb-item.css';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile BreadCrumb Item component.\n *\n * @tag nile-breadcrumb-item\n *\n */\n@customElement('nile-breadcrumb-item')\nexport class NileBreadcrumbItem extends NileElement {\n  /**\n   * The styles for BreadcrumbItem\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  @state() private isLast = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n\n  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';\n\n  /**\n   * Visual style of the item. `outlined` wraps the text in an outlined chip.\n   * Set automatically from the parent `nile-breadcrumb`'s `variant`.\n   */\n  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';\n\n  private handleClick() {\n    if (this.isLast) {\n      return;\n    }\n    this.emit('nile-click-item');\n  }\n\n  public render(): TemplateResult {\n    return html`\n    <div part=\"item\"\n        class=${classMap({\n          'nile-breadcrumb-item__slot-text': !this.isLast,\n          'nile-breadcrumb-item__last-slot-text': this.isLast,\n          'nile-breadcrumb-item--outlined': this.variant === 'outlined',\n        })}\n        @click=${this.handleClick}\n        >\n        <slot></slot>\n      </div>\n      <nile-icon\n        name=${this.separator}\n        aria-label=${this.separator}\n        method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n        color=\"var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))\"\n        class=${classMap({\n          'nile-breadcrumb-item__arrow': true,\n          'nile-breadcrumb-item__arrow-hidden': this.isLast,\n        })}\n        size=\"14\"\n      ></nile-icon>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileBreadcrumbItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-breadcrumb-item': NileBreadcrumbItem;\n  }\n}\n"]}

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

@@ -233,6 +233,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     syncValueFromVirtualSelect(event: CustomEvent<{
         value?: string | string[];
     }>): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     setCheckBoxInOption(checked: boolean): void;

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

@@ -328,12 +328,27 @@ let NileSelect = class NileSelect extends NileElement {
         }
     }
     syncValueFromVirtualSelect(event) {
+        if (!this.showTooltip)
+            return;
         if (event.composedPath()[0] !== event.currentTarget)
             return;
         if (!event.detail || !('value' in event.detail))
             return;
         this.value = event.detail.value ?? (this.multiple ? [] : '');
     }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('showTooltip') &&
+            changedProperties.get('showTooltip') === false &&
+            this.showTooltip &&
+            this.enableVirtualScroll &&
+            !changedProperties.has('value')) {
+            const inner = this.shadowRoot?.querySelector('nile-virtual-select');
+            if (inner && inner.value !== this.value) {
+                this.value = inner.value;
+            }
+        }
+    }
     updated(_changedProperties) {
         if (_changedProperties.has('searchEnabled')) {
             this.updateGroupStickyOffsets();
@@ -900,7 +915,7 @@ let NileSelect = class NileSelect extends NileElement {
         this.selectedOptions = this.getAllOptions().filter(el => el.selected);
         // Update the value and display label
         if (this.multiple) {
-            const hasOptions = this.getAllOptions().length > 0;
+            const hasOptions = !this.showTooltip || this.getAllOptions().length > 0;
             if (hasOptions) {
                 this.value = this.selectedOptions.map(el => el.value);
                 if (this.placeholder && this.value.length === 0) {