@covalent/components 4.16.0-beta.1 → 6.0.2

package/side-sheet.mjs

@@ -0,0 +1,40 @@
+import { i as m, r as l, e as p } from "./query-assigned-elements.mjs";
+import { e as c } from "./property.mjs";
+import { C as h, s as g } from "./dialog.mjs";
+import "./tslib.es6.mjs";
+import "./inert.esm.mjs";
+import "./base-element.mjs";
+import "./utils.mjs";
+import "./observer.mjs";
+import "./query.mjs";
+import "./class-map.mjs";
+const f = `:host{--cv-side-sheet-width: 800px;--mdc-dialog-heading-ink-color: var(--mdc-theme-text-primary-on-background)}.mdc-dialog{justify-content:flex-end}.mdc-dialog .mdc-dialog__surface{border-radius:0;height:100%;min-height:inherit;max-height:inherit;min-width:var(--cv-side-sheet-width, 400px)}.mdc-dialog--opening .mdc-dialog__container{transform:translate(100%);transition:transform .15s cubic-bezier(.4,0,1,1)}.mdc-dialog--open .mdc-dialog__container{transform:translate(0)}.mdc-dialog--closing .mdc-dialog__container{opacity:1;transform:translate(100%);transition:transform .15s cubic-bezier(0,0,.2,1)}:host([pushed]) .mdc-dialog__surface{min-width:100vw}:host([noPadding]) .mdc-dialog .mdc-dialog__content{padding:0}
+`;
+var _ = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (d, i, r, o) => {
+  for (var e = o > 1 ? void 0 : o ? u(i, r) : i, a = d.length - 1, s; a >= 0; a--)
+    (s = d[a]) && (e = (o ? s(i, r, e) : s(e)) || e);
+  return o && e && _(i, r, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(), this.pushed = !1, this.noPadding = !1, this.hideActions = !0;
+  }
+};
+t.styles = [
+  g,
+  m`
+      ${l(f)}
+    `
+];
+n([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "pushed", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "noPadding", 2);
+t = n([
+  p("cv-side-sheet")
+], t);
+export {
+  t as CovalentSideSheet
+};

package/slider-range.mjs

@@ -0,0 +1,444 @@
+import { b as a } from "./tslib.es6.mjs";
+import { R as v, e as S } from "./ripple-handlers.mjs";
+import { b as f } from "./utils.mjs";
+import { S as g, T as r, s as y } from "./mwc-slider.css.mjs";
+import { y as d, b as _, e as R } from "./query-assigned-elements.mjs";
+import { e as k } from "./property.mjs";
+import { t as l } from "./state.mjs";
+import { i as h } from "./query.mjs";
+import { o as b } from "./class-map.mjs";
+import { l as n } from "./if-defined.mjs";
+import { i as T } from "./style-map.mjs";
+import "./base-element.mjs";
+import "./aria-property.mjs";
+import "./form-element.mjs";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class s extends g {
+  constructor() {
+    super(...arguments), this.valueStart = 0, this.startThumbWithIndicator = !1, this.startThumbTop = !1, this.shouldRenderStartRipple = !1, this.startThumbTransformStyle = "", this.startThumbTransitionStyle = "", this.startThumbCssProperties = {}, this.startRippleHandlers = new v(() => (this.shouldRenderStartRipple = !0, this.startRipple));
+  }
+  update(t) {
+    if (t.has("valueStart") && this.mdcFoundation) {
+      this.mdcFoundation.setValueStart(this.valueStart);
+      const e = this.mdcFoundation.getValueStart();
+      e !== this.valueStart && (this.valueStart = e);
+    }
+    super.update(t);
+  }
+  renderRootEl(t) {
+    const e = b({
+      "mdc-slider--disabled": this.disabled,
+      "mdc-slider--discrete": this.discrete
+    });
+    return d`
+    <div
+        class="mdc-slider mdc-slider--range ${e}"
+        @pointerdown=${this.onPointerdown}
+        @pointerup=${this.onPointerup}
+        @contextmenu=${this.onContextmenu}>
+      ${t}
+    </div>`;
+  }
+  renderStartInput() {
+    var t;
+    return d`
+      <input
+          class="mdc-slider__input start"
+          type="range"
+          step=${this.step}
+          min=${this.min}
+          max=${this.valueEnd}
+          .value=${this.valueStart}
+          @change=${this.onStartChange}
+          @focus=${this.onStartFocus}
+          @blur=${this.onStartBlur}
+          ?disabled=${this.disabled}
+          aria-label=${n(this.ariaLabel)}
+          aria-labelledby=${n(this.ariaLabelledBy)}
+          aria-describedby=${n(this.ariaDescribedBy)}
+          aria-valuetext=${n((t = this.valueToAriaTextTransform) === null || t === void 0 ? void 0 : t.call(this, this.valueStart))}>
+    `;
+  }
+  renderEndInput() {
+    var t;
+    return d`
+      <input
+          class="mdc-slider__input end"
+          type="range"
+          step=${this.step}
+          min=${this.valueStart}
+          max=${this.max}
+          .value=${this.valueEnd}
+          @change=${this.onEndChange.bind(this)}
+          @focus=${this.onEndFocus}
+          @blur=${this.onEndBlur}
+          ?disabled=${this.disabled}
+          name=${this.name}
+          aria-label=${n(this.ariaLabel)}
+          aria-labelledby=${n(this.ariaLabelledBy)}
+          aria-describedby=${n(this.ariaDescribedBy)}
+          aria-valuetext=${n((t = this.valueToAriaTextTransform) === null || t === void 0 ? void 0 : t.call(this, this.valueEnd))}>
+    `;
+  }
+  renderTrack() {
+    const t = T({
+      "transform-origin": this.trackTransformOriginStyle,
+      left: this.trackLeftStyle ? this.trackLeftStyle : getComputedStyle(this).direction === "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}%)`,
+      right: this.trackRightStyle ? this.trackRightStyle : getComputedStyle(this).direction !== "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}%)`,
+      "-webkit-transform": `scaleX(${(this.valueEnd - this.valueStart) / (this.max - this.min)})`,
+      transform: `scaleX(${(this.valueEnd - this.valueStart) / (this.max - this.min)})`,
+      "-webkit-transition": this.trackTransitionStyle,
+      transition: this.trackTransitionStyle
+    });
+    return d`
+      <div class="mdc-slider__track">
+        <div class="mdc-slider__track--inactive"></div>
+        <div class="mdc-slider__track--active">
+          <div
+              class="mdc-slider__track--active_fill"
+              style=${t}>
+          </div>
+        </div>
+      </div>`;
+  }
+  renderStartThumb() {
+    const t = b({
+      "mdc-slider__thumb--with-indicator": this.startThumbWithIndicator,
+      "mdc-slider__thumb--top": this.startThumbTop
+    }), e = T(Object.assign({ "-webkit-transform": this.startThumbTransformStyle, transform: this.startThumbTransformStyle, "-webkit-transition": this.startThumbTransitionStyle, transition: this.startThumbTransitionStyle, left: this.startThumbTransformStyle || getComputedStyle(this).direction === "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}% - 24px)`, right: this.startThumbTransformStyle || getComputedStyle(this).direction !== "rtl" ? "" : `calc(${(this.valueStart - this.min) / (this.max - this.min) * 100}% - 24px)` }, this.startThumbCssProperties)), i = this.shouldRenderStartRipple ? d`<mwc-ripple class="ripple" unbounded></mwc-ripple>` : _;
+    return d`
+      <div
+          class="mdc-slider__thumb start ${t}"
+          style=${e}
+          @mouseenter=${this.onStartMouseenter}
+          @mouseleave=${this.onStartMouseleave}>
+        ${i}
+        ${this.renderValueIndicator(this.valueToValueIndicatorTransform(this.valueStart))}
+        <div class="mdc-slider__thumb-knob"></div>
+      </div>
+    `;
+  }
+  createAdapter() {
+    return {
+      addClass: (t) => {
+        switch (t) {
+          case "mdc-slider--disabled":
+            this.disabled = !0;
+            break;
+        }
+      },
+      removeClass: (t) => {
+        switch (t) {
+          case "mdc-slider--disabled":
+            this.disabled = !1;
+            break;
+        }
+      },
+      hasClass: (t) => {
+        switch (t) {
+          case "mdc-slider--disabled":
+            return this.disabled;
+          case "mdc-slider--range":
+            return !0;
+          case "mdc-slider--discrete":
+            return this.discrete;
+          default:
+            return !1;
+        }
+      },
+      addThumbClass: (t, e) => {
+        if (e === r.START)
+          switch (t) {
+            case "mdc-slider__thumb--with-indicator":
+              this.startThumbWithIndicator = !0;
+              break;
+            case "mdc-slider__thumb--top":
+              this.startThumbTop = !0;
+              break;
+          }
+        else
+          switch (t) {
+            case "mdc-slider__thumb--with-indicator":
+              this.endThumbWithIndicator = !0;
+              break;
+            case "mdc-slider__thumb--top":
+              this.endThumbTop = !0;
+              break;
+          }
+      },
+      removeThumbClass: (t, e) => {
+        if (e === r.START)
+          switch (t) {
+            case "mdc-slider__thumb--with-indicator":
+              this.startThumbWithIndicator = !1;
+              break;
+            case "mdc-slider__thumb--top":
+              this.startThumbTop = !1;
+              break;
+          }
+        else
+          switch (t) {
+            case "mdc-slider__thumb--with-indicator":
+              this.endThumbWithIndicator = !1;
+              break;
+            case "mdc-slider__thumb--top":
+              this.endThumbTop = !1;
+              break;
+          }
+      },
+      registerEventHandler: () => {
+      },
+      deregisterEventHandler: () => {
+      },
+      registerBodyEventHandler: (t, e) => {
+        document.body.addEventListener(t, e);
+      },
+      deregisterBodyEventHandler: (t, e) => {
+        document.body.removeEventListener(t, e);
+      },
+      registerInputEventHandler: (t, e, i) => {
+        t === r.START ? this.startInput.addEventListener(e, i) : this.formElement.addEventListener(e, i);
+      },
+      deregisterInputEventHandler: (t, e, i) => {
+        t === r.START ? this.startInput.removeEventListener(e, i) : this.formElement.removeEventListener(e, i);
+      },
+      registerThumbEventHandler: () => {
+      },
+      deregisterThumbEventHandler: () => {
+      },
+      registerWindowEventHandler: (t, e) => {
+        window.addEventListener(t, e);
+      },
+      deregisterWindowEventHandler: (t, e) => {
+        window.removeEventListener(t, e);
+      },
+      emitChangeEvent: (t, e) => {
+        const i = new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: t, thumb: e } });
+        this.dispatchEvent(i);
+      },
+      emitDragEndEvent: (t, e) => {
+        e === r.START ? this.startRippleHandlers.endPress() : this.endRippleHandlers.endPress();
+      },
+      emitDragStartEvent: (t, e) => {
+        e === r.START ? this.startRippleHandlers.startPress() : this.endRippleHandlers.startPress();
+      },
+      emitInputEvent: (t, e) => {
+        const i = new CustomEvent("input", { bubbles: !0, composed: !0, detail: { value: t, thumb: e } });
+        this.dispatchEvent(i);
+      },
+      focusInput: (t) => {
+        t === r.START ? this.startInput.focus() : this.formElement.focus();
+      },
+      getAttribute: () => "",
+      getBoundingClientRect: () => this.mdcRoot.getBoundingClientRect(),
+      getInputAttribute: (t, e) => {
+        if (e === r.START)
+          switch (t) {
+            case "min":
+              return this.min.toString();
+            case "max":
+              return this.valueEnd.toString();
+            case "value":
+              return this.valueStart.toString();
+            case "step":
+              return this.step.toString();
+            default:
+              return null;
+          }
+        switch (t) {
+          case "min":
+            return this.valueStart.toString();
+          case "max":
+            return this.max.toString();
+          case "value":
+            return this.valueEnd.toString();
+          case "step":
+            return this.step.toString();
+          default:
+            return null;
+        }
+      },
+      getInputValue: (t) => t === r.START ? this.valueStart.toString() : this.valueEnd.toString(),
+      getThumbBoundingClientRect: (t) => t === r.START ? this.startThumb.getBoundingClientRect() : this.endThumb.getBoundingClientRect(),
+      getThumbKnobWidth: (t) => t === r.START ? this.startThumbKnob.getBoundingClientRect().width : this.endThumbKnob.getBoundingClientRect().width,
+      getValueIndicatorContainerWidth: (t) => t === r.START ? this.startValueIndicatorContainer.getBoundingClientRect().width : this.endValueIndicatorContainer.getBoundingClientRect().width,
+      getValueToAriaValueTextFn: () => this.valueToAriaTextTransform,
+      isInputFocused: (t) => {
+        const e = f(), i = e[e.length - 1];
+        return t === r.START ? i === this.startInput : i === this.formElement;
+      },
+      isRTL: () => getComputedStyle(this).direction === "rtl",
+      setInputAttribute: (t, e, i) => {
+        r.START;
+      },
+      removeInputAttribute: (t) => {
+      },
+      setThumbStyleProperty: (t, e, i) => {
+        if (i === r.START)
+          switch (t) {
+            case "transform":
+            case "-webkit-transform":
+              this.startThumbTransformStyle = e;
+              break;
+            case "transition":
+            case "-webkit-transition":
+              this.startThumbTransitionStyle = e;
+              break;
+            default:
+              t.startsWith("--") && (this.startThumbCssProperties[t] = e);
+          }
+        else
+          switch (t) {
+            case "transform":
+            case "-webkit-transform":
+              this.endThumbTransformStyle = e;
+              break;
+            case "transition":
+            case "-webkit-transition":
+              this.endThumbTransitionStyle = e;
+              break;
+            default:
+              t.startsWith("--") && (this.endThumbCssProperties[t] = e);
+          }
+      },
+      removeThumbStyleProperty: (t, e) => {
+        if (e === r.START)
+          switch (t) {
+            case "left":
+            case "right":
+              break;
+            case "transition":
+            case "-webkit-transition":
+              this.startThumbTransitionStyle = "";
+              break;
+          }
+        else
+          switch (t) {
+            case "left":
+            case "right":
+              break;
+            case "transition":
+            case "-webkit-transition":
+              this.endThumbTransitionStyle = "";
+              break;
+          }
+      },
+      setTrackActiveStyleProperty: (t, e) => {
+        switch (t) {
+          case "transform-origin":
+            this.trackTransformOriginStyle = e;
+            break;
+          case "left":
+            this.trackLeftStyle = e;
+            break;
+          case "right":
+            this.trackRightStyle = e;
+            break;
+          case "transform":
+          case "-webkit-transform":
+            break;
+          case "transition":
+          case "-webkit-transition":
+            this.trackTransitionStyle = e;
+            break;
+        }
+      },
+      removeTrackActiveStyleProperty: (t) => {
+        switch (t) {
+          case "transition":
+          case "-webkit-transition":
+            this.trackTransitionStyle = "";
+            break;
+        }
+      },
+      setInputValue: (t, e) => {
+        e === r.START ? this.valueStart = Number(t) : this.valueEnd = Number(t);
+      },
+      setPointerCapture: (t) => {
+        this.mdcRoot.setPointerCapture(t);
+      },
+      setValueIndicatorText: () => {
+      },
+      updateTickMarks: (t) => {
+        this.tickMarks = t;
+      }
+    };
+  }
+  onStartChange(t) {
+    var e;
+    this.valueStart = Number(t.target.value), (e = this.mdcFoundation) === null || e === void 0 || e.handleInputChange(r.START);
+  }
+  onStartFocus() {
+    var t;
+    (t = this.mdcFoundation) === null || t === void 0 || t.handleInputFocus(r.START), this.startRippleHandlers.startFocus();
+  }
+  onStartBlur() {
+    var t;
+    (t = this.mdcFoundation) === null || t === void 0 || t.handleInputBlur(r.START), this.startRippleHandlers.endFocus();
+  }
+  onStartMouseenter() {
+    var t;
+    (t = this.mdcFoundation) === null || t === void 0 || t.handleThumbMouseenter(), this.startRippleHandlers.startHover();
+  }
+  onStartMouseleave() {
+    var t;
+    (t = this.mdcFoundation) === null || t === void 0 || t.handleThumbMouseleave(), this.startRippleHandlers.endHover();
+  }
+  setFormData(t) {
+    this.name && (t.append(`${this.name}-start`, `${this.valueStart}`), t.append(`${this.name}-end`, `${this.valueEnd}`));
+  }
+}
+a([
+  h("input.start")
+], s.prototype, "startInput", void 0);
+a([
+  h(".start.mdc-slider__thumb")
+], s.prototype, "startThumb", void 0);
+a([
+  h(".start.mdc-slider__thumb .mdc-slider__thumb-knob")
+], s.prototype, "startThumbKnob", void 0);
+a([
+  h(".start.mdc-slider__thumb .mdc-slider__value-indicator-container")
+], s.prototype, "startValueIndicatorContainer", void 0);
+a([
+  S(".start .ripple")
+], s.prototype, "startRipple", void 0);
+a([
+  k({ type: Number })
+], s.prototype, "valueStart", void 0);
+a([
+  l()
+], s.prototype, "startThumbWithIndicator", void 0);
+a([
+  l()
+], s.prototype, "startThumbTop", void 0);
+a([
+  l()
+], s.prototype, "shouldRenderStartRipple", void 0);
+a([
+  l()
+], s.prototype, "startThumbTransformStyle", void 0);
+a([
+  l()
+], s.prototype, "startThumbTransitionStyle", void 0);
+a([
+  l()
+], s.prototype, "startThumbCssProperties", void 0);
+var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, E = (u, t, e, i) => {
+  for (var o = i > 1 ? void 0 : i ? $(t, e) : t, c = u.length - 1, m; c >= 0; c--)
+    (m = u[c]) && (o = (i ? m(t, e, o) : m(o)) || o);
+  return i && o && w(t, e, o), o;
+};
+let p = class extends s {
+};
+p.styles = [y];
+p = E([
+  R("cv-slider-range")
+], p);
+export {
+  p as CovalentSliderRangeBase
+};