@mgdis/mg-components 5.23.1 → 5.23.2
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/{index-0cf3e6d5.js → index-775fad7b.js} +13 -2
- package/dist/cjs/index-775fad7b.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_34.cjs.entry.js +44 -44
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +2 -2
- package/dist/cjs/mg-item-more.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js.map +1 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +1 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.js.map +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +3 -3
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +3 -3
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js.map +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/components/mg-action-more.js +3 -3
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-badge2.js +1 -1
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +1 -1
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +1 -1
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +1 -1
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +1 -1
- package/dist/components/mg-divider.js.map +1 -1
- package/dist/components/mg-form.js +1 -1
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +3 -3
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +2 -2
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +1 -1
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +1 -1
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +2 -2
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +1 -1
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +1 -1
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +1 -1
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +3 -3
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +1 -1
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +1 -1
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +1 -1
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-item-more.js +1 -1
- package/dist/components/mg-item-more.js.map +1 -1
- package/dist/components/mg-menu-item2.js +1 -1
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-menu2.js +1 -1
- package/dist/components/mg-menu2.js.map +1 -1
- package/dist/components/mg-message.js +1 -1
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-modal.js +2 -2
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +2 -2
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +1 -1
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +1 -1
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +1 -1
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-skip-links.js +1 -1
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-tabs.js +1 -1
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +1 -1
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-91977c3d.js → index-9aa447a7.js} +13 -2
- package/dist/esm/index-9aa447a7.js.map +1 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mg-action-more_34.entry.js +44 -44
- package/dist/esm/mg-action-more_34.entry.js.map +1 -1
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-item-more.entry.js +2 -2
- package/dist/esm/mg-item-more.entry.js.map +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/{p-6c68c7eb.entry.js → p-06715c36.entry.js} +2 -2
- package/dist/mg-components/p-06715c36.entry.js.map +1 -0
- package/dist/mg-components/{p-49e1ffcb.js → p-4e7a7f68.js} +1 -1
- package/dist/mg-components/{p-49e1ffcb.js.map → p-4e7a7f68.js.map} +1 -1
- package/dist/mg-components/p-fee35953.entry.js +2 -0
- package/dist/mg-components/{p-896da866.entry.js.map → p-fee35953.entry.js.map} +1 -1
- package/package.json +22 -22
- package/dist/cjs/index-0cf3e6d5.js.map +0 -1
- package/dist/esm/index-91977c3d.js.map +0 -1
- package/dist/mg-components/p-6c68c7eb.entry.js.map +0 -1
- package/dist/mg-components/p-896da866.entry.js +0 -2
|
@@ -34,13 +34,13 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
|
|
|
34
34
|
* @returns HTML Element
|
|
35
35
|
*/
|
|
36
36
|
render() {
|
|
37
|
-
return (h("div", { class: {
|
|
37
|
+
return (h("div", { key: '2fdba6c8f99b0db0955f4f6e85c90e6b73aeb506', class: {
|
|
38
38
|
'mg-c-illustrated-message': true,
|
|
39
39
|
'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
|
|
40
|
-
} }, h("div", { class: {
|
|
40
|
+
} }, h("div", { key: 'c41ca15c897ae3f855ce0e922e1afc6f0475c014', class: {
|
|
41
41
|
'mg-c-illustrated-message__illustration': true,
|
|
42
42
|
'mg-c-illustrated-message__illustration--small': this.size === 'small',
|
|
43
|
-
} }, h("slot", { name: "illustration" })), h("div", { class: "mg-c-illustrated-message__slots" }, h("div", { class: "mg-c-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-c-illustrated-message__details" }, h("slot", { name: "details" })))));
|
|
43
|
+
} }, h("slot", { key: 'c0f9308201945fae94d13afc45596ba45efdd890', name: "illustration" })), h("div", { key: '5c020c6c0154a527485662dd47eda0ad141e2efc', class: "mg-c-illustrated-message__slots" }, h("div", { key: 'e5ff38b7a081232af9382c6bda756bdd31360f86', class: "mg-c-illustrated-message__title" }, h("slot", { key: '39b3ff01828d05780bd18f04a9971acc0b47a684', name: "title" })), h("div", { key: 'f0cc3464ff7c28ad6a26445ffeca1a0dc40d51ce', class: "mg-c-illustrated-message__details" }, h("slot", { key: '32f4165453cc3dba7b78d1ad0addc63cf35d246d', name: "details" })))));
|
|
44
44
|
}
|
|
45
45
|
get element() { return this; }
|
|
46
46
|
static get style() { return MgIllustratedMessageStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ysCAAysC,CAAC;AAC1uC,mCAAe,uBAAuB;;MCOzBA,sBAAoB;;;;;oBAaK,SAAS;yBAKE,UAAU;;;;;;;;IASzD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAACC,EAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACxG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,
|
|
1
|
+
{"file":"mg-illustrated-message.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ysCAAysC,CAAC;AAC1uC,mCAAe,uBAAuB;;MCOzBA,sBAAoB;;;;;oBAaK,SAAS;yBAKE,UAAU;;;;;;;;IASzD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAEpF,IAAI,CAACC,EAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;YACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACxG;aAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;YAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;SAC9F;QAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7D;;;;;IAMD,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,sCAAsC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;aACxE,IAED,4DACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,+CAA+C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aACvE,IAED,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,KAAK,EAAC,mCAAmC,IAC5C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgIllustratedMessage","isTagName"],"sources":["../styles/dist/components/mg-illustrated-message.css?tag=mg-illustrated-message&encapsulation=shadow","src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"sourcesContent":[".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}/*# sourceMappingURL=mg-illustrated-message.css.map */\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-illustrated-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-illustrated-message.css',\n shadow: true,\n})\nexport class MgIllustratedMessage {\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgIllustratedMessageElement;\n\n /**\n * Define illustration size\n */\n @Prop() size: 'regular' | 'small' = 'regular';\n\n /**\n * Define component orientation\n */\n @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentDidLoad(): void {\n const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n } else if (slottedIllustrations.length !== 1) {\n throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n }\n\n slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-c-illustrated-message': true,\n 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',\n }}\n >\n <div\n class={{\n 'mg-c-illustrated-message__illustration': true,\n 'mg-c-illustrated-message__illustration--small': this.size === 'small',\n }}\n >\n <slot name=\"illustration\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__slots\">\n <div class=\"mg-c-illustrated-message__title\">\n <slot name=\"title\"></slot>\n </div>\n <div class=\"mg-c-illustrated-message__details\">\n <slot name=\"details\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -155,10 +155,10 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
|
|
|
155
155
|
* @returns HTML Element
|
|
156
156
|
*/
|
|
157
157
|
render() {
|
|
158
|
-
const getText = (checkboxes) => (h("em", { class: "mg-c-input__input-checkbox-multi-section-header-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
|
|
158
|
+
const getText = (checkboxes) => (h("em", { key: '28eedd949445bc6c7a5a750359af7159055657d8', class: "mg-c-input__input-checkbox-multi-section-header-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
|
|
159
159
|
const [from, to] = this.getFromToIndexes();
|
|
160
160
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
161
|
-
return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
|
|
161
|
+
return (h(Host, { key: 'a7ade87a72bb1cba4d0c20dde425cefc5c7fbff4', hidden: this.checkboxes.length < 1 }, h("div", { key: '38711edade3945e940ba29b44492424c3e5b7063', class: "mg-c-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-c-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { class: "mg-c-input__input-checkbox-multi-section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '3a514d5711da9ebb57d21e70609b7f6f2d1e621e', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { key: 'd86fc1faa7ae0312b402a2fc26a1ef04c30cd410', checkboxes: this.getArrayRange(this.checkboxes, from, to), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
|
|
162
162
|
}
|
|
163
163
|
static get watchers() { return {
|
|
164
164
|
"checkboxes": ["validateCheckboxes"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n title: string;\n value: boolean | null;\n disabled?: boolean;\n required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n _id: string;\n _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n _handleBlur: () => void;\n _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind\n */\nexport enum SectionKind {\n SELECTED = 'selected',\n NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n BUTTON = 'button',\n TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n readonly: boolean;\n disabled: boolean;\n name: string;\n invalid: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n inputVerticalList: boolean;\n type: CheckboxType;\n displaySearchInput: boolean;\n messages: Record<string, unknown>;\n checkboxes: CheckboxItem[];\n id: string;\n}\n\n/**\n * Define select values button key\n */\nexport enum SelectValuesButtonKey {\n EDIT = 'editButton',\n SHOW = 'showButton',\n SELECT = 'selectButton',\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n class={{\n 'mg-c-input__input-group-container': true,\n 'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),\n 'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n }}\n role=\"list\"\n aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n aria-live={props.displaySearchInput ? 'polite' : undefined}\n id={props.id}\n >\n {props.checkboxes\n .filter(item => !props.readonly || item.value)\n .map(input => (\n <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n <input\n type=\"checkbox\"\n id={input._id}\n name={props.name}\n value={input.value?.toString()}\n checked={Boolean(input.value)}\n required={input.required}\n aria-invalid={props.invalid?.toString() || 'false'}\n disabled={props.readonly || props.disabled || input.disabled}\n indeterminate={input.value === null}\n onInput={input._handleInput}\n onBlur={input._handleBlur}\n onKeyDown={input._handleKeydown}\n />\n <label htmlFor={input._id}>{input.title}</label>\n </li>\n ))}\n </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n */\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /*************\n * Constantes *\n *************/\n private readonly offset = 10;\n\n /*************\n * Decorators *\n *************/\n\n /**\n * Define if mg-input-checkbox-list is readonly\n */\n @Prop() readonly: boolean;\n\n /**\n * Define if mg-input-checkbox-list is disabled\n */\n @Prop() disabled: boolean;\n\n /**\n * Define mg-input-checkbox input name\n */\n @Prop() name: string;\n\n /**\n * Define mg-input-checkbox input invalid\n */\n @Prop() invalid: boolean;\n\n /**\n * Current page\n */\n @Prop({ mutable: true }) currentPage = 1;\n\n /**\n * Define checkboxes to paginate\n */\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n const pageCountNewValue = this.getPageCount(newValue);\n const pageCountOldValue = this.getPageCount(oldValue);\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n this.currentPage = 1;\n }\n // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n this.currentPage--;\n }\n }\n\n /**\n * Define section kind\n */\n @Prop() sectionKind: SectionKind;\n @Watch('sectionKind')\n validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n else this.titleKind = SectionTitleKind.TEXT;\n }\n\n /**\n * Define component message\n */\n @Prop() messages: Record<string, string>;\n\n /**\n * Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n */\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n /**\n * Define section title\n */\n @State() titleKind: SectionTitleKind;\n\n /**\n * Is checked items values expanded\n */\n @State() expanded = true;\n\n /***********\n * Methods *\n ***********/\n\n /**\n * Mass action handler\n */\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /**\n * Toggle items button handler\n */\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n */\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /**\n * Get from and to index\n * @returns [from,to] index\n */\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /**\n * Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n */\n private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n /**\n * Handle mg-pagination current page change event\n * @param event - pagination current page change event\n */\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n this.validateSectionKind(this.sectionKind);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__input-checkbox-multi-section-header-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n );\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n {this.titleKind === SectionTitleKind.BUTTON ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-tooltip class=\"mg-c-input__input-checkbox-multi-section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n </mg-tooltip>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n inputVerticalList={true}\n type={'multi'}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n readonly={this.readonly}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-input-checkbox-paginated2.js","mappings":";;;;;;;;;AAsBA;;;MAGa,aAAa,GAAG,CAAC,UAAU,EAAE,OAAO,EAAW;AAO5D;;;IAGY;AAAZ,WAAY,WAAW;IACrB,oCAAqB,CAAA;IACrB,4CAA6B,CAAA;AAC/B,CAAC,EAHW,WAAW,KAAX,WAAW,QAGtB;AAED;;;AAGA,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,qCAAiB,CAAA;IACjB,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAwBD;;;IAGY;AAAZ,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,4CAAmB,CAAA;IACnB,gDAAuB,CAAA;AACzB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB;;ACtEjC;;;;;MAKa,mBAAmB,GAAkD,CAAC,KAA+B;AAChH;AACA,UACE,KAAK,EAAE;QACL,mCAAmC,EAAE,IAAI;QACzC,6CAA6C,EAAE,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QACrH,yCAAyC,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;KACrF,EACD,IAAI,EAAC,MAAM,sBACO,KAAK,CAAC,kBAAkB,GAAG,gBAAgB,GAAG,SAAS,gBAC7D,KAAK,CAAC,kBAAkB,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,GAAG,SAAS,eACpE,KAAK,CAAC,kBAAkB,GAAG,QAAQ,GAAG,SAAS,EAC1D,EAAE,EAAE,KAAK,CAAC,EAAE,IAEX,KAAK,CAAC,UAAU;KACd,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;KAC7C,GAAG,CAAC,KAAK;;IAAI,QACZ,UAAI,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,mCAAmC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;QACnI,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,GAAG,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAC9B,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,kBACV,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,EAAE,KAAI,OAAO,EAClD,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC5D,aAAa,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,EACnC,OAAO,EAAE,KAAK,CAAC,YAAY,EAC3B,MAAM,EAAE,KAAK,CAAC,WAAW,EACzB,SAAS,EAAE,KAAK,CAAC,cAAc,GAC/B;QACF,aAAO,OAAO,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C,EACN;CAAA,CAAC,CACD;;MC/BM,wBAAwB;;;;;;;;QAIlB,WAAM,GAAG,EAAE,CAAC;;;;;;;QAwFrB,sBAAiB,GAAG;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxC,CAAC;;;;QAKM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAChC,CAAC;;;;;;;QAQM,kBAAa,GAAG,CAAY,KAAiB,EAAE,IAAY,EAAE,EAAU,KAAiB,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;;;;;;QAkB9G,iBAAY,GAAG,CAAC,IAAe,KAAa,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;;;;;QAMjF,4BAAuB,GAAG,CAAC,KAAkB;YACnD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SACzC,CAAC;;;;;2BAtGqC,CAAC;0BAKH,EAAE;;;;wBA6CnB,IAAI;;IA3CxB,kBAAkB,CAAC,QAAgD,EAAE,QAAgD;QACnH,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;;QAGtD,IAAI,iBAAiB,KAAK,CAAC,KAAK,iBAAiB,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,EAAE;YAClF,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACtB;;aAEI,IAAI,iBAAiB,KAAK,IAAI,CAAC,WAAW,IAAI,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE;YACvF,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAOD,mBAAmB,CAAC,QAAiD;QACnE,IAAI,QAAQ,KAAK,WAAW,CAAC,QAAQ;YAAE,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,MAAM,CAAC;;YAC3E,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC;KAC7C;;;;;IAqDO,gBAAgB;QACtB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,WAAW,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;QACpE,MAAM,EAAE,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QACtE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;KACnB;;;;;;;IAwBD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5C;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,UAA0B,MACzC,2DAAI,KAAK,EAAC,uDAAuD,IAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,GAAG,OAAO,CAAC,KAAK,UAAU,CAAC,MAAM,GAAG,CAAM,CACrK,CAAC;QACF,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC3C,MAAM,gBAAgB,GAAG,SAAS,IAAI,CAAC,WAAW,YAAY,CAAC;QAE/D,QACE,EAAC,IAAI,qDAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IACtC,4DAAK,KAAK,EAAC,iDAAiD,IACzD,IAAI,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,IACzC,iBAAW,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,mBAAiB,gBAAgB,mBAAiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,IACjI,eAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,cAAc,EAAE,IAAI,EAAC,OAAO,GAAW,EACrF,YAAM,KAAK,EAAC,uCAAuC,IAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAQ,CAC3E,KAEZ,SAAG,KAAK,EAAC,wCAAwC,IAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAK,CACjF,EACA,CAAC,CAAC,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,YAAY,MAC7G,kBAAY,KAAK,EAAC,yDAAyD,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,0BAAuB,UAAU,IACzI,iBAAW,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CACX,CACD,CACd,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KACtD,qBACE,GAAG,EAAC,mBAAmB,EACvB,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,EAC9C,WAAW,EAAE,IAAI,CAAC,WAAW,2BACN,IAAI,CAAC,uBAAuB,EACnD,oBAAoB,EAAE,IAAI,EAC1B,aAAa,EAAE,IAAI,EACnB,UAAU,EAAE,6BAA6B,IAAI,CAAC,WAAW,EAAE,GAC5C,CAClB,CACG,EACN,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAC,kDAAkD,IACzG,EAAC,mBAAmB,qDAClB,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC,EACzD,iBAAiB,EAAE,IAAI,EACvB,IAAI,EAAE,OAAO,EACb,kBAAkB,EAAE,IAAI,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IAAI,CAAC,WAAW,EAAE,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GACA,CACnB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n title: string;\n value: boolean | null;\n disabled?: boolean;\n required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n _id: string;\n _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n _handleBlur: () => void;\n _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind\n */\nexport enum SectionKind {\n SELECTED = 'selected',\n NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n BUTTON = 'button',\n TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n readonly: boolean;\n disabled: boolean;\n name: string;\n invalid: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n inputVerticalList: boolean;\n type: CheckboxType;\n displaySearchInput: boolean;\n messages: Record<string, unknown>;\n checkboxes: CheckboxItem[];\n id: string;\n}\n\n/**\n * Define select values button key\n */\nexport enum SelectValuesButtonKey {\n EDIT = 'editButton',\n SHOW = 'showButton',\n SELECT = 'selectButton',\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n class={{\n 'mg-c-input__input-group-container': true,\n 'mg-c-input__input-group-container--vertical': props.inputVerticalList || (props.type === 'multi' && !props.readonly),\n 'mg-c-input__input-checkbox-multi-inputs': props.type === 'multi' && !props.readonly,\n }}\n role=\"list\"\n aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n aria-live={props.displaySearchInput ? 'polite' : undefined}\n id={props.id}\n >\n {props.checkboxes\n .filter(item => !props.readonly || item.value)\n .map(input => (\n <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n <input\n type=\"checkbox\"\n id={input._id}\n name={props.name}\n value={input.value?.toString()}\n checked={Boolean(input.value)}\n required={input.required}\n aria-invalid={props.invalid?.toString() || 'false'}\n disabled={props.readonly || props.disabled || input.disabled}\n indeterminate={input.value === null}\n onInput={input._handleInput}\n onBlur={input._handleBlur}\n onKeyDown={input._handleKeydown}\n />\n <label htmlFor={input._id}>{input.title}</label>\n </li>\n ))}\n </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n */\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /*************\n * Constantes *\n *************/\n private readonly offset = 10;\n\n /*************\n * Decorators *\n *************/\n\n /**\n * Define if mg-input-checkbox-list is readonly\n */\n @Prop() readonly: boolean;\n\n /**\n * Define if mg-input-checkbox-list is disabled\n */\n @Prop() disabled: boolean;\n\n /**\n * Define mg-input-checkbox input name\n */\n @Prop() name: string;\n\n /**\n * Define mg-input-checkbox input invalid\n */\n @Prop() invalid: boolean;\n\n /**\n * Current page\n */\n @Prop({ mutable: true }) currentPage = 1;\n\n /**\n * Define checkboxes to paginate\n */\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n const pageCountNewValue = this.getPageCount(newValue);\n const pageCountOldValue = this.getPageCount(oldValue);\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n this.currentPage = 1;\n }\n // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n this.currentPage--;\n }\n }\n\n /**\n * Define section kind\n */\n @Prop() sectionKind: SectionKind;\n @Watch('sectionKind')\n validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n else this.titleKind = SectionTitleKind.TEXT;\n }\n\n /**\n * Define component message\n */\n @Prop() messages: Record<string, string>;\n\n /**\n * Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n */\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n /**\n * Define section title\n */\n @State() titleKind: SectionTitleKind;\n\n /**\n * Is checked items values expanded\n */\n @State() expanded = true;\n\n /***********\n * Methods *\n ***********/\n\n /**\n * Mass action handler\n */\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /**\n * Toggle items button handler\n */\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n */\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /**\n * Get from and to index\n * @returns [from,to] index\n */\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /**\n * Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n */\n private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n /**\n * Handle mg-pagination current page change event\n * @param event - pagination current page change event\n */\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n this.validateSectionKind(this.sectionKind);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__input-checkbox-multi-section-header-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n );\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__input-checkbox-multi-section-header\">\n {this.titleKind === SectionTitleKind.BUTTON ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n <span class=\"mg-c-input__input-checkbox-multi-text\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__input-checkbox-multi-title\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-tooltip class=\"mg-c-input__input-checkbox-multi-section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n </mg-tooltip>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__input-checkbox-multi-section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n inputVerticalList={true}\n type={'multi'}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n readonly={this.readonly}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -421,7 +421,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
421
421
|
*/
|
|
422
422
|
render() {
|
|
423
423
|
var _a;
|
|
424
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
|
|
424
|
+
return (h(MgInput, { key: '30d2be938b51f423015a2fba6f70c9a424402c8f', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, inputVerticalList: this.inputVerticalList, type: this.type, readonly: this.readonly, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
|
|
425
425
|
}
|
|
426
426
|
get element() { return this; }
|
|
427
427
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-input-checkbox.js","mappings":";;;;;;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,o/MAAo/M,CAAC;AAChhN,8BAAe,kBAAkB;;ACQjC;;;;;AAKA,MAAM,eAAe,GAAG,CAAC,KAAc,KACrC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IACpB,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;MAO7JA,iBAAe;;;;;;;;QAalB,sBAAiB,GAAG,KAAK,CAAC;QAG1B,SAAI,GAAsB,QAAQ,CAAC;;QAI1B,kBAAa,GAAG,sBAAsB,CAAC;;QAGvC,eAAU,GAAG,CAAC,CAAC;QACf,gBAAW,GAAG,EAAE,CAAC;;QAG1B,qBAAgB,GAAG,KAAK,CAAC;;;;;QA+PzB,gBAAW,GAAG,CAAC,KAAgD;YACrE,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACvG,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC;;;;;QAMM,kBAAa,GAAG,CAAC,KAA8C;;;YAErE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,CAAA,EAAE;;gBAElD,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE;oBAC1F,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;oBAC/B,OAAO;iBACR;gBAED,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;qBAC/E,MAAM,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;qBAChD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;gBACvB,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;;gBAG9E,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,MAAM,gBAAgB,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;oBAAE,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;aACzK;SACF,CAAC;;;;QAKM,eAAU,GAAG;;YAEnB,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;;YAGtC,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,eAAe,EAAE,CAAC;;YAGvB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;SACpC,CAAC;;;;;QAMM,uBAAkB,GAAG,CAAC,KAAkB;YAC9C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;SACjC,CAAC;;;;;QAMM,iCAA4B,GAAG,CAAC,KAAkB;;YAExD,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC;;YAGrC,IAAI,CAAC,aAAa,EAAE,CAAC;;YAGrB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;gBAEjB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;gBAEtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO;oBACjG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC;iBACzB,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF,CAAC;;;;;QAMM,qBAAgB,GAAG,CAAC,KAAkB;YAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;;YAG5C,YAAY,CAAC,OAAO,CAAC,IAAI;gBACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC;aAC1C,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB,CAAC;;;;QAKM,iBAAY,GAAG;YACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;gBACnC,OAAO,CAAC,CAAC,WAAW,CAAC;gBACrB,OAAO,CAAC,CAAC,YAAY,CAAC;gBACtB,OAAO,CAAC,CAAC,cAAc,CAAC;gBACxB,OAAO,CAAC,CAAC,GAAG,CAAC;gBACb,OAAO,CAAC,CAAC;aACV,CAAC,CAAC;SACJ,CAAC;;;;;QAmBM,oBAAe,GAAG,MACxB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAuB,KAAK,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC;;;;QAKtJ,wBAAmB,GAAG;YAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,IAAIC,EAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAACA,EAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACzH,CAAC;;;;;QAMM,qBAAgB,GAAG,MAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC;;;;QAKlG,kBAAa,GAAG;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;SAC1G,CAAC;;;;QAKM,kBAAa,GAAG;;YAEtB,IAAI,IAAI,CAAC,gBAAgB;gBAAE,OAAO;YAClC,IAAI,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;YAC5C,IAAI,IAAI,CAAC,QAAQ;gBAAE,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;iBACtD,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC;gBAAE,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC;YAEvF,IAAI,CAAC,qBAAqB,GAAG,UAAU,CAAC;SACzC,CAAC;;;;;;QAOM,oBAAe,GAAG,CAAC,YAAY,GAAG,IAAI,EAAE,YAAqB;;YAEnE,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,IAAI,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBAC/B,IAAI,YAAY,KAAK,SAAS;oBAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;qBAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;oBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;aACtF;SACF,CAAC;;;;;QAMM,2BAAsB,GAAG,MAAc,GAAG,IAAI,CAAC,UAAU,mBAAmB,CAAC;;;;;QAM7E,oBAAe,GAAG,OAAuB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;;;;;QAMhH,qBAAgB,GAAG,MAAsB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC;;;;oBAtXlF,IAAI,CAAC,UAAU;;;yBAeV,KAAK;iCAKG,KAAK;wBAKd,KAAK;wBAKL,KAAK;;wBAWL,KAAK;;;;;+BA4Cc,IAAIC,EAAS,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;6BAUhC,EAAE;;2BAoBpB,EAAE;6BAUgB,EAAE;qCAKa,qBAAqB,CAAC,IAAI;;IAnLlF,aAAa,CAAC,QAAkC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,EAAE;YAC7B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,sCACzC,IAAI,KACP,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,KAAK,EAAE,EAClC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC7C,CAAC,CAAC;YACJ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACjC;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,kGAAkG,CAAC,CAAC;SACrH;KACF;IAYD,YAAY,CAAC,QAAiC;QAC5C,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAC/D,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;SAC5E;aAAM,IAAI,QAAQ,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;SAC9B;aAAM;YACL,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,aAAa,QAAQ,CAAC;YAChD,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACpC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;aACrE;;gBAAM,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC/C;KACF;IAwDD,oBAAoB,CAAC,QAAiB,EAAE,SAAkB,EAAE,IAAY;QACtE,IAAI,IAAI,KAAK,UAAU;YAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,KAAK,UAAU,CAAC;YAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9C;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAGD,gBAAgB,CAAC,QAAqC;QACpD,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,aAAa,iBAAiB,CAAC;QACzD,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;;YACtE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAC7C;IAqCD,qBAAqB,CAAC,QAA0C;;QAE9D,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;;QAE/F,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;;QAEtF,IAAI,IAAI,CAAC,kBAAkB;YAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACxD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAYD,mBAAmB;;QAEjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;;;;IA0BD,MAAM,YAAY;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;KACvC;;;;;;;;;IAWD,MAAM,QAAQ,CAAC,KAA+B,EAAE,YAAoB;QAClE,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC5F;aAAM,IAAI,CAACC,EAAa,CAAC,YAAY,CAAC,EAAE;YACvC,MAAM,IAAI,KAAK,CAAC,+EAA+E,CAAC,CAAC;SAClG;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;YAClE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;SACvC;KACF;;;;;IAMO,WAAW,CAAC,QAAkC;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;QAE3B,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,KAAK,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,aAAa,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzJ;;;;;;;IAkHO,mBAAmB,CAAC,GAAW,EAAE,QAAiB,EAAE,SAA2C;QACrG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI;YAC9C,IAAI,CAAC,OAAO,SAAS,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,SAAS,KAAK,SAAS;gBAAE,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;YAC1G,OAAO,IAAI,CAAC;SACb,CAAC,CAAC;KACJ;;;;;;;;IAkFD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;;;QAKnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;;;;QAI3C,OAAO,UAAU,CAAC;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,EAAE,CAAC,CAAC,CAAC;KACP;;;;IAKD,gBAAgB;;QACd,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClF,IAAI,CAAC,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC7G,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACnE;;;;;;IAOO,uBAAuB,CAAC,UAA0B;QACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,IAAI;YACR,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACnC,OAAO,GAAG,CAAC;SACZ,EACD,CAAC,EAAE,EAAE,EAAE,CAAC,CACT,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;QAEF,MAAM,QAAQ,GAAG;4CAEV,WAAW,KACd,WAAW,EAAE,WAAW,CAAC,QAAQ,EACjC,UAAU,EAAE,aAAa,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ;4CAGrD,WAAW,KACd,WAAW,EAAE,WAAW,CAAC,YAAY,EACrC,UAAU,EAAE,gBAAgB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,WAAW;SAE9D,CAAC;QAEF,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,IAAI,mDAAiC,OAAO,qBAAiB,IAAI,CAAC,gBAAgB,EAAE,GAAG,EAAE,OAAO,CAAC,WAAW,IAAgC,CAAC,CAAC;KAC1K;;;;;IAMO,mBAAmB;QACzB,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC;QACxD,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAE1C,QACE,WACE,KAAK,EAAE;gBACL,6BAA6B,EAAE,IAAI;gBACnC,kCAAkC,EAAE,IAAI;gBACxC,+CAA+C,EAAE,IAAI,CAAC,qBAAqB;gBAC3E,+CAA+C,EAAE,IAAI,CAAC,kBAAkB;aACzE,IAED,kBACE,SAAS,EAAE,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,sBAAsB,EAAE,EACzC,OAAO,EAAE,IAAI,CAAC,gBAAgB,sBACZ,IAAI,CAAC,4BAA4B,EACnD,GAAG,EAAE,CAAC,EAAwB;gBAC5B,IAAI,EAAE;oBAAE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aAC7B,IAED,iBAAW,OAAO,EAAC,WAAW,sBAAmB,IAAI,CAAC,QAAQ,IAC5D,eAAS,IAAI,EAAC,MAAM,GAAW,EAC9B,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAC/C,EACZ,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0CAA0C,IACjE,IAAI,CAAC,kBAAkB,IACtB;YACE,qBACE,GAAG,EAAC,cAAc,EAClB,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,eAAe,EAC7C,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAC/C,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EACzC,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,SAAS,EAAE,IAAI,EACf,oBAAoB,EAAE,KAAK,EAC3B,IAAI,EAAC,GAAG,oBACQ,IAAI,CAAC,kBAAkB,mBACzB,2BAA2B,GAC1B;YACjB,SAAG,GAAG,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAAC,EAAE,EAAC,gBAAgB,IACnF,GAAG,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,CACnG;YACJ,WAAK,GAAG,EAAC,oBAAoB,EAAC,KAAK,EAAC,qDAAqD,IACtF,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,CACrC;SACP,KAED,EAAC,mBAAmB,IAClB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,IAAI,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EACtC,EAAE,EAAC,iBAAiB,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GACA,CACxB,EACA,IAAI,CAAC,kBAAkB,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,SAAG,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAK,CACpJ,CACK,EACZ,IAAI,CAAC,qBAAqB,IACzB,gBAAgB,GAAG,CAAC,KAClB,UAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,mDAAmD,IACtE,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MACrC,UAAI,KAAK,EAAC,wCAAwC,EAAC,GAAG,EAAE,KAAK,IAC1D,KAAK,CACH,CACN,CAAC,CACC,CACN,KAED,kBAAS,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,gBAAgB,GAAG,CAAC,GAAG,gBAAgB,GAAG,eAAe,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAU,CAC7I,CACG,EACN;KACH;;;;;IAMD,MAAM;;QACJ,QACE,EAAC,OAAO,IACN,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,kBAAkB,EAAE,EAAE,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACpD,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAC7B,aAAa,EAAE,SAAS,EACxB,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EAClD,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACpD,YAAY,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,EAC5D,UAAU,EAAE,IAAI,IAEf,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,IACxC,EAAC,mBAAmB,IAClB,UAAU,EAAE,IAAI,CAAC,aAAa,EAC9B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EACtC,EAAE,EAAC,iBAAiB,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GACA,KAEvB,IAAI,CAAC,mBAAmB,EAAE,CAC3B,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgInputCheckbox","cleanString","ClassList","isValidString"],"sources":["../styles/dist/components/mg-input-checkbox.css?tag=mg-input-checkbox&encapsulation=shadow","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--search-mode.mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{width:37rem;height:40rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-label{font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__input-checkbox-multi-section-header-tootlip){margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width: 7rem;--mg-card-padding: calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom: 0}/*# sourceMappingURL=mg-input-checkbox.css.map */\n","/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, cleanString, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { CheckboxItem, CheckboxType, CheckboxValue, checkboxTypes, SectionKind, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from './MgInputCheckboxList';\nimport { Handler } from '../MgInput.conf';\n\n/**\n * type CheckboxItem validation function\n * @param items - Checkbox item\n * @returns match item type\n */\nconst isCheckboxItems = (items: unknown): items is CheckboxItem[] =>\n Array.isArray(items) &&\n items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);\n\n@Component({\n tag: 'mg-input-checkbox',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css',\n shadow: true,\n})\nexport class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private mgPopover: HTMLMgPopoverElement;\n private searchInput: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n private mode: 'custom' | 'auto' = 'custom';\n private legendId: string;\n\n // style\n private readonly baseClassName = 'mg-c-input--checkbox';\n\n // \"multi\" setup\n private readonly multiStart = 5;\n private readonly searchStart = 10;\n\n // popover variables\n private hasOpenedPopover = false;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputCheckboxElement;\n\n /**\n * Component value\n * If item.value is `null`, checkbox will be indeterminate by default\n */\n @Prop({ mutable: true }) value!: CheckboxValue[];\n @Watch('value')\n validateValue(newValue: MgInputCheckbox['value']): void {\n if (isCheckboxItems(newValue)) {\n this.checkboxItems = newValue.map((item, index) => ({\n ...item,\n _id: `${this.identifier}_${index}`,\n _handleInput: this.handleInput.bind(this),\n _handleBlur: this.handleBlur.bind(this),\n _handleKeydown: this.handleKeydown.bind(this),\n }));\n this.valueChange.emit(newValue);\n } else {\n throw new Error('<mg-input-checkbox> prop \"value\" is required and all values must be the same type, CheckboxItem.');\n }\n }\n\n /**\n * Define checkbox type\n * When it's undefined the type is dynamic:\n * - With 0-5 items type is 'checkbox'\n * - With 5-10 items type is 'multi'\n * When it set the type is locked to the defined value.\n * When type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n */\n @Prop({ mutable: true }) type: CheckboxType;\n @Watch('type')\n validateType(newValue: MgInputCheckbox['type']): void {\n if (newValue !== undefined && !checkboxTypes.includes(newValue)) {\n throw new Error('<mg-input-checkbox> prop \"type\" must be a CheckboxType.');\n } else if (newValue === undefined) {\n this.mode = 'auto';\n this.type = checkboxTypes[0];\n } else {\n const className = `${this.baseClassName}-multi`;\n if (newValue === 'multi') {\n this.classCollection.add(className);\n this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();\n } else this.classCollection.delete(className);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Define input name\n * If not set the value equals the identifier\n */\n @Prop() name = this.identifier;\n\n /**\n * Define input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if inputs are display verticaly\n */\n @Prop() inputVerticalList = false;\n\n /**\n * Define if mg-input-checkbox is required\n */\n @Prop() required = false;\n\n /**\n * Define if mg-input-checkbox is readonly\n */\n @Prop() readonly = false;\n\n /**\n * Display selected values list in \"multi\" type\n * This prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n */\n @Prop() displaySelectedValues: boolean;\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (prop !== 'readonly') this.updateCheckboxItems(prop, newValue);\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.hasDisplayedError = prop !== 'required';\n this.setErrorMessage(this.hasDisplayedError);\n }\n this.setButtonText();\n }\n\n @Watch('disabled')\n validateDisabled(newValue: MgInputCheckbox['disabled']): void {\n const className = `${this.baseClassName}-multi-disabled`;\n if (newValue && this.type === 'multi') this.classCollection.add(className);\n else this.classCollection.delete(className);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList([this.baseClassName]);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated value to display in list\n */\n @State() checkboxItems: CheckboxItem[] = [];\n @Watch('checkboxItems')\n validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void {\n // For the 'auto' mode we update the type depending on the new value's length.\n if (this.mode === 'auto') this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';\n // If the type is multi and the new value's length is greater than the search gauge, display the search input.\n this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;\n // refresh search values\n if (this.displaySearchInput) this.updateSearchResults();\n this.setButtonText();\n }\n\n /**\n * Display search input\n */\n @State() displaySearchInput: boolean;\n\n /**\n * Search value query\n */\n @State() searchValue = '';\n @Watch('searchValue')\n validateSearchValue(): void {\n // refresh search values\n this.updateSearchResults();\n }\n\n /**\n * Search current page\n */\n @State() searchResults: CheckboxItem[] = [];\n\n /**\n * Select values button text local key\n */\n @State() selectValuesButtonKey: SelectValuesButtonKey = SelectValuesButtonKey.EDIT;\n\n /**\n * Emitted event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-checkbox> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-checkbox> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(undefined, valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputCheckbox['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n * @param event - input event\n */\n private handleInput = (event: InputEvent & { target: HTMLInputElement }): void => {\n this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);\n this.updateValues();\n this.checkValidity();\n };\n\n /**\n * Keyboard handler\n * @param event - to track \"tab\" key\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n // track \"Tab\" key event when popover display (is \"multi\" type selected)\n if (event.key === 'Tab' && this.mgPopover?.display) {\n // when search input and do a back tab we close the popover\n if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {\n this.mgPopover.display = false;\n return;\n }\n\n const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))\n .filter(input => !input.getAttribute('disabled'))\n .map(({ id }) => id);\n const originInputIndex = enableInputs.findIndex(id => id === event.target.id);\n\n // close popover when tab trigger focus outside its DOM\n if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && !this.searchInput)) this.mgPopover.display = false;\n }\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n // set guard\n this.handlerInProgress = Handler.BLUR;\n\n // Check validity\n this.checkValidity();\n this.setErrorMessage();\n\n // reset guard\n this.handlerInProgress = undefined;\n };\n\n /**\n * Handle input search value-change event\n * @param event - input value-change event\n */\n private handleSearchChange = (event: CustomEvent): void => {\n this.searchValue = event.detail;\n };\n\n /**\n * popover display-change handler\n * @param event - mg-popover display-change custom event\n */\n private handleMgPopoverDisplayChange = (event: CustomEvent): void => {\n // 1. update hasOpenedPopover guard with event value\n this.hasOpenedPopover = event.detail;\n\n // 2. update selected valued button text\n this.setButtonText();\n\n // 3. when popover display change to hide, update reset needeed props and run checkValidity\n if (!event.detail) {\n // reset search value\n this.searchValue = '';\n // reset pagintated section current page\n Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {\n element.currentPage = 1;\n });\n this.checkValidity();\n }\n };\n\n /**\n * Handle select all button\n * @param event - mass action event trigger a global select/unselect on values\n */\n private handleMassAction = (event: CustomEvent): void => {\n const displayItems = this.getDisplayItems();\n\n // update only displayed items\n displayItems.forEach(item => {\n item.value = event.detail !== 'selected';\n });\n this.updateValues();\n };\n\n /**\n * Update values\n */\n private updateValues = (): void => {\n this.value = this.checkboxItems.map(o => {\n delete o._handleBlur;\n delete o._handleInput;\n delete o._handleKeydown;\n delete o._id;\n return o;\n });\n };\n\n /**\n * Update ckecboxes item\n * @param key - property to update\n * @param newValue - value to update with\n * @param condition - condtion to applu change on item\n */\n private updateCheckboxItems(key: string, newValue: unknown, condition?: (item: CheckboxItem) => boolean): void {\n this.checkboxItems = this.checkboxItems.map(item => {\n if ((typeof condition === 'function' && condition(item)) || condition === undefined) item[key] = newValue;\n return item;\n });\n }\n\n /**\n * has invalid input\n * @returns true if at least one input is invalid\n */\n private hasInvalidInput = (): boolean =>\n Array.from(this.element.shadowRoot.querySelectorAll('input[type=\"checkbox\"]')).some((input: HTMLInputElement) => !input.disabled && !input.checkValidity());\n\n /**\n * Method to update searchResults\n */\n private updateSearchResults = (): void => {\n this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));\n };\n\n /**\n * Methode to validate if one of inputs value is checked id required\n * @returns truthy if condition is valid\n */\n private validateRequired = (): boolean => !this.required || this.checkboxItems.some(({ value }) => value);\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));\n };\n\n /**\n * Set button text locale key\n */\n private setButtonText = (): void => {\n // prevent key update while popover is openned\n if (this.hasOpenedPopover) return;\n let messageKey = SelectValuesButtonKey.EDIT;\n if (this.disabled) messageKey = SelectValuesButtonKey.SHOW;\n else if (this.getSelectedItems().length < 1) messageKey = SelectValuesButtonKey.SELECT;\n\n this.selectValuesButtonKey = messageKey;\n };\n\n /**\n * Set input error message\n * @param displayError - dispay error condition\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (displayError = true, errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (displayError && !this.valid) {\n if (errorMessage !== undefined) this.errorMessage = errorMessage;\n else if (!this.validateRequired()) this.errorMessage = this.messages.errors.required;\n }\n };\n\n /**\n * Method to get mg-popover identifier\n * @returns MgPopover identifier\n */\n private getMgPopoverIdentifier = (): string => `${this.identifier}-input-mg-popover`;\n\n /**\n * Manage items to display depending on the search state\n * @returns items to display\n */\n private getDisplayItems = (): CheckboxItem[] => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);\n\n /**\n * get list of selected checkboxItems\n * @returns selected checkboxItems\n */\n private getSelectedItems = (): CheckboxItem[] => this.checkboxItems.filter(({ value }) => value);\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // Validate\n // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type\n // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.\n this.validateType(this.type);\n this.validateValue(this.value);\n this.validateDisabled(this.disabled);\n this.legendId = `${this.identifier}-title`;\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * add listeners and DOM attributed\n */\n componentDidLoad(): void {\n this.element.shadowRoot.querySelector('legend').setAttribute('id', this.legendId);\n this.searchInput = this.element.shadowRoot.querySelector('mg-input-text')?.shadowRoot.querySelector('input');\n this.searchInput?.addEventListener('keydown', this.handleKeydown);\n }\n\n /**\n * Render checkboxes by section\n * @param checkboxes - checkboxes to render\n * @returns render sections of checkboxes\n */\n private renderCheckboxBySection(checkboxes: CheckboxItem[]): HTMLElement[] {\n const [checkedValues, notCheckedValues] = checkboxes.reduce(\n (acc, curr) => {\n acc[curr.value ? 0 : 1].push(curr);\n return acc;\n },\n [[], []],\n );\n\n const baseSection = {\n readonly: this.readonly,\n disabled: this.disabled,\n identifier: this.identifier,\n };\n\n const sections = [\n {\n ...baseSection,\n sectionKind: SectionKind.SELECTED,\n checkboxes: checkedValues,\n messages: this.messages.input.checkbox.sections.selected,\n },\n {\n ...baseSection,\n sectionKind: SectionKind.NOT_SELECTED,\n checkboxes: notCheckedValues,\n messages: this.messages.input.checkbox.sections.notSelected,\n },\n ];\n\n return sections.map(section => <mg-input-checkbox-paginated {...section} onMass-action={this.handleMassAction} key={section.sectionKind}></mg-input-checkbox-paginated>);\n }\n\n /**\n * render checkbox multi element\n * @returns html element\n */\n private renderCheckboxMulti(): HTMLElement[] {\n const selectedValuesNb = this.getSelectedItems().length;\n const checkboxes = this.getDisplayItems();\n\n return (\n <div\n class={{\n 'mg-c-input__input-container': true,\n 'mg-c-input__input-checkbox-multi': true,\n 'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues,\n 'mg-c-input__input-checkbox-multi--search-mode': this.displaySearchInput,\n }}\n >\n <mg-popover\n arrowHide={true}\n identifier={this.getMgPopoverIdentifier()}\n display={this.hasOpenedPopover}\n onDisplay-change={this.handleMgPopoverDisplayChange}\n ref={(el: HTMLMgPopoverElement) => {\n if (el) this.mgPopover = el;\n }}\n >\n <mg-button variant=\"secondary\" aria-describedby={this.legendId}>\n <mg-icon icon=\"list\"></mg-icon>\n {this.messages.input.checkbox[this.selectValuesButtonKey]}\n </mg-button>\n <div slot=\"content\" class=\"mg-c-input__input-checkbox-multi-content\">\n {this.displaySearchInput ? (\n [\n <mg-input-text\n key=\"input-search\"\n identifier={`${this.identifier}-input-search`}\n icon=\"magnifying-glass\"\n type=\"search\"\n placeholder={this.messages.input.checkbox.label}\n label={this.messages.input.checkbox.label}\n mgWidth=\"full\"\n value={this.searchValue}\n labelHide={true}\n displayCharacterLeft={false}\n name=\"q\"\n onValue-change={this.handleSearchChange}\n aria-controls=\"search-results items-list\"\n ></mg-input-text>,\n <p key=\"search-results\" role=\"status\" class=\"mg-u-visually-hidden\" id=\"search-results\">\n {`${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`}\n </p>,\n <div key=\"sections-container\" class=\"mg-c-input__input-checkbox-multi-sections-container\">\n {this.renderCheckboxBySection(checkboxes)}\n </div>,\n ]\n ) : (\n <MgInputCheckboxList\n checkboxes={checkboxes}\n inputVerticalList={true}\n type={this.type}\n readonly={this.readonly}\n displaySearchInput={this.displaySearchInput}\n messages={this.messages.input.checkbox}\n id=\"checkboxes-list\"\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n )}\n {this.displaySearchInput && checkboxes.length === 0 && <p class=\"mg-c-input__input-checkbox-multi-no-result\">{this.messages.input.checkbox.noResult}</p>}\n </div>\n </mg-popover>\n {this.displaySelectedValues ? (\n selectedValuesNb > 0 && (\n <ul role=\"list\" class=\"mg-c-input__input-checkbox-multi-values-container\">\n {this.getSelectedItems().map(({ title }) => (\n <li class=\"mg-c-input__input-checkbox-multi-value\" key={title}>\n {title}\n </li>\n ))}\n </ul>\n )\n ) : (\n <strong>{this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)}</strong>\n )}\n </div>\n );\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={!this.readonly ? this.required : undefined} // required is only used display asterisk\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value?.toString()}\n readonlyValue={undefined}\n tooltip={!this.readonly ? this.tooltip : undefined}\n helpText={!this.readonly ? this.helpText : undefined}\n errorMessage={!this.readonly ? this.errorMessage : undefined}\n isFieldset={true}\n >\n {this.type === 'checkbox' || this.readonly ? (\n <MgInputCheckboxList\n checkboxes={this.checkboxItems}\n inputVerticalList={this.inputVerticalList}\n type={this.type}\n readonly={this.readonly}\n displaySearchInput={this.displaySearchInput}\n messages={this.messages.input.checkbox}\n id=\"checkboxes-list\"\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n ) : (\n this.renderCheckboxMulti()\n )}\n </MgInput>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-input-checkbox.js","mappings":"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","names":["MgInputCheckbox","cleanString","ClassList","isValidString"],"sources":["../styles/dist/components/mg-input-checkbox.css?tag=mg-input-checkbox&encapsulation=shadow","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--search-mode.mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{width:37rem;height:40rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-label{font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__input-checkbox-multi-section-header-tootlip){margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width: 7rem;--mg-card-padding: calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom: 0}/*# sourceMappingURL=mg-input-checkbox.css.map */\n","/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, cleanString, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { CheckboxItem, CheckboxType, CheckboxValue, checkboxTypes, SectionKind, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from './MgInputCheckboxList';\nimport { Handler } from '../MgInput.conf';\n\n/**\n * type CheckboxItem validation function\n * @param items - Checkbox item\n * @returns match item type\n */\nconst isCheckboxItems = (items: unknown): items is CheckboxItem[] =>\n Array.isArray(items) &&\n items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);\n\n@Component({\n tag: 'mg-input-checkbox',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-checkbox.css',\n shadow: true,\n})\nexport class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private mgPopover: HTMLMgPopoverElement;\n private searchInput: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n private mode: 'custom' | 'auto' = 'custom';\n private legendId: string;\n\n // style\n private readonly baseClassName = 'mg-c-input--checkbox';\n\n // \"multi\" setup\n private readonly multiStart = 5;\n private readonly searchStart = 10;\n\n // popover variables\n private hasOpenedPopover = false;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputCheckboxElement;\n\n /**\n * Component value\n * If item.value is `null`, checkbox will be indeterminate by default\n */\n @Prop({ mutable: true }) value!: CheckboxValue[];\n @Watch('value')\n validateValue(newValue: MgInputCheckbox['value']): void {\n if (isCheckboxItems(newValue)) {\n this.checkboxItems = newValue.map((item, index) => ({\n ...item,\n _id: `${this.identifier}_${index}`,\n _handleInput: this.handleInput.bind(this),\n _handleBlur: this.handleBlur.bind(this),\n _handleKeydown: this.handleKeydown.bind(this),\n }));\n this.valueChange.emit(newValue);\n } else {\n throw new Error('<mg-input-checkbox> prop \"value\" is required and all values must be the same type, CheckboxItem.');\n }\n }\n\n /**\n * Define checkbox type\n * When it's undefined the type is dynamic:\n * - With 0-5 items type is 'checkbox'\n * - With 5-10 items type is 'multi'\n * When it set the type is locked to the defined value.\n * When type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n */\n @Prop({ mutable: true }) type: CheckboxType;\n @Watch('type')\n validateType(newValue: MgInputCheckbox['type']): void {\n if (newValue !== undefined && !checkboxTypes.includes(newValue)) {\n throw new Error('<mg-input-checkbox> prop \"type\" must be a CheckboxType.');\n } else if (newValue === undefined) {\n this.mode = 'auto';\n this.type = checkboxTypes[0];\n } else {\n const className = `${this.baseClassName}-multi`;\n if (newValue === 'multi') {\n this.classCollection.add(className);\n this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();\n } else this.classCollection.delete(className);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Define input name\n * If not set the value equals the identifier\n */\n @Prop() name = this.identifier;\n\n /**\n * Define input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if inputs are display verticaly\n */\n @Prop() inputVerticalList = false;\n\n /**\n * Define if mg-input-checkbox is required\n */\n @Prop() required = false;\n\n /**\n * Define if mg-input-checkbox is readonly\n */\n @Prop() readonly = false;\n\n /**\n * Display selected values list in \"multi\" type\n * This prop is only applied with prop type \"multi\" or when an \"unset\" mode render a \"multi\" type.\n */\n @Prop() displaySelectedValues: boolean;\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (prop !== 'readonly') this.updateCheckboxItems(prop, newValue);\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.hasDisplayedError = prop !== 'required';\n this.setErrorMessage(this.hasDisplayedError);\n }\n this.setButtonText();\n }\n\n @Watch('disabled')\n validateDisabled(newValue: MgInputCheckbox['disabled']): void {\n const className = `${this.baseClassName}-multi-disabled`;\n if (newValue && this.type === 'multi') this.classCollection.add(className);\n else this.classCollection.delete(className);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList([this.baseClassName]);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated value to display in list\n */\n @State() checkboxItems: CheckboxItem[] = [];\n @Watch('checkboxItems')\n validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void {\n // For the 'auto' mode we update the type depending on the new value's length.\n if (this.mode === 'auto') this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';\n // If the type is multi and the new value's length is greater than the search gauge, display the search input.\n this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;\n // refresh search values\n if (this.displaySearchInput) this.updateSearchResults();\n this.setButtonText();\n }\n\n /**\n * Display search input\n */\n @State() displaySearchInput: boolean;\n\n /**\n * Search value query\n */\n @State() searchValue = '';\n @Watch('searchValue')\n validateSearchValue(): void {\n // refresh search values\n this.updateSearchResults();\n }\n\n /**\n * Search current page\n */\n @State() searchResults: CheckboxItem[] = [];\n\n /**\n * Select values button text local key\n */\n @State() selectValuesButtonKey: SelectValuesButtonKey = SelectValuesButtonKey.EDIT;\n\n /**\n * Emitted event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputCheckboxElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputCheckboxElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-checkbox> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-checkbox> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(undefined, valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputCheckbox['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n * @param event - input event\n */\n private handleInput = (event: InputEvent & { target: HTMLInputElement }): void => {\n this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);\n this.updateValues();\n this.checkValidity();\n };\n\n /**\n * Keyboard handler\n * @param event - to track \"tab\" key\n */\n private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n // track \"Tab\" key event when popover display (is \"multi\" type selected)\n if (event.key === 'Tab' && this.mgPopover?.display) {\n // when search input and do a back tab we close the popover\n if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {\n this.mgPopover.display = false;\n return;\n }\n\n const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))\n .filter(input => !input.getAttribute('disabled'))\n .map(({ id }) => id);\n const originInputIndex = enableInputs.findIndex(id => id === event.target.id);\n\n // close popover when tab trigger focus outside its DOM\n if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && !this.searchInput)) this.mgPopover.display = false;\n }\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n // set guard\n this.handlerInProgress = Handler.BLUR;\n\n // Check validity\n this.checkValidity();\n this.setErrorMessage();\n\n // reset guard\n this.handlerInProgress = undefined;\n };\n\n /**\n * Handle input search value-change event\n * @param event - input value-change event\n */\n private handleSearchChange = (event: CustomEvent): void => {\n this.searchValue = event.detail;\n };\n\n /**\n * popover display-change handler\n * @param event - mg-popover display-change custom event\n */\n private handleMgPopoverDisplayChange = (event: CustomEvent): void => {\n // 1. update hasOpenedPopover guard with event value\n this.hasOpenedPopover = event.detail;\n\n // 2. update selected valued button text\n this.setButtonText();\n\n // 3. when popover display change to hide, update reset needeed props and run checkValidity\n if (!event.detail) {\n // reset search value\n this.searchValue = '';\n // reset pagintated section current page\n Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(element => {\n element.currentPage = 1;\n });\n this.checkValidity();\n }\n };\n\n /**\n * Handle select all button\n * @param event - mass action event trigger a global select/unselect on values\n */\n private handleMassAction = (event: CustomEvent): void => {\n const displayItems = this.getDisplayItems();\n\n // update only displayed items\n displayItems.forEach(item => {\n item.value = event.detail !== 'selected';\n });\n this.updateValues();\n };\n\n /**\n * Update values\n */\n private updateValues = (): void => {\n this.value = this.checkboxItems.map(o => {\n delete o._handleBlur;\n delete o._handleInput;\n delete o._handleKeydown;\n delete o._id;\n return o;\n });\n };\n\n /**\n * Update ckecboxes item\n * @param key - property to update\n * @param newValue - value to update with\n * @param condition - condtion to applu change on item\n */\n private updateCheckboxItems(key: string, newValue: unknown, condition?: (item: CheckboxItem) => boolean): void {\n this.checkboxItems = this.checkboxItems.map(item => {\n if ((typeof condition === 'function' && condition(item)) || condition === undefined) item[key] = newValue;\n return item;\n });\n }\n\n /**\n * has invalid input\n * @returns true if at least one input is invalid\n */\n private hasInvalidInput = (): boolean =>\n Array.from(this.element.shadowRoot.querySelectorAll('input[type=\"checkbox\"]')).some((input: HTMLInputElement) => !input.disabled && !input.checkValidity());\n\n /**\n * Method to update searchResults\n */\n private updateSearchResults = (): void => {\n this.searchResults = this.checkboxItems.filter(item => cleanString(item.title).includes(cleanString(this.searchValue)));\n };\n\n /**\n * Methode to validate if one of inputs value is checked id required\n * @returns truthy if condition is valid\n */\n private validateRequired = (): boolean => !this.required || this.checkboxItems.some(({ value }) => value);\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));\n };\n\n /**\n * Set button text locale key\n */\n private setButtonText = (): void => {\n // prevent key update while popover is openned\n if (this.hasOpenedPopover) return;\n let messageKey = SelectValuesButtonKey.EDIT;\n if (this.disabled) messageKey = SelectValuesButtonKey.SHOW;\n else if (this.getSelectedItems().length < 1) messageKey = SelectValuesButtonKey.SELECT;\n\n this.selectValuesButtonKey = messageKey;\n };\n\n /**\n * Set input error message\n * @param displayError - dispay error condition\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (displayError = true, errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (displayError && !this.valid) {\n if (errorMessage !== undefined) this.errorMessage = errorMessage;\n else if (!this.validateRequired()) this.errorMessage = this.messages.errors.required;\n }\n };\n\n /**\n * Method to get mg-popover identifier\n * @returns MgPopover identifier\n */\n private getMgPopoverIdentifier = (): string => `${this.identifier}-input-mg-popover`;\n\n /**\n * Manage items to display depending on the search state\n * @returns items to display\n */\n private getDisplayItems = (): CheckboxItem[] => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);\n\n /**\n * get list of selected checkboxItems\n * @returns selected checkboxItems\n */\n private getSelectedItems = (): CheckboxItem[] => this.checkboxItems.filter(({ value }) => value);\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // Validate\n // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type\n // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.\n this.validateType(this.type);\n this.validateValue(this.value);\n this.validateDisabled(this.disabled);\n this.legendId = `${this.identifier}-title`;\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * add listeners and DOM attributed\n */\n componentDidLoad(): void {\n this.element.shadowRoot.querySelector('legend').setAttribute('id', this.legendId);\n this.searchInput = this.element.shadowRoot.querySelector('mg-input-text')?.shadowRoot.querySelector('input');\n this.searchInput?.addEventListener('keydown', this.handleKeydown);\n }\n\n /**\n * Render checkboxes by section\n * @param checkboxes - checkboxes to render\n * @returns render sections of checkboxes\n */\n private renderCheckboxBySection(checkboxes: CheckboxItem[]): HTMLElement[] {\n const [checkedValues, notCheckedValues] = checkboxes.reduce(\n (acc, curr) => {\n acc[curr.value ? 0 : 1].push(curr);\n return acc;\n },\n [[], []],\n );\n\n const baseSection = {\n readonly: this.readonly,\n disabled: this.disabled,\n identifier: this.identifier,\n };\n\n const sections = [\n {\n ...baseSection,\n sectionKind: SectionKind.SELECTED,\n checkboxes: checkedValues,\n messages: this.messages.input.checkbox.sections.selected,\n },\n {\n ...baseSection,\n sectionKind: SectionKind.NOT_SELECTED,\n checkboxes: notCheckedValues,\n messages: this.messages.input.checkbox.sections.notSelected,\n },\n ];\n\n return sections.map(section => <mg-input-checkbox-paginated {...section} onMass-action={this.handleMassAction} key={section.sectionKind}></mg-input-checkbox-paginated>);\n }\n\n /**\n * render checkbox multi element\n * @returns html element\n */\n private renderCheckboxMulti(): HTMLElement[] {\n const selectedValuesNb = this.getSelectedItems().length;\n const checkboxes = this.getDisplayItems();\n\n return (\n <div\n class={{\n 'mg-c-input__input-container': true,\n 'mg-c-input__input-checkbox-multi': true,\n 'mg-c-input__input-checkbox-multi--with-values': this.displaySelectedValues,\n 'mg-c-input__input-checkbox-multi--search-mode': this.displaySearchInput,\n }}\n >\n <mg-popover\n arrowHide={true}\n identifier={this.getMgPopoverIdentifier()}\n display={this.hasOpenedPopover}\n onDisplay-change={this.handleMgPopoverDisplayChange}\n ref={(el: HTMLMgPopoverElement) => {\n if (el) this.mgPopover = el;\n }}\n >\n <mg-button variant=\"secondary\" aria-describedby={this.legendId}>\n <mg-icon icon=\"list\"></mg-icon>\n {this.messages.input.checkbox[this.selectValuesButtonKey]}\n </mg-button>\n <div slot=\"content\" class=\"mg-c-input__input-checkbox-multi-content\">\n {this.displaySearchInput ? (\n [\n <mg-input-text\n key=\"input-search\"\n identifier={`${this.identifier}-input-search`}\n icon=\"magnifying-glass\"\n type=\"search\"\n placeholder={this.messages.input.checkbox.label}\n label={this.messages.input.checkbox.label}\n mgWidth=\"full\"\n value={this.searchValue}\n labelHide={true}\n displayCharacterLeft={false}\n name=\"q\"\n onValue-change={this.handleSearchChange}\n aria-controls=\"search-results items-list\"\n ></mg-input-text>,\n <p key=\"search-results\" role=\"status\" class=\"mg-u-visually-hidden\" id=\"search-results\">\n {`${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`}\n </p>,\n <div key=\"sections-container\" class=\"mg-c-input__input-checkbox-multi-sections-container\">\n {this.renderCheckboxBySection(checkboxes)}\n </div>,\n ]\n ) : (\n <MgInputCheckboxList\n checkboxes={checkboxes}\n inputVerticalList={true}\n type={this.type}\n readonly={this.readonly}\n displaySearchInput={this.displaySearchInput}\n messages={this.messages.input.checkbox}\n id=\"checkboxes-list\"\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n )}\n {this.displaySearchInput && checkboxes.length === 0 && <p class=\"mg-c-input__input-checkbox-multi-no-result\">{this.messages.input.checkbox.noResult}</p>}\n </div>\n </mg-popover>\n {this.displaySelectedValues ? (\n selectedValuesNb > 0 && (\n <ul role=\"list\" class=\"mg-c-input__input-checkbox-multi-values-container\">\n {this.getSelectedItems().map(({ title }) => (\n <li class=\"mg-c-input__input-checkbox-multi-value\" key={title}>\n {title}\n </li>\n ))}\n </ul>\n )\n ) : (\n <strong>{this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)}</strong>\n )}\n </div>\n );\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={!this.readonly ? this.required : undefined} // required is only used display asterisk\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value?.toString()}\n readonlyValue={undefined}\n tooltip={!this.readonly ? this.tooltip : undefined}\n helpText={!this.readonly ? this.helpText : undefined}\n errorMessage={!this.readonly ? this.errorMessage : undefined}\n isFieldset={true}\n >\n {this.type === 'checkbox' || this.readonly ? (\n <MgInputCheckboxList\n checkboxes={this.checkboxItems}\n inputVerticalList={this.inputVerticalList}\n type={this.type}\n readonly={this.readonly}\n displaySearchInput={this.displaySearchInput}\n messages={this.messages.input.checkbox}\n id=\"checkboxes-list\"\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n ) : (\n this.renderCheckboxMulti()\n )}\n </MgInput>\n );\n }\n}\n"],"version":3}
|
|
@@ -250,7 +250,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
|
|
|
250
250
|
* @returns HTML Element
|
|
251
251
|
*/
|
|
252
252
|
render() {
|
|
253
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: be(this.value, this.locale), tooltip: this.tooltip, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
253
|
+
return (h(MgInput, { key: 'df122ee015066947069fa0d33125646ec1996c61', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: be(this.value, this.locale), tooltip: this.tooltip, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, h("input", { key: '27f23c33b27978c0fca6dc7ee9996f6fc1163c72', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
254
254
|
if (el !== null)
|
|
255
255
|
this.input = el;
|
|
256
256
|
} })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-input-date.js","mappings":"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","names":["MgInputDate","isValidString","localeDate","dateToString","getLocaleDatePattern","ClassList","dateRegExp"],"sources":["src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts","../styles/dist/components/mg-input-date.css?tag=mg-input-date&encapsulation=shadow","src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"sourcesContent":["export enum InputError {\n MIN = 'min',\n MAX = 'max',\n MINMAX = 'minMax',\n REQUIRED = 'required',\n}\n",":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*# sourceMappingURL=mg-input-date.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Handler } from '../MgInput.conf';\n\n@Component({\n tag: 'mg-input-date',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n shadow: true,\n})\nexport class MgInputDate {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n private locale: string;\n private systemLocale: string;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputDateElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputDate['value']): void {\n // When the input is not fully completed or has been cleared, the value becomes an empty string.\n if (newValue === '') newValue = null;\n if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {\n throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n } else {\n this.valueChange.emit(newValue);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n\n /**\n * Define input minimum date\n * format: yyyy-mm-dd\n */\n @Prop() min: string;\n\n /**\n * Define input maximum date\n * format: yyyy-mm-dd\n */\n @Prop() max: string;\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue?.length === 0 || (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n }\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Add a help text under the input, usually expected data format and example\n * Available string variables:\n * - `{pattern}`: render innerHTML pattern based on system\n * - `{date}`: render innerText date with a pattern base format.\n * - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n */\n @Prop() helpText: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--date']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputDateElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-date> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Format help text to display\n * @param helpText - help text format\n * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n */\n private formatHelpText = (helpText: string): string => {\n const defaultHelpTextVariable = '{defaultHelpText}';\n let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n };\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputDate['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\n };\n\n /**\n * get input error code\n * @returns error code\n */\n private getInputError = (): null | InputError => {\n let inputError = null;\n\n // required\n if (this.input.validity.valueMissing) {\n inputError = InputError.REQUIRED;\n }\n // min & max\n else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\n inputError = InputError.MINMAX;\n }\n // min\n else if (this.input.validity.rangeUnderflow) {\n inputError = InputError.MIN;\n }\n //max\n else if (this.input.validity.rangeOverflow) {\n inputError = InputError.MAX;\n }\n\n return inputError;\n };\n\n /**\n * Check input errors\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n const inputError = this.getInputError();\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (inputError === InputError.REQUIRED) {\n this.errorMessage = this.messages.errors[inputError];\n }\n // min, max & minMax\n else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n this.errorMessage = this.messages.errors.date[inputError]\n .replace('{min}', localeDate(this.min, this.systemLocale))\n .replace('{max}', localeDate(this.max, this.systemLocale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput\n .replace('{min}', this.min?.length > 0 ? localeDate(this.min, this.systemLocale) : localeDate('1900-01-01', this.systemLocale))\n .replace('{pattern}', this.renderPattern());\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n const locales = initLocales(this.element);\n this.locale = locales.locale;\n this.messages = locales.messages;\n\n // as a native input use the OS locale to define the date pattern\n // we need to get this locale to define the displayed pattern\n this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render pattern\n * @returns translated html pattern\n */\n private renderPattern = (): string => {\n let patternLocal = getLocaleDatePattern(this.systemLocale);\n for (const key in this.messages.input.date.pattern) {\n patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n }\n\n return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\n };\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={localeDate(this.value, this.locale)}\n tooltip={this.tooltip}\n helpText={this.formatHelpText(this.helpText)}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"date\"\n class=\"mg-c-input__box\"\n min={this.min}\n max={this.max}\n value={this.value}\n id={this.identifier}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-input-date.js","mappings":"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","names":["MgInputDate","isValidString","localeDate","dateToString","getLocaleDatePattern","ClassList","dateRegExp"],"sources":["src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts","../styles/dist/components/mg-input-date.css?tag=mg-input-date&encapsulation=shadow","src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"sourcesContent":["export enum InputError {\n MIN = 'min',\n MAX = 'max',\n MINMAX = 'minMax',\n REQUIRED = 'required',\n}\n",":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*# sourceMappingURL=mg-input-date.css.map */\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Handler } from '../MgInput.conf';\n\n@Component({\n tag: 'mg-input-date',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n shadow: true,\n})\nexport class MgInputDate {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n private locale: string;\n private systemLocale: string;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputDateElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputDate['value']): void {\n // When the input is not fully completed or has been cleared, the value becomes an empty string.\n if (newValue === '') newValue = null;\n if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {\n throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n } else {\n this.valueChange.emit(newValue);\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if input is required\n */\n @Prop() required = false;\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n\n /**\n * Define input minimum date\n * format: yyyy-mm-dd\n */\n @Prop() min: string;\n\n /**\n * Define input maximum date\n * format: yyyy-mm-dd\n */\n @Prop() max: string;\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue?.length === 0 || (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n }\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Add a help text under the input, usually expected data format and example\n * Available string variables:\n * - `{pattern}`: render innerHTML pattern based on system\n * - `{date}`: render innerText date with a pattern base format.\n * - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n */\n @Prop() helpText: string;\n\n /**\n * Define input valid state\n */\n @Prop({ mutable: true }) valid: boolean;\n\n /**\n * Define input invalid state\n */\n @Prop({ mutable: true }) invalid: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--date']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputDateElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\n\n /**\n * Display input error if it exists.\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-date> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /**\n * Format help text to display\n * @param helpText - help text format\n * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n */\n private formatHelpText = (helpText: string): string => {\n const defaultHelpTextVariable = '{defaultHelpText}';\n let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n };\n\n /**\n * Method to set validity values\n * @param newValue - valid new value\n */\n private setValidity(newValue: MgInputDate['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\n };\n\n /**\n * get input error code\n * @returns error code\n */\n private getInputError = (): null | InputError => {\n let inputError = null;\n\n // required\n if (this.input.validity.valueMissing) {\n inputError = InputError.REQUIRED;\n }\n // min & max\n else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\n inputError = InputError.MINMAX;\n }\n // min\n else if (this.input.validity.rangeUnderflow) {\n inputError = InputError.MIN;\n }\n //max\n else if (this.input.validity.rangeOverflow) {\n inputError = InputError.MAX;\n }\n\n return inputError;\n };\n\n /**\n * Check input errors\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n const inputError = this.getInputError();\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (inputError === InputError.REQUIRED) {\n this.errorMessage = this.messages.errors[inputError];\n }\n // min, max & minMax\n else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n this.errorMessage = this.messages.errors.date[inputError]\n .replace('{min}', localeDate(this.min, this.systemLocale))\n .replace('{max}', localeDate(this.max, this.systemLocale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput\n .replace('{min}', this.min?.length > 0 ? localeDate(this.min, this.systemLocale) : localeDate('1900-01-01', this.systemLocale))\n .replace('{pattern}', this.renderPattern());\n }\n }\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n * @returns timeout\n */\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n const locales = initLocales(this.element);\n this.locale = locales.locale;\n this.messages = locales.messages;\n\n // as a native input use the OS locale to define the date pattern\n // we need to get this locale to define the displayed pattern\n this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /**\n * Render pattern\n * @returns translated html pattern\n */\n private renderPattern = (): string => {\n let patternLocal = getLocaleDatePattern(this.systemLocale);\n for (const key in this.messages.input.date.pattern) {\n patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n }\n\n return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\n };\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={localeDate(this.value, this.locale)}\n tooltip={this.tooltip}\n helpText={this.formatHelpText(this.helpText)}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"date\"\n class=\"mg-c-input__box\"\n min={this.min}\n max={this.max}\n value={this.value}\n id={this.identifier}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\n );\n }\n}\n"],"version":3}
|
|
@@ -310,10 +310,10 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
|
|
|
310
310
|
* @returns HTML Element
|
|
311
311
|
*/
|
|
312
312
|
render() {
|
|
313
|
-
return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
313
|
+
return (h(MgInput, { key: 'ea7d502132b6ccefcf4a1ff46fda06373f0b82ae', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { key: 'ff9d44dfef430d97d0e9366a8014bc7cac9a34c9', type: "text", class: "mg-c-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
314
314
|
if (el !== null)
|
|
315
315
|
this.input = el;
|
|
316
|
-
} }), h("slot", { name: "append-input" })));
|
|
316
|
+
} }), h("slot", { key: '58e457b44ba4e81261d125afcd906225322e3c48', name: "append-input" })));
|
|
317
317
|
}
|
|
318
318
|
get element() { return this; }
|
|
319
319
|
static get watchers() { return {
|