diff --git a/packages/stencil-library/licenses.json b/packages/stencil-library/licenses.json index af32535f6..48f1aadbc 100644 --- a/packages/stencil-library/licenses.json +++ b/packages/stencil-library/licenses.json @@ -1,94 +1,15 @@ { - "@babel/code-frame@7.12.11": { - "licenses": "MIT", - "repository": "https://github.com/babel/babel", - "publisher": "Sebastian McKenzie", - "email": "sebmck@gmail.com", - "path": "node_modules\\@babel\\code-frame", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@babel\\code-frame\\LICENSE" - }, "@dnncommunity/dnn-elements@0.23.3-alpha.7": { "licenses": "MIT", "repository": "https://github.com/dnncommunity/dnn-elements", "path": "", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md" - }, - "@eslint/eslintrc@0.4.3": { - "licenses": "MIT", - "repository": "https://github.com/eslint/eslintrc", - "publisher": "Nicholas C. Zakas", - "path": "node_modules\\@eslint\\eslintrc", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@eslint\\eslintrc\\LICENSE" - }, - "@humanwhocodes/config-array@0.5.0": { - "licenses": "Apache-2.0", - "repository": "https://github.com/humanwhocodes/config-array", - "publisher": "Nicholas C. Zakas", - "path": "node_modules\\@humanwhocodes\\config-array", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@humanwhocodes\\config-array\\LICENSE" - }, - "@stencil/eslint-plugin@0.4.0": { - "licenses": "MIT", - "repository": "https://github.com/ionic-team/stencil-eslint", - "path": "node_modules\\@stencil\\eslint-plugin", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@stencil\\eslint-plugin\\LICENSE.md" - }, - "eslint-utils@2.1.0": { - "licenses": "MIT", - "repository": "https://github.com/mysticatea/eslint-utils", - "publisher": "Toru Nagashima", - "path": "node_modules\\eslint\\node_modules\\eslint-utils", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\node_modules\\eslint-utils\\LICENSE" - }, - "eslint-visitor-keys@1.3.0": { - "licenses": "Apache-2.0", - "repository": "https://github.com/eslint/eslint-visitor-keys", - "publisher": "Toru Nagashima", - "path": "node_modules\\espree\\node_modules\\eslint-visitor-keys", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\node_modules\\eslint-visitor-keys\\LICENSE" - }, - "eslint@7.32.0": { - "licenses": "MIT", - "repository": "https://github.com/eslint/eslint", - "publisher": "Nicholas C. Zakas", - "email": "nicholas+npm@nczconsulting.com", - "path": "node_modules\\eslint", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\LICENSE" - }, - "espree@7.3.1": { - "licenses": "BSD-2-Clause", - "repository": "https://github.com/eslint/espree", - "publisher": "Nicholas C. Zakas", - "email": "nicholas+npm@nczconsulting.com", - "path": "node_modules\\espree", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\LICENSE" - }, - "ignore@4.0.6": { - "licenses": "MIT", - "repository": "https://github.com/kaelzhang/node-ignore", - "publisher": "kael", - "path": "node_modules\\ignore", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\ignore\\LICENSE-MIT" - }, - "tslib@1.14.1": { - "licenses": "0BSD", - "repository": "https://github.com/Microsoft/tslib", - "publisher": "Microsoft Corp.", - "path": "node_modules\\tslib", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tslib\\LICENSE.txt" - }, - "tsutils@3.0.0": { - "licenses": "MIT", - "repository": "https://github.com/ajafff/tsutils", - "publisher": "Klaus Meinhardt", - "path": "node_modules\\tsutils", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tsutils\\LICENSE" + "licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md" }, - "typescript@4.9.5": { + "typescript@5.2.2": { "licenses": "Apache-2.0", "repository": "https://github.com/Microsoft/TypeScript", "publisher": "Microsoft Corp.", "path": "node_modules\\typescript", - "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt" + "licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt" } } diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 89f3290a7..43f5aa725 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -329,7 +329,7 @@ export namespace Components { */ "checkValidity": () => Promise; /** - * If true, the browser default validation message will be hidden. + * @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */ "disableValidityReporting": boolean; /** @@ -1405,7 +1405,7 @@ declare namespace LocalJSX { */ "autocomplete"?: string; /** - * If true, the browser default validation message will be hidden. + * @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */ "disableValidityReporting"?: boolean; /** diff --git a/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss b/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss index 0e227fb93..382b757d1 100644 --- a/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss +++ b/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.scss @@ -16,46 +16,28 @@ /** @prop --contast-text-align: Allows customizing the text alignment of the contast indicator text. */ --contast-text-align: left; } +dnn-fieldset{ + width: 100%; +} -.container{ - border: 1px solid var(--foreground, #000); - border-radius: var(--control-radius, 3px); - padding: 0.75em; +.inner-container{ display: flex; justify-content: space-between; - gap: 0.1em; position: relative; + width: 100%; background-color: var(--background); - .inner-container{ - display: flex; - justify-content: space-between; - position: relative; - width: 100%; - background-color: var(--background); - } - label{ - display: inline-block; - position: absolute; - left: 0.5em; - top: -1.5em; - padding: 0 0.5em; - background-color: var(--background); - white-space: nowrap; - max-width: 100%; - border-radius: var(--control-radius); - font-size: 1em; - } - button{ - margin: 0 0 0 1em; - padding: 0; - border: none; - background-color: transparent; - width: 1em; - height: 1em; - svg{ - fill: var(--dnn-color-primary); - transform: scale(1.5); - } +} + +button{ + margin: 0 0 0 1em; + padding: 0; + border: none; + background-color: transparent; + width: 1em; + height: 1em; + svg{ + fill: var(--dnn-color-primary); + transform: scale(1.5); } } diff --git a/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.tsx b/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.tsx index efe9adbaf..e20a810d5 100644 --- a/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.tsx +++ b/packages/stencil-library/src/components/dnn-color-input/dnn-color-input.tsx @@ -74,6 +74,7 @@ export class DnnColorInput { @Event() colorInput: EventEmitter; @State() currentColor: DnnColorInfo; + @State() focused: boolean; @AttachInternals() internals: ElementInternals; @@ -101,6 +102,7 @@ export class DnnColorInput { this.setFormValue(); } + // eslint-disable-next-line @stencil-community/own-methods-must-be-private formResetCallback() { this.internals.setValidity({}); this.color = this.originalColor.color; @@ -119,17 +121,6 @@ export class DnnColorInput { private labelId: string; - private getContainerClasses() { - const classes: string[] = ["container"]; - - if (this.readonly) - { - classes.push("disabled"); - } - - return classes.join(" "); - } - private showPicker(): void { this.currentColor = { color: this.color, @@ -150,7 +141,7 @@ export class DnnColorInput { } private setFormValue(){ - if (this.name){ + if (this.name != undefined){ var formData = new FormData(); formData.append(this.name, JSON.stringify(this.currentColor)); this.internals.setFormValue(formData); @@ -160,13 +151,13 @@ export class DnnColorInput { render() { return ( -
-
{this.useLightColor && @@ -191,6 +182,8 @@ export class DnnColorInput {
-
-
{this.helpText}
+ this.colorModal = el} backdropDismiss={false}> {this.currentColor &&
diff --git a/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss b/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss index f93c8dbdb..ab3e1b47e 100644 --- a/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss +++ b/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss @@ -2,35 +2,35 @@ display: inline-block; /** @prop --foreground: Defines the foreground color. */ - --foreground: var(--dnn-color-foreground, #000); + --fieldset-foreground: var(--dnn-color-foreground, #000); /** @prop --background: Defines the background color. */ - --background: var(--dnn-color-background, #fff); + --fieldset-background: var(--dnn-color-background, #fff); /** @prop --focus-color: Defines the color when the component is focused. */ - --focus-color: var(--dnn-color-primary, #3792ED); + --fieldset-focus-color: var(--dnn-color-primary, #3792ED); /** @prop --danger-color: Defines the danger color used for invalid data. */ - --danger-color: var(--dnn-color-danger, #900); + --fieldset-danger-color: var(--dnn-color-danger, #900); /** @prop --control-radius: Defines the radius for the control corners. */ - --control-radius: var(--dnn-controls-radius, 3px); + --fieldset-control-radius: var(--dnn-controls-radius, 3px); } .container{ - border: 1px solid var(--foreground, #000); - border-radius: var(--control-radius, 3px); + border: 1px solid var(--fieldset-foreground, #000); + border-radius: var(--fieldset-control-radius, 3px); padding: 0.75em; display: flex; justify-content: space-between; gap: 0.1em; position: relative; - background-color: var(--background); + background-color: var(--fieldset-background); margin-top: 1em; .inner-container{ position: relative; width: 100%; - background-color: var(--background); + background-color: var(--fieldset-background); } label{ display: inline-flex; @@ -40,21 +40,21 @@ left: 0.5em; top: -1.5em; padding: 0 0.5em; - background-color: var(--background); + background-color: var(--fieldset-background); white-space: nowrap; max-width: 100%; - border-radius: var(--control-radius); + border-radius: var(--fieldset-control-radius); font-size: 1em; } &.focused{ - border: 1px solid var(--focus-color); - box-shadow: 0 0 0 1px var(--focus-color); + border: 1px solid var(--fieldset-focus-color); + box-shadow: 0 0 0 1px var(--fieldset-focus-color); &.invalid{ - border: 1px solid var(--danger-color); - box-shadow: 0 0 0 1px var(--danger-color); + border: 1px solid var(--fieldset-danger-color); + box-shadow: 0 0 0 1px var(--fieldset-danger-color); } input{ - color: var(--foreground, #000); + color: var(--fieldset-foreground, #000); } } &.float-label{ @@ -68,7 +68,7 @@ opacity: 0.5; } &.invalid{ - border-color: var(--danger-color); + border-color: var(--fieldset-danger-color); } } @@ -79,7 +79,7 @@ margin: 0.25em; } .error-message{ - color: var(--danger-color); + color: var(--fieldset-danger-color); font-style: normal; font-weight: bold; } \ No newline at end of file diff --git a/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.tsx b/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.tsx index 2efd17ae0..0bdaefa85 100644 --- a/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.tsx +++ b/packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.tsx @@ -68,11 +68,10 @@ export class DnnFieldset { /** Sets the validity of the field. */ @Method() async setValidity(valid: boolean, message?: string) { - this.valid = valid; + this.invalid = !valid; this.customValidityMessage = message; } - @State() valid: boolean = true; @State() customValidityMessage: string; private getContainerClasses() { @@ -113,12 +112,12 @@ export class DnnFieldset {
- {!this.valid && this.customValidityMessage && + {this.invalid && this.customValidityMessage &&
{this.customValidityMessage}
} - {this.valid && + {!this.invalid &&
{this.helpText}
} diff --git a/packages/stencil-library/src/components/dnn-input/dnn-input.scss b/packages/stencil-library/src/components/dnn-input/dnn-input.scss index 8c007de61..bf886c063 100644 --- a/packages/stencil-library/src/components/dnn-input/dnn-input.scss +++ b/packages/stencil-library/src/components/dnn-input/dnn-input.scss @@ -20,89 +20,25 @@ --input-text-align: left; } -.container{ - border: 1px solid var(--foreground, #000); - border-radius: var(--control-radius, 3px); - padding: 0.75em; +dnn-fieldset{ + width: 100%; +} + +.inner-container{ display: flex; justify-content: space-between; - gap: 0.1em; position: relative; - background-color: var(--background); - .inner-container{ - display: flex; - justify-content: space-between; - position: relative; - width: 100%; - background-color: var(--background); - } - label{ - display: inline-block; - position: absolute; - opacity: 0.6; - transition: all 150ms ease-in-out; - left: 0; - top: 0; - padding: 0 0.5em; - background-color: var(--background); - white-space: nowrap; - max-width: 100%; - border-radius: var(--control-radius); - font-size: 1em; - } - input{ - border: none; - outline: none; - background-color: var(--background); - color: transparent; - text-align: var(--input-text-align); - width: 100%; - } - &.focused{ - border: 1px solid var(--focus-color); - box-shadow: 0 0 0 1px var(--focus-color); - &.invalid{ - border: 1px solid var(--danger-color); - box-shadow: 0 0 0 1px var(--danger-color); - } - label{ - opacity: 1; - left: 0.5em; - top: -1.5em; - } - input{ - color: var(--foreground, #000); - } - } - &.has-value{ - label{ - opacity: 1; - left: 0.5em; - top: -1.5em; - } - input{ - color: var(--foreground, #000); - } - } - &.disabled{ - opacity: 0.5; - } - &.invalid{ - border-color: var(--danger-color); - } -} - -.help-text, .error-message{ - font-style: italic; - opacity: 0.7; - font-size: 0.8em; - margin: 0.25em; + width: 100%; } -.error-message{ - color: var(--danger-color); - font-style: normal; - font-weight: bold; +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; } @@ -112,6 +48,7 @@ svg{ width: 1em; height: 1em; transform: scale(1.5); + margin-right: 0.5em; } } button.show-password{ diff --git a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx index 64c6ae58a..f88cda4fe 100644 --- a/packages/stencil-library/src/components/dnn-input/dnn-input.tsx +++ b/packages/stencil-library/src/components/dnn-input/dnn-input.tsx @@ -61,7 +61,7 @@ export class DnnInput { /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */ @Prop() step: string | number; - /** If true, the browser default validation message will be hidden. */ + /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */ @Prop() disableValidityReporting: boolean; /** If true, enables users to switch between a password and a text field (to view their password). */ @@ -108,34 +108,6 @@ export class DnnInput { this.internals.setFormValue(""); } - private getContainerClasses() { - const classes: string[] = ["container"]; - if (this.focused) { - classes.push("focused"); - } - - if (this.value !== undefined && this.value !== "") - { - classes.push("has-value"); - } - - if (this.required) - { - classes.push("required"); - } - - if (this.disabled) - { - classes.push("disabled"); - } - - if (!this.valid){ - classes.push("invalid"); - } - - return classes.join(" "); - } - private handleInput(value: string): void { this.value = value; var valid = this.inputField.checkValidity(); @@ -151,9 +123,6 @@ export class DnnInput { } private handleChange() { - if (!this.disableValidityReporting) { - this.inputField.reportValidity(); - } this.valueChange.emit(this.value); if (this.name != undefined){ var data = new FormData(); @@ -175,19 +144,35 @@ export class DnnInput { } } + private shouldLabelFloat(): boolean { + 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; + } + + return true; + } + render() { return ( -
!this.focused && this.inputField.focus()} >
- {this.label && - - } this.inputField = el} @@ -234,15 +219,7 @@ export class DnnInput { }
-
- {!this.valid && this.customValidityMessage && -
- {this.customValidityMessage} -
- } - {this.valid && -
{this.helpText}
- } + ); } diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx index 15f698d65..2409af1d1 100644 --- a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx +++ b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx @@ -142,6 +142,7 @@ export class DnnExampleForm { dnn-input
- +