@ticketlayer/elements 0.4.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-I9CoYv3k.js → index-DanPUX0s.js} +1 -1
- package/dist/cjs/index.cjs.js +2 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/ticket-selector-BYVL13k_.js +3623 -0
- package/dist/cjs/ticketlayer-elements.cjs.js +2 -2
- package/dist/cjs/tl-buy-modal.cjs.entry.js +3 -3
- package/dist/cjs/tl-buy-tickets-button.cjs.entry.js +89 -74
- package/dist/cjs/tl-buy-tickets-wrapper.cjs.entry.js +61 -30
- package/dist/cjs/tl-cart-badge.cjs.entry.js +74 -61
- package/dist/cjs/tl-cart-drawer.cjs.entry.js +51 -23
- package/dist/cjs/tl-cart.cjs.entry.js +71 -103
- package/dist/cjs/tl-checkout-wrapper.cjs.entry.js +51 -29
- package/dist/cjs/tl-event-card.cjs.entry.js +43 -105
- package/dist/cjs/tl-event-list.cjs.entry.js +72 -35
- package/dist/cjs/tl-login.cjs.entry.js +74 -141
- package/dist/cjs/tl-my-orders.cjs.entry.js +52 -92
- package/dist/cjs/tl-occurrence-selector_2.cjs.entry.js +153 -921
- package/dist/cjs/tl-order-confirmation.cjs.entry.js +71 -107
- package/dist/cjs/tl-order-tickets_2.cjs.entry.js +48 -74
- package/dist/cjs/tl-promo-code.cjs.entry.js +50 -47
- package/dist/cjs/tl-seat-map.cjs.entry.js +3 -3
- package/dist/cjs/web-query-Ce73jB4k.js +16 -0
- package/dist/collection/components/tl-buy-modal/tl-buy-modal.js +2 -2
- package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.css +37 -0
- package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.js +105 -79
- package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.js +73 -30
- package/dist/collection/components/tl-cart/tl-cart.js +82 -107
- package/dist/collection/components/tl-cart-badge/tl-cart-badge.js +62 -62
- package/dist/collection/components/tl-cart-drawer/tl-cart-drawer.js +56 -24
- package/dist/collection/components/tl-checkout-wrapper/tl-checkout-wrapper.js +61 -29
- package/dist/collection/components/tl-event-card/event-card-adapter.js +11 -23
- package/dist/collection/components/tl-event-card/tl-event-card.js +51 -84
- package/dist/collection/components/tl-event-list/tl-event-list.js +82 -38
- package/dist/collection/components/tl-login/tl-login.js +83 -147
- package/dist/collection/components/tl-my-orders/tl-my-orders.js +58 -96
- package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.js +137 -516
- package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.js +81 -115
- package/dist/collection/components/tl-order-tickets/tl-order-tickets.js +57 -92
- package/dist/collection/components/tl-promo-code/tl-promo-code.js +55 -50
- package/dist/collection/components/tl-seat-map/tl-seat-map.js +2 -2
- package/dist/collection/components/tl-ticket-selector/tl-ticket-selector.js +34 -20
- package/dist/collection/utils/order-summary.js +15 -135
- package/dist/collection/utils/testing/deep-text.js +29 -0
- package/dist/collection/utils/testing/fixtures.js +290 -0
- package/dist/collection/utils/testing/mock-sdk.js +13 -2
- package/dist/collection/utils/web-query.js +12 -0
- package/dist/collection/utils/web-storage.js +22 -0
- package/dist/components/ticket-selector.js +1 -0
- package/dist/components/tl-buy-modal.js +1 -1
- package/dist/components/tl-buy-tickets-button.js +1 -1
- package/dist/components/tl-buy-tickets-wrapper2.js +1 -1
- package/dist/components/tl-cart-badge.js +1 -1
- package/dist/components/tl-cart-drawer.js +1 -1
- package/dist/components/tl-cart2.js +1 -1
- package/dist/components/tl-checkout-wrapper2.js +1 -1
- package/dist/components/tl-event-card2.js +1 -1
- package/dist/components/tl-event-list.js +1 -1
- package/dist/components/tl-login2.js +1 -1
- package/dist/components/tl-my-orders.js +1 -1
- package/dist/components/tl-occurrence-selector2.js +1 -1
- package/dist/components/tl-order-confirmation.js +1 -1
- package/dist/components/tl-order-tickets2.js +1 -1
- package/dist/components/tl-promo-code.js +1 -1
- package/dist/components/tl-seat-map.js +1 -1
- package/dist/components/tl-ticket-selector2.js +1 -1
- package/dist/components/web-query.js +1 -0
- package/dist/elements.docs.json +34 -34
- package/dist/esm/{index-OoYV1faY.js → index-imfxp765.js} +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/ticket-selector-BwChnHVC.js +3606 -0
- package/dist/esm/ticketlayer-elements.js +3 -3
- package/dist/esm/tl-buy-modal.entry.js +3 -3
- package/dist/esm/tl-buy-tickets-button.entry.js +90 -75
- package/dist/esm/tl-buy-tickets-wrapper.entry.js +62 -31
- package/dist/esm/tl-cart-badge.entry.js +75 -62
- package/dist/esm/tl-cart-drawer.entry.js +52 -24
- package/dist/esm/tl-cart.entry.js +72 -104
- package/dist/esm/tl-checkout-wrapper.entry.js +52 -30
- package/dist/esm/tl-event-card.entry.js +44 -106
- package/dist/esm/tl-event-list.entry.js +73 -36
- package/dist/esm/tl-login.entry.js +75 -142
- package/dist/esm/tl-my-orders.entry.js +53 -93
- package/dist/esm/tl-occurrence-selector_2.entry.js +152 -920
- package/dist/esm/tl-order-confirmation.entry.js +72 -108
- package/dist/esm/tl-order-tickets_2.entry.js +49 -75
- package/dist/esm/tl-promo-code.entry.js +51 -48
- package/dist/esm/tl-seat-map.entry.js +3 -3
- package/dist/esm/web-query-Bdbb2lk5.js +14 -0
- package/dist/ticketlayer-elements/index.esm.js +1 -1
- package/dist/ticketlayer-elements/p-45923d2c.entry.js +1 -0
- package/dist/ticketlayer-elements/p-492adc77.entry.js +1 -0
- package/dist/ticketlayer-elements/p-4cfc9e53.entry.js +1 -0
- package/dist/ticketlayer-elements/{p-ac264adc.entry.js → p-5135630e.entry.js} +1 -1
- package/dist/ticketlayer-elements/p-5bbce3b5.entry.js +1 -0
- package/dist/ticketlayer-elements/p-7d547721.entry.js +1 -0
- package/dist/ticketlayer-elements/p-7fe7b6ba.entry.js +1 -0
- package/dist/ticketlayer-elements/p-8122f0c1.entry.js +1 -0
- package/dist/ticketlayer-elements/p-98d40869.entry.js +1 -0
- package/dist/ticketlayer-elements/p-Bdbb2lk5.js +1 -0
- package/dist/ticketlayer-elements/p-BwChnHVC.js +1 -0
- package/dist/ticketlayer-elements/p-abec290a.entry.js +1 -0
- package/dist/ticketlayer-elements/p-ac79a3f6.entry.js +1 -0
- package/dist/ticketlayer-elements/p-d01f4429.entry.js +1 -0
- package/dist/ticketlayer-elements/p-d7ffaf46.entry.js +1 -0
- package/dist/ticketlayer-elements/p-e7170f3c.entry.js +1 -0
- package/dist/ticketlayer-elements/p-e787e862.entry.js +1 -0
- package/dist/ticketlayer-elements/p-f1ff931f.entry.js +1 -0
- package/dist/ticketlayer-elements/p-imfxp765.js +3 -0
- package/dist/ticketlayer-elements/ticketlayer-elements.css +1 -1
- package/dist/ticketlayer-elements/ticketlayer-elements.esm.js +1 -1
- package/dist/types/components/tl-buy-tickets-button/tl-buy-tickets-button.d.ts +40 -8
- package/dist/types/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.d.ts +20 -1
- package/dist/types/components/tl-cart/tl-cart.d.ts +40 -42
- package/dist/types/components/tl-cart-badge/tl-cart-badge.d.ts +22 -7
- package/dist/types/components/tl-cart-drawer/tl-cart-drawer.d.ts +28 -5
- package/dist/types/components/tl-checkout-wrapper/tl-checkout-wrapper.d.ts +18 -1
- package/dist/types/components/tl-event-card/event-card-adapter.d.ts +9 -20
- package/dist/types/components/tl-event-card/tl-event-card.d.ts +25 -28
- package/dist/types/components/tl-event-list/tl-event-list.d.ts +46 -6
- package/dist/types/components/tl-login/tl-login.d.ts +68 -22
- package/dist/types/components/tl-my-orders/tl-my-orders.d.ts +30 -12
- package/dist/types/components/tl-occurrence-selector/tl-occurrence-selector.d.ts +73 -161
- package/dist/types/components/tl-order-confirmation/tl-order-confirmation.d.ts +48 -15
- package/dist/types/components/tl-order-tickets/tl-order-tickets.d.ts +29 -31
- package/dist/types/components/tl-promo-code/tl-promo-code.d.ts +28 -10
- package/dist/types/components/tl-ticket/tl-ticket.d.ts +2 -11
- package/dist/types/components/tl-ticket-selector/tl-ticket-selector.d.ts +22 -4
- package/dist/types/components.d.ts +270 -62
- package/dist/types/utils/order-summary.d.ts +14 -97
- package/dist/types/utils/testing/deep-text.d.ts +13 -0
- package/dist/types/utils/testing/fixtures.d.ts +225 -0
- package/dist/types/utils/testing/mock-sdk.d.ts +14 -1
- package/dist/types/utils/web-query.d.ts +18 -0
- package/dist/types/utils/web-storage.d.ts +16 -0
- package/elements.catalogue.json +602 -50
- package/package.json +8 -6
- package/dist/cjs/money-BtmM2gt-.js +0 -118
- package/dist/cjs/order-summary-X3TlZxc2.js +0 -150
- package/dist/components/money.js +0 -1
- package/dist/components/order-summary.js +0 -1
- package/dist/esm/money-4ig0-WB6.js +0 -112
- package/dist/esm/order-summary-DiDtvfZM.js +0 -136
- package/dist/ticketlayer-elements/p-0814420f.entry.js +0 -1
- package/dist/ticketlayer-elements/p-0acabc26.entry.js +0 -1
- package/dist/ticketlayer-elements/p-109a3feb.entry.js +0 -1
- package/dist/ticketlayer-elements/p-1a4ba71c.entry.js +0 -1
- package/dist/ticketlayer-elements/p-318965c1.entry.js +0 -1
- package/dist/ticketlayer-elements/p-347c7fd1.entry.js +0 -1
- package/dist/ticketlayer-elements/p-3649c26d.entry.js +0 -1
- package/dist/ticketlayer-elements/p-40260cc9.entry.js +0 -1
- package/dist/ticketlayer-elements/p-4ig0-WB6.js +0 -1
- package/dist/ticketlayer-elements/p-55fd2f9f.entry.js +0 -1
- package/dist/ticketlayer-elements/p-62ee659b.entry.js +0 -1
- package/dist/ticketlayer-elements/p-7d4ecc2b.entry.js +0 -1
- package/dist/ticketlayer-elements/p-7f0abf95.entry.js +0 -1
- package/dist/ticketlayer-elements/p-BXpVGW51.js +0 -1
- package/dist/ticketlayer-elements/p-OoYV1faY.js +0 -3
- package/dist/ticketlayer-elements/p-a3c1b26c.entry.js +0 -1
- package/dist/ticketlayer-elements/p-aeb4c6fb.entry.js +0 -1
- package/dist/ticketlayer-elements/p-ba62541f.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as
|
|
1
|
+
import{proxyCustomElement as r,HTMLElement as t,createEvent as e,h as s,transformTag as o}from"@stencil/core/internal/client";import{w as a,g as i}from"./sdk-connector.js";import{d as n}from"./tl-login2.js";import{d as l}from"./tl-order-tickets2.js";import{d}from"./tl-ticket2.js";import{c,m as p}from"./ticket-selector.js";const g=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.tlOrderSelect=e(this,"tlOrderSelect",7),this.tlError=e(this,"tlError",7),this.emptyMessage="When you buy tickets they'll show up here, ready to view and download.",this.columns=2,this.element=c(p,{client:()=>i(),clientReady:()=>a(),emit:(r,t)=>this.forward(r,t)}),this.view=this.element.view}syncProps(){this.element.setProps({emptyMessage:this.emptyMessage,columns:this.columns})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((r=>{this.view=r}))),this.view=this.element.view,this.teardown=this.element.mount()}disconnectedCallback(){this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}forward(r,t){"tlOrderSelect"===r?this.tlOrderSelect.emit(t):"tlError"===r&&this.tlError.emit(t)}renderRow(r){return s("li",{class:{order:!0,expanded:r.expanded},key:r.id},s("button",{type:"button",class:"order-row","aria-expanded":r.expanded?"true":"false",onClick:()=>this.element.actions.toggle(r.id)},s("span",{class:"order-main"},s("span",{class:"order-number"},r.numberLabel),s("span",{class:"order-event"},r.eventName),s("span",{class:"order-meta"},r.dateLabel&&s("span",null,r.dateLabel),s("span",null,r.countLabel))),s("span",{class:"order-side"},s("span",{class:"order-total"},r.totalLabel),s("span",{class:"status status-"+r.statusTone},r.statusLabel),s("svg",{class:"chevron",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 18l6-6-6-6"})))),r.expanded&&s("div",{class:"order-tickets"},s("tl-order-tickets",{orderId:r.id,columns:this.columns})))}render(){const{status:r,strings:t,state:e,derived:o}=this.view;return"loading"===r?s("div",{class:"orders"},[0,1,2].map((r=>s("div",{class:"skeleton",key:r})))):"signed-out"===r?s("div",{class:"orders"},s("div",{class:"signin"},s("p",{class:"signin-title"},t.signInTitle),s("p",{class:"signin-text"},t.signInText)),s("tl-login",null)):s("div",{class:"orders"},"error"===r?s("div",{class:"state error"},s("p",{class:"state-title"},t.errorTitle),s("p",{class:"state-text"},e.error)):"empty"===r?s("div",{class:"state empty"},s("svg",{class:"empty-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",d:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}),s("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",d:"M13 5v2M13 17v2M13 11v2"})),s("p",{class:"state-title"},t.emptyTitle),s("p",{class:"state-text"},this.emptyMessage)):s("ul",{class:"order-list"},o.rows.map((r=>this.renderRow(r)))))}static get watchers(){return{emptyMessage:[{syncProps:0}],columns:[{syncProps:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.orders{display:flex;flex-direction:column;gap:var(--tl-spacing-4)}.order-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--tl-spacing-3)}.order{background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg);overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease}.order:hover,.order.expanded{border-color:var(--tl-primary);box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.order-row{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-4);width:100%;padding:var(--tl-spacing-4);font:inherit;color:inherit;text-align:left;background:none;border:none;cursor:pointer}.order-main{display:flex;flex-direction:column;gap:var(--tl-spacing-1);min-width:0}.order-number{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--tl-muted-foreground)}.order-event{font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-meta{display:flex;flex-wrap:wrap;gap:var(--tl-spacing-3);font-size:0.8125rem;color:var(--tl-muted-foreground)}.order-side{display:flex;align-items:center;gap:var(--tl-spacing-3);flex-shrink:0}.order-total{font-weight:600}.status{padding:0.125rem 0.5rem;font-size:0.75rem;font-weight:500;border-radius:9999px;background:var(--tl-secondary);color:var(--tl-secondary-foreground)}.status-success{background:var(--tl-success);color:var(--tl-success-foreground)}.status-info{background:var(--tl-primary);color:var(--tl-primary-foreground)}.status-warning{background:var(--tl-warning);color:var(--tl-warning-foreground)}.status-error{background:var(--tl-error);color:var(--tl-error-foreground)}.chevron{width:1.125rem;height:1.125rem;color:var(--tl-muted-foreground);transition:transform 0.2s ease}.expanded .chevron{transform:rotate(90deg)}.order-tickets{padding:0 var(--tl-spacing-4) var(--tl-spacing-4);border-top:1px solid var(--tl-border);padding-top:var(--tl-spacing-4)}@media (max-width: 480px){.order-row{flex-direction:column;align-items:stretch}.order-side{justify-content:space-between}}.signin{text-align:center}.signin-title,.state-title{margin:0;font-size:1.125rem;font-weight:600}.signin-text,.state-text{margin:var(--tl-spacing-1) 0 0;font-size:0.875rem;color:var(--tl-muted-foreground)}.state{padding:var(--tl-spacing-8) var(--tl-spacing-4);text-align:center;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.state.error .state-title{color:var(--tl-error)}.empty-icon{width:3rem;height:3rem;margin:0 auto var(--tl-spacing-3);color:var(--tl-primary)}.skeleton{height:5rem;background:var(--tl-secondary);border-radius:var(--tl-radius-lg);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}"}},[1,"tl-my-orders",{emptyMessage:[1,"empty-message"],columns:[2],view:[32]},void 0,{emptyMessage:[{syncProps:0}],columns:[{syncProps:0}]}]),u=g,m=function(){"undefined"!=typeof customElements&&["tl-my-orders","tl-login","tl-order-tickets","tl-ticket"].forEach((r=>{switch(r){case"tl-my-orders":customElements.get(o(r))||customElements.define(o(r),g);break;case"tl-login":customElements.get(o(r))||n();break;case"tl-order-tickets":customElements.get(o(r))||l();break;case"tl-ticket":customElements.get(o(r))||d()}}))};export{u as TlMyOrders,m as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as a,transformTag as o}from"@stencil/core/internal/client";import{w as s,g as i}from"./sdk-connector.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tlSelect=r(this,"tlSelect",7),this.orientation="auto",this.loading=!0,this.error=null,this.occurrences=[],this.currentMonth=new Date,this.selectedDate=null,this.computedDisplayMode="list",this.containerWidth=0}async componentWillLoad(){await this.waitForSDKAndFetch()}async waitForSDKAndFetch(){if(!this.eventId)return this.error="Event ID is required",void(this.loading=!1);try{await s(),await this.fetchOccurrences()}catch(e){this.error=e instanceof Error?e.message:"SDK not initialized.",this.loading=!1}}componentDidLoad(){this.containerRef&&"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((e=>{for(const t of e)this.containerWidth=t.contentRect.width})),this.resizeObserver.observe(this.containerRef))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}async onEventIdChange(){await this.fetchOccurrences()}async fetchOccurrences(){this.loading=!0,this.error=null;try{const e=i().getEventsManager(),t=await e.get(this.eventId);if(!t)throw new Error("Event not found");this.occurrences=(t.occurrences||[]).map((e=>({id:e.id,startsAt:e.startsAt,endsAt:e.endsAt,status:e.availabilityStatus,availableCapacity:e.availableCapacity,soldOut:"sold_out"===e.availabilityStatus}))),this.computeDisplayMode(),this.computeInitialSelection()}catch(e){console.error("[tl-occurrence-selector] Failed to fetch occurrences:",e),this.error=e instanceof Error?e.message:"Failed to load occurrences",this.occurrences=[]}finally{this.loading=!1}}computeDisplayMode(){if(this.displayMode)return void(this.computedDisplayMode=this.displayMode);if(this.occurrences.length<=5)return void(this.computedDisplayMode="list");const e=new Set;for(const t of this.occurrences){const r=new Date(t.startsAt);e.add(r.toDateString())}this.computedDisplayMode=1===e.size?"slots":"calendar"}computeInitialSelection(){if(0===this.occurrences.length)return;const e=new Date;e.setHours(0,0,0,0);const t=this.getDatesWithOccurrences();let r=null;for(const a of Array.from(t.keys()).sort()){const t=new Date(a);if(t>=e){r=t;break}}if(!r&&t.size>0){const e=Array.from(t.keys()).sort();r=new Date(e[e.length-1])}r&&(this.selectedDate=r,this.currentMonth=new Date(r.getFullYear(),r.getMonth(),1))}getDatesWithOccurrences(){const e=new Map;for(const t of this.occurrences){const r=new Date(t.startsAt);r.setHours(0,0,0,0);const a=r.toDateString();e.has(a)||e.set(a,[]),e.get(a).push(t)}return e}getDateRange(){if(0===this.occurrences.length)return null;let e=new Date(this.occurrences[0].startsAt),t=new Date(this.occurrences[0].startsAt);for(const r of this.occurrences){const a=new Date(r.startsAt);a<e&&(e=a),a>t&&(t=a)}return{first:e,last:t}}isSingleWeek(){const e=this.getDateRange();if(!e)return!1;const t=new Date(e.first),r=t.getDay(),a=0===r?6:r-1;t.setDate(t.getDate()-a),t.setHours(0,0,0,0);const o=new Date(t);return o.setDate(o.getDate()+6),o.setHours(23,59,59,999),e.last<=o}isSingleMonth(){const e=this.getDateRange();return!!e&&e.first.getMonth()===e.last.getMonth()&&e.first.getFullYear()===e.last.getFullYear()}isHorizontalLayout(){return"horizontal"===this.orientation||"vertical"!==this.orientation&&this.containerWidth>=768}formatDate(e){return e.toLocaleDateString("en-GB",{weekday:"long",day:"numeric",month:"long",year:"numeric"})}formatTime(e){return new Date(e).toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit"})}formatDateTime(e){const t=new Date(e);return{date:t.toLocaleDateString("en-GB",{weekday:"long",day:"numeric",month:"long",year:"numeric"}),time:t.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit"})}}handleSelect(e){e.soldOut||0===e.availableCapacity||(console.log("[tl-occurrence-selector] Selected:",e.id),this.tlSelect.emit({occurrence:e}))}handleDateSelect(e){this.selectedDate=e,e.getMonth()===this.currentMonth.getMonth()&&e.getFullYear()===this.currentMonth.getFullYear()||(this.currentMonth=new Date(e.getFullYear(),e.getMonth(),1))}handlePrevMonth(){const e=this.getDateRange();if(!e)return;const t=new Date(this.currentMonth);t.setMonth(t.getMonth()-1),t>=new Date(e.first.getFullYear(),e.first.getMonth(),1)&&(this.currentMonth=t)}handleNextMonth(){const e=this.getDateRange();if(!e)return;const t=new Date(this.currentMonth);t.setMonth(t.getMonth()+1),t<=new Date(e.last.getFullYear(),e.last.getMonth(),1)&&(this.currentMonth=t)}isPrevMonthDisabled(){const e=this.getDateRange();if(!e)return!0;const t=new Date(e.first.getFullYear(),e.first.getMonth(),1);return this.currentMonth<=t}isNextMonthDisabled(){const e=this.getDateRange();if(!e)return!0;const t=new Date(e.last.getFullYear(),e.last.getMonth(),1);return this.currentMonth>=t}getCalendarDays(){if(this.isSingleWeek()){const e=this.getDateRange();if(!e)return[];const t=new Date(e.first),r=t.getDay(),a=0===r?6:r-1;t.setDate(t.getDate()-a),t.setHours(0,0,0,0);const o=[],s=new Date(t);for(let e=0;e<7;e++)o.push(new Date(s)),s.setDate(s.getDate()+1);return o}const e=this.currentMonth.getFullYear(),t=this.currentMonth.getMonth(),r=new Date(e,t,1),a=new Date(e,t+1,0),o=r.getDay(),s=0===o?6:o-1,i=new Date(r);i.setDate(i.getDate()-s);const n=a.getDay(),l=0===n?0:7-n,d=new Date(a);d.setDate(d.getDate()+l);const c=[],u=new Date(i);for(;u<=d;)c.push(new Date(u)),u.setDate(u.getDate()+1);return c}hasOccurrencesOnDate(e){const t=e.toDateString();return this.getDatesWithOccurrences().has(t)}isDateSoldOut(e){const t=e.toDateString(),r=this.getDatesWithOccurrences().get(t);return!!r&&r.every((e=>e.soldOut||0===e.availableCapacity))}getSelectedDateOccurrences(){if(!this.selectedDate)return[];const e=this.selectedDate.toDateString();return(this.getDatesWithOccurrences().get(e)||[]).sort(((e,t)=>new Date(e.startsAt).getTime()-new Date(t.startsAt).getTime()))}getThemeStyles(){if(!this.theme)return{};const e={};return this.theme.primaryColor&&(e["--tl-primary"]=this.theme.primaryColor),this.theme.primaryForeground&&(e["--tl-primary-foreground"]=this.theme.primaryForeground),this.theme.backgroundColor&&(e["--tl-background"]=this.theme.backgroundColor),this.theme.foregroundColor&&(e["--tl-foreground"]=this.theme.foregroundColor),this.theme.mutedColor&&(e["--tl-muted"]=this.theme.mutedColor),this.theme.mutedForeground&&(e["--tl-muted-foreground"]=this.theme.mutedForeground),this.theme.borderColor&&(e["--tl-border"]=this.theme.borderColor),this.theme.borderRadius&&(e["--tl-radius"]=this.theme.borderRadius),this.theme.fontFamily&&(e["--tl-font-family"]=this.theme.fontFamily),e}renderListView(){return a("div",{class:"list-view"},this.occurrences.map((e=>{const t=e.soldOut||0===e.availableCapacity,{date:r,time:o}=this.formatDateTime(e.startsAt);return a("button",{key:e.id,class:"occurrence-item "+(t?"sold-out":""),onClick:()=>this.handleSelect(e),disabled:t},a("div",{class:"occurrence-info"},a("div",{class:"occurrence-date"},r),a("div",{class:"occurrence-time"},o,e.endsAt&&` - ${this.formatTime(e.endsAt)}`)),a("div",{class:"occurrence-status"},t?a("span",{class:"status-sold-out"},"Sold Out"):e.availableCapacity?a("span",{class:"status-available"},e.availableCapacity," available"):a("span",{class:"status-arrow"},"→")))})))}renderSlotsView(){const e=[...this.occurrences].sort(((e,t)=>new Date(e.startsAt).getTime()-new Date(t.startsAt).getTime())),t=e.length>0?this.formatDate(new Date(e[0].startsAt)):"";return a("div",{class:"slots-view"},t&&a("div",{class:"slots-date-header"},t),a("div",{class:"time-slots-grid"},e.map((e=>{const t=e.soldOut||0===e.availableCapacity;return a("button",{key:e.id,class:"time-slot "+(t?"sold-out":""),onClick:()=>this.handleSelect(e),disabled:t},a("span",{class:"slot-time"},this.formatTime(e.startsAt)),t&&a("span",{class:"slot-sold-out"},"Sold Out"))}))))}renderCalendarHeader(){const e=this.currentMonth.toLocaleDateString("en-GB",{month:"long",year:"numeric"}),t=!this.isSingleMonth();return a("div",{class:"calendar-header"},a("span",{class:"month-label"},e),t&&a("div",{class:"calendar-nav-buttons"},a("button",{class:"nav-button",onClick:()=>this.handlePrevMonth(),disabled:this.isPrevMonthDisabled(),"aria-label":"Previous month"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},a("path",{d:"M15 18l-6-6 6-6"}))),a("button",{class:"nav-button",onClick:()=>this.handleNextMonth(),disabled:this.isNextMonthDisabled(),"aria-label":"Next month"},a("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},a("path",{d:"M9 18l6-6-6-6"})))))}renderCalendarGrid(){const e=this.getCalendarDays(),t=new Date;return t.setHours(0,0,0,0),a("div",{class:"calendar-grid"},["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map((e=>a("div",{class:"weekday-header",key:e},e))),e.map((e=>{const r=e.getMonth()===this.currentMonth.getMonth(),o=this.hasOccurrencesOnDate(e),s=this.isDateSoldOut(e),i=this.selectedDate&&e.toDateString()===this.selectedDate.toDateString(),n=e.toDateString()===t.toDateString(),l=e<t;return a("button",{key:e.toISOString(),class:`calendar-day \n ${r?"":"other-month"} \n ${o?"has-occurrences":""} \n ${s?"sold-out":""} \n ${i?"selected":""} \n ${n?"today":""}\n ${l?"past":""}`,onClick:()=>o&&this.handleDateSelect(e),disabled:!o},a("span",{class:"day-number"},e.getDate()),o&&a("span",{class:"occurrence-dot"}))})))}renderSelectedDateSlots(){const e=this.getSelectedDateOccurrences();if(!this.selectedDate||0===e.length)return a("div",{class:"selected-date-slots empty"},a("p",null,"Select a date to see available times"));const t=this.formatDate(this.selectedDate);return a("div",{class:"selected-date-slots"},a("div",{class:"selected-date-header"},t),a("div",{class:"time-slots-list"},e.map((e=>{const t=e.soldOut||0===e.availableCapacity;return a("button",{key:e.id,class:"time-slot-item "+(t?"sold-out":""),onClick:()=>this.handleSelect(e),disabled:t},a("span",{class:"slot-time"},this.formatTime(e.startsAt)),a("div",{class:"slot-status"},t?a("span",{class:"status-sold-out"},"Sold Out"):e.availableCapacity?a("span",{class:"status-available"},e.availableCapacity," available"):a("span",{class:"status-arrow"},"→")))}))))}renderCalendarView(){const e=this.isHorizontalLayout();return a("div",{class:"calendar-view "+(e?"horizontal":"vertical")},a("div",{class:"calendar-panel"},this.renderCalendarHeader(),this.renderCalendarGrid()),a("div",{class:"slots-panel"},this.renderSelectedDateSlots()))}renderSkeleton(){return a("div",{class:"loading-container"},a("div",{class:"skeleton-calendar"},a("div",{class:"skeleton skeleton-calendar-header"}),a("div",{class:"skeleton-calendar-grid"},Array.from({length:35},((e,t)=>a("div",{key:t,class:"skeleton skeleton-calendar-day"}))))))}render(){const e=this.getThemeStyles();return a("div",{key:"40758aaa06e5f062de92675766e4531995f74bc7",class:"occurrence-selector",ref:e=>this.containerRef=e,style:e},this.loading&&this.renderSkeleton(),!this.loading&&this.error&&a("div",{key:"6d2f5b9c07f65d4941bfb4870729fe3248cb277e",class:"error-container"},a("svg",{key:"daaf1f48dcff80ae7cf94ae0da1d66d9c9b7fb0f",class:"error-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},a("circle",{key:"0a9f494a5cf7f79146e56fc44469a3ca9e5238ae",cx:"12",cy:"12",r:"10"}),a("path",{key:"67d7b453508c847593136bd60e34ea0c38d30cda",d:"M12 8v4m0 4h.01"})),a("p",{key:"c1cc92585ed4451b686350b6d718c3ba06b72dd3",class:"error-message"},this.error),a("button",{key:"4ec9d048af704af12a800385b9868501973ba477",class:"retry-button",onClick:()=>this.fetchOccurrences()},"Retry")),!this.loading&&!this.error&&(0===this.occurrences.length?a("div",{class:"no-occurrences"},a("p",null,"No dates available for this event.")):a("div",{class:"selector-content"},"list"===this.computedDisplayMode&&this.renderListView(),"slots"===this.computedDisplayMode&&this.renderSlotsView(),"calendar"===this.computedDisplayMode&&this.renderCalendarView())))}static get watchers(){return{eventId:[{onEventIdChange:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.occurrence-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.time-slot:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground)}.nav-button:hover:not(:disabled){background:var(--tl-muted)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));border-color:transparent;font-weight:600;color:var(--tl-primary)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary) 18%, var(--tl-background));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));border-color:transparent}.calendar-day.selected{background:var(--tl-primary);border-color:var(--tl-primary);color:var(--tl-primary-foreground)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.time-slot-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary);color:var(--tl-primary-foreground);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}"}},[1,"tl-occurrence-selector",{eventId:[1,"event-id"],displayMode:[1,"display-mode"],orientation:[1],theme:[16],loading:[32],error:[32],occurrences:[32],currentMonth:[32],selectedDate:[32],computedDisplayMode:[32],containerWidth:[32]},void 0,{eventId:[{onEventIdChange:0}]}]);function l(){"undefined"!=typeof customElements&&["tl-occurrence-selector"].forEach((e=>{"tl-occurrence-selector"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))}export{n as T,l as d}
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as o,transformTag as a}from"@stencil/core/internal/client";import{w as s,g as i}from"./sdk-connector.js";import{c as l,o as n}from"./ticket-selector.js";const d=[["primaryColor","--tl-primary"],["primaryForeground","--tl-primary-foreground"],["backgroundColor","--tl-background"],["foregroundColor","--tl-foreground"],["mutedColor","--tl-muted"],["mutedForeground","--tl-muted-foreground"],["borderColor","--tl-border"],["borderRadius","--tl-radius"],["fontFamily","--tl-font-family"]],c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tlSelect=t(this,"tlSelect",7),this.orientation="auto",this.element=l(n,{client:()=>i(),clientReady:()=>s(),emit:(e,r)=>this.forward(e,r)}),this.view=this.element.view}watchSubject(){this.syncProps(),this.teardown?.(),this.teardown=this.element.mount()}syncProps(){this.element.setProps({eventId:this.eventId,displayMode:this.displayMode,orientation:this.orientation,theme:this.theme})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((e=>{this.view=e}))),this.view=this.element.view,this.teardown=this.element.mount()}componentDidLoad(){this.containerRef&&"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((e=>{for(const r of e)this.element.actions.resized(r.contentRect.width)})),this.resizeObserver.observe(this.containerRef))}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}forward(e,r){"tlSelect"===e&&this.tlSelect.emit(r)}themeStyles(){const e={};if(!this.theme)return e;for(const[r,t]of d){const o=this.theme[r];o&&(e[t]=o)}return e}renderRowStatus(e){const{strings:r}=this.view;return"soldOut"===e.statusKind?o("span",{class:"status-sold-out"},r.soldOut):"available"===e.statusKind?o("span",{class:"status-available"},e.capacityLabel):o("span",{class:"status-arrow"},"→")}renderListView(){return o("div",{class:"list-view"},this.view.derived.rows.map((e=>o("button",{key:e.id,class:"occurrence-item "+(e.soldOut?"sold-out":""),onClick:()=>this.element.actions.select(e.id),disabled:e.soldOut},o("div",{class:"occurrence-info"},o("div",{class:"occurrence-date"},e.dateLabel),o("div",{class:"occurrence-time"},e.timeLabel)),o("div",{class:"occurrence-status"},this.renderRowStatus(e))))))}renderSlotsView(){const{slots:e,slotsDateLabel:r}=this.view.derived;return o("div",{class:"slots-view"},r&&o("div",{class:"slots-date-header"},r),o("div",{class:"time-slots-grid"},e.map((e=>o("button",{key:e.id,class:"time-slot "+(e.soldOut?"sold-out":""),onClick:()=>this.element.actions.select(e.id),disabled:e.soldOut},o("span",{class:"slot-time"},e.startLabel),e.soldOut&&o("span",{class:"slot-sold-out"},this.view.strings.soldOut))))))}renderCalendarHeader(){const{strings:e,derived:r}=this.view;return o("div",{class:"calendar-header"},o("span",{class:"month-label"},r.monthLabel),r.showMonthNav&&o("div",{class:"calendar-nav-buttons"},o("button",{class:"nav-button",onClick:()=>this.element.actions.previousMonth(),disabled:!r.canGoBack,"aria-label":e.previousMonth},o("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},o("path",{d:"M15 18l-6-6 6-6"}))),o("button",{class:"nav-button",onClick:()=>this.element.actions.nextMonth(),disabled:!r.canGoForward,"aria-label":e.nextMonth},o("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},o("path",{d:"M9 18l6-6-6-6"})))))}renderCalendarDay(e){return o("button",{key:e.key,class:e.className,onClick:()=>this.element.actions.selectDate(e.key),disabled:!e.selectable},o("span",{class:"day-number"},e.dayNumber),e.hasOccurrences&&o("span",{class:"occurrence-dot"}))}renderCalendarGrid(){const{derived:e}=this.view;return o("div",{class:"calendar-grid"},e.weekdayLabels.map((e=>o("div",{class:"weekday-header",key:e},e))),e.days.map((e=>this.renderCalendarDay(e))))}renderSelectedDateSlots(){const{strings:e,derived:r}=this.view;return r.selectedDateLabel?o("div",{class:"selected-date-slots"},o("div",{class:"selected-date-header"},r.selectedDateLabel),o("div",{class:"time-slots-list"},r.selectedSlots.map((e=>o("button",{key:e.id,class:"time-slot-item "+(e.soldOut?"sold-out":""),onClick:()=>this.element.actions.select(e.id),disabled:e.soldOut},o("span",{class:"slot-time"},e.startLabel),o("div",{class:"slot-status"},this.renderRowStatus(e))))))):o("div",{class:"selected-date-slots empty"},o("p",null,e.selectADate))}renderCalendarView(){return o("div",{class:this.view.derived.viewClass},o("div",{class:"calendar-panel"},this.renderCalendarHeader(),this.renderCalendarGrid()),o("div",{class:"slots-panel"},this.renderSelectedDateSlots()))}renderSkeleton(){return o("div",{class:"loading-container"},o("div",{class:"skeleton-calendar"},o("div",{class:"skeleton skeleton-calendar-header"}),o("div",{class:"skeleton-calendar-grid"},Array.from({length:35},((e,r)=>o("div",{key:r,class:"skeleton skeleton-calendar-day"}))))))}render(){const{status:e,strings:r,state:t,derived:a}=this.view;return o("div",{key:"84951fb5171ed6c79604861a171f49f43c8b809c",class:"occurrence-selector",ref:e=>this.containerRef=e,style:this.themeStyles()},"loading"===e&&this.renderSkeleton(),"error"===e&&o("div",{key:"2850712eae277f32f3538426c8a5d36b73ca918e",class:"error-container"},o("svg",{key:"89192cd7cce29781b87c83c8dee71d59f6a685ed",class:"error-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},o("circle",{key:"27a52ecb1228c541202752be84323abe687c1655",cx:"12",cy:"12",r:"10"}),o("path",{key:"f51c2b49de89b9c66cde01e11a2de4c56d4dbad9",d:"M12 8v4m0 4h.01"})),o("p",{key:"3c85d762de430f477d2c9ad4341b23765c93e2e3",class:"error-message"},t.error),o("button",{key:"22fa271a8f0a15e18141cf6d66a25a2bf9299c72",class:"retry-button",onClick:()=>{this.element.actions.load()}},r.retry)),"empty"===e&&o("div",{key:"285403135ccff6cd6c8de6a9c62c9186c67c102c",class:"no-occurrences"},o("p",{key:"98373f0c5793cb1aba1328558fac3210e7c6aeeb"},r.empty)),"ready"===e&&o("div",{key:"a61d2c02538f3339e54770e53a4f807e72182357",class:"selector-content"},"list"===a.mode&&this.renderListView(),"slots"===a.mode&&this.renderSlotsView(),"calendar"===a.mode&&this.renderCalendarView()))}static get watchers(){return{eventId:[{watchSubject:0}],displayMode:[{syncProps:0}],orientation:[{syncProps:0}],theme:[{syncProps:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.occurrence-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.time-slot:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground)}.nav-button:hover:not(:disabled){background:var(--tl-muted)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));border-color:transparent;font-weight:600;color:var(--tl-primary)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary) 18%, var(--tl-background));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));border-color:transparent}.calendar-day.selected{background:var(--tl-primary);border-color:var(--tl-primary);color:var(--tl-primary-foreground)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.time-slot-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary);color:var(--tl-primary-foreground);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}"}},[1,"tl-occurrence-selector",{eventId:[1,"event-id"],displayMode:[1,"display-mode"],orientation:[1],theme:[16],view:[32]},void 0,{eventId:[{watchSubject:0}],displayMode:[{syncProps:0}],orientation:[{syncProps:0}],theme:[{syncProps:0}]}]);function u(){"undefined"!=typeof customElements&&["tl-occurrence-selector"].forEach((e=>{"tl-occurrence-selector"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))}export{c as T,u as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as s,createEvent as r,h as e,transformTag as i}from"@stencil/core/internal/client";import{w as o,g as l}from"./sdk-connector.js";import{w as a}from"./web-query.js";import{d as n}from"./tl-order-tickets2.js";import{d as c}from"./tl-ticket2.js";import{c as d,j as m}from"./ticket-selector.js";const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tlOrderLoaded=r(this,"tlOrderLoaded",7),this.tlError=r(this,"tlError",7),this.showTickets=!0,this.columns=2,this.element=d(m,{client:()=>l(),clientReady:()=>o(),query:a,emit:(t,s)=>this.forward(t,s)}),this.view=this.element.view}watchOrderId(){this.syncProps(),this.element.actions.orderIdChanged()}syncProps(){this.element.setProps({orderId:this.orderId,customerEmail:this.customerEmail,showTickets:this.showTickets,columns:this.columns})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((t=>{this.view=t}))),this.view=this.element.view,this.teardown=this.element.mount()}disconnectedCallback(){this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}forward(t,s){"tlOrderLoaded"===t?this.tlOrderLoaded.emit(s):"tlError"===t&&this.tlError.emit(s)}renderRows(){return e("dl",{class:"rows"},this.view.derived.rows.map((t=>e("div",{class:"row",key:t.label},e("dt",null,t.label),e("dd",{class:t.reference?"reference":void 0},t.value)))))}renderTotals(){const{strings:t,derived:s}=this.view;return e("div",{class:"totals"},e("div",{class:"total-row"},e("span",null,t.subtotalRow),e("span",null,s.subtotalLabel)),s.totals.showFee&&e("div",{class:"total-row fee"},e("span",null,s.totals.feeLabel),e("span",null,s.feeAmountLabel)),s.showTaxRow&&e("div",{class:"total-row"},e("span",null,t.taxRow),e("span",null,s.taxLabel)),s.showDiscountRow&&e("div",{class:"total-row discount"},e("span",null,t.discountRow),e("span",null,"-",s.discountLabel)),e("div",{class:"total-row total"},e("span",null,t.totalRow),e("span",null,s.totalLabel)))}render(){const{status:t,state:s,strings:r,derived:i}=this.view;return"payment-failed"===t?e("div",{class:"confirmation"},e("h1",{class:"title"},r.paymentFailedTitle),e("p",{class:"lead"},r.paymentFailedLead)):"idle"===t?null:"loading"===t?e("div",{class:"confirmation"},e("div",{class:"skeleton-line short"}),e("div",{class:"skeleton-line long"}),e("div",{class:"skeleton-block"})):e("div",{class:"confirmation"},e("div",{class:"check","aria-hidden":"true"},e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"}))),e("h1",{class:"title"},r.title),e("p",{class:"lead"},i.leadText),i.showError&&e("p",{class:"error"},r.errorPrefix,s.error),i.showSummary&&e("div",{class:"summary"},this.renderRows(),e("ul",{class:"lines"},i.lines.map(((t,s)=>e("li",{class:"line",key:s},e("span",{class:"line-name"},t.label),e("span",{class:"line-price"},t.priceLabel))))),this.renderTotals()),i.showTickets&&e("div",{class:"tickets"},e("h2",{class:"subtitle"},r.ticketsTitle),e("tl-order-tickets",{orderId:i.ticketsOrderId,columns:this.columns}),e("p",{class:"hint"},r.ticketsHint)))}static get watchers(){return{orderId:[{watchOrderId:0}],customerEmail:[{syncProps:0}],showTickets:[{syncProps:0}],columns:[{syncProps:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.confirmation{text-align:center}.check{width:4rem;height:4rem;margin:0 auto var(--tl-spacing-4);display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--tl-success);color:var(--tl-success-foreground)}.check svg{width:2rem;height:2rem}.title{margin:0 0 var(--tl-spacing-2);font-size:1.875rem;font-weight:700;line-height:1.2}.lead{margin:0 0 var(--tl-spacing-6);color:var(--tl-muted-foreground)}.error{margin:0 0 var(--tl-spacing-6);font-size:0.875rem;color:var(--tl-error)}.summary{text-align:left;padding:var(--tl-spacing-6);margin-bottom:var(--tl-spacing-6);background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.rows{display:grid;gap:var(--tl-spacing-2);margin:0 0 var(--tl-spacing-4);padding:0 0 var(--tl-spacing-4);border-bottom:1px solid var(--tl-border)}.row{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.row dt{color:var(--tl-muted-foreground)}.row dd{margin:0;text-align:right;overflow-wrap:anywhere}.reference{font-family:var(--tl-font-family-mono);font-weight:600}.lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--tl-spacing-2)}.line{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.totals{margin-top:var(--tl-spacing-3);padding-top:var(--tl-spacing-3);border-top:1px solid var(--tl-border);display:grid;gap:var(--tl-spacing-1);font-size:0.875rem}.total-row{display:flex;justify-content:space-between;color:var(--tl-muted-foreground)}.total-row.discount{color:var(--tl-success)}.total-row.total{margin-top:var(--tl-spacing-1);font-size:1rem;font-weight:600;color:var(--tl-foreground)}.tickets{text-align:left}.subtitle{margin:0 0 var(--tl-spacing-4);font-size:1.125rem;font-weight:600}.hint{margin:var(--tl-spacing-3) 0 0;font-size:0.75rem;color:var(--tl-muted-foreground)}.skeleton-line,.skeleton-block{background:var(--tl-secondary);border-radius:var(--tl-radius-md);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;margin:0 auto var(--tl-spacing-3)}.skeleton-line{height:1rem}.skeleton-line.short{width:40%;height:1.75rem}.skeleton-line.long{width:70%}.skeleton-block{height:8rem}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}"}},[1,"tl-order-confirmation",{orderId:[1,"order-id"],customerEmail:[1,"customer-email"],showTickets:[4,"show-tickets"],columns:[2],view:[32]},void 0,{orderId:[{watchOrderId:0}],customerEmail:[{syncProps:0}],showTickets:[{syncProps:0}],columns:[{syncProps:0}]}]),h=p,u=function(){"undefined"!=typeof customElements&&["tl-order-confirmation","tl-order-tickets","tl-ticket"].forEach((t=>{switch(t){case"tl-order-confirmation":customElements.get(i(t))||customElements.define(i(t),p);break;case"tl-order-tickets":customElements.get(i(t))||n();break;case"tl-ticket":customElements.get(i(t))||c()}}))};export{h as TlOrderConfirmation,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,h as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as e,h as s,transformTag as r}from"@stencil/core/internal/client";import{w as i,g as o}from"./sdk-connector.js";import{d as a}from"./tl-ticket2.js";import{c as n,f as c}from"./ticket-selector.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.columns=2,this.element=n(c,{client:()=>o(),clientReady:()=>i(),emit:(t,e)=>this.forward(t,e)}),this.view=this.element.view}watchOrder(){this.syncProps(),this.element.actions.orderIdChanged()}syncProps(){this.element.setProps({orderId:this.orderId,columns:this.columns})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((t=>{this.view=t}))),this.view=this.element.view,this.teardown=this.element.mount()}disconnectedCallback(){this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}forward(t,e){}render(){const{status:t,state:e,strings:r,derived:i}=this.view;return"loading"===t?s("div",{class:"state"},r.loading):"error"===t?s("div",{class:"state error"},e.error):"issuing"===t?s("div",{class:"state issuing",role:"status","aria-live":"polite"},s("span",{class:"spinner","aria-hidden":"true"}),r.preparing):"delayed"===t?s("div",{class:"state",role:"status"},r.delayed):s("div",{class:`grid cols-${i.columns}`},i.tickets.map((t=>s("tl-ticket",{key:t.id,ticket:t,orderId:i.orderId}))))}static get watchers(){return{orderId:[{watchOrder:0}],columns:[{syncProps:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family)}.grid{display:grid;gap:var(--tl-spacing-4);grid-template-columns:1fr}@media (min-width: 480px){.grid.cols-2{grid-template-columns:repeat(2, 1fr)}.grid.cols-3{grid-template-columns:repeat(3, 1fr)}}.state{padding:var(--tl-spacing-6);text-align:center;color:var(--tl-muted-foreground);font-size:0.875rem}.state.error{color:var(--tl-error)}.state.issuing{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2)}.spinner{width:0.875rem;height:0.875rem;border:2px solid var(--tl-border);border-top-color:var(--tl-primary);border-radius:50%;animation:tl-spin 0.7s linear infinite;flex:none}@keyframes tl-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--tl-border)}}"}},[1,"tl-order-tickets",{orderId:[1,"order-id"],columns:[2],view:[32]},void 0,{orderId:[{watchOrder:0}],columns:[{syncProps:0}]}]);function l(){"undefined"!=typeof customElements&&["tl-order-tickets","tl-ticket"].forEach((t=>{switch(t){case"tl-order-tickets":customElements.get(r(t))||customElements.define(r(t),d);break;case"tl-ticket":customElements.get(r(t))||a()}}))}export{d as T,l as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as o,transformTag as i}from"@stencil/core/internal/client";import{w as s,g as a}from"./sdk-connector.js";import{c as l,p as n}from"./ticket-selector.js";const d=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tlPromoApplied=e(this,"tlPromoApplied",7),this.tlError=e(this,"tlError",7),this.placeholder="Promo or presale code",this.buttonLabel="Apply",this.element=l(n,{client:()=>a(),clientReady:()=>s(),emit:(t,r)=>this.forward(t,r)}),this.view=this.element.view,this.handleInput=t=>{this.element.actions.setCode(t.target.value)},this.handleSubmit=t=>{t.preventDefault(),this.element.actions.apply()},this.reset=()=>this.element.actions.reset()}syncProps(){this.element.setProps({placeholder:this.placeholder,buttonLabel:this.buttonLabel})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((t=>{this.view=t}))),this.view=this.element.view,this.teardown=this.element.mount()}disconnectedCallback(){this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}forward(t,r){"tlPromoApplied"===t?this.tlPromoApplied.emit(r):"tlError"===t&&this.tlError.emit(r)}render(){const{status:t,state:r,strings:e,derived:i}=this.view;return"applied"===t?o("div",{class:"applied",role:"status"},o("span",{class:"applied-text"},o("svg",{class:"icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},o("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"})),e.codePrefix,o("strong",{class:"code"},i.appliedCode),i.appliedSuffix),o("button",{type:"button",class:"link",onClick:this.reset},e.useDifferent)):o("form",{class:"promo",onSubmit:this.handleSubmit},o("div",{class:"field"},o("input",{class:"input",type:"text",autocomplete:"off",autoCapitalize:"characters",spellcheck:!1,"aria-label":this.placeholder,placeholder:this.placeholder,value:r.code,disabled:i.disabled,onInput:this.handleInput}),o("button",{type:"submit",class:"apply",disabled:i.disabled},i.actionLabel)),r.error&&o("p",{class:"error",role:"alert"},r.error))}static get watchers(){return{placeholder:[{syncProps:0}],buttonLabel:[{syncProps:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.field{display:flex;gap:var(--tl-spacing-2)}.input{flex:1;min-width:0;padding:var(--tl-spacing-3);font:inherit;font-size:0.875rem;color:var(--tl-foreground);background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md);text-transform:uppercase}.input::placeholder{text-transform:none;color:var(--tl-muted-foreground)}.input:focus{outline:2px solid var(--tl-primary);outline-offset:1px}.apply{padding:var(--tl-spacing-3) var(--tl-spacing-4);font:inherit;font-size:0.875rem;font-weight:500;color:var(--tl-primary-foreground);background:var(--tl-primary);border:none;border-radius:var(--tl-radius-md);cursor:pointer;white-space:nowrap}.apply:hover:not(:disabled){opacity:0.9}.apply:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.error{margin:var(--tl-spacing-2) 0 0;font-size:0.8125rem;color:var(--tl-error)}.applied{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-3);padding:var(--tl-spacing-3);font-size:0.875rem;background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md)}.applied-text{display:flex;align-items:center;gap:var(--tl-spacing-2)}.icon{width:1rem;height:1rem;flex-shrink:0;color:var(--tl-success)}.code{font-family:var(--tl-font-family-mono)}.link{padding:0;font:inherit;font-size:0.8125rem;color:var(--tl-primary);background:none;border:none;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}"}},[1,"tl-promo-code",{placeholder:[1],buttonLabel:[1,"button-label"],view:[32]},void 0,{placeholder:[{syncProps:0}],buttonLabel:[{syncProps:0}]}]),c=d,p=function(){"undefined"!=typeof customElements&&["tl-promo-code"].forEach((t=>{"tl-promo-code"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))};export{c as TlPromoCode,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as s,transformTag as r}from"@stencil/core/internal/client";import{h as i,g as o}from"./sdk-connector.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tlReady=a(this,"tlReady",7),this.tlLoad=a(this,"tlLoad",7),this.tlError=a(this,"tlError",7),this.tlSeatAdded=a(this,"tlSeatAdded",7),this.tlSeatRemoved=a(this,"tlSeatRemoved",7),this.tlCartChange=a(this,"tlCartChange",7),this.hboUrl="https://checkout.ticketlayer.com",this.apiUrl="https://api.ticketlayer.com",this.height="600px",this.width="100%",this.isReady=!1,this.isLoading=!0,this.error=null,this.seatsInCart=[],this.postToIframe=(e,t={})=>{this.iframeRef?.contentWindow&&this.iframeRef.contentWindow.postMessage({type:e,...t},"*")},this.handleMessage=e=>{if(e.data&&e.data.type)switch(e.data.type){case"seatmap:ready":this.isReady=!0,this.isLoading=!1,this.tlReady.emit(),this.postToIframe("seatmap:set-cart-seats",{seatIds:this.seatsInCart});break;case"seatmap:loaded":this.tlLoad.emit({seatMapId:e.data.seatMapId});break;case"seatmap:error":this.error=e.data.error,this.isLoading=!1,this.tlError.emit({error:e.data.error});break;case"seatmap:add-seat":this.handleAddSeat(e.data.seatId,e.data.ticketTypeId);break;case"seatmap:remove-seat":this.handleRemoveSeat(e.data.seatId)}},this.handleAddSeat=async(e,t)=>{if(!i())return console.warn("[tl-seat-map] SDK not available, cannot add seat"),void this.postToIframe("seatmap:add-seat-failed",{seatId:e,error:"SDK not available"});try{const a=o();await a.getCartManager().addSeat(e,t,this.occurrenceId),this.postToIframe("seatmap:add-seat-confirmed",{seatId:e}),this.seatsInCart=[...this.seatsInCart,e],this.tlSeatAdded.emit({seatId:e,ticketTypeId:t}),this.tlCartChange.emit({seatIds:this.seatsInCart})}catch(t){console.error("[tl-seat-map] Failed to add seat:",t),this.postToIframe("seatmap:add-seat-failed",{seatId:e,error:"Failed to add seat"})}},this.handleRemoveSeat=async e=>{if(!i())return console.warn("[tl-seat-map] SDK not available, cannot remove seat"),void this.postToIframe("seatmap:remove-seat-failed",{seatId:e,error:"SDK not available"});try{const t=o();await t.getCartManager().removeSeat(e,this.occurrenceId),this.postToIframe("seatmap:remove-seat-confirmed",{seatId:e}),this.seatsInCart=this.seatsInCart.filter((t=>t!==e)),this.tlSeatRemoved.emit({seatId:e}),this.tlCartChange.emit({seatIds:this.seatsInCart})}catch(t){console.error("[tl-seat-map] Failed to remove seat:",t),this.postToIframe("seatmap:remove-seat-failed",{seatId:e,error:"Failed to remove seat"})}}}componentWillLoad(){window.addEventListener("message",this.handleMessage)}disconnectedCallback(){window.removeEventListener("message",this.handleMessage)}watchOccurrenceId(){this.isReady=!1,this.isLoading=!0,this.error=null}getIframeSrc(){return`${this.hboUrl}/embed/seats?occurrenceId=${encodeURIComponent(this.occurrenceId)}&apiUrl=${encodeURIComponent(this.apiUrl)}`}render(){return s("div",{key:"
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as s,transformTag as r}from"@stencil/core/internal/client";import{h as i,g as o}from"./sdk-connector.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tlReady=a(this,"tlReady",7),this.tlLoad=a(this,"tlLoad",7),this.tlError=a(this,"tlError",7),this.tlSeatAdded=a(this,"tlSeatAdded",7),this.tlSeatRemoved=a(this,"tlSeatRemoved",7),this.tlCartChange=a(this,"tlCartChange",7),this.hboUrl="https://checkout.ticketlayer.com",this.apiUrl="https://api.ticketlayer.com",this.height="600px",this.width="100%",this.isReady=!1,this.isLoading=!0,this.error=null,this.seatsInCart=[],this.postToIframe=(e,t={})=>{this.iframeRef?.contentWindow&&this.iframeRef.contentWindow.postMessage({type:e,...t},"*")},this.handleMessage=e=>{if(e.data&&e.data.type)switch(e.data.type){case"seatmap:ready":this.isReady=!0,this.isLoading=!1,this.tlReady.emit(),this.postToIframe("seatmap:set-cart-seats",{seatIds:this.seatsInCart});break;case"seatmap:loaded":this.tlLoad.emit({seatMapId:e.data.seatMapId});break;case"seatmap:error":this.error=e.data.error,this.isLoading=!1,this.tlError.emit({error:e.data.error});break;case"seatmap:add-seat":this.handleAddSeat(e.data.seatId,e.data.ticketTypeId);break;case"seatmap:remove-seat":this.handleRemoveSeat(e.data.seatId)}},this.handleAddSeat=async(e,t)=>{if(!i())return console.warn("[tl-seat-map] SDK not available, cannot add seat"),void this.postToIframe("seatmap:add-seat-failed",{seatId:e,error:"SDK not available"});try{const a=o();await a.getCartManager().addSeat(e,t,this.occurrenceId),this.postToIframe("seatmap:add-seat-confirmed",{seatId:e}),this.seatsInCart=[...this.seatsInCart,e],this.tlSeatAdded.emit({seatId:e,ticketTypeId:t}),this.tlCartChange.emit({seatIds:this.seatsInCart})}catch(t){console.error("[tl-seat-map] Failed to add seat:",t),this.postToIframe("seatmap:add-seat-failed",{seatId:e,error:"Failed to add seat"})}},this.handleRemoveSeat=async e=>{if(!i())return console.warn("[tl-seat-map] SDK not available, cannot remove seat"),void this.postToIframe("seatmap:remove-seat-failed",{seatId:e,error:"SDK not available"});try{const t=o();await t.getCartManager().removeSeat(e,this.occurrenceId),this.postToIframe("seatmap:remove-seat-confirmed",{seatId:e}),this.seatsInCart=this.seatsInCart.filter((t=>t!==e)),this.tlSeatRemoved.emit({seatId:e}),this.tlCartChange.emit({seatIds:this.seatsInCart})}catch(t){console.error("[tl-seat-map] Failed to remove seat:",t),this.postToIframe("seatmap:remove-seat-failed",{seatId:e,error:"Failed to remove seat"})}}}componentWillLoad(){window.addEventListener("message",this.handleMessage)}disconnectedCallback(){window.removeEventListener("message",this.handleMessage)}watchOccurrenceId(){this.isReady=!1,this.isLoading=!0,this.error=null}getIframeSrc(){return`${this.hboUrl}/embed/seats?occurrenceId=${encodeURIComponent(this.occurrenceId)}&apiUrl=${encodeURIComponent(this.apiUrl)}`}render(){return s("div",{key:"1c6a23b0aa021c58fa62c106a92a2e970ca7f6d1",class:"seat-map-container",style:{width:this.width,height:this.height}},this.isLoading&&s("div",{key:"4a09ddbdbd38eb68675bb320cf33fd3ead5974a4",class:"loading"},s("div",{key:"c622ba1f996427f0624cfda2c782abd49ec72e19",class:"spinner"}),s("p",{key:"802f42554fc238a1ddc0f8a0f6a6b0de89bdfb60"},"Loading seat map...")),this.error&&s("div",{key:"dde73e2430bad68c0a67306c0aa2b44810007cc5",class:"error"},s("p",{key:"392d51bbc47ab34eab5670aa7a2faf800dabe638",class:"error-title"},"Error"),s("p",{key:"fcf6810f767f34bf3490c1af21320d262bdb961b",class:"error-message"},this.error)),s("iframe",{key:"2333206fa6eb4fe6cdcbb1d30864d56d54583e1f",ref:e=>this.iframeRef=e,src:this.getIframeSrc(),class:{"seat-map-iframe":!0,hidden:this.isLoading||!!this.error},title:"Ticketlayer Seat Map",allow:"fullscreen"}))}get el(){return this}static get watchers(){return{occurrenceId:[{watchOccurrenceId:0}]}}static get style(){return":host{display:block;font-family:var(--tl-font-family)}.seat-map-container{position:relative;overflow:hidden;border-radius:var(--tl-radius-md);background:var(--tl-color-background)}.seat-map-iframe{width:100%;height:100%;border:none}.seat-map-iframe.hidden{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-foreground);gap:1rem}.loading p{margin:0;font-size:0.875rem;color:var(--tl-color-muted-foreground)}.spinner{width:40px;height:40px;border:3px solid var(--tl-color-border);border-top-color:var(--tl-color-primary);border-radius:50%;animation:tl-seat-map-spin 1s linear infinite}@keyframes tl-seat-map-spin{to{transform:rotate(360deg)}}.error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-error);padding:1.5rem;text-align:center}.error-title{margin:0 0 0.5rem;font-size:1.125rem;font-weight:600}.error-message{margin:0;font-size:0.875rem;opacity:0.9}"}},[1,"tl-seat-map",{occurrenceId:[1,"occurrence-id"],hboUrl:[1,"hbo-url"],apiUrl:[1,"api-url"],height:[1],width:[1],isReady:[32],isLoading:[32],error:[32],seatsInCart:[32]},void 0,{occurrenceId:[{watchOccurrenceId:0}]}]),d=c,n=function(){"undefined"!=typeof customElements&&["tl-seat-map"].forEach((e=>{"tl-seat-map"===e&&(customElements.get(r(e))||customElements.define(r(e),c))}))};export{d as TlSeatMap,n as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as o,transformTag as s}from"@stencil/core/internal/client";import{w as a,g as n}from"./sdk-connector.js";import{s as i}from"./money.js";const c=["discovery","purchase","cart","checkout","account","tickets"],l=["web","native"];function d(t){return"function"==typeof t?t:()=>t??null}const u=t=>i(t.state.ticketTypes.map((e=>({price:e.price,quantity:t.state.quantities[e.id]||0}))),t.state.feeQuote),p=function(t){const e=e=>{throw new Error(`[elements-core] ${t.tag||"<no tag>"}: ${e}`)};/^tl-[a-z0-9]+(-[a-z0-9]+)*$/.test(t.tag)||e("tag must look like tl-something"),c.includes(t.category)||e(`category must be one of ${c.join(", ")}`),t.runtimes.length&&!t.runtimes.some((t=>!l.includes(t)))||e(`runtimes must be a non-empty subset of ${l.join(", ")}`),new Set(t.tokens).size!==t.tokens.length&&e("tokens must not repeat"),t.statuses.length||e("statuses must not be empty");for(const[r,o]of Object.entries(t.events))/^tl[A-Z]/.test(r)||e(`event ${r} must be named tlSomething`),o.detail||e(`event ${r} must state its detail type`);for(const[r,o]of Object.entries(t.props))o.required&&void 0!==o.default&&e(`prop ${r} is required and has a default`);return Object.freeze({...t})}({tag:"tl-ticket-selector",docs:"Pick quantities of the ticket types on sale for one occurrence, and add them to the cart.",category:"purchase",runtimes:["web","native"],tokens:["background","border","border-hover","error","error-bg","font-family","foreground","muted","muted-foreground","primary","primary-foreground","radius-md","radius-sm","spacing-1","spacing-2","spacing-3","spacing-4","success","warning","warning-bg"],sdkMethods:["cart.addItem","events.getTicketTypes"],props:{eventId:{type:"string",attr:"event-id",required:!0,docs:"Event ID"},occurrenceId:{type:"string",attr:"occurrence-id",required:!0,docs:"Occurrence ID"},showButton:{type:"boolean",attr:"show-button",default:!0,docs:"Show add to cart button"},buttonLabel:{type:"string",attr:"button-label",default:"Add to Cart",docs:"Button label"}},events:{tlAddToCart:{detail:"{ items: AddToCartItem[]; }",docs:"Emitted when items are added to cart"},tlQuantityChange:{detail:"{ ticketTypeId: string; quantity: number; total: number; }",docs:"Emitted when quantity changes"},tlError:{detail:"{ message: string; }",docs:"Emitted on error"}},strings:{selectTickets:"Select Tickets",adding:"Adding...",added:"Added to cart!",limited:"Limited",soldOut:"Sold Out",ticketsRow:"Tickets",totalRow:"Total",decrease:"Decrease quantity",increase:"Increase quantity",loadFailed:"Failed to load tickets",addFailed:"Failed to add to cart",noClient:"SDK not initialized."},statuses:["loading","error","ready"],state:()=>({ticketTypes:[],quantities:{},loading:!0,error:null,adding:!1,addSuccess:!1,feeQuote:null}),status:({state:t})=>t.loading?"loading":t.error?"error":"ready",derive:t=>{const{state:e,strings:r,props:o,formatMoney:s}=t,a=u(t),n=(t=>Object.values(t.quantities).reduce(((t,e)=>t+e),0))(e),i=e.ticketTypes[0]?.currency;return{rows:e.ticketTypes.map((t=>{const r=e.quantities[t.id]||0,o="sold_out"===t.availabilityStatus;return{id:t.id,name:t.name,description:t.description??null,priceLabel:s(t.price,t.currency),quantity:r,soldOut:o,limited:"limited"===t.availabilityStatus,canDecrease:!o&&r>0,canIncrease:!o&&r<t.maxPerOrder}})),totals:a,totalItems:n,currency:i,subtotalLabel:s(a.subtotal,i),feeLabel:s(a.fees,i),totalLabel:s(a.total,i),showTotals:a.showFee&&n>0,actionLabel:e.adding?r.adding:0===n?r.selectTickets:`${o.buttonLabel} - ${s(a.total)}`,actionDisabled:0===n||e.adding}},actions:t=>({async load(){try{t.setState({loading:!0,error:null});const e=await t.client().getEventsManager().getTicketTypes(t.props.eventId,t.props.occurrenceId),r={};for(const t of e)r[t.id]=0;t.setState({ticketTypes:e,quantities:r})}catch(e){const r=e instanceof Error?e.message:t.strings.loadFailed;t.setState({error:r}),t.emit("tlError",{message:r})}finally{t.setState({loading:!1})}},changeQuantity(e,r){const o=t.state.ticketTypes.find((t=>t.id===e));if(!o)return;const s=Math.max(0,Math.min(o.maxPerOrder,(t.state.quantities[e]||0)+r));t.setState((t=>({quantities:{...t.quantities,[e]:s}}))),t.emit("tlQuantityChange",{ticketTypeId:e,quantity:s,total:u(t).total})},async addToCart(){const e=Object.entries(t.state.quantities).filter((([,t])=>t>0)).map((([t,e])=>({ticketTypeId:t,quantity:e})));if(0!==e.length){t.setState({adding:!0,addSuccess:!1});try{const r=t.optionalClient()?.getCartManager?.();if(r)for(const o of e)await r.addItem(o.ticketTypeId,o.quantity,t.props.occurrenceId);const o={};for(const e of t.state.ticketTypes)o[e.id]=0;t.setState({quantities:o,addSuccess:!0}),t.after(3e3,(()=>t.setState({addSuccess:!1}))),t.emit("tlAddToCart",{items:e})}catch(e){const r=e instanceof Error?e.message:t.strings.addFailed;t.setState({error:r}),t.emit("tlError",{message:r})}finally{t.setState({adding:!1})}}},setFeeQuote(e){t.setState({feeQuote:e})},connectFailed(e){t.setState({error:e||t.strings.noClient,loading:!1})}})}),g=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tlAddToCart=r(this,"tlAddToCart",7),this.tlQuantityChange=r(this,"tlQuantityChange",7),this.tlError=r(this,"tlError",7),this.showButton=!0,this.buttonLabel="Add to Cart",this.element=function(t,e={}){const r={};for(const[e,o]of Object.entries(t.props))void 0!==o.default&&(r[e]=o.default);let o={...r,...e.props??{}};const s={...t.strings,...e.strings??{}},a=e.locale??"en-GB",n=e.currency??"GBP";let i=d(e.client),c=t.state(o),l=!1;const u=new Set,p=new Set,g=(t,e)=>new Intl.NumberFormat(a,{style:"currency",currency:e||n}).format(t/100),h=()=>{const e={props:o,state:c,strings:s,formatMoney:g};return{status:t.status(e),props:o,state:c,strings:s,derived:t.derive(e)}},f=()=>{if(l)return;const t=h();for(const e of[...p])e(t)},b=t.actions({get props(){return o},get state(){return c},strings:s,formatMoney:g,setState(t){if(l)return;const e="function"==typeof t?t(c):t;c={...c,...e},f()},emit(r,o){if(!t.events[r])throw new Error(`[elements-core] ${t.tag}: ${r} is not a declared event`);e.emit?.(r,o)},client(){const e=i();if(!e)throw new Error(`[elements-core] ${t.tag}: no client. A harness hands the core the client the host published.`);return e},optionalClient(){try{return i()}catch{return null}},after(t,e){if(l)return;const r=setTimeout((()=>{u.delete(r),l||e()}),t);u.add(r)}});return{core:t,get props(){return o},get state(){return c},get view(){return h()},actions:b,setProps(t){l||(o={...o,...t},f())},setClient(t){i=d(t)},subscribe:t=>(p.add(t),()=>{p.delete(t)}),destroy(){l=!0;for(const t of u)clearTimeout(t);u.clear(),p.clear()}}}(p,{client:()=>n(),emit:(t,e)=>this.forward(t,e)}),this.view=this.element.view}get feeQuote(){return this.element.state.feeQuote}set feeQuote(t){this.element.actions.setFeeQuote(t)}watchPropsChange(){this.syncProps(),this.element.actions.load()}syncProps(){this.element.setProps({eventId:this.eventId,occurrenceId:this.occurrenceId,showButton:this.showButton,buttonLabel:this.buttonLabel})}async componentWillLoad(){this.syncProps(),this.unsubscribe=this.element.subscribe((t=>{this.view=t})),this.view=this.element.view,await this.waitForSDKAndLoad()}disconnectedCallback(){this.unsubscribe?.(),this.element.destroy()}async waitForSDKAndLoad(){if(this.eventId&&this.occurrenceId)try{await a(),await this.element.actions.load()}catch(t){this.element.actions.connectFailed(t instanceof Error?t.message:this.view.strings.noClient)}}forward(t,e){"tlAddToCart"===t?this.tlAddToCart.emit(e):"tlQuantityChange"===t?this.tlQuantityChange.emit(e):"tlError"===t&&this.tlError.emit(e)}renderSkeleton(){return o("div",{class:"skeleton-container"},o("div",{class:"skeleton-row"}),o("div",{class:"skeleton-row"}),o("div",{class:"skeleton-row"}))}renderError(){return o("div",{class:"error-state"},o("p",{class:"error-message"},this.view.state.error))}renderTicketRow(t){const e=this.view.strings;return o("div",{class:"ticket-row "+(t.soldOut?"sold-out":""),key:t.id},o("div",{class:"ticket-info"},o("div",{class:"ticket-header"},o("span",{class:"ticket-name"},t.name),t.limited&&o("span",{class:"status-badge limited"},e.limited),t.soldOut&&o("span",{class:"status-badge sold-out"},e.soldOut)),t.description&&o("p",{class:"ticket-description"},t.description),o("p",{class:"ticket-price"},t.priceLabel)),o("div",{class:"quantity-controls"},o("button",{class:"qty-btn",onClick:()=>this.element.actions.changeQuantity(t.id,-1),disabled:!t.canDecrease,"aria-label":e.decrease},"−"),o("span",{class:"qty-value"},t.quantity),o("button",{class:"qty-btn",onClick:()=>this.element.actions.changeQuantity(t.id,1),disabled:!t.canIncrease,"aria-label":e.increase},"+")))}render(){const{status:t,state:e,strings:r,derived:s}=this.view;return"loading"===t?this.renderSkeleton():"error"===t?this.renderError():o("div",{class:"ticket-selector"},o("div",{class:"ticket-list"},s.rows.map((t=>this.renderTicketRow(t)))),s.showTotals&&o("div",{class:"selection-totals"},o("div",{class:"total-row"},o("span",null,r.ticketsRow),o("span",null,s.subtotalLabel)),o("div",{class:"total-row fee"},o("span",null,s.totals.feeLabel),o("span",null,s.feeLabel)),o("div",{class:"total-row total"},o("span",null,r.totalRow),o("span",null,s.totalLabel))),e.addSuccess&&o("div",{class:"success-message"},o("svg",{class:"success-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},o("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"})),r.added),this.showButton&&o("button",{class:"add-to-cart-btn "+(0===s.totalItems?"disabled":""),onClick:()=>this.element.actions.addToCart(),disabled:s.actionDisabled},s.actionLabel))}static get watchers(){return{eventId:[{watchPropsChange:0}],occurrenceId:[{watchPropsChange:0}],showButton:[{syncProps:0}],buttonLabel:[{syncProps:0}]}}static get style(){return":host{--tl-color-primary:var(--tl-primary);--tl-color-primary-foreground:var(--tl-primary-foreground);--tl-color-background:var(--tl-background);--tl-color-foreground:var(--tl-foreground);--tl-color-muted:var(--tl-muted);--tl-color-muted-foreground:var(--tl-muted-foreground);--tl-color-border:var(--tl-border);--tl-color-destructive:var(--tl-error);display:block;font-family:var(--tl-font-family)}.ticket-selector{background:var(--tl-color-background)}.skeleton-container{padding:var(--tl-spacing-4)}.skeleton-row{height:60px;background:var(--tl-color-muted);border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4);color:var(--tl-color-destructive)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3) 0;border-bottom:1px solid var(--tl-color-border)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg);color:var(--tl-color-warning)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg);color:var(--tl-color-destructive)}.ticket-description{margin:var(--tl-spacing-1) 0 0;font-size:14px;color:var(--tl-color-muted-foreground)}.ticket-price{margin:var(--tl-spacing-1) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2);margin-left:var(--tl-spacing-4)}.qty-btn{width:32px;height:32px;border-radius:var(--tl-radius-sm);border:1px solid var(--tl-color-border);background:var(--tl-color-background);color:var(--tl-color-foreground);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted);border-color:var(--tl-color-border-hover)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2);padding:var(--tl-spacing-3);background-color:var(--tl-color-success);color:#ffffff;border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3) var(--tl-spacing-4);border-radius:var(--tl-radius-md);border:none;background-color:var(--tl-color-primary);color:var(--tl-color-primary-foreground);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted);color:var(--tl-color-muted-foreground);cursor:not-allowed}.selection-totals{padding:var(--tl-spacing-3) 0;border-top:1px solid var(--tl-color-border)}.selection-totals .total-row{display:flex;justify-content:space-between;align-items:center;padding:var(--tl-spacing-1) 0;font-size:14px;color:var(--tl-color-muted-foreground)}.selection-totals .total-row.total{font-size:16px;font-weight:700;color:var(--tl-color-foreground);padding-top:var(--tl-spacing-2);border-top:1px solid var(--tl-color-border);margin-top:var(--tl-spacing-2)}"}},[1,"tl-ticket-selector",{eventId:[1,"event-id"],occurrenceId:[1,"occurrence-id"],showButton:[4,"show-button"],buttonLabel:[1,"button-label"],view:[32]},void 0,{eventId:[{watchPropsChange:0}],occurrenceId:[{watchPropsChange:0}],showButton:[{syncProps:0}],buttonLabel:[{syncProps:0}]}]);function h(){"undefined"!=typeof customElements&&["tl-ticket-selector"].forEach((t=>{"tl-ticket-selector"===t&&(customElements.get(s(t))||customElements.define(s(t),g))}))}export{g as T,h as d}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as o,createEvent as r,h as e,transformTag as s}from"@stencil/core/internal/client";import{w as a,g as i}from"./sdk-connector.js";import{c as l,t as n}from"./ticket-selector.js";const c=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tlAddToCart=r(this,"tlAddToCart",7),this.tlQuantityChange=r(this,"tlQuantityChange",7),this.tlError=r(this,"tlError",7),this.showButton=!0,this.buttonLabel="Add to Cart",this.element=l(n,{client:()=>i(),clientReady:()=>a(),emit:(t,o)=>this.forward(t,o)}),this.view=this.element.view}get feeQuote(){return this.element.state.feeQuote}set feeQuote(t){this.element.actions.setFeeQuote(t)}watchPropsChange(){this.syncProps(),this.remount()}syncProps(){this.element.setProps({eventId:this.eventId,occurrenceId:this.occurrenceId,showButton:this.showButton,buttonLabel:this.buttonLabel})}connectedCallback(){this.syncProps(),this.unsubscribe??(this.unsubscribe=this.element.subscribe((t=>{this.view=t}))),this.view=this.element.view,this.teardown=this.element.mount()}disconnectedCallback(){this.teardown?.(),this.teardown=void 0,this.unsubscribe?.(),this.unsubscribe=void 0}remount(){this.teardown?.(),this.teardown=this.element.mount()}forward(t,o){"tlAddToCart"===t?this.tlAddToCart.emit(o):"tlQuantityChange"===t?this.tlQuantityChange.emit(o):"tlError"===t&&this.tlError.emit(o)}renderSkeleton(){return e("div",{class:"skeleton-container"},e("div",{class:"skeleton-row"}),e("div",{class:"skeleton-row"}),e("div",{class:"skeleton-row"}))}renderError(){return e("div",{class:"error-state"},e("p",{class:"error-message"},this.view.state.error))}renderTicketRow(t){const o=this.view.strings;return e("div",{class:"ticket-row "+(t.soldOut?"sold-out":""),key:t.id},e("div",{class:"ticket-info"},e("div",{class:"ticket-header"},e("span",{class:"ticket-name"},t.name),t.limited&&e("span",{class:"status-badge limited"},o.limited),t.soldOut&&e("span",{class:"status-badge sold-out"},o.soldOut)),t.description&&e("p",{class:"ticket-description"},t.description),e("p",{class:"ticket-price"},t.priceLabel)),e("div",{class:"quantity-controls"},e("button",{class:"qty-btn",onClick:()=>this.element.actions.changeQuantity(t.id,-1),disabled:!t.canDecrease,"aria-label":o.decrease},"−"),e("span",{class:"qty-value"},t.quantity),e("button",{class:"qty-btn",onClick:()=>this.element.actions.changeQuantity(t.id,1),disabled:!t.canIncrease,"aria-label":o.increase},"+")))}render(){const{status:t,state:o,strings:r,derived:s}=this.view;return"loading"===t?this.renderSkeleton():"error"===t?this.renderError():e("div",{class:"ticket-selector"},e("div",{class:"ticket-list"},s.rows.map((t=>this.renderTicketRow(t)))),s.showTotals&&e("div",{class:"selection-totals"},e("div",{class:"total-row"},e("span",null,r.ticketsRow),e("span",null,s.subtotalLabel)),e("div",{class:"total-row fee"},e("span",null,s.totals.feeLabel),e("span",null,s.feeLabel)),e("div",{class:"total-row total"},e("span",null,r.totalRow),e("span",null,s.totalLabel))),o.addSuccess&&e("div",{class:"success-message"},e("svg",{class:"success-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 13l4 4L19 7"})),r.added),this.showButton&&e("button",{class:"add-to-cart-btn "+(0===s.totalItems?"disabled":""),onClick:()=>this.element.actions.addToCart(),disabled:s.actionDisabled},s.actionLabel))}static get watchers(){return{eventId:[{watchPropsChange:0}],occurrenceId:[{watchPropsChange:0}],showButton:[{syncProps:0}],buttonLabel:[{syncProps:0}]}}static get style(){return":host{--tl-color-primary:var(--tl-primary);--tl-color-primary-foreground:var(--tl-primary-foreground);--tl-color-background:var(--tl-background);--tl-color-foreground:var(--tl-foreground);--tl-color-muted:var(--tl-muted);--tl-color-muted-foreground:var(--tl-muted-foreground);--tl-color-border:var(--tl-border);--tl-color-destructive:var(--tl-error);display:block;font-family:var(--tl-font-family)}.ticket-selector{background:var(--tl-color-background)}.skeleton-container{padding:var(--tl-spacing-4)}.skeleton-row{height:60px;background:var(--tl-color-muted);border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4);color:var(--tl-color-destructive)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3) 0;border-bottom:1px solid var(--tl-color-border)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg);color:var(--tl-color-warning)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg);color:var(--tl-color-destructive)}.ticket-description{margin:var(--tl-spacing-1) 0 0;font-size:14px;color:var(--tl-color-muted-foreground)}.ticket-price{margin:var(--tl-spacing-1) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2);margin-left:var(--tl-spacing-4)}.qty-btn{width:32px;height:32px;border-radius:var(--tl-radius-sm);border:1px solid var(--tl-color-border);background:var(--tl-color-background);color:var(--tl-color-foreground);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted);border-color:var(--tl-color-border-hover)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2);padding:var(--tl-spacing-3);background-color:var(--tl-color-success);color:#ffffff;border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3) var(--tl-spacing-4);border-radius:var(--tl-radius-md);border:none;background-color:var(--tl-color-primary);color:var(--tl-color-primary-foreground);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted);color:var(--tl-color-muted-foreground);cursor:not-allowed}.selection-totals{padding:var(--tl-spacing-3) 0;border-top:1px solid var(--tl-color-border)}.selection-totals .total-row{display:flex;justify-content:space-between;align-items:center;padding:var(--tl-spacing-1) 0;font-size:14px;color:var(--tl-color-muted-foreground)}.selection-totals .total-row.total{font-size:16px;font-weight:700;color:var(--tl-color-foreground);padding-top:var(--tl-spacing-2);border-top:1px solid var(--tl-color-border);margin-top:var(--tl-spacing-2)}"}},[1,"tl-ticket-selector",{eventId:[1,"event-id"],occurrenceId:[1,"occurrence-id"],showButton:[4,"show-button"],buttonLabel:[1,"button-label"],view:[32]},void 0,{eventId:[{watchPropsChange:0}],occurrenceId:[{watchPropsChange:0}],showButton:[{syncProps:0}],buttonLabel:[{syncProps:0}]}]);function d(){"undefined"!=typeof customElements&&["tl-ticket-selector"].forEach((t=>{"tl-ticket-selector"===t&&(customElements.get(s(t))||customElements.define(s(t),c))}))}export{c as T,d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const n={get(n){if("undefined"==typeof window||!window.location?.search)return null;try{return new URLSearchParams(window.location.search).get(n)}catch{return null}}};export{n as w}
|