@gov-design-system-ce/components 0.0.32 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js +7 -1
- package/dist/cjs/gov-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-button.cjs.entry.js +8 -2
- package/dist/cjs/gov-button.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-autocomplete.cjs.entry.js +0 -2
- package/dist/cjs/gov-form-autocomplete.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js +3 -1
- package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-label.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-radio.cjs.entry.js +3 -3
- package/dist/cjs/gov-form-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +1 -1
- package/dist/cjs/gov-tile.cjs.entry.js +7 -1
- package/dist/cjs/gov-tile.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gov-badge/gov-badge.js +37 -2
- package/dist/collection/components/gov-badge/gov-badge.js.map +1 -1
- package/dist/collection/components/gov-button/gov-button.js +30 -2
- package/dist/collection/components/gov-button/gov-button.js.map +1 -1
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js +0 -2
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js.map +1 -1
- package/dist/collection/components/gov-form/input/gov-form-input.js +37 -1
- package/dist/collection/components/gov-form/input/gov-form-input.js.map +1 -1
- package/dist/collection/components/gov-form/label/gov-form-label.js +2 -2
- package/dist/collection/components/gov-form/label/gov-form-label.js.map +1 -1
- package/dist/collection/components/gov-form/radio/gov-form-radio.js +4 -4
- package/dist/collection/components/gov-form/radio/gov-form-radio.js.map +1 -1
- package/dist/collection/components/gov-tile/gov-tile.js +37 -5
- package/dist/collection/components/gov-tile/gov-tile.js.map +1 -1
- package/dist/components/gov-badge2.js +9 -2
- package/dist/components/gov-badge2.js.map +1 -1
- package/dist/components/gov-button2.js +9 -2
- package/dist/components/gov-button2.js.map +1 -1
- package/dist/components/gov-form-autocomplete2.js +0 -2
- package/dist/components/gov-form-autocomplete2.js.map +1 -1
- package/dist/components/gov-form-input2.js +5 -1
- package/dist/components/gov-form-input2.js.map +1 -1
- package/dist/components/gov-form-label.js +1 -1
- package/dist/components/gov-form-label.js.map +1 -1
- package/dist/components/gov-form-radio.js +3 -3
- package/dist/components/gov-form-radio.js.map +1 -1
- package/dist/components/gov-icon2.js +1 -1
- package/dist/components/gov-tile.js +9 -2
- package/dist/components/gov-tile.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-30777e50.entry.js → p-35aadeeb.entry.js} +2 -2
- package/dist/core/p-35aadeeb.entry.js.map +1 -0
- package/dist/core/{p-67006730.entry.js → p-4db67975.entry.js} +2 -2
- package/dist/core/p-4db67975.entry.js.map +1 -0
- package/dist/core/{p-f814b4e9.entry.js → p-87b75126.entry.js} +2 -2
- package/dist/core/p-87b75126.entry.js.map +1 -0
- package/dist/core/{p-d5b2d142.entry.js → p-cb710e9a.entry.js} +2 -2
- package/dist/core/p-ea493ce6.entry.js +2 -0
- package/dist/core/p-ea493ce6.entry.js.map +1 -0
- package/dist/core/{p-70786676.entry.js → p-f656fffe.entry.js} +2 -2
- package/dist/core/p-f656fffe.entry.js.map +1 -0
- package/dist/core/{p-3412facd.entry.js → p-fa7daa95.entry.js} +2 -2
- package/dist/core/p-fa7daa95.entry.js.map +1 -0
- package/dist/core/{p-96a59983.entry.js → p-fe1ee53b.entry.js} +2 -2
- package/dist/core/p-fe1ee53b.entry.js.map +1 -0
- package/dist/custom-elements/index.js +1 -1
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/gov-badge.entry.js +7 -1
- package/dist/esm/gov-badge.entry.js.map +1 -1
- package/dist/esm/gov-button.entry.js +8 -2
- package/dist/esm/gov-button.entry.js.map +1 -1
- package/dist/esm/gov-form-autocomplete.entry.js +0 -2
- package/dist/esm/gov-form-autocomplete.entry.js.map +1 -1
- package/dist/esm/gov-form-input.entry.js +3 -1
- package/dist/esm/gov-form-input.entry.js.map +1 -1
- package/dist/esm/gov-form-label.entry.js +1 -1
- package/dist/esm/gov-form-label.entry.js.map +1 -1
- package/dist/esm/gov-form-radio.entry.js +3 -3
- package/dist/esm/gov-form-radio.entry.js.map +1 -1
- package/dist/esm/gov-icon.entry.js +1 -1
- package/dist/esm/gov-tile.entry.js +7 -1
- package/dist/esm/gov-tile.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +36 -13
- package/dist/types/components/gov-badge/gov-badge.d.ts +6 -1
- package/dist/types/components/gov-button/gov-button.d.ts +5 -1
- package/dist/types/components/gov-form/input/gov-form-input.d.ts +9 -1
- package/dist/types/components/gov-form/label/gov-form-label.d.ts +1 -1
- package/dist/types/components/gov-form/radio/gov-form-radio.d.ts +1 -1
- package/dist/types/components/gov-tile/gov-tile.d.ts +5 -0
- package/dist/types/components.d.ts +28 -0
- package/package.json +1 -1
- package/dist/core/p-30777e50.entry.js.map +0 -1
- package/dist/core/p-3412facd.entry.js.map +0 -1
- package/dist/core/p-4687e822.entry.js +0 -2
- package/dist/core/p-4687e822.entry.js.map +0 -1
- package/dist/core/p-67006730.entry.js.map +0 -1
- package/dist/core/p-70786676.entry.js.map +0 -1
- package/dist/core/p-96a59983.entry.js.map +0 -1
- package/dist/core/p-f814b4e9.entry.js.map +0 -1
- package/dist/globals.d.ts +0 -2
- package/dist/types/types/typings.d.ts +0 -6
- /package/dist/core/{p-d5b2d142.entry.js.map → p-cb710e9a.entry.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-form/radio/gov-form-radio.scss?tag=gov-form-radio","../../../packages/core/src/components/gov-form/radio/gov-form-radio.tsx"],"names":["govFormRadioCss","GovFormRadio","[object Object]","hostRef","this","radioId","createID","h","govHost","host","f","govForm","newValue","validateProp","FormRadioSizes","FormRadioClass","root","passAttrToControl","passAttrToLabel","identifier","String","required","canValidateWcagOnRender","delay","validateWcag","wrapCheckbox","children","noLabel","Host","class","checked","size","invalid","toBoolAttrIfDefined","holder","Fragment","input","id","type","value","name","onClick","onClickHandler","bind","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","ref","el","inputRef","aria-checked","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","disabled","e","stopPropagation","govFocus","emit","component","originalEvent","govBlur","target","govChange","validateWcagRef","validateWcagLabelFor"],"mappings":"oiBAAA,MAAMA,EAAkB,ghPCmBXC,EAAY,MAOxBC,YAAAC,2JAe6D,mBAIX,oBAKb,4DAaQ,kHApC5CC,KAAKC,QAAUC,EAAS,YAExBF,KAAKG,EAAIC,EAAQJ,KAAKK,MACtBL,KAAKM,EAAIC,EAAQP,KAAKG,GAiEvBL,aAAaU,GACZC,EAAaC,EAAgBF,EAAUG,EAAeC,MAGvDd,oBACCE,KAAKM,EAAEO,kBAAkB,OAAQ,SAGlCf,2BACCE,KAAKM,EAAEQ,gBAAgB,aAAcd,KAAKe,YAAcf,KAAKC,SAC7DD,KAAKM,EAAEQ,gBAAgB,WAAYE,OAAOhB,KAAKiB,WAC/C,GAAIC,IAA2B,OACxBC,EAAM,WACNnB,KAAKoB,gBAIbtB,SACC,MAAMuB,EAAgBC,IACrB,GAAItB,KAAKuB,QAAS,CACjB,OACCpB,EAAA,QAAA,KACEmB,GAIJ,OAAOA,GAGR,OACCnB,EAACqB,EAAI,CAACC,MAAOd,EAAeC,KAAMc,QAAS1B,KAAK0B,QAASC,KAAM3B,KAAK2B,KAAMC,QAASC,EAAoB7B,KAAK4B,UAC3GzB,EAAA,MAAA,CAAKsB,MAAOd,EAAemB,QACzBT,EACAlB,EAAC4B,EAAQ,KACR5B,EAAA,QAAA,CACCsB,MAAOd,EAAeqB,MACtBC,GAAIjC,KAAKe,YAAcf,KAAKC,QAC5BiC,KAAK,QACLC,MAAOnC,KAAKmC,MACZC,KAAMpC,KAAKoC,KACXV,QAAS1B,KAAK0B,QACdW,QAASrC,KAAKsC,eAAeC,KAAKvC,MAClCwC,SAAUxC,KAAKyC,gBAAgBF,KAAKvC,MACpC0C,QAAS1C,KAAK2C,eAAeJ,KAAKvC,MAClC4C,OAAQ5C,KAAK6C,cAAcN,KAAKvC,MAChC8C,IAAKC,GAAO/C,KAAKgD,SAAWD,EAC5B9B,SAAUjB,KAAKiB,SAAQgC,eACTjD,KAAK0B,QAAOwB,gBACXrB,EAAoB7B,KAAKiB,UAASkC,eACnCtB,EAAoB7B,KAAK4B,SAAQwB,mBAC7BpD,KAAKqD,gBAAeC,kBACrBtD,KAAKuD,eAAcC,gBACrB3B,EAAoB7B,KAAKyD,YAEzCtD,EAAA,OAAA,KACCA,EAAA,OAAA,CAAMiC,KAAK,eASVtC,eAAe4D,GACtBA,EAAEC,kBAGK7D,eAAe4D,GACtBA,EAAEC,kBACF3D,KAAK4D,SAASC,KAAK,CAClBC,UAAWnD,EAAeC,KAC1BuB,MAAOnC,KAAKmC,MACZT,QAAS1B,KAAK0B,QACdqC,cAAeL,IAIT5D,cAAc4D,GACrBA,EAAEC,kBACF3D,KAAKgE,QAAQH,KAAK,CACjBC,UAAWnD,EAAeC,KAC1BuB,MAAOnC,KAAKmC,MACZT,QAAS1B,KAAK0B,QACdqC,cAAeL,IAIT5D,gBAAgB4D,GACvB1D,KAAK0B,QAAWgC,EAAEO,OAA4BvC,QAC9CgC,EAAEC,kBACF3D,KAAKkE,UAAUL,KAAK,CACnBC,UAAWnD,EAAeC,KAC1BuB,MAAOnC,KAAKmC,MACZT,QAAS1B,KAAK0B,QACdqC,cAAeL,IAQjB5D,eACC,OAAOE,KAAKgD,SAOblD,qBACCqE,EAAgBnE,KAAKqD,gBAAiB,oBAAqB1C,EAAeC,MAC1EuD,EAAgBnE,KAAKuD,eAAgB,mBAAoB5C,EAAeC,MACxEwD,EAAqBpE,KAAKe,YAAcf,KAAKC,QAASD,KAAKuD,eAAgB5C,EAAeC","sourcesContent":["/*\n * Radio\n */\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-radio\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t\t&::after {\n\t\t\t@include pseudo();\n\t\t\tborder-radius: 50%;\n\t\t\tbackground: $form-radio-indicator-bg;\n\t\t\topacity: 0;\n\t\t\ttransition: $t linear opacity;\n\t\t}\n\t}\n\n\t// STATES\n\tinput:checked + span::after {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput + span::after {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::after {\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\tinput + span::after {\n\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"dot-size\", $definitions)) / 2);\n\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"dot-size\", $definitions)) / 2);\n\t\t\t\twidth: get(\"dot-size\", $definitions);\n\t\t\t\theight: get(\"dot-size\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch, Method } from '@stencil/core'\nimport { createID } from '../../../utils/string.utils'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { FormRadioClass, FormRadioSizes, FormRadioSizesType } from './constants'\nimport { toBoolAttrIfDefined } from '../../../helpers/Dom/template'\nimport { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../../helpers/Dom/win'\nimport { delay } from '../../../utils/utils'\nimport { GovForm } from '../../../helpers/Dom/form.types'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\nimport { govForm } from '../../../helpers/Dom/form'\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormRadioEvent } from \"./gov-form-radio.types\"\n\n@Component({\n\ttag: 'gov-form-radio',\n\tstyleUrl: 'gov-form-radio.scss',\n})\nexport class GovFormRadio {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\n\tprivate readonly radioId: string\n\n\tconstructor() {\n\t\tthis.radioId = createID('GovRadio')\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormRadioElement\n\t/**\n\t * Value of radio\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Radio default state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = false\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 radio component disabled.\n\t * This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the radio.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Radio's size.\n\t */\n\t@Prop() readonly size?: FormRadioSizesType = 'm'\n\t/**\n\t * Custom radio identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\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 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 * Emitted when the radio has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FormRadioEvent>\n\t/**\n\t * Emitted when the radio loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FormRadioEvent>\n\t/**\n\t * Emitted when the radio change value.\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<FormRadioEvent>\n\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormRadioSizes, newValue, FormRadioClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToControl('type', 'radio')\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel('identifier', this.identifier || this.radioId)\n\t\tthis.f.passAttrToLabel('required', String(this.required))\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\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormRadioClass.root} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<div class={FormRadioClass.holder}>\n\t\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={FormRadioClass.input}\n\t\t\t\t\t\t\t\tid={this.identifier || this.radioId}\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.checked}\n\t\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormRadioClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormRadioClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormRadioClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\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.wcagDescribedBy, 'wcag-described-by', FormRadioClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormRadioClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.radioId, this.wcagLabelledBy, FormRadioClass.root)\n\t}\n}\n"]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as o,c as i,h as t,H as e,g as r}from"./p-4af5e4f4.js";import{g as n,h as a,i as s,j as l}from"./p-fd2f10eb.js";import{c as v}from"./p-24636c53.js";import{g,t as c,c as p}from"./p-3f37ddb6.js";import{v as m}from"./p-26acf964.js";import{c as f}from"./p-c20102ff.js";import{d as u}from"./p-03990da5.js";import{b as d,c as h}from"./p-670b4f93.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-ef79904e.js";import"./p-6278531b.js";import"./p-9dab01be.js";import"./p-3464136c.js";import"./p-561fa17b.js";const x='.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-input{position:relative;display:flex;width:100%;align-items:center}.gov-form-input .element{position:relative;display:flex;flex:1 1 auto}.gov-form-input input,.gov-form-input select,.gov-form-input textarea{width:100%;border:var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-form-bg-color, var(--gov-color-neutral-white));color:var(--gov-form-input-color, var(--gov-color-secondary-700));font-family:var(--gov-font-family, "Roboto", sans-serif)}.gov-form-input input:focus,.gov-form-input select:focus,.gov-form-input textarea:focus{outline:none}.gov-form-input input:focus-visible,.gov-form-input select:focus-visible,.gov-form-input textarea:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-form-input input::-moz-placeholder,.gov-form-input select::-moz-placeholder,.gov-form-input textarea::-moz-placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-input input::placeholder,.gov-form-input select::placeholder,.gov-form-input textarea::placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-input textarea{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);padding:0.5rem 0.75rem;resize:none}.gov-form-input *[slot=left-icon],.gov-form-input *[slot=right-icon]{position:absolute;top:50%;display:flex;justify-content:center;color:var(--gov-form-input-icon-color, var(--gov-color-primary));transform:translateY(-50%);pointer-events:none}.gov-form-input *[slot=left-icon]{left:0}.gov-form-input *[slot=right-icon]{right:0}[disabled=""].gov-form-input,[disabled=true i].gov-form-input,[disabled="1"].gov-form-input{pointer-events:none}[disabled=""].gov-form-input input,[disabled=""].gov-form-input select,[disabled=""].gov-form-input textarea,[disabled=true i].gov-form-input input,[disabled=true i].gov-form-input select,[disabled=true i].gov-form-input textarea,[disabled="1"].gov-form-input input,[disabled="1"].gov-form-input select,[disabled="1"].gov-form-input textarea{border-color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=""].gov-form-input *[slot=left-icon],[disabled=""].gov-form-input *[slot=right-icon],[disabled=true i].gov-form-input *[slot=left-icon],[disabled=true i].gov-form-input *[slot=right-icon],[disabled="1"].gov-form-input *[slot=left-icon],[disabled="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[invalid=""].gov-form-input input,[invalid=""].gov-form-input select,[invalid=""].gov-form-input textarea,[invalid=true i].gov-form-input input,[invalid=true i].gov-form-input select,[invalid=true i].gov-form-input textarea,[invalid="1"].gov-form-input input,[invalid="1"].gov-form-input select,[invalid="1"].gov-form-input textarea{border-color:var(--gov-form-state-color-error, var(--gov-color-error));color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=""].gov-form-input input::-moz-placeholder,[invalid=""].gov-form-input select::-moz-placeholder,[invalid=""].gov-form-input textarea::-moz-placeholder,[invalid=true i].gov-form-input input::-moz-placeholder,[invalid=true i].gov-form-input select::-moz-placeholder,[invalid=true i].gov-form-input textarea::-moz-placeholder,[invalid="1"].gov-form-input input::-moz-placeholder,[invalid="1"].gov-form-input select::-moz-placeholder,[invalid="1"].gov-form-input textarea::-moz-placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-input input::placeholder,[invalid=""].gov-form-input select::placeholder,[invalid=""].gov-form-input textarea::placeholder,[invalid=true i].gov-form-input input::placeholder,[invalid=true i].gov-form-input select::placeholder,[invalid=true i].gov-form-input textarea::placeholder,[invalid="1"].gov-form-input input::placeholder,[invalid="1"].gov-form-input select::placeholder,[invalid="1"].gov-form-input textarea::placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-input *[slot=left-icon],[invalid=""].gov-form-input *[slot=right-icon],[invalid=true i].gov-form-input *[slot=left-icon],[invalid=true i].gov-form-input *[slot=right-icon],[invalid="1"].gov-form-input *[slot=left-icon],[invalid="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-error, var(--gov-color-error))}[success=""].gov-form-input *[slot=right-icon],[success=true i].gov-form-input *[slot=right-icon],[success="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-success, var(--gov-color-success))}[success=""].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=true i].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success="1"].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[size=m].gov-form-input{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-input input,[size=m].gov-form-input select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-m-height, 2.5rem);padding:var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem)}[size=m].gov-form-input *[slot=left-icon],[size=m].gov-form-input *[slot=right-icon]{width:var(--gov-form-input-core-m-icon-size, 1rem);height:var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-input *[slot=left-icon]{left:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=m].gov-form-input *[slot=right-icon]{right:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-input *[slot=right-icon]~input,[size=m].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=l].gov-form-input{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-input input,[size=l].gov-form-input select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-l-height, 3rem);padding:var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem)}[size=l].gov-form-input *[slot=left-icon],[size=l].gov-form-input *[slot=right-icon]{width:var(--gov-form-input-core-l-icon-size, 1rem);height:var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-input *[slot=left-icon]{left:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=l].gov-form-input *[slot=right-icon]{right:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-input *[slot=right-icon]~input,[size=l].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=xl].gov-form-input{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);gap:0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-input input,[size=xl].gov-form-input select{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);height:var(--gov-form-input-core-xl-height, 3.5rem);padding:var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem)}[size=xl].gov-form-input *[slot=left-icon],[size=xl].gov-form-input *[slot=right-icon]{width:var(--gov-form-input-core-xl-icon-size, 1.25rem);height:var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-input *[slot=left-icon]{left:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-xl-icon-padding, 3rem)}[size=xl].gov-form-input *[slot=right-icon]{right:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-input *[slot=right-icon]~input,[size=xl].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-xl-icon-padding, 3rem)}.gov-form-input[invalid=""] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),.gov-form-input[invalid=true i] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),.gov-form-input[invalid="1"] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}.gov-form-input[type=reset] input{border-width:0}.gov-form-input[type=reset] input:focus{outline:none}';var z;(function(o){o["INPUT"]="input";o["TEXTAREA"]="textarea"})(z||(z={}));const b=class{constructor(t){o(this,t);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govInput=i(this,"gov-input",7);this.govKeyUp=i(this,"gov-keyup",7);this.govKeyDown=i(this,"gov-keydown",7);this.value=undefined;this.identifier=undefined;this.variant=undefined;this.success=undefined;this.size="m";this.name=undefined;this.multiline=undefined;this.rows=undefined;this.cols=undefined;this.required=false;this.disabled=undefined;this.placeholder=undefined;this.readonly=undefined;this.minlength=undefined;this.maxlength=undefined;this.autocomplete=undefined;this.autocorrect=undefined;this.type=undefined;this.inputType="text";this.role=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.wcagAutocomplete=undefined;this.wcagExpanded=undefined;this.focused=undefined;this.h=g(this.host);this.inputId=v("GovInput");this.f=n(g(this.host))}validateVariant(o){m(s,o,a.root)}validateSize(o){m(l,o,a.root)}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size);this.f.passAttrToControl("type",this.multiline?z.TEXTAREA:z.INPUT);this.f.passAttrToLabel("required",String(this.required))}async componentDidRender(){if(f()){await u(500);await this.validateWcag()}}render(){const o=this.multiline?z.TEXTAREA:z.INPUT;return t(e,{class:a.root,size:this.size,variant:this.variant,type:this.type},this.h.hasSlot("prefix")&&t("slot",{name:"prefix"}),t("span",{class:"element"},this.h.hasSlot("left-icon")&&t("slot",{name:"left-icon"}),this.h.hasSlot("right-icon")&&!(this.success||this.invalid)&&t("slot",{name:"right-icon"}),this.success&&!this.multiline&&t("gov-icon",{slot:"right-icon",class:"icon-validation",name:"check-lg"}),this.invalid&&!this.multiline&&t("gov-icon",{slot:"right-icon",class:"icon-validation",name:"exclamation-lg"}),t(o,{type:this.inputType,disabled:this.disabled,id:this.identifier||this.inputId,name:this.name,onFocus:this.onFocusHandler.bind(this),onInput:this.onInputHandler.bind(this),onBlur:this.onBlurHandler.bind(this),onKeyUp:this.onKeyUpHandler.bind(this),onKeyDown:this.onKeyDownHandler.bind(this),ref:o=>this.inputRef=o,placeholder:this.placeholder,value:this.value,readonly:c(this.readonly),autocomplete:p(this.autocomplete),autocorrect:p(this.autocorrect),minlength:this.minlength,maxlength:this.maxlength,required:this.required,rows:this.rows,cols:this.cols,role:this.role,"aria-required":c(this.required),"aria-invalid":c(this.invalid),"aria-disabled":c(this.disabled),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-owns":this.wcagOwns,"aria-expanded":c(this.wcagExpanded),"aria-autocomplete":this.wcagAutocomplete})),this.h.hasSlot("sufix")&&t("slot",{name:"sufix"}))}onFocusHandler(o){o.stopPropagation();this.focused=true;this.govFocus.emit({component:a.root,value:this.value,originalEvent:o})}onBlurHandler(o){o.stopPropagation();this.focused=false;this.govBlur.emit({component:a.root,value:this.value,originalEvent:o})}onKeyUpHandler(o){o.stopPropagation();this.govKeyUp.emit({component:a.root,value:this.value,originalEvent:o})}onKeyDownHandler(o){o.stopPropagation();this.govKeyDown.emit({component:a.root,value:this.value,originalEvent:o})}onInputHandler(o){this.value=o.target.value;o.stopPropagation();this.govInput.emit({component:a.root,value:this.value,originalEvent:o})}async setFocus(o){return this.inputRef.focus(o)}async setValue(o){this.value=o}async clearValue(){this.value="";this.inputRef.value=""}async getRef(){return this.inputRef}async validateWcag(){d(this.wcagDescribedBy,"wcag-described-by",a.root);d(this.wcagLabelledBy,"wcag-labelled-by",a.root);d(this.wcagOwns,"wcag-owns",a.root);h(this.identifier||this.inputId,this.wcagLabelledBy,a.root)}get host(){return r(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize"]}}};b.style=x;export{b as gov_form_input};
|
|
2
|
-
//# sourceMappingURL=p-4687e822.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-form/input/gov-form-input.scss?tag=gov-form-input","../../../packages/core/src/components/gov-form/input/gov-form-input.tsx"],"names":["govFormInputCss","Tags","GovFormInput","[object Object]","hostRef","this","h","govHost","host","inputId","createID","f","govForm","newValue","validateProp","FormInputVariants","FormInputClass","root","FormInputSizes","validateVariant","variant","validateSize","size","passAttrToControl","multiline","TEXTAREA","INPUT","passAttrToLabel","String","required","canValidateWcagOnRender","delay","validateWcag","Tag","Host","class","type","hasSlot","name","success","invalid","slot","inputType","disabled","id","identifier","onFocus","onFocusHandler","bind","onInput","onInputHandler","onBlur","onBlurHandler","onKeyUp","onKeyUpHandler","onKeyDown","onKeyDownHandler","ref","el","inputRef","placeholder","value","readonly","toBoolAttrIfDefined","autocomplete","toOnOffAttrIfDefined","autocorrect","minlength","maxlength","rows","cols","role","aria-required","aria-invalid","aria-disabled","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-owns","wcagOwns","aria-expanded","wcagExpanded","aria-autocomplete","wcagAutocomplete","e","stopPropagation","focused","govFocus","emit","component","originalEvent","govBlur","govKeyUp","govKeyDown","target","govInput","options","focus","validateWcagRef","validateWcagLabelFor"],"mappings":"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","sourcesContent":["/*\n * Input\n */\n\n@import \"../input/gov-form-input-core.scss\";\n$class: \".gov-form-input\";\n\n#{$class} {\n\t@extend %form-input-core;\n\n\t// STATES\n\t@include parameter(\"invalid\") {\n\t\t*[slot=\"right-icon\"]:not(.icon-validation):not(.icon-arrow) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t&[type=\"reset\"] {\n\t\tinput {\n\t\t\tborder-width: 0;\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { GovHost } from '../../../helpers/Dom/template.types'\nimport { FormInputSizes, FormInputSizesType, InputType, Type } from './constants'\nimport { createID } from '../../../utils/string.utils'\nimport { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from '../../../helpers/Dom/template'\nimport { FormInputClass, FormInputVariants, FormInputVariantType } from './constants'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { canValidateWcagOnRender } from '../../../helpers/Dom/win'\nimport { delay } from '../../../utils/utils'\nimport { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag'\nimport { GovForm } from '../../../helpers/Dom/form.types'\nimport { govForm } from '../../../helpers/Dom/form'\nimport { FormInputEvent } from \"./gov-form-input.types\"\n\nenum Tags {\n\tINPUT = 'input',\n\tTEXTAREA = 'textarea',\n}\n\n@Component({\n\ttag: 'gov-form-input',\n\tstyleUrl: 'gov-form-input.scss',\n})\nexport class GovFormInput {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly inputId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.inputId = createID('GovInput')\n\t\tthis.f = govForm(govHost(this.host))\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant?: FormInputVariantType\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size?: FormInputSizesType = 'm'\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Generates a texarea for the possibility of multiple lines\n\t */\n\t@Prop() readonly multiline: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n\t */\n\t@Prop() readonly rows: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols\n\t */\n\t@Prop() readonly cols: number\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 input 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 * Text that appears in the form control when it has no value set\n\t */\n\t@Prop() readonly placeholder: string\n\t/**\n\t * The value is not editable\n\t */\n\t@Prop() readonly readonly: boolean\n\t/**\n\t * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete\n\t */\n\t@Prop() readonly autocomplete: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocorrect\n\t */\n\t@Prop() readonly autocorrect: boolean\n\t/**\n\t * Defineds the visual style of input\n\t */\n\t@Prop() readonly type?: Type\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n\t */\n\t@Prop() readonly inputType: InputType = 'text'\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role\n\t */\n\t@Prop() readonly role: string\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 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 * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value.\n\t */\n\t@Prop({ attribute: 'wcag-autocomplete' }) readonly wcagAutocomplete: string\n\t/**\n\t * Attribute is set on an element to indicate if a control is expanded or collapsed\n\t */\n\t@Prop({ attribute: 'wcag-expanded' }) readonly wcagExpanded: boolean\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-input' }) govInput: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-keyup' }) govKeyUp: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-keydown' }) govKeyDown: EventEmitter<FormInputEvent>\n\t@State() focused: boolean\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormInputVariants, newValue, FormInputClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormInputSizes, newValue, FormInputClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.f.passAttrToControl('type', this.multiline ? Tags.TEXTAREA : Tags.INPUT)\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\tconst Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT\n\n\t\treturn (\n\t\t\t<Host class={FormInputClass.root} size={this.size} variant={this.variant} type={this.type}>\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{this.h.hasSlot('left-icon') && <slot name=\"left-icon\" />}\n\n\t\t\t\t\t{this.h.hasSlot('right-icon') && !(this.success || this.invalid) && <slot name=\"right-icon\" />}\n\n\t\t\t\t\t{this.success && !this.multiline && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"check-lg\"></gov-icon>}\n\t\t\t\t\t{this.invalid && !this.multiline && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"exclamation-lg\"></gov-icon>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tid={this.identifier || this.inputId}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonInput={this.onInputHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\tonKeyUp={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\t\tonKeyDown={this.onKeyDownHandler.bind(this)}\n\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\treadonly={toBoolAttrIfDefined(this.readonly)}\n\t\t\t\t\t\tautocomplete={toOnOffAttrIfDefined(this.autocomplete)}\n\t\t\t\t\t\tautocorrect={toOnOffAttrIfDefined(this.autocorrect)}\n\t\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trole={this.role}\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-disabled={toBoolAttrIfDefined(this.disabled)}\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\taria-expanded={toBoolAttrIfDefined(this.wcagExpanded)}\n\t\t\t\t\t\taria-autocomplete={this.wcagAutocomplete}\n\t\t\t\t\t/>\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\te.stopPropagation()\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormInputClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormInputClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onKeyUpHandler(e: KeyboardEvent) {\n\t\te.stopPropagation()\n\t\tthis.govKeyUp.emit({\n\t\t\tcomponent: FormInputClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onKeyDownHandler(e: KeyboardEvent) {\n\t\te.stopPropagation()\n\t\tthis.govKeyDown.emit({\n\t\t\tcomponent: FormInputClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit({\n\t\t\tcomponent: FormInputClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\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.inputRef.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 * Clears input value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\t}\n\n\t/**\n\t * Returns an instance of the native html input element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\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.wcagDescribedBy, 'wcag-described-by', FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, 'wcag-owns', FormInputClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root)\n\t}\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.scss?tag=gov-tile","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"names":["TileClass","root","icon","arrow","title","link","content","heading","govTileCss","GovTile","[object Object]","hostRef","this","h","govHost","host","newValue","govErrorLog","validateName","name","Host","class","classes","promotion","href","hasSlot"],"mappings":"iIAAO,MAAMA,EAAY,CACxBC,KAAM,WACNC,KAAM,iBACNC,MAAO,kBACPC,MAAO,kBACPC,KAAM,iBACNC,QAAS,oBACTC,QAAS,qBCPV,MAAMC,EAAa,27ECUNC,EAAO,MAGnBC,YAAAC,4BAQsC,8CAPrCC,KAAKC,EAAIC,EAAQF,KAAKG,MAkBvBL,aAAaM,GACZ,IAAKA,EAAU,CACdC,EAAY,IAAIjB,EAAUC,wCAI5BS,oBACCE,KAAKM,aAAaN,KAAKO,MAGxBT,SAEC,OACCG,EAACO,EAAI,CAACC,MAAOT,KAAKC,EAAES,QAAQtB,EAAUC,MAAOsB,UAAWX,KAAKW,WAC3DX,KAAKY,KACLX,EAAA,IAAA,CAAGW,KAAMZ,KAAKY,KAAMH,MAAOrB,EAAUK,MACnCO,KAAKC,EAAEY,QAAQ,SACfZ,EAAA,MAAA,CAAKQ,MAAOrB,EAAUE,MACrBW,EAAA,OAAA,CAAMM,KAAK,UAGbN,EAAA,KAAA,CAAIQ,MAAOrB,EAAUI,OACpBS,EAAA,OAAA,CAAMQ,MAAOrB,EAAUO,SACrBK,KAAKO,KACNN,EAAA,WAAA,CAAUQ,MAAOrB,EAAUG,MAAOgB,KAAK,oBAGzCN,EAAA,MAAA,CAAKQ,MAAOrB,EAAUM,SACrBO,EAAA,OAAA,QAIFA,EAAA,OAAA,KACED,KAAKC,EAAEY,QAAQ,SACfZ,EAAA,MAAA,CAAKQ,MAAOrB,EAAUE,MACrBW,EAAA,OAAA,CAAMM,KAAK,UAGbN,EAAA,KAAA,CAAIQ,MAAOrB,EAAUI,OACnBS,EAAA,OAAA,KAAOD,KAAKO,OAEdN,EAAA,MAAA,CAAKQ,MAAOrB,EAAUM,SACrBO,EAAA,OAAA","sourcesContent":["export const TileClass = {\n\troot: 'gov-tile',\n\ticon: 'gov-tile__icon',\n\tarrow: 'gov-tile__arrow',\n\ttitle: 'gov-tile__title',\n\tlink: 'gov-tile__link',\n\tcontent: 'gov-tile__content',\n\theading: 'gov-tile__heading',\n}\n","/*\n * Tile\n */\n\n$class: \".gov-tile\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(12);\n\ttransition: background-color $t;\n\t&__icon {\n\t\tdisplay: flex;\n\t\tmargin: rem-calc(0 0 12);\n\t\tcolor: $tile-main-color;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(40);\n\t\t\theight: rem-calc(40);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-xl);\n\t\tmargin: 0 0 rem-calc(8);\n\t}\n\t&__heading {\n\t\t@extend %link-mask;\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tjustify-content: space-between;\n\t\tcolor: $tile-main-color;\n\t\ttext-decoration: none;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(12);\n\t\theight: rem-calc(32);\n\t\tmargin: rem-calc(8);\n\t\tcolor: inherit;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tcolor: $tile-text-color;\n\t\ta {\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t&__link {\n\t\tdisplay: block;\n\t\ttext-decoration: none;\n\t}\n\n\t// HOVERS\n\t&[href] {\n\t\t@include hover() {\n\t\t\tbackground: $tile-hover-bg;\n\t\t\t#{$class} {\n\t\t\t\t&__heading {\n\t\t\t\t\tcolor: $tile-main-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto 1fr;\n\t\t\tgap: 0 rem-calc(14);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tgrid-area: 1/1/3/1;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\tgrid-area: 1/2/1/2;\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tgrid-area: 2/2/2/2;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(24);\n\t\t&__icon {\n\t\t\tmargin: rem-calc(0 0 24);\n\t\t\t.gov-icon {\n\t\t\t\twidth: rem-calc(48);\n\t\t\t\theight: rem-calc(48);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tgap: 0 rem-calc(26);\n\t\t}\n\t}\n}\n","\timport { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { TileClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tile',\n\tstyleUrl: 'gov-tile.scss',\n})\nexport class GovTile {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovTileElement\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Link on whole tile\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Item name\n\t */\n\t@Prop() readonly name: string\n\n\t@Watch('name')\n\tvalidateName(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${TileClass.root}]: Parameter title is required.`)\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateName(this.name)\n\t}\n\n\trender() {\n\t\t// tag type\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TileClass.root)} promotion={this.promotion}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<a href={this.href} class={TileClass.link}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t<div class={TileClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<h3 class={TileClass.title}>\n\t\t\t\t\t\t\t<span class={TileClass.heading}>\n\t\t\t\t\t\t\t\t{this.name}\n\t\t\t\t\t\t\t\t<gov-icon class={TileClass.arrow} name=\"chevron-right\"></gov-icon>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t<div class={TileClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<h3 class={TileClass.title}>\n\t\t\t\t\t\t\t\t<span>{this.name}</span>\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.scss?tag=gov-form-autocomplete","../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"names":["govFormAutocompleteCss","GovFormAutocomplete","[object Object]","hostRef","this","templateResolver","item","nameKey","listBoxId","createID","newValue","validateProp","FormAutocompleteVariants","FormAutocompleteClass","root","FormAutocompleteSizes","arrowCounter","moveToView","finally","list","length","delay","heightOfList","listRef","offsetHeight","selected","querySelector","offsetTop","scrollTo","top","behavior","Number","isInteger","minlength","isValueAccepted","processing","searchCallback","value","then","response","catch","console","log","validateVariant","variant","validateSize","size","h","Host","class","placeholder","name","disabled","readonly","autocomplete","required","invalid","role","maxlength","on-gov-input","throttle","onInputHandler","bind","on-gov-keyup","onKeyUpHandler","on-gov-keydown","onKeyDownHandler","on-gov-focus","onFocusHandler","on-gov-blur","onBlurHandler","wcagAutocomplete","wcagDescribedBy","wcagLabelledBy","wcagOwns","join","wcagExpanded","focused","ref","el","inputRef","slot","id","messageEmpty","empty","loading","messageLoading","map","index","isSelected","innerHTML","aria-posinset","tabindex","aria-setsize","onClick","onSelectHandler","aria-selected","toBoolAttr","e","doSearch","stopPropagation","govFocus","emit","originalEvent","component","setTimeout","govBlur","target","govInput","has","govSelect","event","detail","keyCode","onArrowUp","onArrowDown","preventDefault","options","focus","Array","isArray","clearValue","status","callback"],"mappings":"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","sourcesContent":["$class: \".gov-form-autocomplete\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@include typography($font-size-s);\n\t\t@extend %reset-ul;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: 5;\n\t\tmax-height: rem-calc(225);\n\t\tmargin-top: rem-calc(8);\n\t\tborder: $form-autocomplete-border;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $form-autocomplete-bg;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: none;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tpadding: rem-calc(12 8);\n\t\tcursor: pointer;\n\t}\n\t&__item {\n\t\t&--empty,\n\t\t&--loading {\n\t\t\tpadding: rem-calc(12 8);\n\t\t\tcolor: $form-autocomplete-item-disable-color;\n\t\t\t& .gov-icon {\n\t\t\t\theight: 12px;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t&__list:empty {\n\t\tdisplay: none;\n\t}\n\n\t// HOVERS\n\t&__item {\n\t\t@include parameter(\"aria-selected\") {\n\t\t\tbackground: $form-autocomplete-item-select-bg;\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $form-autocomplete-item-hover-bg;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay, has, throttle } from \"../../../utils/utils\"\nimport { FormInputEvent } from \"../input/gov-form-input.types\"\nimport {\n\tFormAutocompleteClass,\n\tFormAutocompleteSizes,\n\tFormAutocompleteVariants,\n\tSizesType,\n\tVariantType,\n} from \"./constants\"\nimport { FormAutocompleteEvent, GovFormAutocompleteItem } from \"./gov-form-autocomplete.types\"\n\n@Component({\n\ttag: \"gov-form-autocomplete\",\n\tstyleUrl: \"gov-form-autocomplete.scss\",\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate listRef?: HTMLUListElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean) => string = item => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID(\"GovListBox\")\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value = \"\"\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant?: VariantType\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size?: SizesType = \"m\"\n\t/**\n\t * Main key name in the object\n\t */\n\t@Prop() readonly nameKey: string = \"name\"\n\t/**\n\t * Name of the input.\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 input 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 * Text that appears in the form control when it has no value set\n\t */\n\t@Prop() readonly placeholder: string\n\t/**\n\t * The value is not editable\n\t */\n\t@Prop() readonly readonly: 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 * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number = 3\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\n\t/**\n\t * Custom message for when there is a blank sheet\n\t */\n\t@Prop({ attribute: \"message-empty\" }) readonly messageEmpty: string = \"Nebyly nalezeny žádné výsledky\"\n\t/**\n\t * Custom message for when data is loaded\n\t */\n\t@Prop({ attribute: \"message-loading\" }) readonly messageLoading: string = \"Načítám...\"\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 * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-input\" }) govInput: EventEmitter<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-select\" }) govSelect: EventEmitter<FormAutocompleteEvent>\n\t@State() focused: boolean\n\t@State() processing = false\n\t@State() arrowCounter = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormAutocompleteVariants, newValue, FormAutocompleteClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormAutocompleteSizes, newValue, FormAutocompleteClass.root)\n\t}\n\n\tprivate onArrowUp() {\n\t\tif (this.arrowCounter > 0) {\n\t\t\tthis.arrowCounter = this.arrowCounter - 1\n\t\t\tthis.moveToView().finally()\n\t\t}\n\t}\n\n\tprivate onArrowDown() {\n\t\tif (this.arrowCounter < this.list.length - 1) {\n\t\t\tthis.arrowCounter = this.arrowCounter + 1\n\t\t\tthis.moveToView().finally()\n\t\t}\n\t}\n\n\tprivate async moveToView() {\n\t\tawait delay(200)\n\t\tconst heightOfList = this.listRef.offsetHeight\n\t\tconst selected = this.listRef.querySelector(\"li[aria-selected=\\\"true\\\"]\") as HTMLUListElement\n\t\tif (selected && heightOfList) {\n\t\t\tconst offsetTop = selected.offsetTop\n\t\t\tthis.listRef.scrollTo({ top: offsetTop, behavior: \"smooth\" })\n\t\t}\n\t}\n\n\tprivate doSearch() {\n\t\tif (Number.isInteger(this.minlength) && this.isValueAccepted === false && this.minlength) {\n\t\t\tthis.list = []\n\t\t\tthis.arrowCounter = -1\n\t\t\tthis.processing = false\n\t\t\treturn\n\t\t}\n\t\tif (this.searchCallback) {\n\t\t\tthis.processing = true\n\t\t\tthis.searchCallback(this.value)\n\t\t\t\t.then(response => (this.list = response))\n\t\t\t\t.catch(() => (this.list = []))\n\t\t\t\t.finally(() => {\n\t\t\t\t\tthis.arrowCounter = -1\n\t\t\t\t\tthis.processing = false\n\t\t\t\t})\n\t\t}\n\t}\n\n\tget isValueAccepted() {\n\t\tif (typeof this.value === \"string\") {\n\t\t\tconsole.log('1', this.value.length >= this.minlength);\n\t\t\treturn this.value.length >= this.minlength\n\t\t} else {\n\t\t\tconsole.log('0', false);\n\t\t\treturn false\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormAutocompleteClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<gov-form-input\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tautocomplete={false}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\trequired={this.required}\n\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\trole={\"searchbox\"}\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\ton-gov-input={throttle(this.onInputHandler.bind(this), 200)}\n\t\t\t\t\ton-gov-keyup={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\ton-gov-keydown={this.onKeyDownHandler.bind(this)}\n\t\t\t\t\ton-gov-focus={this.onFocusHandler.bind(this)}\n\t\t\t\t\ton-gov-blur={this.onBlurHandler.bind(this)}\n\t\t\t\t\twcagAutocomplete={\"list\"}\n\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\twcagOwns={[this.listBoxId, this.wcagOwns].join(\" \")}\n\t\t\t\t\twcagExpanded={this.list.length && this.focused}\n\t\t\t\t\tref={el => (this.inputRef = el as HTMLGovFormInputElement)}\n\t\t\t\t>\n\t\t\t\t\t<slot slot=\"right-icon\" name=\"right-icon\" />\n\t\t\t\t</gov-form-input>\n\t\t\t\t<ul class={FormAutocompleteClass.list}\n\t\t\t\t role={\"listbox\"}\n\t\t\t\t id={this.listBoxId}\n\t\t\t\t ref={el => (this.listRef = el as HTMLUListElement)}>\n\t\t\t\t\t{this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (\n\t\t\t\t\t\t<li class={FormAutocompleteClass.empty}>\n\t\t\t\t\t\t\t{this.messageEmpty}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{this.focused && this.processing === true && this.isValueAccepted ? (\n\t\t\t\t\t\t<li class={FormAutocompleteClass.loading}>\n\t\t\t\t\t\t\t<gov-icon name=\"loader\" class=\"gov-spin-animation\"></gov-icon>\n\t\t\t\t\t\t\t {this.messageLoading}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{this.list.map((item, index) => {\n\t\t\t\t\t\tconst isSelected = this.arrowCounter === index\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tclass={FormAutocompleteClass.item}\n\t\t\t\t\t\t\t\tinnerHTML={this.templateResolver(item, isSelected)}\n\t\t\t\t\t\t\t\trole={\"option\"}\n\t\t\t\t\t\t\t\taria-posinset={index}\n\t\t\t\t\t\t\t\ttabindex={isSelected ? 0 : -1}\n\t\t\t\t\t\t\t\taria-setsize={this.list.length}\n\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(index)}\n\t\t\t\t\t\t\t\taria-selected={toBoolAttr(isSelected)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.arrowCounter = -1\n\t\tif ((this.value || this.minlength === 0) && this.searchCallback) {\n\t\t\tthis.doSearch()\n\t\t}\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => (this.list = []), 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null,\n\t\t})\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null,\n\t\t})\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index = -1) {\n\t\tlet selected: Nullable<GovFormAutocompleteItem> = null\n\t\tif (index > -1) {\n\t\t\tselected = this.list[index]\n\t\t} else if (has(this.arrowCounter, this.list)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif (selected) {\n\t\t\tthis.govSelect.emit({\n\t\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\t\tvalue: this.value,\n\t\t\t\tselected: selected,\n\t\t\t})\n\t\t\tthis.list = []\n\t\t\tif (has(this.nameKey, selected) && typeof selected[this.nameKey] === \"string\") {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = (e.detail as FormInputEvent).originalEvent as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) {\n\t\t\te.preventDefault()\n\t\t\tthis.onSelectHandler()\n\t\t}\n\t}\n\n\tprivate onKeyDownHandler(e: CustomEvent) {\n\t\tconst event = (e.detail as FormInputEvent).originalEvent as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 13) {\n\t\t\te.preventDefault()\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.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Set options for list\n\t */\n\t@Method()\n\tasync setOptions(options: GovFormAutocompleteItem[]): Promise<void> {\n\t\tthis.list = Array.isArray(options) ? options : []\n\t\tthis.arrowCounter = -1\n\t}\n\n\t/**\n\t * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = \"\"\n\t\tthis.inputRef.value = \"\"\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Clears whisperer value\n\t */\n\t@Method()\n\tasync setProcessing(status: boolean): Promise<void> {\n\t\tthis.processing = status\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-form/label/gov-form-label.scss?tag=gov-form-label","../../../packages/core/src/components/gov-form/label/gov-form-label.tsx"],"names":["govFormLabelCss","GovFormLabel","[object Object]","Tag","this","legend","h","Host","class","FormLabelClass","root","size","label","htmlFor","identifier","onClick","govClick","emit","required"],"mappings":"6IAAA,MAAMA,EAAkB,qhBCOXC,EAAY,uGAQsB,kBAIT,kBAKF,MAMnCC,SACC,MAAMC,EAAMC,KAAKC,OAAS,SAAW,QACrC,OACCC,EAACC,EAAI,CAACC,MAAOC,EAAeC,KAAMC,KAAMP,KAAKO,MAC5CL,EAACH,EAAG,CAACK,MAAOC,EAAeG,MAAOC,QAAST,KAAKU,WAAYC,QAAS,IAAMX,KAAKY,SAASC,QACxFX,EAAA,OAAA,MACCF,KAAKc,SAAYZ,EAAA,OAAA,CAAME,MAAM,yBAAuB,KAAa","sourcesContent":["/*\n * Label\n */\n\n$class: \".gov-form-label\";\n\n#{$class} {\n\t@include base(flex);\n\t&__label {\n\t\tdisplay: inline-block;\n\t\tcolor: $form-label-color;\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\t}\n}\n","import { Component, Event, EventEmitter, h, Prop, Host } from '@stencil/core'\nimport { FormLabelClass, FormLabelSizesTypes } from \"./constants\"\n\n@Component({\n\ttag: 'gov-form-label',\n\tstyleUrl: 'gov-form-label.scss',\n})\nexport class GovFormLabel {\n\t/**\n\t * Identifier for label.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Label's size.\n\t */\n\t@Prop() readonly size?: FormLabelSizesTypes = 'm'\n\t/**\n\t * Set whether the input is required or not.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Use label as a legend for better accessibility.\n\t * Note: Don't forget to set the fieldset attribute of the gov-form-control component\n\t */\n\t@Prop() readonly legend: boolean = false\n\t/**\n\t * Emitted when the label click.\n\t */\n\t@Event({ eventName: 'gov-click' }) govClick: EventEmitter<PointerEvent>\n\n\trender() {\n\t\tconst Tag = this.legend ? 'legend' : 'label'\n\t\treturn (\n\t\t\t<Host class={FormLabelClass.root} size={this.size}>\n\t\t\t\t<Tag class={FormLabelClass.label} htmlFor={this.identifier} onClick={() => this.govClick.emit()}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.required ? (<span class=\"gov-color--danger-500\">*</span>) : null}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-badge/constants.ts","../../../packages/core/src/components/gov-badge/gov-badge.scss?tag=gov-badge","../../../packages/core/src/components/gov-badge/gov-badge.tsx"],"names":["NativeType","BadgeClass","root","inner","hasRight","hasLeft","govBadgeCss","GovBadge","[object Object]","hostRef","this","h","govHost","host","newValue","validateProp","ButtonVariants","ButtonSizes","Type","validateVariant","variant","validateSize","size","validateType","type","Tag","href","A","tag","nativeType","BUTTON","undefined","Host","class","classes","hasSlot","disabled","inverse","hoverable","target","aria-label","wcagLabel","onClick","onClickHandler","bind","name","e","stopPropagation","govClick","emit"],"mappings":"0RAEA,IAAYA,GAAZ,SAAYA,GACXA,EAAA,KAAA,IACAA,EAAA,QAAA,OACAA,EAAA,UAAA,UAHD,CAAYA,IAAAA,EAAU,KAQf,MAAMC,EAAa,CACzBC,KAAM,YACNC,MAAO,mBACPC,SAAU,uBACVC,QAAS,uBCdV,MAAMC,EAAc,09zECkBPC,EAAQ,MAGpBC,YAAAC,8DASoC,oBAKC,0DAcI,cAIN,iBAIK,oBAIM,mCAvC7CC,KAAKC,EAAIC,EAAQF,KAAKG,MAmDvBL,gBAAgBM,GACfC,EAAaC,EAAgBF,EAAUb,EAAWC,MAInDM,aAAaM,GACZC,EAAaE,EAAaH,EAAUb,EAAWC,MAIhDM,aAAaM,GACZC,EAAaG,EAAMJ,EAAUb,EAAWC,MAGzCM,oBACCE,KAAKS,gBAAgBT,KAAKU,SAC1BV,KAAKW,aAAaX,KAAKY,MACvBZ,KAAKa,aAAab,KAAKc,MAGxBhB,SACC,MAAMiB,EAAMf,KAAKgB,KAAO1B,EAAW2B,EAAIjB,KAAKkB,IAC5C,MAAMC,EAAaJ,GAAOzB,EAAW8B,OAAS9B,EAAW8B,OAASC,UAElE,OACCpB,EAACqB,EAAI,CACJC,MAAOvB,KAAKC,EAAEuB,QAAQ,CACrBjC,EAAWC,KACXQ,KAAKC,EAAEwB,QAAQ,SAAWlC,EAAWG,SAAW2B,UAChDrB,KAAKC,EAAEwB,QAAQ,QAAUlC,EAAWI,QAAU0B,YAE/CK,SAAU1B,KAAK0B,SACfV,KAAMhB,KAAKgB,KACXN,QAASV,KAAKU,QACdE,KAAMZ,KAAKY,KACXE,KAAMd,KAAKc,KACXa,QAAS3B,KAAK2B,QACdC,UAAWb,GAAOzB,EAAW2B,GAAKF,GAAOzB,EAAW8B,QAEpDnB,EAACc,EAAG,CACHQ,MAAM,UACNP,KAAMhB,KAAKgB,KACXa,OAAQ7B,KAAK6B,OAAMC,aACP9B,KAAK+B,UACjBC,QAAShC,KAAKiC,eAAeC,KAAKlC,MAClCc,KAAMK,GACLnB,KAAKC,EAAEwB,QAAQ,SAAWxB,EAAA,OAAA,CAAMkC,KAAK,SACrCnC,KAAKC,EAAEwB,QAAQ,cAAgBxB,EAAA,OAAA,CAAMkC,KAAK,cAC3ClC,EAAA,OAAA,MACCD,KAAKC,EAAEwB,QAAQ,eAAiBxB,EAAA,OAAA,CAAMkC,KAAK,eAC3CnC,KAAKC,EAAEwB,QAAQ,UAAYxB,EAAA,OAAA,CAAMkC,KAAK,YAMnCrC,eAAesC,GACtBA,EAAEC,kBACF,GAAIrC,KAAK0B,WAAa,OAAS1B,KAAKkB,MAAQ5B,EAAW8B,OAAQ,CAC9DpB,KAAKsC,SAASC,KAAKH","sourcesContent":["import { ValueOf } from '../../types/interfaces'\n\nexport enum NativeType {\n\tA = 'a',\n\tSPAN = 'span',\n\tBUTTON = 'button',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport const BadgeClass = {\n\troot: 'gov-badge',\n\tinner: 'gov-badge__inner',\n\thasRight: 'gov-badge--has-right',\n\thasLeft: 'gov-badge--has-left',\n}\n","/*\n * Badge\n */\n\n// Shared definitions - button & badge\n@import \"../gov-button/gov-button-core.scss\";\n\n.gov-badge {\n\t@extend %button-core;\n\ta .gov-icon {\n\t\tmargin: 0;\n\t}\n\t.element {\n\t\tpadding: rem-calc(4 10);\n\t\tfont-family: $font-family-primary;\n\t\tfont-weight: 400;\n\t\tletter-spacing: initial;\n\t}\n\t.gov-button {\n\t\t.element {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $button-sizes {\n\t\t$radius: calc(#{get(\"min-height\", $definitions)} * 0.5);\n\t\t&[size=\"#{$size}\"] {\n\t\t\t.element {\n\t\t\t\tborder-radius: $radius;\n\t\t\t}\n\n\t\t\t// HOVERS\n\t\t\t&[hoverable] .element {\n\t\t\t\t@include focus-outline($radius, $outline-offset);\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $types in $badge-inverse-variants {\n\t\t&[type=\"solid\"][variant=\"#{$variant}\"] {\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\t.element {\n\t\t\t\t\tborder-width: rem-calc(1);\n\t\t\t\t\tborder-color: deep-map-get($badge-inverse-variants, $variant, \"border-color\");\n\t\t\t\t\tbackground-color: deep-map-get($badge-inverse-variants, $variant, \"bg\");\n\t\t\t\t\tcolor: deep-map-get($badge-inverse-variants, $variant, \"color\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&--has-right > .element {\n\t\tpadding-top: 0 !important;\n\t\tpadding-bottom: 0 !important;\n\t\tpadding-right: 0 !important;\n\t}\n\n\t&--has-left > .element {\n\t\tpadding-top: 0 !important;\n\t\tpadding-bottom: 0 !important;\n\t\tpadding-left: 0 !important;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { BadgeClass, NativeTypesType, NativeType } from \"./constants\"\nimport {\n\tButtonSizesType,\n\tTypesType,\n\tType,\n\tButtonVariantType,\n\tButtonVariants,\n\tButtonSizes,\n} from \"../gov-button/constants\"\n\n@Component({\n\ttag: \"gov-badge\",\n\tstyleUrl: \"gov-badge.scss\",\n})\nexport class GovBadge {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovBadgeElement\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Makes the badge component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n\t */\n\t@Prop() readonly target: string\n\t/**\n\t * Badge’s size.\n\t */\n\t@Prop() readonly size: ButtonSizesType = \"m\"\n\t/**\n\t * Badges's type\n\t */\n\t@Prop() readonly type: TypesType = \"solid\"\n\t/**\n\t * Used to change the HMTL tag in the badge\n\t */\n\t@Prop() readonly tag: NativeTypesType = \"span\"\n\t/**\n\t * Style variation of the badge.\n\t */\n\t@Prop() readonly variant: ButtonVariantType = \"primary\"\n\t/**\n\t * Adds accessible label for the button that is only shown for screen readers.\n\t * Typically, this label text replaces the visible text on the button for users who use assistive technology.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Emitted when the button click.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<PointerEvent>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ButtonVariants, newValue, BadgeClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(ButtonSizes, newValue, BadgeClass.root)\n\t}\n\n\t@Watch(\"type\")\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(Type, newValue, BadgeClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateType(this.type)\n\t}\n\n\trender() {\n\t\tconst Tag = this.href ? NativeType.A : this.tag\n\t\tconst nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([\n\t\t\t\t\tBadgeClass.root,\n\t\t\t\t\tthis.h.hasSlot(\"right\") ? BadgeClass.hasRight : undefined,\n\t\t\t\t\tthis.h.hasSlot(\"left\") ? BadgeClass.hasLeft : undefined,\n\t\t\t\t])}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\thref={this.href}\n\t\t\t\tvariant={this.variant}\n\t\t\t\tsize={this.size}\n\t\t\t\ttype={this.type}\n\t\t\t\tinverse={this.inverse}\n\t\t\t\thoverable={Tag == NativeType.A || Tag == NativeType.BUTTON}\n\t\t\t>\n\t\t\t\t<Tag\n\t\t\t\t\tclass=\"element\"\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\ttype={nativeType}>\n\t\t\t\t\t{this.h.hasSlot(\"left\") && <slot name=\"left\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") && <slot name=\"left-icon\"></slot>}\n\t\t\t\t\t<slot />\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && <slot name=\"right-icon\"></slot>}\n\t\t\t\t\t{this.h.hasSlot(\"right\") && <slot name=\"right\"></slot>}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent): void {\n\t\te.stopPropagation()\n\t\tif (this.disabled === false && this.tag === NativeType.BUTTON) {\n\t\t\tthis.govClick.emit(e)\n\t\t}\n\t}\n}\n"]}
|
package/dist/globals.d.ts
DELETED
|
File without changes
|