JezK

Edit File: sc-checkbox2.js.map

{"file":"sc-checkbox2.js","mappings":"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","names":[],"sources":["src/components/ui/checkbox/sc-checkbox.scss?tag=sc-checkbox&encapsulation=shadow","src/components/ui/checkbox/sc-checkbox.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.checkbox {\n display: flex;\n font-family: var(--sc-input-font-family);\n font-size: var(--sc-input-font-size-medium);\n font-weight: var(--sc-input-font-weight);\n color: var(--sc-input-color);\n vertical-align: middle;\n cursor: pointer;\n}\n\n.checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sc-checkbox-size);\n height: var(--sc-checkbox-size);\n border: solid var(--sc-input-border-width) var(--sc-input-border-color);\n border-radius: 2px;\n background-color: var(--sc-input-background-color);\n color: var(--sc-color-white);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) border-color, var(--sc-input-transition, var(--sc-transition-medium)) opacity,\n var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color,\n var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n .checkbox__icon {\n display: inline-flex;\n width: var(--sc-checkbox-size);\n height: var(--sc-checkbox-size);\n\n svg {\n width: 100%;\n height: 100%;\n }\n }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n border-color: var(--sc-input-border-color-hover);\n background-color: var(--sc-input-background-color-hover);\n}\n\n// Focus\n.checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {\n border-color: var(--sc-input-border-color-focus);\n background-color: var(--sc-input-background-color-focus);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n border-color: var(--sc-color-primary-500);\n background-color: var(--sc-color-primary-500);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n opacity: 0.8;\n}\n\n// Checked/indeterminate + focus\n.checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {\n border-color: var(--sc-color-white);\n background-color: var(--sc-color-primary-500);\n box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n}\n\n// Disabled\n.checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.checkbox__label {\n line-height: var(--sc-checkbox-size);\n margin-top: var(--sc-input-border-width);\n margin-left: 0.5em;\n flex: 1;\n // user-select: none;\n}\n\n.checkbox--is-required .checkbox__label:after {\n content: ' *';\n color: var(--sc-color-danger-500);\n}\n\n::slotted(*) {\n display: inline-block;\n}\n\n.checkbox--is-rtl {\n .checkbox__label {\n margin-left: 0;\n margin-right: 0.5em;\n }\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Method, Watch, Element } from '@stencil/core';\nimport { FormSubmitController } from '../../../functions/form-data';\nimport { isRtl } from '../../../functions/page-align';\n\nlet id = 0;\n\n/**\n * @part base - The elements base wrapper.\n * @part control - The control wrapper.\n * @part checked-icon - Checked icon.\n * @part indeterminate-icon - Indeterminate icon.\n * @part label - The label.\n */\n@Component({\n tag: 'sc-checkbox',\n styleUrl: 'sc-checkbox.scss',\n shadow: true,\n})\nexport class ScCheckbox {\n @Element() el: HTMLScCheckboxElement;\n private input: HTMLInputElement;\n private formController: any;\n private inputId = `checkbox-${++id}`;\n private labelId = `checkbox-label-${id}`;\n\n @State() private hasFocus: boolean = false;\n\n /** The checkbox's name attribute. */\n @Prop() name: string;\n\n /** The checkbox's value attribute. */\n @Prop() value: string;\n\n /** Disables the checkbox. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Makes this edit and not editable. */\n @Prop({ reflect: true }) edit: boolean = false;\n\n /** Makes the checkbox a required field. */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Draws the checkbox in a checked state. */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /** Draws the checkbox in an indeterminate state. */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n @Prop({ reflect: true, mutable: true }) invalid: boolean = false;\n\n /** Emitted when the control loses focus. */\n @Event() scBlur: EventEmitter<void>;\n\n /** Emitted when the control's checked state changes. */\n @Event() scChange: EventEmitter<void>;\n\n /** Emitted when the control gains focus. */\n @Event() scFocus: EventEmitter<void>;\n\n firstUpdated() {\n this.input.indeterminate = this.indeterminate;\n }\n\n /** Simulates a click on the checkbox. */\n @Method()\n async triggerClick() {\n return this.input.click();\n }\n\n /** Sets focus on the checkbox. */\n @Method()\n async triggerFocus(options?: FocusOptions) {\n return this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n @Method()\n async triggerBlur() {\n return this.input.blur();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n @Method()\n async reportValidity() {\n this.invalid = !this.input.checkValidity();\n return this.input.reportValidity();\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.scBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.scFocus.emit();\n }\n\n handleLabelMouseDown() {\n // Prevent clicks on the label from briefly blurring the input\n // event.preventDefault();\n this.input.focus();\n }\n\n @Watch('checked')\n @Watch('indeterminate')\n handleStateChange() {\n this.input.checked = this.checked;\n this.input.indeterminate = this.indeterminate;\n this.scChange.emit();\n }\n\n componentDidLoad() {\n this.formController = new FormSubmitController(this.el, {\n value: (control: HTMLScChoiceElement) => (control.checked ? control.value : undefined),\n }).addFormData();\n }\n\n disconnectedCallback() {\n this.formController?.removeFormData();\n }\n\n render() {\n const Tag = this.edit ? 'div' : 'label';\n return (\n <Tag\n part=\"base\"\n class={{\n 'checkbox': true,\n 'checkbox--is-required': this.required,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--is-rtl':isRtl()\n }}\n htmlFor={this.inputId}\n onMouseDown={() => this.handleLabelMouseDown()}\n >\n <span part=\"control\" class=\"checkbox__control\">\n {this.checked ? (\n <span part=\"checked-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(3.428571, 3.428571)\">\n <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n ) : (\n ''\n )}\n {!this.checked && this.indeterminate ? (\n <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n <g stroke=\"currentColor\" stroke-width=\"2\">\n <g transform=\"translate(2.285714, 6.857143)\">\n <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n </g>\n </g>\n </g>\n </svg>\n </span>\n ) : (\n ''\n )}\n <input\n id={this.inputId}\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"checkbox\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={() => this.handleClick()}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.handleFocus()}\n />\n </span>\n <span part=\"label\" id={this.labelId} class=\"checkbox__label\">\n <slot></slot>\n </span>\n </Tag>\n );\n }\n}\n"],"version":3}