le-kit 0.1.5 → 0.1.7

package/dist/cjs/le-text.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-text.entry.cjs.js","sources":["src/components/le-text/le-text.default.css?tag=le-text&encapsulation=shadow","src/components/le-text/le-text.tsx"],"sourcesContent":["/**\n * le-text default styles\n *\n * Semantic text element with variant-based styling\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base text styles */\n.le-text {\n  margin: 0;\n  color: var(--le-text-color, var(--le-color-text));\n  font-family: var(--le-font-family);\n  line-height: var(--le-text-line-height, 1.5);\n}\n\n/* Paragraph */\n.variant-p {\n  font-size: var(--le-font-size-base, 1rem);\n  font-weight: var(--le-font-weight-normal, 400);\n  color: var(--le-color-text);\n}\n\n/* Headings */\n.variant-h1 {\n  font-size: var(--le-font-size-4xl, 2.5rem);\n  font-weight: var(--le-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--le-color-text);\n  letter-spacing: -0.02em;\n}\n\n.variant-h2 {\n  font-size: var(--le-font-size-3xl, 2rem);\n  font-weight: var(--le-font-weight-bold, 700);\n  line-height: 1.25;\n  color: var(--le-color-text);\n  letter-spacing: -0.01em;\n}\n\n.variant-h3 {\n  font-size: var(--le-font-size-2xl, 1.5rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  line-height: 1.3;\n  color: var(--le-color-text);\n}\n\n.variant-h4 {\n  font-size: var(--le-font-size-xl, 1.25rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  line-height: 1.35;\n  color: var(--le-color-text);\n}\n\n.variant-h5 {\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  line-height: 1.4;\n  color: var(--le-color-text);\n}\n\n.variant-h6 {\n  font-size: var(--le-font-size-base, 1rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  line-height: 1.45;\n  color: var(--le-color-text);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Code */\n.variant-code {\n  font-family: var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  background: var(--le-color-surface-alt, #f5f5f5);\n  padding: var(--le-space-md);\n  border-radius: var(--le-radius-md);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  color: var(--le-color-text);\n}\n\n/* Quote */\n.variant-quote {\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-style: italic;\n  color: var(--le-color-text-secondary);\n  border-left: 4px solid var(--le-color-primary);\n  padding-left: var(--le-space-lg);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Label */\n.variant-label {\n  font-size: var(--le-font-size-sm, 0.875rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  color: var(--le-color-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Small */\n.variant-small {\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text-secondary);\n}\n\n/* Truncation */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.truncate.max-lines-2,\n.truncate.max-lines-3,\n.truncate.max-lines-4,\n.truncate.max-lines-5 {\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.truncate.max-lines-2 { -webkit-line-clamp: 2; line-clamp: 2; }\n.truncate.max-lines-3 { -webkit-line-clamp: 3; line-clamp: 3; }\n.truncate.max-lines-4 { -webkit-line-clamp: 4; line-clamp: 4; }\n.truncate.max-lines-5 { -webkit-line-clamp: 5; line-clamp: 5; }\n\n/* Alignment */\n:host([align=\"center\"]) .le-text { text-align: center; }\n:host([align=\"right\"]) .le-text { text-align: right; }\n:host([align=\"justify\"]) .le-text { text-align: justify; }\n\n/* Links inside text */\n.le-text a {\n  color: var(--le-color-primary);\n  text-decoration: underline;\n}\n\n.le-text a:hover {\n  color: var(--le-color-primary-dark);\n}\n\n/* Bold, italic, etc. */\n.le-text strong,\n.le-text b {\n  font-weight: var(--le-font-weight-bold, 700);\n}\n\n.le-text em,\n.le-text i {\n  font-style: italic;\n}\n\n.le-text u {\n  text-decoration: underline;\n}\n\n.le-text s,\n.le-text strike {\n  text-decoration: line-through;\n}\n","import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\nimport { observeModeChanges } from '../../utils/utils';\n\n/**\n * A text component with rich text editing capabilities in admin mode.\n *\n * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)\n * and provides a Notion-like rich text editor in admin mode with formatting\n * toolbar for bold, italic, links, and paragraph type selection.\n *\n * @slot - Default slot for text content\n *\n * @cssprop --le-text-color - Text color\n * @cssprop --le-text-font-size - Font size\n * @cssprop --le-text-line-height - Line height\n * @cssprop --le-text-font-weight - Font weight\n *\n * @csspart text - The text container element\n *\n * @cmsEditable true\n * @cmsCategory Content\n */\n@Component({\n  tag: 'le-text',\n  styleUrl: 'le-text.default.css',\n  shadow: true,\n})\nexport class LeText {\n  @Element() el: HTMLElement;\n\n  /**\n   * The semantic variant/type of text element\n   * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small\n   */\n  @Prop({ mutable: true, reflect: true }) variant: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small' = 'p';\n\n  /**\n   * Text alignment\n   * @allowedValues left | center | right | justify\n   */\n  @Prop({ reflect: true }) align: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  /**\n   * Text color (CSS value or theme token)\n   */\n  @Prop() color?: string;\n\n  /**\n   * Whether the text should truncate with ellipsis\n   */\n  @Prop() truncate: boolean = false;\n\n  /**\n   * Maximum number of lines before truncating (requires truncate=true)\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * The HTML content being edited\n   */\n  @State() private content: string = '';\n\n  /**\n   * Whether the editor is focused (shows toolbar)\n   */\n  @State() private isFocused: boolean = false;\n\n  /**\n   * Current selection state for toolbar button highlighting\n   */\n  @State() private selectionState: SelectionState = {\n    isBold: false,\n    isItalic: false,\n    isUnderline: false,\n    isStrikethrough: false,\n    isLink: false,\n    blockType: 'p',\n  };\n\n  /**\n   * Reference to the contenteditable element\n   */\n  private editorRef?: HTMLDivElement;\n\n  /**\n   * Reference to the slot element\n   */\n  private slotRef?: HTMLSlotElement;\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n      const wasAdmin = this.adminMode;\n      this.adminMode = mode === 'admin';\n      \n      if (this.adminMode && !wasAdmin) {\n        // Entering admin mode - read content from slot\n        requestAnimationFrame(() => this.readSlottedContent());\n      } else if (!this.adminMode && wasAdmin) {\n        // Leaving admin mode - sync content back to slot\n        this.syncContentToSlot();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    // When variant changes in admin mode, update the content wrapper\n    if (this.adminMode && this.editorRef) {\n      this.syncContentToSlot();\n    }\n  }\n\n  /**\n   * Read content from slotted elements\n   */\n  private readSlottedContent() {\n    if (!this.slotRef) return;\n    \n    const assignedNodes = this.slotRef.assignedNodes({ flatten: true });\n    \n    // Collect all content from assigned nodes\n    let html = '';\n    assignedNodes.forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        html += node.textContent;\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        html += (node as Element).innerHTML || node.textContent;\n      }\n    });\n    \n    this.content = html.trim();\n  }\n\n  /**\n   * Sync edited content back to the slot\n   */\n  private syncContentToSlot() {\n    if (!this.editorRef) return;\n    \n    const newContent = this.editorRef.innerHTML;\n    \n    // Update the light DOM content\n    // We need to update the actual slotted content\n    const slot = this.slotRef;\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      if (assignedNodes.length > 0) {\n        const firstNode = assignedNodes[0];\n        if (firstNode.nodeType === Node.ELEMENT_NODE) {\n          (firstNode as Element).innerHTML = newContent;\n        } else if (firstNode.nodeType === Node.TEXT_NODE) {\n          // Replace text node with the new content\n          const parent = firstNode.parentNode;\n          if (parent) {\n            // Create a temporary element to parse HTML\n            const temp = document.createElement('span');\n            temp.innerHTML = newContent;\n            // Replace the text node\n            parent.replaceChild(temp, firstNode);\n            // Unwrap the span if it only contains text\n            if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {\n              parent.replaceChild(temp.firstChild, temp);\n            }\n          }\n        }\n      } else {\n        // No assigned nodes, set innerHTML on the host's light DOM\n        this.el.innerHTML = newContent;\n      }\n    }\n  }\n\n  /**\n   * Handle input in the contenteditable\n   */\n  private handleInput = () => {\n    if (this.editorRef) {\n      this.content = this.editorRef.innerHTML;\n      this.updateSelectionState();\n    }\n  };\n\n  /**\n   * Handle focus on the editor\n   */\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.updateSelectionState();\n  };\n\n  /**\n   * Handle blur on the editor\n   */\n  private handleBlur = (e: FocusEvent) => {\n    // Check if focus moved to toolbar\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');\n    \n    if (toolbar?.contains(relatedTarget)) {\n      // Focus moved to toolbar, keep it open\n      return;\n    }\n    \n    // Small delay to allow toolbar clicks to register\n    setTimeout(() => {\n      if (!this.el.shadowRoot?.activeElement) {\n        this.isFocused = false;\n        this.syncContentToSlot();\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle selection change to update toolbar state\n   */\n  private handleSelectionChange = () => {\n    this.updateSelectionState();\n  };\n\n  /**\n   * Update the selection state for toolbar highlighting\n   */\n  private updateSelectionState() {\n    const selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0) return;\n\n    this.selectionState = {\n      isBold: document.queryCommandState('bold'),\n      isItalic: document.queryCommandState('italic'),\n      isUnderline: document.queryCommandState('underline'),\n      isStrikethrough: document.queryCommandState('strikeThrough'),\n      isLink: this.isSelectionInLink(selection),\n      blockType: this.variant,\n    };\n  }\n\n  /**\n   * Check if current selection is within a link\n   */\n  private isSelectionInLink(selection: Selection): boolean {\n    if (!selection.anchorNode) return false;\n    \n    let node: Node | null = selection.anchorNode;\n    while (node && node !== this.editorRef) {\n      if (node.nodeName === 'A') return true;\n      node = node.parentNode;\n    }\n    return false;\n  }\n\n  /**\n   * Execute a formatting command\n   */\n  private execCommand(command: string, value?: string) {\n    // Focus the editor first\n    this.editorRef?.focus();\n    \n    // Execute the command\n    document.execCommand(command, false, value);\n    \n    // Update state\n    this.handleInput();\n    this.updateSelectionState();\n  }\n\n  /**\n   * Toggle bold formatting\n   */\n  private toggleBold = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('bold');\n  };\n\n  /**\n   * Toggle italic formatting\n   */\n  private toggleItalic = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('italic');\n  };\n\n  /**\n   * Toggle underline formatting\n   */\n  private toggleUnderline = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('underline');\n  };\n\n  /**\n   * Toggle strikethrough formatting\n   */\n  private toggleStrikethrough = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('strikeThrough');\n  };\n\n  /**\n   * Add or edit a link\n   */\n  private toggleLink = (e: Event) => {\n    e.preventDefault();\n    \n    if (this.selectionState.isLink) {\n      // Remove link\n      this.execCommand('unlink');\n    } else {\n      // Add link\n      const url = prompt('Enter URL:', 'https://');\n      if (url) {\n        this.execCommand('createLink', url);\n      }\n    }\n  };\n\n  /**\n   * Change the block type/variant\n   */\n  private changeVariant = (e: Event) => {\n    const select = e.target as HTMLSelectElement;\n    this.variant = select.value as typeof this.variant;\n  };\n\n  /**\n   * Render the formatting toolbar\n   */\n  private renderToolbar() {\n    return (\n      <div class=\"le-text-toolbar\">\n        <select \n          class=\"le-text-toolbar-select\"\n          onChange={this.changeVariant}\n          onMouseDown={(e) => e.preventDefault()}\n        >\n          <option value=\"p\" selected={this.variant === 'p'}>Paragraph</option>\n          <option value=\"h1\" selected={this.variant === 'h1'}>Heading 1</option>\n          <option value=\"h2\" selected={this.variant === 'h2'}>Heading 2</option>\n          <option value=\"h3\" selected={this.variant === 'h3'}>Heading 3</option>\n          <option value=\"h4\" selected={this.variant === 'h4'}>Heading 4</option>\n          <option value=\"h5\" selected={this.variant === 'h5'}>Heading 5</option>\n          <option value=\"h6\" selected={this.variant === 'h6'}>Heading 6</option>\n          <option value=\"quote\" selected={this.variant === 'quote'}>Quote</option>\n          <option value=\"code\" selected={this.variant === 'code'}>Code</option>\n          <option value=\"label\" selected={this.variant === 'label'}>Label</option>\n          <option value=\"small\" selected={this.variant === 'small'}>Small</option>\n        </select>\n        \n        <div class=\"le-text-toolbar-divider\"></div>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }}\n          onMouseDown={this.toggleBold}\n          title=\"Bold (Ctrl+B)\"\n        >\n          <strong>B</strong>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }}\n          onMouseDown={this.toggleItalic}\n          title=\"Italic (Ctrl+I)\"\n        >\n          <em>I</em>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }}\n          onMouseDown={this.toggleUnderline}\n          title=\"Underline (Ctrl+U)\"\n        >\n          <span style={{ textDecoration: 'underline' }}>U</span>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }}\n          onMouseDown={this.toggleStrikethrough}\n          title=\"Strikethrough\"\n        >\n          <span style={{ textDecoration: 'line-through' }}>S</span>\n        </button>\n        \n        <div class=\"le-text-toolbar-divider\"></div>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }}\n          onMouseDown={this.toggleLink}\n          title={this.selectionState.isLink ? 'Remove link' : 'Add link'}\n        >\n          🔗\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * Get the semantic tag for the current variant\n   */\n  private getTag(): string {\n    switch (this.variant) {\n      case 'quote':\n        return 'blockquote';\n      case 'code':\n        return 'pre';\n      case 'label':\n        return 'label';\n      case 'small':\n        return 'small';\n      default:\n        return this.variant; // h1-h6, p\n    }\n  }\n\n  render() {\n    const Tag = this.getTag();\n    \n    const textStyle: { [key: string]: string } = {};\n    if (this.color) {\n      textStyle.color = this.color;\n    }\n    if (this.align) {\n      textStyle.textAlign = this.align;\n    }\n\n    const textClass = {\n      'le-text': true,\n      [`variant-${this.variant}`]: true,\n      'truncate': this.truncate,\n      [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,\n    };\n\n    // Admin mode - show rich text editor\n    if (this.adminMode) {\n      return (\n        <Host class=\"admin-mode\">\n          <le-component component=\"le-text\">\n            <div class=\"le-text-editor-wrapper\">\n              {this.isFocused && this.renderToolbar()}\n              <Tag \n                class={textClass}\n                part=\"text\"\n                style={textStyle}\n              >\n                <div\n                  ref={(el) => this.editorRef = el}\n                  class=\"le-text-editor\"\n                  contentEditable={true}\n                  onInput={this.handleInput}\n                  onFocus={this.handleFocus}\n                  onBlur={this.handleBlur}\n                  onKeyUp={this.handleSelectionChange}\n                  onMouseUp={this.handleSelectionChange}\n                  innerHTML={this.content}\n                ></div>\n              </Tag>\n              {/* Hidden slot to receive light DOM content */}\n              <div class=\"hidden-slot\">\n                <slot \n                  ref={(el) => this.slotRef = el as HTMLSlotElement}\n                  onSlotchange={() => this.readSlottedContent()}\n                ></slot>\n              </div>\n            </div>\n          </le-component>\n        </Host>\n      );\n    }\n\n    // Default mode - render semantic element with slotted content\n    return (\n      <Host>\n        <Tag \n          class={textClass}\n          part=\"text\"\n          style={textStyle}\n        >\n          <slot ref={(el) => this.slotRef = el as HTMLSlotElement}></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n\n/**\n * Selection state for toolbar\n */\ninterface SelectionState {\n  isBold: boolean;\n  isItalic: boolean;\n  isUnderline: boolean;\n  isStrikethrough: boolean;\n  isLink: boolean;\n  blockType: string;\n}\n"],"names":["observeModeChanges","h","Host"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,88FAA88F;;MC2B19F,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACqC,OAAO,GAAyF,GAAG;AAE3I;;;AAGG;IACsB,KAAK,GAA4C,MAAM;AAEhF;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,QAAQ;AAEhB;;AAEG;IACc,SAAS,GAAY,KAAK;AAE3C;;AAEG;IACc,OAAO,GAAW,EAAE;AAErC;;AAEG;IACc,SAAS,GAAY,KAAK;AAE3C;;AAEG;AACc,IAAA,cAAc,GAAmB;AAChD,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,WAAW,EAAE,KAAK;AAClB,QAAA,eAAe,EAAE,KAAK;AACtB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,SAAS,EAAE,GAAG;KACf;AAED;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEP,IAAA,sBAAsB;IAE9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,sBAAsB,GAAGA,wBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,KAAI;AACjE,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS;AAC/B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,KAAK,OAAO;AAEjC,YAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE;;gBAE/B,qBAAqB,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;;AACjD,iBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;;gBAEtC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,sBAAsB,IAAI;;IAIjC,eAAe,GAAA;;QAEb,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,CAAC,iBAAiB,EAAE;;;AAI5B;;AAEG;IACK,kBAAkB,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AAEnB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;QAGnE,IAAI,IAAI,GAAG,EAAE;AACb,QAAA,aAAa,CAAC,OAAO,CAAC,IAAI,IAAG;YAC3B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;AACpC,gBAAA,IAAI,IAAI,IAAI,CAAC,WAAW;;iBACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;gBAC9C,IAAI,IAAK,IAAgB,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW;;AAE3D,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE;;AAG5B;;AAEG;IACK,iBAAiB,GAAA;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAErB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS;;;AAI3C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO;QACzB,IAAI,IAAI,EAAE;AACR,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3D,YAAA,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,gBAAA,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC;gBAClC,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AAC3C,oBAAA,SAAqB,CAAC,SAAS,GAAG,UAAU;;qBACxC,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;;AAEhD,oBAAA,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU;oBACnC,IAAI,MAAM,EAAE;;wBAEV,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAC3C,wBAAA,IAAI,CAAC,SAAS,GAAG,UAAU;;AAE3B,wBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC;;AAEpC,wBAAA,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;4BAChF,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;;;;;iBAI3C;;AAEL,gBAAA,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,UAAU;;;;AAKpC;;AAEG;IACK,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS;YACvC,IAAI,CAAC,oBAAoB,EAAE;;AAE/B,KAAC;AAED;;AAEG;IACK,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACrB,IAAI,CAAC,oBAAoB,EAAE;AAC7B,KAAC;AAED;;AAEG;AACK,IAAA,UAAU,GAAG,CAAC,CAAa,KAAI;;AAErC,QAAA,MAAM,aAAa,GAAG,CAAC,CAAC,aAA4B;AACpD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAC;AAErE,QAAA,IAAI,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;;YAEpC;;;QAIF,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE;AACtC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;gBACtB,IAAI,CAAC,iBAAiB,EAAE;;SAE3B,EAAE,GAAG,CAAC;AACT,KAAC;AAED;;AAEG;IACK,qBAAqB,GAAG,MAAK;QACnC,IAAI,CAAC,oBAAoB,EAAE;AAC7B,KAAC;AAED;;AAEG;IACK,oBAAoB,GAAA;AAC1B,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE;AACvC,QAAA,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,CAAC;YAAE;QAE9C,IAAI,CAAC,cAAc,GAAG;AACpB,YAAA,MAAM,EAAE,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC;AAC1C,YAAA,QAAQ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,CAAC;AAC9C,YAAA,WAAW,EAAE,QAAQ,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACpD,YAAA,eAAe,EAAE,QAAQ,CAAC,iBAAiB,CAAC,eAAe,CAAC;AAC5D,YAAA,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;YACzC,SAAS,EAAE,IAAI,CAAC,OAAO;SACxB;;AAGH;;AAEG;AACK,IAAA,iBAAiB,CAAC,SAAoB,EAAA;QAC5C,IAAI,CAAC,SAAS,CAAC,UAAU;AAAE,YAAA,OAAO,KAAK;AAEvC,QAAA,IAAI,IAAI,GAAgB,SAAS,CAAC,UAAU;QAC5C,OAAO,IAAI,IAAI,IAAI,KAAK,IAAI,CAAC,SAAS,EAAE;AACtC,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,GAAG;AAAE,gBAAA,OAAO,IAAI;AACtC,YAAA,IAAI,GAAG,IAAI,CAAC,UAAU;;AAExB,QAAA,OAAO,KAAK;;AAGd;;AAEG;IACK,WAAW,CAAC,OAAe,EAAE,KAAc,EAAA;;AAEjD,QAAA,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;;QAGvB,QAAQ,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC;;QAG3C,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,oBAAoB,EAAE;;AAG7B;;AAEG;AACK,IAAA,UAAU,GAAG,CAAC,CAAQ,KAAI;QAChC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;AAC1B,KAAC;AAED;;AAEG;AACK,IAAA,YAAY,GAAG,CAAC,CAAQ,KAAI;QAClC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;AAC5B,KAAC;AAED;;AAEG;AACK,IAAA,eAAe,GAAG,CAAC,CAAQ,KAAI;QACrC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;AAC/B,KAAC;AAED;;AAEG;AACK,IAAA,mBAAmB,GAAG,CAAC,CAAQ,KAAI;QACzC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;AACnC,KAAC;AAED;;AAEG;AACK,IAAA,UAAU,GAAG,CAAC,CAAQ,KAAI;QAChC,CAAC,CAAC,cAAc,EAAE;AAElB,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;;AAE9B,YAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;;aACrB;;YAEL,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC;YAC5C,IAAI,GAAG,EAAE;AACP,gBAAA,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,CAAC;;;AAGzC,KAAC;AAED;;AAEG;AACK,IAAA,aAAa,GAAG,CAAC,CAAQ,KAAI;AACnC,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B;AAC5C,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAA4B;AACpD,KAAC;AAED;;AAEG;IACK,aAAa,GAAA;AACnB,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAC9B,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,EAAA,EAEtCA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,GAAG,EAAoB,EAAA,WAAA,CAAA,EACpEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,EAAoB,EAAA,WAAA,CAAA,EACtEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAgB,EAAA,OAAA,CAAA,EACxEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,EAAe,EAAA,MAAA,CAAA,EACrEA,OAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAgB,EAAA,OAAA,CAAA,EACxEA,OAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAA,EAAA,OAAA,CAAgB,CACjE,EAETA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAO,CAAA,EAE3CA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAC5E,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,KAAK,EAAC,eAAe,EAAA,EAErBA,OAAA,CAAA,QAAA,EAAA,IAAA,EAAA,GAAA,CAAkB,CACX,EAETA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAC9E,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,KAAK,EAAC,iBAAiB,EAAA,EAEvBA,OAAA,CAAA,IAAA,EAAA,IAAA,EAAA,GAAA,CAAU,CACH,EAETA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,EACjF,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,KAAK,EAAC,oBAAoB,EAAA,EAE1BA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,QAAU,CAC/C,EAETA,OAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,EACrF,WAAW,EAAE,IAAI,CAAC,mBAAmB,EACrC,KAAK,EAAC,eAAe,EAAA,EAErBA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,EAAE,cAAc,EAAE,cAAc,EAAE,QAAU,CAClD,EAETA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAO,CAAA,EAE3CA,OACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAC5E,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,aAAa,GAAG,UAAU,EAGvD,EAAA,cAAA,CAAA,CACL;;AAIV;;AAEG;IACK,MAAM,GAAA;AACZ,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,YAAY;AACrB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,KAAK;AACd,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,OAAO;AAChB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,OAAO;AAChB,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC;;;IAI1B,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;QAEzB,MAAM,SAAS,GAA8B,EAAE;AAC/C,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;AAE9B,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;;AAGlC,QAAA,MAAM,SAAS,GAAG;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACjC,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,CAAa,UAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SAC/D;;AAGD,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBD,OAAc,CAAA,cAAA,EAAA,EAAA,SAAS,EAAC,SAAS,EAAA,EAC/BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAChC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE,EACvCA,OAAA,CAAC,GAAG,EAAA,EACF,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,SAAS,EAAA,EAEhBA,OACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,EAChC,KAAK,EAAC,gBAAgB,EACtB,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EACrC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAClB,CACH,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAqB,EACjD,YAAY,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EACvC,CAAA,CACJ,CACF,CACO,CACV;;;QAKX,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAA,CAAC,GAAG,EAAA,EACF,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,SAAS,EAAA,EAEhBA,OAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAqB,EAAA,CAAS,CAC5D,CACD;;;;;;;;;;"}

package/dist/cjs/le-turntable.cjs.entry.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var index = require('./index-D7B9TPh8.js');
+
+const leTurntableCss = ":host{display:block;cursor:grab}div.turntable{width:100%;height:100%;padding:1px}";
+
+const LeTurntable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    // transform origin
+    // gets the same values as transform-origin css property
+    center = 'center';
+    // transform rotate
+    value = 0;
+    updateValue(newValue) {
+        if (!this.rotating) {
+            this.currentAngle = parseFloat(newValue);
+            this.setAngle(this.currentAngle);
+        }
+    }
+    /**
+     * Internal state
+     *
+     * using properties instead of @State decoratorm
+     * because we are only changing styles of the element and don't
+     * need the element to be rerendered
+     */
+    // indicates is the element being manually rotated right now
+    rotating = false;
+    // coordinates of the transform origin in pixels
+    centerX;
+    centerY;
+    // element page (body?) offset in pixels
+    pageX;
+    pageY;
+    currentAngle = 0;
+    // angle at the start of the drag
+    startAngle;
+    /**
+     * Event listeners
+     */
+    handleMouseDown(evt) {
+        // set rotating mode on
+        this.rotating = true;
+        // get start angle
+        //   getting pageX/Y, because when the element is transformed
+        //   relative values are useless
+        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
+        // cancel the event to prevent text selection
+        evt.preventDefault();
+        evt.stopPropagation();
+        return false;
+    }
+    /**
+     * Fires when the mouse moves
+     * checks is the element rotating right now and if it is
+     * then calc the current angle and rotate the element
+     *
+     * TODO: attach events only after the dragStart?
+     */
+    handleMouseMove(evt) {
+        if (this.rotating) {
+            // calc angle update and rotate element
+            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
+            return false;
+        }
+    }
+    handleMouseUp(evt) {
+        if (this.rotating) {
+            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
+            this.setAngle(angle);
+            this.currentAngle = angle;
+            this.rotating = false;
+            return false;
+        }
+    }
+    // on window resize the center should be recalculated
+    handleWindowResize() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Component lifecycles
+     */
+    componentDidLoad() {
+        this.el.style.transformOrigin = this.center;
+        this.currentAngle = this.value;
+        this.getTransformOrigin();
+        this.setAngle(this.currentAngle);
+    }
+    componentDidUpdate() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Calculates the transform origin of the component
+     * and the page offset in pixels
+     *
+     * We'll need these values to calculate the angle of pointer event
+     */
+    getTransformOrigin() {
+        // transform origin
+        [this.centerX, this.centerY] = window
+            .getComputedStyle(this.el, null)
+            .transformOrigin.split(' ')
+            .map(val => Math.round(parseFloat(val)));
+        // page offset
+        let t = null;
+        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
+        const clientRects = this.el.getBoundingClientRect();
+        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
+        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
+    }
+    /**
+     * Calculates current angle
+     *
+     * @param {number} posX  horizontal mouse position
+     * @param {number} posY  vertical mouse position
+     */
+    getAngle(posX, posY) {
+        const x = posX - this.pageX - this.centerX;
+        const y = posY - this.pageY - this.centerY;
+        const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;
+        return angle;
+    }
+    setAngle(angle) {
+        this.el.style.transform = `rotate(${angle}deg)`;
+    }
+    render() {
+        return (index.h("div", { key: 'ec9a506a360881ab3c3df97027c8a25d663f6819', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, index.h("slot", { key: '926a84fa75952bdc3e44f1b2146848401e8ab10f' })));
+    }
+    static get watchers() { return {
+        "value": ["updateValue"]
+    }; }
+};
+LeTurntable.style = leTurntableCss;
+
+exports.le_turntable = LeTurntable;
+//# sourceMappingURL=le-turntable.entry.cjs.js.map

package/dist/cjs/le-turntable.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-turntable.entry.cjs.js","sources":["src/components/le-turntable/le-turntable.css?tag=le-turntable&encapsulation=shadow","src/components/le-turntable/le-turntable.tsx"],"sourcesContent":[":host {\n  display: block;\n  cursor: grab;\n}\n\ndiv.turntable {\n  width: 100%;\n  height: 100%;\n  padding: 1px;\n}\n","import { Component, Element, Prop, Listen, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-turntable',\n  styleUrl: 'le-turntable.css',\n  shadow: true,\n})\nexport class LeTurntable {\n  // host element\n  @Element() el: HTMLElement;\n\n  // transform origin\n  // gets the same values as transform-origin css property\n  @Prop() center: string = 'center';\n\n  // transform rotate\n  @Prop() value: number = 0;\n\n  @Watch('value')\n  updateValue(newValue) {\n    if (!this.rotating) {\n      this.currentAngle = parseFloat(newValue);\n      this.setAngle(this.currentAngle);\n    }\n  }\n\n  /**\n   * Internal state\n   *\n   * using properties instead of @State decoratorm\n   * because we are only changing styles of the element and don't\n   * need the element to be rerendered\n   */\n\n  // indicates is the element being manually rotated right now\n  rotating = false;\n\n  // coordinates of the transform origin in pixels\n  centerX: number;\n  centerY: number;\n\n  // element page (body?) offset in pixels\n  pageX: number;\n  pageY: number;\n\n  currentAngle: number = 0;\n  // angle at the start of the drag\n  startAngle: number;\n\n  /**\n   * Event listeners\n   */\n  handleMouseDown(evt: MouseEvent) {\n    // set rotating mode on\n    this.rotating = true;\n\n    // get start angle\n    //   getting pageX/Y, because when the element is transformed\n    //   relative values are useless\n    this.startAngle = this.getAngle(evt.pageX, evt.pageY);\n\n    // cancel the event to prevent text selection\n    evt.preventDefault();\n    evt.stopPropagation();\n    return false;\n  }\n\n  /**\n   * Fires when the mouse moves\n   * checks is the element rotating right now and if it is\n   * then calc the current angle and rotate the element\n   *\n   * TODO: attach events only after the dragStart?\n   */\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(evt: MouseEvent) {\n    if (this.rotating) {\n      // calc angle update and rotate element\n      this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));\n      return false;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp(evt: MouseEvent) {\n    if (this.rotating) {\n      const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);\n      this.setAngle(angle);\n      this.currentAngle = angle;\n      this.rotating = false;\n      return false;\n    }\n  }\n\n  // on window resize the center should be recalculated\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Component lifecycles\n   */\n  componentDidLoad() {\n    this.el.style.transformOrigin = this.center;\n    this.currentAngle = this.value;\n\n    this.getTransformOrigin();\n    this.setAngle(this.currentAngle);\n  }\n\n  componentDidUpdate() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Calculates the transform origin of the component\n   * and the page offset in pixels\n   *\n   * We'll need these values to calculate the angle of pointer event\n   */\n  getTransformOrigin() {\n    // transform origin\n    [this.centerX, this.centerY] = window\n      .getComputedStyle(this.el, null)\n      .transformOrigin.split(' ')\n      .map(val => Math.round(parseFloat(val)));\n    // page offset\n    let t = null;\n    const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;\n    const clientRects = this.el.getBoundingClientRect();\n    this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);\n    this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);\n  }\n\n  /**\n   * Calculates current angle\n   *\n   * @param {number} posX  horizontal mouse position\n   * @param {number} posY  vertical mouse position\n   */\n  getAngle(posX: number, posY: number) {\n    const x = posX - this.pageX - this.centerX;\n    const y = posY - this.pageY - this.centerY;\n    const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;\n    return angle;\n  }\n\n  setAngle(angle) {\n    this.el.style.transform = `rotate(${angle}deg)`;\n  }\n\n  render() {\n    return (\n      <div class=\"turntable\" onMouseDown={this.handleMouseDown.bind(this)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-D7B9TPh8.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["le-button_6.cjs",[[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[4,"icon-only"],"disabled":[4],"type":[1],"href":[1],"target":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"isPositioned":[32],"show":[64],"hide":[64],"toggle":[64]}]]],["le-box.cjs",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card.cjs",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-number-input.cjs",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-popup.cjs",[[769,"le-popup",{"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}]]],["le-stack.cjs",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-text.cjs",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-round-progress.cjs",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable.cjs",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

package/dist/cjs/utils-DrsoID-a.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-D7B9TPh8.js');
+
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+function generateId(prefix = 'le') {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+}
+/**
+ * Parses a comma-separated string into an array
+ */
+function parseCommaSeparated(value) {
+    if (!value)
+        return [];
+    return value
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Checks if a slot has content
+ */
+function slotHasContent(el, slotName = '') {
+    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
+    return el.querySelector(selector) !== null;
+}
+/**
+ * Sets up a MutationObserver to track mode changes on ancestor elements.
+ * Returns a cleanup function to disconnect the observer.
+ *
+ * If the element or any ancestor has an explicit `mode` attribute, that creates
+ * a "mode boundary" - the mode is determined from that point, not from further up.
+ * This allows components like le-popover to force default mode for their children.
+ *
+ * @param el - The component's host element
+ * @param callback - Function to call when mode changes, receives the new mode
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * export class MyComponent {
+ *   @Element() el: HTMLElement;
+ *   @State() adminMode: boolean = false;
+ *   private disconnectModeObserver?: () => void;
+ *
+ *   connectedCallback() {
+ *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+ *       this.adminMode = mode === 'admin';
+ *     });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.disconnectModeObserver?.();
+ *   }
+ * }
+ * ```
+ */
+function observeModeChanges(el, callback) {
+    // Call immediately with current mode
+    callback(index.getMode(el));
+    // Set up observer for mode attribute changes
+    const observer = new MutationObserver(() => {
+        callback(index.getMode(el));
+    });
+    // Observe the element itself (for mode boundary changes)
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Observe document root
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Traverse up, crossing shadow boundaries, and observe each element
+    let current = el;
+    while (current) {
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            observer.observe(current, {
+                attributes: true,
+                attributeFilter: ['mode'],
+            });
+            // If this element has an explicit mode, it's a boundary
+            if (current.hasAttribute('mode')) {
+                break;
+            }
+        }
+        else {
+            // Check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary and observe the host
+                current = root.host;
+                observer.observe(current, {
+                    attributes: true,
+                    attributeFilter: ['mode'],
+                });
+                // If the host has an explicit mode, it's a boundary
+                if (current.hasAttribute('mode')) {
+                    break;
+                }
+            }
+            else {
+                break;
+            }
+        }
+    }
+    // Return cleanup function
+    return () => observer.disconnect();
+}
+/**
+ * Combines multiple class names into a single string, filtering out falsy values.
+ *
+ * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
+ * @returns Combined class names string
+ */
+function classnames(...classes) {
+    const result = [];
+    classes.forEach(cls => {
+        if (!cls)
+            return;
+        if (typeof cls === 'string') {
+            result.push(cls);
+        }
+        else if (Array.isArray(cls)) {
+            result.push(classnames(...cls));
+        }
+        else if (typeof cls === 'object') {
+            Object.entries(cls).forEach(([key, value]) => {
+                if (value) {
+                    result.push(key);
+                }
+            });
+        }
+    });
+    return result.join(' ');
+}
+
+exports.classnames = classnames;
+exports.generateId = generateId;
+exports.observeModeChanges = observeModeChanges;
+exports.parseCommaSeparated = parseCommaSeparated;
+exports.slotHasContent = slotHasContent;
+//# sourceMappingURL=utils-DrsoID-a.js.map
+
+//# sourceMappingURL=utils-DrsoID-a.js.map

package/dist/cjs/utils-DrsoID-a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-DrsoID-a.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":["getMode"],"mappings":"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"}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,26 @@
+{
+  "entries": [
+    "components/le-popup/le-popup.js",
+    "components/le-box/le-box.js",
+    "components/le-button/le-button.js",
+    "components/le-card/le-card.js",
+    "components/le-checkbox/le-checkbox.js",
+    "components/le-component/le-component.js",
+    "components/le-number-input/le-number-input.js",
+    "components/le-popover/le-popover.js",
+    "components/le-round-progress/le-round-progress.js",
+    "components/le-slot/le-slot.js",
+    "components/le-stack/le-stack.js",
+    "components/le-string-input/le-string-input.js",
+    "components/le-text/le-text.js",
+    "components/le-turntable/le-turntable.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.38.3",
+    "typescriptVersion": "5.9.3"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "global/app.js"
+}

package/dist/collection/components/le-box/le-box.default.css

@@ -0,0 +1,37 @@
+/**
+ * le-box default styles
+ *
+ * Flex item properties are applied inline via hostStyle.
+ * This CSS handles visual styling and theming.
+ */
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Box container - full size by default */
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Content wrapper */
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--le-box-bg, transparent);
+  border-radius: var(--le-box-border-radius, 0);
+  padding: var(--le-box-padding, 0);
+}
+
+/* When displayFlex is enabled, ensure content stretches */
+:host(.display-flex) .content {
+  min-height: 100%;
+}