tickera-angular-components 0.0.1-dev.69 → 0.0.1-dev.70
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.
|
@@ -4230,11 +4230,11 @@ class ShowCardComponent {
|
|
|
4230
4230
|
return new Date(date);
|
|
4231
4231
|
}
|
|
4232
4232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n <div class=\"show-card__image\">\n <app-badge\n [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n [backgroundColor]=\"this.showTypeColor.bg\"\n [textColor]=\"this.showTypeColor.text\"\n size=\"xs\"\n class=\"show-card__badge\"\n />\n\n @if (show.images && show.images.length > 0) {\n <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n } @else {\n <span class=\"show-card__image-placeholder\"></span>\n }\n </div>\n\n <div class=\"show-card__info\">\n <p class=\"show-card__title\">\n {{ show.title }}\n </p>\n\n @if (show.next_performance) {\n <div class=\"show-card__datetime\">\n <span class=\"show-card__datetime-title\">\n {{ 'show.next_performance' | transloco }}\n </span>\n\n <br />\n\n <span class=\"show-card__date\">\n {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n </span>\n </div>\n }\n\n @if (show.days_of_week && show.days_of_week.length > 0) {\n <div class=\"show-card__days\">\n @for (day of show.days_of_week; track $index) {\n <app-badge\n [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n @if (show.unique_start_times && show.unique_start_times.length > 0) {\n <div class=\"show-card__times\">\n @for (time of show.unique_start_times; track $index) {\n <app-badge\n [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n <app-link-button\n class=\"show-card__link\"\n [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-calendar-line\"\n variant=\"primary\"\n size=\"sm\"\n />\n </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#e5e7eb;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{display:flex;flex-flow:row wrap;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\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"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
|
|
4233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ShowCardComponent, isStandalone: true, selector: "show-card", inputs: { show: "show", linkText: "linkText", linkUrlFn: "linkUrlFn", linkQueryParams: "linkQueryParams" }, ngImport: i0, template: "<div class=\"show-card\">\n <div class=\"show-card__image\">\n <app-badge\n [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n [backgroundColor]=\"this.showTypeColor.bg\"\n [textColor]=\"this.showTypeColor.text\"\n size=\"xs\"\n class=\"show-card__badge\"\n />\n\n @if (show.images && show.images.length > 0) {\n <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n } @else {\n <span class=\"show-card__image-placeholder\"></span>\n }\n </div>\n\n <div class=\"show-card__info\">\n <p class=\"show-card__title\">\n {{ show.title }}\n </p>\n\n @if (show.next_performance) {\n <div class=\"show-card__datetime\">\n <span class=\"show-card__datetime-title\">\n {{ 'show.next_performance' | transloco }}\n </span>\n\n <br />\n\n <span class=\"show-card__date\">\n {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n </span>\n </div>\n }\n\n @if (show.days_of_week && show.days_of_week.length > 0) {\n <div class=\"show-card__days\">\n @for (day of show.days_of_week; track $index) {\n <app-badge\n [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n [bordered]=\"false\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n @if (show.unique_start_times && show.unique_start_times.length > 0) {\n <div class=\"show-card__times\">\n @for (time of show.unique_start_times; track $index) {\n <app-badge\n [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n [bordered]=\"false\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n <app-link-button\n class=\"show-card__link\"\n [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-calendar-line\"\n variant=\"primary\"\n size=\"sm\"\n />\n </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#e5e7eb;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{display:flex;flex-flow:row wrap;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\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"] }, { kind: "component", type: AppBadgeComponent, selector: "app-badge", inputs: ["text", "color", "size", "bordered", "backgroundColor", "textColor"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
|
|
4234
4234
|
}
|
|
4235
4235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowCardComponent, decorators: [{
|
|
4236
4236
|
type: Component,
|
|
4237
|
-
args: [{ selector: 'show-card', standalone: true, imports: [CommonModule, AppLinkButtonComponent, AppBadgeComponent, TranslocoModule], template: "<div class=\"show-card\">\n <div class=\"show-card__image\">\n <app-badge\n [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n [backgroundColor]=\"this.showTypeColor.bg\"\n [textColor]=\"this.showTypeColor.text\"\n size=\"xs\"\n class=\"show-card__badge\"\n />\n\n @if (show.images && show.images.length > 0) {\n <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n } @else {\n <span class=\"show-card__image-placeholder\"></span>\n }\n </div>\n\n <div class=\"show-card__info\">\n <p class=\"show-card__title\">\n {{ show.title }}\n </p>\n\n @if (show.next_performance) {\n <div class=\"show-card__datetime\">\n <span class=\"show-card__datetime-title\">\n {{ 'show.next_performance' | transloco }}\n </span>\n\n <br />\n\n <span class=\"show-card__date\">\n {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n </span>\n </div>\n }\n\n @if (show.days_of_week && show.days_of_week.length > 0) {\n <div class=\"show-card__days\">\n @for (day of show.days_of_week; track $index) {\n <app-badge\n [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n @if (show.unique_start_times && show.unique_start_times.length > 0) {\n <div class=\"show-card__times\">\n @for (time of show.unique_start_times; track $index) {\n <app-badge\n [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n <app-link-button\n class=\"show-card__link\"\n [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-calendar-line\"\n variant=\"primary\"\n size=\"sm\"\n />\n </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#e5e7eb;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{display:flex;flex-flow:row wrap;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"] }]
|
|
4237
|
+
args: [{ selector: 'show-card', standalone: true, imports: [CommonModule, AppLinkButtonComponent, AppBadgeComponent, TranslocoModule], template: "<div class=\"show-card\">\n <div class=\"show-card__image\">\n <app-badge\n [text]=\"`show.showTypes.${show.show_type}` | transloco\"\n [backgroundColor]=\"this.showTypeColor.bg\"\n [textColor]=\"this.showTypeColor.text\"\n size=\"xs\"\n class=\"show-card__badge\"\n />\n\n @if (show.images && show.images.length > 0) {\n <img [src]=\"show.images[0].full_url\" class=\"show-card__image-img\" />\n } @else {\n <span class=\"show-card__image-placeholder\"></span>\n }\n </div>\n\n <div class=\"show-card__info\">\n <p class=\"show-card__title\">\n {{ show.title }}\n </p>\n\n @if (show.next_performance) {\n <div class=\"show-card__datetime\">\n <span class=\"show-card__datetime-title\">\n {{ 'show.next_performance' | transloco }}\n </span>\n\n <br />\n\n <span class=\"show-card__date\">\n {{ show.next_performance.start_time | date: `EEEE` | titlecase }}\n {{ show.next_performance.start_time | date: `dd 'de' MMMM, hh:mm a` }}\n </span>\n </div>\n }\n\n @if (show.days_of_week && show.days_of_week.length > 0) {\n <div class=\"show-card__days\">\n @for (day of show.days_of_week; track $index) {\n <app-badge\n [text]=\"`common.daysOfWeekByNumber.${day}` | transloco\"\n [bordered]=\"false\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n @if (show.unique_start_times && show.unique_start_times.length > 0) {\n <div class=\"show-card__times\">\n @for (time of show.unique_start_times; track $index) {\n <app-badge\n [text]=\"dateService.formatDate(formatTimeDate(time), 'hh:mm a')\"\n [bordered]=\"false\"\n size=\"xs\"\n backgroundColor=\"#525252\"\n textColor=\"#e5e5e5\"\n />\n }\n </div>\n }\n\n <app-link-button\n class=\"show-card__link\"\n [route]=\"linkUrlFn ? linkUrlFn(show) : '#'\"\n [queryParams]=\"linkQueryParams ?? {}\"\n [text]=\"linkText\"\n icon=\"ri-calendar-line\"\n variant=\"primary\"\n size=\"sm\"\n />\n </div>\n</div>\n", styles: [".show-card{align-items:center;background-color:#171717;border-radius:.5rem;display:flex;flex-direction:column;gap:0;justify-content:space-between;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;max-width:320px;width:100%}.show-card:hover{border-color:#525252}.show-card--selected{background-color:#262626;border-color:#ef4444;box-shadow:0 0 0 1px #ef444480,0 0 16px #ef444459}.show-card--selected:hover{border-color:#ef4444}.show-card__image{aspect-ratio:1/1;display:flex;border-radius:.125rem;overflow:hidden;position:relative;width:100%}.show-card__image-img{object-fit:cover;object-position:center;max-height:100%;max-width:100%;margin-left:auto;margin-right:auto}.show-card__image-placeholder{display:flex;background-color:#e5e7eb;height:100%;width:100%}.show-card__badge{position:absolute;left:1rem;top:1rem}.show-card__info{display:flex;flex-direction:column;flex:1;gap:.5rem;padding:1.5rem;width:100%}.show-card__title{color:#e5e7eb;font-size:1.5rem;font-weight:800;line-height:130%;margin:0}.show-card__datetime{line-height:1}.show-card__datetime-title{color:#a3a3a3;font-size:.75rem;font-weight:700;width:100%}.show-card__date{color:#a3a3a3;font-size:.875rem}.show-card__days,.show-card__times{display:flex;flex-flow:row wrap;gap:.25rem}.show-card__times{margin-bottom:.5rem}.show-card__link{margin-top:auto}\n"] }]
|
|
4238
4238
|
}], propDecorators: { show: [{
|
|
4239
4239
|
type: Input,
|
|
4240
4240
|
args: [{ required: true }]
|