diff --git a/packages/form-core/src/FormControlMixin.js b/packages/form-core/src/FormControlMixin.js index 1b1965547..b764a22cc 100644 --- a/packages/form-core/src/FormControlMixin.js +++ b/packages/form-core/src/FormControlMixin.js @@ -607,58 +607,56 @@ const FormControlMixinImplementation = superclass => * @return {CSSResult | CSSResult[]} */ static get styles() { - return [ - css` - /********************** + return css` + /********************** {block} .form-field - ********************/ + ********************/ - :host { - display: block; - } + :host { + display: block; + } - :host([hidden]) { - display: none; - } + :host([hidden]) { + display: none; + } - :host([disabled]) { - pointer-events: none; - } + :host([disabled]) { + pointer-events: none; + } - :host([disabled]) .form-field__label ::slotted(*), - :host([disabled]) .form-field__help-text ::slotted(*) { - color: var(--disabled-text-color, #adadad); - } + :host([disabled]) .form-field__label ::slotted(*), + :host([disabled]) .form-field__help-text ::slotted(*) { + color: var(--disabled-text-color, #adadad); + } - /*********************** + /*********************** {block} .input-group - *********************/ + *********************/ - .input-group__container { - display: flex; - } + .input-group__container { + display: flex; + } - .input-group__input { - flex: 1; - display: flex; - } + .input-group__input { + flex: 1; + display: flex; + } - /***** {state} :disabled *****/ - :host([disabled]) .input-group ::slotted(slot='input') { - color: var(--disabled-text-color, #adadad); - } + /***** {state} :disabled *****/ + :host([disabled]) .input-group ::slotted(slot='input') { + color: var(--disabled-text-color, #adadad); + } - /*********************** + /*********************** {block} .form-control - **********************/ + **********************/ - .input-group__container > .input-group__input ::slotted(.form-control) { - flex: 1 1 auto; - margin: 0; /* remove input margin in Safari */ - font-size: 100%; /* normalize default input font-size */ - } - `, - ]; + .input-group__container > .input-group__input ::slotted(.form-control) { + flex: 1 1 auto; + margin: 0; /* remove input margin in Safari */ + font-size: 100%; /* normalize default input font-size */ + } + `; } /** diff --git a/packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js b/packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js index 13e91c87d..3d28b237a 100644 --- a/packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js +++ b/packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js @@ -46,7 +46,6 @@ export function runFormGroupMixinInputSuite(cfg = {}) { <${childTag} name="custom[]"> `)); - console.log(fieldset.formElements['custom[]'][1]); fieldset.formElements['custom[]'][0].modelValue = 'custom 1'; fieldset.formElements['custom[]'][1].modelValue = undefined; diff --git a/packages/form-core/types/NativeTextFieldMixinTypes.d.ts b/packages/form-core/types/NativeTextFieldMixinTypes.d.ts index 987dc92cc..6ccb883d4 100644 --- a/packages/form-core/types/NativeTextFieldMixinTypes.d.ts +++ b/packages/form-core/types/NativeTextFieldMixinTypes.d.ts @@ -14,6 +14,6 @@ export declare class NativeTextFieldHost { export declare function NativeTextFieldImplementation>( superclass: T, -): T & Constructor & NativeTextFieldHost; +): T & Constructor & NativeTextFieldHost & typeof NativeTextField; export type NativeTextFieldMixin = typeof NativeTextFieldImplementation; diff --git a/packages/input-amount/src/LionInputAmount.js b/packages/input-amount/src/LionInputAmount.js index bb4248990..2c4a33f56 100644 --- a/packages/input-amount/src/LionInputAmount.js +++ b/packages/input-amount/src/LionInputAmount.js @@ -53,11 +53,14 @@ export class LionInputAmount extends LocalizeMixin(LionInput) { } static get styles() { - return css` - .input-group__container > .input-group__input ::slotted(.form-control) { - text-align: right; - } - `; + return [ + super.styles, + css` + .input-group__container > .input-group__input ::slotted(.form-control) { + text-align: right; + } + `, + ]; } constructor() { diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 8108a71eb..42d09ddb0 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -10,11 +10,14 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/form-core'; // @ts-expect-error false positive for incompatible static get properties. Lit-element merges super properties already for you. export class LionInputStepper extends LionInput { static get styles() { - return css` - .input-group__container > .input-group__input ::slotted(.form-control) { - text-align: center; - } - `; + return [ + super.styles, + css` + .input-group__container > .input-group__input ::slotted(.form-control) { + text-align: center; + } + `, + ]; } static get properties() {