@covalent/components 4.16.0-beta.1 → 6.0.2

package/icon-radio-toggle.mjs

@@ -0,0 +1,73 @@
+import { y as l, i as m, r as s, e as h } from "./query-assigned-elements.mjs";
+import { R as f } from "./mwc-radio-base.mjs";
+import { s as g } from "./mwc-radio.css.mjs";
+import { e as p } from "./property.mjs";
+import { o as v } from "./class-map.mjs";
+import { i as y } from "./style-map.mjs";
+import "./tslib.es6.mjs";
+import "./ripple-handlers.mjs";
+import "./base-element.mjs";
+import "./utils.mjs";
+import "./state.mjs";
+import "./query.mjs";
+import "./aria-property.mjs";
+import "./form-element.mjs";
+import "./observer.mjs";
+import "./event-options.mjs";
+import "./if-defined.mjs";
+const u = `:host .mdc-radio__background{position:absolute;top:8px;right:8px}:host([width=fill]){width:100%}.container{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;row-gap:8px;width:var(--width);height:var(--height);border:solid 2px var(--mdc-theme-border);border-radius:8px;color:var(--mdc-theme-text-primary-on-background);--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.container:before,.container:after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.container:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.container:after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.container.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.container.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.container.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.container.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.container.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.container:before,.container:after{top:0%;left:0%;width:100%;height:100%}.container.mdc-ripple-upgraded:before,.container.mdc-ripple-upgraded:after{top:var(--mdc-ripple-top, 0%);left:var(--mdc-ripple-left, 0%);width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.container.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.container:before,.container:after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.container:hover:before,.container.mdc-ripple-surface--hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.container.mdc-ripple-upgraded--background-focused:before,.container:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.container:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.container:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.container.mdc-ripple-upgraded{--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, .12)}.container:after,.container:before{border-radius:8px}.container:hover{cursor:pointer}.checked{border:solid 2px var(--mdc-theme-primary);background-color:var(--mdc-theme-surface-primary-highlight)}.checked:hover{background-color:var(--mdc-theme-surface-primary-highlight-hover)}[name=icon]::slotted(*){font-size:40px;color:var(--mdc-theme-text-icon-on-background)}[name=text]::slotted(*){color:var(--mdc-theme-text-primary-on-background);font-family:var(--mdc-typography-body1-font-family);font-size:var(--mdc-typography-body1-font-size);font-weight:var(--mdc-typography-body1-font-weight);line-height:var(--mdc-typography-body1-line-height);letter-spacing:.4px}[name=text]::slotted(*:last-child){color:var(--mdc-theme-text-secondary-on-background);font-family:var(--mdc-typography-body2-font-family);font-size:var(--mdc-typography-body2-font-size);font-weight:var(--mdc-typography-body2-font-weight);line-height:var(--mdc-typography-body2-line-height)}.mdc-radio__outer-circle{border-color:var(--mdc-theme-text-icon-on-background)}.mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio__inner-circle{border-color:var(--mdc-theme-secondary, #018786)}
+`;
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (o, e, c, i) => {
+  for (var r = i > 1 ? void 0 : i ? x(e, c) : e, n = o.length - 1, d; n >= 0; n--)
+    (d = o[n]) && (r = (i ? d(e, c, r) : d(r)) || r);
+  return i && r && b(e, c, r), r;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.width = "200", this.height = "160", this.iconOnly = !1;
+  }
+  render() {
+    const o = {
+      checked: this.checked
+    }, e = {
+      "--width": this.width == "fill" ? "100%" : `${this.width}px`,
+      "--height": `${this.height}px`
+    };
+    return l`
+        <div class="${v(o)} container" style="${y(
+      e
+    )}" @click="${() => {
+      this.checked = !0;
+    }}">
+            <input type="radio" class="mdc-radio__native-control"></input>
+            <div class="mdc-radio__background">
+                <div class="mdc-radio__outer-circle"></div>
+                <div class="mdc-radio__inner-circle"></div>
+            </div>
+            <slot name="icon"></slot>
+            ${this.iconOnly ? "" : l`<div><slot name="text"></slot></div>`}
+        </div>
+    `;
+  }
+};
+t.styles = [
+  m`
+      ${s(u)}
+    `,
+  g
+];
+a([
+  p()
+], t.prototype, "width", 2);
+a([
+  p()
+], t.prototype, "height", 2);
+a([
+  p({ type: Boolean })
+], t.prototype, "iconOnly", 2);
+t = a([
+  h("cv-radio-icon")
+], t);
+export {
+  t as CovalentIconRadioToggleBase
+};

package/icon.mjs

@@ -0,0 +1,23 @@
+import { I as l } from "./mwc-icon.mjs";
+import { i as c, e as f } from "./query-assigned-elements.mjs";
+import "./tslib.es6.mjs";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-LIcense-Identifier: Apache-2.0
+ */
+const m = c`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}`;
+var p = Object.defineProperty, g = Object.getOwnPropertyDescriptor, v = (a, e, n, o) => {
+  for (var t = o > 1 ? void 0 : o ? g(e, n) : e, i = a.length - 1, r; i >= 0; i--)
+    (r = a[i]) && (t = (o ? r(e, n, t) : r(t)) || t);
+  return o && t && p(e, n, t), t;
+};
+let s = class extends l {
+};
+s.styles = [m];
+s = v([
+  f("cv-icon")
+], s);
+export {
+  s as CovalentIcon
+};

package/if-defined.mjs

@@ -0,0 +1,10 @@
+import { b as r } from "./query-assigned-elements.mjs";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const l = (o) => o ?? r;
+export {
+  l
+};