@gov-design-system-ce/components 0.0.45 → 0.0.46
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/gov-form-autocomplete.cjs.entry.js +4 -3
- package/dist/cjs/gov-form-autocomplete.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +1 -1
- package/dist/cjs/gov-wizzard-item.cjs.entry.js +5 -1
- package/dist/cjs/gov-wizzard-item.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-wizzard.cjs.entry.js +8 -6
- package/dist/cjs/gov-wizzard.cjs.entry.js.map +1 -1
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js +4 -3
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js.map +1 -1
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.js +5 -1
- package/dist/collection/components/gov-wizzard/gov-wizzard-item.js.map +1 -1
- package/dist/collection/components/gov-wizzard/gov-wizzard.js +16 -14
- package/dist/collection/components/gov-wizzard/gov-wizzard.js.map +1 -1
- package/dist/components/gov-form-autocomplete2.js +4 -3
- package/dist/components/gov-form-autocomplete2.js.map +1 -1
- package/dist/components/gov-icon2.js +1 -1
- package/dist/components/gov-wizzard-item.js +5 -1
- package/dist/components/gov-wizzard-item.js.map +1 -1
- package/dist/components/gov-wizzard.js +8 -6
- package/dist/components/gov-wizzard.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/{p-f656fffe.entry.js → p-06ed5529.entry.js} +2 -2
- package/dist/core/p-06ed5529.entry.js.map +1 -0
- package/dist/core/{p-df223dfd.entry.js → p-220f189d.entry.js} +2 -2
- package/dist/core/p-220f189d.entry.js.map +1 -0
- package/dist/core/{p-65aa3b0c.entry.js → p-25e53e01.entry.js} +2 -2
- package/dist/core/p-25e53e01.entry.js.map +1 -0
- package/dist/core/{p-8021c562.entry.js → p-5ffa24e9.entry.js} +2 -2
- package/dist/custom-elements/index.js +1 -1
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/gov-form-autocomplete.entry.js +4 -3
- package/dist/esm/gov-form-autocomplete.entry.js.map +1 -1
- package/dist/esm/gov-icon.entry.js +1 -1
- package/dist/esm/gov-wizzard-item.entry.js +5 -1
- package/dist/esm/gov-wizzard-item.entry.js.map +1 -1
- package/dist/esm/gov-wizzard.entry.js +8 -6
- package/dist/esm/gov-wizzard.entry.js.map +1 -1
- package/dist/hydrate/index.js +17 -10
- package/dist/types/components/gov-wizzard/gov-wizzard.d.ts +3 -3
- package/package.json +1 -1
- package/dist/core/p-65aa3b0c.entry.js.map +0 -1
- package/dist/core/p-df223dfd.entry.js.map +0 -1
- package/dist/core/p-f656fffe.entry.js.map +0 -1
- /package/dist/core/{p-8021c562.entry.js.map → p-5ffa24e9.entry.js.map} +0 -0
|
@@ -103,7 +103,7 @@ const GovFormAutocomplete = class {
|
|
|
103
103
|
render() {
|
|
104
104
|
return (h(Host, { class: FormAutocompleteClass.root, size: this.size, variant: this.variant }, h("gov-form-input", { placeholder: this.placeholder, name: this.name, disabled: this.disabled, readonly: this.readonly, autocomplete: false, size: this.size, variant: this.variant, required: this.required, invalid: this.invalid, role: "searchbox", value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": throttle(this.onInputHandler.bind(this), 200), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.bind(this), "on-gov-focus": this.onFocusHandler.bind(this), "on-gov-blur": this.onBlurHandler.bind(this), wcagAutocomplete: "list", wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: [this.listBoxId, this.wcagOwns].join(" "), wcagExpanded: this.list.length && this.focused, ref: el => (this.inputRef = el) }, h("slot", { slot: "right-icon", name: "right-icon" })), h("ul", { class: FormAutocompleteClass.list, role: "listbox", id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (h("li", { class: FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (h("li", { class: FormAutocompleteClass.loading }, h("gov-icon", { name: "loader", class: "gov-spin-animation" }), "\u00A0", this.messageLoading)) : null, this.list.map((item, index) => {
|
|
105
105
|
const isSelected = this.arrowCounter === index;
|
|
106
|
-
return (h("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: "option", "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onClick: () => this.onSelectHandler(index), "aria-selected": toBoolAttr(isSelected) }));
|
|
106
|
+
return (h("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: "option", "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onClick: (e) => this.onSelectHandler(e, index), "aria-selected": toBoolAttr(isSelected) }));
|
|
107
107
|
}))));
|
|
108
108
|
}
|
|
109
109
|
onFocusHandler(e) {
|
|
@@ -143,7 +143,7 @@ const GovFormAutocomplete = class {
|
|
|
143
143
|
});
|
|
144
144
|
this.doSearch();
|
|
145
145
|
}
|
|
146
|
-
onSelectHandler(index = -1) {
|
|
146
|
+
onSelectHandler(e, index = -1) {
|
|
147
147
|
let selected = null;
|
|
148
148
|
if (index > -1) {
|
|
149
149
|
selected = this.list[index];
|
|
@@ -156,6 +156,7 @@ const GovFormAutocomplete = class {
|
|
|
156
156
|
component: FormAutocompleteClass.root,
|
|
157
157
|
value: this.value,
|
|
158
158
|
selected: selected,
|
|
159
|
+
originalEvent: e,
|
|
159
160
|
});
|
|
160
161
|
this.list = [];
|
|
161
162
|
if (has(this.nameKey, selected) && typeof selected[this.nameKey] === "string") {
|
|
@@ -172,7 +173,7 @@ const GovFormAutocomplete = class {
|
|
|
172
173
|
this.onArrowDown();
|
|
173
174
|
else if (event.keyCode === 13) {
|
|
174
175
|
e.preventDefault();
|
|
175
|
-
this.onSelectHandler();
|
|
176
|
+
this.onSelectHandler(e);
|
|
176
177
|
}
|
|
177
178
|
}
|
|
178
179
|
onKeyDownHandler(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-form-autocomplete.entry.js","mappings":"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","names":[],"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"],"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\treturn this.value.length >= this.minlength\n\t\t} else {\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"],"version":3}
|
|
1
|
+
{"file":"gov-form-autocomplete.entry.js","mappings":"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","names":[],"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"],"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\treturn this.value.length >= this.minlength\n\t\t} else {\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={(e: PointerEvent) => this.onSelectHandler(e, 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(e: PointerEvent | CustomEvent, 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\toriginalEvent: e,\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(e)\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"],"version":3}
|
|
@@ -63,7 +63,11 @@ const GovWizzardItem = class {
|
|
|
63
63
|
const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
|
|
64
64
|
const prefixSlot = this.h.hasSlot("prefix") && (h("span", { class: WizzardItemClass.prefix }, h("slot", { name: "prefix" })));
|
|
65
65
|
const label = (h(LabelTag, { class: WizzardItemClass.title }, h("span", { class: WizzardItemClass.name }, h("span", { class: WizzardItemClass.label }, h("span", null, this.label), this.collapsible && h("gov-icon", { class: WizzardItemClass.arrow, name: "chevron-down" })), this.annotation && h("span", { class: WizzardItemClass.annot }, this.annotation))));
|
|
66
|
-
return (h(Host, { class: this.h.classes(WizzardItemClass.root), "is-expanded": this.isExpanded, variant: this.variant, size: this.size, role: "listitem", collapsible: this.collapsible }, this.collapsible ? (h(Fragment, null, prefixSlot, h(Tag, { id: triggerId, class: WizzardItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: () =>
|
|
66
|
+
return (h(Host, { class: this.h.classes(WizzardItemClass.root), "is-expanded": this.isExpanded, variant: this.variant, size: this.size, role: "listitem", collapsible: this.collapsible }, this.collapsible ? (h(Fragment, null, prefixSlot, h(Tag, { id: triggerId, class: WizzardItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
e.stopPropagation();
|
|
69
|
+
this.collapsible ? this.toggle() : false;
|
|
70
|
+
} }, label))) : (h(Fragment, null, prefixSlot, h("div", { class: WizzardItemClass.header }, label))), this.collapsible ? (h("div", { class: WizzardItemClass.content, id: this.contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, h("slot", null))) : (h("div", { class: WizzardItemClass.content, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded }, h("slot", null)))));
|
|
67
71
|
}
|
|
68
72
|
/**
|
|
69
73
|
* Opening the Wizzard
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-wizzard-item.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.scss?tag=gov-wizzard-item","../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.tsx"],"sourcesContent":["/*\n * Wizzard - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-wizzard-item\";\n\n#{$class} {\n\t@include wizzard-item-core;\n\tmargin-bottom: rem-calc(16);\n\tbackground: $wizzard-bg-color;\n\t&__header {\n\t\t@include focus-outline();\n\t\tgap: rem-calc(16);\n\t\tpadding: rem-calc(16);\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttransition: $t linear color;\n\t}\n\t&__prefix {\n\t\tposition: absolute;\n\t\tleft: rem-calc(16);\n\t}\n\n\t// STATES\n\t&__header[aria-expanded=\"true\"] {\n\t\t#{$class}__label {\n\t\t\t.gov-icon {\n\t\t\t\ttransform: scale(-1);\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t&[size=\"#{$size-xs}\"],\n\t&[size=\"#{$size-s}\"],\n\t&[size=\"#{$size-m}\"] {\n\t\t#{$class} {\n\t\t\t&__title {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size\"));\n\t\t\t}\n\t\t\t&__annot {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-annot\"));\n\t\t\t}\n\t\t\t&__prefix {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-indicator\"));\n\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\theight: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-xs, \"top\");\n\t\t\t\t+ #{$class}__header {\n\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-xs, \"header-padding\");\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__content {\n\t\t\t\tpadding: $wizzard-content-padding;\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t@include parameter(\"collapsible\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tcolor: get(\"hover-color\", $definitions);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// HOVERS\n\t@at-root button#{&}__header {\n\t\t@include button-core();\n\t\tjustify-content: flex-start;\n\t\ttext-align: left;\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&[size=\"#{$size-s}\"],\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-s, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-s, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-m, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-m, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@each $size, $definitions in $wizzard-sizes {\n\t\t\t&[size=\"#{$size}\"] {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizesType, WizardVariants, WizardVariantsType, WizzardItemClass } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { WizzardItemEvent } from \"./gov-wizzard-item.types\"\nimport Fragment from \"../../helpers/Fragment\"\n\nenum Tags {\n\tDIV = \"div\",\n\tBUTTON = \"button\",\n}\n\n@Component({\n\ttag: \"gov-wizzard-item\",\n\tstyleUrl: \"gov-wizzard-item.scss\",\n})\nexport class GovWizzardItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovWizzardItem\")\n\t\tthis.contentId = createID(\"GovWizzardContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovWizzardItemElement\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: WizardVariantsType = \"primary\"\n\t/**\n\t * Size of wizzard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Custom wizzard item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defines weather the wizzard item can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Item annotation of the wizzard\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Item label of the wizzard\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the wizzard component disabled.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/**\n\t * Used to change the HTML tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h3\"\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<WizzardItemEvent>\n\n\t@Watch(\"label\")\n\tprivate validateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"labelTag\")\n\tprivate validateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"variant\")\n\tprivate validateVariant(newValue: string): void {\n\t\tvalidateProp(WizardVariants, newValue, WizzardItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ expanded: this.isExpanded, component: WizzardItemClass.root })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.labelTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst LabelTag = this.labelTag\n\t\tconst Tag = this.collapsible ? Tags.BUTTON : Tags.DIV\n\t\tconst prefixSlot = this.h.hasSlot(\"prefix\") && (<span class={WizzardItemClass.prefix}><slot name=\"prefix\" /></span>)\n\n\t\tconst label = (\n\t\t\t<LabelTag class={WizzardItemClass.title}>\n\t\t\t\t<span class={WizzardItemClass.name}>\n\t\t\t\t\t<span class={WizzardItemClass.label}>\n\t\t\t\t\t\t<span>{this.label}</span>\n\t\t\t\t\t\t{this.collapsible && <gov-icon class={WizzardItemClass.arrow} name=\"chevron-down\"></gov-icon>}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.annotation && <span class={WizzardItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t</span>\n\t\t\t</LabelTag>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(WizzardItemClass.root)} is-expanded={this.isExpanded} variant={this.variant} size={this.size} role=\"listitem\" collapsible={this.collapsible}>\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tid={triggerId}\n\t\t\t\t\t\t\tclass={WizzardItemClass.header}\n\t\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\tonClick={() => (this.collapsible ? this.toggle() : false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<div class={WizzardItemClass.header}>{label}</div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={WizzardItemClass.content}\n\t\t\t\t\t\tid={this.contentId}\n\t\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\t\taria-labelledby={triggerId}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={WizzardItemClass.content} aria-hidden={booleanString(!this.isExpanded)} hidden={!this.isExpanded}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the Wizzard\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the Wizzard\n\t */\n\t@Method()\n\tpublic async close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Wizzard switch\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tpublic async currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"gov-wizzard-item.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.scss?tag=gov-wizzard-item","../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.tsx"],"sourcesContent":["/*\n * Wizzard - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-wizzard-item\";\n\n#{$class} {\n\t@include wizzard-item-core;\n\tmargin-bottom: rem-calc(16);\n\tbackground: $wizzard-bg-color;\n\t&__header {\n\t\t@include focus-outline();\n\t\tgap: rem-calc(16);\n\t\tpadding: rem-calc(16);\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttransition: $t linear color;\n\t}\n\t&__prefix {\n\t\tposition: absolute;\n\t\tleft: rem-calc(16);\n\t}\n\n\t// STATES\n\t&__header[aria-expanded=\"true\"] {\n\t\t#{$class}__label {\n\t\t\t.gov-icon {\n\t\t\t\ttransform: scale(-1);\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t&[size=\"#{$size-xs}\"],\n\t&[size=\"#{$size-s}\"],\n\t&[size=\"#{$size-m}\"] {\n\t\t#{$class} {\n\t\t\t&__title {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size\"));\n\t\t\t}\n\t\t\t&__annot {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-annot\"));\n\t\t\t}\n\t\t\t&__prefix {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-indicator\"));\n\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\theight: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-xs, \"top\");\n\t\t\t\t+ #{$class}__header {\n\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-xs, \"header-padding\");\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__content {\n\t\t\t\tpadding: $wizzard-content-padding;\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t@include parameter(\"collapsible\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tcolor: get(\"hover-color\", $definitions);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// HOVERS\n\t@at-root button#{&}__header {\n\t\t@include button-core();\n\t\tjustify-content: flex-start;\n\t\ttext-align: left;\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&[size=\"#{$size-s}\"],\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-s, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-s, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-m, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-m, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@each $size, $definitions in $wizzard-sizes {\n\t\t\t&[size=\"#{$size}\"] {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizesType, WizardVariants, WizardVariantsType, WizzardItemClass } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { WizzardItemEvent } from \"./gov-wizzard-item.types\"\nimport Fragment from \"../../helpers/Fragment\"\n\nenum Tags {\n\tDIV = \"div\",\n\tBUTTON = \"button\",\n}\n\n@Component({\n\ttag: \"gov-wizzard-item\",\n\tstyleUrl: \"gov-wizzard-item.scss\",\n})\nexport class GovWizzardItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovWizzardItem\")\n\t\tthis.contentId = createID(\"GovWizzardContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovWizzardItemElement\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: WizardVariantsType = \"primary\"\n\t/**\n\t * Size of wizzard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Custom wizzard item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defines weather the wizzard item can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Item annotation of the wizzard\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Item label of the wizzard\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the wizzard component disabled.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/**\n\t * Used to change the HTML tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h3\"\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<WizzardItemEvent>\n\n\t@Watch(\"label\")\n\tprivate validateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"labelTag\")\n\tprivate validateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"variant\")\n\tprivate validateVariant(newValue: string): void {\n\t\tvalidateProp(WizardVariants, newValue, WizzardItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ expanded: this.isExpanded, component: WizzardItemClass.root })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.labelTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst LabelTag = this.labelTag\n\t\tconst Tag = this.collapsible ? Tags.BUTTON : Tags.DIV\n\t\tconst prefixSlot = this.h.hasSlot(\"prefix\") && (<span class={WizzardItemClass.prefix}><slot name=\"prefix\" /></span>)\n\n\t\tconst label = (\n\t\t\t<LabelTag class={WizzardItemClass.title}>\n\t\t\t\t<span class={WizzardItemClass.name}>\n\t\t\t\t\t<span class={WizzardItemClass.label}>\n\t\t\t\t\t\t<span>{this.label}</span>\n\t\t\t\t\t\t{this.collapsible && <gov-icon class={WizzardItemClass.arrow} name=\"chevron-down\"></gov-icon>}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.annotation && <span class={WizzardItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t</span>\n\t\t\t</LabelTag>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(WizzardItemClass.root)} is-expanded={this.isExpanded} variant={this.variant} size={this.size} role=\"listitem\" collapsible={this.collapsible}>\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tid={triggerId}\n\t\t\t\t\t\t\tclass={WizzardItemClass.header}\n\t\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\tthis.collapsible ? this.toggle() : false\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<div class={WizzardItemClass.header}>{label}</div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={WizzardItemClass.content}\n\t\t\t\t\t\tid={this.contentId}\n\t\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\t\taria-labelledby={triggerId}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={WizzardItemClass.content} aria-hidden={booleanString(!this.isExpanded)} hidden={!this.isExpanded}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the Wizzard\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the Wizzard\n\t */\n\t@Method()\n\tpublic async close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Wizzard switch\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tpublic async currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\n\t}\n}\n"],"version":3}
|
|
@@ -16,7 +16,7 @@ const GovWizzard = class {
|
|
|
16
16
|
constructor(hostRef) {
|
|
17
17
|
registerInstance(this, hostRef);
|
|
18
18
|
this.govChange = createEvent(this, "gov-change", 7);
|
|
19
|
-
this.size =
|
|
19
|
+
this.size = "m";
|
|
20
20
|
this.wcagLabel = undefined;
|
|
21
21
|
this.wcagLabelledBy = undefined;
|
|
22
22
|
this.h = govHost(this.host);
|
|
@@ -29,11 +29,13 @@ const GovWizzard = class {
|
|
|
29
29
|
}
|
|
30
30
|
componentDidLoad() {
|
|
31
31
|
this.host.querySelectorAll(WizzardItemClass.root).forEach((child) => {
|
|
32
|
-
child.setAttribute(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
child.setAttribute("size", this.size);
|
|
33
|
+
/*
|
|
34
|
+
child.addEventListener('gov-change', (e: GovWizzardItemCustomEvent<GovWizzardItemChangeEvent>) => {
|
|
35
|
+
e.stopPropagation()
|
|
36
|
+
this.govChange.emit(e.detail)
|
|
37
|
+
})
|
|
38
|
+
*/
|
|
37
39
|
});
|
|
38
40
|
}
|
|
39
41
|
async componentDidRender() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-wizzard.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,0bAA0b;;
|
|
1
|
+
{"file":"gov-wizzard.entry.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,0bAA0b;;MCcnc,UAAU;EAKtB;;;gBAO0C,GAAG;;;IAN5C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAoBO,YAAY,CAAC,QAAgB;IACpC,YAAY,CAAC,WAAW,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACtD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;;;;;;;KAOrC,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAC1E,eAAQ,CACF,EACP;GACD;;;;EAMM,MAAM,YAAY;IACxB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACzE;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-wizzard/gov-wizzard.scss?tag=gov-wizzard","../../../packages/core/src/components/gov-wizzard/gov-wizzard.tsx"],"sourcesContent":["/*\n * Wizzard\n */\n\n$class: \".gov-wizzard\";\n\n#{$class} {\n\t@include base();\n\t@include reset-last-margin();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizes, WizardSizesType, WizzardClass, WizzardItemClass } from \"./constants\"\nimport { GovWizzardItemChangeEvent } from \"./gov-wizzard-item.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-wizzard\",\n\tstyleUrl: \"gov-wizzard.scss\",\n})\nexport class GovWizzard {\n\tprivate h: GovHost\n\n\t@Element() readonly host: HTMLGovWizzardElement\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Size of wizzard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Adds accessible label for the wizzard that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the wizzard children state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovWizzardItemChangeEvent>\n\n\t@Watch(\"size\")\n\tprivate validateSize(newValue: string): void {\n\t\tvalidateProp(WizardSizes, newValue, WizzardClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(WizzardItemClass.root).forEach((child: HTMLGovWizzardItemElement) => {\n\t\t\tchild.setAttribute(\"size\", this.size)\n\t\t\t/*\n\t\t\tchild.addEventListener('gov-change', (e: GovWizzardItemCustomEvent<GovWizzardItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t\t*/\n\t\t})\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={this.h.classes(WizzardClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tpublic async validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, WizzardClass.root)\n\t}\n}\n"],"version":3}
|
package/dist/hydrate/index.js
CHANGED
|
@@ -16259,7 +16259,7 @@ class GovFormAutocomplete {
|
|
|
16259
16259
|
render() {
|
|
16260
16260
|
return (hAsync(Host, { class: FormAutocompleteClass.root, size: this.size, variant: this.variant }, hAsync("gov-form-input", { placeholder: this.placeholder, name: this.name, disabled: this.disabled, readonly: this.readonly, autocomplete: false, size: this.size, variant: this.variant, required: this.required, invalid: this.invalid, role: "searchbox", value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": throttle(this.onInputHandler.bind(this), 200), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.bind(this), "on-gov-focus": this.onFocusHandler.bind(this), "on-gov-blur": this.onBlurHandler.bind(this), wcagAutocomplete: "list", wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: [this.listBoxId, this.wcagOwns].join(" "), wcagExpanded: this.list.length && this.focused, ref: el => (this.inputRef = el) }, hAsync("slot", { slot: "right-icon", name: "right-icon" })), hAsync("ul", { class: FormAutocompleteClass.list, role: "listbox", id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (hAsync("li", { class: FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (hAsync("li", { class: FormAutocompleteClass.loading }, hAsync("gov-icon", { name: "loader", class: "gov-spin-animation" }), "\u00A0", this.messageLoading)) : null, this.list.map((item, index) => {
|
|
16261
16261
|
const isSelected = this.arrowCounter === index;
|
|
16262
|
-
return (hAsync("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: "option", "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onClick: () => this.onSelectHandler(index), "aria-selected": toBoolAttr(isSelected) }));
|
|
16262
|
+
return (hAsync("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: "option", "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onClick: (e) => this.onSelectHandler(e, index), "aria-selected": toBoolAttr(isSelected) }));
|
|
16263
16263
|
}))));
|
|
16264
16264
|
}
|
|
16265
16265
|
onFocusHandler(e) {
|
|
@@ -16299,7 +16299,7 @@ class GovFormAutocomplete {
|
|
|
16299
16299
|
});
|
|
16300
16300
|
this.doSearch();
|
|
16301
16301
|
}
|
|
16302
|
-
onSelectHandler(index = -1) {
|
|
16302
|
+
onSelectHandler(e, index = -1) {
|
|
16303
16303
|
let selected = null;
|
|
16304
16304
|
if (index > -1) {
|
|
16305
16305
|
selected = this.list[index];
|
|
@@ -16312,6 +16312,7 @@ class GovFormAutocomplete {
|
|
|
16312
16312
|
component: FormAutocompleteClass.root,
|
|
16313
16313
|
value: this.value,
|
|
16314
16314
|
selected: selected,
|
|
16315
|
+
originalEvent: e,
|
|
16315
16316
|
});
|
|
16316
16317
|
this.list = [];
|
|
16317
16318
|
if (has(this.nameKey, selected) && typeof selected[this.nameKey] === "string") {
|
|
@@ -16328,7 +16329,7 @@ class GovFormAutocomplete {
|
|
|
16328
16329
|
this.onArrowDown();
|
|
16329
16330
|
else if (event.keyCode === 13) {
|
|
16330
16331
|
e.preventDefault();
|
|
16331
|
-
this.onSelectHandler();
|
|
16332
|
+
this.onSelectHandler(e);
|
|
16332
16333
|
}
|
|
16333
16334
|
}
|
|
16334
16335
|
onKeyDownHandler(e) {
|
|
@@ -20202,7 +20203,7 @@ class GovWizzard {
|
|
|
20202
20203
|
constructor(hostRef) {
|
|
20203
20204
|
registerInstance(this, hostRef);
|
|
20204
20205
|
this.govChange = createEvent(this, "gov-change", 7);
|
|
20205
|
-
this.size =
|
|
20206
|
+
this.size = "m";
|
|
20206
20207
|
this.wcagLabel = undefined;
|
|
20207
20208
|
this.wcagLabelledBy = undefined;
|
|
20208
20209
|
this.h = govHost(this.host);
|
|
@@ -20215,11 +20216,13 @@ class GovWizzard {
|
|
|
20215
20216
|
}
|
|
20216
20217
|
componentDidLoad() {
|
|
20217
20218
|
this.host.querySelectorAll(WizzardItemClass.root).forEach((child) => {
|
|
20218
|
-
child.setAttribute(
|
|
20219
|
-
|
|
20220
|
-
|
|
20221
|
-
|
|
20222
|
-
|
|
20219
|
+
child.setAttribute("size", this.size);
|
|
20220
|
+
/*
|
|
20221
|
+
child.addEventListener('gov-change', (e: GovWizzardItemCustomEvent<GovWizzardItemChangeEvent>) => {
|
|
20222
|
+
e.stopPropagation()
|
|
20223
|
+
this.govChange.emit(e.detail)
|
|
20224
|
+
})
|
|
20225
|
+
*/
|
|
20223
20226
|
});
|
|
20224
20227
|
}
|
|
20225
20228
|
async componentDidRender() {
|
|
@@ -20311,7 +20314,11 @@ class GovWizzardItem {
|
|
|
20311
20314
|
const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
|
|
20312
20315
|
const prefixSlot = this.h.hasSlot("prefix") && (hAsync("span", { class: WizzardItemClass.prefix }, hAsync("slot", { name: "prefix" })));
|
|
20313
20316
|
const label = (hAsync(LabelTag, { class: WizzardItemClass.title }, hAsync("span", { class: WizzardItemClass.name }, hAsync("span", { class: WizzardItemClass.label }, hAsync("span", null, this.label), this.collapsible && hAsync("gov-icon", { class: WizzardItemClass.arrow, name: "chevron-down" })), this.annotation && hAsync("span", { class: WizzardItemClass.annot }, this.annotation))));
|
|
20314
|
-
return (hAsync(Host, { class: this.h.classes(WizzardItemClass.root), "is-expanded": this.isExpanded, variant: this.variant, size: this.size, role: "listitem", collapsible: this.collapsible }, this.collapsible ? (hAsync(Fragment, null, prefixSlot, hAsync(Tag, { id: triggerId, class: WizzardItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: () =>
|
|
20317
|
+
return (hAsync(Host, { class: this.h.classes(WizzardItemClass.root), "is-expanded": this.isExpanded, variant: this.variant, size: this.size, role: "listitem", collapsible: this.collapsible }, this.collapsible ? (hAsync(Fragment, null, prefixSlot, hAsync(Tag, { id: triggerId, class: WizzardItemClass.header, "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
|
|
20318
|
+
e.preventDefault();
|
|
20319
|
+
e.stopPropagation();
|
|
20320
|
+
this.collapsible ? this.toggle() : false;
|
|
20321
|
+
} }, label))) : (hAsync(Fragment, null, prefixSlot, hAsync("div", { class: WizzardItemClass.header }, label))), this.collapsible ? (hAsync("div", { class: WizzardItemClass.content, id: this.contentId, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded, "aria-labelledby": triggerId }, hAsync("slot", null))) : (hAsync("div", { class: WizzardItemClass.content, "aria-hidden": booleanString(!this.isExpanded), hidden: !this.isExpanded }, hAsync("slot", null)))));
|
|
20315
20322
|
}
|
|
20316
20323
|
/**
|
|
20317
20324
|
* Opening the Wizzard
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { EventEmitter } from
|
|
2
|
-
import { WizardSizesType } from
|
|
3
|
-
import { GovWizzardItemChangeEvent } from
|
|
1
|
+
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
+
import { WizardSizesType } from "./constants";
|
|
3
|
+
import { GovWizzardItemChangeEvent } from "./gov-wizzard-item.d";
|
|
4
4
|
export declare class GovWizzard {
|
|
5
5
|
private h;
|
|
6
6
|
readonly host: HTMLGovWizzardElement;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name" : "@gov-design-system-ce/components",
|
|
3
3
|
"description" : "This package includes Gov Design System Web Components and related utilities.",
|
|
4
4
|
"author": "Zdeněk Vítek",
|
|
5
|
-
"version" : "0.0.
|
|
5
|
+
"version" : "0.0.46",
|
|
6
6
|
"license" : "EUPL v1.2 Licensed",
|
|
7
7
|
"main" : "./dist/index.cjs.js",
|
|
8
8
|
"unpkg" : "./dist/core/core.esm.js",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-wizzard/gov-wizzard.scss?tag=gov-wizzard","../../../packages/core/src/components/gov-wizzard/gov-wizzard.tsx"],"names":["govWizzardCss","GovWizzard","[object Object]","hostRef","this","h","govHost","host","newValue","validateProp","WizardSizes","WizzardClass","root","validateSize","size","querySelectorAll","WizzardItemClass","forEach","child","setAttribute","addEventListener","e","stopPropagation","govChange","emit","detail","canValidateWcagOnRender","delay","validateWcag","Host","class","classes","role","validateWcagLabel","wcagLabel","wcagLabelledBy"],"mappings":"sYAAA,MAAMA,EAAgB,icCeTC,EAAU,MAItBC,YAAAC,6DAM0C,2DALzCC,KAAKC,EAAIC,EAAQF,KAAKG,MAoBfL,aAAaM,GACpBC,EAAaC,EAAaF,EAAUG,EAAaC,MAGlDV,oBACCE,KAAKS,aAAaT,KAAKU,MAGxBZ,mBACCE,KAAKG,KAAKQ,iBAAiBC,EAAiBJ,MAAMK,SAASC,IAC1DA,EAAMC,aAAa,OAAQf,KAAKU,MAChCI,EAAME,iBAAiB,cAAeC,IACrCA,EAAEC,kBACFlB,KAAKmB,UAAUC,KAAKH,EAAEI,cAKzBvB,2BACC,GAAIwB,IAA2B,OACxBC,EAAM,WACNvB,KAAKwB,gBAIb1B,SACC,OACCG,EAACwB,EAAI,CAACC,MAAO1B,KAAKC,EAAE0B,QAAQpB,EAAaC,MAAOoB,KAAK,OAAOlB,KAAMV,KAAKU,MACtET,EAAA,OAAA,OASIH,qBACN+B,EAAkB7B,KAAK8B,UAAW9B,KAAK+B,eAAgBxB,EAAaC","sourcesContent":["/*\n * Wizzard\n */\n\n$class: \".gov-wizzard\";\n\n#{$class} {\n\t@include base();\n\t@include reset-last-margin();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { WizzardClass, WizzardItemClass, WizardSizesType, WizardSizes } from './constants'\nimport { GovWizzardItemCustomEvent } from '../../components'\nimport { GovWizzardItemChangeEvent } from './gov-wizzard-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\n\n@Component({\n\ttag: 'gov-wizzard',\n\tstyleUrl: 'gov-wizzard.scss',\n})\nexport class GovWizzard {\n\tprivate h: GovHost\n\n\t@Element() readonly host: HTMLGovWizzardElement\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Size of wizzard\n\t */\n\t@Prop() readonly size?: WizardSizesType = 'm'\n\t/**\n\t * Adds accessible label for the wizzard that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the wizzard children state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovWizzardItemChangeEvent>\n\n\t@Watch('size')\n\tprivate validateSize(newValue: string): void {\n\t\tvalidateProp(WizardSizes, newValue, WizzardClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(WizzardItemClass.root).forEach((child: HTMLGovWizzardItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovWizzardItemCustomEvent<GovWizzardItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\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={this.h.classes(WizzardClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tpublic async validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, WizzardClass.root)\n\t}\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.scss?tag=gov-wizzard-item","../../../packages/core/src/components/gov-wizzard/gov-wizzard-item.tsx"],"names":["govWizzardItemCss","Tags","GovWizzardItem","[object Object]","hostRef","this","h","govHost","host","triggerId","createID","contentId","newValue","govErrorLog","WizzardItemClass","root","validTags","includes","validateProp","WizardVariants","govChange","emit","expanded","isExpanded","component","validateLabel","label","validateVariant","variant","validateTriggerTag","labelTag","identifier","LabelTag","Tag","collapsible","BUTTON","DIV","prefixSlot","hasSlot","class","prefix","name","title","arrow","annotation","annot","Host","classes","is-expanded","size","role","Fragment","id","header","aria-expanded","booleanString","aria-controls","disabled","aria-disabled","toBoolAttrIfDefined","onClick","toggle","content","aria-hidden","hidden","aria-labelledby","emmitChange"],"mappings":"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","sourcesContent":["/*\n * Wizzard - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-wizzard-item\";\n\n#{$class} {\n\t@include wizzard-item-core;\n\tmargin-bottom: rem-calc(16);\n\tbackground: $wizzard-bg-color;\n\t&__header {\n\t\t@include focus-outline();\n\t\tgap: rem-calc(16);\n\t\tpadding: rem-calc(16);\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttransition: $t linear color;\n\t}\n\t&__prefix {\n\t\tposition: absolute;\n\t\tleft: rem-calc(16);\n\t}\n\n\t// STATES\n\t&__header[aria-expanded=\"true\"] {\n\t\t#{$class}__label {\n\t\t\t.gov-icon {\n\t\t\t\ttransform: scale(-1);\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t&[size=\"#{$size-xs}\"],\n\t&[size=\"#{$size-s}\"],\n\t&[size=\"#{$size-m}\"] {\n\t\t#{$class} {\n\t\t\t&__title {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size\"));\n\t\t\t}\n\t\t\t&__annot {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-annot\"));\n\t\t\t}\n\t\t\t&__prefix {\n\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-xs, \"font-size-indicator\"));\n\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\theight: deep-map-get($wizzard-sizes, $size-xs, \"indicator-size\");\n\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-xs, \"top\");\n\t\t\t\t+ #{$class}__header {\n\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-xs, \"header-padding\");\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__content {\n\t\t\t\tpadding: $wizzard-content-padding;\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t@include parameter(\"collapsible\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tcolor: get(\"hover-color\", $definitions);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// HOVERS\n\t@at-root button#{&}__header {\n\t\t@include button-core();\n\t\tjustify-content: flex-start;\n\t\ttext-align: left;\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&[size=\"#{$size-s}\"],\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-s, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-s, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-s, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-s, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\t&[size=\"#{$size-m}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size\"));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\t@include typography(deep-map-get($wizzard-sizes, $size-m, \"font-size-indicator\"));\n\t\t\t\t\twidth: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\theight: deep-map-get($wizzard-sizes, $size-m, \"indicator-size\");\n\t\t\t\t\ttop: deep-map-get($wizzard-sizes, $size-m, \"top\");\n\t\t\t\t\t+ #{$class}__header {\n\t\t\t\t\t\tpadding: deep-map-get($wizzard-sizes, $size-m, \"header-padding\");\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@each $size, $definitions in $wizzard-sizes {\n\t\t\t&[size=\"#{$size}\"] {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { WizardSizesType, WizardVariants, WizardVariantsType, WizzardItemClass } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { WizzardItemEvent } from \"./gov-wizzard-item.types\"\nimport Fragment from \"../../helpers/Fragment\"\n\nenum Tags {\n\tDIV = \"div\",\n\tBUTTON = \"button\",\n}\n\n@Component({\n\ttag: \"gov-wizzard-item\",\n\tstyleUrl: \"gov-wizzard-item.scss\",\n})\nexport class GovWizzardItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovWizzardItem\")\n\t\tthis.contentId = createID(\"GovWizzardContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovWizzardItemElement\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant?: WizardVariantsType = \"primary\"\n\t/**\n\t * Size of wizzard\n\t */\n\t@Prop() readonly size?: WizardSizesType = \"m\"\n\t/**\n\t * Custom wizzard item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defines weather the wizzard item can be collapsible\n\t */\n\t@Prop() readonly collapsible: boolean = false\n\t/**\n\t * Item annotation of the wizzard\n\t */\n\t@Prop() readonly annotation: string\n\t/**\n\t * Item label of the wizzard\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the wizzard component disabled.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Defines whether the accordion is open or closed by default\n\t */\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/**\n\t * Used to change the HTML tag in the accordion trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h3\"\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<WizzardItemEvent>\n\n\t@Watch(\"label\")\n\tprivate validateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"labelTag\")\n\tprivate validateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${WizzardItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"variant\")\n\tprivate validateVariant(newValue: string): void {\n\t\tvalidateProp(WizardVariants, newValue, WizzardItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ expanded: this.isExpanded, component: WizzardItemClass.root })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.labelTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst LabelTag = this.labelTag\n\t\tconst Tag = this.collapsible ? Tags.BUTTON : Tags.DIV\n\t\tconst prefixSlot = this.h.hasSlot(\"prefix\") && (<span class={WizzardItemClass.prefix}><slot name=\"prefix\" /></span>)\n\n\t\tconst label = (\n\t\t\t<LabelTag class={WizzardItemClass.title}>\n\t\t\t\t<span class={WizzardItemClass.name}>\n\t\t\t\t\t<span class={WizzardItemClass.label}>\n\t\t\t\t\t\t<span>{this.label}</span>\n\t\t\t\t\t\t{this.collapsible && <gov-icon class={WizzardItemClass.arrow} name=\"chevron-down\"></gov-icon>}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.annotation && <span class={WizzardItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t</span>\n\t\t\t</LabelTag>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(WizzardItemClass.root)} is-expanded={this.isExpanded} variant={this.variant} size={this.size} role=\"listitem\" collapsible={this.collapsible}>\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tid={triggerId}\n\t\t\t\t\t\t\tclass={WizzardItemClass.header}\n\t\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\tonClick={() => (this.collapsible ? this.toggle() : false)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t{prefixSlot}\n\t\t\t\t\t\t<div class={WizzardItemClass.header}>{label}</div>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t\t{this.collapsible ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={WizzardItemClass.content}\n\t\t\t\t\t\tid={this.contentId}\n\t\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\t\taria-labelledby={triggerId}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={WizzardItemClass.content} aria-hidden={booleanString(!this.isExpanded)} hidden={!this.isExpanded}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the Wizzard\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the Wizzard\n\t */\n\t@Method()\n\tpublic async close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Wizzard switch\n\t */\n\t@Method()\n\tpublic async toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tpublic async currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\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","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\treturn this.value.length >= this.minlength\n\t\t} else {\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"]}
|
|
File without changes
|