@dnncommunity/dnn-elements 0.24.1-beta.2 → 0.24.1-beta.3
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 +8 -8
- package/dist/cjs/dnn-input.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-input/dnn-input.js +8 -8
- package/dist/collection/components/dnn-input/dnn-input.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-0ec5a0dd.entry.js +2 -0
- package/dist/dnn/p-0ec5a0dd.entry.js.map +1 -0
- package/dist/esm/dnn-input.entry.js +8 -8
- package/dist/esm/dnn-input.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/dnn/p-b8565ca0.entry.js +0 -2
- package/dist/dnn/p-b8565ca0.entry.js.map +0 -1
|
@@ -122,7 +122,7 @@ const DnnInput = class {
|
|
|
122
122
|
if (this.type == "date" || this.type == "datetime-local" || this.type == "time") {
|
|
123
123
|
return false;
|
|
124
124
|
}
|
|
125
|
-
if (this.value
|
|
125
|
+
if (this.value === 0 || this.value === "0") {
|
|
126
126
|
return false;
|
|
127
127
|
}
|
|
128
128
|
return true;
|
|
@@ -162,13 +162,13 @@ const DnnInput = class {
|
|
|
162
162
|
}
|
|
163
163
|
render() {
|
|
164
164
|
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: '
|
|
165
|
+
return (index.h(index.Host, { key: 'e324b038b2d394db0e5cd2b31dcc32c6788771f2', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '1f875147c177e56d6f6d73243ec520ec6d05a824', 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: '145619b9f10a9010420550d9fbb8b1d9d3d08e8e', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
166
|
+
index.h("slot", { key: '1c149a5e25a1672031084877977a3f4698cdeb22', name: "prefix" }), index.h("input", { key: 'df5ed66d020073581b8bcc6c963d2b0bde53a080', 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() &&
|
|
167
|
+
index.h("slot", { key: '42272918ea32433d251431a87aa27c9a66d87b19', name: "suffix" }), !this.valid &&
|
|
168
|
+
index.h("svg", { key: 'bd6cbca1e36b3a20b61aedb9de1a47db5773bc99', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, index.h("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 &&
|
|
169
|
+
index.h("button", { key: '955b0024f84d1841193fa85c08a3636e10b79871', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
170
|
+
index.h("svg", { key: '4c3c4d6967cec2fdab93a33a4d5ea43e0f08ea70', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("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" &&
|
|
171
|
+
index.h("svg", { key: '86ea8f3b0a10f5e16fa04e70989011c4cb807de1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("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" })))))));
|
|
172
172
|
}
|
|
173
173
|
static get formAssociated() { return true; }
|
|
174
174
|
};
|
|
@@ -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){\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.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}
|
|
@@ -108,7 +108,7 @@ export class DnnInput {
|
|
|
108
108
|
if (this.type == "date" || this.type == "datetime-local" || this.type == "time") {
|
|
109
109
|
return false;
|
|
110
110
|
}
|
|
111
|
-
if (this.value
|
|
111
|
+
if (this.value === 0 || this.value === "0") {
|
|
112
112
|
return false;
|
|
113
113
|
}
|
|
114
114
|
return true;
|
|
@@ -148,13 +148,13 @@ export class DnnInput {
|
|
|
148
148
|
}
|
|
149
149
|
render() {
|
|
150
150
|
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: '
|
|
151
|
+
return (h(Host, { key: 'e324b038b2d394db0e5cd2b31dcc32c6788771f2', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '1f875147c177e56d6f6d73243ec520ec6d05a824', 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: '145619b9f10a9010420550d9fbb8b1d9d3d08e8e', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
152
|
+
h("slot", { key: '1c149a5e25a1672031084877977a3f4698cdeb22', name: "prefix" }), h("input", { key: 'df5ed66d020073581b8bcc6c963d2b0bde53a080', 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() &&
|
|
153
|
+
h("slot", { key: '42272918ea32433d251431a87aa27c9a66d87b19', name: "suffix" }), !this.valid &&
|
|
154
|
+
h("svg", { key: 'bd6cbca1e36b3a20b61aedb9de1a47db5773bc99', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("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 &&
|
|
155
|
+
h("button", { key: '955b0024f84d1841193fa85c08a3636e10b79871', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
156
|
+
h("svg", { key: '4c3c4d6967cec2fdab93a33a4d5ea43e0f08ea70', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("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" &&
|
|
157
|
+
h("svg", { key: '86ea8f3b0a10f5e16fa04e70989011c4cb807de1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("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" })))))));
|
|
158
158
|
}
|
|
159
159
|
static get is() { return "dnn-input"; }
|
|
160
160
|
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){\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":"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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"]}
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as l}from"./p-e1255160.js";var t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a([["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-
|
|
1
|
+
import{p as e,b as a}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as l}from"./p-e1255160.js";var t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a([["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-0ec5a0dd",[[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 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
|
|
@@ -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","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":[]}
|
|
@@ -118,7 +118,7 @@ const DnnInput = class {
|
|
|
118
118
|
if (this.type == "date" || this.type == "datetime-local" || this.type == "time") {
|
|
119
119
|
return false;
|
|
120
120
|
}
|
|
121
|
-
if (this.value
|
|
121
|
+
if (this.value === 0 || this.value === "0") {
|
|
122
122
|
return false;
|
|
123
123
|
}
|
|
124
124
|
return true;
|
|
@@ -158,13 +158,13 @@ const DnnInput = class {
|
|
|
158
158
|
}
|
|
159
159
|
render() {
|
|
160
160
|
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: '
|
|
161
|
+
return (h(Host, { key: 'e324b038b2d394db0e5cd2b31dcc32c6788771f2', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '1f875147c177e56d6f6d73243ec520ec6d05a824', 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: '145619b9f10a9010420550d9fbb8b1d9d3d08e8e', class: "inner-container" }, !this.shouldLabelFloat() &&
|
|
162
|
+
h("slot", { key: '1c149a5e25a1672031084877977a3f4698cdeb22', name: "prefix" }), h("input", { key: 'df5ed66d020073581b8bcc6c963d2b0bde53a080', 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() &&
|
|
163
|
+
h("slot", { key: '42272918ea32433d251431a87aa27c9a66d87b19', name: "suffix" }), !this.valid &&
|
|
164
|
+
h("svg", { key: 'bd6cbca1e36b3a20b61aedb9de1a47db5773bc99', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("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 &&
|
|
165
|
+
h("button", { key: '955b0024f84d1841193fa85c08a3636e10b79871', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
|
|
166
|
+
h("svg", { key: '4c3c4d6967cec2fdab93a33a4d5ea43e0f08ea70', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("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" &&
|
|
167
|
+
h("svg", { key: '86ea8f3b0a10f5e16fa04e70989011c4cb807de1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("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" })))))));
|
|
168
168
|
}
|
|
169
169
|
static get formAssociated() { return true; }
|
|
170
170
|
};
|
|
@@ -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){\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,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.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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.1-beta.
|
|
3
|
+
"version": "0.24.1-beta.3",
|
|
4
4
|
"description": "Dnn themed custom elements.",
|
|
5
5
|
"repository": "https://github.com/dnncommunity/dnn-elements",
|
|
6
6
|
"homepage": "https://dnncommunity.github.io/dnn-elements",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s}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.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){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:"aa5f465e99921edf4ad72d43850a4ec61db82b63",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"efcc3fdef3112c4bc6b9849791a7c14e73db6f26",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:"3960d9d47543b176a7abc3b52a0fbc3cb25dd6d7",class:"inner-container"},!this.shouldLabelFloat()&&e("slot",{key:"aa73dcac6b35e52e990671aba538534f9637f4bc",name:"prefix"}),e("input",{key:"6d3ef61fb96cd9a8700692fd106c2229ace40de8",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:"b42b82778454152f5e394da35a4e374a7ad31f8b",name:"suffix"}),!this.valid&&e("svg",{key:"86e5d273012f84ef4f88bfd1fcaada9450737d51",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"c55968eccc7276acce97d684c1a181c1fd005c4d",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:"8b033447cb43f4df5db1c4ee1b1affe49cb89c36",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&e("svg",{key:"394e8dec6a0fea4e35d96fb303357de90098751b",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"2bdeca00b1eb9617b77604fad342508350c6b1c0",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:"c2cc6007de544b80a8d4ed669df52cbd85f64c7e",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"a16287a7c27e992407f873538b3a01d302ae8a0a",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-b8565ca0.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){\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":[]}
|