@m3e/stepper 1.1.8 → 1.1.10
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
CHANGED
|
@@ -682,13 +682,17 @@ let M3eStepElement = M3eStepElement_1 = class M3eStepElement extends Selected(Ke
|
|
|
682
682
|
if (control instanceof M3eStepPanelElement) {
|
|
683
683
|
control.id = control.id || `m3e-step-panel-${M3eStepElement_1.__nextId++}`;
|
|
684
684
|
addAriaReferencedId(this, "aria-controls", control.id);
|
|
685
|
+
control.style.order = this.style.order;
|
|
685
686
|
}
|
|
686
687
|
super.attach(control);
|
|
687
688
|
}
|
|
688
689
|
/** @inheritdoc */
|
|
689
690
|
detach() {
|
|
690
|
-
if (this.control
|
|
691
|
-
|
|
691
|
+
if (this.control) {
|
|
692
|
+
this.control.style.order = "";
|
|
693
|
+
if (this.control.id) {
|
|
694
|
+
removeAriaReferencedId(this, "aria-controls", this.control.id);
|
|
695
|
+
}
|
|
692
696
|
}
|
|
693
697
|
super.detach();
|
|
694
698
|
}
|
|
@@ -719,7 +723,7 @@ let M3eStepElement = M3eStepElement_1 = class M3eStepElement extends Selected(Ke
|
|
|
719
723
|
render() {
|
|
720
724
|
const hint = html`<slot name="hint">${this.optional ? html`<span class="hint">(Optional)</span>` : nothing}</slot>`;
|
|
721
725
|
const error = html`<slot name="error">${hint}</slot>`;
|
|
722
|
-
return html`<m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="wrapper"><div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_renderIcon).call(this)}</div><div class="label"><slot></slot>${this.invalid ? error : hint}</div></div>`;
|
|
726
|
+
return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="wrapper"><div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eStepElement_instances, "m", _M3eStepElement_renderIcon).call(this)}</div><div class="label"><slot></slot>${this.invalid ? error : hint}</div></div></div>`;
|
|
723
727
|
}
|
|
724
728
|
};
|
|
725
729
|
_M3eStepElement_clickHandler = new WeakMap();
|
|
@@ -758,7 +762,7 @@ _M3eStepElement_handleClick = function _M3eStepElement_handleClick(e) {
|
|
|
758
762
|
}
|
|
759
763
|
};
|
|
760
764
|
/** The styles of the element. */
|
|
761
|
-
M3eStepElement.styles = css`:host { display: block; position: relative;
|
|
765
|
+
M3eStepElement.styles = css`:host { display: block; outline: none; min-width: 0px; position: relative; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { min-width: inherit; position: relative; border-radius: var(--m3e-step-shape, ${DesignToken.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${DesignToken.color.primary}); color: var(--m3e-step-completed-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${DesignToken.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${DesignToken.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${DesignToken.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${DesignToken.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${DesignToken.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${DesignToken.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${DesignToken.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${DesignToken.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
|
|
762
766
|
/** @private */
|
|
763
767
|
M3eStepElement.__nextId = 0;
|
|
764
768
|
__decorate([e$1(".focus-ring")], M3eStepElement.prototype, "_focusRing", void 0);
|
|
@@ -1423,8 +1427,15 @@ _M3eStepperElement_updateDisplayOrder = function _M3eStepperElement_updateDispla
|
|
|
1423
1427
|
});
|
|
1424
1428
|
}
|
|
1425
1429
|
};
|
|
1430
|
+
(() => {
|
|
1431
|
+
if (document) {
|
|
1432
|
+
const lightDomStyle = new CSSStyleSheet();
|
|
1433
|
+
lightDomStyle.replaceSync(css`m3e-stepper:not(.-vertical) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper:not(.-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(.-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper:not(.-vertical)[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(.-vertical)[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(.-vertical)[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(.-vertical)[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper.-vertical > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper.-vertical > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); } m3e-stepper.-vertical > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper.-vertical > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${DesignToken.color.outline}); }`.toString());
|
|
1434
|
+
document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
|
|
1435
|
+
}
|
|
1436
|
+
})();
|
|
1426
1437
|
/** The styles of the element. */
|
|
1427
|
-
M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(.-vertical)) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0;
|
|
1438
|
+
M3eStepperElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } :host(:not(.-vertical)) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(.-vertical)) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(.-vertical):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(.-vertical)) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(.-vertical)[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(.-vertical)[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(.-vertical)[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(.-vertical) .header { display: contents; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(.-vertical) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(.-vertical)) { --m3e-collapsible-animation-duration: 0ms; } :host(.-no-animate) { --m3e-collapsible-animation-duration: 0ms; }`;
|
|
1428
1439
|
__decorate([r$1()], M3eStepperElement.prototype, "_orientation", void 0);
|
|
1429
1440
|
__decorate([r$1()], M3eStepperElement.prototype, "_selectedIndex", void 0);
|
|
1430
1441
|
__decorate([n$1({
|