@operato/input 8.0.0-alpha.1 → 8.0.0-alpha.19

package/dist/src/ox-select-floor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\n\ntype Card = {\n  name: string\n  image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        overflow: hidden;\n        height: 100%;\n\n        --ox-select-floor-rotate-x: 60deg;\n        --ox-select-floor-rotate-x-active: 40deg;\n        --ox-select-floor-perspective: 1200px;\n      }\n\n      .carousel-container {\n        position: relative;\n        height: 100%;\n        width: 100%;\n        overflow: hidden;\n        user-select: none;\n      }\n\n      .card {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: white;\n        transition:\n          transform 0.3s ease,\n          opacity 0.3s ease,\n          box-shadow 0.3s ease,\n          border 0.3s ease;\n        transform-origin: bottom;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n        opacity: 0.5;\n        border: 2px solid transparent;\n        border-radius: 12px;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      }\n\n      .card img {\n        width: 100%;\n        height: auto;\n        display: block;\n        pointer-events: none;\n        border-radius: 12px;\n      }\n\n      .selected {\n        z-index: 10;\n        opacity: 0.8;\n        border: 4px solid #3b82f6;\n        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n      }\n\n      .selected.active {\n        opacity: 1;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n      }\n\n      [template-container] {\n        position: absolute;\n        right: 10px;\n        z-index: 20;\n      }\n    `\n  ]\n\n  @property({ type: Array }) cards: Card[] = []\n  @property({ type: String }) value?: string\n  @property({ type: Number }) bottomLimit = 70\n\n  @state() private selectedIndex = 0\n  @state() private activeIndex: number | null = null\n  @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n  private isDragging = false\n  private lastTouchY = 0\n  private lastMouseY = 0\n\n  render() {\n    const length = this.cards.length\n\n    return html`\n      <div\n        class=\"carousel-container\"\n        @wheel=${this.handleWheel}\n        @mousedown=${this.handleMouseDown}\n        @mousemove=${this.handleMouseMove}\n        @mouseup=${this.handleMouseUp}\n        @mouseleave=${this.handleMouseLeave}\n        @touchstart=${this.handleTouchStart}\n        @touchmove=${this.handleTouchMove}\n        @touchend=${this.handleTouchEnd}\n      >\n        ${this.cards.map(({ image, name }, index) => {\n          const reverse = length - index - 1\n          return html`\n            <div\n              class=\"card ${this.getClassForCard(reverse)} ${this.isActive(reverse) ? 'active' : ''}\"\n              style=\"bottom: ${(this.bottomLimit * reverse) / length}%;\"\n              @click=${() => this.selectCard(reverse)}\n              @tap=${() => this.toggleActiveCard(reverse)}\n            >\n              <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, reverse)} />\n            </div>\n          `\n        })}\n        ${this.cards.map(({ image, name }, index) => {\n          const reverse = length - index - 1\n          return html`\n            <div\n              style=\"bottom: ${(this.bottomLimit * reverse) / length}%;\"\n              @click=${() => this.selectCard(reverse)}\n              template-container\n            >\n              <slot name=\"template-${reverse}\"></slot>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      if (this.value) {\n        this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n      } else {\n        this.selectedIndex = -1\n      }\n    }\n  }\n\n  firstUpdated() {\n    this.scrollToSelectedCard()\n  }\n\n  getClassForCard(index: number) {\n    return index === this.selectedIndex ? 'selected' : 'compressed'\n  }\n\n  isActive(index: number): boolean {\n    return this.activeIndex === index\n  }\n\n  handleWheel(event: WheelEvent) {\n    event.preventDefault()\n    const delta = Math.sign(event.deltaY)\n    this.updateSelectedIndex(this.selectedIndex + delta)\n  }\n\n  handleTouchStart(event: TouchEvent) {\n    this.lastTouchY = event.touches[0].clientY\n  }\n\n  handleTouchMove(event: TouchEvent) {\n    const touch = event.touches[0]\n    const deltaY = touch.clientY - this.lastTouchY\n    this.lastTouchY = touch.clientY\n\n    if (Math.abs(deltaY) > 30) {\n      const direction = deltaY < 0 ? -1 : 1\n      this.updateSelectedIndex(this.selectedIndex + direction)\n    }\n  }\n\n  handleTouchEnd() {\n    this.isDragging = false\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    this.isDragging = true\n    this.lastMouseY = event.clientY\n  }\n\n  handleMouseMove(event: MouseEvent) {\n    if (!this.isDragging) {\n      return\n    }\n\n    const deltaY = event.clientY - this.lastMouseY\n\n    if (!this.lastMouseY) {\n      this.lastMouseY = event.clientY\n    }\n\n    if (Math.abs(deltaY) > 30) {\n      this.lastMouseY = event.clientY\n      const direction = deltaY > 0 ? -1 : 1\n      this.updateSelectedIndex(this.selectedIndex + direction)\n    }\n  }\n\n  handleMouseUp() {\n    this.isDragging = false\n  }\n\n  handleMouseLeave() {\n    this.isDragging = false\n  }\n\n  private toggleActiveCard(index: number) {\n    if (this.activeIndex === index) {\n      this.activeIndex = null\n    } else {\n      this.activeIndex = index\n    }\n  }\n\n  private updateSelectedIndex(newIndex: number) {\n    this.activeIndex = null\n\n    this.selectedIndex = Math.max(0, Math.min(newIndex, this.cards.length - 1))\n    this.scrollToSelectedCard()\n  }\n\n  private scrollToSelectedCard() {\n    const cardHeight = 320\n    const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n    this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n  }\n\n  private selectCard(index: number) {\n    this.selectedIndex = index\n    this._notifySelection()\n    this.scrollToSelectedCard()\n  }\n\n  private _notifySelection() {\n    this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  private adjustCardHeight(e: Event, index: number) {\n    const imgElement = e.target as HTMLImageElement\n    const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n    const newHeight = imgElement.offsetWidth / aspectRatio\n    imgElement.style.height = `${newHeight}px`\n  }\n}\n"]}