@operato/input 8.0.0-beta.5 → 8.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "8.0.0-beta.5",
+  "version": "8.0.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -42,7 +42,6 @@
     "./ox-input-key-values.js": "./dist/src/ox-input-key-values.js",
     "./ox-select.js": "./dist/src/ox-select.js",
     "./ox-input-file.js": "./dist/src/ox-input-file.js",
-    "./ox-input-switch.js": "./dist/src/ox-input-switch.js",
     "./ox-input-image.js": "./dist/src/ox-input-image.js",
     "./ox-input-options.js": "./dist/src/ox-input-options.js",
     "./ox-input-select-buttons.js": "./dist/src/ox-input-select-buttons.js",
@@ -59,7 +58,6 @@
     "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
     "./ox-input-direction.js": "./dist/src/ox-input-direction.js",
     "./ox-input-signature.js": "./dist/src/ox-input-signature.js",
-    "./ox-select-floor.js": "./dist/src/ox-select-floor.js",
     "./ox-input-table-column-config.js": "./dist/src/ox-input-table-column-config.js"
   },
   "typesVersions": {
@@ -133,9 +131,6 @@
       "./ox-input-file.js": [
         "./dist/src/ox-input-file.d.ts"
       ],
-      "./ox-input-switch.js": [
-        "./dist/src/ox-input-switch.d.ts"
-      ],
       "./ox-input-image.js": [
         "./dist/src/ox-input-image.d.ts"
       ],
@@ -184,9 +179,6 @@
       "./ox-input-signature.js": [
         "./dist/src/ox-input-signature.d.ts"
       ],
-      "./ox-select-floor.js": [
-        "./dist/src/ox-select-floor.d.ts"
-      ],
       "./ox-input-table-column-config.js": [
         "./dist/src/ox-input-table-column-config.d.ts"
       ]
@@ -218,11 +210,11 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
     "@material/web": "^2.0.0",
-    "@operato/color-picker": "^8.0.0-beta.2",
-    "@operato/i18n": "^8.0.0-beta.2",
-    "@operato/popup": "^8.0.0-beta.5",
-    "@operato/styles": "^8.0.0-beta.2",
-    "@operato/utils": "^8.0.0-beta.2",
+    "@operato/color-picker": "^8.0.0",
+    "@operato/i18n": "^8.0.0",
+    "@operato/popup": "^8.0.0",
+    "@operato/styles": "^8.0.0",
+    "@operato/utils": "^8.0.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -233,18 +225,18 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.0",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
     "@lit/localize-tools": "^0.7.2",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "@web/dev-server": "^0.4.0",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@web/dev-server": "^0.3.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.19.0",
-    "concurrently": "^9.0.0",
-    "eslint": "^9.0.0",
+    "@web/test-runner": "^0.18.0",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -266,5 +258,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "7c70814f95cd4f22508b513575984ceca6eb1bff"
+  "gitHead": "180d521a2ca296829122361a45be86e8542ada43"
 }

package/dist/src/ox-input-switch.d.ts

@@ -1,10 +0,0 @@
-import { OxFormField } from './ox-form-field';
-export declare class OxInputSwitch extends OxFormField {
-    static styles: import("lit").CSSResult;
-    round: boolean;
-    value: boolean;
-    disabled: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    protected appendFormData({ formData }: FormDataEvent): void;
-}

package/dist/src/ox-input-switch.js

