{"version":3,"names":["CSS","toggle","check","checkboxCss","CalciteCheckboxStyle0","Checkbox","this","checkedPath","indeterminatePath","getPath","indeterminate","checked","disabled","setFocus","calciteCheckboxChange","emit","keyDownHandler","event","isActivationKey","key","preventDefault","clickHandler","onToggleBlur","calciteInternalCheckboxBlur","onToggleFocus","calciteInternalCheckboxFocus","onLabelClick","valid","badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing","componentFocusable","toggleEl","focus","syncHiddenFormInput","input","type","connectedCallback","guid","el","id","connectLabel","connectForm","disconnectedCallback","disconnectLabel","disconnectForm","componentWillLoad","setUpLoadableComponent","componentDidLoad","setComponentLoaded","componentDidRender","updateHostInteraction","render","rtl","getElementDir","h","Host","onClick","onKeyDown","InteractiveContainer","toAriaBoolean","getLabelText","class","CSS_UTILITY","onBlur","onFocus","ref","role","tabIndex","undefined","viewBox","d","HiddenFormInputSlot","component"],"sources":["src/components/checkbox/resources.ts","src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["export const CSS = {\n toggle: \"toggle\",\n check: \"check-svg\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n * @prop --calcite-checkbox-border-color: Specifies the component's color.\n * @prop --calcite-checkbox-border-color-hover: Specifies the component's color when hovered.\n * @prop --calcite-checkbox-icon-color: Specifies the component's font color.\n */\n\n:host([scale=\"s\"]) {\n .check-svg,\n .toggle {\n inline-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n block-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n }\n}\n:host([scale=\"m\"]) {\n .check-svg,\n .toggle {\n inline-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n block-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n }\n}\n:host([scale=\"l\"]) {\n .check-svg,\n .toggle {\n inline-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n block-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n }\n}\n\n:host {\n @apply relative\n inline-flex\n cursor-pointer\n select-none;\n -webkit-tap-highlight-color: transparent;\n\n .check-svg {\n @apply bg-foreground-1\n pointer-events-none\n box-border\n block\n overflow-hidden\n fill-current\n stroke-current\n stroke-1\n transition-default;\n box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));\n color: var(--calcite-checkbox-icon-color, theme(\"backgroundColor.background\"));\n }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n .check-svg {\n box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n }\n .toggle:focus {\n @apply focus-outset-danger;\n }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n .check-svg {\n @apply bg-brand;\n box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n .check-svg {\n box-shadow: inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand));\n }\n}\n\n.toggle {\n @apply focus-base relative;\n\n &:active,\n &:focus,\n &:focus-visible {\n @apply focus-outset;\n }\n\n &::after,\n &::before {\n inset-block-start: 50%;\n inset-inline-start: 50%;\n min-block-size: theme(\"width.6\");\n min-inline-size: theme(\"width.6\");\n position: absolute;\n }\n}\n\n.toggle:not(.calcite--rtl) {\n &::after {\n content: \"\";\n transform: translateX(-50%) translateY(-50%);\n }\n}\n\n.toggle.calcite--rtl {\n &::before {\n content: \"\";\n transform: translateX(50%) translateY(-50%);\n }\n}\n\n@include disabled();\n@include hidden-form-input();\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n VNode,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n CheckableFormComponent,\n connectForm,\n disconnectForm,\n HiddenFormInputSlot,\n MutableValidityState,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n InteractiveComponent,\n InteractiveContainer,\n updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { CSS } from \"./resources\";\n\n@Component({\n tag: \"calcite-checkbox\",\n styleUrl: \"checkbox.scss\",\n shadow: true,\n})\nexport class Checkbox\n implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n //--------------------------------------------------------------------------\n //\n // Properties\n //\n //--------------------------------------------------------------------------\n\n /** When `true`, the component is checked. */\n @Prop({ reflect: true, mutable: true }) checked = false;\n\n /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * The `id` of the form that will be associated with the component.\n *\n * When not set, the component will be associated with its ancestor form element, if any.\n */\n @Prop({ reflect: true }) form: string;\n\n /**\n * The `id` attribute of the component. When omitted, a globally unique identifier is used.\n *\n * @deprecated No longer necessary.\n */\n @Prop({ reflect: true, mutable: true }) guid: string;\n\n /**\n * The hovered state of the checkbox.\n *\n * @internal\n */\n @Prop({ reflect: true }) hovered = false;\n\n /**\n * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n *\n * The state is visual only, and can look different across browsers.\n *\n * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n */\n @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n /** Accessible name for the component. */\n @Prop() label: string;\n\n /**\n * Specifies the name of the component.\n *\n * Required to pass the component's `value` on form submission.\n */\n @Prop({ reflect: true }) name: string;\n\n /** When `true`, the component must have a value in order for the form to submit. */\n @Prop({ reflect: true }) required = false;\n\n /** Specifies the size of the component. */\n @Prop({ reflect: true }) scale: Scale = \"m\";\n\n /** Specifies the status of the input field, which determines message and icons. */\n @Prop({ reflect: true }) status: Status = \"idle\";\n\n /**\n * The current validation state of the component.\n *\n * @readonly\n * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n @Prop({ mutable: true }) validity: MutableValidityState = {\n valid: false,\n badInput: false,\n customError: false,\n patternMismatch: false,\n rangeOverflow: false,\n rangeUnderflow: false,\n stepMismatch: false,\n tooLong: false,\n tooShort: false,\n typeMismatch: false,\n valueMissing: false,\n };\n\n /** The component's value. */\n @Prop() value: any;\n\n //--------------------------------------------------------------------------\n //\n // Private Properties\n //\n //--------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteCheckboxElement;\n\n readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n labelEl: HTMLCalciteLabelElement;\n\n formEl: HTMLFormElement;\n\n defaultChecked: boolean;\n\n defaultValue: Checkbox[\"checked\"];\n\n toggleEl: HTMLDivElement;\n\n //--------------------------------------------------------------------------\n //\n // Public Methods\n //\n //--------------------------------------------------------------------------\n\n /** Sets focus on the component. */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n\n this.toggleEl?.focus();\n }\n\n //--------------------------------------------------------------------------\n //\n // Private Methods\n //\n //--------------------------------------------------------------------------\n\n syncHiddenFormInput(input: HTMLInputElement): void {\n input.type = \"checkbox\";\n }\n\n getPath = (): string =>\n this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n toggle = (): void => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.setFocus();\n this.indeterminate = false;\n this.calciteCheckboxChange.emit();\n }\n };\n\n keyDownHandler = (event: KeyboardEvent): void => {\n if (isActivationKey(event.key)) {\n this.toggle();\n event.preventDefault();\n }\n };\n\n clickHandler = (): void => {\n if (this.disabled) {\n return;\n }\n\n this.toggle();\n };\n\n //--------------------------------------------------------------------------\n //\n // Events\n //\n //--------------------------------------------------------------------------\n\n /**\n * Fires when the component is blurred.\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter;\n\n /** Fires when the component's `checked` status changes. */\n @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter;\n\n /**\n * Fires when the component is focused.\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter;\n\n //--------------------------------------------------------------------------\n //\n // Event Listeners\n //\n //--------------------------------------------------------------------------\n\n onToggleBlur = (): void => {\n this.calciteInternalCheckboxBlur.emit(false);\n };\n\n onToggleFocus = (): void => {\n this.calciteInternalCheckboxFocus.emit(true);\n };\n\n onLabelClick = (): void => {\n this.toggle();\n };\n\n //--------------------------------------------------------------------------\n //\n // Lifecycle\n //\n //--------------------------------------------------------------------------\n\n connectedCallback(): void {\n this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n connectLabel(this);\n connectForm(this);\n }\n\n disconnectedCallback(): void {\n disconnectLabel(this);\n disconnectForm(this);\n }\n\n componentWillLoad(): void {\n setUpLoadableComponent(this);\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n componentDidRender(): void {\n updateHostInteraction(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n render(): VNode {\n const rtl = getElementDir(this.el) === \"rtl\";\n\n return (\n \n \n (this.toggleEl = toggleEl)}\n role=\"checkbox\"\n tabIndex={this.disabled ? undefined : 0}\n >\n \n \n \n \n \n \n \n \n );\n }\n}\n"],"mappings":";;;;;wcAAO,MAAMA,EAAM,CACjBC,OAAQ,SACRC,MAAO,aCFT,MAAMC,EAAc,42GACpB,MAAAC,EAAeD,E,MCyCFE,EAAQ,M,0OAgGVC,KAAAC,YAAc,2DAEdD,KAAAE,kBAAoB,eAoC7BF,KAAAG,QAAU,IACRH,KAAKI,cAAgBJ,KAAKE,kBAAoBF,KAAKK,QAAUL,KAAKC,YAAc,GAElFD,KAAAL,OAAS,KACP,IAAKK,KAAKM,SAAU,CAClBN,KAAKK,SAAWL,KAAKK,QACrBL,KAAKO,WACLP,KAAKI,cAAgB,MACrBJ,KAAKQ,sBAAsBC,M,GAI/BT,KAAAU,eAAkBC,IAChB,GAAIC,EAAgBD,EAAME,KAAM,CAC9Bb,KAAKL,SACLgB,EAAMG,gB,GAIVd,KAAAe,aAAe,KACb,GAAIf,KAAKM,SAAU,CACjB,M,CAGFN,KAAKL,QAAQ,EAgCfK,KAAAgB,aAAe,KACbhB,KAAKiB,4BAA4BR,KAAK,MAAM,EAG9CT,KAAAkB,cAAgB,KACdlB,KAAKmB,6BAA6BV,KAAK,KAAK,EAG9CT,KAAAoB,aAAe,KACbpB,KAAKL,QAAQ,E,aA7LmC,M,cAGd,M,qDAqBD,M,mBASqB,M,uDAapB,M,WAGI,I,YAGE,O,cASgB,CACxD0B,MAAO,MACPC,SAAU,MACVC,YAAa,MACbC,gBAAiB,MACjBC,cAAe,MACfC,eAAgB,MAChBC,aAAc,MACdC,QAAS,MACTC,SAAU,MACVC,aAAc,MACdC,aAAc,O,qBAoChB,cAAMxB,SACEyB,EAAmBhC,MAEzBA,KAAKiC,UAAUC,O,CASjB,mBAAAC,CAAoBC,GAClBA,EAAMC,KAAO,U,CA6Ef,iBAAAC,GACEtC,KAAKuC,KAAOvC,KAAKwC,GAAGC,IAAM,oBAAoBF,MAC9CG,EAAa1C,MACb2C,EAAY3C,K,CAGd,oBAAA4C,GACEC,EAAgB7C,MAChB8C,EAAe9C,K,CAGjB,iBAAA+C,GACEC,EAAuBhD,K,CAGzB,gBAAAiD,GACEC,EAAmBlD,K,CAGrB,kBAAAmD,GACEC,EAAsBpD,K,CASxB,MAAAqD,GACE,MAAMC,EAAMC,EAAcvD,KAAKwC,MAAQ,MAEvC,OACEgB,EAACC,EAAI,CAAA5C,IAAA,2CAAC6C,QAAS1D,KAAKe,aAAc4C,UAAW3D,KAAKU,gBAChD8C,EAACI,EAAoB,CAAA/C,IAAA,2CAACP,SAAUN,KAAKM,UACnCkD,EAAA,OAAA3C,IAAA,0DACgBgD,EAAc7D,KAAKK,SAAQ,aAC7ByD,EAAa9D,MACzB+D,MAAO,CACL,CAACrE,EAAIC,QAAS,KACd,CAACqE,EAAYV,KAAMA,GAErBW,OAAQjE,KAAKgB,aACbkD,QAASlE,KAAKkB,cACdiD,IAAMlC,GAAcjC,KAAKiC,SAAWA,EACpCmC,KAAK,WACLC,SAAUrE,KAAKM,SAAWgE,UAAY,GAEtCd,EAAA,OAAA3C,IAAA,yDAAiB,OAAOkD,MAAOrE,EAAIE,MAAO2E,QAAQ,aAChDf,EAAA,QAAA3C,IAAA,2CAAM2D,EAAGxE,KAAKG,aAEhBqD,EAAA,QAAA3C,IAAA,8CAEF2C,EAACiB,EAAmB,CAAA5D,IAAA,2CAAC6D,UAAW1E,Q","ignoreList":[]}