@dnncommunity/dnn-elements 0.24.0-beta.4 → 0.24.0-beta.5
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/dnn-select.cjs.entry.js +9 -2
- package/dist/cjs/dnn-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-select/dnn-select.js +9 -2
- package/dist/collection/components/dnn-select/dnn-select.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/{p-33cef64b.entry.js → p-9ecfe643.entry.js} +2 -2
- package/dist/dnn/p-9ecfe643.entry.js.map +1 -0
- package/dist/esm/dnn-select.entry.js +9 -2
- package/dist/esm/dnn-select.entry.js.map +1 -1
- package/dist/types/components/dnn-select/dnn-select.d.ts +1 -0
- package/package.json +1 -1
- package/dist/dnn/p-33cef64b.entry.js.map +0 -1
|
@@ -100,10 +100,17 @@ const DnnSelect = class {
|
|
|
100
100
|
this.customValidityMessage = this.select.validationMessage;
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
+
handleBlur() {
|
|
104
|
+
this.focused = false;
|
|
105
|
+
var validity = this.select.checkValidity();
|
|
106
|
+
this.valid = validity;
|
|
107
|
+
this.fieldset.setValidity(validity, this.select.validationMessage);
|
|
108
|
+
this.internals.setValidity(this.select.validity, this.select.validationMessage);
|
|
109
|
+
}
|
|
103
110
|
render() {
|
|
104
111
|
var _a;
|
|
105
|
-
return (index.h(index.Host, { key: '
|
|
106
|
-
index.h("svg", { key: '
|
|
112
|
+
return (index.h(index.Host, { key: '413d8726f8c2ab92401edf6845817ea7f0e4e2c7', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, index.h("dnn-fieldset", { key: '76cb8ec70a2c2c83b2cb74eec05bca3bd9bf2ac1', invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, onClick: () => !this.focused && this.select.focus(), ref: el => this.fieldset = el }, index.h("div", { key: 'af8240e4df6c6dedeef1ff9919a8b8d795f2f6ec', class: "inner-container" }, index.h("select", { key: '7c65b93ee3211ed304327e3ee8db6bfee6a8c1a8', ref: el => this.select = el, onFocus: () => this.focused = true, onBlur: () => this.handleBlur(), onChange: e => this.handleChange(e.target.value), onInvalid: () => this.handleInvalid(), required: this.required, disabled: this.disabled, "aria-labelledby": this.labelId }, index.h("slot", { key: '70cfd0752004af51acfcd066b2b3ebf9253a2e6b', ref: el => this.slot = el })), !this.valid &&
|
|
113
|
+
index.h("svg", { key: 'a45562c5639890f502b3eb669ff5e7bc340837bb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, index.h("path", { key: '41a539770c67636ab55a8cb5dec4422f3b9fdf80', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" }))))));
|
|
107
114
|
}
|
|
108
115
|
static get formAssociated() { return true; }
|
|
109
116
|
get el() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-select.entry.cjs.js","mappings":"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","names":["generateRandomId","h","Host"],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"dnn-select.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,kpBAAkpB,CAAC;AACxqB,wBAAe,YAAY;;MCQd,SAAS;;;;;;;;;;;;;;;;;;uBAyBQ,KAAK;qBAChB,IAAI;;;;IAQrB,MAAM,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SACjE;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;KAC7B;IAWD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,GAAGA,gCAAgB,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS;YAC7C,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;gBAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;oBACjC,IAAI,CAAC,yBAAyB,EAAE,CAAC;iBAClC;aACF;SACF,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QACpE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KACxC;IAED,gBAAgB;QACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;;IAGD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;KAChC;IAEO,yBAAyB;;QAC/B,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,EAAE,CAAC;QACnD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,CAAC,IAAI;YACzB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,MAAM,aAAa,GAAG,IAAyB,CAAC;gBAChD,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;aACxC;SACF,CAAC,CAAC;KACJ;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAC;YACzB,IAAI,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACnC;KACF;IAEO,YAAY,CAAC,KAAa;QAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,KAAK,EAAC;YACb,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAC/B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACjC;aACG;YACF,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAC,WAAW,EAAE,IAAI,EAAC,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAC/E,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SACjE;KACF;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAC;YAC1C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC;SAC5D;KACF;IAEO,UAAU;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;KACjF;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhCD,2EACE,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EACnD,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAE7BA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,qEACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,EACvE,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,qBACN,IAAI,CAAC,OAAO,IAE7BA,mEAAM,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,GAAI,EAAsB,GAAS,CACtD,EACR,CAAC,IAAI,CAAC,KAAK;YACVA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,OAAO,IAC5EA,mEAAM,CAAC,EAAC,0oBAA0oB,GAAE,CAChpB,CAEJ,CACO,CACV,EACP;KACH;;;;;;;;","names":["generateRandomId","h","Host"],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n private handleBlur(): void {\n this.focused = false\n var validity = this.select.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.select.validationMessage);\n this.internals.setValidity(this.select.validity, this.select.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -83,10 +83,17 @@ export class DnnSelect {
|
|
|
83
83
|
this.customValidityMessage = this.select.validationMessage;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
|
+
handleBlur() {
|
|
87
|
+
this.focused = false;
|
|
88
|
+
var validity = this.select.checkValidity();
|
|
89
|
+
this.valid = validity;
|
|
90
|
+
this.fieldset.setValidity(validity, this.select.validationMessage);
|
|
91
|
+
this.internals.setValidity(this.select.validity, this.select.validationMessage);
|
|
92
|
+
}
|
|
86
93
|
render() {
|
|
87
94
|
var _a;
|
|
88
|
-
return (h(Host, { key: '
|
|
89
|
-
h("svg", { key: '
|
|
95
|
+
return (h(Host, { key: '413d8726f8c2ab92401edf6845817ea7f0e4e2c7', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, h("dnn-fieldset", { key: '76cb8ec70a2c2c83b2cb74eec05bca3bd9bf2ac1', invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, onClick: () => !this.focused && this.select.focus(), ref: el => this.fieldset = el }, h("div", { key: 'af8240e4df6c6dedeef1ff9919a8b8d795f2f6ec', class: "inner-container" }, h("select", { key: '7c65b93ee3211ed304327e3ee8db6bfee6a8c1a8', ref: el => this.select = el, onFocus: () => this.focused = true, onBlur: () => this.handleBlur(), onChange: e => this.handleChange(e.target.value), onInvalid: () => this.handleInvalid(), required: this.required, disabled: this.disabled, "aria-labelledby": this.labelId }, h("slot", { key: '70cfd0752004af51acfcd066b2b3ebf9253a2e6b', ref: el => this.slot = el })), !this.valid &&
|
|
96
|
+
h("svg", { key: 'a45562c5639890f502b3eb669ff5e7bc340837bb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '41a539770c67636ab55a8cb5dec4422f3b9fdf80', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" }))))));
|
|
90
97
|
}
|
|
91
98
|
static get is() { return "dnn-select"; }
|
|
92
99
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-select.js","sourceRoot":"","sources":["../../../src/components/dnn-select/dnn-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dnn-select.js","sourceRoot":"","sources":["../../../src/components/dnn-select/dnn-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n private handleBlur(): void {\n this.focused = false\n var validity = this.select.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.select.validationMessage);\n this.internals.setValidity(this.select.validity, this.select.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}\n"]}
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-b96b7c4a",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-70b71aeb",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-95b96f1b",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleOutsideClick"]]]]],["p-07a78c58",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-b96b7c4a",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-70b71aeb",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-95b96f1b",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleOutsideClick"]]]]],["p-07a78c58",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-9ecfe643",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-ceae28fc",[[65,"dnn-textarea",{resizable:[1],value:[1025],label:[1],name:[1],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],minlength:[2],maxlength:[2],readonly:[4],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-8564bc60",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-5b15b44a",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-50b6bb3f",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-7c4bcd14",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e23840d6",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-6e54915d",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-350e4008",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},null,{checked:["checkedChanged"]}]]],["p-3b3475e0",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-90dd4620",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-3d1d6321",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},null,{checked:["handleCheckedChange"]}]]],["p-61dfb826",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-2486e9db",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],localResx:[32],focused:[32]},null,{resx:["resxChanged"]}]]],["p-4574844c",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-96c850a8",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-21c5ef07",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-d7d6dffb",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-9b330c82",[[65,"dnn-button",{type:[1],appearance:[1],formButtonType:[1,"form-button-type"],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],focused:[32],modalVisible:[32]}]]],["p-b5241c09",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32],localResx:[32],focused:[32]},null,{foundUsers:["handleFoundUsersChanged"],resx:["resxChanged"]}]]],["p-b553c159",[[1,"dnn-fieldset",{focused:[1540],disabled:[1540],invalid:[1540],label:[1],floatLabel:[1540,"float-label"],helpText:[1,"help-text"],resizable:[1],customValidityMessage:[32],setFocused:[64],setBlurred:[64],disable:[64],enable:[64],pinLabel:[64],unpinLabel:[64],setValidity:[64]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=dnn.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as n}from"./p-978abd50.js";import{g as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as e,H as s,g as n}from"./p-978abd50.js";import{g as h}from"./p-5df01911.js";const r=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%;background-color:var(--background)}select{border:none;outline:none;background-color:var(--background);text-align:var(--input-text-align);width:100%;cursor:pointer}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5)}";const a=r;const o=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.label=undefined;this.name=undefined;this.required=undefined;this.helpText=undefined;this.disabled=undefined;this.disableValidityReporting=undefined;this.value=undefined;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){var t=this.select.checkValidity();if(!t){this.fieldset.setValidity(false,this.select.validationMessage)}return this.select.validity}componentWillLoad(){this.originalValue=this.value;this.labelId=h();this.observer=new MutationObserver((t=>{for(let i of t){if(i.type==="childList"){this.applySlottedItemsToSelect()}}}));const t={attributes:true,childList:true,subtree:true};this.observer.observe(this.el,t)}componentDidLoad(){this.applySlottedItemsToSelect();this.setFormValue()}formResetCallback(){this.internals.setValidity({});this.value=this.originalValue;this.internals.setFormValue("");this.select.selectedIndex=-1}applySlottedItemsToSelect(){var t;const i=(t=this.slot)===null||t===void 0?void 0:t.assignedElements();i===null||i===void 0?void 0:i.forEach((t=>{if(t.nodeName==="OPTION"){const i=t;this.select.appendChild(i)}}))}setFormValue(){if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}handleChange(t){this.value=t;var i=this.select.checkValidity();this.valid=i;this.valueChange.emit(this.value);this.setFormValue();if(this.valid){this.internals.setValidity({});this.fieldset.setValidity(true)}else{this.internals.setValidity({customError:true},this.select.validationMessage);this.fieldset.setValidity(false,this.select.validationMessage)}}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.select.validationMessage}}handleBlur(){this.focused=false;var t=this.select.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.select.validationMessage);this.internals.setValidity(this.select.validity,this.select.validationMessage)}render(){var t;return e(s,{key:"413d8726f8c2ab92401edf6845817ea7f0e4e2c7",tabIndex:this.focused?-1:0,onFocus:()=>this.select.focus(),onBlur:()=>this.select.blur()},e("dnn-fieldset",{key:"76cb8ec70a2c2c83b2cb74eec05bca3bd9bf2ac1",invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,onClick:()=>!this.focused&&this.select.focus(),ref:t=>this.fieldset=t},e("div",{key:"af8240e4df6c6dedeef1ff9919a8b8d795f2f6ec",class:"inner-container"},e("select",{key:"7c65b93ee3211ed304327e3ee8db6bfee6a8c1a8",ref:t=>this.select=t,onFocus:()=>this.focused=true,onBlur:()=>this.handleBlur(),onChange:t=>this.handleChange(t.target.value),onInvalid:()=>this.handleInvalid(),required:this.required,disabled:this.disabled,"aria-labelledby":this.labelId},e("slot",{key:"70cfd0752004af51acfcd066b2b3ebf9253a2e6b",ref:t=>this.slot=t})),!this.valid&&e("svg",{key:"a45562c5639890f502b3eb669ff5e7bc340837bb",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"41a539770c67636ab55a8cb5dec4422f3b9fdf80",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})))))}static get formAssociated(){return true}get el(){return n(this)}};o.style=a;export{o as dnn_select};
|
|
2
|
+
//# sourceMappingURL=p-9ecfe643.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnSelectCss","DnnSelectStyle0","DnnSelect","checkValidity","validity","this","select","fieldset","setValidity","validationMessage","componentWillLoad","originalValue","value","labelId","generateRandomId","observer","MutationObserver","mutations","mutation","type","applySlottedItemsToSelect","config","attributes","childList","subtree","observe","el","componentDidLoad","setFormValue","formResetCallback","internals","selectedIndex","slottedItems","_a","slot","assignedElements","forEach","item","nodeName","optionElement","appendChild","name","undefined","data","FormData","append","handleChange","valid","valueChange","emit","customError","handleInvalid","customValidityMessage","handleBlur","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","invalid","label","required","helpText","id","onClick","ref","class","onChange","e","target","onInvalid","disabled","xmlns","viewBox","d"],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n private handleBlur(): void {\n this.focused = false\n var validity = this.select.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.select.validationMessage);\n this.internals.setValidity(this.select.validity, this.select.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAe,mpBACrB,MAAAC,EAAeD,E,MCQFE,EAAS,M,6ZAyBQ,M,WACX,K,qCAQjB,mBAAMC,GACJ,IAAIC,EAAWC,KAAKC,OAAOH,gBAC3B,IAAKC,EAAU,CACbC,KAAKE,SAASC,YAAY,MAAOH,KAAKC,OAAOG,kB,CAE/C,OAAOJ,KAAKC,OAAOF,Q,CAYrB,iBAAAM,GACEL,KAAKM,cAAgBN,KAAKO,MAC1BP,KAAKQ,QAAUC,IACfT,KAAKU,SAAW,IAAIC,kBAAkBC,IACpC,IAAK,IAAIC,KAAYD,EAAW,CAC9B,GAAIC,EAASC,OAAS,YAAa,CACjCd,KAAKe,2B,MAKX,MAAMC,EAAS,CAAEC,WAAY,KAAMC,UAAW,KAAMC,QAAS,MAC7DnB,KAAKU,SAASU,QAAQpB,KAAKqB,GAAIL,E,CAGjC,gBAAAM,GACEtB,KAAKe,4BACLf,KAAKuB,c,CAIP,iBAAAC,GACExB,KAAKyB,UAAUtB,YAAY,IAC3BH,KAAKO,MAAQP,KAAKM,cAClBN,KAAKyB,UAAUF,aAAa,IAC5BvB,KAAKC,OAAOyB,eAAiB,C,CAGvB,yBAAAX,G,MACN,MAAMY,GAAeC,EAAA5B,KAAK6B,QAAI,MAAAD,SAAA,SAAAA,EAAEE,mBAChCH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,SAASC,IACrB,GAAIA,EAAKC,WAAa,SAAU,CAC9B,MAAMC,EAAgBF,EACtBhC,KAAKC,OAAOkC,YAAYD,E,KAKtB,YAAAX,GACN,GAAIvB,KAAKoC,MAAQC,UAAU,CACzB,IAAIC,EAAO,IAAIC,SACfD,EAAKE,OAAOxC,KAAKoC,KAAMpC,KAAKO,OAC5BP,KAAKyB,UAAUF,aAAae,E,EAIxB,YAAAG,CAAalC,GACnBP,KAAKO,MAAQA,EACb,IAAImC,EAAQ1C,KAAKC,OAAOH,gBACxBE,KAAK0C,MAAQA,EACb1C,KAAK2C,YAAYC,KAAK5C,KAAKO,OAC3BP,KAAKuB,eACL,GAAIvB,KAAK0C,MAAM,CACb1C,KAAKyB,UAAUtB,YAAY,IAC3BH,KAAKE,SAASC,YAAY,K,KAExB,CACFH,KAAKyB,UAAUtB,YAAY,CAAC0C,YAAa,MAAO7C,KAAKC,OAAOG,mBAC5DJ,KAAKE,SAASC,YAAY,MAAOH,KAAKC,OAAOG,kB,EAIzC,aAAA0C,GACN9C,KAAK0C,MAAQ,MACb,GAAI1C,KAAK+C,uBAAyBV,UAAU,CAC1CrC,KAAK+C,sBAAwB/C,KAAKC,OAAOG,iB,EAIrC,UAAA4C,GACNhD,KAAKiD,QAAU,MACf,IAAIlD,EAAWC,KAAKC,OAAOH,gBAC3BE,KAAK0C,MAAQ3C,EACbC,KAAKE,SAASC,YAAYJ,EAAUC,KAAKC,OAAOG,mBAChDJ,KAAKyB,UAAUtB,YAAYH,KAAKC,OAAOF,SAAUC,KAAKC,OAAOG,kB,CAG/D,MAAA8C,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAUtD,KAAKiD,SAAW,EAAI,EAC9BM,QAAS,IAAMvD,KAAKC,OAAOuD,QAC3BC,OAAQ,IAAMzD,KAAKC,OAAOyD,QAE1BP,EAAA,gBAAAE,IAAA,2CACEM,SAAU3D,KAAK0C,MACfO,QAASjD,KAAKiD,QACdW,MAAO,IAAGhC,EAAA5B,KAAK4D,SAAK,MAAAhC,SAAA,EAAAA,EAAI,KAAK5B,KAAK6D,SAAW,KAAO,KACpDC,SAAU9D,KAAK8D,SACfC,GAAI/D,KAAKQ,QACTwD,QAAS,KAAOhE,KAAKiD,SAAWjD,KAAKC,OAAOuD,QAC5CS,IAAK5C,GAAMrB,KAAKE,SAAWmB,GAE3B8B,EAAA,OAAAE,IAAA,2CAAKa,MAAM,mBACTf,EAAA,UAAAE,IAAA,2CACEY,IAAK5C,GAAMrB,KAAKC,OAASoB,EACzBkC,QAAS,IAAMvD,KAAKiD,QAAU,KAC9BQ,OAAQ,IAAMzD,KAAKgD,aACnBmB,SAAUC,GAAKpE,KAAKyC,aAAc2B,EAAEC,OAA6B9D,OACjE+D,UAAW,IAAMtE,KAAK8C,gBACtBe,SAAU7D,KAAK6D,SACfU,SAAUvE,KAAKuE,SAAQ,kBACNvE,KAAKQ,SAEtB2C,EAAA,QAAAE,IAAA,2CAAMY,IAAK5C,GAAMrB,KAAK6B,KAAQR,MAE9BrB,KAAK0C,OACLS,EAAA,OAAAE,IAAA,2CAAKmB,MAAM,6BAA6BC,QAAQ,iBAAiBP,MAAM,SACrEf,EAAA,QAAAE,IAAA,2CAAMqB,EAAE,gpB","ignoreList":[]}
|
|
@@ -96,10 +96,17 @@ const DnnSelect = class {
|
|
|
96
96
|
this.customValidityMessage = this.select.validationMessage;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
+
handleBlur() {
|
|
100
|
+
this.focused = false;
|
|
101
|
+
var validity = this.select.checkValidity();
|
|
102
|
+
this.valid = validity;
|
|
103
|
+
this.fieldset.setValidity(validity, this.select.validationMessage);
|
|
104
|
+
this.internals.setValidity(this.select.validity, this.select.validationMessage);
|
|
105
|
+
}
|
|
99
106
|
render() {
|
|
100
107
|
var _a;
|
|
101
|
-
return (h(Host, { key: '
|
|
102
|
-
h("svg", { key: '
|
|
108
|
+
return (h(Host, { key: '413d8726f8c2ab92401edf6845817ea7f0e4e2c7', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, h("dnn-fieldset", { key: '76cb8ec70a2c2c83b2cb74eec05bca3bd9bf2ac1', invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, onClick: () => !this.focused && this.select.focus(), ref: el => this.fieldset = el }, h("div", { key: 'af8240e4df6c6dedeef1ff9919a8b8d795f2f6ec', class: "inner-container" }, h("select", { key: '7c65b93ee3211ed304327e3ee8db6bfee6a8c1a8', ref: el => this.select = el, onFocus: () => this.focused = true, onBlur: () => this.handleBlur(), onChange: e => this.handleChange(e.target.value), onInvalid: () => this.handleInvalid(), required: this.required, disabled: this.disabled, "aria-labelledby": this.labelId }, h("slot", { key: '70cfd0752004af51acfcd066b2b3ebf9253a2e6b', ref: el => this.slot = el })), !this.valid &&
|
|
109
|
+
h("svg", { key: 'a45562c5639890f502b3eb669ff5e7bc340837bb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '41a539770c67636ab55a8cb5dec4422f3b9fdf80', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" }))))));
|
|
103
110
|
}
|
|
104
111
|
static get formAssociated() { return true; }
|
|
105
112
|
get el() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-select.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"dnn-select.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n private handleBlur(): void {\n this.focused = false\n var validity = this.select.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.select.validationMessage);\n this.internals.setValidity(this.select.validity, this.select.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.0-beta.
|
|
3
|
+
"version": "0.24.0-beta.5",
|
|
4
4
|
"description": "Dnn themed custom elements.",
|
|
5
5
|
"repository": "https://github.com/dnncommunity/dnn-elements",
|
|
6
6
|
"homepage": "https://dnncommunity.github.io/dnn-elements",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnSelectCss","DnnSelectStyle0","DnnSelect","checkValidity","validity","this","select","fieldset","setValidity","validationMessage","componentWillLoad","originalValue","value","labelId","generateRandomId","observer","MutationObserver","mutations","mutation","type","applySlottedItemsToSelect","config","attributes","childList","subtree","observe","el","componentDidLoad","setFormValue","formResetCallback","internals","selectedIndex","slottedItems","_a","slot","assignedElements","forEach","item","nodeName","optionElement","appendChild","name","undefined","data","FormData","append","handleChange","valid","valueChange","emit","customError","handleInvalid","customValidityMessage","render","h","Host","key","tabIndex","focused","onFocus","focus","onBlur","blur","invalid","label","required","helpText","id","onClick","ref","class","onChange","e","target","onInvalid","disabled","xmlns","viewBox","d"],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n \n /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n --input-text-align: left;\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n background-color: var(--background);\n}\n\nselect{\n border: none;\n outline: none;\n background-color: var(--background);\n text-align: var(--input-text-align);\n width: 100%;\n cursor: pointer; \n}\n\n.prefix, .suffix{\n font-size: 0.8em;\n}\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n }\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n tag: 'dnn-select',\n styleUrl: 'dnn-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnSelect {\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input, if used in forms. */\n @Prop() name: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n \n /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n \n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: string;\n \n @Element() el: HTMLDnnSelectElement;\n \n @State() focused: boolean = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<string>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity() {\n var validity = this.select.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n return this.select.validity;\n }\n \n @AttachInternals() internals: ElementInternals;\n \n private slot: HTMLSlotElement;\n private select: HTMLSelectElement;\n private observer: MutationObserver;\n private labelId: string;\n private originalValue: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n componentWillLoad() {\n this.originalValue = this.value;\n this.labelId = generateRandomId();\n this.observer = new MutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.applySlottedItemsToSelect();\n }\n }\n });\n\n const config = { attributes: true, childList: true, subtree: true };\n this.observer.observe(this.el, config);\n }\n \n componentDidLoad() {\n this.applySlottedItemsToSelect();\n this.setFormValue();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.value = this.originalValue;\n this.internals.setFormValue(\"\");\n this.select.selectedIndex = -1;\n }\n\n private applySlottedItemsToSelect () {\n const slottedItems = this.slot?.assignedElements();\n slottedItems?.forEach((item) => {\n if (item.nodeName === \"OPTION\") {\n const optionElement = item as HTMLOptionElement;\n this.select.appendChild(optionElement);\n }\n });\n }\n\n private setFormValue(){\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n private handleChange(value: string) {\n this.value = value;\n var valid = this.select.checkValidity();\n this.valid = valid;\n this.valueChange.emit(this.value);\n this.setFormValue();\n if (this.valid){\n this.internals.setValidity({});\n this.fieldset.setValidity(true);\n }\n else{\n this.internals.setValidity({customError: true}, this.select.validationMessage);\n this.fieldset.setValidity(false, this.select.validationMessage);\n }\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.select.validationMessage;\n }\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.select.focus()}\n onBlur={() => this.select.blur()}\n >\n <dnn-fieldset\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n onClick={() => !this.focused && this.select.focus()}\n ref={el => this.fieldset = el}\n >\n <div class=\"inner-container\">\n <select\n ref={el => this.select = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n onInvalid={() => this.handleInvalid()}\n required={this.required}\n disabled={this.disabled}\n aria-labelledby={this.labelId}\n >\n <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n </select>\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"mappings":"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","ignoreList":[]}
|