@aquera/nile-elements 0.0.72 → 0.0.73

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.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  nothing,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n\n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n\n  static styles: CSSResultGroup = styles;\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Sublabel, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  @property({ type: Boolean }) showHelpText = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          checked: this.checked,\n        },\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n\n  private handleInput() {\n    this.emit('input');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n  }\n\n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n\n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate\n        })}\n      >\n        <span\n          part=\"control${this.checked ? ' control--checked' : ''}${this\n            .indeterminate\n            ? ' control--indeterminate'\n            : ''}\"\n          class=\"checkbox__control\"\n        >\n          <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${ this.title }\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n          ${this.checked\n            ? html`\n                <nile-icon\n                  part=\"checked-icon\"\n                  class=\"checkbox__checked-icon\"\n                  color=\"white\"\n                  library=\"system\"\n                  name=\"tick\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n          ${!this.checked && this.indeterminate\n            ? html`\n                <nile-icon\n                  part=\"indeterminate-icon\"\n                  class=\"checkbox__indeterminate-icon\"\n                  library=\"system\"\n                  color=\"white\"\n                  name=\"minus\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n        </span>\n\n        <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n          ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n          ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\n          <slot></slot>\n        </div>\n      </label>\n\n      ${hasHelpText\n        ? html`\n            <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n              <nile-icon\n                name=\"question\"\n                class=\"checkbox__helptext-icon\"\n              ></nile-icon>\n            </nile-tooltip>\n          `\n        : nothing}\n      ${hasErrorMessage\n        ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n        : nothing}\n    `;\n  }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}\n"]}
+{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.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  nothing,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n\n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n\n  static styles: CSSResultGroup = styles;\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Sublabel, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  @property({ type: Boolean }) showHelpText = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @query('.checkbox__label__text') labelContainer:HTMLElement;\n\n  @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          checked: this.checked,\n        },\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n\n  private handleInput() {\n    this.emit('input');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n    this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';\n  }\n\n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n\n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate\n        })} \n      >\n        <div class=\"checkbox__icon__container\">\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this\n              .indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n            <input\n              class=\"checkbox__input\"\n              type=\"checkbox\"\n              title=${ this.title }\n              name=${this.name}\n              value=${ifDefined(this.value)}\n              .indeterminate=${live(this.indeterminate)}\n              .checked=${live(this.checked)}\n              .disabled=${this.disabled}\n              .required=${this.required}\n              aria-checked=${this.checked ? 'true' : 'false'}\n              @click=${this.handleClick}\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              @focus=${this.handleFocus}\n            />\n            ${this.checked\n              ? html`\n                  <nile-icon\n                    part=\"checked-icon\"\n                    class=\"checkbox__checked-icon\"\n                    color=\"white\"\n                    library=\"system\"\n                    name=\"tick\"\n                    size=\"12\"\n                  ></nile-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <nile-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    color=\"white\"\n                    name=\"minus\"\n                    size=\"12\"\n                  ></nile-icon>\n                `\n              : ''}\n          </span>\n        </div>\n\n        <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n          ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n          ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\n          <slot></slot>\n        </div>\n      </label>\n\n      ${hasHelpText\n        ? html`\n            <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n              <nile-icon\n                name=\"question\"\n                class=\"checkbox__helptext-icon\"\n              ></nile-icon>\n            </nile-tooltip>\n          `\n        : nothing}\n      ${hasErrorMessage\n        ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n        : nothing}\n    `;\n  }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}\n"]}