0xtrails 0.0.1 → 0.0.2

package/dist/widget/index-BiCU29wK.js

@@ -0,0 +1,147 @@
+import { w as g, v as m, D as w, F as f, i as v, a as b } from "./index-CK94R-H7.js";
+import { x } from "./lit-html-BRjl1r6K.js";
+import { r as u, c as h } from "./if-defined-DRXJEhv7.js";
+const e = m({
+  message: "",
+  open: !1,
+  triggerRect: {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  },
+  variant: "shade"
+}), y = {
+  state: e,
+  subscribe(o) {
+    return f(e, () => o(e));
+  },
+  subscribeKey(o, t) {
+    return w(e, o, t);
+  },
+  showTooltip({ message: o, triggerRect: t, variant: i }) {
+    e.open = !0, e.message = o, e.triggerRect = t, e.variant = i;
+  },
+  hide() {
+    e.open = !1, e.message = "", e.triggerRect = {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0
+    };
+  }
+}, s = g(y), R = v`
+  :host {
+    pointer-events: none;
+  }
+
+  :host > wui-flex {
+    display: var(--w3m-tooltip-display);
+    opacity: var(--w3m-tooltip-opacity);
+    padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s);
+    border-radius: var(--wui-border-radius-xxs);
+    color: var(--wui-color-bg-100);
+    position: fixed;
+    top: var(--w3m-tooltip-top);
+    left: var(--w3m-tooltip-left);
+    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));
+    max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl));
+    transition: opacity 0.2s var(--wui-ease-out-power-2);
+    will-change: opacity;
+  }
+
+  :host([data-variant='shade']) > wui-flex {
+    background-color: var(--wui-color-bg-150);
+    border: 1px solid var(--wui-color-gray-glass-005);
+  }
+
+  :host([data-variant='shade']) > wui-flex > wui-text {
+    color: var(--wui-color-fg-150);
+  }
+
+  :host([data-variant='fill']) > wui-flex {
+    background-color: var(--wui-color-fg-100);
+    border: none;
+  }
+
+  wui-icon {
+    position: absolute;
+    width: 12px !important;
+    height: 4px !important;
+    color: var(--wui-color-bg-150);
+  }
+
+  wui-icon[data-placement='top'] {
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%, 95%);
+  }
+
+  wui-icon[data-placement='bottom'] {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -95%) rotate(180deg);
+  }
+
+  wui-icon[data-placement='right'] {
+    top: 50%;
+    left: 0;
+    transform: translate(-65%, -50%) rotate(90deg);
+  }
+
+  wui-icon[data-placement='left'] {
+    top: 50%;
+    right: 0%;
+    transform: translate(65%, -50%) rotate(270deg);
+  }
+`;
+var n = function(o, t, i, l) {
+  var p = arguments.length, r = p < 3 ? t : l === null ? l = Object.getOwnPropertyDescriptor(t, i) : l, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") r = Reflect.decorate(o, t, i, l);
+  else for (var d = o.length - 1; d >= 0; d--) (c = o[d]) && (r = (p < 3 ? c(r) : p > 3 ? c(t, i, r) : c(t, i)) || r);
+  return p > 3 && r && Object.defineProperty(t, i, r), r;
+};
+let a = class extends b {
+  constructor() {
+    super(), this.unsubscribe = [], this.open = s.state.open, this.message = s.state.message, this.triggerRect = s.state.triggerRect, this.variant = s.state.variant, this.unsubscribe.push(s.subscribe((t) => {
+      this.open = t.open, this.message = t.message, this.triggerRect = t.triggerRect, this.variant = t.variant;
+    }));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((t) => t());
+  }
+  render() {
+    this.dataset.variant = this.variant;
+    const t = this.triggerRect.top, i = this.triggerRect.left;
+    return this.style.cssText = `
+    --w3m-tooltip-top: ${t}px;
+    --w3m-tooltip-left: ${i}px;
+    --w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px;
+    --w3m-tooltip-display: ${this.open ? "flex" : "none"};
+    --w3m-tooltip-opacity: ${this.open ? 1 : 0};
+    `, x`<wui-flex>
+      <wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon>
+      <wui-text color="inherit" variant="small-500">${this.message}</wui-text>
+    </wui-flex>`;
+  }
+};
+a.styles = [R];
+n([
+  u()
+], a.prototype, "open", void 0);
+n([
+  u()
+], a.prototype, "message", void 0);
+n([
+  u()
+], a.prototype, "triggerRect", void 0);
+n([
+  u()
+], a.prototype, "variant", void 0);
+a = n([
+  h("w3m-tooltip"),
+  h("w3m-tooltip")
+], a);
+export {
+  s as T
+};

