@nyaruka/temba-components 0.135.9 → 0.136.0

package/out-tsc/src/layout/FloatingWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.js","sourceRoot":"","sources":["../../../src/layout/FloatingWindow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,OAAO,cAAe,SAAQ,YAAY;IAAhD;;QA4FE,WAAM,GAAG,EAAE,CAAC;QAGZ,UAAK,GAAG,GAAG,CAAC;QAGZ,cAAS,GAAG,GAAG,CAAC;QAGhB,cAAS,GAAG,GAAG,CAAC;QAGhB,QAAG,GAAG,GAAG,CAAC;QAGV,SAAI,GAAG,CAAC,CAAC,CAAC,CAAC,qCAAqC;QAGhD,WAAM,GAAG,IAAI,CAAC;QAGd,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,KAAK,CAAC;QAGnB,UAAK,GAAG,SAAS,CAAC;QAEV,eAAU,GAAG,CAAC,CAAC;QACf,eAAU,GAAG,CAAC,CAAC;QACf,gBAAW,GAAG,CAAC,CAAC;QAChB,gBAAW,GAAG,CAAC,CAAC;QAChB,sBAAiB,GAAG,KAAK,CAAC;QAC1B,eAAU,GAAG,GAAG,CAAC;QACjB,gBAAW,GAAG,CAAC,CAAC,CAAC;QAmCjB,wBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClD,8DAA8D;YAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAElD,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;YAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC;YAE5B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAEzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QA4DM,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;;YAC9C,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE3B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;YAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;YAE/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YACtC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YAErC,uDAAuD;YACvD,MAAM,OAAO,GAAG,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAClB,OAAO,EACP,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAC9D,CAAC;YAEF,uDAAuD;YACvD,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAClD,SAAS,CACK,CAAC;YACjB,MAAM,aAAa,GACjB,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,KAAI,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAC;YACtE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,OAAO,EACP,MAAM,CAAC,WAAW,GAAG,aAAa,GAAG,OAAO,CAC7C,CAAC;YACF,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAE5D,+DAA+D;YAC/D,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;;YAC1B,+CAA+C;YAC/C,IAAI,IAAI,CAAC,MAAM;gBAAE,OAAO;YAExB,MAAM,OAAO,GAAG,EAAE,CAAC;YACnB,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAClD,SAAS,CACK,CAAC;YACjB,MAAM,aAAa,GACjB,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,KAAI,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAC;YAEtE,+DAA+D;YAC/D,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;YACvD,CAAC;iBAAM,CAAC;gBACN,oCAAoC;gBACpC,MAAM,OAAO,GAAG,OAAO,CAAC;gBACxB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;gBAEzD,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO,EAAE,CAAC;oBACxB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;gBACtB,CAAC;qBAAM,IAAI,IAAI,CAAC,IAAI,GAAG,OAAO,EAAE,CAAC;oBAC/B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;gBACtB,CAAC;YACH,CAAC;YAED,mCAAmC;YACnC,MAAM,MAAM,GAAG,OAAO,CAAC;YACvB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CACrB,OAAO,EACP,MAAM,CAAC,WAAW,GAAG,aAAa,GAAG,OAAO,CAC7C,CAAC;YAEF,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,EAAE,CAAC;gBACtB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;YACpB,CAAC;iBAAM,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,EAAE,CAAC;gBAC7B,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;IA2DJ,CAAC;IAvXC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFT,CAAC;IACJ,CAAC;IAwCM,YAAY,CACjB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE5B,6CAA6C;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAE7B,kDAAkD;QAClD,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;QAED,sDAAsD;QACtD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;QAED,oDAAoD;QACpD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAEO,gBAAgB;QACtB,0CAA0C;QAC1C,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IAuBM,OAAO,CACZ,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,sDAAsD;YACtD,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1C,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,CAAC,EAAE,CAAC;oBAC5B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAChC,CAAC;YACH,CAAC;YAED,yCAAyC;YACzC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1C,uBAAuB;gBACvB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;gBAE3B,kEAAkE;gBAClE,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBAC3B,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,wBAAwB;oBACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;gBAC/B,CAAC;YACH,CAAC;QACH,CAAC;QAED,mDAAmD;QACnD,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,sCAAsC;QACtC,WAAW,CAAC,WAAW,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACrD,CAAC;IAEO,qBAAqB,CAAC,KAAiB;QAC7C,+CAA+C;QAC/C,IAAK,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC;QAE5B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAEzD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAgFM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,sCAAsC;QACtC,WAAW,CAAC,WAAW,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACrD,CAAC;IAEM,MAAM;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS;YACnC,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,KAAK;YACpC,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS;YACnC,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,KAAK;YACpC,CAAC,CAAC,EAAE,CAAC;QAEP,MAAM,WAAW,GAAG;eACT,IAAI,CAAC,KAAK;QACjB,cAAc;QACd,cAAc;aACT,IAAI,CAAC,GAAG;cACP,IAAI,CAAC,IAAI;wBACC,IAAI,CAAC,KAAK;KAC7B,CAAC;QAEF,MAAM,aAAa,GAAG,UAAU,CAAC;YAC/B,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,aAAa,YAAY,WAAW;UAC9C,CAAC,IAAI,CAAC,UAAU;YAChB,CAAC,CAAC,IAAI,CAAA;+CAC+B,IAAI,CAAC,qBAAqB;qCACpC,IAAI,CAAC,MAAM;sDACM,IAAI,CAAC,WAAW;;;;aAIzD;YACH,CAAC,CAAC,EAAE;;;;;KAKT,CAAC;IACJ,CAAC;CACF;AA5RC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACT","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { FloatingTab } from '../display/FloatingTab';\n\nexport class FloatingWindow extends RapidElement {\n  static get styles() {\n    return css`\n      .window.hidden {\n        transform: translateX(100%);\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .window {\n        transition: transform var(--transition-duration, 300ms) ease-in-out,\n          opacity var(--transition-duration, 300ms) ease-in-out;\n        position: fixed;\n        z-index: 5000;\n        top: 100px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .window.chromeless {\n        background: transparent;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .window.dragging {\n        user-select: none;\n        cursor: move;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 6px 6px;\n        background: var(--header-color, var(--color-primary-light, #f3f4f6));\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: move;\n        user-select: none;\n      }\n\n      .title {\n        font-weight: 600;\n        font-size: 16px;\n        color: white;\n        padding-left: 8px;\n      }\n\n      .close-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        transition: background-color calc(var(--transition-duration, 150ms) / 2)\n          ease-in-out;\n      }\n\n      .close-button:hover {\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n\n      .close-button temba-icon {\n        --icon-color: white;\n      }\n\n      .body {\n        flex: 1;\n        overflow-y: auto;\n        padding: 16px;\n      }\n\n      .window.chromeless .body {\n        padding: 0;\n      }\n\n      ::slotted(.drag-handle) {\n        cursor: move;\n        user-select: none;\n        border: 1px solid red;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: Number })\n  width = 500;\n\n  @property({ type: Number })\n  minHeight = 200;\n\n  @property({ type: Number })\n  maxHeight = 800;\n\n  @property({ type: Number })\n  top = 100;\n\n  @property({ type: Number })\n  left = -1; // -1 means calculate from right side\n\n  @property({ type: Boolean })\n  hidden = true;\n\n  @property({ type: Boolean })\n  dragging = false;\n\n  @property({ type: Boolean })\n  chromeless = false;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  private dragStartX = 0;\n  private dragStartY = 0;\n  private dragOffsetX = 0;\n  private dragOffsetY = 0;\n  private positionFromRight = false;\n  private defaultTop = 100;\n  private defaultLeft = -1;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n\n    // store the default position from properties\n    this.defaultTop = this.top;\n    this.defaultLeft = this.left;\n\n    // determine if we should position from right side\n    if (this.left === -1) {\n      this.positionFromRight = true;\n    }\n\n    // set up drag handle listeners for chromeless windows\n    if (this.chromeless) {\n      this.setupDragHandles();\n    }\n\n    // listen for window resize to keep window in bounds\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private setupDragHandles() {\n    // listen for mousedown on slotted content\n    this.addEventListener('mousedown', this.handleSlotMouseDown);\n  }\n\n  private handleSlotMouseDown = (event: MouseEvent) => {\n    // check if the target or any parent has the drag-handle class\n    const target = event.target as HTMLElement;\n    const dragHandle = target.closest('.drag-handle');\n\n    if (!dragHandle) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  };\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      // when hiding, reset positioning behavior to original\n      if (this.hidden && !changes.get('hidden')) {\n        if (this.defaultLeft === -1) {\n          this.positionFromRight = true;\n        }\n      }\n\n      // reset to default position when showing\n      if (!this.hidden && changes.get('hidden')) {\n        // reset top to default\n        this.top = this.defaultTop;\n\n        // if positioned from right, recalculate based on current viewport\n        if (this.positionFromRight) {\n          this.left = window.innerWidth - this.width - 20;\n        } else {\n          // reset left to default\n          this.left = this.defaultLeft;\n        }\n      }\n    }\n\n    // setup drag handles if chromeless changed to true\n    if (changes.has('chromeless') && this.chromeless) {\n      this.setupDragHandles();\n    }\n  }\n\n  private handleClose() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  private handleHeaderMouseDown(event: MouseEvent) {\n    // don't start drag if clicking on close button\n    if ((event.target as HTMLElement).closest('.close-button')) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    if (!this.dragging) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const deltaY = event.clientY - this.dragStartY;\n\n    this.left = this.dragOffsetX + deltaX;\n    this.top = this.dragOffsetY + deltaY;\n\n    // keep window within viewport bounds with 20px padding\n    const padding = 20;\n    this.left = Math.max(\n      padding,\n      Math.min(this.left, window.innerWidth - this.width - padding)\n    );\n\n    // get the actual rendered height of the window element\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n    const maxTop = Math.max(\n      padding,\n      window.innerHeight - currentHeight - padding\n    );\n    this.top = Math.max(padding, Math.min(this.top, maxTop));\n  };\n\n  private handleMouseUp = () => {\n    this.dragging = false;\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n\n    // once user drags the window, stop auto-positioning from right\n    this.positionFromRight = false;\n  };\n\n  private handleResize = () => {\n    // only constrain position if window is visible\n    if (this.hidden) return;\n\n    const padding = 20;\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n\n    // if positioned from right, always recalculate from right edge\n    if (this.positionFromRight) {\n      this.left = window.innerWidth - this.width - padding;\n    } else {\n      // only adjust left if out of bounds\n      const minLeft = padding;\n      const maxLeft = window.innerWidth - this.width - padding;\n\n      if (this.left < minLeft) {\n        this.left = minLeft;\n      } else if (this.left > maxLeft) {\n        this.left = maxLeft;\n      }\n    }\n\n    // only adjust top if out of bounds\n    const minTop = padding;\n    const maxTop = Math.max(\n      padding,\n      window.innerHeight - currentHeight - padding\n    );\n\n    if (this.top < minTop) {\n      this.top = minTop;\n    } else if (this.top > maxTop) {\n      this.top = maxTop;\n    }\n  };\n\n  public show() {\n    this.hidden = false;\n  }\n\n  public hide() {\n    this.hidden = true;\n  }\n\n  public close() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  public render(): TemplateResult {\n    const minHeightStyle = this.minHeight\n      ? `min-height: ${this.minHeight}px;`\n      : '';\n    const maxHeightStyle = this.maxHeight\n      ? `max-height: ${this.maxHeight}px;`\n      : '';\n\n    const windowStyle = `\n      width: ${this.width}px;\n      ${minHeightStyle}\n      ${maxHeightStyle}\n      top: ${this.top}px;\n      left: ${this.left}px;\n      --header-color: ${this.color};\n    `;\n\n    const windowClasses = getClasses({\n      window: true,\n      dragging: this.dragging,\n      hidden: this.hidden,\n      chromeless: this.chromeless\n    });\n\n    return html`\n      <div class=\"${windowClasses}\" style=\"${windowStyle}\">\n        ${!this.chromeless\n          ? html`\n              <div class=\"header\" @mousedown=${this.handleHeaderMouseDown}>\n                <div class=\"title\">${this.header}</div>\n                <button class=\"close-button\" @click=${this.handleClose}>\n                  <temba-icon name=\"close\" size=\"1.5\"></temba-icon>\n                </button>\n              </div>\n            `\n          : ''}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FloatingWindow.js","sourceRoot":"","sources":["../../../src/layout/FloatingWindow.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { FloatingTab } from '../display/FloatingTab';\n\nexport class FloatingWindow extends RapidElement {\n  static get styles() {\n    return css`\n      .window.hidden {\n        transform: translateX(100%);\n        opacity: 0;\n        pointer-events: none;\n      }\n\n      .window {\n        transition: transform var(--transition-duration, 300ms) ease-in-out,\n          opacity var(--transition-duration, 300ms) ease-in-out;\n        position: fixed;\n        z-index: 5000;\n        top: 100px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      .window.chromeless {\n        background: transparent;\n        border-radius: 0;\n        box-shadow: none;\n        pointer-events: none;\n      }\n\n      .window.chromeless .body {\n        pointer-events: none;\n      }\n\n      .window.dragging {\n        user-select: none;\n        cursor: move;\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 6px 6px;\n        background: var(--header-color, var(--color-primary-light, #f3f4f6));\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: move;\n        user-select: none;\n      }\n\n      .title {\n        font-weight: 600;\n        font-size: 16px;\n        color: white;\n        padding-left: 8px;\n      }\n\n      .close-button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        transition: background-color calc(var(--transition-duration, 150ms) / 2)\n          ease-in-out;\n      }\n\n      .close-button:hover {\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n\n      .close-button temba-icon {\n        --icon-color: white;\n      }\n\n      .body {\n        flex: 1;\n        overflow-y: auto;\n        padding: 16px;\n      }\n\n      .window.chromeless .body {\n        padding: 0;\n      }\n\n      ::slotted(.drag-handle) {\n        cursor: move;\n        user-select: none;\n        border: 1px solid red;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  header = '';\n\n  @property({ type: Number })\n  width = 500;\n\n  @property({ type: Number })\n  minHeight = 200;\n\n  @property({ type: Number })\n  maxHeight = 800;\n\n  @property({ type: Number })\n  top = 100;\n\n  @property({ type: Number })\n  left = -1; // -1 means calculate from right side\n\n  @property({ type: Boolean })\n  hidden = true;\n\n  @property({ type: Boolean })\n  dragging = false;\n\n  @property({ type: Boolean })\n  chromeless = false;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  leftBoundaryMargin = 0;\n\n  @property({ type: Number })\n  rightBoundaryMargin = 0;\n\n  @property({ type: Number })\n  topBoundaryMargin = 0;\n\n  @property({ type: Number })\n  bottomBoundaryMargin = 0;\n\n  private dragStartX = 0;\n  private dragStartY = 0;\n  private dragOffsetX = 0;\n  private dragOffsetY = 0;\n  private positionFromRight = false;\n  private defaultTop = 100;\n  private defaultLeft = -1;\n\n  public firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n\n    // store the default position from properties\n    this.defaultTop = this.top;\n    this.defaultLeft = this.left;\n\n    // determine if we should position from right side\n    if (this.left === -1) {\n      this.positionFromRight = true;\n    }\n\n    // set up drag handle listeners for chromeless windows\n    if (this.chromeless) {\n      this.setupDragHandles();\n    }\n\n    // listen for window resize to keep window in bounds\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  private setupDragHandles() {\n    // listen for mousedown on slotted content\n    this.addEventListener('mousedown', this.handleSlotMouseDown);\n  }\n\n  private handleSlotMouseDown = (event: MouseEvent) => {\n    // check if the target or any parent has the drag-handle class\n    const target = event.target as HTMLElement;\n    const dragHandle = target.closest('.drag-handle');\n\n    if (!dragHandle) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  };\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      // when hiding, reset positioning behavior to original\n      if (this.hidden && !changes.get('hidden')) {\n        if (this.defaultLeft === -1) {\n          this.positionFromRight = true;\n        }\n      }\n\n      // reset to default position when showing\n      if (!this.hidden && changes.get('hidden')) {\n        // reset top to default\n        this.top = this.defaultTop;\n\n        // if positioned from right, recalculate based on current viewport\n        if (this.positionFromRight) {\n          this.left = window.innerWidth - this.width - 20;\n        } else {\n          // reset left to default\n          this.left = this.defaultLeft;\n        }\n      }\n    }\n\n    // setup drag handles if chromeless changed to true\n    if (changes.has('chromeless') && this.chromeless) {\n      this.setupDragHandles();\n    }\n  }\n\n  private handleClose() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  private handleHeaderMouseDown(event: MouseEvent) {\n    // don't start drag if clicking on close button\n    if ((event.target as HTMLElement).closest('.close-button')) {\n      return;\n    }\n\n    this.dragging = true;\n    this.dragStartX = event.clientX;\n    this.dragStartY = event.clientY;\n    this.dragOffsetX = this.left;\n    this.dragOffsetY = this.top;\n\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n\n    event.preventDefault();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    if (!this.dragging) return;\n\n    const deltaX = event.clientX - this.dragStartX;\n    const deltaY = event.clientY - this.dragStartY;\n\n    this.left = this.dragOffsetX + deltaX;\n    this.top = this.dragOffsetY + deltaY;\n\n    // keep window within viewport bounds with 20px padding\n    const padding = 20;\n    this.left = Math.max(\n      padding - this.leftBoundaryMargin,\n      Math.min(\n        this.left,\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin\n      )\n    );\n\n    // get the actual rendered height of the window element\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n    this.top = Math.max(\n      padding - this.topBoundaryMargin,\n      Math.min(this.top, maxTop)\n    );\n  };\n\n  private handleMouseUp = () => {\n    this.dragging = false;\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n\n    // once user drags the window, stop auto-positioning from right\n    this.positionFromRight = false;\n  };\n\n  private handleResize = () => {\n    // only constrain position if window is visible\n    if (this.hidden) return;\n\n    const padding = 20;\n    const windowElement = this.shadowRoot?.querySelector(\n      '.window'\n    ) as HTMLElement;\n    const currentHeight =\n      windowElement?.offsetHeight || this.maxHeight || window.innerHeight;\n\n    // if positioned from right, always recalculate from right edge\n    if (this.positionFromRight) {\n      this.left =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n    } else {\n      // only adjust left if out of bounds\n      const minLeft = padding - this.leftBoundaryMargin;\n      const maxLeft =\n        window.innerWidth - this.width - padding + this.rightBoundaryMargin;\n\n      if (this.left < minLeft) {\n        this.left = minLeft;\n      } else if (this.left > maxLeft) {\n        this.left = maxLeft;\n      }\n    }\n\n    // only adjust top if out of bounds\n    const minTop = padding - this.topBoundaryMargin;\n    const maxTop = Math.max(\n      padding - this.topBoundaryMargin,\n      window.innerHeight - currentHeight - padding + this.bottomBoundaryMargin\n    );\n\n    if (this.top < minTop) {\n      this.top = minTop;\n    } else if (this.top > maxTop) {\n      this.top = maxTop;\n    }\n  };\n\n  public show() {\n    this.hidden = false;\n  }\n\n  public hide() {\n    this.hidden = true;\n  }\n\n  public close() {\n    this.hidden = true;\n    // show all tabs when window is closed\n    FloatingTab.showAllTabs();\n    this.fireCustomEvent(CustomEventType.DialogHidden);\n  }\n\n  public render(): TemplateResult {\n    const minHeightStyle = this.minHeight\n      ? `min-height: ${this.minHeight}px;`\n      : '';\n    const maxHeightStyle = this.maxHeight\n      ? `max-height: ${this.maxHeight}px;`\n      : '';\n\n    const windowStyle = `\n      width: ${this.width}px;\n      ${minHeightStyle}\n      ${maxHeightStyle}\n      top: ${this.top}px;\n      left: ${this.left}px;\n      --header-color: ${this.color};\n    `;\n\n    const windowClasses = getClasses({\n      window: true,\n      dragging: this.dragging,\n      hidden: this.hidden,\n      chromeless: this.chromeless\n    });\n\n    return html`\n      <div class=\"${windowClasses}\" style=\"${windowStyle}\">\n        ${!this.chromeless\n          ? html`\n              <div class=\"header\" @mousedown=${this.handleHeaderMouseDown}>\n                <div class=\"title\">${this.header}</div>\n                <button class=\"close-button\" @click=${this.handleClose}>\n                  <temba-icon name=\"close\" size=\"1.5\"></temba-icon>\n                </button>\n              </div>\n            `\n          : ''}\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}