@gov-design-system-ce/components 4.0.8-rc23 → 4.0.8-rc24

package/dist/hydrate/index.mjs

@@ -4538,6 +4538,7 @@ class GovFormFile {
         this.govFiles = createEvent(this, "gov-files", 7);
         this.govAddFile = createEvent(this, "gov-add-file", 7);
         this.govRemoveFile = createEvent(this, "gov-remove-file", 7);
+        this.eventsRegistered = false;
         this.expanded = false;
         this.required = false;
         this.disabled = false;
@@ -4571,6 +4572,10 @@ class GovFormFile {
         this.f.passAttrToControl("type", "File");
     }
     registerListeners() {
+        if (this.eventsRegistered) {
+            return;
+        }
+        this.eventsRegistered = true;
         function highlight() {
             this.areaRef.classList.add("highlight");
         }
@@ -4651,7 +4656,7 @@ class GovFormFile {
         this.registerListeners();
     }
     render() {
-        return (hAsync(Host, { key: 'f4ff2f49ca750b8025ebacdafea5330c3e681b8e', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: '6c1811dcdca85ebe64141ee0af5f2b9e351e3da0', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: '86be170e7f1527dbc0b8b891a130a8b743808702' }), hAsync("input", { key: '95b877b4639343f6dfc5715255e75e82cf18d733', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, hAsync("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+        return (hAsync(Host, { key: 'aa5c283da9eba03799821960eb24cb33ccb09970', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: '009e6045d710930eabd1dd9a6b4c8b863f1d7966', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: 'c41093ae90e265a077a5a18366dcd3951ca1797b' }), hAsync("input", { key: '9e5813b8a306b65a646ee5754aafb897e92a0c8a', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, hAsync("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", variant: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
     }
     onRemoveFileHandler(file) {
         const index = this.files.findIndex(item => item.id === file.id);

package/dist/types/components/gov-form/file/gov-form-file.d.ts

@@ -6,6 +6,7 @@ export declare class GovFormFile {
     private areaRef?;
     private inputRef?;
     private readonly fileId;
+    private eventsRegistered;
     constructor();
     host: HTMLGovFormFileElement;
     /**

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@gov-design-system-ce/components",
 	"description": "This package includes Gov Design System Web Components and related utilities.",
 	"author": "Zdeněk Vítek",
-	"version": "4.0.8-rc23",
+	"version": "4.0.8-rc24",
 	"license": "EUPL v1.2 Licensed",
 	"main": "./dist/index.cjs.js",
 	"unpkg": "./dist/core/core.esm.js",

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

@@ -1 +0,0 @@
-{"version":3,"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","GovFormFileStyle0","GovFormFile","constructor","hostRef","this","fileId","createID","h","govHost","host","f","govForm","watchControlAttrs","passControlAttrs","passAttrToControl","toBoolAttr","invalid","disabled","registerListeners","highlight","areaRef","classList","add","unhighlight","remove","inputRef","addEventListener","e","preventDefault","stopPropagation","files","target","resetAfterPick","validateFiles","expanded","events","inEvents","outEvents","map","eventName","preventDefaults","bind","forEach","handleDrop","dataTransfer","filesBuffer","Array","from","isFile","find","name","ignoreFileDuplicationCheck","isSizeValid","maxFileSize","isAcceptValid","newFile","id","acceptValid","sizeValid","displayAttachments","govAddFile","emit","component","govFiles","reset","finally","componentDidRender","passAttrToLabel","String","required","canValidateWcagOnRender","delay","validateWcag","render","Host","key","class","classes","toBoolAttrIfDefined","ref","el","identifier","multiple","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","wcagDescribedBy","wcagLabelledBy","hasSlot","wcagAttachmentsLabel","onRemoveFileHandler","wcagRemoveLabel","slot","variant","errorAccept","errorSize","index","findIndex","removeFile","splice","govRemoveFile","govFocus","originalEvent","govBlur","getRef","getAreaRef","value","validateWcagRef","validateWcagLabelFor"],"sources":["../../../packages/core/src/components/gov-form/file/constants.ts","../../../packages/core/src/utils/file.utils.ts","../../../packages/core/src/components/gov-form/file/gov-form-file.scss?tag=gov-form-file","../../../packages/core/src/components/gov-form/file/gov-form-file.tsx"],"sourcesContent":["export const FormFileClass = {\n\troot: 'gov-form-file',\n\tarea: 'gov-form-file__area',\n\tlabel: 'gov-form-file__label',\n\tinput: 'gov-form-file__input',\n\tlist: 'gov-form-file__list',\n\titem: 'gov-form-file__item',\n\tattachments: 'gov-form-file__attachments',\n}\n","export function formatBytes(bytes: any): string {\n\tconst units = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n\tlet l = 0,\n\t\tn = parseInt(bytes, 10) || 0\n\n\twhile (n >= 1024 && ++l) {\n\t\tn = n / 1024\n\t}\n\n\treturn n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]\n}\n\nexport function fileAcceptValidation(file: File, accept: string): boolean {\n\tif (typeof accept === 'string' && accept.length) {\n\t\treturn (\n\t\t\taccept\n\t\t\t\t.replace(/\\s/g, '')\n\t\t\t\t.split(',')\n\t\t\t\t.filter(accept => {\n\t\t\t\t\treturn new RegExp(accept.replace('*', '.*')).test(file.type)\n\t\t\t\t}).length > 0\n\t\t)\n\t} else {\n\t\treturn true\n\t}\n}\n\nexport function fileSizeValidation(file: File, maxSize: number): boolean {\n\tconst fileSize = Math.round(file.size)\n\treturn fileSize <= maxSize\n}\n","/*\n *   File\n */\n\n$class: \".gov-form-file\";\n\n#{$class} {\n\t@include base();\n\t&__label .gov-form-label__label {\n\t\t@include reset-last-margin();\n\t}\n\t&__input {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\topacity: 0.0001;\n\t\tcursor: pointer;\n\t}\n\t&__attachments {\n\t\tmargin-top: rem-calc(16 0 0);\n\t}\n\t&__item {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\talign-items: center;\n\t}\n\n\t// STATES\n\t@include parameter(\"disabled\") {\n\t\t#{$class} {\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\tpointer-events: none;\n\t\t\t\t* {\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"expanded\") {\n\t\t#{$class} {\n\t\t\t&__area {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(32) rem-calc(22) rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t\ttransition: background-color $t ease-in-out;\n\t\t\t\twill-change: background-color;\n\t\t\t\t&.highlight {\n\t\t\t\t\tbackground-color: color(\"primary.200\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__label .gov-form-label__label {\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding: rem-calc(22);\n\t\t\t\tborder: $form-file-border;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t&__attachments {\n\t\t\t\tmargin: rem-calc(24 0 0);\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"invalid\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t\t&__area {\n\t\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"disabled\") {\n\t\t\t#{$class} {\n\t\t\t\t&__area {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tcolor: $form-file-disabled-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t@include parameter(\"expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__label .gov-form-label__label {\n\t\t\t\t\tpadding: rem-calc(32);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from \"@stencil/core\"\nimport {createID} from \"../../../utils/string.utils\"\nimport {FormFileClass} from \"./constants\"\nimport {govHost, toBoolAttr, toBoolAttrIfDefined} from \"../../../helpers/Dom/template\"\nimport {validateWcagLabelFor, validateWcagRef} from \"../../../helpers/Validate/wcag\"\nimport {canValidateWcagOnRender} from \"../../../helpers/Dom/win\"\nimport {fileAcceptValidation, fileSizeValidation, formatBytes} from \"../../../utils/file.utils\"\nimport {delay} from \"../../../utils/utils\"\nimport {GovForm} from \"../../../helpers/Dom/form.types\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govForm} from \"../../../helpers/Dom/form\"\nimport {GovFormFileEvent, GovFormFileItem} from \"./gov-form-file.types\"\n\n@Component({\n\ttag: \"gov-form-file\",\n\tstyleUrl: \"gov-form-file.scss\",\n})\nexport class GovFormFile {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\n\tprivate areaRef?: HTMLDivElement\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly fileId: string\n\n\tconstructor() {\n\t\tthis.fileId = createID(\"GovInputFile\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormFileElement\n\t/**\n\t * Expands the file input to fill 100% of the container width.\n\t */\n\t@Prop() readonly expanded: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the File component disabled.\n\t * This prevents users from being able to interact with the File, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * After selecting the files, the main input element will be reset.\n\t * The propagation of the event with the selected files will not be affected.\n\t */\n\t@Prop({attribute: \"reset-after-pick\"}) readonly resetAfterPick: boolean = true\n\t/**\n\t * Selected files will not be checked for duplicates based on name and size.\n\t */\n\t@Prop({attribute: \"ignore-file-duplication-check\"}) readonly ignoreFileDuplicationCheck: boolean = false\n\t/**\n\t * Show list of attachments\n\t */\n\t@Prop({attribute: \"display-attachments\"}) readonly displayAttachments: boolean = true\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n\t */\n\t@Prop() readonly accept: string\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple\n\t */\n\t@Prop() readonly multiple: boolean = false\n\t/**\n\t * Maximum embedded file size\n\t */\n\t@Prop({attribute: \"max-file-size\"}) readonly maxFileSize: number = -1\n\t/**\n\t * Custom File identifier.\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Error message when the maximum file size is exceeded\n\t */\n\t@Prop({attribute: \"error-size\"}) readonly errorSize: string = \"Soubor je větší než povolená velikost {FILE_SIZE}\"\n\t/**\n\t * Insert unsupported file error message\n\t */\n\t@Prop({attribute: \"error-accept\"}) readonly errorAccept: string = \"Soubor tohoto typu není povolen\"\n\t/**\n\t * Description of the list of attachments\n\t */\n\t@Prop({attribute: \"attachments-label\"}) readonly attachmentsLabel: string = \"Přílohy\"\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({attribute: \"wcag-described-by\"}) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({attribute: \"wcag-labelled-by\"}) readonly wcagLabelledBy: string\n\t/**\n\t * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({attribute: \"wcag-remove-label\"}) readonly wcagRemoveLabel: string = \"Odebrat soubor {FILE_NAME}\"\n\t/**\n\t * Adds accessible label for the list of attachments.\n\t */\n\t@Prop({attribute: \"wcag-attachments-label\"}) readonly wcagAttachmentsLabel: string = \"Přílohy\"\n\t/**\n\t * Emitted when the File has focus.\n\t */\n\t@Event({eventName: \"gov-focus\"}) govFocus: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Emitted when the File loses focus.\n\t */\n\t@Event({eventName: \"gov-blur\"}) govBlur: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when the list of inserted files is changed\n\t */\n\t@Event({eventName: \"gov-files\"}) govFiles: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a new file is added\n\t */\n\t@Event({eventName: \"gov-add-file\"}) govAddFile: EventEmitter<GovFormFileEvent>\n\t/**\n\t * Called when a file is removed from the list\n\t */\n\t@Event({eventName: \"gov-remove-file\"}) govRemoveFile: EventEmitter<GovFormFileEvent>\n\n\t@State() files: GovFormFileItem[] = []\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\twatchControlAttrs(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\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\tif (this.resetAfterPick) {\n\t\t\t\t\tif (files.length) {\n\t\t\t\t\t\tthis.validateFiles(files)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.validateFiles(files)\n\t\t\t\t}\n\t\t\t},\n\t\t\tfalse,\n\t\t)\n\n\t\tif (this.expanded) {\n\t\t\tconst events = [\"dragover\", \"dragleave\"]\n\t\t\tconst inEvents = [\"dragenter\", \"dragover\", \"mouseenter\"]\n\t\t\tconst outEvents = [\"dragleave\", \"drop\", \"mouseleave\"]\n\n\t\t\tevents.map(eventName => this.inputRef.addEventListener(eventName, this.preventDefaults.bind(this), false))\n\t\t\tinEvents.map(eventName => this.inputRef.addEventListener(eventName, highlight.bind(this), false))\n\t\t\toutEvents.forEach(eventName => this.inputRef.addEventListener(eventName, unhighlight.bind(this), false))\n\n\t\t\tthis.areaRef.addEventListener(\"drop\", this.handleDrop.bind(this), false)\n\t\t}\n\t}\n\n\tpreventDefaults(e) {\n\t\te.preventDefault()\n\t\te.stopPropagation()\n\t}\n\n\thandleDrop(e: DragEvent) {\n\t\tconst dataTransfer = e.dataTransfer\n\t\tthis.validateFiles(dataTransfer.files)\n\t}\n\n\tprivate validateFiles(files: FileList) {\n\t\tlet filesBuffer: GovFormFileItem[] = []\n\t\tArray.from(files).map(file => {\n\t\t\tconst isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null\n\t\t\tif (isFile === null || this.ignoreFileDuplicationCheck) {\n\t\t\t\tconst isSizeValid = typeof this.maxFileSize === \"number\" && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true\n\t\t\t\tconst isAcceptValid = fileAcceptValidation(file, this.accept)\n\t\t\t\tconst newFile = {\n\t\t\t\t\tid: createID(\"GovFormFile\"),\n\t\t\t\t\tfile,\n\t\t\t\t\tacceptValid: isAcceptValid,\n\t\t\t\t\tsizeValid: isSizeValid,\n\t\t\t\t}\n\t\t\t\tif (this.displayAttachments) {\n\t\t\t\t\tthis.files = [...this.files, newFile]\n\t\t\t\t} else {\n\t\t\t\t\tfilesBuffer = [...filesBuffer, newFile]\n\t\t\t\t}\n\t\t\t\tthis.govAddFile.emit({\n\t\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\t\tfile: newFile,\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\tthis.govFiles.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\tfiles: filesBuffer.length ? filesBuffer : this.files,\n\t\t})\n\n\t\tif (this.resetAfterPick) {\n\t\t\tthis.reset().finally()\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tthis.passControlAttrs()\n\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)}\n\t\t\t\t\t\texpanded={toBoolAttrIfDefined(this.expanded)}>\n\t\t\t\t<div class={FormFileClass.area} ref={el => (this.areaRef = el as HTMLDivElement)}>\n\t\t\t\t\t<slot/>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={FormFileClass.input}\n\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\tid={this.identifier || this.fileId}\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot(\"attachments\") ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<slot name={\"attachments\"}/>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.files.length && this.displayAttachments ? (\n\t\t\t\t\t<div class={FormFileClass.attachments}>\n\t\t\t\t\t\t<gov-attachments label={this.wcagAttachmentsLabel} wcag-label={this.wcagAttachmentsLabel}>\n\t\t\t\t\t\t\t{this.files.map(item => (\n\t\t\t\t\t\t\t\t<gov-attachments-item wcag-remove-labelled-by={item.id}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ton-gov-remove={() => this.onRemoveFileHandler(item)}>\n\t\t\t\t\t\t\t\t\t<span class={\"sr-only\"} id={item.id}>\n\t\t\t\t\t\t\t\t\t\t{this.wcagRemoveLabel.replace(\"{FILE_NAME}\", item.file.name)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{item.file.name}\n\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{item.acceptValid === false ? this.errorAccept : null}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{item.sizeValid === false ? (\n\t\t\t\t\t\t\t\t\t\t<gov-form-message slot=\"message\" variant=\"error\">\n\t\t\t\t\t\t\t\t\t\t\t<gov-icon slot=\"icon\" name=\"exclamation-triangle-fill\"></gov-icon>\n\t\t\t\t\t\t\t\t\t\t\t{this.errorSize.replace(\"{FILE_SIZE}\", formatBytes(this.maxFileSize))}\n\t\t\t\t\t\t\t\t\t\t</gov-form-message>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t<span slot=\"info\">({formatBytes(item.file.size)})</span>\n\t\t\t\t\t\t\t\t</gov-attachments-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</gov-attachments>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onRemoveFileHandler(file: GovFormFileItem) {\n\t\tconst index = this.files.findIndex(item => item.id === file.id)\n\t\tif (index !== -1) {\n\t\t\tconst files = this.files\n\t\t\tconst removeFile = this.files[index]\n\t\t\tfiles.splice(index, 1)\n\t\t\tthis.files = [...files]\n\t\t\tthis.govRemoveFile.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfile: removeFile,\n\t\t\t})\n\t\t\tthis.govFiles.emit({\n\t\t\t\tcomponent: FormFileClass.root,\n\t\t\t\tfiles,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormFileClass.root,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Returns the reference of the native area element\n\t */\n\t@Method()\n\tasync getAreaRef(): Promise<HTMLDivElement> {\n\t\treturn this.areaRef\n\t}\n\n\t/**\n\t * Remove all files from component state\n\t */\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.files = []\n\t\tthis.inputRef.value = '';\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"],"mappings":"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","ignoreList":[]}