@nova-design-system/nova-webcomponents 3.11.0 → 3.12.0

package/dist/native/p-d88c416f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as c,H as i,g as n}from"./p-d0a33e64.js";import{c as t}from"./p-8a1a6e56.js";import{v as r}from"./p-f5ff676c.js";const a='nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}';const d=a;const s=class{constructor(c){e(this,c);this.checkedChanged=o(this,"checkedChanged",7);this.labelBefore=false;this.inputId=r();this.hideLabel=false;this.error=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.readonly=false;this.required=false;this.autofocus=false}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}if(this.indeterminate){this.indeterminate=false}this.checked=o.checked}}onCheckedChanged(e){this.checkedChanged.emit(e)}componentWillRender(){if(this.message){this.description=this.message}if(this.labelBefore){this.labelPlacement="before"}if(this.validation){this.errorDescription=this.validation;this.error=true}}render(){return c(i,{key:"62195333f84808381f19ca4017916380d20d493f",class:t(this.labelPlacement==="before"&&"label-placement-before",this.error&&"error")},c("div",{key:"65f02aee06eacecf83c5297d87130bbe9f85b19c",class:"input-container"},c("input",{key:"c3e8fcb41c835f0eba254f9e77de749b7dc6349e",type:"checkbox",id:this.inputId,name:this.name,autofocus:this.autofocus,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly&&!this.required,required:this.required,indeterminate:this.indeterminate,ref:e=>{if(e){e.indeterminate=this.indeterminate}}}),c("span",{key:"439a8c467373d734293012514cdb22c419b534ae",class:"icon"},this.checked&&!this.indeterminate&&c("slot",{key:"335a92ed1431fe96af3c7c6fac2f4245c0d4caaa",name:"checked-icon"},c("svg",{key:"67d97efca27a97c7db77d9f8c182a21fbd21d13c",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"9cb6730b00813e8d4fe6fa14549de6f2a41ea068",d:"M11.6667 3.5L5.25004 9.91667L2.33337 7","stroke-linecap":"round","stroke-linejoin":"round"}))),this.indeterminate&&c("slot",{key:"e47b17269156f72ddaf7af1ecc818ae5b6b8c0d3",name:"indeterminate-icon"},c("svg",{key:"4748acc27a70e74f9228cdb6e41eae4b1ae82559",class:"indeterminate-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 14",fill:"none"},c("path",{key:"40748b36b277c1ed6ea8fc8f82f4cd687b2f6e3a",d:"M2.9165 7H11.0832","stroke-linecap":"round","stroke-linejoin":"round"}))))),c("slot",{key:"0fa9e559cefb8169c20b171fcbb6c1786fd6b3ae"}),c("div",{key:"44eef633025d1a7606979d4d8374c2a04081f45c",class:"text-container"},c("slot",{key:"b43251a02b15431f5399c3bced485b89741e069e",name:"main"},(this.label||this.el.querySelector('[slot="label"]'))&&c("label",{key:"7781451a357961ce1606b18c590baa344df4ff95",htmlFor:this.inputId,class:t(this.hideLabel&&"visually-hidden")},c("slot",{key:"b420ad1dbdc05a5c57d0b45e62176866ec0527ca",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&c("div",{key:"67715bef879e0778b58648b83135edefdbdba53d",class:"description"},c("slot",{key:"b1d4d21e83130e19e94efa915abd6661c027bbce",name:"description"},this.description))),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&c("div",{key:"157df3faf2cadb4014ba8475c99cf68d86da9f63",hidden:!this.error,class:"error-description"},c("slot",{key:"42aa95b2332618120d846fa481a1b30b7edeccca",name:"error-description"},this.errorDescription))))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=d;export{s as nv_fieldcheckbox};
+//# sourceMappingURL=p-d88c416f.entry.js.map

package/dist/native/{p-2197ffdf.entry.js.map → p-d88c416f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n      &.visually-hidden {\n        @include utils.visually-hidden();\n      }\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <slot></slot>\n\n        <div class=\"text-container\">\n          <slot name=\"main\">\n            {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n              <label\n                htmlFor={this.inputId}\n                class={clsx(this.hideLabel && 'visually-hidden')}\n              >\n                <slot name=\"label\">{this.label}</slot>\n              </label>\n            )}\n\n            {(this.description ||\n              this.el.querySelector('[slot=\"description\"]')) && (\n              <div class=\"description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            )}\n          </slot>\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["nvFieldcheckboxCss","NvFieldcheckboxStyle0","NvFieldcheckbox","constructor","hostRef","this","labelBefore","inputId","uuidv4","hideLabel","error","checked","indeterminate","disabled","readonly","required","autofocus","handleChange","event","target","type","id","preventDefault","onCheckedChanged","checkedChanged","emit","componentWillRender","message","description","labelPlacement","validation","errorDescription","render","h","Host","key","class","clsx","name","autocomplete","value","Boolean","ref","el","xmlns","width","height","viewBox","fill","d","label","querySelector","htmlFor","hidden"],"sources":["src/components/nv-fieldcheckbox/nv-fieldcheckbox.scss?tag=nv-fieldcheckbox","src/components/nv-fieldcheckbox/nv-fieldcheckbox.tsx"],"sourcesContent":["@use \"../../styles/utils\" as utils;\n@import '../../styles/focus-ring';\n\n@mixin fieldcheckbox-variables() {\n  --nv-fieldcheckbox-border-default: var(\n    --components-form-field-border-default\n  );\n  --nv-fieldcheckbox-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-default);\n  --nv-fieldcheckbox-background-default: var(\n    --components-form-field-background-default\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-checked\n  );\n  --nv-fieldcheckbox-background-disabled: var(\n    --components-form-field-background-disabled\n  );\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldcheckbox-color-checked: var(\n    --components-form-shape-foreground-default\n  );\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldcheckbox-error-variables() {\n  --nv-fieldcheckbox-border-default: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-border-hover: var(--nv-fieldcheckbox-border-default);\n  --nv-fieldcheckbox-border-focus: var(--components-form-field-border-error);\n  --nv-fieldcheckbox-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldcheckbox-color-disabled: var(\n    --components-form-shape-foreground-disabled-error\n  );\n  --nv-fieldcheckbox-background-checked: var(\n    --components-form-field-background-error\n  );\n  --nv-fieldcheckbox-outline-color: var(--color-focus-destructive);\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: 'TT Norms Pro', sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--nv-fieldcheckbox-color-checked);\n\n  input[type='checkbox'][readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  &:has(input[type='checkbox']:disabled:not([readonly])) {\n    color: var(--nv-fieldcheckbox-color-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-checkbox-size);\n  height: var(--form-checkbox-size);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-checkbox-radius);\n  border-width: var(--form-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldcheckbox-border-default);\n  background: var(--nv-fieldcheckbox-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldcheckbox-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldcheckbox-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldcheckbox-outline-color));\n\n  &:checked,\n  &:indeterminate {\n    background: var(--nv-fieldcheckbox-background-checked);\n    border-color: var(--nv-fieldcheckbox-background-checked);\n  }\n\n  &:disabled:not([readonly]) {\n    background: var(--nv-fieldcheckbox-background-disabled);\n    border-color: var(--nv-fieldcheckbox-border-default);\n  }\n\n  &[readonly] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n}\n\n@mixin icon-styles() {\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    width: var(--form-checkbox-icon-size);\n    height: var(--form-checkbox-icon-size);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: var(--form-checkbox-icon-stroke);\n    flex-shrink: 0;\n  }\n}\n\nnv-fieldcheckbox {\n  @include fieldcheckbox-variables();\n  @include root-styles();\n\n  &.error > .input-container {\n    @include fieldcheckbox-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled]:not([disabled='false']) {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    opacity: 0.5;\n  }\n\n  > .input-container {\n    @include input-container-styles();\n\n    input[type='checkbox'] {\n      @include input-styles();\n    }\n\n    .icon {\n      @include icon-styles();\n    }\n  }\n\n  > .text-container {\n    @include text-container-styles();\n\n    label {\n      @include label-styles();\n      &.visually-hidden {\n        @include utils.visually-hidden();\n      }\n    }\n\n    .description {\n      @include description-styles();\n    }\n\n    .error-description {\n      @include error-description-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n * @slot checked-icon - Content to be placed as the checked icon, will override the checkedIcon prop.\n * @slot indeterminate-icon - Content to be placed as the indeterminate icon, will override the indeterminateIcon prop.\n */\n@Component({\n  tag: 'nv-fieldcheckbox',\n  styleUrl: 'nv-fieldcheckbox.scss',\n  formAssociated: true,\n  shadow: false,\n})\nexport class NvFieldcheckbox {\n  @Element() el!: HTMLNvFieldcheckboxElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message define a 'hint ' message for the Field.\n   * @deprecated Use `description` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly message?: string;\n\n  /**\n   * The text for the validation message.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   * */\n  @Prop({ reflect: true })\n  readonly validation?: string;\n\n  /**\n   * When true, the label will be placed before the checkbox.\n   * @deprecated Use `labelPlacement = end` instead.\n   * */\n  @Prop({ reflect: true })\n  readonly labelBefore?: boolean = false;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the checkbox input, used to reference the form data\n   * after submission.\n   */\n  @Prop({ reflect: true })\n  readonly name?: string;\n\n  /**\n   * The value attribute of the checkbox input, representing the value sent on\n   * form submission when the checkbox is checked. When the form is submitted,\n   * the data will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed next to the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the checkbox, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true, mutable: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description?: string;\n\n  /**\n   * Signals that there is an error associated with the checkbox, which can\n   * trigger visual cues.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the checkbox.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Indicates whether the checkbox is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates whether the checkbox is in an indeterminate state, typically used\n   * for hierarchical checkboxes.\n   */\n  @Prop({ reflect: true, mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Disables the checkbox, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the checkbox to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the checkbox as required, indicating that it must be checked for\n   * form submission.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Listens for the change event on the checkbox input element and updates the\n   * checked state.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      if (this.indeterminate) {\n        this.indeterminate = false;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autofocus={this.autofocus}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly && !this.required}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            ref={el => {\n              if (el) {\n                el.indeterminate = this.indeterminate;\n              }\n            }}\n          />\n          <span class=\"icon\">\n            {this.checked && !this.indeterminate && (\n              <slot name=\"checked-icon\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M11.6667 3.5L5.25004 9.91667L2.33337 7\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n            {this.indeterminate && (\n              <slot name=\"indeterminate-icon\">\n                <svg\n                  class=\"indeterminate-svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M2.9165 7H11.0832\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </slot>\n            )}\n          </span>\n        </div>\n\n        <slot></slot>\n\n        <div class=\"text-container\">\n          <slot name=\"main\">\n            {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n              <label\n                htmlFor={this.inputId}\n                class={clsx(this.hideLabel && 'visually-hidden')}\n              >\n                <slot name=\"label\">{this.label}</slot>\n              </label>\n            )}\n\n            {(this.description ||\n              this.el.querySelector('[slot=\"description\"]')) && (\n              <div class=\"description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            )}\n          </slot>\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/native/{p-348c6bb4.entry.js → p-e603c6ed.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,F as e,H as a,g as o}from"./p-d0a33e64.js";import{B as n}from"./p-fc9564b3.js";const l="nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";const r=l;const d=class{constructor(s){t(this,s);this.dialogCanceled=i(this,"dialogCanceled",7);this.dialogPrimaryClicked=i(this,"dialogPrimaryClicked",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.hasSlot=false;this.disabled=false;this.undismissable=false;this.leadingIcon="";this.trailingIcon="";this.danger=false;this.cancelLabel="Cancel";this.primaryLabel="Primary";this.primaryButtonType=n.Button;this.handlePrimary=t=>{t.stopPropagation();this.dialogPrimaryClicked.emit()};this.handleCancel=t=>{t.stopPropagation();this.dialogCanceled.emit()}}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"313836d5d0bc1704325aa200f0ed115bf3e63e7d"},!this.hasSlot?s(e,null,!this.undismissable&&s("nv-button",{onClick:this.handleCancel,emphasis:"low",size:"sm"},this.cancelLabel),s("nv-button",{onClick:this.handlePrimary,disabled:this.disabled,danger:this.danger,size:"sm",emphasis:"high",form:this.form,type:this.primaryButtonType},this.leadingIcon&&s("nv-icon",{slot:"leading-icon",name:this.leadingIcon,size:"sm"}),this.primaryLabel,this.trailingIcon&&s("nv-icon",{slot:"trailing-icon",name:this.trailingIcon,size:"sm"}))):s("slot",null))}static get formAssociated(){return true}get el(){return o(this)}};d.style=r;const h='nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}';const g=h;const f=class{constructor(i){t(this,i);this.hasSlot=false;this.heading="Dialog Title"}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"f91a9aea8aa7116266f52bb356ef2ec493df6354"},!this.hasSlot?s(e,null,s("div",{class:"heading"},this.heading),s("div",{class:"subheading"},this.subheading)):s("slot",null))}get el(){return o(this)}};f.style=g;export{d as nv_dialogfooter,f as nv_dialogheader};
-//# sourceMappingURL=p-348c6bb4.entry.js.map
+import{r as t,c as i,h as s,F as e,H as a,g as o}from"./p-d0a33e64.js";import{b as n}from"./p-5f594b35.js";const l="nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";const r=l;const d=class{constructor(s){t(this,s);this.dialogCanceled=i(this,"dialogCanceled",7);this.dialogPrimaryClicked=i(this,"dialogPrimaryClicked",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.hasSlot=false;this.disabled=false;this.undismissable=false;this.leadingIcon="";this.trailingIcon="";this.danger=false;this.cancelLabel="Cancel";this.primaryLabel="Primary";this.primaryButtonType=n.Button;this.handlePrimary=t=>{t.stopPropagation();this.dialogPrimaryClicked.emit()};this.handleCancel=t=>{t.stopPropagation();this.dialogCanceled.emit()}}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"313836d5d0bc1704325aa200f0ed115bf3e63e7d"},!this.hasSlot?s(e,null,!this.undismissable&&s("nv-button",{onClick:this.handleCancel,emphasis:"low",size:"sm"},this.cancelLabel),s("nv-button",{onClick:this.handlePrimary,disabled:this.disabled,danger:this.danger,size:"sm",emphasis:"high",form:this.form,type:this.primaryButtonType},this.leadingIcon&&s("nv-icon",{slot:"leading-icon",name:this.leadingIcon,size:"sm"}),this.primaryLabel,this.trailingIcon&&s("nv-icon",{slot:"trailing-icon",name:this.trailingIcon,size:"sm"}))):s("slot",null))}static get formAssociated(){return true}get el(){return o(this)}};d.style=r;const h='nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:"TT Norms Pro", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}';const g=h;const f=class{constructor(i){t(this,i);this.hasSlot=false;this.heading="Dialog Title"}componentWillLoad(){this.hasSlot=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE&&!t.hasAttribute("slot")))}render(){return s(a,{key:"f91a9aea8aa7116266f52bb356ef2ec493df6354"},!this.hasSlot?s(e,null,s("div",{class:"heading"},this.heading),s("div",{class:"subheading"},this.subheading)):s("slot",null))}get el(){return o(this)}};f.style=g;export{d as nv_dialogfooter,f as nv_dialogheader};
+//# sourceMappingURL=p-e603c6ed.entry.js.map

