JezK
Edit File: sc-radio-group2.js.map
{"file":"sc-radio-group2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,owBAAowB,CAAC;AAC7xB,2BAAe,eAAe;;MCOjB,YAAY;;;;;;qBAQP,EAAE;;qBASsC,EAAE;;;;IAS1D,MAAM,cAAc;QAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;KACpC;IAGD,gBAAgB,CAAC,KAAK;QACpB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO;QAChD,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;QAClD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB,OAAO;SACR;QACD,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAClC;KACF;IAED,gBAAgB;QACd,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAA8B,CAAC;QACvF,OAAO,CAAC,OAAO,CAAC,MAAM;YACpB,IAAI,MAAM,CAAC,OAAO,EAAE;gBAClB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;aAC3B;SACF,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,iEACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,sBAAsB,EAAE,IAAI,CAAC,OAAO;gBACpC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;gBACzC,qBAAqB,EAAE,KAAK,EAAE;aAC/B,kBACa,IAAI,CAAC,OAAO,EAC1B,IAAI,EAAC,YAAY,IAEjB,+DAAQ,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,oBAAoB,IAC7C,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/B,EAET,8DAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,2BAA2B,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAC,IAAI,GAAG,EACnK,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,oBAAoB,IAC1C,8DAAa,CACT,CACG,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/radio-group/sc-radio-group.scss?tag=sc-radio-group&encapsulation=shadow","src/components/ui/radio-group/sc-radio-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.radio-group {\n border: none;\n padding: 0;\n margin: 0;\n min-width: 0;\n\n .radio-group__label {\n display: inline-block;\n padding: 0;\n color: var(--sc-input-label-color);\n font-weight: var(--sc-input-label-font-weight);\n text-transform: var(--sc-input-label-text-transform, none);\n letter-spacing: var(--sc-input-label-letter-spacing, 0);\n margin-bottom: var(--sc-input-label-margin);\n }\n\n &__hidden-input {\n position: absolute;\n opacity: 0;\n padding: 0px;\n margin: 0px;\n pointer-events: none;\n }\n\n &--is-required .radio-group__label:after {\n content: ' *';\n color: var(--sc-color-danger-500);\n }\n}\n\n::slotted(sc-radio:not(:last-of-type)) {\n display: block;\n margin-bottom: var(--sc-spacing-x-small);\n}\n\n// .radio-group:not(.radio-group--has-fieldset) {\n// border: none;\n// padding: 0;\n// margin: 0;\n// min-width: 0;\n// }\n// .radio-group:not(.radio-group--has-fieldset) .radio-group__label {\n// position: absolute;\n// width: 0;\n// height: 0;\n// clip: rect(0 0 0 0);\n// clip-path: inset(50%);\n// overflow: hidden;\n// white-space: nowrap;\n// }\n\n.radio-group--is-rtl {\n &.radio-group {\n &,\n .radio-group__label {\n text-align: right;\n }\n }\n}\n","import { Component, Prop, h, Method, Listen, Event, EventEmitter, Element } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n@Component({\n tag: 'sc-radio-group',\n styleUrl: 'sc-radio-group.scss',\n shadow: true,\n})\nexport class ScRadioGroup {\n /** The radio group element */\n @Element() el: HTMLScRadioGroupElement;\n\n /** The input for validation */\n private input: HTMLInputElement;\n\n /** The radio group label. Required for proper accessibility. */\n @Prop() label = '';\n\n /**\n * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n */\n @Prop({ reflect: true, mutable: true }) invalid: boolean;\n\n /** The selected value of the control. */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /** Is one of these items required. */\n @Prop() required: boolean;\n\n @Event() scChange: EventEmitter<string>;\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 @Listen('scChange')\n handleRadioClick(event) {\n if (event.target.tagName !== 'SC-RADIO') return;\n event.stopImmediatePropagation();\n const target = event.target as HTMLScRadioElement;\n if (target.disabled) {\n return;\n }\n if (target.checked) {\n this.value = target.value;\n this.scChange.emit(target.value);\n }\n }\n\n componentDidLoad() {\n const choices = [...this.el.querySelectorAll('sc-radio')] as Array<HTMLScRadioElement>;\n choices.forEach(choice => {\n if (choice.checked) {\n this.value = choice.value;\n }\n });\n }\n\n render() {\n return (\n <fieldset\n part=\"base\"\n class={{\n 'radio-group': true,\n 'radio-group--invalid': this.invalid,\n 'radio-group--is-required': this.required,\n 'radio-group--is-rtl': isRtl(),\n }}\n aria-invalid={this.invalid}\n role=\"radiogroup\"\n >\n <legend part=\"label\" class=\"radio-group__label\">\n <slot name=\"label\">{this.label}</slot>\n </legend>\n\n <input type=\"text\" class=\"radio-group__hidden-input\" ref={el => (this.input = el as HTMLInputElement)} required={this.required} value={this.value} tabindex=\"-1\" />\n <div part=\"items\" class=\"radio-group__items\">\n <slot></slot>\n </div>\n </fieldset>\n );\n }\n}\n"],"version":3}