@lukso/web-components 1.172.13 → 1.172.17

package/dist/components/lukso-markdown-editor/index.cjs

@@ -2,20 +2,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
-const property = require('../../chunks/property-D6IL6zax.js');
-const state = require('../../chunks/state-CFjY89m3.js');
-const query = require('../../chunks/query-D3HF7Pde.js');
-const index = require('../../chunks/index-CaJky2qL.js');
-const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
+const lit = require('lit');
+const decorators_js = require('lit/decorators.js');
+const tailwindVariants = require('tailwind-variants');
+const index = require('../../chunks/index-BBPgtFEP.js');
 require('../../tailwind-config.cjs');
-const axe = require('../../chunks/axe-MHuN9KU0.js');
+require('../../chunks/index-oDo-wiUs.js');
+const cn = require('../../chunks/cn-JMx_imgS.js');
+require('viem');
+const axe = require('axe-core');
 require('../lukso-textarea/index.cjs');
 require('../lukso-markdown/index.cjs');
 require('../lukso-switch/index.cjs');
 require('../lukso-button/index.cjs');
 require('../lukso-icon/index.cjs');
-require('../../chunks/index-BHAtoIlu.js');
+require('../../chunks/index-Dh7fuono.js');
 require('../lukso-dropdown/index.cjs');
 require('../lukso-dropdown-option/index.cjs');
 require('../lukso-tooltip/index.cjs');