package/dist/native/p-e765a624.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as t,H as e,g as n}from"./p-d0a33e64.js";import{c as r}from"./p-8a1a6e56.js";const i='nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:500;font-family:"TT Norms Pro", sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}';const a=i;const s=class{constructor(t){o(this,t);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.size="md";this.emphasis="high";this.loading=false;this.disabled=false;this.active=false;this.type="button";this.shape="square";this.handleClick=o=>{var t,e,n,r;if(this.disabled){o.preventDefault();return}if(this.type==="submit"){(e=(t=this.internals)===null||t===void 0?void 0:t.form)===null||e===void 0?void 0:e.requestSubmit()}if(this.type==="reset"){(r=(n=this.internals)===null||n===void 0?void 0:n.form)===null||r===void 0?void 0:r.reset()}}}handleLoadingChange(o){this.loading=o;this.disabled=o}handleDisabledChange(o){if(this.loading){this.disabled=this.loading}else{this.disabled=o}}handleKeyDown(o){if(o.key==="Enter"||o.key===" "){o.preventDefault();this.el.click()}}handleTouchStart(o){if(o.touches.length>1)return;o.preventDefault();this.el.click()}componentWillLoad(){if(this.loading){this.disabled=this.loading}}render(){return t(e,{key:"21aa46431d8a9f64cfc6fba04a04b72de31c74a4",role:"button",type:this.type,tabindex:"0",disabled:this.disabled?true:undefined,class:r("root",`size-${this.size}`,`emphasis-${this.emphasis}`,this.loading&&"loading",`shape-${this.shape}`),onClick:this.handleClick},this.loading&&t("nv-loader",{key:"c2df9292a9c49f178e6e160dedeac3fe99776322",size:this.size}),!this.loading&&t("nv-icon",{key:"b7053d9e3a71a1464b41b021f41fe36c6591f114",name:this.name,size:this.size}),t("slot",{key:"70e8576ea565651df7dca6221cfed4160f86f025"}))}static get formAssociated(){return true}get el(){return n(this)}static get watchers(){return{loading:["handleLoadingChange"],disabled:["handleDisabledChange"]}}};s.style=a;const l='@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:" ";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:" ";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:" ";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:" ";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:" ";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:" ";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:" ";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:" ";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:" ";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:" ";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:" ";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}';const d=l;const c=class{constructor(t){o(this,t);this.size="md"}render(){return t(e,{key:"932c76ef978e21bdab5a3502daadcdd7ecd05af4",class:r(this.size&&`size-${this.size}`,this.color&&`color-${this.color}`)})}};c.style=d;export{s as nv_iconbutton,c as nv_loader};
+//# sourceMappingURL=p-e765a624.entry.js.map