@@ -1,125 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
-let OxInputSwitch = class OxInputSwitch extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.round = false;
-        this.value = false;
-        this.disabled = false;
-    }
-    static { this.styles = css `
-    :host {
-      --ox-simple-switch-fullwidth: 2em;
-      --ox-simple-switch-fullheight: 1em;
-      --ox-simple-switch-thumbnail-size: 1em;
-    }
-
-    label {
-      position: relative;
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-
-    label input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    span {
-      position: absolute;
-      cursor: pointer;
-      width: var(--ox-simple-switch-fullwidth);
-      height: var(--ox-simple-switch-fullheight);
-      top: calc(0 - var(--ox-simple-switch-thumbnail-size));
-      left: 0;
-      background-color: var(--ox-simple-switch-off-color, #ccc);
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-    }
-
-    span:before {
-      position: absolute;
-      content: '';
-      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
-      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
-      left: 4px;
-      top: 4px;
-      background-color: var(--ox-simple-switch-thumbnail-color, white);
-      -webkit-transition: 0.4s;
-      transition: 0.4s;
-    }
-
-    input:checked + span {
-      background-color: var(--ox-simple-switch-on-color, #2196f3);
-    }
-
-    input + span:before {
-      -webkit-transform: translateY(
-        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
-      );
-      -ms-transform: translateY(
-        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)
-      );
-      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-    }
-
-    input:checked + span:before {
-      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
-        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));
-    }
-
-    /* Rounded sliders */
-    span[round] {
-      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);
-    }
-
-    span[round]:before {
-      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
-    }
-  `; }
-    render() {
-        return html `
-      <label>
-        <input type="checkbox" .checked=${this.value} ?disabled=${this.disabled} />
-        <span ?round=${this.round}></span>
-      </label>
-    `;
-    }
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.value = e.target?.checked;
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true,
-                detail: this.value
-            }));
-        });
-    }
-    appendFormData({ formData }) {
-        this.name && formData.append(this.name, this.value ? 'true' : 'false');
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], OxInputSwitch.prototype, "round", void 0);
-__decorate([
-    property({ type: Boolean })
-], OxInputSwitch.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], OxInputSwitch.prototype, "disabled", void 0);
-OxInputSwitch = __decorate([
-    customElement('ox-input-switch')
-], OxInputSwitch);
-export { OxInputSwitch };
-//# sourceMappingURL=ox-input-switch.js.map

package/dist/src/ox-input-switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-switch.js","sourceRoot":"","sources":["../../src/ox-input-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QA8EwB,UAAK,GAAY,KAAK,CAAA;QACtB,UAAK,GAAY,KAAK,CAAA;QACtB,aAAQ,GAAY,KAAK,CAAA;IA8BxD,CAAC;aA7GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,AA3EY,CA2EZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ;uBACxD,IAAI,CAAC,KAAK;;KAE5B,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YACtD,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,EAAE,OAAO,CAAA;YACpD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxE,CAAC;;AA/B4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAuB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAA0B;AAhF3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA8GzB","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-switch')\nexport class OxInputSwitch extends OxFormField {\n  static styles = css`\n    :host {\n      --ox-simple-switch-fullwidth: 2em;\n      --ox-simple-switch-fullheight: 1em;\n      --ox-simple-switch-thumbnail-size: 1em;\n    }\n\n    label {\n      position: relative;\n      display: inline-block;\n      width: 100%;\n      height: 100%;\n    }\n\n    label input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n\n    span {\n      position: absolute;\n      cursor: pointer;\n      width: var(--ox-simple-switch-fullwidth);\n      height: var(--ox-simple-switch-fullheight);\n      top: calc(0 - var(--ox-simple-switch-thumbnail-size));\n      left: 0;\n      background-color: var(--ox-simple-switch-off-color, #ccc);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    span:before {\n      position: absolute;\n      content: '';\n      height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);\n      left: 4px;\n      top: 4px;\n      background-color: var(--ox-simple-switch-thumbnail-color, white);\n      -webkit-transition: 0.4s;\n      transition: 0.4s;\n    }\n\n    input:checked + span {\n      background-color: var(--ox-simple-switch-on-color, #2196f3);\n    }\n\n    input + span:before {\n      -webkit-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      -ms-transform: translateY(\n        calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2)\n      );\n      transform: translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    input:checked + span:before {\n      -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n      transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))\n        translateY(calc((var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)) / 2));\n    }\n\n    /* Rounded sliders */\n    span[round] {\n      border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);\n    }\n\n    span[round]:before {\n      border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);\n    }\n  `\n\n  @property({ type: Boolean }) round: boolean = false\n  @property({ type: Boolean }) value: boolean = false\n  @property({ type: Boolean }) disabled: boolean = false\n\n  render() {\n    return html`\n      <label>\n        <input type=\"checkbox\" .checked=${this.value} ?disabled=${this.disabled} />\n        <span ?round=${this.round}></span>\n      </label>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.value = (e.target as HTMLInputElement)?.checked\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    })\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value ? 'true' : 'false')\n  }\n}\n"]}

package/dist/src/ox-select-floor.d.ts

