tickera-angular-components 0.0.1-dev.204 → 0.0.1-dev.205
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.
|
@@ -9754,6 +9754,13 @@ class DaySelectorGridComponent {
|
|
|
9754
9754
|
listEventService;
|
|
9755
9755
|
toastService;
|
|
9756
9756
|
displayMode = 'grid';
|
|
9757
|
+
/**
|
|
9758
|
+
* true cuando este selector se usa desde el canal backoffice: en ese
|
|
9759
|
+
* caso también deben aparecer las funciones PRIVATE (nunca PEDAGOGIC,
|
|
9760
|
+
* que siempre usa su propio flujo). false (por defecto) es el canal
|
|
9761
|
+
* ecommerce, que solo ve funciones PUBLIC.
|
|
9762
|
+
*/
|
|
9763
|
+
isAdmin = false;
|
|
9757
9764
|
loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
|
|
9758
9765
|
days = signal([], ...(ngDevMode ? [{ debugName: "days" }] : []));
|
|
9759
9766
|
carouselTrack;
|
|
@@ -9773,7 +9780,7 @@ class DaySelectorGridComponent {
|
|
|
9773
9780
|
loadData() {
|
|
9774
9781
|
this.loadingData.set(true);
|
|
9775
9782
|
const showId = this.listEventService.filteredShowId() ?? undefined;
|
|
9776
|
-
this.performanceService.fetchAvailableDays({ show_id: showId }).subscribe({
|
|
9783
|
+
this.performanceService.fetchAvailableDays({ show_id: showId }, this.isAdmin).subscribe({
|
|
9777
9784
|
next: (response) => {
|
|
9778
9785
|
const days = response?.data?.days ?? [];
|
|
9779
9786
|
this.days.set(days);
|
|
@@ -9806,7 +9813,7 @@ class DaySelectorGridComponent {
|
|
|
9806
9813
|
track.scrollBy({ left: direction * (itemWidth + 8), behavior: 'smooth' });
|
|
9807
9814
|
}
|
|
9808
9815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DaySelectorGridComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }, { token: PerformancesListEventsService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9809
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DaySelectorGridComponent, isStandalone: true, selector: "day-selector-grid", inputs: { displayMode: "displayMode" }, viewQueries: [{ propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true }], ngImport: i0, template: "@if (loadingData()) {\n <div class=\"day-selector-grid\">\n @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n <div class=\"day-selector-grid-skeleton-item\"></div>\n }\n </div>\n}\n\n@if (!loadingData() && days().length < 1) {\n <app-alert\n type=\"error\"\n text=\"No se encontraron funciones disponibles\"\n size=\"md\"\n [closeable]=\"false\"\n />\n}\n\n@if (days().length > 0) {\n <p class=\"day-selector-heading\">Selecciona un d\u00EDa</p>\n}\n\n@if (displayMode === 'carousel' && days().length > 0) {\n <div class=\"day-selector-carousel\">\n <button\n type=\"button\"\n (click)=\"scrollCarousel(-1)\"\n class=\"day-selector-carousel-arrow day-selector-carousel-arrow--left\"\n aria-label=\"Anterior\"\n >\n <i class=\"ri-arrow-left-s-line\"></i>\n </button>\n <div #carouselTrack class=\"day-selector-carousel-track\">\n @for (item of days(); track $index) {\n <button\n (click)=\"onToggle(item)\"\n class=\"day-selector-carousel-item\"\n [class.day-selector-item--active]=\"isDayActive(item)\"\n >\n <span class=\"day-selector-item-weekday\">\n {{ item.date | date: 'EEE' | uppercase }}\n </span>\n <span class=\"day-selector-item-day\">\n {{ item.date | date: 'dd' }}\n </span>\n <span class=\"day-selector-item-month\">\n {{ item.date | date: 'MMM' }}\n </span>\n <span class=\"day-selector-item-count\">\n {{ item.count | number: '1.0-2' }}\n </span>\n </button>\n }\n </div>\n <button\n type=\"button\"\n (click)=\"scrollCarousel(1)\"\n class=\"day-selector-carousel-arrow day-selector-carousel-arrow--right\"\n aria-label=\"Siguiente\"\n >\n <i class=\"ri-arrow-right-s-line\"></i>\n </button>\n </div>\n} @else {\n <div class=\"day-selector-grid\">\n @for (item of days(); track $index) {\n <button\n (click)=\"onToggle(item)\"\n class=\"day-selector-grid-item\"\n [class.day-selector-item--active]=\"isDayActive(item)\"\n >\n <span class=\"day-selector-item-weekday\">\n {{ item.date | date: 'EEE' | uppercase }}\n </span>\n <span class=\"day-selector-item-day\">\n {{ item.date | date: 'dd' }}\n </span>\n <span class=\"day-selector-item-month\">\n {{ item.date | date: 'MMM' }}\n </span>\n <span class=\"day-selector-item-count\">\n {{ item.count | number: '1.0-2' }}\n </span>\n </button>\n }\n </div>\n}\n", styles: [".day-selector-heading{font-size:11px;font-weight:600;letter-spacing:.25em;color:#6b7280;text-transform:uppercase}.day-selector-grid{margin-top:.75rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}@media(min-width:640px){.day-selector-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}.day-selector-grid-skeleton-item{height:6.5rem;width:100%;border-radius:.5rem;border:1px solid #262626;background-color:#171717;animation:day-selector-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.day-selector-carousel-item,.day-selector-grid-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:.5rem;border:1px solid #404040;background-color:#171717;color:#fff;gap:.375rem;padding:.75rem .5rem;transition:all .2s ease-in-out;color:#1f2937}.day-selector-carousel-item:hover,.day-selector-grid-item:hover{background-color:#262626}.day-selector-item--active{box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459;border-color:#ef4444;background-color:#ef4444;color:#fff}.day-selector-item--active:hover{background-color:#dc2626;color:#fff}.day-selector-item-weekday{font-size:10px;font-weight:600;letter-spacing:.05em;color:#a3a3a3}.day-selector-item--active .day-selector-item-weekday{color:#fff}.day-selector-item-day{color:#fff;font-size:1.5rem;font-weight:800;line-height:1}.day-selector-item-month{font-size:10px;font-weight:500;letter-spacing:.05em;color:#a3a3a3}.day-selector-item--active .day-selector-item-month{color:#fff}.day-selector-item-count{background-color:#a3a3a3;border-radius:9999px;color:#171717;font-size:10px;font-weight:700;padding:1px .375rem}.day-selector-item--active .day-selector-item-count{background-color:#fff;color:#ef4444}.day-selector-carousel{position:relative;margin-top:.75rem}.day-selector-carousel-arrow{align-items:center;background-color:#262626;border-radius:9999px;border:1px solid #e5e5e5;box-shadow:0 1px 2px #0000000d;color:#fff;cursor:pointer;display:flex;height:2rem;justify-content:center;position:absolute;top:50%;transition:background-color .2s ease-in-out;transform:translateY(-50%);width:2rem;z-index:10}.day-selector-carousel-arrow--left{left:0}.day-selector-carousel-arrow--right{right:0}.day-selector-carousel-arrow:hover{background-color:#404040}.day-selector-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;padding:.25rem 2.5rem;scroll-behavior:smooth}.day-selector-carousel-track::-webkit-scrollbar{display:none}.day-selector-carousel-item{scroll-snap-align:start;flex-shrink:0;width:7rem}@keyframes day-selector-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DaySelectorGridComponent, isStandalone: true, selector: "day-selector-grid", inputs: { displayMode: "displayMode", isAdmin: "isAdmin" }, viewQueries: [{ propertyName: "carouselTrack", first: true, predicate: ["carouselTrack"], descendants: true }], ngImport: i0, template: "@if (loadingData()) {\n <div class=\"day-selector-grid\">\n @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n <div class=\"day-selector-grid-skeleton-item\"></div>\n }\n </div>\n}\n\n@if (!loadingData() && days().length < 1) {\n <app-alert\n type=\"error\"\n text=\"No se encontraron funciones disponibles\"\n size=\"md\"\n [closeable]=\"false\"\n />\n}\n\n@if (days().length > 0) {\n <p class=\"day-selector-heading\">Selecciona un d\u00EDa</p>\n}\n\n@if (displayMode === 'carousel' && days().length > 0) {\n <div class=\"day-selector-carousel\">\n <button\n type=\"button\"\n (click)=\"scrollCarousel(-1)\"\n class=\"day-selector-carousel-arrow day-selector-carousel-arrow--left\"\n aria-label=\"Anterior\"\n >\n <i class=\"ri-arrow-left-s-line\"></i>\n </button>\n <div #carouselTrack class=\"day-selector-carousel-track\">\n @for (item of days(); track $index) {\n <button\n (click)=\"onToggle(item)\"\n class=\"day-selector-carousel-item\"\n [class.day-selector-item--active]=\"isDayActive(item)\"\n >\n <span class=\"day-selector-item-weekday\">\n {{ item.date | date: 'EEE' | uppercase }}\n </span>\n <span class=\"day-selector-item-day\">\n {{ item.date | date: 'dd' }}\n </span>\n <span class=\"day-selector-item-month\">\n {{ item.date | date: 'MMM' }}\n </span>\n <span class=\"day-selector-item-count\">\n {{ item.count | number: '1.0-2' }}\n </span>\n </button>\n }\n </div>\n <button\n type=\"button\"\n (click)=\"scrollCarousel(1)\"\n class=\"day-selector-carousel-arrow day-selector-carousel-arrow--right\"\n aria-label=\"Siguiente\"\n >\n <i class=\"ri-arrow-right-s-line\"></i>\n </button>\n </div>\n} @else {\n <div class=\"day-selector-grid\">\n @for (item of days(); track $index) {\n <button\n (click)=\"onToggle(item)\"\n class=\"day-selector-grid-item\"\n [class.day-selector-item--active]=\"isDayActive(item)\"\n >\n <span class=\"day-selector-item-weekday\">\n {{ item.date | date: 'EEE' | uppercase }}\n </span>\n <span class=\"day-selector-item-day\">\n {{ item.date | date: 'dd' }}\n </span>\n <span class=\"day-selector-item-month\">\n {{ item.date | date: 'MMM' }}\n </span>\n <span class=\"day-selector-item-count\">\n {{ item.count | number: '1.0-2' }}\n </span>\n </button>\n }\n </div>\n}\n", styles: [".day-selector-heading{font-size:11px;font-weight:600;letter-spacing:.25em;color:#6b7280;text-transform:uppercase}.day-selector-grid{margin-top:.75rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}@media(min-width:640px){.day-selector-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}.day-selector-grid-skeleton-item{height:6.5rem;width:100%;border-radius:.5rem;border:1px solid #262626;background-color:#171717;animation:day-selector-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.day-selector-carousel-item,.day-selector-grid-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:.5rem;border:1px solid #404040;background-color:#171717;color:#fff;gap:.375rem;padding:.75rem .5rem;transition:all .2s ease-in-out;color:#1f2937}.day-selector-carousel-item:hover,.day-selector-grid-item:hover{background-color:#262626}.day-selector-item--active{box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459;border-color:#ef4444;background-color:#ef4444;color:#fff}.day-selector-item--active:hover{background-color:#dc2626;color:#fff}.day-selector-item-weekday{font-size:10px;font-weight:600;letter-spacing:.05em;color:#a3a3a3}.day-selector-item--active .day-selector-item-weekday{color:#fff}.day-selector-item-day{color:#fff;font-size:1.5rem;font-weight:800;line-height:1}.day-selector-item-month{font-size:10px;font-weight:500;letter-spacing:.05em;color:#a3a3a3}.day-selector-item--active .day-selector-item-month{color:#fff}.day-selector-item-count{background-color:#a3a3a3;border-radius:9999px;color:#171717;font-size:10px;font-weight:700;padding:1px .375rem}.day-selector-item--active .day-selector-item-count{background-color:#fff;color:#ef4444}.day-selector-carousel{position:relative;margin-top:.75rem}.day-selector-carousel-arrow{align-items:center;background-color:#262626;border-radius:9999px;border:1px solid #e5e5e5;box-shadow:0 1px 2px #0000000d;color:#fff;cursor:pointer;display:flex;height:2rem;justify-content:center;position:absolute;top:50%;transition:background-color .2s ease-in-out;transform:translateY(-50%);width:2rem;z-index:10}.day-selector-carousel-arrow--left{left:0}.day-selector-carousel-arrow--right{right:0}.day-selector-carousel-arrow:hover{background-color:#404040}.day-selector-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.5rem;padding:.25rem 2.5rem;scroll-behavior:smooth}.day-selector-carousel-track::-webkit-scrollbar{display:none}.day-selector-carousel-item{scroll-snap-align:start;flex-shrink:0;width:7rem}@keyframes day-selector-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9810
9817
|
}
|
|
9811
9818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DaySelectorGridComponent, decorators: [{
|
|
9812
9819
|
type: Component,
|
|
@@ -9816,6 +9823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9816
9823
|
args: [PLATFORM_ID]
|
|
9817
9824
|
}] }, { type: PerformanceService }, { type: PerformancesListEventsService }, { type: ToastService }], propDecorators: { displayMode: [{
|
|
9818
9825
|
type: Input
|
|
9826
|
+
}], isAdmin: [{
|
|
9827
|
+
type: Input
|
|
9819
9828
|
}], carouselTrack: [{
|
|
9820
9829
|
type: ViewChild,
|
|
9821
9830
|
args: ['carouselTrack']
|
|
@@ -9827,6 +9836,7 @@ class PerformanceCardComponent {
|
|
|
9827
9836
|
linkText = 'Comprar entradas';
|
|
9828
9837
|
linkUrlFn;
|
|
9829
9838
|
linkQueryParams;
|
|
9839
|
+
PerformanceVisibilityType = PerformanceVisibilityType;
|
|
9830
9840
|
constructor(listEventService) {
|
|
9831
9841
|
this.listEventService = listEventService;
|
|
9832
9842
|
}
|
|
@@ -9840,11 +9850,11 @@ class PerformanceCardComponent {
|
|
|
9840
9850
|
return this.listEventService.selectedPerformance()?.id === this.card.id;
|
|
9841
9851
|
}
|
|
9842
9852
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardComponent, deps: [{ token: PerformancesListEventsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardComponent, isStandalone: true, selector: "performance-card", inputs: { card: "card", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n <div class=\"performance-card-image\">\n @if (card.show.images && card.show.images.length > 0) {\n <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n } @else {\n <img\n [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n class=\"performance-card-image-placeholder\"\n />\n }\n </div>\n\n <div class=\"performance-card-info\">\n <div class=\"performance-card-title\">\n {{ card.show.title }}\n </div>\n\n <div class=\"performance-card-datetime\">\n <span class=\"performance-card-date\">\n {{ card.start_time | date: `EEEE` | titlecase }}\n {{ card.start_time | date: `dd 'de' MMMM,` }}\n </span>\n\n <span class=\"performance-card-time\">\n {{ card.start_time | date: `hh:mm` }}\n </span>\n\n <span class=\"performance-card-meridiem\">\n {{ card.start_time | date: 'a' }}\n </span>\n </div>\n\n <ul class=\"performance-card-location\">\n @if (card.hall) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-armchair-line\"></i>\n <strong>Sala:</strong>\n <span>{{ card.hall.name }}</span>\n </li>\n }\n\n @if (card.venue) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-building-4-line\"></i>\n <strong>Teatro:</strong>\n <span>{{ card.venue.name }}</span>\n </li>\n }\n </ul>\n </div>\n\n <div class=\"performance-card-actions\">\n <app-badge\n [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n size=\"xs\"\n [color]=\"badgeColor\"\n />\n\n <div class=\"performance-card-price\">\n Desde\n\n <span class=\"performance-card-price-value\">\n ${{ card.zone_price_cheapest | number: '1.0-2' }}\n </span>\n </div>\n\n <app-link-button\n [style.width]=\"'100%'\"\n [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-coupon-line\"\n variant=\"primary\"\n size=\"xs\"\n />\n </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9853
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardComponent, isStandalone: true, selector: "performance-card", inputs: { card: "card", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n <div class=\"performance-card-image\">\n @if (card.show.images && card.show.images.length > 0) {\n <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n } @else {\n <img\n [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n class=\"performance-card-image-placeholder\"\n />\n }\n </div>\n\n <div class=\"performance-card-info\">\n <div class=\"performance-card-title\">\n {{ card.show.title }}\n\n @if (card.visibility_type === PerformanceVisibilityType.PRIVATE) {\n <app-badge\n text=\"Funci\u00F3n privada\"\n size=\"xs\"\n color=\"warning\"\n [title]=\"card.private_audience_label ?? ''\"\n />\n }\n </div>\n\n <div class=\"performance-card-datetime\">\n <span class=\"performance-card-date\">\n {{ card.start_time | date: `EEEE` | titlecase }}\n {{ card.start_time | date: `dd 'de' MMMM,` }}\n </span>\n\n <span class=\"performance-card-time\">\n {{ card.start_time | date: `hh:mm` }}\n </span>\n\n <span class=\"performance-card-meridiem\">\n {{ card.start_time | date: 'a' }}\n </span>\n </div>\n\n <ul class=\"performance-card-location\">\n @if (card.hall) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-armchair-line\"></i>\n <strong>Sala:</strong>\n <span>{{ card.hall.name }}</span>\n </li>\n }\n\n @if (card.venue) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-building-4-line\"></i>\n <strong>Teatro:</strong>\n <span>{{ card.venue.name }}</span>\n </li>\n }\n </ul>\n </div>\n\n <div class=\"performance-card-actions\">\n <app-badge\n [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n size=\"xs\"\n [color]=\"badgeColor\"\n />\n\n <div class=\"performance-card-price\">\n Desde\n\n <span class=\"performance-card-price-value\">\n ${{ card.zone_price_cheapest | number: '1.0-2' }}\n </span>\n </div>\n\n <app-link-button\n [style.width]=\"'100%'\"\n [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-coupon-line\"\n variant=\"primary\"\n size=\"xs\"\n />\n </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppLinkButtonComponent, selector: "app-link-button", inputs: ["disabled", "loading", "target", "text", "icon", "loadingText", "route", "queryParams", "size", "variant", "tooltip"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9844
9854
|
}
|
|
9845
9855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardComponent, decorators: [{
|
|
9846
9856
|
type: Component,
|
|
9847
|
-
args: [{ selector: 'performance-card', standalone: true, imports: [CommonModule, AppLinkButtonComponent, AppBadgeComponent], template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n <div class=\"performance-card-image\">\n @if (card.show.images && card.show.images.length > 0) {\n <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n } @else {\n <img\n [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n class=\"performance-card-image-placeholder\"\n />\n }\n </div>\n\n <div class=\"performance-card-info\">\n <div class=\"performance-card-title\">\n {{ card.show.title }}\n </div>\n\n <div class=\"performance-card-datetime\">\n <span class=\"performance-card-date\">\n {{ card.start_time | date: `EEEE` | titlecase }}\n {{ card.start_time | date: `dd 'de' MMMM,` }}\n </span>\n\n <span class=\"performance-card-time\">\n {{ card.start_time | date: `hh:mm` }}\n </span>\n\n <span class=\"performance-card-meridiem\">\n {{ card.start_time | date: 'a' }}\n </span>\n </div>\n\n <ul class=\"performance-card-location\">\n @if (card.hall) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-armchair-line\"></i>\n <strong>Sala:</strong>\n <span>{{ card.hall.name }}</span>\n </li>\n }\n\n @if (card.venue) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-building-4-line\"></i>\n <strong>Teatro:</strong>\n <span>{{ card.venue.name }}</span>\n </li>\n }\n </ul>\n </div>\n\n <div class=\"performance-card-actions\">\n <app-badge\n [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n size=\"xs\"\n [color]=\"badgeColor\"\n />\n\n <div class=\"performance-card-price\">\n Desde\n\n <span class=\"performance-card-price-value\">\n ${{ card.zone_price_cheapest | number: '1.0-2' }}\n </span>\n </div>\n\n <app-link-button\n [style.width]=\"'100%'\"\n [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-coupon-line\"\n variant=\"primary\"\n size=\"xs\"\n />\n </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"] }]
|
|
9857
|
+
args: [{ selector: 'performance-card', standalone: true, imports: [CommonModule, AppLinkButtonComponent, AppBadgeComponent], template: "<div class=\"performance-card\" [class.performance-card--selected]=\"isSelected()\">\n <div class=\"performance-card-image\">\n @if (card.show.images && card.show.images.length > 0) {\n <img [src]=\"card.show.images[0].full_url\" class=\"performance-card-image-img\" />\n } @else {\n <img\n [src]=\"`https://placehold.co/400x400/1f2937/737373?text=${card.show.title}`\"\n class=\"performance-card-image-placeholder\"\n />\n }\n </div>\n\n <div class=\"performance-card-info\">\n <div class=\"performance-card-title\">\n {{ card.show.title }}\n\n @if (card.visibility_type === PerformanceVisibilityType.PRIVATE) {\n <app-badge\n text=\"Funci\u00F3n privada\"\n size=\"xs\"\n color=\"warning\"\n [title]=\"card.private_audience_label ?? ''\"\n />\n }\n </div>\n\n <div class=\"performance-card-datetime\">\n <span class=\"performance-card-date\">\n {{ card.start_time | date: `EEEE` | titlecase }}\n {{ card.start_time | date: `dd 'de' MMMM,` }}\n </span>\n\n <span class=\"performance-card-time\">\n {{ card.start_time | date: `hh:mm` }}\n </span>\n\n <span class=\"performance-card-meridiem\">\n {{ card.start_time | date: 'a' }}\n </span>\n </div>\n\n <ul class=\"performance-card-location\">\n @if (card.hall) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-armchair-line\"></i>\n <strong>Sala:</strong>\n <span>{{ card.hall.name }}</span>\n </li>\n }\n\n @if (card.venue) {\n <li class=\"performance-card-location__item\">\n <i class=\"ri-building-4-line\"></i>\n <strong>Teatro:</strong>\n <span>{{ card.venue.name }}</span>\n </li>\n }\n </ul>\n </div>\n\n <div class=\"performance-card-actions\">\n <app-badge\n [text]=\"`${card.available_tickets_count} entrada(s) disponible(s)`\"\n size=\"xs\"\n [color]=\"badgeColor\"\n />\n\n <div class=\"performance-card-price\">\n Desde\n\n <span class=\"performance-card-price-value\">\n ${{ card.zone_price_cheapest | number: '1.0-2' }}\n </span>\n </div>\n\n <app-link-button\n [style.width]=\"'100%'\"\n [route]=\"linkUrlFn ? linkUrlFn(card) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-coupon-line\"\n variant=\"primary\"\n size=\"xs\"\n />\n </div>\n</div>\n", styles: [".performance-card{align-items:center;background-color:#171717;border-radius:.5rem;border:1px solid #404040;display:flex;flex-direction:column;gap:1rem;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease-in-out}@media(min-width:640px){.performance-card{flex-direction:row}}.performance-card:hover{border-color:#525252}.performance-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.performance-card--selected:hover{border-color:#ef4444}.performance-card-image{display:flex;border-radius:.125rem;overflow:hidden;height:auto;min-height:6rem;width:100%}@media(min-width:640px){.performance-card-image{height:6rem;width:6rem}}.performance-card-image-img{object-fit:contain;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.performance-card-image-placeholder{display:flex;background-color:#e5e7eb;height:6rem;width:100%}.performance-card-info{display:flex;flex-direction:column;flex:1;gap:.5rem;width:100%}.performance-card-title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:1}.performance-card--selected .performance-card-title{color:#f3f4f6}.performance-card-datetime{line-height:1}.performance-card-date{font-size:.875rem;color:#9ca3af}.performance-card-time{font-weight:800;font-size:1.125rem;color:#e5e7eb}.performance-card-meridiem{font-weight:800;font-size:.875rem;color:#fff}.performance-card--selected .performance-card-meridiem{color:#ef4444}.performance-card-price{font-size:1rem;color:#9ca3af;line-height:1}.performance-card-price-value{color:#d1d5db;font-weight:600}.performance-card-location{align-items:flex-start;display:flex;flex-flow:row wrap;gap:1rem;list-style:none;margin:0;padding:0;width:100%}.performance-card-location__item{color:#a3a3a3;align-self:center;display:flex;flex-flow:row nowrap;font-size:.75rem;justify-content:flex-start;gap:.25rem}.performance-card-actions{align-items:center;display:flex;flex-direction:column;gap:.5rem;width:100%}@media(min-width:640px){.performance-card-actions{max-width:200px}}\n"] }]
|
|
9848
9858
|
}], ctorParameters: () => [{ type: PerformancesListEventsService }], propDecorators: { card: [{
|
|
9849
9859
|
type: Input,
|
|
9850
9860
|
args: [{ required: true }]
|
|
@@ -9864,6 +9874,13 @@ class PerformanceCardListComponent {
|
|
|
9864
9874
|
linkText = 'Comprar entradas';
|
|
9865
9875
|
linkUrlFn;
|
|
9866
9876
|
linkQueryParams;
|
|
9877
|
+
/**
|
|
9878
|
+
* true cuando esta lista se usa desde el canal backoffice: en ese caso
|
|
9879
|
+
* también deben aparecer las funciones PRIVATE (nunca PEDAGOGIC, que
|
|
9880
|
+
* siempre usa su propio flujo). false (por defecto) es el canal
|
|
9881
|
+
* ecommerce, que solo ve funciones PUBLIC.
|
|
9882
|
+
*/
|
|
9883
|
+
isAdmin = false;
|
|
9867
9884
|
loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
|
|
9868
9885
|
performances = signal([], ...(ngDevMode ? [{ debugName: "performances" }] : []));
|
|
9869
9886
|
constructor(platformId, performanceService, listEventService, toastService) {
|
|
@@ -9899,7 +9916,9 @@ class PerformanceCardListComponent {
|
|
|
9899
9916
|
this.loadingData.set(false);
|
|
9900
9917
|
return;
|
|
9901
9918
|
}
|
|
9902
|
-
this.performanceService
|
|
9919
|
+
this.performanceService
|
|
9920
|
+
.fetchDailyPerformances({ date, show_id: showId }, this.isAdmin)
|
|
9921
|
+
.subscribe({
|
|
9903
9922
|
next: (response) => {
|
|
9904
9923
|
this.performances.set(response?.data?.performances ?? []);
|
|
9905
9924
|
this.loadingData.set(false);
|
|
@@ -9914,7 +9933,7 @@ class PerformanceCardListComponent {
|
|
|
9914
9933
|
return this.listEventService.selectedDay()?.date ?? null;
|
|
9915
9934
|
}
|
|
9916
9935
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardListComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceService }, { token: PerformancesListEventsService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9917
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardListComponent, isStandalone: true, selector: "performance-card-list", inputs: { linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "@if (selectedDayDate) {\n <p class=\"performance-card-list-heading\">\n <span>Funciones disponibles:</span>\n <span class=\"performance-card-list-heading-date\">\n el {{ selectedDayDate | date: \"EEEE d 'de' MMMM\" }}\n </span>\n </p>\n}\n\n<div class=\"performance-card-list\">\n @if (loadingData()) {\n @for (i of [1, 2]; track $index) {\n <div class=\"performance-card-list-skeleton\"></div>\n }\n }\n\n @for (card of performances(); track $index) {\n <performance-card\n [card]=\"card\"\n [linkQueryParams]=\"linkQueryParams\"\n [linkText]=\"linkText\"\n [linkUrlFn]=\"linkUrlFn\"\n />\n }\n</div>\n", styles: [".performance-card-list-heading{font-size:11px;font-weight:700;letter-spacing:.25em;color:#6b7280;text-transform:uppercase}.performance-card-list-heading-date{color:#6b7280}@media(prefers-color-scheme:dark){.performance-card-list-heading-date{color:#9ca3af}}.performance-card-list{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;width:100%}.performance-card-list-skeleton{height:10rem;width:100%;border-radius:.5rem;border:1px solid #e5e7eb;background-color:#f3f4f6;animation:performance-card-list-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-color-scheme:dark){.performance-card-list-skeleton{border-color:#ffffff1a;background-color:#ffffff08}}@keyframes performance-card-list-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "component", type: PerformanceCardComponent, selector: "performance-card", inputs: ["card", "linkText", "linkUrlFn", "linkQueryParams"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9936
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceCardListComponent, isStandalone: true, selector: "performance-card-list", inputs: { linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams", isAdmin: "isAdmin" }, ngImport: i0, template: "@if (selectedDayDate) {\n <p class=\"performance-card-list-heading\">\n <span>Funciones disponibles:</span>\n <span class=\"performance-card-list-heading-date\">\n el {{ selectedDayDate | date: \"EEEE d 'de' MMMM\" }}\n </span>\n </p>\n}\n\n<div class=\"performance-card-list\">\n @if (loadingData()) {\n @for (i of [1, 2]; track $index) {\n <div class=\"performance-card-list-skeleton\"></div>\n }\n }\n\n @for (card of performances(); track $index) {\n <performance-card\n [card]=\"card\"\n [linkQueryParams]=\"linkQueryParams\"\n [linkText]=\"linkText\"\n [linkUrlFn]=\"linkUrlFn\"\n />\n }\n</div>\n", styles: [".performance-card-list-heading{font-size:11px;font-weight:700;letter-spacing:.25em;color:#6b7280;text-transform:uppercase}.performance-card-list-heading-date{color:#6b7280}@media(prefers-color-scheme:dark){.performance-card-list-heading-date{color:#9ca3af}}.performance-card-list{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;width:100%}.performance-card-list-skeleton{height:10rem;width:100%;border-radius:.5rem;border:1px solid #e5e7eb;background-color:#f3f4f6;animation:performance-card-list-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media(prefers-color-scheme:dark){.performance-card-list-skeleton{border-color:#ffffff1a;background-color:#ffffff08}}@keyframes performance-card-list-pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "component", type: PerformanceCardComponent, selector: "performance-card", inputs: ["card", "linkText", "linkUrlFn", "linkQueryParams"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
9918
9937
|
}
|
|
9919
9938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceCardListComponent, decorators: [{
|
|
9920
9939
|
type: Component,
|
|
@@ -9928,6 +9947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9928
9947
|
type: Input
|
|
9929
9948
|
}], linkQueryParams: [{
|
|
9930
9949
|
type: Input
|
|
9950
|
+
}], isAdmin: [{
|
|
9951
|
+
type: Input
|
|
9931
9952
|
}] } });
|
|
9932
9953
|
|
|
9933
9954
|
class PerformanceStepperComponent {
|