package/dist/widget/index-BlmqIKsY.js

@@ -0,0 +1,266 @@
+import { i as w, r as g, j as h, a as v } from "./index-CK94R-H7.js";
+import { x as l } from "./lit-html-BRjl1r6K.js";
+import { n as a, c as x, e as m, o as c } from "./if-defined-DRXJEhv7.js";
+import { e as b, n as f } from "./ref-CXNmEjML.js";
+const y = w`
+  :host {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    color: var(--wui-color-fg-275);
+  }
+
+  input {
+    width: 100%;
+    border-radius: var(--wui-border-radius-xs);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    background: var(--wui-color-gray-glass-002);
+    font-size: var(--wui-font-size-paragraph);
+    letter-spacing: var(--wui-letter-spacing-paragraph);
+    color: var(--wui-color-fg-100);
+    transition:
+      background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
+      box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
+    will-change: background-color, border-color, box-shadow;
+    caret-color: var(--wui-color-accent-100);
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+    border: 1px solid var(--wui-color-gray-glass-010);
+  }
+
+  input:disabled::placeholder,
+  input:disabled + wui-icon {
+    color: var(--wui-color-fg-300);
+  }
+
+  input::placeholder {
+    color: var(--wui-color-fg-275);
+  }
+
+  input:focus:enabled {
+    background-color: var(--wui-color-gray-glass-005);
+    -webkit-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    -moz-box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0px 0px 0px 4px var(--wui-box-shadow-blue);
+  }
+
+  input:hover:enabled {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  wui-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .wui-size-sm {
+    padding: 9px var(--wui-spacing-m) 10px var(--wui-spacing-s);
+  }
+
+  wui-icon + .wui-size-sm {
+    padding: 9px var(--wui-spacing-m) 10px 36px;
+  }
+
+  wui-icon[data-input='sm'] {
+    left: var(--wui-spacing-s);
+  }
+
+  .wui-size-md {
+    padding: 15px var(--wui-spacing-m) var(--wui-spacing-l) var(--wui-spacing-m);
+  }
+
+  wui-icon + .wui-size-md,
+  wui-loading-spinner + .wui-size-md {
+    padding: 10.5px var(--wui-spacing-3xl) 10.5px var(--wui-spacing-3xl);
+  }
+
+  wui-icon[data-input='md'] {
+    left: var(--wui-spacing-l);
+  }
+
+  .wui-size-lg {
+    padding: var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-l);
+    letter-spacing: var(--wui-letter-spacing-medium-title);
+    font-size: var(--wui-font-size-medium-title);
+    font-weight: var(--wui-font-weight-light);
+    line-height: 130%;
+    color: var(--wui-color-fg-100);
+    height: 64px;
+  }
+
+  .wui-padding-right-xs {
+    padding-right: var(--wui-spacing-xs);
+  }
+
+  .wui-padding-right-s {
+    padding-right: var(--wui-spacing-s);
+  }
+
+  .wui-padding-right-m {
+    padding-right: var(--wui-spacing-m);
+  }
+
+  .wui-padding-right-l {
+    padding-right: var(--wui-spacing-l);
+  }
+
+  .wui-padding-right-xl {
+    padding-right: var(--wui-spacing-xl);
+  }
+
+  .wui-padding-right-2xl {
+    padding-right: var(--wui-spacing-2xl);
+  }
+
+  .wui-padding-right-3xl {
+    padding-right: var(--wui-spacing-3xl);
+  }
+
+  .wui-padding-right-4xl {
+    padding-right: var(--wui-spacing-4xl);
+  }
+
+  .wui-padding-right-5xl {
+    padding-right: var(--wui-spacing-5xl);
+  }
+
+  wui-icon + .wui-size-lg,
+  wui-loading-spinner + .wui-size-lg {
+    padding-left: 50px;
+  }
+
+  wui-icon[data-input='lg'] {
+    left: var(--wui-spacing-l);
+  }
+
+  .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-m) 17.25px var(--wui-spacing-m);
+  }
+  wui-icon + .wui-size-mdl,
+  wui-loading-spinner + .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-3xl) 17.25px 40px;
+  }
+  wui-icon[data-input='mdl'] {
+    left: var(--wui-spacing-m);
+  }
+
+  input:placeholder-shown ~ ::slotted(wui-input-element),
+  input:placeholder-shown ~ ::slotted(wui-icon) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  ::slotted(wui-input-element),
+  ::slotted(wui-icon) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  ::slotted(wui-input-element) {
+    right: var(--wui-spacing-m);
+  }
+
+  ::slotted(wui-icon) {
+    right: 0px;
+  }
+`;
+var e = function(s, t, o, r) {
+  var p = arguments.length, n = p < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, o) : r, u;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(s, t, o, r);
+  else for (var d = s.length - 1; d >= 0; d--) (u = s[d]) && (n = (p < 3 ? u(n) : p > 3 ? u(t, o, n) : u(t, o)) || n);
+  return p > 3 && n && Object.defineProperty(t, o, n), n;
+};
+let i = class extends v {
+  constructor() {
+    super(...arguments), this.inputElementRef = b(), this.size = "md", this.disabled = !1, this.placeholder = "", this.type = "text", this.value = "";
+  }
+  render() {
+    const t = `wui-padding-right-${this.inputRightPadding}`, r = {
+      [`wui-size-${this.size}`]: !0,
+      [t]: !!this.inputRightPadding
+    };
+    return l`${this.templateIcon()}
+      <input
+        data-testid="wui-input-text"
+        ${f(this.inputElementRef)}
+        class=${m(r)}
+        type=${this.type}
+        enterkeyhint=${c(this.enterKeyHint)}
+        ?disabled=${this.disabled}
+        placeholder=${this.placeholder}
+        @input=${this.dispatchInputChangeEvent.bind(this)}
+        .value=${this.value || ""}
+        tabindex=${c(this.tabIdx)}
+      />
+      <slot></slot>`;
+  }
+  templateIcon() {
+    return this.icon ? l`<wui-icon
+        data-input=${this.size}
+        size=${this.size}
+        color="inherit"
+        name=${this.icon}
+      ></wui-icon>` : null;
+  }
+  dispatchInputChangeEvent() {
+    var t;
+    this.dispatchEvent(new CustomEvent("inputChange", {
+      detail: (t = this.inputElementRef.value) == null ? void 0 : t.value,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+i.styles = [g, h, y];
+e([
+  a()
+], i.prototype, "size", void 0);
+e([
+  a()
+], i.prototype, "icon", void 0);
+e([
+  a({ type: Boolean })
+], i.prototype, "disabled", void 0);
+e([
+  a()
+], i.prototype, "placeholder", void 0);
+e([
+  a()
+], i.prototype, "type", void 0);
+e([
+  a()
+], i.prototype, "keyHint", void 0);
+e([
+  a()
+], i.prototype, "value", void 0);
+e([
+  a()
+], i.prototype, "inputRightPadding", void 0);
+e([
+  a()
+], i.prototype, "tabIdx", void 0);
+i = e([
+  x("wui-input-text")
+], i);

package/dist/widget/index-BlviH5nG.js

@@ -0,0 +1,55 @@
+import { i as u, r as b, j as p, a as f } from "./index-CK94R-H7.js";
+import { x as m } from "./lit-html-BRjl1r6K.js";
+import { n as d, c as v, o as x } from "./if-defined-DRXJEhv7.js";
+const g = u`
+  button {
+    padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs);
+    border-radius: var(--wui-border-radius-3xs);
+    background-color: transparent;
+    color: var(--wui-color-accent-100);
+  }
+
+  button:disabled {
+    background-color: transparent;
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  button:hover {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+`;
+var l = function(n, t, r, i) {
+  var s = arguments.length, o = s < 3 ? t : i === null ? i = Object.getOwnPropertyDescriptor(t, r) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, r, i);
+  else for (var c = n.length - 1; c >= 0; c--) (a = n[c]) && (o = (s < 3 ? a(o) : s > 3 ? a(t, r, o) : a(t, r)) || o);
+  return s > 3 && o && Object.defineProperty(t, r, o), o;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.tabIdx = void 0, this.disabled = !1, this.color = "inherit";
+  }
+  render() {
+    return m`
+      <button ?disabled=${this.disabled} tabindex=${x(this.tabIdx)}>
+        <slot name="iconLeft"></slot>
+        <wui-text variant="small-600" color=${this.color}>
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight"></slot>
+      </button>
+    `;
+  }
+};
+e.styles = [b, p, g];
+l([
+  d()
+], e.prototype, "tabIdx", void 0);
+l([
+  d({ type: Boolean })
+], e.prototype, "disabled", void 0);
+l([
+  d()
+], e.prototype, "color", void 0);
+e = l([
+  v("wui-link")
+], e);