wcs-core 2.9.0 → 2.10.0
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/CHANGELOG.md +11 -2
- package/dist/cjs/wcs-error_2.cjs.entry.js +6 -9
- package/dist/collection/components/form-field/form-field.js +6 -9
- package/dist/esm/wcs-error_2.entry.js +6 -9
- package/dist/wcs/p-bcf381a2.entry.js +1 -0
- package/dist/wcs/wcs.esm.js +1 -1
- package/package.json +1 -1
- package/dist/wcs/p-08a7e84d.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -31,6 +31,16 @@ for any bug fixes.
|
|
|
31
31
|
|
|
32
32
|
in case of vulnerabilities.
|
|
33
33
|
|
|
34
|
+
## [2.10.0] - 2022-02-04
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- **formly**: add styling support for `form-field` child elements
|
|
39
|
+
|
|
40
|
+
### Fixed
|
|
41
|
+
|
|
42
|
+
- **form-field**: fix random infinite loop when wcs-label is considered as form field input
|
|
43
|
+
|
|
34
44
|
## [2.9.0] - 2022-02-03
|
|
35
45
|
|
|
36
46
|
### Added
|
|
@@ -46,8 +56,7 @@ in case of vulnerabilities.
|
|
|
46
56
|
### Fixed
|
|
47
57
|
|
|
48
58
|
- **grid-column**: event `wcsSortChange` was trigger twice
|
|
49
|
-
- **stenciljs**: upgrade compiler version to 2.13.0
|
|
50
|
-
some obscure situations (please, don't ask).
|
|
59
|
+
- **stenciljs**: upgrade compiler version to 2.13.0
|
|
51
60
|
|
|
52
61
|
## [2.8.0] - 2022-01-27
|
|
53
62
|
|
|
@@ -81,22 +81,19 @@ let FormField = class {
|
|
|
81
81
|
this.updateLabelRequiredFlag(isRequired, label);
|
|
82
82
|
}
|
|
83
83
|
initSpiedElement() {
|
|
84
|
-
var _a;
|
|
84
|
+
var _a, _b;
|
|
85
85
|
const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
|
|
86
|
-
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements()[0];
|
|
86
|
+
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
|
|
87
87
|
// If the component is used in another web component
|
|
88
|
-
if (this.spiedElement.tagName === 'SLOT') {
|
|
88
|
+
if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
|
|
89
89
|
this.spiedElement = (this.spiedElement
|
|
90
90
|
.assignedElements()
|
|
91
91
|
.filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
|
|
92
92
|
}
|
|
93
|
-
if (!this.spiedElement)
|
|
94
|
-
throw new Error('You must provide a slotted element in form field');
|
|
95
|
-
if (SUPPORTED_COMPONENTS
|
|
96
|
-
.map(x => x.toUpperCase())
|
|
97
|
-
.indexOf(this.spiedElement.tagName) === -1) {
|
|
93
|
+
if (!this.spiedElement) {
|
|
98
94
|
// tslint:disable-next-line:no-console
|
|
99
|
-
console.warn('
|
|
95
|
+
console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
|
|
96
|
+
return;
|
|
100
97
|
}
|
|
101
98
|
}
|
|
102
99
|
updateLabelRequiredFlag(isRequired, label) {
|
|
@@ -65,22 +65,19 @@ export class FormField {
|
|
|
65
65
|
this.updateLabelRequiredFlag(isRequired, label);
|
|
66
66
|
}
|
|
67
67
|
initSpiedElement() {
|
|
68
|
-
var _a;
|
|
68
|
+
var _a, _b;
|
|
69
69
|
const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
|
|
70
|
-
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements()[0];
|
|
70
|
+
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
|
|
71
71
|
// If the component is used in another web component
|
|
72
|
-
if (this.spiedElement.tagName === 'SLOT') {
|
|
72
|
+
if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
|
|
73
73
|
this.spiedElement = (this.spiedElement
|
|
74
74
|
.assignedElements()
|
|
75
75
|
.filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
|
|
76
76
|
}
|
|
77
|
-
if (!this.spiedElement)
|
|
78
|
-
throw new Error('You must provide a slotted element in form field');
|
|
79
|
-
if (SUPPORTED_COMPONENTS
|
|
80
|
-
.map(x => x.toUpperCase())
|
|
81
|
-
.indexOf(this.spiedElement.tagName) === -1) {
|
|
77
|
+
if (!this.spiedElement) {
|
|
82
78
|
// tslint:disable-next-line:no-console
|
|
83
|
-
console.warn('
|
|
79
|
+
console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
|
|
80
|
+
return;
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
updateLabelRequiredFlag(isRequired, label) {
|
|
@@ -77,22 +77,19 @@ let FormField = class {
|
|
|
77
77
|
this.updateLabelRequiredFlag(isRequired, label);
|
|
78
78
|
}
|
|
79
79
|
initSpiedElement() {
|
|
80
|
-
var _a;
|
|
80
|
+
var _a, _b;
|
|
81
81
|
const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
|
|
82
|
-
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements()[0];
|
|
82
|
+
this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
|
|
83
83
|
// If the component is used in another web component
|
|
84
|
-
if (this.spiedElement.tagName === 'SLOT') {
|
|
84
|
+
if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
|
|
85
85
|
this.spiedElement = (this.spiedElement
|
|
86
86
|
.assignedElements()
|
|
87
87
|
.filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
|
|
88
88
|
}
|
|
89
|
-
if (!this.spiedElement)
|
|
90
|
-
throw new Error('You must provide a slotted element in form field');
|
|
91
|
-
if (SUPPORTED_COMPONENTS
|
|
92
|
-
.map(x => x.toUpperCase())
|
|
93
|
-
.indexOf(this.spiedElement.tagName) === -1) {
|
|
89
|
+
if (!this.spiedElement) {
|
|
94
90
|
// tslint:disable-next-line:no-console
|
|
95
|
-
console.warn('
|
|
91
|
+
console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
|
|
92
|
+
return;
|
|
96
93
|
}
|
|
97
94
|
}
|
|
98
95
|
updateLabelRequiredFlag(isRequired, label) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as s,h as t,H as r,g as e}from"./p-f46e6c3c.js";let i=class{constructor(t){s(this,t)}render(){return t(r,{slot:"error"},t("slot",null))}};i.style=":host{margin-top:0.25rem;color:var(--wcs-red)}";let o=class{constructor(t){s(this,t),this.isError=!1,this.hasPrefix=!1,this.hasSuffix=!1}componentWillLoad(){this.hasSuffix=null!==this.el.querySelector("wcs-button"),this.hasPrefix=null!==this.el.querySelector("wcs-select")}componentDidLoad(){this.initSpiedElement(),this.addRequiredMarkerToLabel(),this.updateErrorStateOnInput(this.isError)}isErrorChange(s){this.updateErrorStateOnInput(s)}updateErrorStateOnInput(s){this.spiedElementIsOfType("wcs-input","wcs-textarea")&&this.spiedElement.setAttribute("state",s?"error":"initial")}spiedElementIsOfType(...s){var t;for(const r of s)if((null===(t=this.spiedElement)||void 0===t?void 0:t.tagName)===r.toUpperCase())return!0;return!1}addRequiredMarkerToLabel(){var s;const t=this.el.querySelector("wcs-label");this.observer=new MutationObserver((s=>{var r;s.filter((s=>"required"===s.attributeName))[0]&&this.updateLabelRequiredFlag(null===(r=this.spiedElement)||void 0===r?void 0:r.hasAttribute("required"),t)})),this.spiedElement&&this.observer.observe(this.spiedElement,{attributes:!0});const r=null===(s=this.spiedElement)||void 0===s?void 0:s.hasAttribute("required");this.updateLabelRequiredFlag(r,t)}initSpiedElement(){var s,t;const r=["wcs-input","wcs-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox"];this.spiedElement=null===(s=this.el.shadowRoot.querySelector("slot:not([name])"))||void 0===s?void 0:s.assignedElements().filter((s=>-1!==[...r,"SLOT"].map((s=>s.toUpperCase())).indexOf(s.nodeName)))[0],"SLOT"===(null===(t=this.spiedElement)||void 0===t?void 0:t.tagName)&&(this.spiedElement=this.spiedElement.assignedElements().filter((s=>-1!==r.map((s=>s.toUpperCase())).indexOf(s.nodeName)))[0]),this.spiedElement||console.warn("Form-field component support only "+r.toString()+". Some features may not work with the provided component.")}updateLabelRequiredFlag(s,t){s&&t?t.setAttribute("required","true"):!s&&t&&t.removeAttribute("required")}disconnectedCallback(){this.observer.disconnect()}render(){let s="";const e=this.isError;return this.hasSuffix&&(s+=" has-suffix"),this.hasPrefix&&(s+=" has-prefix"),t(r,{class:s},t("slot",{name:"label"}),t("div",{class:"input-container"},t("slot",{name:"prefix"}),t("slot",{onSlotchange:()=>this.onFormInputSlotChange()}),t("slot",{name:"suffix"})),e?t("slot",{name:"error"}):"",t("slot",{name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement(),this.addRequiredMarkerToLabel(),this.updateErrorStateOnInput(this.isError)}get el(){return e(this)}static get watchers(){return{isError:["isErrorChange"]}}};o.style=":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";export{i as wcs_error,o as wcs_form_field}
|
package/dist/wcs/wcs.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as
|
|
1
|
+
import{p as e,b as c}from"./p-f46e6c3c.js";(()=>{const c=import.meta.url,o={};return""!==c&&(o.resourcesUrl=new URL(".",c).href),e(o)})().then((e=>c([["p-fb1577b5",[[1,"wcs-editable-field",{type:[1],label:[1],readonly:[4],value:[1032],validateFn:[16],formatFn:[16],errorMsg:[1,"error-msg"],currentState:[32],isError:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-a92d369e",[[1,"wcs-grid",{serverMode:[4,"server-mode"],data:[16],loading:[4],selectionConfig:[1,"selection-config"],selectedItems:[8,"selected-items"],wcsGridPaginationId:[1,"wcs-grid-pagination-id"],rowIdPath:[1,"row-id-path"],columns:[32],paginationEl:[32],rows:[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["p-214236db",[[1,"wcs-grid-pagination",{availablePageSizes:[16],currentPage:[2,"current-page"],pageSize:[2,"page-size"],itemsCount:[2,"items-count"],pageCount:[2,"page-count"]}]]],["p-94a31f64",[[1,"wcs-horizontal-stepper",{currentStep:[1026,"current-step"],steps:[16],mode:[1],checkOnComplete:[4,"check-on-complete"],buttonMode:[32],internalCurrentStep:[32],previous:[64],next:[64]}]]],["p-b5ffbea8",[[1,"wcs-dropdown",{noArrow:[4,"no-arrow"],mode:[1],shape:[1],disabled:[4],placement:[1],expanded:[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["p-4e9e226d",[[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32]},[[8,"click","onWindowClickEvent"]]]]],["p-a978c1e3",[[1,"wcs-input",{fireFocusEvents:[4,"fire-focus-events"],accept:[1],autocapitalize:[1],autocomplete:[1],autocorrect:[1],autofocus:[4],clearInput:[4,"clear-input"],clearOnEdit:[4,"clear-on-edit"],debounce:[2],prefixLabel:[1,"prefix-label"],suffixLabel:[1,"suffix-label"],disabled:[4],enterkeyhint:[1],icon:[1],inputmode:[1],max:[1],maxlength:[2],min:[1],minlength:[2],multiple:[4],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],step:[1],size:[2],type:[1],value:[1032],hasFocus:[32],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-7c26f650",[[4,"wcs-modal",{withoutBackdrop:[516,"without-backdrop"],show:[516],showCloseButton:[516,"show-close-button"],size:[1]},[[4,"keydown","onKeyDown"]]]]],["p-384068f7",[[1,"wcs-textarea",{fireFocusEvents:[4,"fire-focus-events"],autocapitalize:[1],autofocus:[4],clearOnEdit:[1028,"clear-on-edit"],debounce:[2],disabled:[4],icon:[1],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],readonly:[4],required:[4],spellcheck:[4],state:[513],cols:[2],rows:[2],wrap:[1],autoGrow:[4,"auto-grow"],value:[1025],hasFocus:[32],fitContent:[64],setFocus:[64],setBlur:[64],getInputElement:[64]}]]],["p-474d6601",[[1,"wcs-action-bar",{gutter:[4],hasTabs:[32]}]]],["p-b7184d59",[[1,"wcs-app"]]],["p-9ba52bc4",[[1,"wcs-badge",{shape:[1],color:[1]}]]],["p-f9944bde",[[1,"wcs-card",{mode:[1537]}]]],["p-e0163de8",[[1,"wcs-card-body"]]],["p-db68379f",[[1,"wcs-com-nav",{appName:[1,"app-name"]}]]],["p-1f5aed36",[[1,"wcs-com-nav-category",{label:[1],categoryOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["p-8864a491",[[1,"wcs-com-nav-submenu",{label:[1],panelTitle:[1,"panel-title"],panelDescription:[1,"panel-description"],menuOpen:[32],close:[64],open:[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["p-fa173947",[[1,"wcs-divider"]]],["p-bbf1ef42",[[1,"wcs-dropdown-divider"]]],["p-41037455",[[1,"wcs-dropdown-header"]]],["p-1dce7e63",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["p-60b51967",[[1,"wcs-field"]]],["p-26b5c0a3",[[1,"wcs-field-content"]]],["p-dc817204",[[1,"wcs-field-label"]]],["p-e9ce507c",[[1,"wcs-footer"]]],["p-e4236d32",[[1,"wcs-galactic",{text:[1],show:[32]}]]],["p-f430a227",[[1,"wcs-grid-column",{path:[1],name:[1],sort:[4],sortFn:[16],formatter:[16],sortOrder:[1025,"sort-order"],width:[1],customCells:[4,"custom-cells"],hidden:[4]}]]],["p-688fea65",[[1,"wcs-grid-custom-cell",{columnId:[1,"column-id"],rowId:[8,"row-id"]}]]],["p-dbbc3f58",[[1,"wcs-header"]]],["p-979dfd78",[[1,"wcs-hint",{small:[1540]}]]],["p-65c5ccc5",[[0,"wcs-icon",{icon:[1],size:[1]}]]],["p-600a9cc0",[[1,"wcs-label",{required:[516]}]]],["p-2e6265dc",[[1,"wcs-list-item",{activated:[1028]}]]],["p-a1ee1551",[[1,"wcs-list-item-properties"]]],["p-716d5921",[[1,"wcs-list-item-property"]]],["p-febe9ccc",[[1,"wcs-nav"]]],["p-e43358e4",[[4,"wcs-nav-item",{text:[513],href:[513]}]]],["p-55fdc284",[[1,"wcs-progress-radial",{size:[2],showLabel:[4,"show-label"],value:[2]}]]],["p-f96bb0bf",[[1,"wcs-radio-group",{value:[8],name:[520],mode:[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["p-7206e492",[[1,"wcs-switch",{name:[1],checked:[516],labelAlignment:[513,"label-alignment"],disabled:[4]}]]],["p-5b35b232",[[1,"wcs-tab",{header:[513],itemKey:[8,"item-key"]}]]],["p-03b2e238",[[1,"wcs-tabs",{align:[513],selectedIndex:[2,"selected-index"],selectedKey:[8,"selected-key"],headersOnly:[4,"headers-only"],gutter:[4],headers:[32],currentActiveTabIndex:[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["p-ecbe5165",[[1,"wcs-tooltip",{for:[1],position:[513],interactive:[4],maxWidth:[8,"max-width"],delay:[2],duration:[2],trigger:[1],theme:[1],hide:[64],show:[64],disable:[64],enable:[64]}]]],["p-8137f075",[[1,"wcs-progress-bar",{small:[4],showLabel:[4,"show-label"],value:[2]}]]],["p-9619f77a",[[1,"wcs-radio",{mode:[513],value:[1544],label:[1537],checked:[1540],disabled:[1028]}]]],["p-c7d6d3e1",[[4,"wcs-select-option",{disabled:[1540],selected:[1540],value:[8],chipColor:[1,"chip-color"],chipBackgroundColor:[1,"chip-background-color"],multiple:[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{value:[1032],placeholder:[1537],disabled:[1028],multiple:[516],chips:[516],name:[1],compareWith:[16],expanded:[32],hasLoaded:[32],displayText:[32],focused:[32],overlayDirection:[32],open:[64],close:[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["p-bcf381a2",[[1,"wcs-error"],[1,"wcs-form-field",{isError:[1540,"is-error"],hasPrefix:[32],hasSuffix:[32],spiedElement:[32]}]]],["p-91a2de07",[[1,"wcs-spinner",{mode:[513]}]]],["p-ff6d0dfd",[[1,"wcs-button",{type:[1025],href:[1],disabled:[516],ripple:[4],shape:[513],mode:[513]},[[0,"click","onClick"]]]]],["p-8c8740e3",[[1,"wcs-checkbox",{name:[1],indeterminate:[1540],checked:[1540],labelAlignment:[1537,"label-alignment"],disabled:[4]}]]],["p-22813c8e",[[1,"wcs-mat-icon",{icon:[1],size:[1],family:[1],familyFile:[32],familyClass:[32]}]]]],e)));
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as s,H as r,g as e}from"./p-f46e6c3c.js";let i=class{constructor(s){t(this,s)}render(){return s(r,{slot:"error"},s("slot",null))}};i.style=":host{margin-top:0.25rem;color:var(--wcs-red)}";let o=class{constructor(s){t(this,s),this.isError=!1,this.hasPrefix=!1,this.hasSuffix=!1}componentWillLoad(){this.hasSuffix=null!==this.el.querySelector("wcs-button"),this.hasPrefix=null!==this.el.querySelector("wcs-select")}componentDidLoad(){this.initSpiedElement(),this.addRequiredMarkerToLabel(),this.updateErrorStateOnInput(this.isError)}isErrorChange(t){this.updateErrorStateOnInput(t)}updateErrorStateOnInput(t){this.spiedElementIsOfType("wcs-input","wcs-textarea")&&this.spiedElement.setAttribute("state",t?"error":"initial")}spiedElementIsOfType(...t){var s;for(const r of t)if((null===(s=this.spiedElement)||void 0===s?void 0:s.tagName)===r.toUpperCase())return!0;return!1}addRequiredMarkerToLabel(){var t;const s=this.el.querySelector("wcs-label");this.observer=new MutationObserver((t=>{var r;t.filter((t=>"required"===t.attributeName))[0]&&this.updateLabelRequiredFlag(null===(r=this.spiedElement)||void 0===r?void 0:r.hasAttribute("required"),s)})),this.spiedElement&&this.observer.observe(this.spiedElement,{attributes:!0});const r=null===(t=this.spiedElement)||void 0===t?void 0:t.hasAttribute("required");this.updateLabelRequiredFlag(r,s)}initSpiedElement(){var t;const s=["wcs-input","wcs-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox"];if(this.spiedElement=null===(t=this.el.shadowRoot.querySelector("slot:not([name])"))||void 0===t?void 0:t.assignedElements()[0],"SLOT"===this.spiedElement.tagName&&(this.spiedElement=this.spiedElement.assignedElements().filter((t=>-1!==s.map((t=>t.toUpperCase())).indexOf(t.nodeName)))[0]),!this.spiedElement)throw new Error("You must provide a slotted element in form field");-1===s.map((t=>t.toUpperCase())).indexOf(this.spiedElement.tagName)&&console.warn("form-field component support "+s.toString()+". Some features may not work with the provided component (component "+this.spiedElement.tagName+" not natively supported).")}updateLabelRequiredFlag(t,s){t&&s?s.setAttribute("required","true"):!t&&s&&s.removeAttribute("required")}disconnectedCallback(){this.observer.disconnect()}render(){let t="";const e=this.isError;return this.hasSuffix&&(t+=" has-suffix"),this.hasPrefix&&(t+=" has-prefix"),s(r,{class:t},s("slot",{name:"label"}),s("div",{class:"input-container"},s("slot",{name:"prefix"}),s("slot",{onSlotchange:()=>this.onFormInputSlotChange()}),s("slot",{name:"suffix"})),e?s("slot",{name:"error"}):"",s("slot",{name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement(),this.addRequiredMarkerToLabel(),this.updateErrorStateOnInput(this.isError)}get el(){return e(this)}static get watchers(){return{isError:["isErrorChange"]}}};o.style=":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";export{i as wcs_error,o as wcs_form_field}
|