@gov-design-system-ce/components 0.0.33 → 0.0.35
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/{form-399e149e.js → form-62c6a8c6.js} +16 -5
- package/dist/cjs/form-62c6a8c6.js.map +1 -0
- package/dist/cjs/gov-app.cjs.entry.js +13 -13
- package/dist/cjs/gov-app.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js +1 -1
- package/dist/cjs/gov-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-checkbox.cjs.entry.js +13 -3
- package/dist/cjs/gov-form-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-control.cjs.entry.js +20 -24
- package/dist/cjs/gov-form-control.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-file.cjs.entry.js +14 -3
- package/dist/cjs/gov-form-file.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-input.cjs.entry.js +16 -5
- package/dist/cjs/gov-form-input.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-multi-select.cjs.entry.js +31 -15
- package/dist/cjs/gov-form-multi-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-radio.cjs.entry.js +20 -10
- package/dist/cjs/gov-form-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-select.cjs.entry.js +15 -5
- package/dist/cjs/gov-form-select.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-form-switch.cjs.entry.js +19 -9
- package/dist/cjs/gov-form-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/gov-icon.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gov-badge/gov-badge.js +1 -1
- package/dist/collection/components/gov-badge/gov-badge.js.map +1 -1
- package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js +20 -3
- package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js.map +1 -1
- package/dist/collection/components/gov-form/control/gov-form-control.js +25 -28
- package/dist/collection/components/gov-form/control/gov-form-control.js.map +1 -1
- package/dist/collection/components/gov-form/file/gov-form-file.js +20 -4
- 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 +24 -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.js +25 -4
- 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 +36 -19
- package/dist/collection/components/gov-form/radio/gov-form-radio.js.map +1 -1
- package/dist/collection/components/gov-form/select/gov-form-select.js +22 -4
- 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 +26 -9
- package/dist/collection/components/gov-form/switch/gov-form-switch.js.map +1 -1
- package/dist/collection/pages/Forms.js +13 -13
- package/dist/collection/pages/Forms.js.map +1 -1
- package/dist/components/gov-accordion-item.js +0 -1
- package/dist/components/gov-accordion-item.js.map +1 -1
- package/dist/components/gov-accordion.js +0 -1
- package/dist/components/gov-accordion.js.map +1 -1
- package/dist/components/gov-alert.js +0 -1
- package/dist/components/gov-alert.js.map +1 -1
- package/dist/components/gov-app.js +13 -14
- package/dist/components/gov-app.js.map +1 -1
- package/dist/components/gov-attachments-item2.js +0 -1
- package/dist/components/gov-attachments-item2.js.map +1 -1
- package/dist/components/gov-attachments2.js +0 -1
- package/dist/components/gov-attachments2.js.map +1 -1
- package/dist/components/gov-backdrop2.js +0 -1
- package/dist/components/gov-backdrop2.js.map +1 -1
- package/dist/components/gov-badge2.js +1 -2
- package/dist/components/gov-badge2.js.map +1 -1
- package/dist/components/gov-breadcrumbs.js +0 -1
- package/dist/components/gov-breadcrumbs.js.map +1 -1
- package/dist/components/gov-button2.js +0 -1
- package/dist/components/gov-button2.js.map +1 -1
- package/dist/components/gov-card.js +0 -1
- package/dist/components/gov-card.js.map +1 -1
- package/dist/components/gov-container.js +0 -1
- package/dist/components/gov-container.js.map +1 -1
- package/dist/components/gov-cookiebar.js +0 -1
- package/dist/components/gov-cookiebar.js.map +1 -1
- package/dist/components/gov-empty.js +0 -1
- package/dist/components/gov-empty.js.map +1 -1
- package/dist/components/gov-error-code.js +0 -1
- package/dist/components/gov-error-code.js.map +1 -1
- package/dist/components/gov-form-autocomplete2.js +0 -1
- package/dist/components/gov-form-autocomplete2.js.map +1 -1
- package/dist/components/gov-form-checkbox.js +13 -3
- package/dist/components/gov-form-checkbox.js.map +1 -1
- package/dist/components/gov-form-control.js +19 -23
- package/dist/components/gov-form-control.js.map +1 -1
- package/dist/components/gov-form-file.js +14 -3
- package/dist/components/gov-form-file.js.map +1 -1
- package/dist/components/gov-form-group.js +0 -1
- package/dist/components/gov-form-group.js.map +1 -1
- package/dist/components/gov-form-input2.js +16 -5
- package/dist/components/gov-form-input2.js.map +1 -1
- package/dist/components/gov-form-label.js +0 -1
- package/dist/components/gov-form-label.js.map +1 -1
- package/dist/components/gov-form-message2.js +0 -1
- package/dist/components/gov-form-message2.js.map +1 -1
- package/dist/components/gov-form-multi-select.js +19 -7
- package/dist/components/gov-form-multi-select.js.map +1 -1
- package/dist/components/gov-form-password-power.js +0 -1
- package/dist/components/gov-form-password-power.js.map +1 -1
- package/dist/components/gov-form-radio.js +20 -10
- package/dist/components/gov-form-radio.js.map +1 -1
- package/dist/components/gov-form-search.js +0 -1
- package/dist/components/gov-form-search.js.map +1 -1
- package/dist/components/gov-form-select2.js +15 -5
- package/dist/components/gov-form-select2.js.map +1 -1
- package/dist/components/gov-form-switch.js +19 -9
- package/dist/components/gov-form-switch.js.map +1 -1
- package/dist/components/gov-grid-item.js +0 -1
- package/dist/components/gov-grid-item.js.map +1 -1
- package/dist/components/gov-grid.js +0 -1
- package/dist/components/gov-grid.js.map +1 -1
- package/dist/components/gov-icon2.js +1 -2
- package/dist/components/gov-icon2.js.map +1 -1
- package/dist/components/gov-layout-column.js +0 -1
- package/dist/components/gov-layout-column.js.map +1 -1
- package/dist/components/gov-layout.js +0 -1
- package/dist/components/gov-layout.js.map +1 -1
- package/dist/components/gov-loading.js +0 -1
- package/dist/components/gov-loading.js.map +1 -1
- package/dist/components/gov-message.js +0 -1
- package/dist/components/gov-message.js.map +1 -1
- package/dist/components/gov-modal.js +0 -1
- package/dist/components/gov-modal.js.map +1 -1
- package/dist/components/gov-nav-item.js +0 -1
- package/dist/components/gov-nav-item.js.map +1 -1
- package/dist/components/gov-nav.js +0 -1
- package/dist/components/gov-nav.js.map +1 -1
- package/dist/components/gov-pagination.js +0 -1
- package/dist/components/gov-pagination.js.map +1 -1
- package/dist/components/gov-prompt.js +0 -1
- package/dist/components/gov-prompt.js.map +1 -1
- package/dist/components/gov-side-nav-item.js +0 -1
- package/dist/components/gov-side-nav-item.js.map +1 -1
- package/dist/components/gov-side-nav.js +0 -1
- package/dist/components/gov-side-nav.js.map +1 -1
- package/dist/components/gov-skeleton.js +0 -1
- package/dist/components/gov-skeleton.js.map +1 -1
- package/dist/components/gov-spacer.js +0 -1
- package/dist/components/gov-spacer.js.map +1 -1
- package/dist/components/gov-statsbar-item.js +0 -1
- package/dist/components/gov-statsbar-item.js.map +1 -1
- package/dist/components/gov-statsbar.js +0 -1
- package/dist/components/gov-statsbar.js.map +1 -1
- package/dist/components/gov-stepper-item.js +0 -1
- package/dist/components/gov-stepper-item.js.map +1 -1
- package/dist/components/gov-stepper.js +0 -1
- package/dist/components/gov-stepper.js.map +1 -1
- package/dist/components/gov-tabs-item.js +0 -1
- package/dist/components/gov-tabs-item.js.map +1 -1
- package/dist/components/gov-tabs.js +0 -1
- package/dist/components/gov-tabs.js.map +1 -1
- package/dist/components/gov-tile.js +0 -1
- package/dist/components/gov-tile.js.map +1 -1
- package/dist/components/gov-tiles.js +0 -1
- package/dist/components/gov-tiles.js.map +1 -1
- package/dist/components/gov-toast.js +0 -1
- package/dist/components/gov-toast.js.map +1 -1
- package/dist/components/gov-tooltip-content.js +0 -1
- package/dist/components/gov-tooltip-content.js.map +1 -1
- package/dist/components/gov-tooltip.js +0 -1
- package/dist/components/gov-tooltip.js.map +1 -1
- package/dist/components/gov-wizzard-item.js +0 -1
- package/dist/components/gov-wizzard-item.js.map +1 -1
- package/dist/components/gov-wizzard.js +0 -1
- package/dist/components/gov-wizzard.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-0a300d3e.entry.js +2 -0
- package/dist/core/p-0a300d3e.entry.js.map +1 -0
- package/dist/core/{p-e5a7dcf1.entry.js → p-37f6b4ef.entry.js} +2 -2
- package/dist/core/{p-e5a7dcf1.entry.js.map → p-37f6b4ef.entry.js.map} +1 -1
- package/dist/core/p-5a2a9cde.entry.js +2 -0
- package/dist/core/p-5a2a9cde.entry.js.map +1 -0
- package/dist/core/p-7e524b49.js +2 -0
- package/dist/core/p-7e524b49.js.map +1 -0
- package/dist/core/p-a423b62a.entry.js +2 -0
- package/dist/core/p-a423b62a.entry.js.map +1 -0
- package/dist/core/p-a825183a.entry.js +2 -0
- package/dist/core/p-a825183a.entry.js.map +1 -0
- package/dist/core/{p-87b75126.entry.js → p-bbc765ca.entry.js} +2 -2
- package/dist/core/p-bbc765ca.entry.js.map +1 -0
- package/dist/core/p-d1275fa8.entry.js +2 -0
- package/dist/core/p-d1275fa8.entry.js.map +1 -0
- package/dist/core/p-d14130ac.entry.js +2 -0
- package/dist/core/p-d14130ac.entry.js.map +1 -0
- package/dist/core/p-d37f03e0.entry.js +2 -0
- package/dist/core/p-d37f03e0.entry.js.map +1 -0
- package/dist/core/{p-cb710e9a.entry.js → p-e3b56738.entry.js} +2 -2
- package/dist/core/p-e6904513.entry.js +2 -0
- package/dist/core/p-e6904513.entry.js.map +1 -0
- package/dist/custom-elements/index.js +1 -1
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/{form-3aceb161.js → form-613741a5.js} +11 -3
- package/dist/esm/form-613741a5.js.map +1 -0
- package/dist/esm/gov-app.entry.js +13 -13
- package/dist/esm/gov-app.entry.js.map +1 -1
- package/dist/esm/gov-badge.entry.js +1 -1
- package/dist/esm/gov-badge.entry.js.map +1 -1
- package/dist/esm/gov-form-checkbox.entry.js +13 -3
- package/dist/esm/gov-form-checkbox.entry.js.map +1 -1
- package/dist/esm/gov-form-control.entry.js +20 -24
- package/dist/esm/gov-form-control.entry.js.map +1 -1
- package/dist/esm/gov-form-file.entry.js +15 -4
- package/dist/esm/gov-form-file.entry.js.map +1 -1
- package/dist/esm/gov-form-input.entry.js +17 -6
- package/dist/esm/gov-form-input.entry.js.map +1 -1
- package/dist/esm/gov-form-multi-select.entry.js +21 -5
- package/dist/esm/gov-form-multi-select.entry.js.map +1 -1
- package/dist/esm/gov-form-radio.entry.js +21 -11
- package/dist/esm/gov-form-radio.entry.js.map +1 -1
- package/dist/esm/gov-form-select.entry.js +16 -6
- package/dist/esm/gov-form-select.entry.js.map +1 -1
- package/dist/esm/gov-form-switch.entry.js +20 -10
- package/dist/esm/gov-form-switch.entry.js.map +1 -1
- package/dist/esm/gov-icon.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globals.d.ts +2 -0
- package/dist/hydrate/index.js +141 -63
- package/dist/types/components/gov-form/checkbox/gov-form-checkbox.d.ts +2 -0
- package/dist/types/components/gov-form/control/gov-form-control.d.ts +2 -2
- package/dist/types/components/gov-form/file/gov-form-file.d.ts +2 -0
- package/dist/types/components/gov-form/input/gov-form-input.d.ts +3 -1
- package/dist/types/components/gov-form/multiselect/gov-form-multi-select.d.ts +5 -1
- package/dist/types/components/gov-form/radio/gov-form-radio.d.ts +5 -3
- package/dist/types/components/gov-form/select/gov-form-select.d.ts +3 -1
- package/dist/types/components/gov-form/switch/gov-form-switch.d.ts +2 -0
- package/dist/types/components.d.ts +1 -1
- package/dist/types/types/typings.d.ts +6 -0
- package/package.json +1 -1
- package/dist/cjs/constants-e8760a84.js +0 -20
- package/dist/cjs/constants-e8760a84.js.map +0 -1
- package/dist/cjs/form-399e149e.js.map +0 -1
- package/dist/core/p-3ed60543.entry.js +0 -2
- package/dist/core/p-3ed60543.entry.js.map +0 -1
- package/dist/core/p-70c0ee18.entry.js +0 -2
- package/dist/core/p-70c0ee18.entry.js.map +0 -1
- package/dist/core/p-79f74578.entry.js +0 -2
- package/dist/core/p-79f74578.entry.js.map +0 -1
- package/dist/core/p-87b75126.entry.js.map +0 -1
- package/dist/core/p-942c1b73.entry.js +0 -2
- package/dist/core/p-942c1b73.entry.js.map +0 -1
- package/dist/core/p-b3d9b255.entry.js +0 -2
- package/dist/core/p-b3d9b255.entry.js.map +0 -1
- package/dist/core/p-cb830bc1.entry.js +0 -2
- package/dist/core/p-cb830bc1.entry.js.map +0 -1
- package/dist/core/p-ea493ce6.entry.js +0 -2
- package/dist/core/p-ea493ce6.entry.js.map +0 -1
- package/dist/core/p-ef79904e.js +0 -2
- package/dist/core/p-ef79904e.js.map +0 -1
- package/dist/core/p-fa7daa95.entry.js +0 -2
- package/dist/core/p-fa7daa95.entry.js.map +0 -1
- package/dist/core/p-fd2f10eb.js +0 -2
- package/dist/core/p-fd2f10eb.js.map +0 -1
- package/dist/esm/constants-136d4cd3.js +0 -16
- package/dist/esm/constants-136d4cd3.js.map +0 -1
- package/dist/esm/form-3aceb161.js.map +0 -1
- /package/dist/core/{p-cb710e9a.entry.js.map → p-e3b56738.entry.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as e,h as r,H as c,g as i}from"./p-4af5e4f4.js";import{c as a}from"./p-24636c53.js";import{v as t}from"./p-26acf964.js";import{g as s,F as h,a as v}from"./p-7e524b49.js";import{g as n,a as m,t as l}from"./p-3f37ddb6.js";import{b as g,c as b}from"./p-670b4f93.js";import{c as f}from"./p-c20102ff.js";import{d}from"./p-03990da5.js";import{F as k}from"./p-1c1d0bbe.js";import"./p-561fa17b.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-6278531b.js";import"./p-9dab01be.js";import"./p-3464136c.js";const p='.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-checkbox{cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:"";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));background-color:var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1;width:100%}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=""].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid="1"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=""].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid="1"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=""].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled="1"].gov-form-checkbox{pointer-events:none}[disabled=""].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled="1"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=""].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled="1"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);min-height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=xs].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}[size=xs].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);min-height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=s].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}[size=s].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=m].gov-form-checkbox{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);min-height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=m].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}[size=m].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=l].gov-form-checkbox{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);display:block;min-width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);min-height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}[size=l].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}[size=l].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-neutral-white));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=""] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid="1"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=""] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled="1"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);left:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);width:var(--gov-form-checkbox-core-xs-check-size, 0.75rem);height:var(--gov-form-checkbox-core-xs-check-size, 0.75rem)}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);left:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);width:var(--gov-form-checkbox-core-s-check-size, 0.825rem);height:var(--gov-form-checkbox-core-s-check-size, 0.825rem)}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);left:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);width:var(--gov-form-checkbox-core-m-check-size, 0.9rem);height:var(--gov-form-checkbox-core-m-check-size, 0.9rem)}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);left:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);width:var(--gov-form-checkbox-core-l-check-size, 1.2rem);height:var(--gov-form-checkbox-core-l-check-size, 1.2rem)}';const x=class{constructor(r){o(this,r);this.govFocus=e(this,"gov-focus",7);this.govBlur=e(this,"gov-blur",7);this.govChange=e(this,"gov-change",7);this.value=undefined;this.checked=false;this.required=false;this.disabled=undefined;this.name=undefined;this.size="m";this.identifier=undefined;this.noLabel=false;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.checkboxId=a("GovCheckbox");this.h=n(this.host);this.f=s(this.h)}validateSize(o){t(v,o,h.root)}watchDisabled(){this.passControlAttrs()}passControlAttrs(){this.f.passAttrToControl("size",this.size);this.f.passAttrToControl("disabled",m(this.disabled));this.f.passAttrToControl("invalid",m(this.invalid))}componentWillLoad(){this.f.passAttrToControl("type","checkbox");this.passControlAttrs()}async componentDidRender(){this.f.passAttrToLabel("identifier",this.identifier||this.checkboxId);this.f.passAttrToLabel("required",String(this.required));if(f()){await d(500);await this.validateWcag()}}render(){const o=o=>{if(this.noLabel){return r("label",null,o)}return o};return r(c,{class:h.root,checked:this.checked,size:this.size,invalid:l(this.invalid)},o(r(k,null,r("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:o=>this.inputRef=o,"aria-checked":m(this.checked),"aria-required":l(this.required),"aria-invalid":l(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-disabled":l(this.disabled)}),r("span",null,r("slot",{name:"label"}),r("gov-icon",{class:h.check,name:"check-lg"})))))}onFocusHandler(o){o.stopPropagation();this.govFocus.emit({component:h.root,value:this.value,checked:this.checked,originalEvent:o})}onBlurHandler(o){o.stopPropagation();this.govBlur.emit({component:h.root,value:this.value,checked:this.checked,originalEvent:o})}onClickHandler(o){o.stopPropagation()}onChangeHandler(o){this.checked=o.target.checked;o.stopPropagation();this.govChange.emit({component:h.root,value:this.value,checked:this.checked,originalEvent:o})}async getRef(){return this.inputRef}async validateWcag(){g(this.wcagDescribedBy,"wcag-described-by",h.root);g(this.wcagLabelledBy,"wcag-labelled-by",h.root);b(this.identifier||this.checkboxId,this.wcagLabelledBy,h.root)}get host(){return i(this)}static get watchers(){return{size:["validateSize","watchDisabled"],disabled:["watchDisabled"],invalid:["watchDisabled"]}}};x.style=p;export{x as gov_form_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-5a2a9cde.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"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"],"names":["govFormCheckboxCss","GovFormCheckbox","[object Object]","hostRef","this","checkboxId","createID","h","govHost","host","f","govForm","newValue","validateProp","FormCheckboxSizes","FormCheckboxClass","root","passControlAttrs","passAttrToControl","size","toBoolAttr","disabled","invalid","passAttrToLabel","identifier","String","required","canValidateWcagOnRender","delay","validateWcag","wrapCheckbox","children","noLabel","Host","class","checked","toBoolAttrIfDefined","Fragment","id","type","value","name","onClick","onClickHandler","bind","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","ref","el","inputRef","aria-checked","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","check","e","stopPropagation","govFocus","emit","component","originalEvent","govBlur","target","govChange","validateWcagRef","validateWcagLabelFor"],"mappings":"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","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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{S as o}from"./p-55500e5a.js";import{p as t}from"./p-03990da5.js";import{V as r}from"./p-ff7365ae.js";import{F as s}from"./p-6278531b.js";import{F as e}from"./p-9dab01be.js";import{F as i}from"./p-3464136c.js";const n=t(o,["_XS","_S","_M","_L"]);const a={root:"gov-form-checkbox",check:"gov-form-checkbox__check"};t(o,["_M","_L","_XL"]);const c={root:"gov-form-control",holder:"gov-form-control__holder",bottom:"gov-form-control__bottom"};const m=t(o,["_M","_L","_XL"]);const _=t(r,["PRIMARY","SECONDARY"]);var f;(function(o){o["COLOR"]="color";o["DATE"]="date";o["DATETIME_LOCAL"]="datetime-local";o["EMAIL"]="email";o["MONTH"]="month";o["NUMBER"]="number";o["PASSWORD"]="password";o["SEARCH"]="search";o["TEL"]="tel";o["TEXT"]="text";o["TIME"]="time";o["URL"]="url";o["WEEK"]="week"})(f||(f={}));var l;(function(o){o["RESET"]="reset"})(l||(l={}));const h={root:"gov-form-input"};const g=t(o,["_M","_L","_XL"]);const p=t(r,["PRIMARY","SECONDARY"]);const u={root:"gov-form-select",icon:"gov-form-select__icon"};const v=t(o,["_M","_L","_XL"]);const d=t(r,["PRIMARY","SECONDARY"]);const L={root:"gov-form-multi-select",wrap:"gov-form-multi-select__wrap",list:"gov-form-multi-select__list",item:"gov-form-multi-select__item"};const b=t(o,["_XS","_S","_M","_L"]);const A={root:"gov-form-switch",holder:"gov-form-switch__holder",input:"gov-form-switch__input",indicator:"gov-form-switch__indicator"};const M=t(o,["_XS","_S","_M","_L"]);const S={root:"gov-form-radio",holder:"gov-form-radio__holder",input:"gov-form-radio__input",indicator:"gov-form-radio__indicator"};const R=o=>({get govHost(){return o},passAttrToControl(o,t){if(this.control){this.control.setAttribute(o,t)}},passAttrToLabel(o,t){if(this.label){this.label.setAttribute(o,t)}},get hasGroupChildren(){if(this.control){return this.control.querySelectorAll("gov-form-group > *").length>1}return false},get control(){if(this.govHost.name===c.root){return this.govHost.hostElement}return this.govHost.getParent(c.root)},get label(){const o=this.govHost.hostElement.querySelector(`.${i.root}`);if(o){return o}if(this.control){return this.control.querySelector(`.${i.root}`)}return null},get mainElementsInControl(){const o=[u.root,h.root,A.root,a.root,S.root,L.root,e.root];if(this.control){const t=o.map((o=>`${o}:first-of-type`)).join(", ");return Array.from(this.control.querySelectorAll(t))}return[]},get messageElements(){if(this.control){return Array.from(this.control.querySelectorAll(s.root))}return[]}});export{a as F,n as a,c as b,L as c,d,v as e,S as f,R as g,M as h,A as i,b as j,h as k,_ as l,m,u as n,p as o,g as p};
|
|
2
|
+
//# sourceMappingURL=p-7e524b49.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../packages/core/src/components/gov-form/checkbox/constants.ts","../../../packages/core/src/components/gov-form/control/constants.ts","../../../packages/core/src/components/gov-form/input/constants.ts","../../../packages/core/src/components/gov-form/select/constants.ts","../../../packages/core/src/components/gov-form/multiselect/constants.ts","../../../packages/core/src/components/gov-form/switch/constants.ts","../../../packages/core/src/components/gov-form/radio/constants.ts","../../../packages/core/src/helpers/Dom/form.ts"],"names":["FormCheckboxSizes","pick","Sizes","FormCheckboxClass","root","check","FormControlClass","holder","bottom","FormInputSizes","FormInputVariants","Variants","InputTypes","Type","FormInputClass","FormSelectSizes","FormSelectVariants","FormSelectClass","icon","FormMultiselectSizes","FormMultiselectVariants","FormMultiSelectClass","wrap","list","item","FormSwitchSizes","FormSwitchClass","input","indicator","FormRadioSizes","FormRadioClass","govForm","govHost","[object Object]","name","value","this","control","setAttribute","label","hasGroupChildren","querySelectorAll","length","hostElement","getParent","innerLabel","querySelector","FormLabelClass","mainElementsInControl","formElements","FormAutocompleteClass","elements","map","el","join","Array","from","messageElements","FormMessageClass"],"mappings":"8NAIaA,EAAoBC,EAAKC,EAAO,CAAC,MAAO,KAAM,KAAM,aAGpDC,EAAoB,CAChCC,KAAM,oBACNC,MAAO,4BCLwBJ,EAAKC,EAAO,CAAC,KAAM,KAAM,cAG5CI,EAAmB,CAC/BF,KAAM,mBACNG,OAAQ,2BACRC,OAAQ,kCCLIC,EAAiBR,EAAKC,EAAO,CAAC,KAAM,KAAM,cAG1CQ,EAAoBT,EAAKU,EAAU,CAAC,UAAW,cAG5D,IAAYC,GAAZ,SAAYA,GACXA,EAAA,SAAA,QACAA,EAAA,QAAA,OACAA,EAAA,kBAAA,iBACAA,EAAA,SAAA,QACAA,EAAA,SAAA,QACAA,EAAA,UAAA,SACAA,EAAA,YAAA,WACAA,EAAA,UAAA,SACAA,EAAA,OAAA,MACAA,EAAA,QAAA,OACAA,EAAA,QAAA,OACAA,EAAA,OAAA,MACAA,EAAA,QAAA,QAbD,CAAYA,IAAAA,EAAU,KAkBtB,IAAYC,GAAZ,SAAYA,GACXA,EAAA,SAAA,SADD,CAAYA,IAAAA,EAAI,WAMHC,EAAiB,CAC7BV,KAAM,wBC/BMW,EAAkBd,EAAKC,EAAO,CAAC,KAAM,KAAM,cAG3Cc,EAAqBf,EAAKU,EAAU,CAAC,UAAW,oBAGhDM,EAAkB,CAC9Bb,KAAM,kBACNc,KAAM,+BCRMC,EAAuBlB,EAAKC,EAAO,CAAC,KAAM,KAAM,cAGhDkB,EAA0BnB,EAAKU,EAAU,CAAC,UAAW,oBAGrDU,EAAuB,CACnCjB,KAAM,wBACNkB,KAAM,8BACNC,KAAM,8BACNC,KAAM,qCCXMC,EAAkBxB,EAAKC,EAAO,CAAC,MAAO,KAAM,KAAM,aAGlDwB,EAAkB,CAC9BtB,KAAM,kBACNG,OAAQ,0BACRoB,MAAO,yBACPC,UAAW,oCCPCC,EAAiB5B,EAAKC,EAAO,CAAC,MAAO,KAAM,KAAM,aAGjD4B,EAAiB,CAC7B1B,KAAM,iBACNG,OAAQ,yBACRoB,MAAO,wBACPC,UAAW,mCCGCG,EAAWC,IAChB,CACNA,cACC,OAAOA,GAERC,kBAAkBC,EAAcC,GAC/B,GAAIC,KAAKC,QAAS,CACjBD,KAAKC,QAAQC,aAAaJ,EAAMC,KAGlCF,gBAAgBC,EAAcC,GAC7B,GAAIC,KAAKG,MAAO,CACfH,KAAKG,MAAMD,aAAaJ,EAAMC,KAGhCK,uBACC,GAAIJ,KAAKC,QAAS,CACjB,OAAOD,KAAKC,QAAQI,iBAAiB,sBAAsBC,OAAS,EAErE,OAAO,OAERL,cACC,GAAID,KAAKJ,QAAQE,OAAS5B,EAAiBF,KAAM,CAChD,OAAOgC,KAAKJ,QAAQW,YAErB,OAAOP,KAAKJ,QAAQY,UAAUtC,EAAiBF,OAEhDmC,YACC,MAAMM,EAAaT,KAAKJ,QAAQW,YAAYG,cAAc,IAAIC,EAAe3C,QAC7E,GAAGyC,EAAY,CACd,OAAOA,EAER,GAAIT,KAAKC,QAAS,CACjB,OAAOD,KAAKC,QAAQS,cAAc,IAAIC,EAAe3C,QAEtD,OAAO,MAER4C,4BACC,MAAMC,EAAe,CACpBhC,EAAgBb,KAChBU,EAAeV,KACfsB,EAAgBtB,KAChBD,EAAkBC,KAClB0B,EAAe1B,KACfiB,EAAqBjB,KACrB8C,EAAsB9C,MAEvB,GAAIgC,KAAKC,QAAS,CACjB,MAAMc,EAAWF,EAAaG,KAAIC,GAAM,GAAGA,oBAAoBC,KAAK,MACpE,OAAOC,MAAMC,KAAKpB,KAAKC,QAAQI,iBAAiBU,IAEjD,MAAO,IAERM,sBACC,GAAIrB,KAAKC,QAAS,CACjB,OAAOkB,MAAMC,KAAKpB,KAAKC,QAAQI,iBAAiBiB,EAAiBtD,OAElE,MAAO","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormCheckboxSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormCheckboxSizesType = `${ValueOf<typeof FormCheckboxSizes>}`\n\nexport const FormCheckboxClass = {\n\troot: 'gov-form-checkbox',\n\tcheck: 'gov-form-checkbox__check',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormControlSizes = pick(Sizes, ['_M', '_L', '_XL'])\nexport type FormControlSizesType = `${ValueOf<typeof FormControlSizes>}`\n\nexport const FormControlClass = {\n\troot: 'gov-form-control',\n\tholder: 'gov-form-control__holder',\n\tbottom: 'gov-form-control__bottom',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormInputSizes = pick(Sizes, ['_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormInputVariantType = `${ValueOf<typeof FormInputVariants>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\n\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormSelectSizes = pick(Sizes, ['_M', '_L', '_XL'])\nexport type FormSelectSizesType = `${ValueOf<typeof FormSelectSizes>}`\n\nexport const FormSelectVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormSelectVariantType = `${ValueOf<typeof FormSelectVariants>}`\n\nexport const FormSelectClass = {\n\troot: 'gov-form-select',\n\ticon: 'gov-form-select__icon',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormMultiselectSizes = pick(Sizes, ['_M', '_L', '_XL'])\nexport type FormMultiselectSizesType = `${ValueOf<typeof FormMultiselectSizes>}`\n\nexport const FormMultiselectVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormMultiselectVariantType = `${ValueOf<typeof FormMultiselectVariants>}`\n\nexport const FormMultiSelectClass = {\n\troot: 'gov-form-multi-select',\n\twrap: 'gov-form-multi-select__wrap',\n\tlist: 'gov-form-multi-select__list',\n\titem: 'gov-form-multi-select__item',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormSwitchSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormSwitchSizesType = `${ValueOf<typeof FormSwitchSizes>}`\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n}\n","import { Sizes } from '../../../core/constants/sizes'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormRadioSizes = pick(Sizes, ['_XS', '_S', '_M', '_L'])\nexport type FormRadioSizesType = `${ValueOf<typeof FormRadioSizes>}`\n\nexport const FormRadioClass = {\n\troot: 'gov-form-radio',\n\tholder: 'gov-form-radio__holder',\n\tinput: 'gov-form-radio__input',\n\tindicator: 'gov-form-radio__indicator',\n}\n","import { GovHost } from './template.types'\nimport { GovForm } from './form.types'\nimport { FormControlClass } from '../../components/gov-form/control/constants'\nimport { FormInputClass } from '../../components/gov-form/input/constants'\nimport { FormSelectClass } from '../../components/gov-form/select/constants'\nimport { FormMultiSelectClass } from '../../components/gov-form/multiselect/constants'\nimport { FormSwitchClass } from '../../components/gov-form/switch/constants'\nimport { FormCheckboxClass } from '../../components/gov-form/checkbox/constants'\nimport { FormRadioClass } from '../../components/gov-form/radio/constants'\nimport { FormMessageClass } from '../../components/gov-form/message/constants'\nimport { FormAutocompleteClass } from '../../components/gov-form/autocomplete/constants'\nimport { Nullable } from '../../types/interfaces'\nimport { FormLabelClass } from \"../../components/gov-form/label/constants\"\n\nexport const govForm = (govHost: GovHost): GovForm => {\n\treturn {\n\t\tget govHost(): GovHost {\n\t\t\treturn govHost\n\t\t},\n\t\tpassAttrToControl(name: string, value: string): void {\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.setAttribute(name, value)\n\t\t\t}\n\t\t},\n\t\tpassAttrToLabel(name: string, value: string): void {\n\t\t\tif (this.label) {\n\t\t\t\tthis.label.setAttribute(name, value)\n\t\t\t}\n\t\t},\n\t\tget hasGroupChildren(): boolean {\n\t\t\tif (this.control) {\n\t\t\t\treturn this.control.querySelectorAll('gov-form-group > *').length > 1\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tget control(): Nullable<HTMLGovFormControlElement> {\n\t\t\tif (this.govHost.name === FormControlClass.root) {\n\t\t\t\treturn this.govHost.hostElement\n\t\t\t}\n\t\t\treturn this.govHost.getParent(FormControlClass.root)\n\t\t},\n\t\tget label(): Nullable<HTMLGovFormLabelElement> {\n\t\t\tconst innerLabel = this.govHost.hostElement.querySelector(`.${FormLabelClass.root}`)\n\t\t\tif(innerLabel) {\n\t\t\t\treturn innerLabel\n\t\t\t}\n\t\t\tif (this.control) {\n\t\t\t\treturn this.control.querySelector(`.${FormLabelClass.root}`)\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t\tget mainElementsInControl(): Element[] {\n\t\t\tconst formElements = [\n\t\t\t\tFormSelectClass.root,\n\t\t\t\tFormInputClass.root,\n\t\t\t\tFormSwitchClass.root,\n\t\t\t\tFormCheckboxClass.root,\n\t\t\t\tFormRadioClass.root,\n\t\t\t\tFormMultiSelectClass.root,\n\t\t\t\tFormAutocompleteClass.root,\n\t\t\t]\n\t\t\tif (this.control) {\n\t\t\t\tconst elements = formElements.map(el => `${el}:first-of-type`).join(', ')\n\t\t\t\treturn Array.from(this.control.querySelectorAll(elements))\n\t\t\t}\n\t\t\treturn []\n\t\t},\n\t\tget messageElements(): HTMLGovFormMessageElement[] {\n\t\t\tif (this.control) {\n\t\t\t\treturn Array.from(this.control.querySelectorAll(FormMessageClass.root))\n\t\t\t}\n\t\t\treturn []\n\t\t},\n\t}\n}\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as o,H as i,g as r}from"./p-4af5e4f4.js";import{g as l,a as s,t as a}from"./p-3f37ddb6.js";import{g as m,c,d as n,e as v}from"./p-7e524b49.js";import{v as g}from"./p-26acf964.js";import{b as f,c as u}from"./p-670b4f93.js";import{c as d}from"./p-c20102ff.js";import{c as h,r as p}from"./p-24636c53.js";import{d as x}from"./p-03990da5.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-6278531b.js";import"./p-9dab01be.js";import"./p-3464136c.js";import"./p-561fa17b.js";const z='.gov-form-multi-select__list{margin:0;padding:0}.gov-form-multi-select__list>.gov-form-multi-select__item{margin:0;padding:0;background:none}.gov-form-multi-select__list>.gov-form-multi-select__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-multi-select{position:relative;display:flex;width:100%;align-items:center}.gov-form-multi-select .element{position:relative;display:flex;flex:1 1 auto}.gov-form-multi-select input,.gov-form-multi-select select,.gov-form-multi-select textarea{width:100%;border:var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-form-bg-color, var(--gov-color-neutral-white));color:var(--gov-form-input-color, var(--gov-color-secondary-700));font-family:var(--gov-font-family, "Roboto", sans-serif)}.gov-form-multi-select input:focus,.gov-form-multi-select select:focus,.gov-form-multi-select textarea:focus{outline:none}.gov-form-multi-select input:focus-visible,.gov-form-multi-select select:focus-visible,.gov-form-multi-select textarea:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-form-multi-select input::-moz-placeholder,.gov-form-multi-select select::-moz-placeholder,.gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select input::placeholder,.gov-form-multi-select select::placeholder,.gov-form-multi-select textarea::placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select textarea{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);padding:0.5rem 0.75rem;resize:none}.gov-form-multi-select *[slot=left-icon],.gov-form-multi-select *[slot=right-icon]{position:absolute;top:50%;display:flex;justify-content:center;color:var(--gov-form-input-icon-color, var(--gov-color-primary));transform:translateY(-50%);pointer-events:none}.gov-form-multi-select *[slot=left-icon]{left:0}.gov-form-multi-select *[slot=right-icon]{right:0}[disabled=""].gov-form-multi-select,[disabled=true i].gov-form-multi-select,[disabled="1"].gov-form-multi-select{pointer-events:none}[disabled=""].gov-form-multi-select input,[disabled=""].gov-form-multi-select select,[disabled=""].gov-form-multi-select textarea,[disabled=true i].gov-form-multi-select input,[disabled=true i].gov-form-multi-select select,[disabled=true i].gov-form-multi-select textarea,[disabled="1"].gov-form-multi-select input,[disabled="1"].gov-form-multi-select select,[disabled="1"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=""].gov-form-multi-select *[slot=left-icon],[disabled=""].gov-form-multi-select *[slot=right-icon],[disabled=true i].gov-form-multi-select *[slot=left-icon],[disabled=true i].gov-form-multi-select *[slot=right-icon],[disabled="1"].gov-form-multi-select *[slot=left-icon],[disabled="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[invalid=""].gov-form-multi-select input,[invalid=""].gov-form-multi-select select,[invalid=""].gov-form-multi-select textarea,[invalid=true i].gov-form-multi-select input,[invalid=true i].gov-form-multi-select select,[invalid=true i].gov-form-multi-select textarea,[invalid="1"].gov-form-multi-select input,[invalid="1"].gov-form-multi-select select,[invalid="1"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-error, var(--gov-color-error));color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=""].gov-form-multi-select input::-moz-placeholder,[invalid=""].gov-form-multi-select select::-moz-placeholder,[invalid=""].gov-form-multi-select textarea::-moz-placeholder,[invalid=true i].gov-form-multi-select input::-moz-placeholder,[invalid=true i].gov-form-multi-select select::-moz-placeholder,[invalid=true i].gov-form-multi-select textarea::-moz-placeholder,[invalid="1"].gov-form-multi-select input::-moz-placeholder,[invalid="1"].gov-form-multi-select select::-moz-placeholder,[invalid="1"].gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-multi-select input::placeholder,[invalid=""].gov-form-multi-select select::placeholder,[invalid=""].gov-form-multi-select textarea::placeholder,[invalid=true i].gov-form-multi-select input::placeholder,[invalid=true i].gov-form-multi-select select::placeholder,[invalid=true i].gov-form-multi-select textarea::placeholder,[invalid="1"].gov-form-multi-select input::placeholder,[invalid="1"].gov-form-multi-select select::placeholder,[invalid="1"].gov-form-multi-select textarea::placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-multi-select *[slot=left-icon],[invalid=""].gov-form-multi-select *[slot=right-icon],[invalid=true i].gov-form-multi-select *[slot=left-icon],[invalid=true i].gov-form-multi-select *[slot=right-icon],[invalid="1"].gov-form-multi-select *[slot=left-icon],[invalid="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-error, var(--gov-color-error))}[success=""].gov-form-multi-select *[slot=right-icon],[success=true i].gov-form-multi-select *[slot=right-icon],[success="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-success, var(--gov-color-success))}[success=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[size=m].gov-form-multi-select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select input,[size=m].gov-form-multi-select select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-m-height, 2.5rem);padding:var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem)}[size=m].gov-form-multi-select *[slot=left-icon],[size=m].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-m-icon-size, 1rem);height:var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=m].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=right-icon]~input,[size=m].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=l].gov-form-multi-select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select input,[size=l].gov-form-multi-select select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-l-height, 3rem);padding:var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem)}[size=l].gov-form-multi-select *[slot=left-icon],[size=l].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-l-icon-size, 1rem);height:var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=l].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=right-icon]~input,[size=l].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=xl].gov-form-multi-select{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);gap:0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select input,[size=xl].gov-form-multi-select select{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);height:var(--gov-form-input-core-xl-height, 3.5rem);padding:var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem)}[size=xl].gov-form-multi-select *[slot=left-icon],[size=xl].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-xl-icon-size, 1.25rem);height:var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-xl-icon-padding, 3rem)}[size=xl].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=right-icon]~input,[size=xl].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-xl-icon-padding, 3rem)}.gov-form-multi-select{background:none}.gov-form-multi-select select{-webkit-appearance:none;-moz-appearance:none}.gov-form-multi-select select::-ms-expand{display:none}[size=m].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-m-arrow-right-position, 1rem);width:var(--gov-form-select-m-arrow-size, 0.5rem);height:var(--gov-form-select-m-arrow-size, 0.5rem)}[size=l].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-l-arrow-right-position, 1rem);width:var(--gov-form-select-l-arrow-size, 0.5rem);height:var(--gov-form-select-l-arrow-size, 0.5rem)}[size=xl].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-xl-arrow-right-position, 1.3125rem);width:var(--gov-form-select-xl-arrow-size, 0.625rem);height:var(--gov-form-select-xl-arrow-size, 0.625rem)}.gov-form-multi-select{flex-wrap:wrap}.gov-form-multi-select__wrap{display:flex;gap:0.5rem;width:100%}.gov-form-multi-select__list{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);display:flex;gap:0.5rem;flex-wrap:wrap}.gov-form-multi-select__list>.gov-form-multi-select__item{position:relative;display:flex;flex:0 0 auto;align-items:center;padding:0rem 0rem 0rem 0.5rem;background:var(--gov-form-multiselect-bg, var(--gov-color-primary-200));transition:150ms linear background-color}';const b=class{constructor(o){e(this,o);this.govFocus=t(this,"gov-focus",7);this.govBlur=t(this,"gov-blur",7);this.govChange=t(this,"gov-change",7);this.identifier=undefined;this.placeholder=undefined;this.variant=undefined;this.size="m";this.name=undefined;this.required=false;this.disabled=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.focused=undefined;this.value=undefined;this.selectedOptions=[];this.selectId=h("GovSelect");this.listId=h("GovMultiList");this.h=l(this.host);this.f=m(this.h)}validateVariant(e){g(n,e,c.root)}validateSize(e){g(v,e,c.root)}emitChange(e){this.govChange.emit({component:c.root,value:e})}watchDisabled(){this.passControlAttrs()}passControlAttrs(){this.f.passAttrToControl("size",this.size);this.f.passAttrToControl("disabled",s(this.disabled));this.f.passAttrToControl("invalid",s(this.invalid))}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size);this.watchDisabled()}getAvailableOptions(){return Array.from(this.selectRef.querySelectorAll("option")).filter((e=>!(e.disabled||e.selected))).map((e=>({name:e.textContent,value:e.value})))}initAutocomplete(){this.autocompleteRef.addEventListener("gov-select",this.onSelectHandler.bind(this));this.autocompleteRef.addEventListener("gov-input",this.onInputHandler.bind(this));this.autocompleteRef.addEventListener("gov-focus",this.onFocusHandler.bind(this));this.autocompleteRef.addEventListener("gov-blur",this.onBlurHandler.bind(this));this.autocompleteRef.setSearchCallback((e=>new Promise((t=>{const o=this.getAvailableOptions();if(String(e).length===0){return t(o)}t(o.filter((({name:t})=>{if(!t)return false;return p(t).toLowerCase().indexOf(p(e).toLowerCase())>-1})))})))).then()}getOptionIndex(e){return this.selectedOptions.findIndex((t=>t.value===e.value&&t.name===e.name))}getOptionElement(e){return this.selectRef.querySelector('option[value="'+e.value+'"]')}selectOption(e){const t=this.getOptionIndex(e);if(t===-1){this.selectedOptions=[...this.selectedOptions,e];const t=this.getOptionElement(e);if(t){t.selected=true}}}removeOption(e){const t=this.getOptionIndex(e);if(t!==-1){this.selectedOptions.splice(t,1);this.selectedOptions=[...this.selectedOptions];const o=this.getOptionElement(e);if(o){o.selected=false}}}async componentDidRender(){this.initAutocomplete();await x(0);this.selectRef.querySelectorAll("option").forEach((e=>{if(e.selected){this.selectOption({name:e.textContent,value:e.value})}}));if(d()){await x(500);await this.validateWcag()}}render(){return o(i,{class:c.root,size:this.size,variant:this.variant},o("div",{class:c.wrap},o("div",{class:"element"},o("gov-form-autocomplete",{value:this.value,disabled:this.disabled,identifier:this.identifier||this.selectId,required:false,size:this.size,variant:this.variant,invalid:this.invalid,placeholder:this.placeholder,ref:e=>this.autocompleteRef=e,minlength:0,wcagDescribedBy:this.wcagDescribedBy,wcagLabelledBy:this.wcagLabelledBy,wcagOwns:this.listId}),o("gov-icon",{slot:"right-icon",class:"icon-arrow",name:"chevron-down"}),o("select",{hidden:true,"aria-hidden":true,multiple:true,required:this.required,name:this.name,disabled:this.disabled,ref:e=>this.selectRef=e,"aria-disabled":a(this.disabled),"aria-required":a(this.required),"aria-invalid":a(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-owns":this.wcagOwns},o("slot",null)))),o("ul",{role:"listbox",id:this.listId,class:c.list},this.selectedOptions.map((e=>o("li",{class:c.item,role:"option"},e.name,o("gov-button",{wcagLabel:"Odebrat vybranou položku "+e.name,variant:"primary",type:"base",size:"s","on-gov-click":()=>this.onTagRemove(e)},o("gov-icon",{name:"x-lg"})))))))}onFocusHandler(e){e.stopPropagation();this.focused=true;this.govFocus.emit({component:c.root,originalEvent:e,value:this.selectedOptions})}onBlurHandler(e){e.stopPropagation();e.stopPropagation();this.focused=false;this.govBlur.emit({component:c.root,originalEvent:e,value:this.selectedOptions})}onInputHandler(e){this.value=e.detail.value;e.stopPropagation()}onSelectHandler(e){e.stopPropagation();const t=e.detail.selected;this.selectOption(t);this.value="";this.autocompleteRef.clearValue();this.autocompleteRef.focus()}onTagRemove(e){this.removeOption(e)}async setFocus(e){return this.selectRef.focus(e)}async setValue(e){this.value=e}async getRef(){return this.selectRef}async validateWcag(){f(this.wcagDescribedBy,"wcag-described-by",c.root);f(this.wcagLabelledBy,"wcag-labelled-by",c.root);f(this.wcagOwns,"wcag-owns",c.root);u(this.identifier||this.selectId,this.wcagLabelledBy,c.root)}get host(){return r(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize","watchDisabled"],selectedOptions:["emitChange"],disabled:["watchDisabled"],invalid:["watchDisabled"]}}};b.style=z;export{b as gov_form_multi_select};
|
|
2
|
+
//# sourceMappingURL=p-a423b62a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.scss?tag=gov-form-multi-select","../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.tsx"],"names":["govFormMultiSelectCss","GovFormMultiSelect","[object Object]","hostRef","this","selectId","createID","listId","h","govHost","host","f","govForm","newValue","validateProp","FormMultiselectVariants","FormMultiSelectClass","root","FormMultiselectSizes","govChange","emit","component","value","passControlAttrs","passAttrToControl","size","toBoolAttr","disabled","invalid","validateVariant","variant","validateSize","watchDisabled","Array","from","selectRef","querySelectorAll","filter","option","selected","map","name","textContent","autocompleteRef","addEventListener","onSelectHandler","bind","onInputHandler","onFocusHandler","onBlurHandler","setSearchCallback","Promise","resolve","data","getAvailableOptions","String","length","removeDiacritics","toLowerCase","indexOf","then","selectedOptions","findIndex","querySelector","newOption","index","getOptionIndex","getOptionElement","removeOption","splice","initAutocomplete","delay","forEach","selectOption","canValidateWcagOnRender","validateWcag","Host","class","wrap","identifier","required","placeholder","ref","el","minlength","wcagDescribedBy","wcagLabelledBy","wcagOwns","slot","hidden","aria-hidden","multiple","aria-disabled","toBoolAttrIfDefined","aria-required","aria-invalid","aria-describedby","aria-labelledby","aria-owns","role","id","list","item","wcagLabel","type","on-gov-click","onTagRemove","e","stopPropagation","focused","govFocus","originalEvent","govBlur","detail","clearValue","focus","options","validateWcagRef","validateWcagLabelFor"],"mappings":"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","sourcesContent":["/*\n * Multiselect\n */\n\n@import \"../select/gov-form-select-core.scss\";\n$class: \".gov-form-multi-select\";\n\n#{$class} {\n\t@extend %form-select-core;\n\tflex-wrap: wrap;\n\t&__wrap {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\twidth: 100%;\n\t}\n\t&__list {\n\t\t@extend %reset-ul;\n\t\t@include typography($font-size-xs);\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tflex-wrap: wrap;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\talign-items: center;\n\t\tpadding: rem-calc(0 0 0 8);\n\t\tbackground: $form-multiselect-bg;\n\t\ttransition: $t linear background-color;\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport {\n\tFormMultiSelectClass,\n\tFormMultiselectSizes,\n\tFormMultiselectSizesType,\n\tFormMultiselectVariants,\n\tFormMultiselectVariantType,\n} from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID, removeDiacritics } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { FormMultiselectEvent, GovFormMultiSelectItem } from \"./gov-form-multi-select.types\"\nimport { FormAutocompleteEvent } from \"../autocomplete/gov-form-autocomplete.types\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\n\n@Component({\n\ttag: \"gov-form-multi-select\",\n\tstyleUrl: \"gov-form-multi-select.scss\",\n})\nexport class GovFormMultiSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\n\tprivate selectRef?: HTMLSelectElement\n\tprivate autocompleteRef?: HTMLGovFormAutocompleteElement\n\n\tprivate readonly selectId: string\n\tprivate readonly listId: string\n\n\tconstructor() {\n\t\tthis.selectId = createID(\"GovSelect\")\n\t\tthis.listId = createID(\"GovMultiList\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Custom select placeholder.\n\t */\n\t@Prop({ attribute: \"placeholder\" }) readonly placeholder: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormMultiselectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormMultiselectSizesType = \"m\"\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormMultiselectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormMultiselectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormMultiselectEvent>\n\n\t@State() focused: boolean\n\t@State() value: string\n\t@State() selectedOptions: GovFormMultiSelectItem[] = []\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormMultiselectVariants, newValue, FormMultiSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root)\n\t}\n\n\t@Watch(\"selectedOptions\")\n\temitChange(newValue: GovFormMultiSelectItem[]) {\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\tvalue: newValue,\n\t\t})\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\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t\tthis.watchDisabled()\n\t}\n\n\tprivate getAvailableOptions(): GovFormMultiSelectItem[] {\n\t\treturn Array.from(this.selectRef.querySelectorAll(\"option\"))\n\t\t\t.filter((option: HTMLOptionElement) => !(option.disabled || option.selected))\n\t\t\t.map((option: HTMLOptionElement) => ({ name: option.textContent, value: option.value }))\n\t}\n\n\tprivate initAutocomplete() {\n\t\tthis.autocompleteRef.addEventListener(\"gov-select\", this.onSelectHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-input\", this.onInputHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-focus\", this.onFocusHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-blur\", this.onBlurHandler.bind(this))\n\t\tthis.autocompleteRef\n\t\t\t.setSearchCallback(value => {\n\t\t\t\treturn new Promise(resolve => {\n\t\t\t\t\tconst data = this.getAvailableOptions()\n\t\t\t\t\tif (String(value).length === 0) {\n\t\t\t\t\t\treturn resolve(data)\n\t\t\t\t\t}\n\t\t\t\t\tresolve(\n\t\t\t\t\t\tdata.filter(({ name }) => {\n\t\t\t\t\t\t\tif (!name) return false\n\t\t\t\t\t\t\treturn removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(value).toLowerCase()) > -1\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t})\n\t\t\t.then()\n\t}\n\n\tprivate getOptionIndex(value: GovFormMultiSelectItem): number {\n\t\treturn this.selectedOptions.findIndex(option => option.value === value.value && option.name === value.name)\n\t}\n\n\tprivate getOptionElement(value: GovFormMultiSelectItem): Nullable<HTMLOptionElement> {\n\t\treturn this.selectRef.querySelector(\"option[value=\\\"\" + value.value + \"\\\"]\") as HTMLOptionElement\n\t}\n\n\tprivate selectOption(newOption: GovFormMultiSelectItem) {\n\t\tconst index = this.getOptionIndex(newOption)\n\t\tif (index === -1) {\n\t\t\tthis.selectedOptions = [...this.selectedOptions, newOption]\n\t\t\tconst option = this.getOptionElement(newOption)\n\t\t\tif (option) {\n\t\t\t\toption.selected = true\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate removeOption(removeOption: GovFormMultiSelectItem) {\n\t\tconst index = this.getOptionIndex(removeOption)\n\t\tif (index !== -1) {\n\t\t\tthis.selectedOptions.splice(index, 1)\n\t\t\tthis.selectedOptions = [...this.selectedOptions]\n\t\t\tconst option = this.getOptionElement(removeOption)\n\t\t\tif (option) {\n\t\t\t\toption.selected = false\n\t\t\t}\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.initAutocomplete()\n\t\tawait delay(0)\n\t\tthis.selectRef.querySelectorAll(\"option\").forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectOption({\n\t\t\t\t\tname: option.textContent,\n\t\t\t\t\tvalue: option.value,\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormMultiSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<div class={FormMultiSelectClass.wrap}>\n\t\t\t\t\t<div class=\"element\">\n\t\t\t\t\t\t<gov-form-autocomplete\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tidentifier={this.identifier || this.selectId}\n\t\t\t\t\t\t\trequired={false}\n\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tref={el => (this.autocompleteRef = el as HTMLGovFormAutocompleteElement)}\n\t\t\t\t\t\t\tminlength={0}\n\t\t\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\t\t\twcagOwns={this.listId}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" class=\"icon-arrow\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t\taria-hidden={true}\n\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\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-owns={this.wcagOwns}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<ul role=\"listbox\" id={this.listId} class={FormMultiSelectClass.list}>\n\t\t\t\t\t{this.selectedOptions.map(option => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class={FormMultiSelectClass.item} role=\"option\">\n\t\t\t\t\t\t\t\t{option.name}\n\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\twcagLabel={\"Odebrat vybranou položku \" + option.name}\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\ton-gov-click={() => this.onTagRemove(option)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\"></gov-icon>\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</li>\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\te.stopPropagation()\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.selectedOptions,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\te.stopPropagation()\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.selectedOptions,\n\t\t})\n\t}\n\n\tprivate onInputHandler(e: CustomEvent<FormAutocompleteEvent>) {\n\t\tthis.value = e.detail.value\n\t\te.stopPropagation()\n\t}\n\n\tprivate onSelectHandler(e: CustomEvent<FormAutocompleteEvent>) {\n\t\te.stopPropagation()\n\t\tconst value = e.detail.selected\n\t\tthis.selectOption(value as GovFormMultiSelectItem)\n\t\tthis.value = \"\"\n\t\tthis.autocompleteRef.clearValue()\n\t\tthis.autocompleteRef.focus()\n\t}\n\n\tprivate onTagRemove(removeOption: GovFormMultiSelectItem) {\n\t\tthis.removeOption(removeOption)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormMultiSelectClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormMultiSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormMultiSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormMultiSelectClass.root)\n\t}\n}\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as o,H as l,g as t}from"./p-4af5e4f4.js";import{c as a}from"./p-24636c53.js";import{g as r,a as s,t as f}from"./p-3f37ddb6.js";import{b as n,c as m}from"./p-670b4f93.js";import{c as d}from"./p-c20102ff.js";import{d as g}from"./p-03990da5.js";import{g as h}from"./p-7e524b49.js";import"./p-561fa17b.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-6278531b.js";import"./p-9dab01be.js";import"./p-3464136c.js";const v={root:"gov-form-file",area:"gov-form-file__area",label:"gov-form-file__label",input:"gov-form-file__input",list:"gov-form-file__list",item:"gov-form-file__item",attachments:"gov-form-file__attachments"};function _(e){const i=["bytes","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"];let o=0,l=parseInt(e,10)||0;while(l>=1024&&++o){l=l/1024}return l.toFixed(l<10&&o>0?1:0)+" "+i[o]}function b(e,i){if(typeof i==="string"&&i.length){return i.replace(/\s/g,"").split(",").filter((i=>new RegExp(i.replace("*",".*")).test(e.type))).length>0}else{return true}}function c(e,i){const o=Math.round(e.size/1024);return o<=i}const p='.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-file{position:relative;display:block;width:100%}.gov-form-file__label .gov-form-label__label>*:last-child{margin-bottom:0}.gov-form-file__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0.0001;cursor:pointer}.gov-form-file__attachments{margin-top:1rem 0rem 0rem}.gov-form-file__item{display:flex;gap:1rem;align-items:center}.gov-form-file[disabled=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[disabled=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[disabled="1"] .gov-form-file__label .gov-form-label__label{pointer-events:none}.gov-form-file[disabled=""] .gov-form-file__label .gov-form-label__label *,.gov-form-file[disabled=true i] .gov-form-file__label .gov-form-label__label *,.gov-form-file[disabled="1"] .gov-form-file__label .gov-form-label__label *{color:var(--gov-form-file-disabled-color, var(--gov-color-secondary-600))}.gov-form-file[expanded=""] .gov-form-file__area,.gov-form-file[expanded=true i] .gov-form-file__area,.gov-form-file[expanded="1"] .gov-form-file__area{position:relative;width:100%;padding:2rem 1.375rem 1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center;transition:background-color 150ms ease-in-out;will-change:background-color}.gov-form-file[expanded=""] .gov-form-file__area.highlight,.gov-form-file[expanded=true i] .gov-form-file__area.highlight,.gov-form-file[expanded="1"] .gov-form-file__area.highlight{background-color:var(--gov-color-primary-200)}.gov-form-file[expanded=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded="1"] .gov-form-file__label .gov-form-label__label{width:100%;padding:1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center}.gov-form-file[expanded=""] .gov-form-file__attachments,.gov-form-file[expanded=true i] .gov-form-file__attachments,.gov-form-file[expanded="1"] .gov-form-file__attachments{margin:1.5rem 0rem 0rem}.gov-form-file[expanded=""][invalid=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=""][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=""][invalid="1"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid="1"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded="1"][invalid=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded="1"][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded="1"][invalid="1"] .gov-form-file__label .gov-form-label__label{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}@media (min-width: 30em){.gov-form-file[expanded=""] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded="1"] .gov-form-file__label .gov-form-label__label{padding:2rem}}';const u=class{constructor(o){e(this,o);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govFiles=i(this,"gov-files",7);this.govAddFile=i(this,"gov-add-file",7);this.govRemoveFile=i(this,"gov-remove-file",7);this.expanded=false;this.required=false;this.disabled=undefined;this.displayAttachments=true;this.name=undefined;this.accept=undefined;this.maxFileSize=-1;this.identifier=undefined;this.invalid=undefined;this.errorSize="Soubor je větší než povolená velikost {FILE_SIZE}";this.errorAccept="Soubor tohoto typu není povolen";this.attachmentsLabel="Přílohy";this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagRemoveLabel="Odebrat soubor {FILE_NAME}";this.wcagAttachmentsLabel="Přílohy";this.files=[];this.fileId=a("GovInputFile");this.h=r(this.host);this.f=h(this.h)}watchDisabled(){this.passControlAttrs()}passControlAttrs(){this.f.passAttrToControl("disabled",s(this.disabled));this.f.passAttrToControl("invalid",s(this.invalid));this.f.passAttrToControl("type","File")}registerListeners(){function e(){this.areaRef.classList.add("highlight")}function i(){this.areaRef.classList.remove("highlight")}this.inputRef.addEventListener("change",(e=>{e.preventDefault();e.stopPropagation();const i=e.target.files;this.validateFiles(i)}),false);if(this.expanded){const o=["dragover","dragleave"];const l=["dragenter","dragover","mouseenter"];const t=["dragleave","drop","mouseleave"];o.map((e=>this.inputRef.addEventListener(e,this.preventDefaults.bind(this),false)));l.map((i=>this.inputRef.addEventListener(i,e.bind(this),false)));t.forEach((e=>this.inputRef.addEventListener(e,i.bind(this),false)));this.areaRef.addEventListener("drop",this.handleDrop.bind(this),false)}}preventDefaults(e){e.preventDefault();e.stopPropagation()}handleDrop(e){const i=e.dataTransfer;this.validateFiles(i.files)}validateFiles(e){Array.from(e).map((e=>{const i=this.files.find((i=>i.file.name===e.name&&i.file.size===e.size))||null;if(i===null){const i=typeof this.maxFileSize==="number"&&this.maxFileSize>0?c(e,this.maxFileSize):true;const o=b(e,this.accept);const l={id:a("GovFormFile"),file:e,acceptValid:o,sizeValid:i};this.files=[...this.files,l];this.govAddFile.emit({component:v.root,file:l})}}));this.govFiles.emit({component:v.root,files:this.files})}componentWillLoad(){this.f.passAttrToLabel("required",String(this.required));this.watchDisabled()}async componentDidRender(){if(d()){await g(500);await this.validateWcag()}this.registerListeners()}render(){return o(l,{class:this.h.classes([v.root]),invalid:f(this.invalid),expanded:f(this.expanded)},o("div",{class:v.area,ref:e=>this.areaRef=e},o("slot",null),o("input",{class:v.input,ref:e=>this.inputRef=e,id:this.identifier||this.fileId,type:"file",name:this.name,accept:this.accept,onChange:this.onChangeHandler.bind(this),onFocus:this.onFocusHandler.bind(this),onBlur:this.onBlurHandler.bind(this),required:this.required,disabled:this.disabled,"aria-required":f(this.required),"aria-invalid":f(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-disabled":f(this.disabled)})),this.h.hasSlot("attachments")?o("div",{class:v.attachments},o("slot",{name:"attachments"})):null,this.files.length&&this.displayAttachments?o("div",{class:v.attachments},o("gov-attachments",{label:this.wcagAttachmentsLabel,"wcag-label":this.wcagAttachmentsLabel},this.files.map((e=>o("gov-attachments-item",{"wcag-remove-labelled-by":e.id,"on-gov-remove":()=>this.onRemoveFileHandler(e)},o("span",{class:"sr-only",id:e.id},this.wcagRemoveLabel.replace("{FILE_NAME}",e.file.name)),e.file.name,e.acceptValid===false?o("gov-form-message",{slot:"message",variant:"error"},o("gov-icon",{slot:"icon",name:"exclamation-triangle-fill"}),e.acceptValid===false?this.errorAccept:null):null,e.sizeValid===false?o("gov-form-message",{slot:"message",variant:"error"},o("gov-icon",{slot:"icon",name:"exclamation-triangle-fill"}),this.errorSize.replace("{FILE_SIZE}",_(this.maxFileSize*1024))):null,o("span",{slot:"info"},"(",_(e.file.size),")")))))):null)}onRemoveFileHandler(e){const i=this.files.findIndex((i=>i.id===e.id));if(i!==-1){const e=this.files;const o=this.files[i];e.splice(i,1);this.files=[...e];this.govRemoveFile.emit({component:v.root,file:o});this.govFiles.emit({component:v.root,files:e})}}onFocusHandler(e){e.stopPropagation();this.govFocus.emit({component:v.root,originalEvent:e})}onBlurHandler(e){e.stopPropagation();this.govBlur.emit({component:v.root,originalEvent:e})}onChangeHandler(e){e.stopPropagation()}async getRef(){return this.inputRef}async getAreaRef(){return this.areaRef}async validateWcag(){n(this.wcagDescribedBy,"wcag-described-by",v.root);n(this.wcagLabelledBy,"wcag-labelled-by",v.root);m(this.identifier||this.fileId,this.wcagLabelledBy,v.root)}get host(){return t(this)}static get watchers(){return{disabled:["watchDisabled"],invalid:["watchDisabled"]}}};u.style=p;export{u as gov_form_file};
|
|
2
|
+
//# sourceMappingURL=p-a825183a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"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"],"names":["FormFileClass","root","area","label","input","list","item","attachments","formatBytes","bytes","units","l","n","parseInt","toFixed","fileAcceptValidation","file","accept","length","replace","split","filter","RegExp","test","type","fileSizeValidation","maxSize","fileSize","Math","round","size","govFormFileCss","GovFormFile","[object Object]","hostRef","this","fileId","createID","h","govHost","host","f","govForm","passControlAttrs","passAttrToControl","toBoolAttr","disabled","invalid","highlight","areaRef","classList","add","unhighlight","remove","inputRef","addEventListener","e","preventDefault","stopPropagation","files","target","validateFiles","expanded","events","inEvents","outEvents","map","eventName","preventDefaults","bind","forEach","handleDrop","dataTransfer","Array","from","isFile","find","name","isSizeValid","maxFileSize","isAcceptValid","newFile","id","acceptValid","sizeValid","govAddFile","emit","component","govFiles","passAttrToLabel","String","required","watchDisabled","canValidateWcagOnRender","delay","validateWcag","registerListeners","Host","class","classes","toBoolAttrIfDefined","ref","el","identifier","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","hasSlot","displayAttachments","wcagAttachmentsLabel","wcag-label","wcag-remove-labelled-by","on-gov-remove","onRemoveFileHandler","wcagRemoveLabel","slot","variant","errorAccept","errorSize","index","findIndex","removeFile","splice","govRemoveFile","govFocus","originalEvent","govBlur","validateWcagRef","validateWcagLabelFor"],"mappings":"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","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 / 1024)\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}\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 * 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\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\tthis.files = [...this.files, newFile]\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: 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\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 * 1024))}\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 * 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"]}
|