0xtrails 0.0.1 → 0.0.2

package/dist/widget/index-CQzo3m3x.js

@@ -0,0 +1,182 @@
+import { i as h, r as b, j as w, a as g } from "./index-CK94R-H7.js";
+import { x as r } from "./lit-html-BRjl1r6K.js";
+import { n as o, c as v, o as p } from "./if-defined-DRXJEhv7.js";
+import "./index-CDlhy529.js";
+import "./index-BTlDgFSK.js";
+import "./index-CD6dBcRj.js";
+const m = h`
+  button {
+    column-gap: var(--wui-spacing-s);
+    padding: 11px 18px 11px var(--wui-spacing-s);
+    width: 100%;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+    color: var(--wui-color-fg-250);
+    transition:
+      color var(--wui-ease-out-power-1) var(--wui-duration-md),
+      background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: color, background-color;
+  }
+
+  button[data-iconvariant='square'],
+  button[data-iconvariant='square-blue'] {
+    padding: 6px 18px 6px 9px;
+  }
+
+  button > wui-flex {
+    flex: 1;
+  }
+
+  button > wui-image {
+    width: 32px;
+    height: 32px;
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  button > wui-icon {
+    width: 36px;
+    height: 36px;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+  }
+
+  button > wui-icon-box[data-variant='blue'] {
+    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-005);
+  }
+
+  button > wui-icon-box[data-variant='overlay'] {
+    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
+  }
+
+  button > wui-icon-box[data-variant='square-blue'] {
+    border-radius: var(--wui-border-radius-3xs);
+    position: relative;
+    border: none;
+    width: 36px;
+    height: 36px;
+  }
+
+  button > wui-icon-box[data-variant='square-blue']::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    border: 1px solid var(--wui-color-accent-glass-010);
+    pointer-events: none;
+  }
+
+  button > wui-icon:last-child {
+    width: 14px;
+    height: 14px;
+  }
+
+  button:disabled {
+    color: var(--wui-color-gray-glass-020);
+  }
+
+  button[data-loading='true'] > wui-icon {
+    opacity: 0;
+  }
+
+  wui-loading-spinner {
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+var t = function(u, a, e, s) {
+  var l = arguments.length, n = l < 3 ? a : s === null ? s = Object.getOwnPropertyDescriptor(a, e) : s, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(u, a, e, s);
+  else for (var d = u.length - 1; d >= 0; d--) (c = u[d]) && (n = (l < 3 ? c(n) : l > 3 ? c(a, e, n) : c(a, e)) || n);
+  return l > 3 && n && Object.defineProperty(a, e, n), n;
+};
+let i = class extends g {
+  constructor() {
+    super(...arguments), this.tabIdx = void 0, this.variant = "icon", this.disabled = !1, this.imageSrc = void 0, this.alt = void 0, this.chevron = !1, this.loading = !1;
+  }
+  render() {
+    return r`
+      <button
+        ?disabled=${this.loading ? !0 : !!this.disabled}
+        data-loading=${this.loading}
+        data-iconvariant=${p(this.iconVariant)}
+        tabindex=${p(this.tabIdx)}
+      >
+        ${this.loadingTemplate()} ${this.visualTemplate()}
+        <wui-flex gap="3xs">
+          <slot></slot>
+        </wui-flex>
+        ${this.chevronTemplate()}
+      </button>
+    `;
+  }
+  visualTemplate() {
+    if (this.variant === "image" && this.imageSrc)
+      return r`<wui-image src=${this.imageSrc} alt=${this.alt ?? "list item"}></wui-image>`;
+    if (this.iconVariant === "square" && this.icon && this.variant === "icon")
+      return r`<wui-icon name=${this.icon}></wui-icon>`;
+    if (this.variant === "icon" && this.icon && this.iconVariant) {
+      const a = ["blue", "square-blue"].includes(this.iconVariant) ? "accent-100" : "fg-200", e = this.iconVariant === "square-blue" ? "mdl" : "md", s = this.iconSize ? this.iconSize : e;
+      return r`
+        <wui-icon-box
+          data-variant=${this.iconVariant}
+          icon=${this.icon}
+          iconSize=${s}
+          background="transparent"
+          iconColor=${a}
+          backgroundColor=${a}
+          size=${e}
+        ></wui-icon-box>
+      `;
+    }
+    return null;
+  }
+  loadingTemplate() {
+    return this.loading ? r`<wui-loading-spinner
+        data-testid="wui-list-item-loading-spinner"
+        color="fg-300"
+      ></wui-loading-spinner>` : r``;
+  }
+  chevronTemplate() {
+    return this.chevron ? r`<wui-icon size="inherit" color="fg-200" name="chevronRight"></wui-icon>` : null;
+  }
+};
+i.styles = [b, w, m];
+t([
+  o()
+], i.prototype, "icon", void 0);
+t([
+  o()
+], i.prototype, "iconSize", void 0);
+t([
+  o()
+], i.prototype, "tabIdx", void 0);
+t([
+  o()
+], i.prototype, "variant", void 0);
+t([
+  o()
+], i.prototype, "iconVariant", void 0);
+t([
+  o({ type: Boolean })
+], i.prototype, "disabled", void 0);
+t([
+  o()
+], i.prototype, "imageSrc", void 0);
+t([
+  o()
+], i.prototype, "alt", void 0);
+t([
+  o({ type: Boolean })
+], i.prototype, "chevron", void 0);
+t([
+  o({ type: Boolean })
+], i.prototype, "loading", void 0);
+i = t([
+  v("wui-list-item")
+], i);

package/dist/widget/index-CRT8cAwG.js

@@ -0,0 +1,325 @@
+import { i as g, r as p, j as b, a as w } from "./index-CK94R-H7.js";
+import { x as d } from "./lit-html-BRjl1r6K.js";
+import { n as r, c as h } from "./if-defined-DRXJEhv7.js";
+import "./index-BTlDgFSK.js";
+const x = g`
+  :host {
+    width: var(--local-width);
+    position: relative;
+  }
+
+  button {
+    border: none;
+    border-radius: var(--local-border-radius);
+    width: var(--local-width);
+    white-space: nowrap;
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='xs'] {
+    padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
+    height: 24px;
+  }
+
+  button[data-size='xs'][data-icon-left='true'][data-icon-right='false'] {
+    padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
+  }
+
+  button[data-size='xs'][data-icon-right='true'][data-icon-left='false'] {
+    padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
+  }
+
+  button[data-size='sm'] {
+    padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
+    height: 32px;
+  }
+
+  button[data-size='sm'][data-icon-left='true'][data-icon-right='false'] {
+    padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
+  }
+
+  button[data-size='sm'][data-icon-right='true'][data-icon-left='false'] {
+    padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
+  }
+
+  button[data-size='md'] {
+    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
+    height: 36px;
+  }
+
+  button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
+    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
+  }
+
+  button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
+    padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
+  }
+
+  button[data-size='lg'] {
+    padding: var(--wui-spacing-m) var(--wui-spacing-2l);
+    height: 48px;
+  }
+
+  /* -- Variants --------------------------------------------------------- */
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='inverse'] {
+    background-color: var(--wui-color-inverse-100);
+    color: var(--wui-color-inverse-000);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='accent-error'] {
+    background: var(--wui-color-error-glass-015);
+    color: var(--wui-color-error-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
+  }
+
+  button[data-variant='accent-success'] {
+    background: var(--wui-color-success-glass-015);
+    color: var(--wui-color-success-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
+  }
+
+  button[data-variant='neutral'] {
+    background: transparent;
+    color: var(--wui-color-fg-100);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button[data-variant='main']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-090);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='inverse']:focus-visible:enabled {
+    background-color: var(--wui-color-inverse-100);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent']:focus-visible:enabled {
+    background-color: var(--wui-color-accent-glass-010);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+  button[data-variant='accent-error']:focus-visible:enabled {
+    background: var(--wui-color-error-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-error-100),
+      0 0 0 4px var(--wui-color-error-glass-020);
+  }
+  button[data-variant='accent-success']:focus-visible:enabled {
+    background: var(--wui-color-success-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-success-100),
+      0 0 0 4px var(--wui-color-success-glass-020);
+  }
+  button[data-variant='neutral']:focus-visible:enabled {
+    background: var(--wui-color-gray-glass-005);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-gray-glass-002);
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='accent-error']:hover:enabled {
+      background: var(--wui-color-error-glass-020);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-error']:active:enabled {
+      background: var(--wui-color-error-glass-030);
+      color: var(--wui-color-error-100);
+    }
+
+    button[data-variant='accent-success']:hover:enabled {
+      background: var(--wui-color-success-glass-020);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='accent-success']:active:enabled {
+      background: var(--wui-color-success-glass-030);
+      color: var(--wui-color-success-100);
+    }
+
+    button[data-variant='neutral']:hover:enabled {
+      background: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='neutral']:active:enabled {
+      background: var(--wui-color-gray-glass-005);
+    }
+
+    button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
+      padding-left: var(--wui-spacing-m);
+    }
+
+    button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
+      padding-right: var(--wui-spacing-m);
+    }
+  }
+
+  /* -- Disabled state --------------------------------------------------- */
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    color: var(--wui-color-gray-glass-020);
+    cursor: not-allowed;
+  }
+
+  button > wui-text {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+  }
+
+  ::slotted(*) {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+  }
+
+  wui-loading-spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: var(--local-opacity-000);
+  }
+`;
+var t = function(e, o, s, n) {
+  var c = arguments.length, i = c < 3 ? o : n === null ? n = Object.getOwnPropertyDescriptor(o, s) : n, l;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(e, o, s, n);
+  else for (var u = e.length - 1; u >= 0; u--) (l = e[u]) && (i = (c < 3 ? l(i) : c > 3 ? l(o, s, i) : l(o, s)) || i);
+  return c > 3 && i && Object.defineProperty(o, s, i), i;
+};
+const v = {
+  main: "inverse-100",
+  inverse: "inverse-000",
+  accent: "accent-100",
+  "accent-error": "error-100",
+  "accent-success": "success-100",
+  neutral: "fg-100",
+  disabled: "gray-glass-020"
+}, f = {
+  lg: "paragraph-600",
+  md: "small-600",
+  sm: "small-600",
+  xs: "tiny-600"
+}, m = {
+  lg: "md",
+  md: "md",
+  sm: "sm",
+  xs: "sm"
+};
+let a = class extends w {
+  constructor() {
+    super(...arguments), this.size = "lg", this.disabled = !1, this.fullWidth = !1, this.loading = !1, this.variant = "main", this.hasIconLeft = !1, this.hasIconRight = !1, this.borderRadius = "m";
+  }
+  render() {
+    this.style.cssText = `
+    --local-width: ${this.fullWidth ? "100%" : "auto"};
+    --local-opacity-100: ${this.loading ? 0 : 1};
+    --local-opacity-000: ${this.loading ? 1 : 0};
+    --local-border-radius: var(--wui-border-radius-${this.borderRadius});
+    `;
+    const o = this.textVariant ?? f[this.size];
+    return d`
+      <button
+        data-variant=${this.variant}
+        data-icon-left=${this.hasIconLeft}
+        data-icon-right=${this.hasIconRight}
+        data-size=${this.size}
+        ?disabled=${this.disabled}
+      >
+        ${this.loadingTemplate()}
+        <slot name="iconLeft" @slotchange=${() => this.handleSlotLeftChange()}></slot>
+        <wui-text variant=${o} color="inherit">
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight" @slotchange=${() => this.handleSlotRightChange()}></slot>
+      </button>
+    `;
+  }
+  handleSlotLeftChange() {
+    this.hasIconLeft = !0;
+  }
+  handleSlotRightChange() {
+    this.hasIconRight = !0;
+  }
+  loadingTemplate() {
+    if (this.loading) {
+      const o = m[this.size], s = this.disabled ? v.disabled : v[this.variant];
+      return d`<wui-loading-spinner color=${s} size=${o}></wui-loading-spinner>`;
+    }
+    return d``;
+  }
+};
+a.styles = [p, b, x];
+t([
+  r()
+], a.prototype, "size", void 0);
+t([
+  r({ type: Boolean })
+], a.prototype, "disabled", void 0);
+t([
+  r({ type: Boolean })
+], a.prototype, "fullWidth", void 0);
+t([
+  r({ type: Boolean })
+], a.prototype, "loading", void 0);
+t([
+  r()
+], a.prototype, "variant", void 0);
+t([
+  r({ type: Boolean })
+], a.prototype, "hasIconLeft", void 0);
+t([
+  r({ type: Boolean })
+], a.prototype, "hasIconRight", void 0);
+t([
+  r()
+], a.prototype, "borderRadius", void 0);
+t([
+  r()
+], a.prototype, "textVariant", void 0);
+a = t([
+  h("wui-button")
+], a);