@gov-design-system-ce/components 0.0.34 → 0.0.36

package/dist/core/p-e6904513.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/core/src/components/gov-form/select/gov-form-select.scss?tag=gov-form-select","../../../packages/core/src/components/gov-form/select/gov-form-select.tsx"],"names":["govFormSelectCss","GovFormSelect","[object Object]","hostRef","this","h","govHost","host","f","govForm","selectId","createID","newValue","validateProp","FormSelectVariants","FormSelectClass","root","FormSelectSizes","passControlAttrs","passAttrToControl","size","toBoolAttr","disabled","invalid","validateVariant","variant","validateSize","querySelectorAll","forEach","option","value","setAttribute","passAttrToLabel","String","required","canValidateWcagOnRender","delay","validateWcag","Host","class","hasSlot","name","slot","id","identifier","onFocus","onFocusHandler","bind","onChange","onChangeHandler","onBlur","onBlurHandler","ref","el","selectRef","aria-disabled","toBoolAttrIfDefined","aria-activedescendant","wcagActiveDescendant","aria-controls","wcagControls","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-owns","wcagOwns","e","focused","govFocus","emit","component","originalEvent","govBlur","target","stopPropagation","govChange","options","focus","validateWcagRef","validateWcagLabelFor"],"mappings":"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","sourcesContent":["/*\n *   Select\n */\n\n@import \"../select/gov-form-select-core.scss\";\n\n$class: \".gov-form-select\";\n\n#{$class} {\n\t@extend %form-select-core;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport {\n\tFormSelectClass,\n\tFormSelectSizes,\n\tFormSelectSizesType,\n\tFormSelectVariants,\n\tFormSelectVariantType,\n} from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { FormSelectEvent } from \"./gov-form-select.types\"\n\n@Component({\n\ttag: \"gov-form-select\",\n\tstyleUrl: \"gov-form-select.scss\",\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.selectId = createID(\"GovSelect\")\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormSelectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = \"m\"\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a related component’s visually focused element.\n\t */\n\t@Prop({ attribute: \"wcag-active-descendant\" }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormSelectEvent>\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormSelectVariants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"type\", \"select\")\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.host.querySelectorAll(\"option\").forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.value === this.value) {\n\t\t\t\toption.setAttribute(\"selected\", \"true\")\n\t\t\t}\n\t\t})\n\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot(\"prefix\") && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-owns={this.wcagOwns}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagActiveDescendant, \"wcag-active-descendant\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, \"wcag-controls\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}