package/dist/native/{p-184032cb.entry.js.map → p-e765a624.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","handleKeyDown","key","el","click","handleTouchStart","touches","length","componentWillLoad","render","h","Host","role","tabindex","undefined","class","clsx","onClick","name","nvLoaderCss","NvLoaderStyle0","NvLoader","color"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,qtJACxB,MAAAC,EAAeD,E,MC6BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EASpB,aAAAiB,CAAcZ,GACZ,GAAIA,EAAMa,MAAQ,SAAWb,EAAMa,MAAQ,IAAK,CAC9Cb,EAAMC,iBACNV,KAAKuB,GAAGC,O,EAKZ,gBAAAC,CAAiBhB,GACf,GAAIA,EAAMiB,QAAQC,OAAS,EAAG,OAC9BlB,EAAMC,iBACNV,KAAKuB,GAAGC,O,CAOV,iBAAAI,GACE,GAAI5B,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHU,KAAK,SACL1B,KAAMN,KAAKM,KACX2B,SAAS,IACT7B,SAAUJ,KAAKI,SAAW,KAAO8B,UACjCC,MAAOC,EACL,OACA,QAAQpC,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhB8B,QAASrC,KAAKQ,aAEbR,KAAKG,SAAW2B,EAAA,aAAAR,IAAA,2CAAWrB,KAAMD,KAAKC,QAErCD,KAAKG,SAAW2B,EAAA,WAAAR,IAAA,2CAASgB,KAAMtC,KAAKsC,KAAMrC,KAAMD,KAAKC,OAEvD6B,EAAA,QAAAR,IAAA,6C,6KClMR,MAAMiB,EAAc,wmHACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MALrB,WAAA3C,CAAAC,G,UAeWC,KAAAC,KAA2B,I,CAepC,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHa,MAAOC,EACLpC,KAAKC,MAAQ,QAAQD,KAAKC,OAC1BD,KAAK0C,OAAS,SAAS1C,KAAK0C,U","ignoreList":[]}
+{"version":3,"names":["nvIconbuttonCss","NvIconbuttonStyle0","NvIconbutton","constructor","hostRef","this","size","emphasis","loading","disabled","active","type","shape","handleClick","event","preventDefault","_b","_a","internals","form","requestSubmit","_d","_c","reset","handleLoadingChange","handleDisabledChange","handleKeyDown","key","el","click","handleTouchStart","touches","length","componentWillLoad","render","h","Host","role","tabindex","undefined","class","clsx","onClick","name","nvLoaderCss","NvLoaderStyle0","NvLoader","color"],"sources":["src/components/nv-iconbutton/nv-iconbutton.scss?tag=nv-iconbutton","src/components/nv-iconbutton/nv-iconbutton.tsx","src/components/nv-loader/nv-loader.scss?tag=nv-loader","src/components/nv-loader/nv-loader.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$button-sizes: (\"xs\", \"sm\", \"md\", \"lg\");\n$button-emphasis: (\"high\", \"medium\", \"low\", \"lower\");\n\n/* Define maps for size-related variables */\n$button-icon-button-padding: (\n  \"xs\": var(--button-xs-icon-button-padding),\n  \"sm\": var(--button-sm-icon-button-padding),\n  \"md\": var(--button-md-icon-button-padding),\n  \"lg\": var(--button-lg-icon-button-padding)\n);\n\n$button-gap: (\n  \"xs\": var(--button-xs-gap),\n  \"sm\": var(--button-sm-gap),\n  \"md\": var(--button-md-gap),\n  \"lg\": var(--button-lg-gap)\n);\n\n$button-border-radius: (\n  \"xs\": var(--button-xs-border-radius),\n  \"sm\": var(--button-sm-border-radius),\n  \"md\": var(--button-md-border-radius),\n  \"lg\": var(--button-lg-border-radius)\n);\n\n$button-line-height: (\n  \"xs\": var(--button-xs-line-height),\n  \"sm\": var(--button-sm-line-height),\n  \"md\": var(--button-md-line-height),\n  \"lg\": var(--button-lg-line-height)\n);\n\n$button-font-size: (\n  \"xs\": var(--button-xs-font-size),\n  \"sm\": var(--button-sm-font-size),\n  \"md\": var(--button-md-font-size),\n  \"lg\": var(--button-lg-font-size)\n);\n\n/* Define maps for emphasis-related variables */\n$components-button-background: (\n  \"high\": var(--components-button-high-background),\n  \"medium\": var(--components-button-medium-background),\n  \"low\": var(--components-button-low-background),\n  \"lower\": var(--components-button-lower-background)\n);\n\n$components-button-border: (\n  \"high\": var(--components-button-high-border),\n  \"medium\": var(--components-button-medium-border),\n  \"low\": var(--components-button-low-border),\n  \"lower\": var(--components-button-lower-border)\n);\n\n$components-button-text: (\n  \"high\": var(--components-button-high-text),\n  \"medium\": var(--components-button-medium-text),\n  \"low\": var(--components-button-low-text),\n  \"lower\": var(--components-button-lower-text)\n);\n\n$components-button-background-hover: (\n  \"high\": var(--components-button-high-background-hover),\n  \"medium\": var(--components-button-medium-background-hover),\n  \"low\": var(--components-button-low-background-hover),\n  \"lower\": var(--components-button-lower-background-hover)\n);\n\n$components-button-text-hover: (\n  \"high\": var(--components-button-high-text-hover),\n  \"medium\": var(--components-button-medium-text-hover),\n  \"low\": var(--components-button-low-text-hover),\n  \"lower\": var(--components-button-lower-text-hover)\n);\n\n$components-button-icon: (\n  \"high\": var(--components-button-high-icon),\n  \"medium\": var(--components-button-medium-icon),\n  \"low\": var(--components-button-low-icon),\n  \"lower\": var(--components-button-lower-icon)\n);\n\n@mixin root-styles() {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  font-style: normal;\n  font-weight: 500;\n  font-family: \"TT Norms Pro\", sans-serif;\n  transition: background-color 150ms ease-out;\n  height: fit-content;\n  width: fit-content;\n}\n\n@mixin size-styles($size) {\n  padding: map.get($button-icon-button-padding, $size);\n  gap: map.get($button-gap, $size);\n  border-radius: map.get($button-border-radius, $size);\n  line-height: map.get($button-line-height, $size);\n  font-size: map.get($button-font-size, $size);\n}\n\n@mixin emphasis-styles($emphasis) {\n  background: map.get($components-button-background, $emphasis);\n  border: 1px solid map.get($components-button-border, $emphasis);\n  color: map.get($components-button-text, $emphasis);\n\n  &:hover {\n    background: map.get($components-button-background-hover, $emphasis);\n    color: map.get($components-button-text-hover, $emphasis);\n  }\n\n  @include focus-ring();\n\n  &:disabled {\n    background: map.get($components-button-background, $emphasis);\n    color: map.get($components-button-text, $emphasis);\n    opacity: 0.5;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  & nv-icon > svg {\n    color: map.get($components-button-icon, $emphasis);\n  }\n}\n\nnv-iconbutton {\n  &.root {\n    @include root-styles();\n  }\n\n  @each $size in $button-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $emphasis in $button-emphasis {\n    &.emphasis-#{$emphasis} {\n      @include emphasis-styles($emphasis);\n    }\n  }\n\n  &.loading {\n    [slot=\"leading-icon\"] {\n      display: none;\n    }\n  }\n\n  &.shape-rounded {\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  ButtonSize,\n  ButtonEmphasis,\n  ButtonType,\n  IconButtonShape,\n} from '../../utils/constants';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Content of the button.\n */\n@Component({\n  tag: 'nv-iconbutton',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-iconbutton.scss',\n  scoped: false,\n})\nexport class NvIconbutton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvIconbuttonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button’s emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities. The icon is not displayed when the button\n   * is loading. Also, the button is disabled. If you want to disable the\n   * button, it is not possible. It is automatically disabled when loading.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ mutable: true, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Makes the button look active when it’s within a compatible component\n   * like a button group.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Choose the icon you want to display. This also sets the aria-label for\n   * improved accessibility, helping users who rely on screen readers.\n   * The icon is not displayed when the button is loading.\n   */\n  @Prop({ reflect: true })\n  readonly name: `${IconName}` | string;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn’t interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the shape of the button. Choose between square and rounded.\n   */\n  @Prop({ reflect: true })\n  readonly shape: `${IconButtonShape}` = 'square';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles form-related actions when the button is clicked.\n   * - Submits the form if the button type is 'submit'.\n   * - Resets the form if the button type is 'reset'.\n   * @param {Event} event - The click event.\n   */\n  private handleClick = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.type === 'submit') {\n      this.internals?.form?.requestSubmit();\n    }\n    if (this.type === 'reset') {\n      this.internals?.form?.reset();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"button\"\n        type={this.type}\n        tabindex=\"0\"\n        disabled={this.disabled ? true : undefined}\n        class={clsx(\n          'root',\n          `size-${this.size}`,\n          `emphasis-${this.emphasis}`,\n          this.loading && 'loading',\n          `shape-${this.shape}`,\n        )}\n        onClick={this.handleClick}\n      >\n        {this.loading && <nv-loader size={this.size}></nv-loader>}\n\n        {!this.loading && <nv-icon name={this.name} size={this.size} />}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","@use \"sass:map\";\n\n/* Variants */\n$loader-sizes: (\"xs\", \"sm\", \"md\", \"lg\", \"xl\");\n$loader-color: (\"brand\", \"white\");\n\n/* Define maps for color-related variables */\n$components-loader-background: (\n  \"brand\": var(--components-loader-brand-background),\n  \"white\": var(--components-loader-white-background)\n);\n\n$components-loader-foreground: (\n  \"brand\": var(--components-loader-brand-foreground),\n  \"white\": var(--components-loader-white-foreground)\n);\n\n/* Define maps for size-related variables */\n$components-loader-size: (\n  \"xs\": var(--loader-size-xs),\n  \"sm\": var(--loader-size-sm),\n  \"md\": var(--loader-size-md),\n  \"lg\": var(--loader-size-lg),\n  \"xl\": var(--loader-size-xl)\n);\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  aspect-ratio: 1 / 1;\n  border-radius: 9999px;\n  color: inherit;\n}\n\n@mixin size-styles($size) {\n  $loader-size: map.get($components-loader-size, $size);\n  $border-size: calc($loader-size / 10);\n\n  width: $loader-size;\n  height: $loader-size;\n\n  &::before,\n  &::after {\n    content: \" \";\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  &::before {\n    content: \" \";\n    border: $border-size solid;\n    opacity: 0.3;\n  }\n\n  &::after {\n    content: \" \";\n    border-top: $border-size solid transparent;\n    border-left: $border-size solid transparent;\n    border-right: $border-size solid transparent;\n    border-bottom: $border-size solid;\n    animation: rotation 1s linear infinite;\n  }\n}\n\n@mixin color-styles($color) {\n  &::before {\n    border-color: map.get($components-loader-background, $color);\n    opacity: 1;\n  }\n\n  &::after {\n    border-bottom-color: map.get($components-loader-foreground, $color);\n  }\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\nnv-loader {\n  @include root-styles();\n\n  @each $size in $loader-sizes {\n    &.size-#{$size} {\n      @include size-styles($size);\n    }\n  }\n\n  @each $color in $loader-color {\n    &.color-#{$color} {\n      @include color-styles($color);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,qqJACxB,MAAAC,EAAeD,E,MC6BFE,EAAY,MAPzB,WAAAC,CAAAC,G,0KAoBWC,KAAAC,KAAwB,KAQxBD,KAAAE,SAAgC,OAUzCF,KAAAG,QAAmB,MAMnBH,KAAAI,SAAoB,MAOXJ,KAAAK,OAAkB,MAgBlBL,KAAAM,KAAwB,SAMxBN,KAAAO,MAA8B,SAY/BP,KAAAQ,YAAeC,I,YACrB,GAAIT,KAAKI,SAAU,CACjBK,EAAMC,iBACN,M,CAGF,GAAIV,KAAKM,OAAS,SAAU,EAC1BK,GAAAC,EAAAZ,KAAKa,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAI,MAAAH,SAAA,SAAAA,EAAEI,e,CAExB,GAAIf,KAAKM,OAAS,QAAS,EACzBU,GAAAC,EAAAjB,KAAKa,aAAS,MAAAI,SAAA,SAAAA,EAAEH,QAAI,MAAAE,SAAA,SAAAA,EAAEE,O,GAS1B,mBAAAC,CAAoBhB,GAClBH,KAAKG,QAAUA,EACfH,KAAKI,SAAWD,C,CAIlB,oBAAAiB,CAAqBhB,GACnB,GAAIJ,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,KAChB,CACLH,KAAKI,SAAWA,C,EASpB,aAAAiB,CAAcZ,GACZ,GAAIA,EAAMa,MAAQ,SAAWb,EAAMa,MAAQ,IAAK,CAC9Cb,EAAMC,iBACNV,KAAKuB,GAAGC,O,EAKZ,gBAAAC,CAAiBhB,GACf,GAAIA,EAAMiB,QAAQC,OAAS,EAAG,OAC9BlB,EAAMC,iBACNV,KAAKuB,GAAGC,O,CAOV,iBAAAI,GACE,GAAI5B,KAAKG,QAAS,CAChBH,KAAKI,SAAWJ,KAAKG,O,EAQzB,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHU,KAAK,SACL1B,KAAMN,KAAKM,KACX2B,SAAS,IACT7B,SAAUJ,KAAKI,SAAW,KAAO8B,UACjCC,MAAOC,EACL,OACA,QAAQpC,KAAKC,OACb,YAAYD,KAAKE,WACjBF,KAAKG,SAAW,UAChB,SAASH,KAAKO,SAEhB8B,QAASrC,KAAKQ,aAEbR,KAAKG,SAAW2B,EAAA,aAAAR,IAAA,2CAAWrB,KAAMD,KAAKC,QAErCD,KAAKG,SAAW2B,EAAA,WAAAR,IAAA,2CAASgB,KAAMtC,KAAKsC,KAAMrC,KAAMD,KAAKC,OAEvD6B,EAAA,QAAAR,IAAA,6C,6KClMR,MAAMiB,EAAc,wmHACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MALrB,WAAA3C,CAAAC,G,UAeWC,KAAAC,KAA2B,I,CAepC,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAT,IAAA,2CACHa,MAAOC,EACLpC,KAAKC,MAAQ,QAAQD,KAAKC,OAC1BD,KAAK0C,OAAS,SAAS1C,KAAK0C,U","ignoreList":[]}