npm - @lukso/web-components - Versions diffs - 1.26.2 → 1.28.0 - Mend

@lukso/web-components 1.26.2 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (305) hide show

package/dist/components/lukso-share/index.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');

package/dist/components/lukso-share/index.d.ts CHANGED Viewed

@@ -2,8 +2,8 @@ declare const LuksoShare_base: typeof import("lit").LitElement;
 export declare class LuksoShare extends LuksoShare_base {
     customClass: string;
     private urls;
-    linkTemplate(name: string, url: string): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    linkTemplate(name: string, url: string): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/lukso-share/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
+import { T as TailwindStyledElement, x } from '../../index-9c3b5fc0.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';

package/dist/components/lukso-switch/index.cjs ADDED Viewed

@@ -0,0 +1,89 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const styleMap = require('../../style-map-268d75ea.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.color = "green-54";
+    this.isChecked = false;
+    this.isDisabled = false;
+    this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
+    this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
+  }
+  handleChange(event) {
+    this.isChecked = !this.isChecked;
+    const target = event.target;
+    const changeEvent = new CustomEvent("on-change", {
+      detail: {
+        value: target.checked,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(changeEvent);
+  }
+  render() {
+    return shared_tailwindElement_index.x`
+      <label
+        for="switch"
+        class=${index.customClassMap({
+      [this.defaultLabelStyles]: true
+    })}
+        style=${styleMap.o({
+      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
+      opacity: this.isDisabled ? 0.7 : 1,
+      cursor: this.isDisabled ? "not-allowed" : "pointer"
+    })}
+      >
+        <input
+          type="checkbox"
+          id="switch"
+          ?checked=${this.isChecked}
+          ?disabled=${this.isDisabled}
+          class=${index.customClassMap({
+      [this.defaultInputStyles]: true,
+      ["translate-x-4"]: this.isChecked
+    })}
+          style=${styleMap.o({
+      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
+      cursor: this.isDisabled ? "not-allowed" : "pointer"
+    })}
+          @change=${this.handleChange}
+        />
+      </label>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: String })
+], exports.LuksoSwitch.prototype, "color", 2);
+__decorateClass([
+  directive.e({ type: Boolean, attribute: "is-checked" })
+], exports.LuksoSwitch.prototype, "isChecked", 2);
+__decorateClass([
+  directive.e({
+    type: Boolean,
+    attribute: "is-disabled"
+  })
+], exports.LuksoSwitch.prototype, "isDisabled", 2);
+exports.LuksoSwitch = __decorateClass([
+  directive.e$1("lukso-switch")
+], exports.LuksoSwitch);

package/dist/components/lukso-switch/index.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export declare class LuksoSwitch extends TailwindElement {
+    color: string;
+    private isChecked;
+    private isDisabled;
+    private handleChange;
+    private defaultLabelStyles;
+    private defaultInputStyles;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-switch': LuksoSwitch;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-switch/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/lukso-switch/index.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { a as TailwindElement, x } from '../../index-9c3b5fc0.js';
+import { e, a as e$1 } from '../../directive-9ec64c08.js';
+import { o } from '../../style-map-393f6c47.js';
+import { c as customClassMap } from '../../index-714323c9.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let LuksoSwitch = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.color = "green-54";
+    this.isChecked = false;
+    this.isDisabled = false;
+    this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
+    this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
+  }
+  handleChange(event) {
+    this.isChecked = !this.isChecked;
+    const target = event.target;
+    const changeEvent = new CustomEvent("on-change", {
+      detail: {
+        value: target.checked,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(changeEvent);
+  }
+  render() {
+    return x`
+      <label
+        for="switch"
+        class=${customClassMap({
+      [this.defaultLabelStyles]: true
+    })}
+        style=${o({
+      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
+      opacity: this.isDisabled ? 0.7 : 1,
+      cursor: this.isDisabled ? "not-allowed" : "pointer"
+    })}
+      >
+        <input
+          type="checkbox"
+          id="switch"
+          ?checked=${this.isChecked}
+          ?disabled=${this.isDisabled}
+          class=${customClassMap({
+      [this.defaultInputStyles]: true,
+      ["translate-x-4"]: this.isChecked
+    })}
+          style=${o({
+      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
+      cursor: this.isDisabled ? "not-allowed" : "pointer"
+    })}
+          @change=${this.handleChange}
+        />
+      </label>
+    `;
+  }
+};
+__decorateClass([
+  e({ type: String })
+], LuksoSwitch.prototype, "color", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-checked" })
+], LuksoSwitch.prototype, "isChecked", 2);
+__decorateClass([
+  e({
+    type: Boolean,
+    attribute: "is-disabled"
+  })
+], LuksoSwitch.prototype, "isDisabled", 2);
+LuksoSwitch = __decorateClass([
+  e$1("lukso-switch")
+], LuksoSwitch);
+export { LuksoSwitch };

package/dist/components/lukso-tag/index.cjs CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-9b6875c8.cjs');
+const styleMap = require('../../style-map-268d75ea.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 var __defProp = Object.defineProperty;

package/dist/components/lukso-tag/index.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export declare class LuksoTag extends TailwindElement {
     private smallStyles;
     private largeStyles;
     private padding;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/lukso-tag/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-b0a06427.js';
+import { a as TailwindElement, x } from '../../index-9c3b5fc0.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-21c35bc6.js';
+import { o } from '../../style-map-393f6c47.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 var __defProp = Object.defineProperty;

package/dist/components/lukso-terms/index.cjs CHANGED Viewed

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const state = require('../../state-a62a7d5d.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-sanitize/index.cjs');
-require('../../style-map-9b6875c8.cjs');
+require('../../style-map-268d75ea.cjs');
 const style = ":host {\n    display: flex;\n    height: 100%\n}";

package/dist/components/lukso-terms/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export declare class LuksoTerms extends LuksoTerms_base {
     private onScrollBottom;
     private handleScroll;
     private handleBottomScroll;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/lukso-terms/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { T as TailwindStyledElement, x } from '../../index-b0a06427.js';
+import { T as TailwindStyledElement, x } from '../../index-9c3b5fc0.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
 import { t } from '../../state-7fde94d1.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 import '../lukso-icon/index.js';
 import '../lukso-sanitize/index.js';
-import '../../style-map-21c35bc6.js';
+import '../../style-map-393f6c47.js';
 const style = ":host {\n    display: flex;\n    height: 100%\n}";

package/dist/components/lukso-test/index.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 /**

package/dist/components/lukso-test/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export declare class LuksoTest extends LuksoTest_base {
     duration: number;
     controller: AnimateController;
     _onClick(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/lukso-test/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-b0a06427.js';
+import { b as T$1, T as TailwindStyledElement, x as x$2 } from '../../index-9c3b5fc0.js';
 import { b as e$3, i as i$3, t as t$3, e as e$4, a as e$5 } from '../../directive-9ec64c08.js';
 /**

package/dist/components/lukso-username/index.cjs CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-9b6875c8.cjs');
+const styleMap = require('../../style-map-84d1e5a3.cjs');
 const index = require('../../index-7dc05ee5.cjs');
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

package/dist/components/lukso-username/index.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export declare class LuksoUsername extends TailwindElement {
      * e.g: 0x123...789
      */
     private addressTemplate;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/lukso-username/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-b0a06427.js';
+import { a as TailwindElement, x } from '../../index-9c3b5fc0.js';
 import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-21c35bc6.js';
+import { o } from '../../style-map-72c166b8.js';
 import { c as customClassMap } from '../../index-714323c9.js';
 const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {

package/dist/components/lukso-wizard/index.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const shared_tailwindElement_index = require('../../index-53f01760.cjs');
+const shared_tailwindElement_index = require('../../index-8d7f5d0d.cjs');
 const directive = require('../../directive-db00f5fb.cjs');
 const index = require('../../index-7dc05ee5.cjs');

package/dist/components/lukso-wizard/index.d.ts CHANGED Viewed

@@ -8,8 +8,8 @@ export declare class LuksoWizard extends LuksoWizard_base {
     isFullWidth: boolean;
     private activeStepStyles;
     private completedStepStyles;
-    stepTemplate(step: WizardStep, index: number): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    stepTemplate(step: WizardStep, index: number): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     updated(): void;
 }
 declare global {

package/dist/components/lukso-wizard/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Z, b as T, T as TailwindStyledElement, x } from '../../index-b0a06427.js';
+import { Z, b as T, T as TailwindStyledElement, x } from '../../index-9c3b5fc0.js';
 import { b as e, i, t, e as e$1, a as e$2 } from '../../directive-9ec64c08.js';
 import { c as customClassMap } from '../../index-714323c9.js';