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

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

@@ -27,7 +27,7 @@ export declare class NileChip extends NileElement {
     disabled: boolean;
     /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
     helpText: string;
-    private autoCompleteOptions;
+    autoCompleteOptions: any[];
     private handleSelect;
     private handleRemove;
     private handleInputChange;

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

@@ -39,16 +39,17 @@ let NileChip = class NileChip extends NileElement {
         return [styles];
     }
     handleSelect(event) {
-        // Emit a custom event with the selected value
-        this.emit('nile-chip-change', { value: event.detail.value });
         // 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
@@ -61,6 +62,7 @@ let NileChip = class NileChip extends NileElement {
         if (event.key === 'Enter' && this.inputValue) {
             this.tags = [...this.tags, this.inputValue];
             this.resetInput();
+            this.emit('nile-chip-change', { value: this.tags });
         }
     }
     handleFocus() {
@@ -167,6 +169,9 @@ __decorate([
 __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);

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

@@ -1 +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  private autoCompleteOptions: string[] = [];\n\n  private handleSelect(event: CustomEvent<CustomEventDetail>) {\n    // Emit a custom event with the selected value\n    this.emit('nile-chip-change', { value: event.detail.value });\n\n    // Add the selected value to the tags array\n    this.tags = [...this.tags, event.detail.value];\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  }\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    }\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"]}
+{"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-menu-item/nile-menu-item.js

@@ -121,7 +121,7 @@ let NileMenuItem = class NileMenuItem extends NileElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <nile-icon name="check" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon name="tick" library="system" aria-hidden="true"></nile-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -131,7 +131,7 @@ let NileMenuItem = class NileMenuItem extends NileElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span part="submenu-icon" class="menu-item__chevron">
-          <nile-icon name="chevron-right" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon name="arrowright" library="system" aria-hidden="true"></nile-icon>
         </span>
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-menu-item.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport { getTextContent } from '../internal/slot';\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-menu-item\n *\n * @summary Menu items provide options for the user to pick from in a menu.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n */\n\n@customElement('nile-menu-item')\nexport class NileMenuItem extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @query('.menu-item') menuItem: HTMLElement;\n\n  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n  @property() type: 'normal' | 'checkbox' = 'normal';\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @property() value = '';\n\n  /** Draws the menu item in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n    if (this.checked && this.type !== 'checkbox') {\n      this.checked = false;\n      console.error('The checked attribute can only be used on menu items with type=\"checkbox\"', this);\n      return;\n    }\n\n    // Only checkbox types can receive the aria-checked attribute\n    if (this.type === 'checkbox') {\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    if (this.type === 'checkbox') {\n      this.setAttribute('role', 'menuitemcheckbox');\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.setAttribute('role', 'menuitem');\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  getTextLabel() {\n    return getTextContent(this.defaultSlot);\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--has-submenu': false // reserved for future use\n        })}\n      >\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <nile-icon name=\"check\" library=\"system\" aria-hidden=\"true\"></nile-icon>\n        </span>\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot part=\"label\" class=\"menu-item__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n          <nile-icon name=\"chevron-right\" library=\"system\" aria-hidden=\"true\"></nile-icon>\n        </span>\n      </div>\n    `;\n  }\n}\n\nexport default NileMenuItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu-item': NileMenuItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-menu-item.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-menu-item.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport { getTextContent } from '../internal/slot';\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-menu-item\n *\n * @summary Menu items provide options for the user to pick from in a menu.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n */\n\n@customElement('nile-menu-item')\nexport class NileMenuItem extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @query('.menu-item') menuItem: HTMLElement;\n\n  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n  @property() type: 'normal' | 'checkbox' = 'normal';\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @property() value = '';\n\n  /** Draws the menu item in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n    if (this.checked && this.type !== 'checkbox') {\n      this.checked = false;\n      console.error('The checked attribute can only be used on menu items with type=\"checkbox\"', this);\n      return;\n    }\n\n    // Only checkbox types can receive the aria-checked attribute\n    if (this.type === 'checkbox') {\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    if (this.type === 'checkbox') {\n      this.setAttribute('role', 'menuitemcheckbox');\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.setAttribute('role', 'menuitem');\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  getTextLabel() {\n    return getTextContent(this.defaultSlot);\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--has-submenu': false // reserved for future use\n        })}\n      >\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <nile-icon name=\"tick\" library=\"system\" aria-hidden=\"true\"></nile-icon>\n        </span>\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot part=\"label\" class=\"menu-item__label\" @slotchange=${this.handleDefaultSlotChange}></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n          <nile-icon name=\"arrowright\" library=\"system\" aria-hidden=\"true\"></nile-icon>\n        </span>\n      </div>\n    `;\n  }\n}\n\nexport default NileMenuItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu-item': NileMenuItem;\n  }\n}\n"]}