@@ -1,35 +0,0 @@
-import { PropertyValues } from 'lit';
-import { OxFormField } from './ox-form-field';
-type Card = {
-    name: string;
-    image: string;
-};
-export declare class OxSelectFloor extends OxFormField {
-    static styles: import("lit").CSSResult[];
-    cards: Card[];
-    value?: string;
-    bottomLimit: number;
-    interval: number;
-    private selectedIndex;
-    private activeIndex;
-    private carouselContainer;
-    private isDragging;
-    private lastMouseY;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(changes: PropertyValues<this>): void;
-    firstUpdated(): void;
-    getClassForCard(index: number): "selected" | "compressed";
-    isActive(index: number): boolean;
-    handleWheel(event: WheelEvent): void;
-    handlePointerDown(event: PointerEvent): void;
-    handlePointerMove(event: PointerEvent): void;
-    handlePointerUp(event: PointerEvent): void;
-    handlePointerLeave(event: PointerEvent): void;
-    private toggleActiveCard;
-    private updateSelectedIndex;
-    private scrollToSelectedCard;
-    private selectCard;
-    private notifySelection;
-    private adjustCardHeight;
-}
-export {};

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

@@ -1,238 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
-let OxSelectFloor = class OxSelectFloor extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.cards = [];
-        this.bottomLimit = 70;
-        this.interval = 0;
-        this.selectedIndex = -1;
-        this.activeIndex = null;
-        this.isDragging = false;
-        this.lastMouseY = 0;
-    }
-    static { this.styles = [
-        css `
-      :host {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        height: 100%;
-
-        --ox-select-floor-rotate-x: 60deg;
-        --ox-select-floor-rotate-x-active: 40deg;
-        --ox-select-floor-perspective: 1200px;
-      }
-
-      .carousel-container {
-        position: relative;
-        width: 100%;
-        overflow: hidden;
-        user-select: none;
-      }
-
-      .card {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        background-color: white;
-        transition:
-          transform 0.3s ease,
-          opacity 0.3s ease,
-          box-shadow 0.3s ease,
-          border 0.3s ease;
-        transform-origin: bottom;
-        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));
-        opacity: 0.5;
-        border: 2px solid transparent;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-
-      .card img {
-        width: 100%;
-        height: auto;
-        display: block;
-        pointer-events: none;
-        border-radius: 12px;
-      }
-
-      .selected {
-        opacity: 0.8;
-        z-index: 1;
-        border: 4px solid #3b82f6;
-        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
-      }
-
-      .selected.active {
-        opacity: 1;
-        z-index: 2;
-        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));
-        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
-      }
-
-      [template-container] {
-        position: absolute;
-        right: 10px;
-        z-index: 1;
-      }
-    `
-    ]; }
-    render() {
-        const length = this.cards.length;
-        const cards = this.cards;
-        const interval = this.interval;
-        return html `
-      <div
-        class="carousel-container"
-        @wheel=${interval ? () => { } : this.handleWheel}
-        @pointerdown=${this.handlePointerDown}
-        @pointermove=${this.handlePointerMove}
-        @pointerup=${this.handlePointerUp}
-        @pointerleave=${this.handlePointerLeave}
-        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}
-      >
-        ${cards.map(({ image, name }, index) => {
-            return html `
-            <div
-              class="card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}"
-              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
-              @click=${() => {
-                this.selectCard(index);
-                this.toggleActiveCard(index);
-            }}
-            >
-              <img src="${image}" @load=${(e) => this.adjustCardHeight(e, index)} />
-            </div>
-          `;
-        })}
-        ${cards.map(({ image, name }, index) => {
-            return html `
-            <div
-              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}
-              @click=${() => this.selectCard(index)}
-              template-container
-            >
-              <slot name="template-${index}"></slot>
-            </div>
-          `;
-        })}
-      </div>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('value')) {
-            if (this.value) {
-                this.selectedIndex = this.cards.findIndex(card => card.name == this.value);
-            }
-            else {
-                this.selectedIndex = -1;
-            }
-        }
-    }
-    firstUpdated() {
-        this.scrollToSelectedCard();
-    }
-    getClassForCard(index) {
-        return index === this.selectedIndex ? 'selected' : 'compressed';
-    }
-    isActive(index) {
-        return this.activeIndex === index;
-    }
-    handleWheel(event) {
-        event.preventDefault();
-        const delta = Math.sign(event.deltaY);
-        this.updateSelectedIndex(this.selectedIndex + delta);
-    }
-    handlePointerDown(event) {
-        event.preventDefault();
-        this.isDragging = true;
-        this.lastMouseY = event.clientY;
-    }
-    handlePointerMove(event) {
-        if (!this.isDragging) {
-            return;
-        }
-        event.preventDefault();
-        const deltaY = event.clientY - this.lastMouseY;
-        if (!this.lastMouseY) {
-            this.lastMouseY = event.clientY;
-        }
-        if (Math.abs(deltaY) > 30) {
-            this.lastMouseY = event.clientY;
-            const direction = deltaY > 0 ? -1 : 1;
-            this.updateSelectedIndex(this.selectedIndex + direction);
-        }
-    }
-    handlePointerUp(event) {
-        event.preventDefault();
-        this.isDragging = false;
-    }
-    handlePointerLeave(event) {
-        event.preventDefault();
-        this.isDragging = false;
-    }
-    toggleActiveCard(index) {
-        if (this.activeIndex === index) {
-            this.activeIndex = null;
-        }
-        else {
-            this.activeIndex = index;
-        }
-    }
-    updateSelectedIndex(newIndex) {
-        this.activeIndex = null;
-        this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1));
-        this.scrollToSelectedCard();
-    }
-    scrollToSelectedCard() {
-        const cardHeight = 320;
-        const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2);
-        this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
-    }
-    selectCard(index) {
-        this.selectedIndex = index;
-        this.notifySelection();
-        this.scrollToSelectedCard();
-    }
-    notifySelection() {
-        this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined;
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: this.value
-        }));
-    }
-    adjustCardHeight(e, index) {
-        const imgElement = e.target;
-        const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight;
-        const newHeight = imgElement.offsetWidth / aspectRatio;
-        imgElement.style.height = `${newHeight}px`;
-    }
-};
-__decorate([
-    property({ type: Array })
-], OxSelectFloor.prototype, "cards", void 0);
-__decorate([
-    property({ type: String })
-], OxSelectFloor.prototype, "value", void 0);
-__decorate([
-    property({ type: Number })
-], OxSelectFloor.prototype, "bottomLimit", void 0);
-__decorate([
-    property({ type: Number })
-], OxSelectFloor.prototype, "interval", void 0);
-__decorate([
-    state()
-], OxSelectFloor.prototype, "selectedIndex", void 0);
-__decorate([
-    state()
-], OxSelectFloor.prototype, "activeIndex", void 0);
-__decorate([
-    query('.carousel-container')
-], OxSelectFloor.prototype, "carouselContainer", void 0);
-OxSelectFloor = __decorate([
-    customElement('ox-select-floor')
-], OxSelectFloor);
-export { OxSelectFloor };
-//# sourceMappingURL=ox-select-floor.js.map

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

@@ -1 +0,0 @@
-{"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        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        opacity: 0.8;\n        z-index: 1;\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        z-index: 2;\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: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) cards: Card[] = []\n  @property({ type: String }) value?: string\n  @property({ type: Number }) bottomLimit = 70\n  @property({ type: Number }) interval = 0\n\n  @state() private selectedIndex = -1\n  @state() private activeIndex: number | null = null\n  @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n  private isDragging = false\n  private lastMouseY = 0\n\n  render() {\n    const length = this.cards.length\n    const cards = this.cards\n    const interval = this.interval\n\n    return html`\n      <div\n        class=\"carousel-container\"\n        @wheel=${interval ? () => {} : this.handleWheel}\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}\n      >\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => {\n                this.selectCard(index)\n                this.toggleActiveCard(index)\n              }}\n            >\n              <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n            </div>\n          `\n        })}\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => this.selectCard(index)}\n              template-container\n            >\n              <slot name=\"template-${index}\"></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  handlePointerDown(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = true\n    this.lastMouseY = event.clientY\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    if (!this.isDragging) {\n      return\n    }\n\n    event.preventDefault()\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  handlePointerUp(event: PointerEvent) {\n    event.preventDefault()\n    this.isDragging = false\n  }\n\n  handlePointerLeave(event: PointerEvent) {\n    event.preventDefault()\n\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(-1, 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\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"]}