@gov-design-system-ce/components 0.0.59 → 0.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/gov-app.cjs.entry.js +78 -0
- package/dist/cjs/gov-app.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/gov-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-autocomplete.cjs.entry.js +15 -15
- package/dist/cjs/gov-form-autocomplete.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/gov-form-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-file.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-file.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-multi-select.cjs.entry.js +29 -24
- package/dist/cjs/gov-form-multi-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-radio.cjs.entry.js +1 -1
- package/dist/cjs/gov-form-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-select.cjs.entry.js +18 -17
- package/dist/cjs/gov-form-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-switch.cjs.entry.js +2 -2
- package/dist/cjs/gov-form-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +2 -2
- package/dist/cjs/gov-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-infobar.cjs.entry.js +1 -1
- package/dist/cjs/gov-infobar.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-pagination.cjs.entry.js +1 -1
- package/dist/cjs/gov-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/gov-stepper-item.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-toast.cjs.entry.js +4 -1
- package/dist/cjs/gov-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-wizard-item.cjs.entry.js +1 -1
- package/dist/cjs/gov-wizard-item.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gov-button/dropdown/gov-dropdown.css +0 -2
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js +24 -23
- package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.js.map +1 -1
- package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js +5 -4
- package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js.map +1 -1
- package/dist/collection/components/gov-form/file/gov-form-file.js +4 -3
- package/dist/collection/components/gov-form/file/gov-form-file.js.map +1 -1
- package/dist/collection/components/gov-form/input/gov-form-input.js +4 -3
- package/dist/collection/components/gov-form/input/gov-form-input.js.map +1 -1
- package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.css +48 -3
- package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.js +87 -26
- package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.js.map +1 -1
- package/dist/collection/components/gov-form/radio/gov-form-radio.js +4 -3
- package/dist/collection/components/gov-form/radio/gov-form-radio.js.map +1 -1
- package/dist/collection/components/gov-form/select/gov-form-select.css +48 -0
- package/dist/collection/components/gov-form/select/gov-form-select.js +39 -20
- package/dist/collection/components/gov-form/select/gov-form-select.js.map +1 -1
- package/dist/collection/components/gov-form/switch/gov-form-switch.js +5 -4
- package/dist/collection/components/gov-form/switch/gov-form-switch.js.map +1 -1
- package/dist/collection/components/gov-icon/gov-icon.css +2 -0
- package/dist/collection/components/gov-infobar/default/gov-infobar.css +1 -1
- package/dist/collection/components/gov-pagination/gov-pagination.css +1 -1
- package/dist/collection/components/gov-stepper/gov-stepper-item.css +1 -0
- package/dist/collection/components/gov-toast/gov-toast.js +4 -1
- package/dist/collection/components/gov-toast/gov-toast.js.map +1 -1
- package/dist/collection/components/gov-wizard/gov-wizard-item.css +1 -3
- package/dist/collection/data/color-definitions.js +307 -0
- package/dist/collection/data/font-definitions.js +94 -0
- package/dist/collection/pages/Forms.js +75 -0
- package/dist/collection/pages/Forms.js.map +1 -1
- package/dist/collection/pages/Stepper.js +3 -0
- package/dist/collection/pages/Stepper.js.map +1 -1
- package/dist/components/gov-accordion-item.js +1 -1
- package/dist/components/gov-app.js +1 -1
- package/dist/components/gov-app.js.map +1 -1
- package/dist/components/gov-attachments-item.js +1 -1
- package/dist/components/gov-button.js +1 -1
- package/dist/components/gov-card.js +1 -1
- package/dist/components/gov-dropdown.js +1 -1
- package/dist/components/gov-dropdown.js.map +1 -1
- package/dist/components/gov-form-autocomplete.js +1 -1
- package/dist/components/gov-form-checkbox.js +1 -1
- package/dist/components/gov-form-checkbox.js.map +1 -1
- package/dist/components/gov-form-file.js +1 -1
- package/dist/components/gov-form-file.js.map +1 -1
- package/dist/components/gov-form-input.js +1 -1
- package/dist/components/gov-form-multi-select.js +1 -1
- package/dist/components/gov-form-multi-select.js.map +1 -1
- package/dist/components/gov-form-radio.js +1 -1
- package/dist/components/gov-form-radio.js.map +1 -1
- package/dist/components/gov-form-select.js +1 -1
- package/dist/components/gov-form-switch.js +1 -1
- package/dist/components/gov-form-switch.js.map +1 -1
- package/dist/components/gov-icon.js +1 -1
- package/dist/components/gov-infobar.js +1 -1
- package/dist/components/gov-infobar.js.map +1 -1
- package/dist/components/gov-loading.js +1 -1
- package/dist/components/gov-modal.js +1 -1
- package/dist/components/gov-pagination.js +1 -1
- package/dist/components/gov-pagination.js.map +1 -1
- package/dist/components/gov-prompt.js +1 -1
- package/dist/components/gov-side-nav-item.js +1 -1
- package/dist/components/gov-stepper-item.js +1 -1
- package/dist/components/gov-stepper-item.js.map +1 -1
- package/dist/components/gov-tabs.js +1 -1
- package/dist/components/gov-tile.js +1 -1
- package/dist/components/gov-toast.js +1 -1
- package/dist/components/gov-toast.js.map +1 -1
- package/dist/components/gov-tooltip-content.js +1 -1
- package/dist/components/gov-wizard-item.js +1 -1
- package/dist/components/gov-wizard-item.js.map +1 -1
- package/dist/components/p-010f8351.js +2 -0
- package/dist/components/{p-afb7fc88.js.map → p-010f8351.js.map} +1 -1
- package/dist/components/p-4981dc67.js +2 -0
- package/dist/components/p-4981dc67.js.map +1 -0
- package/dist/components/{p-30af8d08.js → p-9231ec61.js} +2 -2
- package/dist/components/p-9231ec61.js.map +1 -0
- package/dist/components/{p-ae179d8a.js → p-a3d3943d.js} +2 -2
- package/dist/components/{p-e24896b9.js → p-b00d2836.js} +2 -2
- package/dist/components/{p-5d8154f9.js → p-b9447c86.js} +2 -2
- package/dist/components/p-b9447c86.js.map +1 -0
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-f9dfaff1.entry.js → p-0553eb92.entry.js} +2 -2
- package/dist/core/{p-f9dfaff1.entry.js.map → p-0553eb92.entry.js.map} +1 -1
- package/dist/core/{p-cb37644f.entry.js → p-19a54ee9.entry.js} +2 -2
- package/dist/core/p-19a54ee9.entry.js.map +1 -0
- package/dist/core/p-19b897c0.entry.js +2 -0
- package/dist/core/p-19b897c0.entry.js.map +1 -0
- package/dist/core/{p-73fb7ac7.entry.js → p-1c40fdd5.entry.js} +2 -2
- package/dist/core/p-1c40fdd5.entry.js.map +1 -0
- package/dist/core/{p-fea58abc.entry.js → p-28f39f69.entry.js} +2 -2
- package/dist/core/p-28f39f69.entry.js.map +1 -0
- package/dist/core/{p-2c0ac7ab.entry.js → p-35c1c12c.entry.js} +2 -2
- package/dist/core/p-35c1c12c.entry.js.map +1 -0
- package/dist/core/p-80f5140b.entry.js +2 -0
- package/dist/core/{p-2944bf77.entry.js.map → p-80f5140b.entry.js.map} +1 -1
- package/dist/core/p-84f6b11a.entry.js +2 -0
- package/dist/core/{p-0c769f1a.entry.js.map → p-84f6b11a.entry.js.map} +1 -1
- package/dist/core/p-a7719b55.entry.js +2 -0
- package/dist/core/p-a7719b55.entry.js.map +1 -0
- package/dist/core/{p-ce262a72.entry.js → p-acd6a9f4.entry.js} +2 -2
- package/dist/core/p-acd6a9f4.entry.js.map +1 -0
- package/dist/core/p-b8c35c57.entry.js +2 -0
- package/dist/core/p-b8c35c57.entry.js.map +1 -0
- package/dist/core/p-c5d3efc2.entry.js +2 -0
- package/dist/core/{p-f8252fea.entry.js.map → p-c5d3efc2.entry.js.map} +1 -1
- package/dist/core/{p-307d4c56.entry.js → p-d84b290e.entry.js} +2 -2
- package/dist/core/{p-307d4c56.entry.js.map → p-d84b290e.entry.js.map} +1 -1
- package/dist/core/{p-49729bd4.entry.js → p-e2d6efaf.entry.js} +2 -2
- package/dist/core/p-e2d6efaf.entry.js.map +1 -0
- package/dist/core/{p-ff97a688.entry.js → p-e5227e40.entry.js} +2 -2
- package/dist/core/{p-ff97a688.entry.js.map → p-e5227e40.entry.js.map} +1 -1
- package/dist/core/{p-8667d5df.entry.js → p-fab698a7.entry.js} +2 -2
- package/dist/core/p-fab698a7.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/gov-app.entry.js +78 -0
- package/dist/esm/gov-app.entry.js.map +1 -1
- package/dist/esm/gov-dropdown.entry.js +1 -1
- package/dist/esm/gov-dropdown.entry.js.map +1 -1
- package/dist/esm/gov-form-autocomplete.entry.js +15 -15
- package/dist/esm/gov-form-autocomplete.entry.js.map +1 -1
- package/dist/esm/gov-form-checkbox.entry.js +2 -2
- package/dist/esm/gov-form-checkbox.entry.js.map +1 -1
- package/dist/esm/gov-form-file.entry.js +1 -1
- package/dist/esm/gov-form-file.entry.js.map +1 -1
- package/dist/esm/gov-form-input.entry.js +1 -1
- package/dist/esm/gov-form-input.entry.js.map +1 -1
- package/dist/esm/gov-form-multi-select.entry.js +29 -24
- package/dist/esm/gov-form-multi-select.entry.js.map +1 -1
- package/dist/esm/gov-form-radio.entry.js +1 -1
- package/dist/esm/gov-form-radio.entry.js.map +1 -1
- package/dist/esm/gov-form-select.entry.js +18 -17
- package/dist/esm/gov-form-select.entry.js.map +1 -1
- package/dist/esm/gov-form-switch.entry.js +2 -2
- package/dist/esm/gov-form-switch.entry.js.map +1 -1
- package/dist/esm/gov-icon.entry.js +2 -2
- package/dist/esm/gov-icon.entry.js.map +1 -1
- package/dist/esm/gov-infobar.entry.js +1 -1
- package/dist/esm/gov-infobar.entry.js.map +1 -1
- package/dist/esm/gov-pagination.entry.js +1 -1
- package/dist/esm/gov-pagination.entry.js.map +1 -1
- package/dist/esm/gov-stepper-item.entry.js +1 -1
- package/dist/esm/gov-stepper-item.entry.js.map +1 -1
- package/dist/esm/gov-toast.entry.js +4 -1
- package/dist/esm/gov-toast.entry.js.map +1 -1
- package/dist/esm/gov-wizard-item.entry.js +1 -1
- package/dist/esm/gov-wizard-item.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/hydrate/index.js +175 -84
- package/dist/types/components/gov-form/autocomplete/gov-form-autocomplete.d.ts +3 -3
- package/dist/types/components/gov-form/multiselect/gov-form-multi-select.d.ts +15 -3
- package/dist/types/components/gov-form/select/gov-form-select.d.ts +7 -3
- package/dist/types/components.d.ts +32 -0
- package/package.json +2 -2
- package/dist/components/p-30af8d08.js.map +0 -1
- package/dist/components/p-5d8154f9.js.map +0 -1
- package/dist/components/p-afb7fc88.js +0 -2
- package/dist/components/p-b430ee05.js +0 -2
- package/dist/components/p-b430ee05.js.map +0 -1
- package/dist/core/p-0c769f1a.entry.js +0 -2
- package/dist/core/p-243a61bf.entry.js +0 -2
- package/dist/core/p-243a61bf.entry.js.map +0 -1
- package/dist/core/p-2944bf77.entry.js +0 -2
- package/dist/core/p-2c0ac7ab.entry.js.map +0 -1
- package/dist/core/p-49729bd4.entry.js.map +0 -1
- package/dist/core/p-73fb7ac7.entry.js.map +0 -1
- package/dist/core/p-8033916b.entry.js +0 -2
- package/dist/core/p-8033916b.entry.js.map +0 -1
- package/dist/core/p-8667d5df.entry.js.map +0 -1
- package/dist/core/p-ae04e58f.entry.js +0 -2
- package/dist/core/p-ae04e58f.entry.js.map +0 -1
- package/dist/core/p-cb37644f.entry.js.map +0 -1
- package/dist/core/p-ce262a72.entry.js.map +0 -1
- package/dist/core/p-f8252fea.entry.js +0 -2
- package/dist/core/p-fea58abc.entry.js.map +0 -1
- /package/dist/components/{p-ae179d8a.js.map → p-a3d3943d.js.map} +0 -0
- /package/dist/components/{p-e24896b9.js.map → p-b00d2836.js.map} +0 -0
|
@@ -72,7 +72,7 @@ const DropdownClass = {
|
|
|
72
72
|
list: 'gov-dropdown__list'
|
|
73
73
|
};
|
|
74
74
|
|
|
75
|
-
const govDropdownCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-dropdown{position:relative}.gov-dropdown__list{position:absolute;left:0;z-index:100}.gov-dropdown ul{padding:0.25rem;border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-dropdown-bg-color, var(--gov-color-neutral-white));box-shadow:var(--gov-dropdown-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1))}.gov-dropdown li{margin:0;white-space:nowrap}.gov-dropdown li::before{content:none}.gov-dropdown li>*{width:100%}.gov-dropdown li>* .element{justify-content:space-between;width:100
|
|
75
|
+
const govDropdownCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-dropdown{position:relative}.gov-dropdown__list{position:absolute;left:0;z-index:100}.gov-dropdown ul{padding:0.25rem;border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-dropdown-bg-color, var(--gov-color-neutral-white));box-shadow:var(--gov-dropdown-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1))}.gov-dropdown li{margin:0;white-space:nowrap}.gov-dropdown li::before{content:none}.gov-dropdown li>*{width:100%}.gov-dropdown li>* .element{justify-content:space-between;width:100%}.gov-dropdown[position=right] .gov-dropdown__list{right:0;left:initial}";
|
|
76
76
|
|
|
77
77
|
const GovDropdown = class {
|
|
78
78
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-dropdown.entry.js","mappings":"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","names":[],"sources":["../../../node_modules/stencil-click-outside/dist/esm/index.js","../../../packages/core/src/components/gov-button/dropdown/constants.ts","../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.scss?tag=gov-dropdown","../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.tsx"],"sourcesContent":["import { Build as BUILD, getElement } from '@stencil/core';\nconst ClickOutsideOptionsDefaults = {\n triggerEvents: \"click\",\n exclude: \"\"\n};\n/**\n * Call this function as soon as the click outside of annotated method's host is done.\n * @example\n```\n@ClickOutside()\ncallback() {\n // this will run when click outside of element (host component) is done.\n}\n```\n */\nexport function ClickOutside(opt = ClickOutsideOptionsDefaults) {\n return (proto, methodName) => {\n // this is to resolve the 'compiler optimization issue':\n // lifecycle events not being called when not explicitly declared in at least one of components from bundle\n BUILD.connectedCallback = true;\n BUILD.disconnectedCallback = true;\n const { connectedCallback, disconnectedCallback } = proto;\n proto.connectedCallback = function () {\n const host = getElement(this);\n const method = this[methodName];\n registerClickOutside(this, host, method, opt);\n return connectedCallback && connectedCallback.call(this);\n };\n proto.disconnectedCallback = function () {\n const host = getElement(this);\n const method = this[methodName];\n removeClickOutside(this, host, method, opt);\n return disconnectedCallback && disconnectedCallback.call(this);\n };\n };\n}\n/**\n * Register callback function for HTMLElement to be executed when user clicks outside of element.\n * @example\n```\n<span\n ref={spanEl => registerClickOutside(this, spanEl, () => this.test())}>\n Hello, World!\n</span>;\n```\n */\nexport function registerClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {\n const excludedNodes = getExcludedNodes(opt);\n getTriggerEvents(opt).forEach(triggerEvent => {\n window.addEventListener(triggerEvent, (e) => {\n initClickOutside(e, component, element, callback, excludedNodes);\n }, false);\n });\n}\n/**\n * Remove click outside callback function for HTMLElement.\n */\nexport function removeClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {\n getTriggerEvents(opt).forEach(triggerEvent => {\n window.removeEventListener(triggerEvent, (e) => {\n initClickOutside(e, component, element, callback);\n }, false);\n });\n}\nfunction initClickOutside(event, component, element, callback, excludedNodes) {\n const target = event.target;\n if (!element.contains(target) && !isExcluded(target, excludedNodes)) {\n callback.call(component);\n }\n}\nfunction getTriggerEvents(opt) {\n if (opt.triggerEvents) {\n return opt.triggerEvents.split(\",\").map(e => e.trim());\n }\n return [\"click\"];\n}\nfunction getExcludedNodes(opt) {\n if (opt.exclude) {\n try {\n return Array.from(document.querySelectorAll(opt.exclude));\n }\n catch (err) {\n console.warn(`@ClickOutside: Exclude: '${opt.exclude}' will not be evaluated. Check your exclude selector syntax.`, err);\n }\n }\n return;\n}\nfunction isExcluded(target, excudedNodes) {\n if (target && excudedNodes) {\n for (let excludedNode of excudedNodes) {\n if (excludedNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n}\n","import { ValueOf } from \"../../../types/interfaces\"\n\nexport enum Position {\n\tLEFT = 'left',\n\tRIGHT = 'right',\n}\n\nexport type PositionType = `${ValueOf<typeof Position>}`\n\nexport const DropdownClass = {\n\troot: 'gov-dropdown',\n\tlist: 'gov-dropdown__list'\n}\n","/*\n * Dropdown\n */\n\n$class: \".gov-dropdown\";\n\n#{$class} {\n\tposition: relative;\n\n\t&__list {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tz-index: 100;\n\t}\n\tul {\n\t\tpadding: rem-calc(4);\n\t\tborder-radius: $border-radius;\n\t\tbackground-color: $dropdown-bg-color;\n\t\tbox-shadow: $dropdown-box-shadow;\n\t}\n\tli {\n\t\tmargin: 0;\n\t\twhite-space: nowrap;\n\t\t&::before {\n\t\t\tcontent: none;\n\t\t}\n\t\t> * {\n\t\t\twidth: 100%;\n\t\t}\n\t\t> * .element {\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t\tpadding: rem-calc(8) !important;\n\t\t\tfont-weight: 400 !important;\n\t\t}\n\t}\n\t&[position=\"right\"] {\n\t\t#{$class}__list {\n\t\t\tright: 0;\n\t\t\tleft: initial;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport { registerClickOutside } from \"stencil-click-outside\"\nimport { govHost, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { ButtonClass } from \"../default/constants\"\nimport { DropdownClass, Position, PositionType } from \"./constants\"\nimport { DropdownEvent } from \"./gov-dropdown.types\"\n\n@Component({\n\ttag: \"gov-dropdown\",\n\tstyleUrl: \"gov-dropdown.scss\",\n})\nexport class GovDropdown {\n\tprivate h: GovHost\n\tprivate readonly listId: string\n\tprivate readonly controlId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.listId = createID(\"GovDropdownList\")\n\t\tthis.controlId = createID(\"GovDropdownControl\")\n\t}\n\n\t@Element() host: HTMLGovButtonElement\n\t/**\n\t * Dropdown open state\n\t */\n\t@Prop({ mutable: true }) open = false\n\t/**\n\t * Menu display position\n\t */\n\t@Prop() readonly position: PositionType = Position.LEFT\n\t/**\n\t * Emitted when the dropdown change state\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<DropdownEvent>\n\n\tcomponentWillLoad() {\n\t\tif (this.trigger) {\n\t\t\tthis.trigger.setAttribute(\"wcag-controls\", this.listId)\n\t\t\tthis.trigger.setAttribute(\"wcag-has-popup\", toBoolAttr(!!this.list))\n\t\t\tthis.trigger.setAttribute(\"identifier\", this.controlId)\n\n\t\t\tthis.trigger.addEventListener(\"gov-click\", (e) => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.open = !this.open\n\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: DropdownClass.root,\n\t\t\t\t\toriginalEvent: e,\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t}\n\n\tget trigger() {\n\t\treturn this.host.querySelector(`* > ${ButtonClass.root}`) as HTMLGovButtonElement\n\t}\n\n\tget list() {\n\t\treturn this.h.getSlot(\"list\") as Nullable<HTMLUListElement>\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([DropdownClass.root])} open={this.open} position={this.position}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<div\n\t\t\t\t\tref={el => registerClickOutside(this, el, () => this.open = false)}\n\t\t\t\t\tclass={DropdownClass.list}\n\t\t\t\t\tid={this.listId}\n\t\t\t\t\taria-labelledby={this.controlId}\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\thidden={!this.open}>\n\t\t\t\t\t<slot name=\"list\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the dropdown\n\t */\n\t@Method()\n\tasync getState() {\n\t\treturn this.open\n\t}\n\n\t/**\n\t * Sets the dropdown state\n\t */\n\t@Method()\n\tasync setOpen(state: boolean) {\n\t\tthis.open = state\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"gov-dropdown.entry.js","mappings":"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","names":[],"sources":["../../../node_modules/stencil-click-outside/dist/esm/index.js","../../../packages/core/src/components/gov-button/dropdown/constants.ts","../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.scss?tag=gov-dropdown","../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.tsx"],"sourcesContent":["import { Build as BUILD, getElement } from '@stencil/core';\nconst ClickOutsideOptionsDefaults = {\n triggerEvents: \"click\",\n exclude: \"\"\n};\n/**\n * Call this function as soon as the click outside of annotated method's host is done.\n * @example\n```\n@ClickOutside()\ncallback() {\n // this will run when click outside of element (host component) is done.\n}\n```\n */\nexport function ClickOutside(opt = ClickOutsideOptionsDefaults) {\n return (proto, methodName) => {\n // this is to resolve the 'compiler optimization issue':\n // lifecycle events not being called when not explicitly declared in at least one of components from bundle\n BUILD.connectedCallback = true;\n BUILD.disconnectedCallback = true;\n const { connectedCallback, disconnectedCallback } = proto;\n proto.connectedCallback = function () {\n const host = getElement(this);\n const method = this[methodName];\n registerClickOutside(this, host, method, opt);\n return connectedCallback && connectedCallback.call(this);\n };\n proto.disconnectedCallback = function () {\n const host = getElement(this);\n const method = this[methodName];\n removeClickOutside(this, host, method, opt);\n return disconnectedCallback && disconnectedCallback.call(this);\n };\n };\n}\n/**\n * Register callback function for HTMLElement to be executed when user clicks outside of element.\n * @example\n```\n<span\n ref={spanEl => registerClickOutside(this, spanEl, () => this.test())}>\n Hello, World!\n</span>;\n```\n */\nexport function registerClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {\n const excludedNodes = getExcludedNodes(opt);\n getTriggerEvents(opt).forEach(triggerEvent => {\n window.addEventListener(triggerEvent, (e) => {\n initClickOutside(e, component, element, callback, excludedNodes);\n }, false);\n });\n}\n/**\n * Remove click outside callback function for HTMLElement.\n */\nexport function removeClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {\n getTriggerEvents(opt).forEach(triggerEvent => {\n window.removeEventListener(triggerEvent, (e) => {\n initClickOutside(e, component, element, callback);\n }, false);\n });\n}\nfunction initClickOutside(event, component, element, callback, excludedNodes) {\n const target = event.target;\n if (!element.contains(target) && !isExcluded(target, excludedNodes)) {\n callback.call(component);\n }\n}\nfunction getTriggerEvents(opt) {\n if (opt.triggerEvents) {\n return opt.triggerEvents.split(\",\").map(e => e.trim());\n }\n return [\"click\"];\n}\nfunction getExcludedNodes(opt) {\n if (opt.exclude) {\n try {\n return Array.from(document.querySelectorAll(opt.exclude));\n }\n catch (err) {\n console.warn(`@ClickOutside: Exclude: '${opt.exclude}' will not be evaluated. Check your exclude selector syntax.`, err);\n }\n }\n return;\n}\nfunction isExcluded(target, excudedNodes) {\n if (target && excudedNodes) {\n for (let excludedNode of excudedNodes) {\n if (excludedNode.contains(target)) {\n return true;\n }\n }\n }\n return false;\n}\n","import { ValueOf } from \"../../../types/interfaces\"\n\nexport enum Position {\n\tLEFT = 'left',\n\tRIGHT = 'right',\n}\n\nexport type PositionType = `${ValueOf<typeof Position>}`\n\nexport const DropdownClass = {\n\troot: 'gov-dropdown',\n\tlist: 'gov-dropdown__list'\n}\n","/*\n * Dropdown\n */\n\n$class: \".gov-dropdown\";\n\n#{$class} {\n\tposition: relative;\n\n\t&__list {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tz-index: 100;\n\t}\n\tul {\n\t\tpadding: rem-calc(4);\n\t\tborder-radius: $border-radius;\n\t\tbackground-color: $dropdown-bg-color;\n\t\tbox-shadow: $dropdown-box-shadow;\n\t}\n\tli {\n\t\tmargin: 0;\n\t\twhite-space: nowrap;\n\t\t&::before {\n\t\t\tcontent: none;\n\t\t}\n\t\t> * {\n\t\t\twidth: 100%;\n\t\t}\n\t\t> * .element {\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\t&[position=\"right\"] {\n\t\t#{$class}__list {\n\t\t\tright: 0;\n\t\t\tleft: initial;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport { registerClickOutside } from \"stencil-click-outside\"\nimport { govHost, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { ButtonClass } from \"../default/constants\"\nimport { DropdownClass, Position, PositionType } from \"./constants\"\nimport { DropdownEvent } from \"./gov-dropdown.types\"\n\n@Component({\n\ttag: \"gov-dropdown\",\n\tstyleUrl: \"gov-dropdown.scss\",\n})\nexport class GovDropdown {\n\tprivate h: GovHost\n\tprivate readonly listId: string\n\tprivate readonly controlId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.listId = createID(\"GovDropdownList\")\n\t\tthis.controlId = createID(\"GovDropdownControl\")\n\t}\n\n\t@Element() host: HTMLGovButtonElement\n\t/**\n\t * Dropdown open state\n\t */\n\t@Prop({ mutable: true }) open = false\n\t/**\n\t * Menu display position\n\t */\n\t@Prop() readonly position: PositionType = Position.LEFT\n\t/**\n\t * Emitted when the dropdown change state\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<DropdownEvent>\n\n\tcomponentWillLoad() {\n\t\tif (this.trigger) {\n\t\t\tthis.trigger.setAttribute(\"wcag-controls\", this.listId)\n\t\t\tthis.trigger.setAttribute(\"wcag-has-popup\", toBoolAttr(!!this.list))\n\t\t\tthis.trigger.setAttribute(\"identifier\", this.controlId)\n\n\t\t\tthis.trigger.addEventListener(\"gov-click\", (e) => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.open = !this.open\n\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: DropdownClass.root,\n\t\t\t\t\toriginalEvent: e,\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\t}\n\n\tget trigger() {\n\t\treturn this.host.querySelector(`* > ${ButtonClass.root}`) as HTMLGovButtonElement\n\t}\n\n\tget list() {\n\t\treturn this.h.getSlot(\"list\") as Nullable<HTMLUListElement>\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([DropdownClass.root])} open={this.open} position={this.position}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<div\n\t\t\t\t\tref={el => registerClickOutside(this, el, () => this.open = false)}\n\t\t\t\t\tclass={DropdownClass.list}\n\t\t\t\t\tid={this.listId}\n\t\t\t\t\taria-labelledby={this.controlId}\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\thidden={!this.open}>\n\t\t\t\t\t<slot name=\"list\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the dropdown\n\t */\n\t@Method()\n\tasync getState() {\n\t\treturn this.open\n\t}\n\n\t/**\n\t * Sets the dropdown state\n\t */\n\t@Method()\n\tasync setOpen(state: boolean) {\n\t\tthis.open = state\n\t}\n}\n"],"version":3}
|
|
@@ -18,22 +18,22 @@ const GovFormAutocomplete = class {
|
|
|
18
18
|
this.govInput = createEvent(this, "gov-input", 7);
|
|
19
19
|
this.govSelect = createEvent(this, "gov-select", 7);
|
|
20
20
|
this.templateResolver = item => item[this.nameKey];
|
|
21
|
-
this.value =
|
|
21
|
+
this.value = '';
|
|
22
22
|
this.identifier = undefined;
|
|
23
23
|
this.variant = undefined;
|
|
24
24
|
this.success = undefined;
|
|
25
|
-
this.size =
|
|
26
|
-
this.nameKey =
|
|
25
|
+
this.size = 'm';
|
|
26
|
+
this.nameKey = 'name';
|
|
27
27
|
this.name = undefined;
|
|
28
28
|
this.required = false;
|
|
29
|
-
this.disabled =
|
|
29
|
+
this.disabled = false;
|
|
30
30
|
this.placeholder = undefined;
|
|
31
31
|
this.readonly = undefined;
|
|
32
32
|
this.invalid = undefined;
|
|
33
33
|
this.minlength = 3;
|
|
34
34
|
this.maxlength = undefined;
|
|
35
|
-
this.messageEmpty =
|
|
36
|
-
this.messageLoading =
|
|
35
|
+
this.messageEmpty = 'Nebyly nalezeny žádné výsledky';
|
|
36
|
+
this.messageLoading = 'Načítám...';
|
|
37
37
|
this.wcagDescribedBy = undefined;
|
|
38
38
|
this.wcagLabelledBy = undefined;
|
|
39
39
|
this.wcagOwns = undefined;
|
|
@@ -41,7 +41,7 @@ const GovFormAutocomplete = class {
|
|
|
41
41
|
this.processing = false;
|
|
42
42
|
this.arrowCounter = -1;
|
|
43
43
|
this.list = [];
|
|
44
|
-
this.listBoxId = createID(
|
|
44
|
+
this.listBoxId = createID('GovListBox');
|
|
45
45
|
}
|
|
46
46
|
validateVariant(newValue) {
|
|
47
47
|
validateProp(FormAutocompleteVariants, newValue, FormAutocompleteClass.root);
|
|
@@ -64,10 +64,10 @@ const GovFormAutocomplete = class {
|
|
|
64
64
|
async moveToView() {
|
|
65
65
|
await delay(200);
|
|
66
66
|
const heightOfList = this.listRef.offsetHeight;
|
|
67
|
-
const selected = this.listRef.querySelector(
|
|
67
|
+
const selected = this.listRef.querySelector('li[aria-selected="true"]');
|
|
68
68
|
if (selected && heightOfList) {
|
|
69
69
|
const offsetTop = selected.offsetTop;
|
|
70
|
-
this.listRef.scrollTo({ top: offsetTop, behavior:
|
|
70
|
+
this.listRef.scrollTo({ top: offsetTop, behavior: 'smooth' });
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
doSearch() {
|
|
@@ -89,7 +89,7 @@ const GovFormAutocomplete = class {
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
get isValueAccepted() {
|
|
92
|
-
if (typeof this.value ===
|
|
92
|
+
if (typeof this.value === 'string') {
|
|
93
93
|
return this.value.length >= this.minlength;
|
|
94
94
|
}
|
|
95
95
|
else {
|
|
@@ -101,9 +101,9 @@ const GovFormAutocomplete = class {
|
|
|
101
101
|
this.validateSize(this.size);
|
|
102
102
|
}
|
|
103
103
|
render() {
|
|
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:
|
|
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, success: this.success, 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:
|
|
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) {
|
|
@@ -159,7 +159,7 @@ const GovFormAutocomplete = class {
|
|
|
159
159
|
originalEvent: e,
|
|
160
160
|
});
|
|
161
161
|
this.list = [];
|
|
162
|
-
if (has(this.nameKey, selected) && typeof selected[this.nameKey] ===
|
|
162
|
+
if (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {
|
|
163
163
|
this.value = selected[this.nameKey];
|
|
164
164
|
}
|
|
165
165
|
}
|
|
@@ -204,8 +204,8 @@ const GovFormAutocomplete = class {
|
|
|
204
204
|
* Clears whisperer value
|
|
205
205
|
*/
|
|
206
206
|
async clearValue() {
|
|
207
|
-
this.value =
|
|
208
|
-
this.inputRef.value =
|
|
207
|
+
this.value = '';
|
|
208
|
+
this.inputRef.value = '';
|
|
209
209
|
await this.inputRef.clearValue();
|
|
210
210
|
}
|
|
211
211
|
/**
|
|
@@ -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={(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\tevent.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\tevent.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\tevent.stopPropagation()\n\t\tif (event.keyCode === 13) {\n\t\t\te.preventDefault()\n\t\t\tevent.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 { FormAutocompleteClass, FormAutocompleteSizes, FormAutocompleteVariants, SizesType, VariantType } 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({ reflect: true, mutable: true }) readonly disabled: boolean = false\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\tsuccess={this.success}\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} role={'listbox'} id={this.listBoxId} 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}>{this.messageEmpty}</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\tevent.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\tevent.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\tevent.stopPropagation()\n\t\tif (event.keyCode === 13) {\n\t\t\te.preventDefault()\n\t\t\tevent.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}
|
|
@@ -25,7 +25,7 @@ const GovFormCheckbox = class {
|
|
|
25
25
|
this.value = undefined;
|
|
26
26
|
this.checked = false;
|
|
27
27
|
this.required = false;
|
|
28
|
-
this.disabled =
|
|
28
|
+
this.disabled = false;
|
|
29
29
|
this.name = undefined;
|
|
30
30
|
this.size = "m";
|
|
31
31
|
this.identifier = undefined;
|
|
@@ -67,7 +67,7 @@ const GovFormCheckbox = class {
|
|
|
67
67
|
}
|
|
68
68
|
return children;
|
|
69
69
|
};
|
|
70
|
-
return (h(Host, { class: FormCheckboxClass.root, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, ref: el => (this.inputRef = el), "aria-checked": toBoolAttr(this.checked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg" }))))));
|
|
70
|
+
return (h(Host, { class: FormCheckboxClass.root, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, ref: el => (this.inputRef = el), "aria-checked": toBoolAttr(this.checked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg" }))))));
|
|
71
71
|
}
|
|
72
72
|
onFocusHandler(e) {
|
|
73
73
|
e.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-form-checkbox.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n */\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\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 { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } from \"./constants\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormCheckboxEvent } from \"./gov-form-checkbox.types\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkboxes size.\n\t */\n\t@Prop() readonly size?: FormCheckboxSizesType = \"m\"\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormCheckboxEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToControl(\"type\", \"checkbox\")\n\t\tthis.passControlAttrs()\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"identifier\", this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\taria-checked={toBoolAttr(this.checked)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check-lg\"></gov-icon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>,\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"gov-form-checkbox.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n */\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\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 { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } from \"./constants\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormCheckboxEvent } from \"./gov-form-checkbox.types\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop({ reflect: true, mutable: true }) readonly disabled: boolean = false\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkboxes size.\n\t */\n\t@Prop() readonly size?: FormCheckboxSizesType = \"m\"\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormCheckboxEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToControl(\"type\", \"checkbox\")\n\t\tthis.passControlAttrs()\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"identifier\", this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\taria-checked={toBoolAttr(this.checked)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check-lg\"></gov-icon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>,\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}
|
|
@@ -60,7 +60,7 @@ const GovFormFile = class {
|
|
|
60
60
|
this.govRemoveFile = createEvent(this, "gov-remove-file", 7);
|
|
61
61
|
this.expanded = false;
|
|
62
62
|
this.required = false;
|
|
63
|
-
this.disabled =
|
|
63
|
+
this.disabled = false;
|
|
64
64
|
this.displayAttachments = true;
|
|
65
65
|
this.name = undefined;
|
|
66
66
|
this.accept = undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gov-form-file.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/file/constants.ts","../../../packages/core/src/utils/file.utils.ts","../../../packages/core/src/components/gov-form/file/gov-form-file.scss?tag=gov-form-file","../../../packages/core/src/components/gov-form/file/gov-form-file.tsx"],"sourcesContent":["export const FormFileClass = {\n\troot: 'gov-form-file',\n\tarea: 'gov-form-file__area',\n\tlabel: 'gov-form-file__label',\n\tinput: 'gov-form-file__input',\n\tlist: 'gov-form-file__list',\n\titem: 'gov-form-file__item',\n\tattachments: 'gov-form-file__attachments',\n}\n","export function formatBytes(bytes: any): string {\n\tconst units = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n\tlet l = 0,\n\t\tn = parseInt(bytes, 10) || 0\n\n\twhile (n >= 1024 && ++l) {\n\t\tn = n / 1024\n\t}\n\n\treturn n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]\n}\n\nexport function fileAcceptValidation(file: File, accept: string): boolean {\n\tif (typeof accept === 'string' && accept.length) {\n\t\treturn (\n\t\t\taccept\n\t\t\t\t.replace(/\\s/g, '')\n\t\t\t\t.split(',')\n\t\t\t\t.filter(accept => {\n\t\t\t\t\treturn new RegExp(accept.replace('*', '.*')).test(file.type)\n\t\t\t\t}).length > 0\n\t\t)\n\t} else {\n\t\treturn true\n\t}\n}\n\nexport function fileSizeValidation(file: File, maxSize: number): boolean {\n\tconst fileSize = Math.round(file.size)\n\treturn fileSize <= maxSize\n}\n","/*\n * File\n */\n\n$class: \".gov-form-file\";\n\n#{$class} {\n\t@include base();\n\t&__label .gov-form-label__label {\n\t\t@include reset-last-margin();\n\t}\n\t&__input {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.0001;\n\t\tcursor: pointer;\n\t}\n\t&__attachments {\n\t\tmargin-top: rem-calc(16 0 0);\n\t}\n\t&__item {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\talign-items: center;\n\t}\n\n\t// STATES\n\t@include parameter(\"disabled\") {\n\t\t#{$class} {\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\tpointer-events: none;\n\t\t\t\t* {\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"expanded\") {\n\t\t#{$class} {\n\t\t\t&__area {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(32) rem-calc(22) rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t\ttransition: background-color $t ease-in-out;\n\t\t\t\twill-change: background-color;\n\t\t\t\t&.highlight {\n\t\t\t\t\tbackground-color: color(\"primary.200\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t&__attachments {\n\t\t\t\tmargin: rem-calc(24 0 0);\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"invalid\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t\t&__area {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"disabled\") {\n\t\t\t#{$class} {\n\t\t\t\t&__area {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t@include parameter(\"expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tpadding: rem-calc(32);\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, State, Watch } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { FormFileClass } from \"./constants\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { fileAcceptValidation, fileSizeValidation, formatBytes } from \"../../../utils/file.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovFormFileEvent, GovFormFileItem } from \"./gov-form-file.types\"\n\n@Component({\n\ttag: \"gov-form-file\",\n\tstyleUrl: \"gov-form-file.scss\",\n})\nexport class GovFormFile {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\n\tprivate areaRef?: HTMLDivElement\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly fileId: string\n\n\tconstructor() {\n\t\tthis.fileId = createID(\"GovInputFile\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormFileElement\n\t/**\n\t * Expands the file input to fill 100% of the container width.\n\t */\n\t@Prop() readonly expanded: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the File component disabled.\n\t * This prevents users from being able to interact with the File, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Show list of attachments\n\t */\n\t@Prop({ attribute: \"display-attachments\" }) readonly displayAttachments: boolean = true\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n\t */\n\t@Prop() readonly accept: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple\n\t */\n\t@Prop() readonly multiple: boolean = false\n\t/**\n\t * Maximum embedded file size\n\t */\n\t@Prop({ attribute: \"max-file-size\" }) readonly maxFileSize: number = -1\n\t/**\n\t * Custom File identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Error message when the maximum file size is exceeded\n\t */\n\t@Prop({ attribute: \"error-size\" }) readonly errorSize: string = \"Soubor je větší než povolená velikost {FILE_SIZE}\"\n\t/**\n\t * Insert unsupported file error message\n\t */\n\t@Prop({ attribute: \"error-accept\" }) readonly errorAccept: string = \"Soubor tohoto typu není povolen\"\n\t/**\n\t * Description of the list of attachments\n\t */\n\t@Prop({ attribute: \"attachments-label\" }) readonly attachmentsLabel: string = \"Přílohy\"\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 * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-remove-label\" }) readonly wcagRemoveLabel: string = \"Odebrat soubor {FILE_NAME}\"\n\t/**\n\t * Adds accessible label for the list of attachments.\n\t */\n\t@Prop({ attribute: \"wcag-attachments-label\" }) readonly wcagAttachmentsLabel: string = \"Přílohy\"\n\t/**\n\t * Emitted when the File has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Emitted when the File loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when the list of inserted files is changed\n\t */\n\t@Event({ eventName: \"gov-files\" }) govFiles: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a new file is added\n\t */\n\t@Event({ eventName: \"gov-add-file\" }) govAddFile: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a file is removed from the list\n\t */\n\t@Event({ eventName: \"gov-remove-file\" }) govRemoveFile: EventEmitter<GovFormFileEvent>\n\n\t@State() files: GovFormFileItem[] = []\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"type\", \"File\")\n\t}\n\n\n\tprivate registerListeners() {\n\t\tfunction highlight() {\n\t\t\tthis.areaRef.classList.add(\"highlight\")\n\t\t}\n\n\t\tfunction unhighlight() {\n\t\t\tthis.areaRef.classList.remove(\"highlight\")\n\t\t}\n\n\t\tthis.inputRef.addEventListener(\n\t\t\t\"change\",\n\t\t\te => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tconst files = (e.target as HTMLInputElement).files\n\t\t\t\tthis.validateFiles(files)\n\t\t\t},\n\t\t\tfalse,\n\t\t)\n\t\t//this.inputRef.addEventListener('focus')\n\n\t\tif (this.expanded) {\n\t\t\tconst events = [\"dragover\", \"dragleave\"]\n\t\t\tconst inEvents = [\"dragenter\", \"dragover\", \"mouseenter\"]\n\t\t\tconst outEvents = [\"dragleave\", \"drop\", \"mouseleave\"]\n\n\t\t\tevents.map(eventName => this.inputRef.addEventListener(eventName, this.preventDefaults.bind(this), false))\n\t\t\tinEvents.map(eventName => this.inputRef.addEventListener(eventName, highlight.bind(this), false))\n\t\t\toutEvents.forEach(eventName => this.inputRef.addEventListener(eventName, unhighlight.bind(this), false))\n\n\t\t\tthis.areaRef.addEventListener(\"drop\", this.handleDrop.bind(this), false)\n\t\t}\n\t}\n\n\tpreventDefaults(e) {\n\t\te.preventDefault()\n\t\te.stopPropagation()\n\t}\n\n\thandleDrop(e: DragEvent) {\n\t\tconst dataTransfer = e.dataTransfer\n\t\tthis.validateFiles(dataTransfer.files)\n\t}\n\n\tprivate validateFiles(files: FileList) {\n\t\tlet filesBuffer: GovFormFileItem[] = []\n\t\tArray.from(files).map(file => {\n\t\t\tconst isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null\n\t\t\tif (isFile === null) {\n\t\t\t\tconst isSizeValid = typeof this.maxFileSize === \"number\" && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true\n\t\t\t\tconst isAcceptValid = fileAcceptValidation(file, this.accept)\n\t\t\t\tconst newFile = {\n\t\t\t\t\tid: createID(\"GovFormFile\"),\n\t\t\t\t\tfile,\n\t\t\t\t\tacceptValid: isAcceptValid,\n\t\t\t\t\tsizeValid: isSizeValid,\n\t\t\t\t}\n\t\t\t\tif (this.displayAttachments) {\n\t\t\t\t\tthis.files = [...this.files, newFile]\n\t\t\t\t} else {\n\t\t\t\t\tfilesBuffer = [...filesBuffer, newFile]\n\t\t\t\t}\n\t\t\t\tthis.govAddFile.emit({\n\t\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\t\tfile: newFile,\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\tthis.govFiles.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\tfiles: filesBuffer.length ? filesBuffer : this.files,\n\t\t})\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tthis.watchDisabled()\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\n\t\tthis.registerListeners()\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([FormFileClass.root])} invalid={toBoolAttrIfDefined(this.invalid)} expanded={toBoolAttrIfDefined(this.expanded)}>\n\t\t\t\t<div class={FormFileClass.area} ref={el => (this.areaRef = el as HTMLDivElement)}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={FormFileClass.input}\n\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\tid={this.identifier || this.fileId}\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot(\"attachments\") ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<slot name={\"attachments\"} />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.files.length && this.displayAttachments ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<gov-attachments label={this.wcagAttachmentsLabel} wcag-label={this.wcagAttachmentsLabel}>\n\t\t\t\t\t\t\t{this.files.map(item => (\n\t\t\t\t\t\t\t\t<gov-attachments-item wcag-remove-labelled-by={item.id} on-gov-remove={() => this.onRemoveFileHandler(item)}>\n\t\t\t\t\t\t\t\t\t<span class={\"sr-only\"} id={item.id}>\n\t\t\t\t\t\t\t\t\t\t{this.wcagRemoveLabel.replace(\"{FILE_NAME}\", item.file.name)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{item.file.name}\n\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? this.errorAccept : null}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{item.sizeValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{this.errorSize.replace(\"{FILE_SIZE}\", formatBytes(this.maxFileSize))}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t<span slot=\"info\">({formatBytes(item.file.size)})</span>\n\t\t\t\t\t\t\t\t</gov-attachments-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</gov-attachments>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onRemoveFileHandler(file: GovFormFileItem) {\n\t\tconst index = this.files.findIndex(item => item.id === file.id)\n\t\tif (index !== -1) {\n\t\t\tconst files = this.files\n\t\t\tconst removeFile = this.files[index]\n\t\t\tfiles.splice(index, 1)\n\t\t\tthis.files = [...files]\n\t\t\tthis.govRemoveFile.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfile: removeFile,\n\t\t\t})\n\t\t\tthis.govFiles.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfiles,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Returns the reference of the native area element\n\t */\n\t@Method()\n\tasync getAreaRef(): Promise<HTMLDivElement> {\n\t\treturn this.areaRef\n\t}\n\n\t/**\n\t * Remove all files from component state\n\t */\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.files = []\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormFileClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormFileClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.fileId, this.wcagLabelledBy, FormFileClass.root)\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"gov-form-file.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/file/constants.ts","../../../packages/core/src/utils/file.utils.ts","../../../packages/core/src/components/gov-form/file/gov-form-file.scss?tag=gov-form-file","../../../packages/core/src/components/gov-form/file/gov-form-file.tsx"],"sourcesContent":["export const FormFileClass = {\n\troot: 'gov-form-file',\n\tarea: 'gov-form-file__area',\n\tlabel: 'gov-form-file__label',\n\tinput: 'gov-form-file__input',\n\tlist: 'gov-form-file__list',\n\titem: 'gov-form-file__item',\n\tattachments: 'gov-form-file__attachments',\n}\n","export function formatBytes(bytes: any): string {\n\tconst units = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n\tlet l = 0,\n\t\tn = parseInt(bytes, 10) || 0\n\n\twhile (n >= 1024 && ++l) {\n\t\tn = n / 1024\n\t}\n\n\treturn n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]\n}\n\nexport function fileAcceptValidation(file: File, accept: string): boolean {\n\tif (typeof accept === 'string' && accept.length) {\n\t\treturn (\n\t\t\taccept\n\t\t\t\t.replace(/\\s/g, '')\n\t\t\t\t.split(',')\n\t\t\t\t.filter(accept => {\n\t\t\t\t\treturn new RegExp(accept.replace('*', '.*')).test(file.type)\n\t\t\t\t}).length > 0\n\t\t)\n\t} else {\n\t\treturn true\n\t}\n}\n\nexport function fileSizeValidation(file: File, maxSize: number): boolean {\n\tconst fileSize = Math.round(file.size)\n\treturn fileSize <= maxSize\n}\n","/*\n * File\n */\n\n$class: \".gov-form-file\";\n\n#{$class} {\n\t@include base();\n\t&__label .gov-form-label__label {\n\t\t@include reset-last-margin();\n\t}\n\t&__input {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.0001;\n\t\tcursor: pointer;\n\t}\n\t&__attachments {\n\t\tmargin-top: rem-calc(16 0 0);\n\t}\n\t&__item {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\talign-items: center;\n\t}\n\n\t// STATES\n\t@include parameter(\"disabled\") {\n\t\t#{$class} {\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\tpointer-events: none;\n\t\t\t\t* {\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"expanded\") {\n\t\t#{$class} {\n\t\t\t&__area {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(32) rem-calc(22) rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t\ttransition: background-color $t ease-in-out;\n\t\t\t\twill-change: background-color;\n\t\t\t\t&.highlight {\n\t\t\t\t\tbackground-color: color(\"primary.200\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t&__attachments {\n\t\t\t\tmargin: rem-calc(24 0 0);\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"invalid\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t\t&__area {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"disabled\") {\n\t\t\t#{$class} {\n\t\t\t\t&__area {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t@include parameter(\"expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tpadding: rem-calc(32);\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, State, Watch } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { FormFileClass } from \"./constants\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { fileAcceptValidation, fileSizeValidation, formatBytes } from \"../../../utils/file.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovFormFileEvent, GovFormFileItem } from \"./gov-form-file.types\"\n\n@Component({\n\ttag: \"gov-form-file\",\n\tstyleUrl: \"gov-form-file.scss\",\n})\nexport class GovFormFile {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\n\tprivate areaRef?: HTMLDivElement\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly fileId: string\n\n\tconstructor() {\n\t\tthis.fileId = createID(\"GovInputFile\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormFileElement\n\t/**\n\t * Expands the file input to fill 100% of the container width.\n\t */\n\t@Prop() readonly expanded: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the File component disabled.\n\t * This prevents users from being able to interact with the File, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop({ reflect: true, mutable: true }) readonly disabled: boolean = false\n\t/**\n\t * Show list of attachments\n\t */\n\t@Prop({ attribute: \"display-attachments\" }) readonly displayAttachments: boolean = true\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n\t */\n\t@Prop() readonly accept: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple\n\t */\n\t@Prop() readonly multiple: boolean = false\n\t/**\n\t * Maximum embedded file size\n\t */\n\t@Prop({ attribute: \"max-file-size\" }) readonly maxFileSize: number = -1\n\t/**\n\t * Custom File identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Error message when the maximum file size is exceeded\n\t */\n\t@Prop({ attribute: \"error-size\" }) readonly errorSize: string = \"Soubor je větší než povolená velikost {FILE_SIZE}\"\n\t/**\n\t * Insert unsupported file error message\n\t */\n\t@Prop({ attribute: \"error-accept\" }) readonly errorAccept: string = \"Soubor tohoto typu není povolen\"\n\t/**\n\t * Description of the list of attachments\n\t */\n\t@Prop({ attribute: \"attachments-label\" }) readonly attachmentsLabel: string = \"Přílohy\"\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 * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-remove-label\" }) readonly wcagRemoveLabel: string = \"Odebrat soubor {FILE_NAME}\"\n\t/**\n\t * Adds accessible label for the list of attachments.\n\t */\n\t@Prop({ attribute: \"wcag-attachments-label\" }) readonly wcagAttachmentsLabel: string = \"Přílohy\"\n\t/**\n\t * Emitted when the File has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Emitted when the File loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when the list of inserted files is changed\n\t */\n\t@Event({ eventName: \"gov-files\" }) govFiles: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a new file is added\n\t */\n\t@Event({ eventName: \"gov-add-file\" }) govAddFile: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a file is removed from the list\n\t */\n\t@Event({ eventName: \"gov-remove-file\" }) govRemoveFile: EventEmitter<GovFormFileEvent>\n\n\t@State() files: GovFormFileItem[] = []\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"type\", \"File\")\n\t}\n\n\n\tprivate registerListeners() {\n\t\tfunction highlight() {\n\t\t\tthis.areaRef.classList.add(\"highlight\")\n\t\t}\n\n\t\tfunction unhighlight() {\n\t\t\tthis.areaRef.classList.remove(\"highlight\")\n\t\t}\n\n\t\tthis.inputRef.addEventListener(\n\t\t\t\"change\",\n\t\t\te => {\n\t\t\t\te.preventDefault()\n\t\t\t\te.stopPropagation()\n\t\t\t\tconst files = (e.target as HTMLInputElement).files\n\t\t\t\tthis.validateFiles(files)\n\t\t\t},\n\t\t\tfalse,\n\t\t)\n\t\t//this.inputRef.addEventListener('focus')\n\n\t\tif (this.expanded) {\n\t\t\tconst events = [\"dragover\", \"dragleave\"]\n\t\t\tconst inEvents = [\"dragenter\", \"dragover\", \"mouseenter\"]\n\t\t\tconst outEvents = [\"dragleave\", \"drop\", \"mouseleave\"]\n\n\t\t\tevents.map(eventName => this.inputRef.addEventListener(eventName, this.preventDefaults.bind(this), false))\n\t\t\tinEvents.map(eventName => this.inputRef.addEventListener(eventName, highlight.bind(this), false))\n\t\t\toutEvents.forEach(eventName => this.inputRef.addEventListener(eventName, unhighlight.bind(this), false))\n\n\t\t\tthis.areaRef.addEventListener(\"drop\", this.handleDrop.bind(this), false)\n\t\t}\n\t}\n\n\tpreventDefaults(e) {\n\t\te.preventDefault()\n\t\te.stopPropagation()\n\t}\n\n\thandleDrop(e: DragEvent) {\n\t\tconst dataTransfer = e.dataTransfer\n\t\tthis.validateFiles(dataTransfer.files)\n\t}\n\n\tprivate validateFiles(files: FileList) {\n\t\tlet filesBuffer: GovFormFileItem[] = []\n\t\tArray.from(files).map(file => {\n\t\t\tconst isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null\n\t\t\tif (isFile === null) {\n\t\t\t\tconst isSizeValid = typeof this.maxFileSize === \"number\" && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true\n\t\t\t\tconst isAcceptValid = fileAcceptValidation(file, this.accept)\n\t\t\t\tconst newFile = {\n\t\t\t\t\tid: createID(\"GovFormFile\"),\n\t\t\t\t\tfile,\n\t\t\t\t\tacceptValid: isAcceptValid,\n\t\t\t\t\tsizeValid: isSizeValid,\n\t\t\t\t}\n\t\t\t\tif (this.displayAttachments) {\n\t\t\t\t\tthis.files = [...this.files, newFile]\n\t\t\t\t} else {\n\t\t\t\t\tfilesBuffer = [...filesBuffer, newFile]\n\t\t\t\t}\n\t\t\t\tthis.govAddFile.emit({\n\t\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\t\tfile: newFile,\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\tthis.govFiles.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\tfiles: filesBuffer.length ? filesBuffer : this.files,\n\t\t})\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tthis.watchDisabled()\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\n\t\tthis.registerListeners()\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes([FormFileClass.root])} invalid={toBoolAttrIfDefined(this.invalid)} expanded={toBoolAttrIfDefined(this.expanded)}>\n\t\t\t\t<div class={FormFileClass.area} ref={el => (this.areaRef = el as HTMLDivElement)}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={FormFileClass.input}\n\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\tid={this.identifier || this.fileId}\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot(\"attachments\") ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<slot name={\"attachments\"} />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.files.length && this.displayAttachments ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<gov-attachments label={this.wcagAttachmentsLabel} wcag-label={this.wcagAttachmentsLabel}>\n\t\t\t\t\t\t\t{this.files.map(item => (\n\t\t\t\t\t\t\t\t<gov-attachments-item wcag-remove-labelled-by={item.id} on-gov-remove={() => this.onRemoveFileHandler(item)}>\n\t\t\t\t\t\t\t\t\t<span class={\"sr-only\"} id={item.id}>\n\t\t\t\t\t\t\t\t\t\t{this.wcagRemoveLabel.replace(\"{FILE_NAME}\", item.file.name)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{item.file.name}\n\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? this.errorAccept : null}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{item.sizeValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{this.errorSize.replace(\"{FILE_SIZE}\", formatBytes(this.maxFileSize))}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t<span slot=\"info\">({formatBytes(item.file.size)})</span>\n\t\t\t\t\t\t\t\t</gov-attachments-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</gov-attachments>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onRemoveFileHandler(file: GovFormFileItem) {\n\t\tconst index = this.files.findIndex(item => item.id === file.id)\n\t\tif (index !== -1) {\n\t\t\tconst files = this.files\n\t\t\tconst removeFile = this.files[index]\n\t\t\tfiles.splice(index, 1)\n\t\t\tthis.files = [...files]\n\t\t\tthis.govRemoveFile.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfile: removeFile,\n\t\t\t})\n\t\t\tthis.govFiles.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfiles,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Returns the reference of the native area element\n\t */\n\t@Method()\n\tasync getAreaRef(): Promise<HTMLDivElement> {\n\t\treturn this.areaRef\n\t}\n\n\t/**\n\t * Remove all files from component state\n\t */\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.files = []\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormFileClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormFileClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.fileId, this.wcagLabelledBy, FormFileClass.root)\n\t}\n}\n"],"version":3}
|