@m3e/form-field 1.1.7 → 1.1.9
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/index.js +6 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/src/FormFieldElement.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -868,16 +868,18 @@ _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErr
|
|
|
868
868
|
}
|
|
869
869
|
};
|
|
870
870
|
(() => {
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
871
|
+
if (document) {
|
|
872
|
+
const lightDomStyle = new CSSStyleSheet();
|
|
873
|
+
lightDomStyle.replaceSync(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(.-float-label).-with-label input::placeholder, m3e-form-field[float-label="auto"]:not(.-float-label).-with-label textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`.toString());
|
|
874
|
+
document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
|
|
875
|
+
}
|
|
874
876
|
})();
|
|
875
877
|
/** The styles of the element. */
|
|
876
878
|
M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(.-disabled)) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken.motion.duration.short4},
|
|
877
879
|
font-size ${DesignToken.motion.duration.short4},
|
|
878
880
|
line-height ${DesignToken.motion.duration.short4}`)}; } :host(.-with-select) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(.-invalid)) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short4},
|
|
879
881
|
margin-top ${DesignToken.motion.duration.short4},
|
|
880
|
-
margin-bottom ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([
|
|
882
|
+
margin-bottom ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
|
|
881
883
|
__decorate([e(".base")], M3eFormFieldElement.prototype, "_base", void 0);
|
|
882
884
|
__decorate([e(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
|
|
883
885
|
__decorate([e(".error")], M3eFormFieldElement.prototype, "_error", void 0);
|