@aquera/nile-elements 0.0.69 → 0.0.71

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"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 } 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 * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\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  /**\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 toggleHelpText() {\n    this.showHelpText = !this.showHelpText;\n  }\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          'checkbox--medium': this.size === 'medium',\n        })}\n      >\n        <input\n          class=\"checkbox__input\"\n          type=\"checkbox\"\n          title=${\n            this\n              .title /* An empty title prevents browser validation tooltips from appearing on hover */\n          }\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\n        <span\n          part=\"control${this.checked ? ' control--checked' : ''}${this\n            .indeterminate\n            ? ' control--indeterminate'\n            : ''}\"\n          class=\"checkbox__control\"\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\">\n          ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n          ${this.label && 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        : ``}\n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}\n"],"names":["NileCheckbox","m","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","subLabel","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_d","_createClass","key","value","toggleHelpText","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","attribute","defaultValue","watch","waitUntilFirstUpdate","_export","customElement"],"mappings":"w3JAuDaA,4BACX,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,EACEC,KAAAA,CAAAA,UAAAA,MAAAA,CAAAA,EAOeC,KAAAA,CAAQC,UAAG,CAEhBD,CAAAA,KAAAA,CAAAE,KAAQ,CAAA,EAAA,CAGRF,KAAAA,CAAIG,IAAAA,CAAG,GAMUH,KAAAA,CAAII,IAAAA,CAAiC,QAGtBJ,CAAAA,KAAAA,CAAQK,QAAG,CAAA,CAAA,CAAA,CAGXL,KAAAA,CAAOM,OAAG,CAAA,CAAA,CAAA,CAGXN,KAAAA,CAAKO,KAAAA,CAAG,EAGgBP,CAAAA,KAAAA,CAAQQ,SACzE,EAM0CR,CAAAA,KAAAA,CAAaS,aAAG,CAAA,CAAA,CAAA,CAGnCT,KAAAA,CAAcU,cAAAA,CAAAA,CAAG,EAEWV,KAAAA,CAAQW,QAAAA,CAAG,EAEPX,CAAAA,KAAAA,CAAYY,YAAG,CAAA,EAAA,CAE3CZ,KAAAA,CAAYa,YAAG,CAAA,CAAA,CAAA,CAOfb,KAAAA,CAAIc,IAAAA,CAAG,EAGQd,CAAAA,KAAAA,CAAQe,UAAG,CAvDtD,QAAAC,KAAA,EAyDOC,SAAA,CAAApB,CAAA,CAAAqB,EAAA,SAAAC,YAAA,CAAAtB,CAAA,GAAAuB,GAAA,kBAAAC,KAAA,UAAAC,eAAA,CAAAA,CACNtB,IAAKa,CAAAA,YAAAA,CAAAA,CAAgBb,KAAKa,YAC3B,EAEO,GAAAO,GAAA,eAAAC,KAAA,UAAAE,YAAA,CAAAA,CACNvB,IAAKM,CAAAA,OAAAA,CAAAA,CAAWN,KAAKM,OACrBN,CAAAA,IAAAA,CAAKS,aAAgB,CAAA,CAAA,CAAA,CACrBT,IAAKwB,CAAAA,aAAAA,CACH,GAAIC,CAAAA,WAAY,CAAA,aAAA,CAAe,CAC7BC,QAAAA,CAAAA,CAAU,CACVC,CAAAA,OAAAA,CAAAA,CAAS,EACTC,MAAQ,CAAA,CACNtB,OAASN,CAAAA,IAAAA,CAAKM,OAIrB,CAAA,CAAA,CAAA,CAAA,EAEO,GAAAc,GAAA,cAAAC,KAAA,UAAAQ,WAAA,CACN7B,CAAAA,IAAAA,CAAKC,QAAW,CAAA,CAAA,CAAA,CAChBD,IAAK8B,CAAAA,IAAAA,CAAK,OACX,EAEO,GAAAV,GAAA,eAAAC,KAAA,UAAAU,YAAA,CACN/B,CAAAA,IAAAA,CAAK8B,IAAK,CAAA,OAAA,CACX,EAEO,GAAAV,GAAA,eAAAC,KAAA,UAAAW,YAAA,CAAAA,CACNhC,IAAKC,CAAAA,QAAAA,CAAAA,CAAW,CAChBD,CAAAA,IAAAA,CAAK8B,KAAK,OACX,CAAA,EAGD,GAAAV,GAAA,qBAAAC,KAAA,UAAAY,kBAAA,CAAAA,CACEjC,IAAKkC,CAAAA,KAAAA,CAAM5B,QAAUN,IAAKM,CAAAA,OAAAA,CAC1BN,IAAKkC,CAAAA,KAAAA,CAAMzB,aAAgBT,CAAAA,IAAAA,CAAKS,aACjC,EAGD,GAAAW,GAAA,SAAAC,KAAA,UAAAc,MAAA,CACEnC,CAAAA,IAAAA,CAAKkC,KAAMC,CAAAA,KAAAA,CAAAA,CACZ,EAGD,GAAAf,GAAA,SAAAC,KAAA,UAAAe,MAAMC,CACJrC,CAAAA,CAAAA,IAAAA,CAAKkC,KAAME,CAAAA,KAAAA,CAAMC,EAClB,EAGD,GAAAjB,GAAA,QAAAC,KAAA,UAAAiB,KAAA,CACEtC,CAAAA,IAAAA,CAAKkC,KAAMI,CAAAA,IAAAA,CAAAA,CACZ,EAED,GAAAlB,GAAA,qBAAAC,KAAA,UAAAkB,kBAAA,CAAAA,CACExC,IAAAA,CAAAA,eAAAA,CAAAA,CAAAA,CAAAA,SAAAA,4BAAAA,IAAAA,OACAC,IAAKwC,CAAAA,eAAAA,CAAAA,CAAAA,CACLxC,KAAK8B,IAAK,CAAA,WAAA,CACX,EAED,GAAAV,GAAA,wBAAAC,KAAA,UAAAoB,qBAAA,CACE1C,CAAAA,IAAAA,CAAAA,eAAAA,CAAAA,CAAAA,CAAAA,SAAAA,+BAAAA,IAAAA,OACAC,IAAK8B,CAAAA,IAAAA,CAAK,cACX,CAAA,EAED,GAAAV,GAAA,WAAAC,KAAA,UAAAqB,QAAQC,GACN5C,IAAAA,CAAAA,eAAAA,CAAAA,CAAAA,CAAAA,SAAAA,kBAAAA,IAAAA,MAAc4C,CACVA,EAAAA,CAAAA,CAAkBC,GAAI,CAAA,UAAA,CAAA,EACxB5C,KAAKwC,eAER,CAAA,CAAA,EAEO,GAAApB,GAAA,mBAAAC,KAAA,UAAAmB,gBAAA,CAAAA,CACFxC,IAAKW,CAAAA,QAAAA,CACPX,KAAK6C,SAAUC,CAAAA,GAAAA,CAAI,YAEnB9C,CAAAA,CAAAA,IAAAA,CAAK6C,SAAUE,CAAAA,MAAAA,CAAO,aAEzB,EAED,GAAA3B,GAAA,UAAAC,KAAA,UAAA2B,OAAA,CACE,CAAA,GAAMC,CAAAA,CAAcjD,CAAAA,CAAAA,CAAAA,IAAAA,CAAKW,SACnBuC,CAAkBlD,CAAAA,CAAAA,CAAAA,IAAAA,CAAKY,YAE7B,CAAA,MAAOuC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,mwBAGCC,CAAAA,CAAS,CACfC,QAAU,CAAA,CAAA,CAAA,CACV,mBAAqBvD,CAAAA,IAAAA,CAAKM,QAC1B,oBAAsBN,CAAAA,IAAAA,CAAKK,QAC3B,CAAA,mBAAA,CAAqBL,KAAKC,QAC1B,CAAA,yBAAA,CAA2BD,KAAKS,aAChC,CAAA,kBAAA,CAAkC,WAAdT,IAAKI,CAAAA,IAAAA,CAAAA,CAAAA,CAOvBJ,IACGE,CAAAA,KAAAA,CAEEF,IAAKG,CAAAA,IAAAA,CACJqD,CAAAA,CAAUxD,IAAKqB,CAAAA,KAAAA,CAAAA,CACNoC,CAAAA,CAAKzD,IAAKS,CAAAA,aAAAA,CAAAA,CAChBgD,CAAAA,CAAKzD,IAAKM,CAAAA,OAAAA,CAAAA,CACTN,IAAKK,CAAAA,QAAAA,CACLL,IAAKe,CAAAA,QAAAA,CACFf,IAAAA,CAAKM,QAAU,MAAS,CAAA,OAAA,CAC9BN,IAAKuB,CAAAA,WAAAA,CACLvB,IAAK+B,CAAAA,WAAAA,CACN/B,IAAK6B,CAAAA,UAAAA,CACJ7B,IAAKgC,CAAAA,WAAAA,CAIChC,IAAAA,CAAKM,OAAU,CAAA,mBAAA,CAAsB,EAAKN,CAAAA,IAAAA,CACtDS,cACC,yBACA,CAAA,EAAA,CAGFT,IAAAA,CAAKM,QACH6C,CAAI,CAAAO,gBAAA,GAAAA,gBAAA,CAAAL,sBAAA,0TAUJ,EAAA,EACDrD,IAAKM,CAAAA,OAAAA,EAAWN,IAAKS,CAAAA,aAAAA,CACpB0C,CAAI,CAAAQ,gBAAA,GAAAA,gBAAA,CAAAN,sBAAA,uUAUJ,EAAA,CAIFrD,IAAAA,CAAKO,KAAQ4C,CAAAA,CAAI,CAAAS,gBAAA,GAAAA,gBAAA,CAAAP,sBAAA,wDAAuCrD,IAAAA,CAAKO,KAAiB,EAAA,EAAA,CAC9EP,IAAAA,CAAKO,OAASP,IAAKQ,CAAAA,QAAAA,CAAW2C,CAAI,CAAAU,gBAAA,GAAAA,gBAAA,CAAAR,sBAAA,2DAA0CrD,KAAKQ,QAAoB,EAAA,EAAA,CAKzGyC,CAAAA,CACEE,CAAI,CAAAW,gBAAA,GAAAA,gBAAA,CAAAT,sBAAA,+PACuBrD,IAAKW,CAAAA,QAAAA,EAOhC,EAAA,CACFuC,CAAAA,CACEC,CAAI,CAAAY,gBAAA,GAAAA,gBAAA,CAAAV,sBAAA,sHAEGrD,IAAKY,CAAAA,YAAAA,EAGZ,EAAA,EAEP,CApOMhB,MALyBoE,CAAAA,GAKzBpE,CAAAA,CAAMqE,OAAmBA,CAECC,CAAAA,CAAAA,CAAA,CAAhCC,CAAM,CAAA,wBAAA,CAAA,CAAA,CAAkDvE,EAAAwE,SAAA,CAAA,OAAA,CAAA,IAAA,IAEhDF,CAAA,CAAA,CAARG,KAAiCzE,CAAAwE,CAAAA,SAAAA,CAAA,eAAA,EAEtBF,CAAAA,CAAAA,CAAAA,CAAA,CAAXI,CAAsB1E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwE,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAGXF,EAAA,CAAXI,CAAAA,CAAAA,CAAAA,CAAAA,CAAqB1E,EAAAwE,SAAA,CAAA,MAAA,CAAA,IAAA,IAGVF,CAAA,CAAA,CAAXI,KAA0B1E,CAAAwE,CAAAA,SAAAA,CAAA,YAAA,EAGEF,CAAAA,CAAAA,CAAAA,CAAA,CAA5BI,CAAS,CAAA,CAAEC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAsD3E,CAAAwE,CAAAA,SAAAA,CAAA,WAAA,EAG/BF,CAAAA,CAAAA,CAAAA,CAAA,CAA3CI,CAAS,CAAA,CAAEE,KAAMC,OAASF,CAAAA,OAAAA,CAAAA,CAAS,KAAyB3E,CAAAwE,CAAAA,SAAAA,CAAA,eAAA,EAGjBF,CAAAA,CAAAA,CAAAA,CAAA,CAA3CI,CAAS,CAAA,CAAEE,KAAMC,OAASF,CAAAA,OAAAA,CAAAA,CAAS,KAAwB3E,CAAAwE,CAAAA,SAAAA,CAAA,cAAA,EAGjBF,CAAAA,CAAAA,CAAAA,CAAA,CAA1CI,CAAS,CAAA,CAAEE,KAAME,MAAQH,CAAAA,OAAAA,CAAAA,CAAS,KAAmB3E,CAAAwE,CAAAA,SAAAA,CAAA,YAAA,EAGaF,CAAAA,CAAAA,CAAAA,CAAA,CAAlEI,CAAS,CAAA,CAAEE,KAAME,MAAQH,CAAAA,OAAAA,CAAAA,CAAS,CAAMI,CAAAA,SAAAA,CAAW,WAC/C/E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwE,UAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAMuCF,EAAA,CAA3CI,CAAAA,CAAS,CAAEE,IAAMC,CAAAA,OAAAA,CAASF,SAAS,CAA8B3E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwE,UAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAGzCF,EAAA,CAAxBU,CAAAA,CAAa,YAAkChF,CAAAwE,CAAAA,SAAAA,CAAA,qBAAA,EAEKF,CAAAA,CAAAA,CAAAA,CAAA,CAApDI,CAAS,CAAA,CAAEK,UAAW,WAAaJ,CAAAA,OAAAA,CAAAA,CAAS,KAAsB3E,CAAAwE,CAAAA,SAAAA,CAAA,eAAA,EAEVF,CAAAA,CAAAA,CAAAA,CAAA,CAAxDI,CAAS,CAAA,CAAEK,UAAW,eAAiBJ,CAAAA,OAAAA,CAAAA,CAAS,KAA0B3E,CAAAwE,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAE9CF,CAAA,CAAA,CAA5BI,EAAS,CAAEE,IAAAA,CAAMC,WAAgC7E,CAAAwE,CAAAA,SAAAA,CAAA,mBAAA,EAOrBF,CAAAA,CAAAA,CAAAA,CAAA,CAA5BI,CAAS,CAAA,CAAEC,SAAS,CAAkB3E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwE,UAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAGKF,EAAA,CAA3CI,CAAAA,CAAS,CAAEE,IAAAA,CAAMC,OAASF,CAAAA,OAAAA,CAAAA,CAAS,KAAyB3E,CAAAwE,CAAAA,SAAAA,CAAA,eAAA,EAmC7DF,CAAAA,CAAAA,CAAAA,CAAA,CADCW,CAAM,CAAA,CAAC,UAAW,eAAkB,CAAA,CAAA,CAAEC,sBAAsB,CAI5DlF,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAwE,UAAA,mBAAA,CAAA,IAAA,CAAA,CAAAW,OAAA,KAhGUnF,EAAYsE,CAAA,CAAA,CADxBc,CAAc,CAAA,eAAA,CAAA,CAAA,CACFpF"}
+{"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"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"],"names":["NileCheckbox","_p","b","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","subLabel","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_createClass","key","value","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","nothing","_templateObject7","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","attribute","defaultValue","watch","waitUntilFirstUpdate","_export","customElement"],"mappings":"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"}

package/dist/nile-checkbox/nile-checkbox.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    padding-top: 2px;\n    --toggle-size: var(--nile-type-scale-3);\n    font-size: var(--nile-type-scale-3);\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n"]))));}};});
+System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--only__subtitle{\n    align-items: center;\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-checkbox.css.cjs.js.map

package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"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 * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    padding-top: 2px;\n    --toggle-size: var(--nile-type-scale-3);\n    font-size: var(--nile-type-scale-3);\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"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 * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--only__subtitle{\n    align-items: center;\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-checkbox/nile-checkbox.css.esm.js

@@ -17,10 +17,8 @@ import{i as e}from"../index-0a3007c5.esm.js";const o=e`
     cursor: pointer;
   }
 
-  .checkbox--medium {
-    padding-top: 2px;
-    --toggle-size: var(--nile-type-scale-3);
-    font-size: var(--nile-type-scale-3);
+  .checkbox--only__subtitle{
+    align-items: center;
   }
 
   .checkbox__control {

package/dist/nile-checkbox/nile-checkbox.esm.js

@@ -1,29 +1,29 @@
-import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";import{query as i,state as s,customElement as o}from"lit/decorators.js";import{s as l}from"./nile-checkbox.css.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as h}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as a}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";import{n as m}from"../property-09139d3c.esm.js";import"lit";let p=class extends d{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.subLabel="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
+import{__decorate as e}from"tslib";import{x as t,A as i}from"../index-0a3007c5.esm.js";import{query as s,state as o,customElement as l}from"lit/decorators.js";import{s as c}from"./nile-checkbox.css.esm.js";import{classMap as h}from"lit/directives/class-map.js";import{d as r}from"../internal/default-value.esm.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as p}from"../internal/nile-element.esm.js";import{n as m}from"../property-09139d3c.esm.js";import"lit";let b=class extends p{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.subLabel="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,s=!!this.errorMessage;return t`
       <label
         part="base"
-        class=${c({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
+        class=${h({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate})}
       >
-        <input
-          class="checkbox__input"
-          type="checkbox"
-          title=${this.title}
-          name=${this.name}
-          value=${r(this.value)}
-          .indeterminate=${n(this.indeterminate)}
-          .checked=${n(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          aria-checked=${this.checked?"true":"false"}
-          @click=${this.handleClick}
-          @input=${this.handleInput}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        />
-
         <span
           part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
           class="checkbox__control"
         >
+          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+          <input
+            class="checkbox__input"
+            type="checkbox"
+            title=${this.title}
+            name=${this.name}
+            value=${n(this.value)}
+            .indeterminate=${a(this.indeterminate)}
+            .checked=${a(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked?"true":"false"}
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
           ${this.checked?t`
                 <nile-icon
                   part="checked-icon"
@@ -46,9 +46,9 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";
               `:""}
         </span>
 
-        <div part="label" class="checkbox__label">
+        <div part="label" class="checkbox__label" style="${this.label||this.subLabel?"":"margin-left:0;"}">
           ${this.label?t`<span class="checkbox__label__text">${this.label}</span>`:""}
-          ${this.label&&this.subLabel?t`<span class="checkbox__sublabel__text">${this.subLabel}</span>`:""}
+          ${this.subLabel?t`<span class="checkbox__sublabel__text">${this.subLabel}</span>`:""}
           <slot></slot>
         </div>
       </label>
@@ -60,10 +60,6 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";
                 class="checkbox__helptext-icon"
               ></nile-icon>
             </nile-tooltip>
-          `:""}
-      ${i?t`
-            <nile-form-error-message
-              >${this.errorMessage}</nile-form-error-message
-            >
-          `:""}
-    `}};p.styles=l,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([m()],p.prototype,"title",void 0),e([m()],p.prototype,"name",void 0),e([m()],p.prototype,"value",void 0),e([m({reflect:!0})],p.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([m({type:String,reflect:!0})],p.prototype,"label",void 0),e([m({type:String,reflect:!0,attribute:"sub-label"})],p.prototype,"subLabel",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([h("checked")],p.prototype,"defaultChecked",void 0),e([m({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([m({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([m({type:Boolean})],p.prototype,"showHelpText",void 0),e([m({reflect:!0})],p.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([a(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([o("nile-checkbox")],p);export{p as N};
+          `:i}
+      ${s?t`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`:i}
+    `}};b.styles=c,e([s('input[type="checkbox"]')],b.prototype,"input",void 0),e([o()],b.prototype,"hasFocus",void 0),e([m()],b.prototype,"title",void 0),e([m()],b.prototype,"name",void 0),e([m()],b.prototype,"value",void 0),e([m({reflect:!0})],b.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],b.prototype,"checked",void 0),e([m({type:String,reflect:!0})],b.prototype,"label",void 0),e([m({type:String,reflect:!0,attribute:"sub-label"})],b.prototype,"subLabel",void 0),e([m({type:Boolean,reflect:!0})],b.prototype,"indeterminate",void 0),e([r("checked")],b.prototype,"defaultChecked",void 0),e([m({attribute:"help-text",reflect:!0})],b.prototype,"helpText",void 0),e([m({attribute:"error-message",reflect:!0})],b.prototype,"errorMessage",void 0),e([m({type:Boolean})],b.prototype,"showHelpText",void 0),e([m({reflect:!0})],b.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],b.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],b.prototype,"handleStateChange",null),b=e([l("nile-checkbox")],b);export{b as N};