@dnncommunity/dnn-elements 0.24.1-beta.3 → 0.24.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-input.cjs.entry.js +10 -7
- package/dist/cjs/dnn-input.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-input/dnn-input.js +10 -7
- package/dist/collection/components/dnn-input/dnn-input.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-e6bd0f5b.entry.js +2 -0
- package/dist/dnn/p-e6bd0f5b.entry.js.map +1 -0
- package/dist/esm/dnn-input.entry.js +10 -7
- package/dist/esm/dnn-input.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/dnn/p-0ec5a0dd.entry.js +0 -2
- package/dist/dnn/p-0ec5a0dd.entry.js.map +0 -1
|
@@ -113,6 +113,9 @@ const DnnInput = class {
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
shouldLabelFloat() {
|
|
116
|
+
if (this.type === "number" && isNaN(this.value)) {
|
|
117
|
+
return true;
|
|
118
|
+
}
|
|
116
119
|
if (this.focused) {
|
|
117
120
|
return false;
|
|
118
121
|
}
|
|
@@ -162,13 +165,13 @@ const DnnInput = class {
|
|
|
162
165
|
}
|
|
163
166
|
render() {
|
|
164
167
|
var _a;
|
|
165
|
-
return (index.h(index.Host, { key: '
|
|
166
|
-
index.h("slot", { key: '
|
|
167
|
-
index.h("slot", { key: '
|
|
168
|
-
index.h("svg", { key: '
|
|
169
|
-
index.h("button", { key: '
|
|
170
|
-
index.h("svg", { key: '
|
|
171
|
-
index.h("svg", { key: '
|
|
168
|
+
return (index.h(index.Host, { key: '9f535f190488150dab4acc288b3ec7e274600d2d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '916246e3ab9d6981a9403163de3854ef8a439826', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("div", { key: '79d7aea39ba02fbf7cda90e7f5733c107ff1bf9a', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
169
|
+
index.h("slot", { key: 'a3c1e36d64c30ae7f79af57715a4e3435d0b8cf3', name: "prefix" }), index.h("input", { key: '05ba34c716a61bca952b22a87072512cecc2e11b', ref: el => this.inputField = el, name: this.name, type: this.type, inputMode: this.getInputMode(), disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
|
|
170
|
+
index.h("slot", { key: '8463fa0fb1ec489b1d09643e6bf9f6df617d07c7', name: "suffix" }), !this.valid &&
|
|
171
|
+
index.h("svg", { key: '408bda1e95757c312bc99578ea05d658d9dc4b2e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, index.h("path", { key: '491e2aded33fcb4a0a3db665796ceaa087b06539', 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" })), this.allowShowPassword &&
|
|
172
|
+
index.h("button", { key: 'd71085f4bbda1e7a43e75a6dd037232ad9eb5a05', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
173
|
+
index.h("svg", { key: '0d9336e7c5defc77f1eb6144bc5dcc5bf73b0302', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '2e98406e3b4d0e9da313a91e5fbc0cd29374d4ae', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
|
|
174
|
+
index.h("svg", { key: '36ad77ed9be0985f5be172ab90d503bd9567d229', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '5072fc4ec3d6be6432d893abda46b083b1e4131d', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
|
|
172
175
|
}
|
|
173
176
|
static get formAssociated() { return true; }
|
|
174
177
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-input.entry.cjs.js","mappings":"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","names":["generateRandomId","h","Host"],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"version":3}
|
|
1
|
+
{"file":"dnn-input.entry.cjs.js","mappings":"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","names":["generateRandomId","h","Host"],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.type === \"number\" && isNaN(this.value as number)) {\n return true;\n }\n \n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"version":3}
|
|
@@ -99,6 +99,9 @@ export class DnnInput {
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
shouldLabelFloat() {
|
|
102
|
+
if (this.type === "number" && isNaN(this.value)) {
|
|
103
|
+
return true;
|
|
104
|
+
}
|
|
102
105
|
if (this.focused) {
|
|
103
106
|
return false;
|
|
104
107
|
}
|
|
@@ -148,13 +151,13 @@ export class DnnInput {
|
|
|
148
151
|
}
|
|
149
152
|
render() {
|
|
150
153
|
var _a;
|
|
151
|
-
return (h(Host, { key: '
|
|
152
|
-
h("slot", { key: '
|
|
153
|
-
h("slot", { key: '
|
|
154
|
-
h("svg", { key: '
|
|
155
|
-
h("button", { key: '
|
|
156
|
-
h("svg", { key: '
|
|
157
|
-
h("svg", { key: '
|
|
154
|
+
return (h(Host, { key: '9f535f190488150dab4acc288b3ec7e274600d2d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '916246e3ab9d6981a9403163de3854ef8a439826', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: '79d7aea39ba02fbf7cda90e7f5733c107ff1bf9a', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
155
|
+
h("slot", { key: 'a3c1e36d64c30ae7f79af57715a4e3435d0b8cf3', name: "prefix" }), h("input", { key: '05ba34c716a61bca952b22a87072512cecc2e11b', ref: el => this.inputField = el, name: this.name, type: this.type, inputMode: this.getInputMode(), disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
|
|
156
|
+
h("slot", { key: '8463fa0fb1ec489b1d09643e6bf9f6df617d07c7', name: "suffix" }), !this.valid &&
|
|
157
|
+
h("svg", { key: '408bda1e95757c312bc99578ea05d658d9dc4b2e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '491e2aded33fcb4a0a3db665796ceaa087b06539', 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" })), this.allowShowPassword &&
|
|
158
|
+
h("button", { key: 'd71085f4bbda1e7a43e75a6dd037232ad9eb5a05', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
159
|
+
h("svg", { key: '0d9336e7c5defc77f1eb6144bc5dcc5bf73b0302', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '2e98406e3b4d0e9da313a91e5fbc0cd29374d4ae', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
|
|
160
|
+
h("svg", { key: '36ad77ed9be0985f5be172ab90d503bd9567d229', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '5072fc4ec3d6be6432d893abda46b083b1e4131d', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
|
|
158
161
|
}
|
|
159
162
|
static get is() { return "dnn-input"; }
|
|
160
163
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-input.js","sourceRoot":"","sources":["../../../src/components/dnn-input/dnn-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"]}
|
|
1
|
+
{"version":3,"file":"dnn-input.js","sourceRoot":"","sources":["../../../src/components/dnn-input/dnn-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgB,eAAe,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE;;;GAGG;AAOH,MAAM,OAAO,QAAQ;;oBAGqH,MAAM;;;;;;;4BAqB/G,KAAK;;;;;;;;;;;;uBAoEjB,KAAK;qBACP,IAAI;;IA1BrB,6GAA6G;IAE7G,KAAK,CAAC,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,oDAAoD;IAEpD,KAAK,CAAC,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;YAC1C,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC5C,CAAC;IAWD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACpC,CAAC;IAED,gBAAgB;QACd,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;YACxC,IAAI,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;YAC9E,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,0EAA0E;IAC1E,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC;IAEO,WAAW,CAAC,CAAa;QAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC;YAC7C,oDAAoD;YACpD,OAAO;QACT,CAAC;QACD,IAAI,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1F,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,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,QAAQ,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAC5B,CAAC;YACC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACxB,CAAC;YACC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;YACvB,OAAO;QACT,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,KAAe,CAAC,EAAE,CAAC;YAC1D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,CAAC;YAChF,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,EAAE,CAAC;YAC3C,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,YAAY;;QAClB,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,GAAG,GAAG,UAAU,CAAC,MAAA,IAAI,CAAC,GAAG,0CAAE,QAAQ,EAAE,CAAC,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;gBAC5D,OAAO,SAAS,CAAC;YACnB,CAAC;YAED,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1F,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,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAEpC,qEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,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,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK;gBAElC,4DAAK,KAAK,EAAC,iBAAiB;oBACzB,CAAC,IAAI,CAAC,gBAAgB,EAAE;wBACvB,6DAAM,IAAI,EAAC,QAAQ,GAAQ;oBAE7B,8DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,GAC7B;oBACD,CAAC,IAAI,CAAC,gBAAgB,EAAE;wBACvB,6DAAM,IAAI,EAAC,QAAQ,GAAQ;oBAE5B,CAAC,IAAI,CAAC,KAAK;wBACV,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,OAAO;4BAC5E,6DAAM,CAAC,EAAC,0oBAA0oB,GAAE,CAChpB;oBAEP,IAAI,CAAC,iBAAiB;wBACrB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE;4BACzE,IAAI,CAAC,IAAI,KAAK,MAAM;gCACnB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB;oCAC9D,6DAAM,CAAC,EAAC,upBAAupB,GAAE,CAC7pB;4BAEP,IAAI,CAAC,IAAI,IAAI,UAAU;gCACtB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB;oCAC9D,6DAAM,CAAC,EAAC,oiBAAoiB,GAAE,CAC1iB,CAED,CAEP,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.type === \"number\" && isNaN(this.value as number)) {\n return true;\n }\n \n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\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
|
|
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-61c8c5d8",[[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 e,H as s}from"./p-91d08ab2.js";import{g as n}from"./p-5df01911.js";const h=":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%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}";const a=h;const r=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",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.type="text";this.label=undefined;this.name=undefined;this.value=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.min=undefined;this.max=undefined;this.minlength=undefined;this.maxlength=undefined;this.multiple=undefined;this.pattern=undefined;this.readonly=undefined;this.step=undefined;this.disableValidityReporting=undefined;this.allowShowPassword=undefined;this.inputmode=undefined;this.focused=false;this.valid=true}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){requestAnimationFrame((()=>{var t=this.inputField.validity;var i=t.valid?"":this.inputField.validationMessage;this.internals.setValidity(this.inputField.validity,i)}))}formResetCallback(){this.inputField.setCustomValidity("");this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){if(this.type==="number"&&t.data==="-"){return}var i=t.target.value;this.value=i;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(this.value)}handleInvalid(){this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}switchPasswordVisibility(){if(this.type==="password"){this.type="text";return}if(this.type==="text"){this.type="password";return}}shouldLabelFloat(){if(this.type==="number"&&isNaN(this.value)){return true}if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}if(this.type=="date"||this.type=="datetime-local"||this.type=="time"){return false}if(this.value===0||this.value==="0"){return false}return true}getInputMode(){var t;if(this.inputmode!=undefined){return this.inputmode}if(this.type==="number"){var i=parseFloat((t=this.min)===null||t===void 0?void 0:t.toString());if((this.step===1||this.step==undefined)&&i>=0){return"numeric"}return"decimal"}if(this.type==="tel"){return"tel"}if(this.type==="url"){return"url"}if(this.type==="email"){return"email"}if(this.type==="search"){return"search"}return"text"}handleBlur(){this.focused=false;var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"9f535f190488150dab4acc288b3ec7e274600d2d",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"916246e3ab9d6981a9403163de3854ef8a439826",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.inputField.focus(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},e("div",{key:"79d7aea39ba02fbf7cda90e7f5733c107ff1bf9a",class:"inner-container"},!this.shouldLabelFloat()&&e("slot",{key:"a3c1e36d64c30ae7f79af57715a4e3435d0b8cf3",name:"prefix"}),e("input",{key:"05ba34c716a61bca952b22a87072512cecc2e11b",ref:t=>this.inputField=t,name:this.name,type:this.type,inputMode:this.getInputMode(),disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,multiple:this.multiple,pattern:this.pattern,readonly:this.readonly,step:this.step,value:this.value,onBlur:()=>this.handleBlur(),onFocus:()=>this.focused=true,onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId}),!this.shouldLabelFloat()&&e("slot",{key:"8463fa0fb1ec489b1d09643e6bf9f6df617d07c7",name:"suffix"}),!this.valid&&e("svg",{key:"408bda1e95757c312bc99578ea05d658d9dc4b2e",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"491e2aded33fcb4a0a3db665796ceaa087b06539",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"})),this.allowShowPassword&&e("button",{key:"d71085f4bbda1e7a43e75a6dd037232ad9eb5a05",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&e("svg",{key:"0d9336e7c5defc77f1eb6144bc5dcc5bf73b0302",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"2e98406e3b4d0e9da313a91e5fbc0cd29374d4ae",d:"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z"})),this.type=="password"&&e("svg",{key:"36ad77ed9be0985f5be172ab90d503bd9567d229",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"5072fc4ec3d6be6432d893abda46b083b1e4131d",d:"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z"}))))))}static get formAssociated(){return true}};r.style=a;export{r as dnn_input};
|
|
2
|
+
//# sourceMappingURL=p-e6bd0f5b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnInputCss","DnnInputStyle0","DnnInput","checkValidity","validity","this","inputField","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","componentWillLoad","labelId","generateRandomId","componentDidLoad","requestAnimationFrame","validityMessage","internals","formResetCallback","value","setFormValue","handleInput","e","type","data","target","valueInput","emit","handleInvalid","handleChange","valueChange","name","FormData","append","toString","switchPasswordVisibility","shouldLabelFloat","isNaN","focused","getInputMode","inputmode","min","parseFloat","_a","step","handleBlur","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","label","required","helpText","id","disabled","floatLabel","onClick","class","inputMode","autoComplete","autocomplete","max","minlength","maxlength","multiple","pattern","readonly","onInput","onInvalid","onChange","xmlns","viewBox","d","allowShowPassword"],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.type === \"number\" && isNaN(this.value as number)) {\n return true;\n }\n \n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -109,6 +109,9 @@ const DnnInput = class {
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
shouldLabelFloat() {
|
|
112
|
+
if (this.type === "number" && isNaN(this.value)) {
|
|
113
|
+
return true;
|
|
114
|
+
}
|
|
112
115
|
if (this.focused) {
|
|
113
116
|
return false;
|
|
114
117
|
}
|
|
@@ -158,13 +161,13 @@ const DnnInput = class {
|
|
|
158
161
|
}
|
|
159
162
|
render() {
|
|
160
163
|
var _a;
|
|
161
|
-
return (h(Host, { key: '
|
|
162
|
-
h("slot", { key: '
|
|
163
|
-
h("slot", { key: '
|
|
164
|
-
h("svg", { key: '
|
|
165
|
-
h("button", { key: '
|
|
166
|
-
h("svg", { key: '
|
|
167
|
-
h("svg", { key: '
|
|
164
|
+
return (h(Host, { key: '9f535f190488150dab4acc288b3ec7e274600d2d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '916246e3ab9d6981a9403163de3854ef8a439826', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: '79d7aea39ba02fbf7cda90e7f5733c107ff1bf9a', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
165
|
+
h("slot", { key: 'a3c1e36d64c30ae7f79af57715a4e3435d0b8cf3', name: "prefix" }), h("input", { key: '05ba34c716a61bca952b22a87072512cecc2e11b', ref: el => this.inputField = el, name: this.name, type: this.type, inputMode: this.getInputMode(), disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
|
|
166
|
+
h("slot", { key: '8463fa0fb1ec489b1d09643e6bf9f6df617d07c7', name: "suffix" }), !this.valid &&
|
|
167
|
+
h("svg", { key: '408bda1e95757c312bc99578ea05d658d9dc4b2e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '491e2aded33fcb4a0a3db665796ceaa087b06539', 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" })), this.allowShowPassword &&
|
|
168
|
+
h("button", { key: 'd71085f4bbda1e7a43e75a6dd037232ad9eb5a05', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
169
|
+
h("svg", { key: '0d9336e7c5defc77f1eb6144bc5dcc5bf73b0302', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '2e98406e3b4d0e9da313a91e5fbc0cd29374d4ae', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
|
|
170
|
+
h("svg", { key: '36ad77ed9be0985f5be172ab90d503bd9567d229', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '5072fc4ec3d6be6432d893abda46b083b1e4131d', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
|
|
168
171
|
}
|
|
169
172
|
static get formAssociated() { return true; }
|
|
170
173
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-input.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"version":3}
|
|
1
|
+
{"file":"dnn-input.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,gzBAAgzB,CAAC;AACr0B,uBAAe,WAAW;;MCYb,QAAQ;;;;;;;;;;;;oBAGqH,MAAM;;;;;;;4BAqB/G,KAAK;;;;;;;;;;;;uBAoEjB,KAAK;qBACP,IAAI;;;IAxBrB,MAAM,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;SACrE;QACD,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KACjC;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;IAWD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;KACnC;IAED,gBAAgB;QACd,qBAAqB,CAAC;YACpB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;YACxC,IAAI,eAAe,GAAG,QAAQ,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;YAC9E,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;SACvE,CAAC,CAAC;KACJ;;IAGD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAEO,WAAW,CAAC,CAAa;QAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,EAAE;;YAE5C,OAAO;SACR;QACD,IAAI,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;KACzF;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,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,QAAQ,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACnC;KACF;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAC5B;YACE,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;YACnB,OAAO;SACR;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACxB;YACE,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;YACvB,OAAO;SACR;KACF;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,KAAe,CAAC,EAAE;YACzD,OAAO,IAAI,CAAC;SACb;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE;YAC/C,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE;YAC/E,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,EAAE;YAC1C,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;KACb;IAEO,YAAY;;QAClB,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,EAAE;YAC/B,OAAO,IAAI,CAAC,SAAS,CAAC;SACvB;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI,GAAG,GAAG,UAAU,CAAC,MAAA,IAAI,CAAC,GAAG,0CAAE,QAAQ,EAAE,CAAC,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,KAAK,GAAG,IAAI,CAAC,EAAE;gBAC3D,OAAO,SAAS,CAAC;aAClB;YAED,OAAO,SAAS,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;YACvB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;YACvB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YACzB,OAAO,OAAO,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,OAAO,QAAQ,CAAC;SACjB;QAED,OAAO,MAAM,CAAC;KACf;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;KACzF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAEpC,qEACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,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,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACnC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACvD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,IAElC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAE7B,8DACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,GAAG,EAAE,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,GAC7B,EACD,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAE5B,CAAC,IAAI,CAAC,KAAK;YACV,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,OAAO,IAC5E,6DAAM,CAAC,EAAC,0oBAA0oB,GAAE,CAChpB,EAEP,IAAI,CAAC,iBAAiB;YACrB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,wBAAwB,EAAE,IACzE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,IAC9D,6DAAM,CAAC,EAAC,upBAAupB,GAAE,CAC7pB,EAEP,IAAI,CAAC,IAAI,IAAI,UAAU;gBACtB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,gBAAgB,IAC9D,6DAAM,CAAC,EAAC,oiBAAoiB,GAAE,CAC1iB,CAED,CAEP,CACO,CACV,EACP;KACH;;;;;;;","names":[],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.type === \"number\" && isNaN(this.value as number)) {\n return true;\n }\n \n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s}from"./p-91d08ab2.js";import{g as n}from"./p-5df01911.js";const h=":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%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}";const r=h;const a=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",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.type="text";this.label=undefined;this.name=undefined;this.value=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.min=undefined;this.max=undefined;this.minlength=undefined;this.maxlength=undefined;this.multiple=undefined;this.pattern=undefined;this.readonly=undefined;this.step=undefined;this.disableValidityReporting=undefined;this.allowShowPassword=undefined;this.inputmode=undefined;this.focused=false;this.valid=true}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){requestAnimationFrame((()=>{var t=this.inputField.validity;var i=t.valid?"":this.inputField.validationMessage;this.internals.setValidity(this.inputField.validity,i)}))}formResetCallback(){this.inputField.setCustomValidity("");this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){if(this.type==="number"&&t.data==="-"){return}var i=t.target.value;this.value=i;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(this.value)}handleInvalid(){this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}switchPasswordVisibility(){if(this.type==="password"){this.type="text";return}if(this.type==="text"){this.type="password";return}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}if(this.type=="date"||this.type=="datetime-local"||this.type=="time"){return false}if(this.value===0||this.value==="0"){return false}return true}getInputMode(){var t;if(this.inputmode!=undefined){return this.inputmode}if(this.type==="number"){var i=parseFloat((t=this.min)===null||t===void 0?void 0:t.toString());if((this.step===1||this.step==undefined)&&i>=0){return"numeric"}return"decimal"}if(this.type==="tel"){return"tel"}if(this.type==="url"){return"url"}if(this.type==="email"){return"email"}if(this.type==="search"){return"search"}return"text"}handleBlur(){this.focused=false;var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"e324b038b2d394db0e5cd2b31dcc32c6788771f2",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"1f875147c177e56d6f6d73243ec520ec6d05a824",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.inputField.focus(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},e("div",{key:"145619b9f10a9010420550d9fbb8b1d9d3d08e8e",class:"inner-container"},!this.shouldLabelFloat()&&e("slot",{key:"1c149a5e25a1672031084877977a3f4698cdeb22",name:"prefix"}),e("input",{key:"df5ed66d020073581b8bcc6c963d2b0bde53a080",ref:t=>this.inputField=t,name:this.name,type:this.type,inputMode:this.getInputMode(),disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,multiple:this.multiple,pattern:this.pattern,readonly:this.readonly,step:this.step,value:this.value,onBlur:()=>this.handleBlur(),onFocus:()=>this.focused=true,onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId}),!this.shouldLabelFloat()&&e("slot",{key:"42272918ea32433d251431a87aa27c9a66d87b19",name:"suffix"}),!this.valid&&e("svg",{key:"bd6cbca1e36b3a20b61aedb9de1a47db5773bc99",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"58bdb807243ee068b5149b389b5958c5396c896c",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"})),this.allowShowPassword&&e("button",{key:"955b0024f84d1841193fa85c08a3636e10b79871",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&e("svg",{key:"4c3c4d6967cec2fdab93a33a4d5ea43e0f08ea70",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"bee8a655d6d499cff009fe9392aafe007dbd4720",d:"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z"})),this.type=="password"&&e("svg",{key:"86ea8f3b0a10f5e16fa04e70989011c4cb807de1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"5b7b45e51251475233c40c21efb9a0fe3e06c0a4",d:"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z"}))))))}static get formAssociated(){return true}};a.style=r;export{a as dnn_input};
|
|
2
|
-
//# sourceMappingURL=p-0ec5a0dd.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnInputCss","DnnInputStyle0","DnnInput","checkValidity","validity","this","inputField","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","componentWillLoad","labelId","generateRandomId","componentDidLoad","requestAnimationFrame","validityMessage","internals","formResetCallback","value","setFormValue","handleInput","e","type","data","target","valueInput","emit","handleInvalid","handleChange","valueChange","name","FormData","append","toString","switchPasswordVisibility","shouldLabelFloat","focused","getInputMode","inputmode","min","parseFloat","_a","step","handleBlur","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","label","required","helpText","id","disabled","floatLabel","onClick","class","inputMode","autoComplete","autocomplete","max","minlength","maxlength","multiple","pattern","readonly","onInput","onInvalid","onChange","xmlns","viewBox","d","allowShowPassword"],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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}\ninput{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n text-align: var(--input-text-align);\n width: 100%;\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 margin-right: 0.5em;\n }\n}\nbutton.show-password{\n border: none;\n background-color: transparent;\n margin: 0;\n padding: 0;\n svg{\n height: 1em;\n width: auto;\n fill: var(--foreground);\n transform: scale(1.5);\n }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n tag: 'dnn-input',\n styleUrl: 'dnn-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnInput {\n\n /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n \n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input when used in forms. */\n @Prop() name: string;\n\n /** The value of the input. */\n @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n \n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum allowed value. */\n @Prop() min: number | string;\n\n /** Defines the maximum allowed value. */\n @Prop() max: number | string;\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** If true, allows multiple emails to be entered separated by commas. */\n @Prop() multiple: boolean;\n\n /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n @Prop() pattern: string;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n @Prop() step: string | number;\n\n /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n @Prop() disableValidityReporting: boolean;\n\n /** If true, enables users to switch between a password and a text field (to view their password). */\n @Prop() allowShowPassword: boolean;\n\n /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n * This allows a browser to display an appropriate virtual keyboard.\n */\n @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n \n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n \n @State() focused = false;\n @State() valid = true;\n \n @AttachInternals() internals: ElementInternals;\n \n private inputField!: HTMLInputElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n var validity = this.inputField.validity;\n var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n this.internals.setValidity(this.inputField.validity, validityMessage);\n });\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(e: InputEvent): void {\n if (this.type === \"number\" && e.data === \"-\") {\n // Ignore the minus sign if the input type is number\n return;\n }\n var value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined){\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n private switchPasswordVisibility(){\n if (this.type === \"password\" )\n {\n this.type = \"text\";\n return;\n }\n if (this.type === \"text\")\n {\n this.type = \"password\";\n return;\n }\n }\n\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n return false;\n }\n\n if (this.value === 0 || this.value === \"0\") {\n return false;\n }\n \n return true;\n }\n\n private getInputMode(): string {\n if (this.inputmode != undefined) {\n return this.inputmode;\n }\n\n if (this.type === \"number\") {\n var min = parseFloat(this.min?.toString());\n if ((this.step === 1 || this.step == undefined) && min >= 0) {\n return \"numeric\";\n }\n\n return \"decimal\";\n }\n\n if (this.type === \"tel\") {\n return \"tel\";\n }\n\n if (this.type === \"url\") {\n return \"url\";\n }\n\n if (this.type === \"email\") {\n return \"email\";\n }\n\n if (this.type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.inputField.focus()}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <div class=\"inner-container\">\n {!this.shouldLabelFloat() &&\n <slot name=\"prefix\"></slot>\n }\n <input\n ref={el => this.inputField = el}\n name={this.name}\n type={this.type}\n inputMode={this.getInputMode()}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n min={this.min}\n max={this.max}\n minlength={this.minlength}\n maxlength={this.maxlength}\n multiple={this.multiple}\n pattern={this.pattern}\n readonly={this.readonly}\n step={this.step}\n value={this.value}\n onBlur={() => this.handleBlur()}\n onFocus={() => this.focused = true}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n />\n {!this.shouldLabelFloat() &&\n <slot name=\"suffix\"></slot>\n }\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 {this.allowShowPassword &&\n <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n {this.type === \"text\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n </svg>\n }\n {this.type == \"password\" &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n </svg>\n }\n </button>\n }\n </div>\n </dnn-fieldset>\n </Host>\n );\n } \n}\n"],"mappings":"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","ignoreList":[]}
|