@@ -45,7 +46,7 @@ async function checkAccessibility(element) {
     };
   }
   try {
-    const results = await axe.axe.run(element, {
+    const results = await axe.run(element, {
       resultTypes: ["violations"],
       tags: ["wcag2a", "wcag2aa", "wcag21aa", "best-practice"],
       rules: {
@@ -209,7 +210,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const DEFAULT_PREVIEW_BACKGROUND_COLOR = "#f9f9f9";
 const DEFAULT_PREVIEW_TEXT_COLOR = "#243542";
 const ACCESSIBILITY_CHECK_DELAY = 1e3;
-exports.LuksoMarkdownEditor = class LuksoMarkdownEditor extends shared_tailwindElement_index.TailwindStyledElement(style) {
+exports.LuksoMarkdownEditor = class LuksoMarkdownEditor extends index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -315,7 +316,7 @@ exports.LuksoMarkdownEditor = class LuksoMarkdownEditor extends shared_tailwindE
         this.isAlignmentDropdownOpen = false;
       }
     };
-    this.styles = index.ce({
+    this.styles = tailwindVariants.tv({
       slots: {
         wrapper: "w-[inherit]",
         header: "flex items-center justify-between gap-2 border border-neutral-90 rounded-12 px-3 py-2 bg-neutral-100",
@@ -339,7 +340,7 @@ exports.LuksoMarkdownEditor = class LuksoMarkdownEditor extends shared_tailwindE
       },
       compoundVariants: [{ isFullWidth: false, class: { wrapper: "w-[500px]" } }]
     });
-    this.toolbarButton = index.ce({
+    this.toolbarButton = tailwindVariants.tv({
       base: "hover:bg-neutral-95 transition border-0 !shadow-none",
       variants: {
         active: { true: "bg-neutral-95" },
@@ -2151,7 +2152,7 @@ ${indent}${nextNumber}. `;
     }
   }
   buttonTemplate(icon, handler, name, isActive = false) {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <lukso-tooltip text=${name} placement="top">
         <lukso-button
           @click=${() => {
@@ -2176,10 +2177,10 @@ ${indent}${nextNumber}. `;
     `;
   }
   toolbarTemplate() {
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class="flex items-center gap-1">
         <!-- Heading -->
-        ${this.toolsState.includes("heading") ? shared_tailwindElement_index.x`<div class=${axe.cn(this.styles().headingMenu())}>
+        ${this.toolsState.includes("heading") ? lit.html`<div class=${cn.cn(this.styles().headingMenu())}>
               <lukso-tooltip text="Heading options" placement="top">
                 <lukso-button
                   id=${this.headingTriggerId}
@@ -2274,7 +2275,7 @@ ${indent}${nextNumber}. `;
                   Heading 4
                 </lukso-dropdown-option>
               </lukso-dropdown>
-            </div>` : shared_tailwindElement_index.E}
+            </div>` : lit.nothing}
 
         <!-- Bold -->
         ${this.toolsState.includes("bold") ? this.buttonTemplate(
@@ -2282,7 +2283,7 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("**"),
       "Bold",
       this.activeFormats.bold
-    ) : shared_tailwindElement_index.E}
+    ) : lit.nothing}
 
         <!-- Italic -->
         ${this.toolsState.includes("italic") ? this.buttonTemplate(
@@ -2290,10 +2291,10 @@ ${indent}${nextNumber}. `;
       () => this.toggleWrap("*"),
       "Italic",
       this.activeFormats.italic
-    ) : shared_tailwindElement_index.E}
+    ) : lit.nothing}
 
         <!-- List -->
-        ${this.toolsState.includes("list") ? shared_tailwindElement_index.x`
+        ${this.toolsState.includes("list") ? lit.html`
               <div class=${this.styles().listMenu()}>
                 <lukso-tooltip text="List options" placement="top">
                   <lukso-button
@@ -2367,7 +2368,7 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : shared_tailwindElement_index.E}
+            ` : lit.nothing}
 
         <!-- Link -->
         ${this.toolsState.includes("link") ? this.buttonTemplate(
@@ -2375,10 +2376,10 @@ ${indent}${nextNumber}. `;
       () => this.insertLink(),
       "Link",
       this.activeFormats.link
-    ) : shared_tailwindElement_index.E}
+    ) : lit.nothing}
 
         <!-- Text Alignment -->
-        ${this.toolsState.includes("alignment") ? shared_tailwindElement_index.x`
+        ${this.toolsState.includes("alignment") ? lit.html`
               <div class=${this.styles().alignmentMenu()}>
                 <lukso-tooltip text="Text alignment" placement="top">
                   <lukso-button
@@ -2479,10 +2480,10 @@ ${indent}${nextNumber}. `;
                   </lukso-dropdown-option>
                 </lukso-dropdown>
               </div>
-            ` : shared_tailwindElement_index.E}
+            ` : lit.nothing}
 
         <!-- Color -->
-        ${this.toolsState.includes("color") ? shared_tailwindElement_index.x`
+        ${this.toolsState.includes("color") ? lit.html`
               <div class=${this.styles().colorMenu()}>
                 <lukso-tooltip text="Text color" placement="top">
                   <lukso-button
@@ -2532,7 +2533,7 @@ ${indent}${nextNumber}. `;
                       class="col-span-8 mb-2 flex items-center justify-between"
                     >
                       <span class="text-xs text-neutral-60">Text Color</span>
-                      ${this.activeFormats.color ? shared_tailwindElement_index.x`<button
+                      ${this.activeFormats.color ? lit.html`<button
                             class="text-xs text-neutral-60 hover:text-neutral-20 underline"
                             @click=${(e) => {
       e.stopPropagation();
@@ -2543,10 +2544,10 @@ ${indent}${nextNumber}. `;
                             aria-label="Clear color"
                           >
                             Clear
-                          </button>` : shared_tailwindElement_index.E}
+                          </button>` : lit.nothing}
                     </div>
                     ${this.colorSamples.map(
-      (color) => shared_tailwindElement_index.x`
+      (color) => lit.html`
                         <button
                           class="w-6 h-6 rounded-4 border transition-all ${this.activeFormats.activeColor === color ? "border-neutral-20 ring-2 ring-purple-51" : "border-neutral-90 hover:border-neutral-60"}"
                           style="background-color: ${color}"
@@ -2564,19 +2565,19 @@ ${indent}${nextNumber}. `;
                   </div>
                 </lukso-dropdown>
               </div>
-            ` : shared_tailwindElement_index.E}
+            ` : lit.nothing}
 
         <!-- Divider -->
-        ${this.toolsState.length > 0 ? shared_tailwindElement_index.x`<div class=${this.styles().divider()}></div>` : shared_tailwindElement_index.E}
+        ${this.toolsState.length > 0 ? lit.html`<div class=${this.styles().divider()}></div>` : lit.nothing}
       </div>
     `;
   }
   accessibilityIndicatorTemplate() {
     if (!this.hasAccessibilityViolations || this.accessibilityViolations.length === 0 || !this.isPreview) {
-      return shared_tailwindElement_index.E;
+      return lit.nothing;
     }
     const tooltipText = formatViolationsForTooltip(this.accessibilityViolations);
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div
         class="accessibility-indicator has-violations absolute top-2 right-2 z-10"
         style="pointer-events: auto;"
@@ -2623,7 +2624,7 @@ ${indent}${nextNumber}. `;
         error
       );
     }
-    return shared_tailwindElement_index.x`
+    return lit.html`
       <div class=${wrapper()}>
         <div>
           <lukso-form-label
@@ -2647,14 +2648,14 @@ ${indent}${nextNumber}. `;
           </div>
 
           <div class=${area()}>
-            ${!this.isPreview ? shared_tailwindElement_index.x`<div class=${editor()}>
+            ${!this.isPreview ? lit.html`<div class=${editor()}>
                   <lukso-textarea
                     .value=${this.value}
-                    name=${this.name ? this.name : shared_tailwindElement_index.E}
-                    size=${this.size ? this.size : shared_tailwindElement_index.E}
-                    rows=${this.rows ? this.rows : shared_tailwindElement_index.E}
-                    placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
-                    error=${this.error ? this.error : shared_tailwindElement_index.E}
+                    name=${this.name ? this.name : lit.nothing}
+                    size=${this.size ? this.size : lit.nothing}
+                    rows=${this.rows ? this.rows : lit.nothing}
+                    placeholder=${this.placeholder ? this.placeholder : lit.nothing}
+                    error=${this.error ? this.error : lit.nothing}
                     ?is-full-width=${true}
                     ?is-disabled=${this.isDisabled}
                     ?is-readonly=${this.isReadonly}
@@ -2664,7 +2665,7 @@ ${indent}${nextNumber}. `;
                     @on-input-click=${this.handleTextareaClick}
                   ></lukso-textarea>
                   ${this.accessibilityIndicatorTemplate()}
-                </div>` : shared_tailwindElement_index.x`<div
+                </div>` : lit.html`<div
                   class=${preview()}
                   style="background-color: ${this.previewBackgroundColor};"
                 >
@@ -2682,99 +2683,99 @@ ${indent}${nextNumber}. `;
   }
 };
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "value", 2);
 __decorateClass([
-  property.n({ type: String, reflect: true })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.LuksoMarkdownEditor.prototype, "name", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "label", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "description", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "error", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-full-width" })
+  decorators_js.property({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoMarkdownEditor.prototype, "isFullWidth", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-readonly" })
+  decorators_js.property({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoMarkdownEditor.prototype, "isReadonly", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-disabled" })
+  decorators_js.property({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoMarkdownEditor.prototype, "isDisabled", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-non-resizable" })
+  decorators_js.property({ type: Boolean, attribute: "is-non-resizable" })
 ], exports.LuksoMarkdownEditor.prototype, "isNonResizable", 2);
 __decorateClass([
-  property.n({ type: Boolean })
+  decorators_js.property({ type: Boolean })
 ], exports.LuksoMarkdownEditor.prototype, "autofocus", 2);
 __decorateClass([
-  property.n({ type: String, reflect: true })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.LuksoMarkdownEditor.prototype, "size", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "is-preview", reflect: true })
+  decorators_js.property({ type: Boolean, attribute: "is-preview", reflect: true })
 ], exports.LuksoMarkdownEditor.prototype, "isPreview", 2);
 __decorateClass([
-  property.n({ type: Number })
+  decorators_js.property({ type: Number })
 ], exports.LuksoMarkdownEditor.prototype, "rows", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "placeholder", 2);
 __decorateClass([
-  property.n({
+  decorators_js.property({
     type: String,
     attribute: "preview-background-color",
     reflect: true
   })
 ], exports.LuksoMarkdownEditor.prototype, "previewBackgroundColor", 2);
 __decorateClass([
-  property.n({ type: String, attribute: "preview-text-color", reflect: true })
+  decorators_js.property({ type: String, attribute: "preview-text-color", reflect: true })
 ], exports.LuksoMarkdownEditor.prototype, "previewTextColor", 2);
 __decorateClass([
-  property.n({ type: Boolean, attribute: "strip-html-tags" })
+  decorators_js.property({ type: Boolean, attribute: "strip-html-tags" })
 ], exports.LuksoMarkdownEditor.prototype, "stripHtmlTags", 2);
 __decorateClass([
-  property.n({ type: String })
+  decorators_js.property({ type: String })
 ], exports.LuksoMarkdownEditor.prototype, "tools", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "toolsState", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "savedSelectionForPreview", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "isHeadingDropdownOpen", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "isColorDropdownOpen", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "isListDropdownOpen", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "isAlignmentDropdownOpen", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "currentSelection", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "savedSelection", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "activeFormats", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "accessibilityViolations", 2);
 __decorateClass([
-  state.r()
+  decorators_js.state()
 ], exports.LuksoMarkdownEditor.prototype, "hasAccessibilityViolations", 2);
 __decorateClass([
-  query.e("lukso-textarea")
+  decorators_js.query("lukso-textarea")
 ], exports.LuksoMarkdownEditor.prototype, "textareaEl", 2);
 exports.LuksoMarkdownEditor = __decorateClass([
-  safeCustomElement.safeCustomElement("lukso-markdown-editor")
+  index.safeCustomElement("lukso-markdown-editor")
 ], exports.LuksoMarkdownEditor);