@dnncommunity/dnn-elements 0.24.1-beta.4 → 0.24.2-beta.1
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 -4
- package/dist/cjs/dnn-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-select/dnn-select.js +9 -4
- package/dist/collection/components/dnn-select/dnn-select.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-d55632fe.entry.js +2 -0
- package/dist/dnn/p-d55632fe.entry.js.map +1 -0
- package/dist/esm/dnn-select.entry.js +9 -4
- package/dist/esm/dnn-select.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/dnn/p-61c8c5d8.entry.js +0 -2
- package/dist/dnn/p-61c8c5d8.entry.js.map +0 -1
|
@@ -53,8 +53,13 @@ const DnnSelect = class {
|
|
|
53
53
|
this.observer.observe(this.el, config);
|
|
54
54
|
}
|
|
55
55
|
componentDidLoad() {
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
requestAnimationFrame(() => {
|
|
57
|
+
var validity = this.select.validity;
|
|
58
|
+
var validityMessage = validity.valid ? "" : this.select.validationMessage;
|
|
59
|
+
this.internals.setValidity(this.select.validity, validityMessage);
|
|
60
|
+
this.applySlottedItemsToSelect();
|
|
61
|
+
this.setFormValue();
|
|
62
|
+
});
|
|
58
63
|
}
|
|
59
64
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
60
65
|
formResetCallback() {
|
|
@@ -110,8 +115,8 @@ const DnnSelect = class {
|
|
|
110
115
|
}
|
|
111
116
|
render() {
|
|
112
117
|
var _a;
|
|
113
|
-
return (index.h(index.Host, { key: '
|
|
114
|
-
index.h("svg", { key: '
|
|
118
|
+
return (index.h(index.Host, { key: '3ab6d0e08bb26d539989bcfab126228c79dcbda6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, index.h("dnn-fieldset", { key: '3f8999f9c48f5858df122ab6a7af64f65b497e08', 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: '9bceeb3f3f1eb50abd25b78180a71e1ddbcfc693', class: "inner-container" }, index.h("select", { key: 'a94c7ff96ca40509bf3457aa72da53e761a2464a', ref: el => this.select = el, autoComplete: this.autocomplete, 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: 'ce93edb423f2981529eea591024b6d073c619421', ref: el => this.slot = el })), !this.valid &&
|
|
119
|
+
index.h("svg", { key: 'ab5151d56e6390acc6acfd7f0d737796170ba05b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, index.h("path", { key: '7394f15bb7815799a825c3ac848698efd2b28078', 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" }))))));
|
|
115
120
|
}
|
|
116
121
|
static get formAssociated() { return true; }
|
|
117
122
|
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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 autoComplete={this.autocomplete}\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}
|
|
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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 requestAnimationFrame(() => {\n var validity = this.select.validity;\n var validityMessage = validity.valid ? \"\" : this.select.validationMessage;\n this.internals.setValidity(this.select.validity, validityMessage);\n this.applySlottedItemsToSelect();\n this.setFormValue();\n });\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 autoComplete={this.autocomplete}\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}
|
|
@@ -36,8 +36,13 @@ export class DnnSelect {
|
|
|
36
36
|
this.observer.observe(this.el, config);
|
|
37
37
|
}
|
|
38
38
|
componentDidLoad() {
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
requestAnimationFrame(() => {
|
|
40
|
+
var validity = this.select.validity;
|
|
41
|
+
var validityMessage = validity.valid ? "" : this.select.validationMessage;
|
|
42
|
+
this.internals.setValidity(this.select.validity, validityMessage);
|
|
43
|
+
this.applySlottedItemsToSelect();
|
|
44
|
+
this.setFormValue();
|
|
45
|
+
});
|
|
41
46
|
}
|
|
42
47
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
43
48
|
formResetCallback() {
|
|
@@ -93,8 +98,8 @@ export class DnnSelect {
|
|
|
93
98
|
}
|
|
94
99
|
render() {
|
|
95
100
|
var _a;
|
|
96
|
-
return (h(Host, { key: '
|
|
97
|
-
h("svg", { key: '
|
|
101
|
+
return (h(Host, { key: '3ab6d0e08bb26d539989bcfab126228c79dcbda6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, h("dnn-fieldset", { key: '3f8999f9c48f5858df122ab6a7af64f65b497e08', 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: '9bceeb3f3f1eb50abd25b78180a71e1ddbcfc693', class: "inner-container" }, h("select", { key: 'a94c7ff96ca40509bf3457aa72da53e761a2464a', ref: el => this.select = el, autoComplete: this.autocomplete, 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: 'ce93edb423f2981529eea591024b6d073c619421', ref: el => this.slot = el })), !this.valid &&
|
|
102
|
+
h("svg", { key: 'ab5151d56e6390acc6acfd7f0d737796170ba05b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '7394f15bb7815799a825c3ac848698efd2b28078', 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" }))))));
|
|
98
103
|
}
|
|
99
104
|
static get is() { return "dnn-select"; }
|
|
100
105
|
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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 autoComplete={this.autocomplete}\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"]}
|
|
1
|
+
{"version":3,"file":"dnn-select.js","sourceRoot":"","sources":["../../../src/components/dnn-select/dnn-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAQnE,MAAM,OAAO,SAAS;;;;;;;;4BAuBG,KAAK;;uBAOA,KAAK;qBAChB,IAAI;;;IAMrB,6GAA6G;IAE7G,KAAK,CAAC,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAWD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACjD,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE,CAAC;gBAC/B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBAClC,IAAI,CAAC,yBAAyB,EAAE,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC,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;IACzC,CAAC;IAED,gBAAgB;QACd,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACpC,IAAI,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC;YAC1E,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;YAClE,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACjC,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,0EAA0E;IAC1E,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;IACjC,CAAC;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,EAAE,EAAE;YAC7B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC/B,MAAM,aAAa,GAAG,IAAyB,CAAC;gBAChD,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAC,CAAC;YAC1B,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;QACpC,CAAC;IACH,CAAC;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,CAAC;YACd,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAC/B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;aACG,CAAC;YACH,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;QAClE,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAC,CAAC;YAC3C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC;QAC7D,CAAC;IACH,CAAC;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;IAClF,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAEhC,qEACE,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,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EACnD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE;gBAE7B,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,+DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,EACvE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,qBACN,IAAI,CAAC,OAAO;wBAE7B,6DAAM,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,GAAI,EAAsB,GAAS,CACtD;oBACR,CAAC,IAAI,CAAC,KAAK;wBACV,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,OAAO;4BAC5E,6DAAM,CAAC,EAAC,0oBAA0oB,GAAE,CAChpB,CAEJ,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 requestAnimationFrame(() => {\n var validity = this.select.validity;\n var validityMessage = validity.valid ? \"\" : this.select.validationMessage;\n this.internals.setValidity(this.select.validity, validityMessage);\n this.applySlottedItemsToSelect();\n this.setFormValue();\n });\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 autoComplete={this.autocomplete}\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-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.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-107bd5a8",[[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-ef6a902d",[[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-f317208f",[[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"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]]]]],["p-e6bd0f5b",[[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"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.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-107bd5a8",[[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-ef6a902d",[[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-f317208f",[[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"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]]]]],["p-e6bd0f5b",[[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"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-d55632fe",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-88a928f2",[[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],rows:[2],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e7a44eb3",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-2b0a6053",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[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-00fccd70",[[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-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[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-36dc982d",[[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-bd6d200f",[[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-bc2d2d54",[[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
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,H as e,g as n}from"./p-91d08ab2.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(s){t(this,s);this.valueChange=i(this,"valueChange",7);if(s.$hostElement$["s-ei"]){this.internals=s.$hostElement$["s-ei"]}else{this.internals=s.$hostElement$.attachInternals();s.$hostElement$["s-ei"]=this.internals}this.label=undefined;this.name=undefined;this.required=undefined;this.helpText=undefined;this.disabled=undefined;this.disableValidityReporting=undefined;this.autocomplete="off";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(){requestAnimationFrame((()=>{var t=this.select.validity;var i=t.valid?"":this.select.validationMessage;this.internals.setValidity(this.select.validity,i);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 s(e,{key:"3ab6d0e08bb26d539989bcfab126228c79dcbda6",tabIndex:this.focused?-1:0,onFocus:()=>this.select.focus(),onBlur:()=>this.select.blur()},s("dnn-fieldset",{key:"3f8999f9c48f5858df122ab6a7af64f65b497e08",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},s("div",{key:"9bceeb3f3f1eb50abd25b78180a71e1ddbcfc693",class:"inner-container"},s("select",{key:"a94c7ff96ca40509bf3457aa72da53e761a2464a",ref:t=>this.select=t,autoComplete:this.autocomplete,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},s("slot",{key:"ce93edb423f2981529eea591024b6d073c619421",ref:t=>this.slot=t})),!this.valid&&s("svg",{key:"ab5151d56e6390acc6acfd7f0d737796170ba05b",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},s("path",{key:"7394f15bb7815799a825c3ac848698efd2b28078",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-d55632fe.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","requestAnimationFrame","validityMessage","valid","internals","setFormValue","formResetCallback","selectedIndex","slottedItems","_a","slot","assignedElements","forEach","item","nodeName","optionElement","appendChild","name","undefined","data","FormData","append","handleChange","valueChange","emit","customError","handleInvalid","customValidityMessage","handleBlur","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","invalid","label","required","helpText","id","onClick","ref","class","autoComplete","autocomplete","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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 requestAnimationFrame(() => {\n var validity = this.select.validity;\n var validityMessage = validity.valid ? \"\" : this.select.validationMessage;\n this.internals.setValidity(this.select.validity, validityMessage);\n this.applySlottedItemsToSelect();\n this.setFormValue();\n });\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 autoComplete={this.autocomplete}\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":"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","ignoreList":[]}
|
|
@@ -49,8 +49,13 @@ const DnnSelect = class {
|
|
|
49
49
|
this.observer.observe(this.el, config);
|
|
50
50
|
}
|
|
51
51
|
componentDidLoad() {
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
requestAnimationFrame(() => {
|
|
53
|
+
var validity = this.select.validity;
|
|
54
|
+
var validityMessage = validity.valid ? "" : this.select.validationMessage;
|
|
55
|
+
this.internals.setValidity(this.select.validity, validityMessage);
|
|
56
|
+
this.applySlottedItemsToSelect();
|
|
57
|
+
this.setFormValue();
|
|
58
|
+
});
|
|
54
59
|
}
|
|
55
60
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
56
61
|
formResetCallback() {
|
|
@@ -106,8 +111,8 @@ const DnnSelect = class {
|
|
|
106
111
|
}
|
|
107
112
|
render() {
|
|
108
113
|
var _a;
|
|
109
|
-
return (h(Host, { key: '
|
|
110
|
-
h("svg", { key: '
|
|
114
|
+
return (h(Host, { key: '3ab6d0e08bb26d539989bcfab126228c79dcbda6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.select.focus(), onBlur: () => this.select.blur() }, h("dnn-fieldset", { key: '3f8999f9c48f5858df122ab6a7af64f65b497e08', 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: '9bceeb3f3f1eb50abd25b78180a71e1ddbcfc693', class: "inner-container" }, h("select", { key: 'a94c7ff96ca40509bf3457aa72da53e761a2464a', ref: el => this.select = el, autoComplete: this.autocomplete, 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: 'ce93edb423f2981529eea591024b6d073c619421', ref: el => this.slot = el })), !this.valid &&
|
|
115
|
+
h("svg", { key: 'ab5151d56e6390acc6acfd7f0d737796170ba05b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '7394f15bb7815799a825c3ac848698efd2b28078', 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" }))))));
|
|
111
116
|
}
|
|
112
117
|
static get formAssociated() { return true; }
|
|
113
118
|
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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 autoComplete={this.autocomplete}\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}
|
|
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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 requestAnimationFrame(() => {\n var validity = this.select.validity;\n var validityMessage = validity.valid ? \"\" : this.select.validationMessage;\n this.internals.setValidity(this.select.validity, validityMessage);\n this.applySlottedItemsToSelect();\n this.setFormValue();\n });\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 autoComplete={this.autocomplete}\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.
|
|
3
|
+
"version": "0.24.2-beta.1",
|
|
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,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as n}from"./p-91d08ab2.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 o=r;const a=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.autocomplete="off";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:"71db53aefc4e91127bb187391e8784b80c9c031b",tabIndex:this.focused?-1:0,onFocus:()=>this.select.focus(),onBlur:()=>this.select.blur()},e("dnn-fieldset",{key:"686666def84852d5eec8ca26020a2ef536c11135",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:"72a22c2ed76135939040468f06b266d58bf09005",class:"inner-container"},e("select",{key:"b7b0bdc4e3d541c0233138596f344b35c7abd397",ref:t=>this.select=t,autoComplete:this.autocomplete,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:"ba019ec9fae59544d47874536266b0836456613a",ref:t=>this.slot=t})),!this.valid&&e("svg",{key:"b2ec38181f04da922872fe60c97ade4b12f0965d",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"039006abe2dcd8be8a64cb25504eba1e613ef285",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)}};a.style=o;export{a as dnn_select};
|
|
2
|
-
//# sourceMappingURL=p-61c8c5d8.entry.js.map
|
|
@@ -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","handleBlur","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","invalid","label","required","helpText","id","onClick","ref","class","autoComplete","autocomplete","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 /** Defines the type of automatic completion the browser can use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete = \"off\";\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 autoComplete={this.autocomplete}\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":"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","ignoreList":[]}
|