scb-wc 0.1.2 → 0.1.4

package/scb-stepper/scb-step.js

@@ -0,0 +1,311 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-stepper/scb-step.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.subLabel = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.widthWeight = 1, this.icon = "";
+	}
+	static {
+		this.styles = n`
+    :host {
+        font-family: var(--brand-font);
+        --scb-step-slide-from-x: 0px;
+        --scb-step-slide-from-y: 0px;
+        --scb-step-label-active-weight: 600;
+    }
+    .scb-step-content {
+        width: fit-content;
+        max-width: 100%;
+        min-width: 0;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        margin-inline: auto;
+        cursor: pointer;
+        background: none;
+        box-sizing: border-box;
+        user-select: none;
+        padding-block: var(--spacing-1);
+        padding-inline: var(--spacing-4);
+    }
+    .scb-step-content:focus,
+    .scb-step-content:focus-visible {
+        outline: none ;
+        box-shadow: none ;
+    }
+    .symbol {
+        background-color: var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+        min-width: var(--icon-size-medium);
+        height: var(--icon-size-medium);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: var(--md-sys-typescale-label-small-weight);
+        font-size: var(--md-sys-typescale-label-small-size);
+        line-height: var(--md-sys-typescale-label-small-line-height);
+        letter-spacing: var(--md-sys-typescale-label-small-tracking);
+        position: relative;
+        z-index: 1;
+            will-change: transform, opacity;
+        transition:
+          background-color var(--motion-duration-short) var(--motion-easing-standard),
+          color var(--motion-duration-short) var(--motion-easing-standard),
+          transform var(--motion-duration-short) var(--motion-easing-emphasized);
+        padding: var(--spacing-3);  
+    }
+    md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    md-icon {
+      font-size: 20px;
+    }
+    :host([active]) .symbol {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+    :host([completed]) .symbol {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+    .label {
+      margin-top: var(--spacing-3);
+      text-align: center;
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+      max-width: 90px;
+      word-break: break-word;
+      margin-bottom: var(--spacing-3);
+      display: grid;
+      justify-items: center;
+    }
+    .label::before {
+      content: attr(data-label);
+      font-weight: var(--scb-step-label-active-weight);
+      grid-area: 1 / 1;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      white-space: inherit;
+    }
+    .label-text {
+      grid-area: 1 / 1;
+    }
+    .sub-label {
+      text-align: center;
+      display: grid;
+      justify-items: center;
+    }
+    .sub-label::before {
+      content: attr(data-label);
+      font-weight: var(--scb-step-label-active-weight);
+      grid-area: 1 / 1;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      white-space: inherit;
+    }
+    .sub-label-text {
+      grid-area: 1 / 1;
+    }
+    :host([active]) .label, :host([active]) .sub-label {
+      font-weight: var(--scb-step-label-active-weight);
+    }
+    .content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 0;
+        will-change: transform, opacity;
+    }
+    :host([variant="vertical"]) {
+        .scb-step-content {
+            width: 100%;
+            flex-direction: row;
+            align-items: flex-start;
+            gap: var(--spacing-5);
+            margin-inline: 0;
+            padding: var(--spacing-4);
+        }
+    }
+    :host([no-content]) {
+      .scb-step-content {
+        align-items: center;
+        .label {
+            margin-bottom: 0px;
+        }
+    }
+    }
+    :host([variant="vertical"]) .label{
+        margin-top: 0;
+        max-width: none;
+        text-align: left;
+        justify-items: start;
+        word-break: normal;
+    }
+    :host([variant="vertical"]) .sub-label{
+        text-align: left;
+        justify-items: start;
+        word-break: normal;
+    }
+    :host([variant="vertical"]) .content{
+        align-items: flex-start;
+        min-width: 0;
+    }
+    :host([symbol-variant="marker"]) .symbol {
+        min-width: 16px;
+        height: 16px;
+    }
+    :host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
+        background-color: transparent;
+        color: var(--md-sys-color-primary);
+        md-icon{
+            font-size: var(--icon-size-small);
+        }
+    }
+
+    :host([active]) .symbol {
+      --scb-kf-pulse-scale: 1.08;
+      animation-duration: var(--motion-duration-medium);
+      animation-timing-function: var(--motion-easing-emphasized);
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
+    }
+
+    :host([completed]:not([active])) .symbol {
+      --scb-kf-pulse-scale: 1.04;
+      animation-duration: var(--motion-duration-short);
+      animation-timing-function: var(--motion-easing-standard);
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
+    }
+
+  `;
+	}
+	updated() {
+		!this.subLabel || this.subLabel.trim() === "" ? this.setAttribute("no-content", "") : this.removeAttribute("no-content"), this.widthWeight > 0 ? this.style.setProperty("--scb-step-width-weight", String(this.widthWeight)) : this.style.removeProperty("--scb-step-width-weight");
+	}
+	handleKeyDown(e) {
+		e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.dispatchEvent(new MouseEvent("click", {
+			bubbles: !0,
+			composed: !0
+		}))) : (e.key === "ArrowRight" || e.key === "ArrowLeft") && (this.dispatchEvent(new CustomEvent("scb-stepper-keynav", {
+			detail: { key: e.key },
+			bubbles: !0,
+			composed: !0
+		})), e.preventDefault());
+	}
+	render() {
+		let e = this.active ? "step" : void 0, t = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : void 0;
+		switch (this.symbolVariant) {
+			case "icon": return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${t}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<md-icon>${this.icon}</md-icon>`}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
+			case "marker": return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${t}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r``}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
+			default: return r`
+                    <div
+                        class="scb-step-content"
+                        tabindex="0"
+                        role="listitem"
+                        aria-current=${e}
+                        aria-label=${t}
+                        @keydown=${this.handleKeyDown}
+                    >
+                        <md-ripple></md-ripple>
+                        <div class="symbol">
+                            ${this.completed && this.changeOnCompleted ? r`<md-icon>check</md-icon>` : r`<span>${this.number}</span>`}
+                        </div>
+                        <div class="content">
+                            <div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
+                            <div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
+                        </div>
+                        <md-focus-ring></md-focus-ring>
+                    </div>
+                `;
+		}
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "label", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "sub-label"
+})], o.prototype, "subLabel", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "symbol-variant"
+})], o.prototype, "symbolVariant", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], o.prototype, "number", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "active", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "completed", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "change-on-completed"
+})], o.prototype, "changeOnCompleted", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "islast", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "variant", void 0), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "width-weight"
+})], o.prototype, "widthWeight", void 0), e([a({ type: String })], o.prototype, "icon", void 0), o = e([i("scb-step")], o);
+//#endregion
+export { o as ScbStep };

package/scb-stepper/scb-stepper.js

@@ -0,0 +1,325 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-step.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region src/scb-test-components/scb-stepper/scb-stepper.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, this.#t = 0, this._onKeyNav = (e) => {
+			let t = this._getSteps(), n = this.activeIndex, r = n;
+			e.detail.key === "ArrowRight" ? r = n < t.length - 1 ? n + 1 : 0 : e.detail.key === "ArrowLeft" && (r = n > 0 ? n - 1 : t.length - 1), r !== n && (this._onStepClick(r), setTimeout(() => {
+				let e = t[r].shadowRoot?.querySelector(".scb-step-content");
+				e && "focus" in e && typeof e.focus == "function" && e.focus();
+			}, 0));
+		}, this._onStepContainerClick = (e) => {
+			let t = this._getSteps(), n = e.composedPath(), r = t.findIndex((e) => n.includes(e));
+			r !== -1 && this._onStepClick(r);
+		}, this._onSlotChange = () => {
+			let e = this._getSteps();
+			if (e.length === 0) {
+				this.activeIndex = 0;
+				return;
+			}
+			this.activeIndex > e.length - 1 ? this.activeIndex = e.length - 1 : this.activeIndex < 0 && (this.activeIndex = 0), this._updateSteps(), this.#i();
+		};
+	}
+	#e;
+	#t;
+	static {
+		this.styles = n`
+    :host {
+      --scb-stepper-width: 100%;
+      --scb-stepper-height: 100%;
+      --scb-stepper-step-count: 1;
+      --scb-stepper-connector-gap: var(--spacing-2);
+      --scb-stepper-symbol-size: var(--icon-size-medium);
+      display: block;
+      padding: var(--spacing-5) 0;
+      width: 100%;
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--brand-font);
+      max-width: var(--scb-stepper-width);
+      height: var(--scb-stepper-height);
+
+      margin-block-start: var(--scb-stepper-spacing-block-start, 0);
+      margin-block-end: var(--scb-stepper-spacing-block-end, 0);
+      margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
+    }
+    .steps {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: center;
+      position: relative;
+      width: 100%;
+      gap: 0;
+      height: 100%;
+    }
+    :host([variant='vertical']) .steps {
+      flex-direction: column;
+      gap: var(--spacing-8);
+    }
+
+    :host([symbol-variant='marker']) {
+      --scb-stepper-symbol-size: 16px;
+    }
+    ::slotted(scb-step) {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      min-width: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step) {
+      flex: var(--scb-step-width-weight, 1) 1 0;
+    }
+
+    /* Horisontell connector
+       Bygger upp en linje per steg, med glapp både före och efter varje symbol.
+       Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
+    */
+    :host([variant='horizontal']) ::slotted(scb-step)::before,
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      content: '';
+      position: absolute;
+      top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
+      height: 1px;
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::before {
+      left: 0;
+      right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step)::after {
+      left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
+      right: 0;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
+      display: none;
+    }
+
+    :host([variant='horizontal']) ::slotted(scb-step[completed])::before,
+    :host([variant='horizontal']) ::slotted(scb-step[completed])::after {
+      background-color: var(--md-sys-color-primary);
+    }
+    :host([variant='horizontal']) ::slotted(scb-step[active])::before {
+      background-color: var(--md-sys-color-primary);
+    }
+    /* Vertikal connector */
+    ::slotted(scb-step[variant='vertical'][completed]:not(:last-child))::after {
+      background-color: var(--md-sys-color-primary);
+    }
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker'][completed]:not(:last-child))::after {
+      background-color: var(--md-sys-color-primary);
+    }
+
+    ::slotted(scb-step[variant='vertical']:not(:first-child))::before {
+      display: none;
+    }
+    ::slotted(scb-step[variant='vertical']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 28px;
+      top: 52px;
+      width: 1px;
+      height: calc(100% - 16px);
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      transform: translateX(-50%);
+    }
+    ::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
+      content: '';
+      position: absolute;
+      left: 20px;
+      top: 38px;
+      width: 1px;
+      height: calc(100% - 2px);
+      background-color: var(--n-70);
+      transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
+      z-index: 0;
+      transform: translateX(-50%);
+    }
+    ::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
+      top: 20px;
+    }
+  `;
+	}
+	_onStepClick(e) {
+		let t = this.activeIndex;
+		this.activeIndex = e, this._updateSteps(), this.dispatchEvent(new CustomEvent("step-change", {
+			detail: {
+				index: this.activeIndex,
+				step: this._getSteps()[this.activeIndex]
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("stepchange", {
+			detail: {
+				index: this.activeIndex,
+				step: this._getSteps()[this.activeIndex]
+			},
+			bubbles: !0,
+			composed: !0
+		})), e > t ? (this.dispatchEvent(new CustomEvent("step-next", {
+			detail: {
+				from: t,
+				to: e,
+				step: this._getSteps()[e]
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("stepnext", {
+			detail: {
+				from: t,
+				to: e,
+				step: this._getSteps()[e]
+			},
+			bubbles: !0,
+			composed: !0
+		}))) : e < t && (this.dispatchEvent(new CustomEvent("step-prev", {
+			detail: {
+				from: t,
+				to: e,
+				step: this._getSteps()[e]
+			},
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("stepprev", {
+			detail: {
+				from: t,
+				to: e,
+				step: this._getSteps()[e]
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	nextStep() {
+		let e = this._getSteps();
+		this.activeIndex < e.length - 1 && this._onStepClick(this.activeIndex + 1);
+	}
+	prevStep() {
+		this.activeIndex > 0 && this._onStepClick(this.activeIndex - 1);
+	}
+	getActiveIndex() {
+		return this.activeIndex;
+	}
+	_updateSteps() {
+		let e = this._getSteps();
+		this.style.setProperty("--scb-stepper-step-count", String(Math.max(1, e.length))), e.forEach((e, t) => {
+			e.active = t === this.activeIndex, e.completed = t < this.activeIndex, e.islast = !1, e.changeOnCompleted = this.changeOnCompleted, e.number = t + 1, e.variant = this.variant, e.symbolVariant = this.symbolVariant;
+		}), e.length > 0 && (e[e.length - 1].islast = !0);
+	}
+	_getSteps() {
+		return Array.from(this.querySelectorAll("scb-step"));
+	}
+	firstUpdated(e) {
+		this._updateSteps(), this.#n(), this.#i();
+	}
+	updated(e) {
+		this._updateSteps(), (e.has("variant") || e.has("symbolVariant")) && this.#i(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
+	}
+	render() {
+		return r`
+      <div
+        class="steps"
+        role="list"
+        aria-label="Steg i processen"
+        @click=${this._onStepContainerClick}
+        @scb-stepper-keynav=${this._onKeyNav}
+      >
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof ResizeObserver < "u" && (this.#e = new ResizeObserver(() => {
+			this.#i();
+		}), this.#e.observe(this));
+	}
+	disconnectedCallback() {
+		this.#e &&= (this.#e.disconnect(), void 0), this.#t &&= (cancelAnimationFrame(this.#t), 0), super.disconnectedCallback();
+	}
+	#n() {
+		let e = this.#r(this.spacing), t = this.#r(this.spacingTop) ?? e, n = this.#r(this.spacingBottom) ?? e, r = this.#r(this.spacingLeft), i = this.#r(this.spacingRight);
+		t ? this.style.setProperty("--scb-stepper-spacing-block-start", t) : this.style.removeProperty("--scb-stepper-spacing-block-start"), n ? this.style.setProperty("--scb-stepper-spacing-block-end", n) : this.style.removeProperty("--scb-stepper-spacing-block-end"), r ? this.style.setProperty("--scb-stepper-spacing-inline-start", r) : this.style.removeProperty("--scb-stepper-spacing-inline-start"), i ? this.style.setProperty("--scb-stepper-spacing-inline-end", i) : this.style.removeProperty("--scb-stepper-spacing-inline-end");
+	}
+	#r(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	#i() {
+		this.#t ||= requestAnimationFrame(() => {
+			this.#t = 0, this.#a();
+		});
+	}
+	#a() {
+		let e = this._getSteps();
+		e.length !== 0 && e.forEach((e) => {
+			let t = e.shadowRoot;
+			if (!t) return;
+			let n = t.querySelector(".label"), r = t.querySelector(".scb-step-content");
+			if (!n) return;
+			if (this.variant !== "horizontal") {
+				n.style.removeProperty("max-width"), n.style.removeProperty("white-space"), n.style.removeProperty("word-break"), n.style.removeProperty("overflow-wrap");
+				return;
+			}
+			n.style.maxWidth = "none", n.style.whiteSpace = "nowrap", n.style.wordBreak = "normal", n.style.overflowWrap = "normal";
+			let i = r?.clientWidth ?? e.clientWidth;
+			i > 0 && n.scrollWidth > i && (n.style.maxWidth = "100%", n.style.whiteSpace = "normal", n.style.wordBreak = "break-word", n.style.overflowWrap = "anywhere");
+		});
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "type", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "label", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "change-on-completed"
+})], o.prototype, "changeOnCompleted", void 0), e([a({ type: String })], o.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "symbol-variant"
+})], o.prototype, "symbolVariant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "active-index"
+})], o.prototype, "activeIndex", void 0), o = e([i("scb-stepper")], o);
+//#endregion
+export { o as ScbStepper };