@camp2gether/c2g-ui 0.0.8 → 0.0.9
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/fesm2022/camp2gether-c2g-ui-charts.mjs +12 -12
- package/fesm2022/camp2gether-c2g-ui-charts.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-layout.mjs +84 -84
- package/fesm2022/camp2gether-c2g-ui-layout.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-maps.mjs +8 -8
- package/fesm2022/camp2gether-c2g-ui-maps.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-presets.mjs +164 -164
- package/fesm2022/camp2gether-c2g-ui-presets.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-theme.mjs +6 -6
- package/fesm2022/camp2gether-c2g-ui-theme.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui.mjs +342 -86
- package/fesm2022/camp2gether-c2g-ui.mjs.map +1 -1
- package/index.d.ts +61 -2
- package/package.json +1 -1
|
@@ -780,13 +780,13 @@ class PackingListItemComponent {
|
|
|
780
780
|
const owner = this.members().find(member => member.id === ownerId);
|
|
781
781
|
return owner?.name ?? 'Privat';
|
|
782
782
|
}
|
|
783
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PackingListItemComponent, isStandalone: true, selector: "c2g-packing-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: true, transformFunction: null }, selectedMemberIds: { classPropertyName: "selectedMemberIds", publicName: "selectedMemberIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChecked: "itemChecked", itemAssigned: "itemAssigned", itemDeleted: "itemDeleted", itemEditRequested: "itemEditRequested", personalItemToggled: "personalItemToggled", memberOverlayRequested: "memberOverlayRequested" }, ngImport: i0, template: "<div class=\"c2g-pl-item\" [class.c2g-pl-item--packed]=\"isPacked()\">\n\n <div class=\"c2g-pl-item__row\">\n\n <!-- Solo: echte Checkbox -->\n @if (permissions().isSolo) {\n <button\n class=\"c2g-pl-item__check\"\n [class.c2g-pl-item__check--done]=\"isPacked()\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-pressed]=\"isPacked()\"\n [attr.aria-label]=\"isPacked() ? 'Als ungepackt markieren' : 'Als gepackt markieren'\"\n (click)=\"onSoloToggle(!isPacked())\">\n @if (isPacked()) {\n <span class=\"c2g-pl-item__check-mark\" aria-hidden=\"true\">\u2713</span>\n }\n </button>\n } @else {\n <!-- Gruppen-Item: farbiger Fortschritts-Dot -->\n <span\n class=\"c2g-pl-item__dot\"\n [class.c2g-pl-item__dot--danger]=\"progressTone() === 'danger'\"\n [class.c2g-pl-item__dot--warning]=\"progressTone() === 'warning'\"\n [class.c2g-pl-item__dot--success]=\"progressTone() === 'success'\"\n [attr.title]=\"progressRatioText() + ' bereit'\"\n aria-hidden=\"true\">\n </span>\n }\n\n <!-- Body -->\n <div class=\"c2g-pl-item__body\">\n\n <!-- Zeile 1: Name + Tags + Mengen-Badge -->\n <div class=\"c2g-pl-item__title-row\">\n <span class=\"c2g-pl-item__name\">{{ item().name }}</span>\n <div class=\"c2g-pl-item__tags\">\n @if (item().essential) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--essential\">Pflicht</span>\n }\n @if (item().weather) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--weather\">Wetter</span>\n }\n @if (item().visibility === 'private') {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--private\">\uD83D\uDD12 {{ privateItemOwnerLabel() }}</span>\n }\n </div>\n\n @if (quantityBadge(); as badge) {\n <c2g-badge\n class=\"c2g-pl-item__qty-badge\"\n [value]=\"badge.value\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [attr.aria-label]=\"'Gepackt: ' + badge.value\">\n </c2g-badge>\n }\n </div>\n\n <!-- Zeile 2: Mitglieder / Avatare -->\n @if (!permissions().isSolo) {\n <div class=\"c2g-pl-item__members-row\">\n\n @if (item().visibility === 'shared') {\n <!-- Assigned-Avatare -->\n @for (member of checkedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Bearbeiten'\"\n (click)=\"onSharedAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (hiddenCheckedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ hiddenCheckedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty state -->\n @if (checkedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Noch niemand eingetragen</span>\n }\n\n <!-- + Eintragen Button -->\n @if (canSelfAssignShared()) {\n <button\n class=\"c2g-pl-item__join-btn\"\n [class.c2g-pl-item__join-btn--active]=\"selfAssignedToShared()\"\n type=\"button\"\n (click)=\"onAssignMeToggle()\">\n {{ joinBtnLabel() }}\n </button>\n }\n\n } @else if (item().visibility === 'personal') {\n <!-- Personal: wer hat es f\u00FCr sich -->\n @for (member of personalAssignedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"!canManagePersonalAssignments()\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Entfernen'\"\n (click)=\"onPersonalAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (personalHiddenAssignedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ personalHiddenAssignedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (personalAssignedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Nicht zugewiesen</span>\n }\n\n @if (canManagePersonalAssignments()) {\n <button class=\"c2g-pl-item__join-btn\" type=\"button\" (click)=\"openPersonalAssignDialog()\">\n + Zuweisen\n </button>\n }\n }\n\n </div>\n }\n\n </div>\n\n <!-- Aktions-Spalte: \u22EF Men\u00FC -->\n @if (canShowAssignCta() || canEditOrDeleteItem()) {\n <div class=\"c2g-pl-item__cta\">\n <button\n class=\"c2g-pl-item__menu-trigger\"\n type=\"button\"\n aria-label=\"Aktionen\"\n [attr.aria-expanded]=\"ctaMenuOpen()\"\n (click)=\"toggleCtaMenu()\">\n \u22EF\n </button>\n\n @if (ctaMenuOpen()) {\n <div class=\"c2g-pl-item__menu\" role=\"menu\">\n @if (canShowAssignCta()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuAssign()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDC64</span> {{ isPlanner() ? 'Zuweisen' : 'Einpacken' }}\n </button>\n }\n @if (canEditOrDeleteItem()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuEdit()\">\n <span class=\"c2g-pl-item__menu-icon\">\u270F\uFE0F</span> Bearbeiten\n </button>\n <div class=\"c2g-pl-item__menu-divider\"></div>\n <button class=\"c2g-pl-item__menu-item c2g-pl-item__menu-item--danger\" type=\"button\" role=\"menuitem\" (click)=\"onMenuDelete()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDDD1</span> L\u00F6schen\n </button>\n }\n </div>\n }\n </div>\n }\n\n </div>\n\n <!-- Quantity Picker (Shared: eigene Menge) -->\n @if (quantityPickerOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"group\" aria-label=\"Menge w\u00E4hlen\">\n <span class=\"c2g-pl-item__picker-label\">{{ pickerLabel() }}</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseSelfAssignQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ quantityPickerValue() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseSelfAssignQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmSelfAssignQuantity()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"cancelSelfAssignQuantity()\">Abbrechen</button>\n </div>\n }\n\n <!-- Delegate Dialog (Organizer weist anderem zu) -->\n @if (delegateDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <span class=\"c2g-pl-item__picker-label\">{{ delegatePickerLabel() }}</span>\n <select class=\"c2g-pl-item__select\" [value]=\"delegateMemberId() ?? ''\" (change)=\"onDelegateMemberChange($event)\">\n @for (member of delegateCandidates(); track member.id) {\n <option [value]=\"member.id\">{{ member.name }}</option>\n }\n </select>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseDelegateQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ delegateQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseDelegateQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmDelegateAssignment()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeDelegateDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Avatar Dialog (Menge eines Zugewiesenen \u00E4ndern) -->\n @if (avatarDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Zuteilung bearbeiten\">\n <span class=\"c2g-pl-item__picker-label\">Menge anpassen \u2013 0 zum Entfernen</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseAvatarDialogQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ avatarDialogQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseAvatarDialogQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmAvatarDialogUpdate()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeAvatarDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Personal Assign Panel -->\n @if (personalAssignDialogOpen()) {\n <div class=\"c2g-pl-item__assign-panel\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <input\n class=\"c2g-pl-item__assign-search\"\n type=\"search\"\n [value]=\"personalAssignSearch()\"\n placeholder=\"Mitglied suchen...\"\n (input)=\"onPersonalAssignSearch($event)\" />\n <div class=\"c2g-pl-item__assign-list\">\n @for (member of filteredPersonalAssignableMembers(); track member.id) {\n <button\n class=\"c2g-pl-item__assign-option\"\n [class.c2g-pl-item__assign-option--active]=\"personalAssignMemberId() === member.id\"\n type=\"button\"\n (click)=\"selectPersonalAssignMember(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\">\n </c2g-avatar>\n <span>{{ member.name }}</span>\n </button>\n }\n </div>\n <div class=\"c2g-pl-item__assign-footer\">\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" [disabled]=\"!selectedPersonalAssignMember()\" (click)=\"confirmPersonalAssignment()\">Zuweisen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closePersonalAssignDialog()\">Abbrechen</button>\n </div>\n </div>\n }\n\n <!-- Hinweis -->\n @if (item().hint) {\n <p class=\"c2g-pl-item__hint\">{{ item().hint }}</p>\n }\n\n <!-- Shared: Mengen-Chips -->\n @if (sharedCountChips().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (chip of sharedCountChips(); track chip.key) {\n <c2g-badge [value]=\"chip.text\" [tone]=\"chip.tone\" variant=\"subtle\" size=\"sm\"></c2g-badge>\n }\n </div>\n }\n\n <!-- Personal: Status-Chips -->\n @if (personalStatusBadges().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (badge of personalStatusBadges(); track badge.key) {\n <c2g-badge\n [value]=\"badge.text\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [dot]=\"true\"\n [dotColor]=\"badge.dotColor\">\n </c2g-badge>\n }\n </div>\n }\n\n\n</div>\n", styles: [".c2g-pl-item{border:1px solid var(--c2g-color-outline-variant);border-radius:.625rem;padding:.65rem .75rem;background:var(--c2g-color-surface);display:grid;gap:.45rem;position:relative;transition:background .15s ease,border-color .15s ease}.c2g-pl-item--packed{background:color-mix(in srgb,#16a34a 6%,var(--c2g-color-surface));border-color:color-mix(in srgb,#16a34a 25%,transparent)}.c2g-pl-item--packed .c2g-pl-item__name{color:var(--c2g-color-text-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,#16a34a 50%,transparent)}.c2g-pl-item__row{display:grid;grid-template-columns:.875rem minmax(0,1fr) auto;gap:.6rem;align-items:start}.c2g-pl-item__check{width:1.1rem;height:1.1rem;border:2px solid var(--c2g-color-outline);border-radius:.25rem;background:var(--c2g-color-surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-top:.15rem;flex-shrink:0;transition:background .12s,border-color .12s}.c2g-pl-item__check:hover:not(:disabled){border-color:var(--c2g-color-secondary-dark)}.c2g-pl-item__check--done{background:var(--c2g-color-secondary-dark, #2d6a4f);border-color:var(--c2g-color-secondary-dark, #2d6a4f)}.c2g-pl-item__check-mark{color:#fff;font-size:.65rem;font-weight:800;line-height:1}.c2g-pl-item__dot{width:.5rem;height:.5rem;border-radius:50%;margin-top:.35rem;flex-shrink:0;background:var(--c2g-color-outline)}.c2g-pl-item__dot--danger{background:#ef4444}.c2g-pl-item__dot--warning{background:#f59e0b}.c2g-pl-item__dot--success{background:#16a34a}.c2g-pl-item__body{display:grid;gap:.4rem;min-width:0}.c2g-pl-item__title-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0}.c2g-pl-item__qty-badge{margin-left:auto;flex-shrink:0}.c2g-pl-item__name{font-weight:600;font-size:.875rem;color:var(--c2g-color-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}.c2g-pl-item__tags{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap;flex-shrink:0}.c2g-pl-item__tag{font-size:.65rem;font-weight:500;border-radius:99px;padding:.1rem .4rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__tag--essential{background:color-mix(in srgb,#f59e0b 15%,transparent);color:#92400e}.c2g-pl-item__tag--weather{background:color-mix(in srgb,#3b82f6 12%,transparent);color:#1d4ed8}.c2g-pl-item__tag--private{background:var(--c2g-color-primary-container);color:var(--c2g-color-on-primary-container)}.c2g-pl-item__members-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}.c2g-pl-item__avatar-btn{border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;display:inline-flex}.c2g-pl-item__avatar-btn:disabled{cursor:default;opacity:.85}.c2g-pl-item__avatar-btn:not(:disabled):hover{transform:translateY(-1px);transition:transform .1s}.c2g-pl-item__more-wrap{position:relative;display:inline-flex}.c2g-pl-item__more{height:1.75rem;min-width:1.75rem;padding:0 .4rem;border-radius:99px;border:1px dashed var(--c2g-color-outline);background:transparent;color:var(--c2g-color-text-muted);font-size:.72rem;font-weight:600;cursor:pointer}.c2g-pl-item__more:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__empty{font-size:.75rem;color:var(--c2g-color-text-muted);font-style:italic}.c2g-pl-item__join-btn{display:inline-flex;align-items:center;height:1.75rem;padding:0 .6rem;border-radius:99px;border:1.5px dashed var(--c2g-color-secondary-dark);background:transparent;color:var(--c2g-color-secondary-dark);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .1s}.c2g-pl-item__join-btn:hover{background:var(--c2g-color-secondary-container)}.c2g-pl-item__join-btn--active{border-style:solid;background:var(--c2g-color-secondary-container)}.c2g-pl-item__cta{position:relative;display:inline-grid;justify-items:end}.c2g-pl-item__menu-trigger{width:1.75rem;height:1.75rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;background:transparent;color:var(--c2g-color-text-muted);font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__menu-trigger:hover{background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-primary)}.c2g-pl-item__menu{position:absolute;top:calc(100% + .3rem);right:0;min-width:10rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-surface);box-shadow:0 8px 24px #152b2124;padding:.3rem;display:grid;gap:.1rem;z-index:20}.c2g-pl-item__menu-item{display:flex;align-items:center;gap:.45rem;border:0;background:transparent;color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2rem;padding:.25rem .55rem;font-size:.82rem;text-align:left;cursor:pointer;width:100%}.c2g-pl-item__menu-item:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__menu-item--danger{color:var(--c2g-color-error)}.c2g-pl-item__menu-icon{font-size:.85rem;line-height:1;flex-shrink:0}.c2g-pl-item__menu-divider{height:1px;background:var(--c2g-color-outline-variant);margin:.15rem .3rem}.c2g-pl-item__picker{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;padding:.45rem .6rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.5rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__picker-label{font-size:.75rem;color:var(--c2g-color-text-muted);width:100%}.c2g-pl-item__qty-btn{width:1.6rem;height:1.6rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:1.1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__qty-val{min-width:2rem;text-align:center;font-weight:700;font-size:.85rem}.c2g-pl-item__select{height:1.7rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.78rem;padding:0 .5rem}.c2g-pl-item__qty-ok{height:1.7rem;padding:0 .65rem;border-radius:.35rem;border:1px solid var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container);color:var(--c2g-color-secondary-dark);font-size:.76rem;font-weight:600;cursor:pointer}.c2g-pl-item__qty-ok:disabled{opacity:.45;cursor:not-allowed}.c2g-pl-item__qty-cancel{height:1.7rem;padding:0 .5rem;border-radius:.35rem;border:1px solid transparent;background:transparent;color:var(--c2g-color-text-muted);font-size:.76rem;cursor:pointer}.c2g-pl-item__qty-cancel:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-panel{display:grid;gap:.35rem;padding:.55rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__assign-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.82rem;padding:0 .65rem}.c2g-pl-item__assign-list{display:grid;gap:.2rem;max-height:10rem;overflow:auto}.c2g-pl-item__assign-option{display:flex;align-items:center;gap:.55rem;border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2.2rem;padding:.3rem .6rem;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__assign-option:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-option--active{border-color:var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container)}.c2g-pl-item__assign-footer{display:flex;gap:.35rem}.c2g-pl-item__hint{margin:0;font-size:.78rem;color:var(--c2g-color-text-muted)}.c2g-pl-item__chip-row{display:flex;flex-wrap:wrap;gap:.3rem}.c2g-pl-item__overlay{position:absolute;top:calc(100% + .35rem);left:0;width:min(22rem,92vw);border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);border-radius:.7rem;box-shadow:0 12px 32px #152b212e;padding:.6rem;display:grid;gap:.4rem;z-index:30}.c2g-pl-item__overlay-head{display:flex;align-items:center;justify-content:space-between;font-size:.88rem;font-weight:600}.c2g-pl-item__overlay-close{border:0;background:transparent;cursor:pointer;color:var(--c2g-color-text-secondary);font-size:.9rem;padding:.1rem .25rem;border-radius:.3rem}.c2g-pl-item__overlay-close:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;padding:0 .6rem;font-size:.82rem}.c2g-pl-item__overlay-list{max-height:12rem;overflow:auto;display:grid;gap:.2rem}.c2g-pl-item__overlay-row{border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);border-radius:.45rem;padding:.4rem .55rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__overlay-row:hover:not(:disabled){background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-row:disabled{cursor:not-allowed;opacity:.55}.c2g-pl-item__overlay-status{font-size:.7rem;border-radius:99px;padding:.1rem .45rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__overlay-status--done{background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d}@media(max-width:480px){.c2g-pl-item__overlay{left:0;right:auto;width:calc(100vw - 2rem)}}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "c2g-avatar", inputs: ["name", "initials", "imageUrl", "ariaLabel", "size", "backgroundColor", "textColor", "ringTone", "ringColor", "clickable", "disabled", "badge"], outputs: ["avatarClick"] }, { kind: "component", type: BadgeComponent, selector: "c2g-badge", inputs: ["value", "tone", "variant", "size", "max", "dot", "dotOnly", "dotRing", "dotPulse", "dotColor", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
783
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListItemComponent, isStandalone: true, selector: "c2g-packing-list-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: true, transformFunction: null }, selectedMemberIds: { classPropertyName: "selectedMemberIds", publicName: "selectedMemberIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChecked: "itemChecked", itemAssigned: "itemAssigned", itemDeleted: "itemDeleted", itemEditRequested: "itemEditRequested", personalItemToggled: "personalItemToggled", memberOverlayRequested: "memberOverlayRequested" }, ngImport: i0, template: "<div class=\"c2g-pl-item\" [class.c2g-pl-item--packed]=\"isPacked()\">\n\n <div class=\"c2g-pl-item__row\">\n\n <!-- Solo: echte Checkbox -->\n @if (permissions().isSolo) {\n <button\n class=\"c2g-pl-item__check\"\n [class.c2g-pl-item__check--done]=\"isPacked()\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-pressed]=\"isPacked()\"\n [attr.aria-label]=\"isPacked() ? 'Als ungepackt markieren' : 'Als gepackt markieren'\"\n (click)=\"onSoloToggle(!isPacked())\">\n @if (isPacked()) {\n <span class=\"c2g-pl-item__check-mark\" aria-hidden=\"true\">\u2713</span>\n }\n </button>\n } @else {\n <!-- Gruppen-Item: farbiger Fortschritts-Dot -->\n <span\n class=\"c2g-pl-item__dot\"\n [class.c2g-pl-item__dot--danger]=\"progressTone() === 'danger'\"\n [class.c2g-pl-item__dot--warning]=\"progressTone() === 'warning'\"\n [class.c2g-pl-item__dot--success]=\"progressTone() === 'success'\"\n [attr.title]=\"progressRatioText() + ' bereit'\"\n aria-hidden=\"true\">\n </span>\n }\n\n <!-- Body -->\n <div class=\"c2g-pl-item__body\">\n\n <!-- Zeile 1: Name + Tags + Mengen-Badge -->\n <div class=\"c2g-pl-item__title-row\">\n <span class=\"c2g-pl-item__name\">{{ item().name }}</span>\n <div class=\"c2g-pl-item__tags\">\n @if (item().essential) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--essential\">Pflicht</span>\n }\n @if (item().weather) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--weather\">Wetter</span>\n }\n @if (item().visibility === 'private') {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--private\">\uD83D\uDD12 {{ privateItemOwnerLabel() }}</span>\n }\n </div>\n\n @if (quantityBadge(); as badge) {\n <c2g-badge\n class=\"c2g-pl-item__qty-badge\"\n [value]=\"badge.value\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [attr.aria-label]=\"'Gepackt: ' + badge.value\">\n </c2g-badge>\n }\n </div>\n\n <!-- Zeile 2: Mitglieder / Avatare -->\n @if (!permissions().isSolo) {\n <div class=\"c2g-pl-item__members-row\">\n\n @if (item().visibility === 'shared') {\n <!-- Assigned-Avatare -->\n @for (member of checkedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Bearbeiten'\"\n (click)=\"onSharedAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (hiddenCheckedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ hiddenCheckedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty state -->\n @if (checkedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Noch niemand eingetragen</span>\n }\n\n <!-- + Eintragen Button -->\n @if (canSelfAssignShared()) {\n <button\n class=\"c2g-pl-item__join-btn\"\n [class.c2g-pl-item__join-btn--active]=\"selfAssignedToShared()\"\n type=\"button\"\n (click)=\"onAssignMeToggle()\">\n {{ joinBtnLabel() }}\n </button>\n }\n\n } @else if (item().visibility === 'personal') {\n <!-- Personal: wer hat es f\u00FCr sich -->\n @for (member of personalAssignedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"!canManagePersonalAssignments()\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Entfernen'\"\n (click)=\"onPersonalAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (personalHiddenAssignedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ personalHiddenAssignedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (personalAssignedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Nicht zugewiesen</span>\n }\n\n @if (canManagePersonalAssignments()) {\n <button class=\"c2g-pl-item__join-btn\" type=\"button\" (click)=\"openPersonalAssignDialog()\">\n + Zuweisen\n </button>\n }\n }\n\n </div>\n }\n\n </div>\n\n <!-- Aktions-Spalte: \u22EF Men\u00FC -->\n @if (canShowAssignCta() || canEditOrDeleteItem()) {\n <div class=\"c2g-pl-item__cta\">\n <button\n class=\"c2g-pl-item__menu-trigger\"\n type=\"button\"\n aria-label=\"Aktionen\"\n [attr.aria-expanded]=\"ctaMenuOpen()\"\n (click)=\"toggleCtaMenu()\">\n \u22EF\n </button>\n\n @if (ctaMenuOpen()) {\n <div class=\"c2g-pl-item__menu\" role=\"menu\">\n @if (canShowAssignCta()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuAssign()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDC64</span> {{ isPlanner() ? 'Zuweisen' : 'Einpacken' }}\n </button>\n }\n @if (canEditOrDeleteItem()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuEdit()\">\n <span class=\"c2g-pl-item__menu-icon\">\u270F\uFE0F</span> Bearbeiten\n </button>\n <div class=\"c2g-pl-item__menu-divider\"></div>\n <button class=\"c2g-pl-item__menu-item c2g-pl-item__menu-item--danger\" type=\"button\" role=\"menuitem\" (click)=\"onMenuDelete()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDDD1</span> L\u00F6schen\n </button>\n }\n </div>\n }\n </div>\n }\n\n </div>\n\n <!-- Quantity Picker (Shared: eigene Menge) -->\n @if (quantityPickerOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"group\" aria-label=\"Menge w\u00E4hlen\">\n <span class=\"c2g-pl-item__picker-label\">{{ pickerLabel() }}</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseSelfAssignQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ quantityPickerValue() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseSelfAssignQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmSelfAssignQuantity()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"cancelSelfAssignQuantity()\">Abbrechen</button>\n </div>\n }\n\n <!-- Delegate Dialog (Organizer weist anderem zu) -->\n @if (delegateDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <span class=\"c2g-pl-item__picker-label\">{{ delegatePickerLabel() }}</span>\n <select class=\"c2g-pl-item__select\" [value]=\"delegateMemberId() ?? ''\" (change)=\"onDelegateMemberChange($event)\">\n @for (member of delegateCandidates(); track member.id) {\n <option [value]=\"member.id\">{{ member.name }}</option>\n }\n </select>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseDelegateQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ delegateQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseDelegateQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmDelegateAssignment()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeDelegateDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Avatar Dialog (Menge eines Zugewiesenen \u00E4ndern) -->\n @if (avatarDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Zuteilung bearbeiten\">\n <span class=\"c2g-pl-item__picker-label\">Menge anpassen \u2013 0 zum Entfernen</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseAvatarDialogQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ avatarDialogQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseAvatarDialogQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmAvatarDialogUpdate()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeAvatarDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Personal Assign Panel -->\n @if (personalAssignDialogOpen()) {\n <div class=\"c2g-pl-item__assign-panel\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <input\n class=\"c2g-pl-item__assign-search\"\n type=\"search\"\n [value]=\"personalAssignSearch()\"\n placeholder=\"Mitglied suchen...\"\n (input)=\"onPersonalAssignSearch($event)\" />\n <div class=\"c2g-pl-item__assign-list\">\n @for (member of filteredPersonalAssignableMembers(); track member.id) {\n <button\n class=\"c2g-pl-item__assign-option\"\n [class.c2g-pl-item__assign-option--active]=\"personalAssignMemberId() === member.id\"\n type=\"button\"\n (click)=\"selectPersonalAssignMember(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\">\n </c2g-avatar>\n <span>{{ member.name }}</span>\n </button>\n }\n </div>\n <div class=\"c2g-pl-item__assign-footer\">\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" [disabled]=\"!selectedPersonalAssignMember()\" (click)=\"confirmPersonalAssignment()\">Zuweisen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closePersonalAssignDialog()\">Abbrechen</button>\n </div>\n </div>\n }\n\n <!-- Hinweis -->\n @if (item().hint) {\n <p class=\"c2g-pl-item__hint\">{{ item().hint }}</p>\n }\n\n <!-- Shared: Mengen-Chips -->\n @if (sharedCountChips().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (chip of sharedCountChips(); track chip.key) {\n <c2g-badge [value]=\"chip.text\" [tone]=\"chip.tone\" variant=\"subtle\" size=\"sm\"></c2g-badge>\n }\n </div>\n }\n\n <!-- Personal: Status-Chips -->\n @if (personalStatusBadges().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (badge of personalStatusBadges(); track badge.key) {\n <c2g-badge\n [value]=\"badge.text\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [dot]=\"true\"\n [dotColor]=\"badge.dotColor\">\n </c2g-badge>\n }\n </div>\n }\n\n\n</div>\n", styles: [".c2g-pl-item{border:1px solid var(--c2g-color-outline-variant);border-radius:.625rem;padding:.65rem .75rem;background:var(--c2g-color-surface);display:grid;gap:.45rem;position:relative;transition:background .15s ease,border-color .15s ease}.c2g-pl-item--packed{background:color-mix(in srgb,#16a34a 6%,var(--c2g-color-surface));border-color:color-mix(in srgb,#16a34a 25%,transparent)}.c2g-pl-item--packed .c2g-pl-item__name{color:var(--c2g-color-text-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,#16a34a 50%,transparent)}.c2g-pl-item__row{display:grid;grid-template-columns:.875rem minmax(0,1fr) auto;gap:.6rem;align-items:start}.c2g-pl-item__check{width:1.1rem;height:1.1rem;border:2px solid var(--c2g-color-outline);border-radius:.25rem;background:var(--c2g-color-surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-top:.15rem;flex-shrink:0;transition:background .12s,border-color .12s}.c2g-pl-item__check:hover:not(:disabled){border-color:var(--c2g-color-secondary-dark)}.c2g-pl-item__check--done{background:var(--c2g-color-secondary-dark, #2d6a4f);border-color:var(--c2g-color-secondary-dark, #2d6a4f)}.c2g-pl-item__check-mark{color:#fff;font-size:.65rem;font-weight:800;line-height:1}.c2g-pl-item__dot{width:.5rem;height:.5rem;border-radius:50%;margin-top:.35rem;flex-shrink:0;background:var(--c2g-color-outline)}.c2g-pl-item__dot--danger{background:#ef4444}.c2g-pl-item__dot--warning{background:#f59e0b}.c2g-pl-item__dot--success{background:#16a34a}.c2g-pl-item__body{display:grid;gap:.4rem;min-width:0}.c2g-pl-item__title-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0}.c2g-pl-item__qty-badge{margin-left:auto;flex-shrink:0}.c2g-pl-item__name{font-weight:600;font-size:.875rem;color:var(--c2g-color-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}.c2g-pl-item__tags{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap;flex-shrink:0}.c2g-pl-item__tag{font-size:.65rem;font-weight:500;border-radius:99px;padding:.1rem .4rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__tag--essential{background:color-mix(in srgb,#f59e0b 15%,transparent);color:#92400e}.c2g-pl-item__tag--weather{background:color-mix(in srgb,#3b82f6 12%,transparent);color:#1d4ed8}.c2g-pl-item__tag--private{background:var(--c2g-color-primary-container);color:var(--c2g-color-on-primary-container)}.c2g-pl-item__members-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}.c2g-pl-item__avatar-btn{border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;display:inline-flex}.c2g-pl-item__avatar-btn:disabled{cursor:default;opacity:.85}.c2g-pl-item__avatar-btn:not(:disabled):hover{transform:translateY(-1px);transition:transform .1s}.c2g-pl-item__more-wrap{position:relative;display:inline-flex}.c2g-pl-item__more{height:1.75rem;min-width:1.75rem;padding:0 .4rem;border-radius:99px;border:1px dashed var(--c2g-color-outline);background:transparent;color:var(--c2g-color-text-muted);font-size:.72rem;font-weight:600;cursor:pointer}.c2g-pl-item__more:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__empty{font-size:.75rem;color:var(--c2g-color-text-muted);font-style:italic}.c2g-pl-item__join-btn{display:inline-flex;align-items:center;height:1.75rem;padding:0 .6rem;border-radius:99px;border:1.5px dashed var(--c2g-color-secondary-dark);background:transparent;color:var(--c2g-color-secondary-dark);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .1s}.c2g-pl-item__join-btn:hover{background:var(--c2g-color-secondary-container)}.c2g-pl-item__join-btn--active{border-style:solid;background:var(--c2g-color-secondary-container)}.c2g-pl-item__cta{position:relative;display:inline-grid;justify-items:end}.c2g-pl-item__menu-trigger{width:1.75rem;height:1.75rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;background:transparent;color:var(--c2g-color-text-muted);font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__menu-trigger:hover{background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-primary)}.c2g-pl-item__menu{position:absolute;top:calc(100% + .3rem);right:0;min-width:10rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-surface);box-shadow:0 8px 24px #152b2124;padding:.3rem;display:grid;gap:.1rem;z-index:20}.c2g-pl-item__menu-item{display:flex;align-items:center;gap:.45rem;border:0;background:transparent;color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2rem;padding:.25rem .55rem;font-size:.82rem;text-align:left;cursor:pointer;width:100%}.c2g-pl-item__menu-item:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__menu-item--danger{color:var(--c2g-color-error)}.c2g-pl-item__menu-icon{font-size:.85rem;line-height:1;flex-shrink:0}.c2g-pl-item__menu-divider{height:1px;background:var(--c2g-color-outline-variant);margin:.15rem .3rem}.c2g-pl-item__picker{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;padding:.45rem .6rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.5rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__picker-label{font-size:.75rem;color:var(--c2g-color-text-muted);width:100%}.c2g-pl-item__qty-btn{width:1.6rem;height:1.6rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:1.1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__qty-val{min-width:2rem;text-align:center;font-weight:700;font-size:.85rem}.c2g-pl-item__select{height:1.7rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.78rem;padding:0 .5rem}.c2g-pl-item__qty-ok{height:1.7rem;padding:0 .65rem;border-radius:.35rem;border:1px solid var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container);color:var(--c2g-color-secondary-dark);font-size:.76rem;font-weight:600;cursor:pointer}.c2g-pl-item__qty-ok:disabled{opacity:.45;cursor:not-allowed}.c2g-pl-item__qty-cancel{height:1.7rem;padding:0 .5rem;border-radius:.35rem;border:1px solid transparent;background:transparent;color:var(--c2g-color-text-muted);font-size:.76rem;cursor:pointer}.c2g-pl-item__qty-cancel:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-panel{display:grid;gap:.35rem;padding:.55rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__assign-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.82rem;padding:0 .65rem}.c2g-pl-item__assign-list{display:grid;gap:.2rem;max-height:10rem;overflow:auto}.c2g-pl-item__assign-option{display:flex;align-items:center;gap:.55rem;border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2.2rem;padding:.3rem .6rem;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__assign-option:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-option--active{border-color:var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container)}.c2g-pl-item__assign-footer{display:flex;gap:.35rem}.c2g-pl-item__hint{margin:0;font-size:.78rem;color:var(--c2g-color-text-muted)}.c2g-pl-item__chip-row{display:flex;flex-wrap:wrap;gap:.3rem}.c2g-pl-item__overlay{position:absolute;top:calc(100% + .35rem);left:0;width:min(22rem,92vw);border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);border-radius:.7rem;box-shadow:0 12px 32px #152b212e;padding:.6rem;display:grid;gap:.4rem;z-index:30}.c2g-pl-item__overlay-head{display:flex;align-items:center;justify-content:space-between;font-size:.88rem;font-weight:600}.c2g-pl-item__overlay-close{border:0;background:transparent;cursor:pointer;color:var(--c2g-color-text-secondary);font-size:.9rem;padding:.1rem .25rem;border-radius:.3rem}.c2g-pl-item__overlay-close:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;padding:0 .6rem;font-size:.82rem}.c2g-pl-item__overlay-list{max-height:12rem;overflow:auto;display:grid;gap:.2rem}.c2g-pl-item__overlay-row{border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);border-radius:.45rem;padding:.4rem .55rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__overlay-row:hover:not(:disabled){background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-row:disabled{cursor:not-allowed;opacity:.55}.c2g-pl-item__overlay-status{font-size:.7rem;border-radius:99px;padding:.1rem .45rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__overlay-status--done{background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d}@media(max-width:480px){.c2g-pl-item__overlay{left:0;right:auto;width:calc(100vw - 2rem)}}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "c2g-avatar", inputs: ["name", "initials", "imageUrl", "ariaLabel", "size", "backgroundColor", "textColor", "ringTone", "ringColor", "clickable", "disabled", "badge"], outputs: ["avatarClick"] }, { kind: "component", type: BadgeComponent, selector: "c2g-badge", inputs: ["value", "tone", "variant", "size", "max", "dot", "dotOnly", "dotRing", "dotPulse", "dotColor", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
785
785
|
}
|
|
786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
786
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListItemComponent, decorators: [{
|
|
787
787
|
type: Component,
|
|
788
788
|
args: [{ selector: 'c2g-packing-list-item', standalone: true, imports: [AvatarComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-pl-item\" [class.c2g-pl-item--packed]=\"isPacked()\">\n\n <div class=\"c2g-pl-item__row\">\n\n <!-- Solo: echte Checkbox -->\n @if (permissions().isSolo) {\n <button\n class=\"c2g-pl-item__check\"\n [class.c2g-pl-item__check--done]=\"isPacked()\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-pressed]=\"isPacked()\"\n [attr.aria-label]=\"isPacked() ? 'Als ungepackt markieren' : 'Als gepackt markieren'\"\n (click)=\"onSoloToggle(!isPacked())\">\n @if (isPacked()) {\n <span class=\"c2g-pl-item__check-mark\" aria-hidden=\"true\">\u2713</span>\n }\n </button>\n } @else {\n <!-- Gruppen-Item: farbiger Fortschritts-Dot -->\n <span\n class=\"c2g-pl-item__dot\"\n [class.c2g-pl-item__dot--danger]=\"progressTone() === 'danger'\"\n [class.c2g-pl-item__dot--warning]=\"progressTone() === 'warning'\"\n [class.c2g-pl-item__dot--success]=\"progressTone() === 'success'\"\n [attr.title]=\"progressRatioText() + ' bereit'\"\n aria-hidden=\"true\">\n </span>\n }\n\n <!-- Body -->\n <div class=\"c2g-pl-item__body\">\n\n <!-- Zeile 1: Name + Tags + Mengen-Badge -->\n <div class=\"c2g-pl-item__title-row\">\n <span class=\"c2g-pl-item__name\">{{ item().name }}</span>\n <div class=\"c2g-pl-item__tags\">\n @if (item().essential) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--essential\">Pflicht</span>\n }\n @if (item().weather) {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--weather\">Wetter</span>\n }\n @if (item().visibility === 'private') {\n <span class=\"c2g-pl-item__tag c2g-pl-item__tag--private\">\uD83D\uDD12 {{ privateItemOwnerLabel() }}</span>\n }\n </div>\n\n @if (quantityBadge(); as badge) {\n <c2g-badge\n class=\"c2g-pl-item__qty-badge\"\n [value]=\"badge.value\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [attr.aria-label]=\"'Gepackt: ' + badge.value\">\n </c2g-badge>\n }\n </div>\n\n <!-- Zeile 2: Mitglieder / Avatare -->\n @if (!permissions().isSolo) {\n <div class=\"c2g-pl-item__members-row\">\n\n @if (item().visibility === 'shared') {\n <!-- Assigned-Avatare -->\n @for (member of checkedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"permissions().readOnly\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Bearbeiten'\"\n (click)=\"onSharedAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (hiddenCheckedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ hiddenCheckedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty state -->\n @if (checkedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Noch niemand eingetragen</span>\n }\n\n <!-- + Eintragen Button -->\n @if (canSelfAssignShared()) {\n <button\n class=\"c2g-pl-item__join-btn\"\n [class.c2g-pl-item__join-btn--active]=\"selfAssignedToShared()\"\n type=\"button\"\n (click)=\"onAssignMeToggle()\">\n {{ joinBtnLabel() }}\n </button>\n }\n\n } @else if (item().visibility === 'personal') {\n <!-- Personal: wer hat es f\u00FCr sich -->\n @for (member of personalAssignedPreview(); track member.id) {\n <button\n class=\"c2g-pl-item__avatar-btn\"\n type=\"button\"\n [disabled]=\"!canManagePersonalAssignments()\"\n [attr.aria-label]=\"member.name + ' \u2013 antippen zum Entfernen'\"\n (click)=\"onPersonalAvatarClick(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\"\n [ringTone]=\"memberRingTone(member.id)\"\n [ringColor]=\"memberRingColor(member.id)\"\n [badge]=\"memberBadge(member.id)\">\n </c2g-avatar>\n </button>\n }\n\n @if (personalHiddenAssignedCount() > 0) {\n <div class=\"c2g-pl-item__more-wrap\">\n <button class=\"c2g-pl-item__more\" type=\"button\" (click)=\"openOverlay()\">\n +{{ personalHiddenAssignedCount() }}\n </button>\n @if (overlayOpen()) {\n <div class=\"c2g-pl-item__overlay\" role=\"dialog\" aria-label=\"Alle Mitglieder\">\n <div class=\"c2g-pl-item__overlay-head\">\n <strong>{{ item().name }}</strong>\n <button type=\"button\" class=\"c2g-pl-item__overlay-close\" (click)=\"closeOverlay()\">\u2715</button>\n </div>\n <input class=\"c2g-pl-item__overlay-search\" type=\"search\" [value]=\"overlaySearch()\" placeholder=\"Mitglied suchen...\" (input)=\"onOverlaySearch($event)\" />\n <div class=\"c2g-pl-item__overlay-list\">\n @for (member of filteredOverlayMembers(); track member.memberId) {\n <button class=\"c2g-pl-item__overlay-row\" type=\"button\" [disabled]=\"!member.canToggle\" (click)=\"toggleFromOverlay(member.memberId)\">\n <span>{{ member.memberName }}</span>\n <span class=\"c2g-pl-item__overlay-status\" [class.c2g-pl-item__overlay-status--done]=\"member.checked\">{{ member.checked ? '\u2713 bereit' : 'ausstehend' }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (personalAssignedMembers().length === 0) {\n <span class=\"c2g-pl-item__empty\">Nicht zugewiesen</span>\n }\n\n @if (canManagePersonalAssignments()) {\n <button class=\"c2g-pl-item__join-btn\" type=\"button\" (click)=\"openPersonalAssignDialog()\">\n + Zuweisen\n </button>\n }\n }\n\n </div>\n }\n\n </div>\n\n <!-- Aktions-Spalte: \u22EF Men\u00FC -->\n @if (canShowAssignCta() || canEditOrDeleteItem()) {\n <div class=\"c2g-pl-item__cta\">\n <button\n class=\"c2g-pl-item__menu-trigger\"\n type=\"button\"\n aria-label=\"Aktionen\"\n [attr.aria-expanded]=\"ctaMenuOpen()\"\n (click)=\"toggleCtaMenu()\">\n \u22EF\n </button>\n\n @if (ctaMenuOpen()) {\n <div class=\"c2g-pl-item__menu\" role=\"menu\">\n @if (canShowAssignCta()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuAssign()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDC64</span> {{ isPlanner() ? 'Zuweisen' : 'Einpacken' }}\n </button>\n }\n @if (canEditOrDeleteItem()) {\n <button class=\"c2g-pl-item__menu-item\" type=\"button\" role=\"menuitem\" (click)=\"onMenuEdit()\">\n <span class=\"c2g-pl-item__menu-icon\">\u270F\uFE0F</span> Bearbeiten\n </button>\n <div class=\"c2g-pl-item__menu-divider\"></div>\n <button class=\"c2g-pl-item__menu-item c2g-pl-item__menu-item--danger\" type=\"button\" role=\"menuitem\" (click)=\"onMenuDelete()\">\n <span class=\"c2g-pl-item__menu-icon\">\uD83D\uDDD1</span> L\u00F6schen\n </button>\n }\n </div>\n }\n </div>\n }\n\n </div>\n\n <!-- Quantity Picker (Shared: eigene Menge) -->\n @if (quantityPickerOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"group\" aria-label=\"Menge w\u00E4hlen\">\n <span class=\"c2g-pl-item__picker-label\">{{ pickerLabel() }}</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseSelfAssignQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ quantityPickerValue() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseSelfAssignQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmSelfAssignQuantity()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"cancelSelfAssignQuantity()\">Abbrechen</button>\n </div>\n }\n\n <!-- Delegate Dialog (Organizer weist anderem zu) -->\n @if (delegateDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <span class=\"c2g-pl-item__picker-label\">{{ delegatePickerLabel() }}</span>\n <select class=\"c2g-pl-item__select\" [value]=\"delegateMemberId() ?? ''\" (change)=\"onDelegateMemberChange($event)\">\n @for (member of delegateCandidates(); track member.id) {\n <option [value]=\"member.id\">{{ member.name }}</option>\n }\n </select>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseDelegateQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ delegateQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseDelegateQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmDelegateAssignment()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeDelegateDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Avatar Dialog (Menge eines Zugewiesenen \u00E4ndern) -->\n @if (avatarDialogOpen()) {\n <div class=\"c2g-pl-item__picker\" role=\"dialog\" aria-label=\"Zuteilung bearbeiten\">\n <span class=\"c2g-pl-item__picker-label\">Menge anpassen \u2013 0 zum Entfernen</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"decreaseAvatarDialogQuantity()\">\u2212</button>\n <span class=\"c2g-pl-item__qty-val\">{{ avatarDialogQuantity() }}x</span>\n <button class=\"c2g-pl-item__qty-btn\" type=\"button\" (click)=\"increaseAvatarDialogQuantity()\">+</button>\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" (click)=\"confirmAvatarDialogUpdate()\">Best\u00E4tigen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closeAvatarDialog()\">Abbrechen</button>\n </div>\n }\n\n <!-- Personal Assign Panel -->\n @if (personalAssignDialogOpen()) {\n <div class=\"c2g-pl-item__assign-panel\" role=\"dialog\" aria-label=\"Mitglied zuweisen\">\n <input\n class=\"c2g-pl-item__assign-search\"\n type=\"search\"\n [value]=\"personalAssignSearch()\"\n placeholder=\"Mitglied suchen...\"\n (input)=\"onPersonalAssignSearch($event)\" />\n <div class=\"c2g-pl-item__assign-list\">\n @for (member of filteredPersonalAssignableMembers(); track member.id) {\n <button\n class=\"c2g-pl-item__assign-option\"\n [class.c2g-pl-item__assign-option--active]=\"personalAssignMemberId() === member.id\"\n type=\"button\"\n (click)=\"selectPersonalAssignMember(member.id)\">\n <c2g-avatar\n size=\"sm\"\n [name]=\"member.name\"\n [initials]=\"member.initials || ''\"\n [backgroundColor]=\"memberBackground(member)\">\n </c2g-avatar>\n <span>{{ member.name }}</span>\n </button>\n }\n </div>\n <div class=\"c2g-pl-item__assign-footer\">\n <button class=\"c2g-pl-item__qty-ok\" type=\"button\" [disabled]=\"!selectedPersonalAssignMember()\" (click)=\"confirmPersonalAssignment()\">Zuweisen</button>\n <button class=\"c2g-pl-item__qty-cancel\" type=\"button\" (click)=\"closePersonalAssignDialog()\">Abbrechen</button>\n </div>\n </div>\n }\n\n <!-- Hinweis -->\n @if (item().hint) {\n <p class=\"c2g-pl-item__hint\">{{ item().hint }}</p>\n }\n\n <!-- Shared: Mengen-Chips -->\n @if (sharedCountChips().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (chip of sharedCountChips(); track chip.key) {\n <c2g-badge [value]=\"chip.text\" [tone]=\"chip.tone\" variant=\"subtle\" size=\"sm\"></c2g-badge>\n }\n </div>\n }\n\n <!-- Personal: Status-Chips -->\n @if (personalStatusBadges().length > 0) {\n <div class=\"c2g-pl-item__chip-row\">\n @for (badge of personalStatusBadges(); track badge.key) {\n <c2g-badge\n [value]=\"badge.text\"\n [tone]=\"badge.tone\"\n variant=\"subtle\"\n size=\"sm\"\n [dot]=\"true\"\n [dotColor]=\"badge.dotColor\">\n </c2g-badge>\n }\n </div>\n }\n\n\n</div>\n", styles: [".c2g-pl-item{border:1px solid var(--c2g-color-outline-variant);border-radius:.625rem;padding:.65rem .75rem;background:var(--c2g-color-surface);display:grid;gap:.45rem;position:relative;transition:background .15s ease,border-color .15s ease}.c2g-pl-item--packed{background:color-mix(in srgb,#16a34a 6%,var(--c2g-color-surface));border-color:color-mix(in srgb,#16a34a 25%,transparent)}.c2g-pl-item--packed .c2g-pl-item__name{color:var(--c2g-color-text-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,#16a34a 50%,transparent)}.c2g-pl-item__row{display:grid;grid-template-columns:.875rem minmax(0,1fr) auto;gap:.6rem;align-items:start}.c2g-pl-item__check{width:1.1rem;height:1.1rem;border:2px solid var(--c2g-color-outline);border-radius:.25rem;background:var(--c2g-color-surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-top:.15rem;flex-shrink:0;transition:background .12s,border-color .12s}.c2g-pl-item__check:hover:not(:disabled){border-color:var(--c2g-color-secondary-dark)}.c2g-pl-item__check--done{background:var(--c2g-color-secondary-dark, #2d6a4f);border-color:var(--c2g-color-secondary-dark, #2d6a4f)}.c2g-pl-item__check-mark{color:#fff;font-size:.65rem;font-weight:800;line-height:1}.c2g-pl-item__dot{width:.5rem;height:.5rem;border-radius:50%;margin-top:.35rem;flex-shrink:0;background:var(--c2g-color-outline)}.c2g-pl-item__dot--danger{background:#ef4444}.c2g-pl-item__dot--warning{background:#f59e0b}.c2g-pl-item__dot--success{background:#16a34a}.c2g-pl-item__body{display:grid;gap:.4rem;min-width:0}.c2g-pl-item__title-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0}.c2g-pl-item__qty-badge{margin-left:auto;flex-shrink:0}.c2g-pl-item__name{font-weight:600;font-size:.875rem;color:var(--c2g-color-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}.c2g-pl-item__tags{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap;flex-shrink:0}.c2g-pl-item__tag{font-size:.65rem;font-weight:500;border-radius:99px;padding:.1rem .4rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__tag--essential{background:color-mix(in srgb,#f59e0b 15%,transparent);color:#92400e}.c2g-pl-item__tag--weather{background:color-mix(in srgb,#3b82f6 12%,transparent);color:#1d4ed8}.c2g-pl-item__tag--private{background:var(--c2g-color-primary-container);color:var(--c2g-color-on-primary-container)}.c2g-pl-item__members-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}.c2g-pl-item__avatar-btn{border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;display:inline-flex}.c2g-pl-item__avatar-btn:disabled{cursor:default;opacity:.85}.c2g-pl-item__avatar-btn:not(:disabled):hover{transform:translateY(-1px);transition:transform .1s}.c2g-pl-item__more-wrap{position:relative;display:inline-flex}.c2g-pl-item__more{height:1.75rem;min-width:1.75rem;padding:0 .4rem;border-radius:99px;border:1px dashed var(--c2g-color-outline);background:transparent;color:var(--c2g-color-text-muted);font-size:.72rem;font-weight:600;cursor:pointer}.c2g-pl-item__more:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__empty{font-size:.75rem;color:var(--c2g-color-text-muted);font-style:italic}.c2g-pl-item__join-btn{display:inline-flex;align-items:center;height:1.75rem;padding:0 .6rem;border-radius:99px;border:1.5px dashed var(--c2g-color-secondary-dark);background:transparent;color:var(--c2g-color-secondary-dark);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .1s}.c2g-pl-item__join-btn:hover{background:var(--c2g-color-secondary-container)}.c2g-pl-item__join-btn--active{border-style:solid;background:var(--c2g-color-secondary-container)}.c2g-pl-item__cta{position:relative;display:inline-grid;justify-items:end}.c2g-pl-item__menu-trigger{width:1.75rem;height:1.75rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;background:transparent;color:var(--c2g-color-text-muted);font-size:1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__menu-trigger:hover{background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-primary)}.c2g-pl-item__menu{position:absolute;top:calc(100% + .3rem);right:0;min-width:10rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-surface);box-shadow:0 8px 24px #152b2124;padding:.3rem;display:grid;gap:.1rem;z-index:20}.c2g-pl-item__menu-item{display:flex;align-items:center;gap:.45rem;border:0;background:transparent;color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2rem;padding:.25rem .55rem;font-size:.82rem;text-align:left;cursor:pointer;width:100%}.c2g-pl-item__menu-item:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__menu-item--danger{color:var(--c2g-color-error)}.c2g-pl-item__menu-icon{font-size:.85rem;line-height:1;flex-shrink:0}.c2g-pl-item__menu-divider{height:1px;background:var(--c2g-color-outline-variant);margin:.15rem .3rem}.c2g-pl-item__picker{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;padding:.45rem .6rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.5rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__picker-label{font-size:.75rem;color:var(--c2g-color-text-muted);width:100%}.c2g-pl-item__qty-btn{width:1.6rem;height:1.6rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:1.1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.c2g-pl-item__qty-val{min-width:2rem;text-align:center;font-weight:700;font-size:.85rem}.c2g-pl-item__select{height:1.7rem;border:1px solid var(--c2g-color-outline);border-radius:.35rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.78rem;padding:0 .5rem}.c2g-pl-item__qty-ok{height:1.7rem;padding:0 .65rem;border-radius:.35rem;border:1px solid var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container);color:var(--c2g-color-secondary-dark);font-size:.76rem;font-weight:600;cursor:pointer}.c2g-pl-item__qty-ok:disabled{opacity:.45;cursor:not-allowed}.c2g-pl-item__qty-cancel{height:1.7rem;padding:0 .5rem;border-radius:.35rem;border:1px solid transparent;background:transparent;color:var(--c2g-color-text-muted);font-size:.76rem;cursor:pointer}.c2g-pl-item__qty-cancel:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-panel{display:grid;gap:.35rem;padding:.55rem;border:1px solid var(--c2g-color-outline-variant);border-radius:.65rem;background:var(--c2g-color-neutral-50)}.c2g-pl-item__assign-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.82rem;padding:0 .65rem}.c2g-pl-item__assign-list{display:grid;gap:.2rem;max-height:10rem;overflow:auto}.c2g-pl-item__assign-option{display:flex;align-items:center;gap:.55rem;border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.45rem;min-height:2.2rem;padding:.3rem .6rem;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__assign-option:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__assign-option--active{border-color:var(--c2g-color-secondary-dark);background:var(--c2g-color-secondary-container)}.c2g-pl-item__assign-footer{display:flex;gap:.35rem}.c2g-pl-item__hint{margin:0;font-size:.78rem;color:var(--c2g-color-text-muted)}.c2g-pl-item__chip-row{display:flex;flex-wrap:wrap;gap:.3rem}.c2g-pl-item__overlay{position:absolute;top:calc(100% + .35rem);left:0;width:min(22rem,92vw);border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);border-radius:.7rem;box-shadow:0 12px 32px #152b212e;padding:.6rem;display:grid;gap:.4rem;z-index:30}.c2g-pl-item__overlay-head{display:flex;align-items:center;justify-content:space-between;font-size:.88rem;font-weight:600}.c2g-pl-item__overlay-close{border:0;background:transparent;cursor:pointer;color:var(--c2g-color-text-secondary);font-size:.9rem;padding:.1rem .25rem;border-radius:.3rem}.c2g-pl-item__overlay-close:hover{background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-search{height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.4rem;padding:0 .6rem;font-size:.82rem}.c2g-pl-item__overlay-list{max-height:12rem;overflow:auto;display:grid;gap:.2rem}.c2g-pl-item__overlay-row{border:1px solid var(--c2g-color-outline-variant);background:var(--c2g-color-surface);border-radius:.45rem;padding:.4rem .55rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;cursor:pointer;text-align:left}.c2g-pl-item__overlay-row:hover:not(:disabled){background:var(--c2g-color-neutral-100)}.c2g-pl-item__overlay-row:disabled{cursor:not-allowed;opacity:.55}.c2g-pl-item__overlay-status{font-size:.7rem;border-radius:99px;padding:.1rem .45rem;background:var(--c2g-color-neutral-100);color:var(--c2g-color-text-muted);white-space:nowrap}.c2g-pl-item__overlay-status--done{background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d}@media(max-width:480px){.c2g-pl-item__overlay{left:0;right:auto;width:calc(100vw - 2rem)}}\n"] }]
|
|
789
|
-
}]
|
|
789
|
+
}] });
|
|
790
790
|
|
|
791
791
|
class PackingListCategoryComponent {
|
|
792
792
|
categoryKey = input.required(...(ngDevMode ? [{ debugName: "categoryKey" }] : []));
|
|
@@ -815,13 +815,13 @@ class PackingListCategoryComponent {
|
|
|
815
815
|
onToggle() {
|
|
816
816
|
this.toggle.emit(this.categoryKey());
|
|
817
817
|
}
|
|
818
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
818
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
819
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListCategoryComponent, isStandalone: true, selector: "c2g-packing-list-category", inputs: { categoryKey: { classPropertyName: "categoryKey", publicName: "categoryKey", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, selectedMemberIds: { classPropertyName: "selectedMemberIds", publicName: "selectedMemberIds", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", itemChecked: "itemChecked", itemAssigned: "itemAssigned", itemDeleted: "itemDeleted", itemEditRequested: "itemEditRequested", personalItemToggled: "personalItemToggled", memberOverlayRequested: "memberOverlayRequested" }, ngImport: i0, template: "<section class=\"c2g-pl-category\">\n <button type=\"button\" class=\"c2g-pl-category__header\" [class.c2g-pl-category__header--done]=\"stats().packed === stats().total && stats().total > 0\" (click)=\"onToggle()\">\n <mat-icon class=\"c2g-pl-category__icon\" aria-hidden=\"true\">{{ category().icon }}</mat-icon>\n <span class=\"c2g-pl-category__label\">{{ category().label ?? category().labelKey }}</span>\n <span class=\"c2g-pl-category__meta\">{{ stats().packed }}/{{ stats().total }}</span>\n <span class=\"c2g-pl-category__chevron\" [class.c2g-pl-category__chevron--open]=\"expanded()\" aria-hidden=\"true\">\u25BE</span>\n </button>\n\n @if (expanded()) {\n <div class=\"c2g-pl-category__items\">\n @for (item of items(); track item.id) {\n <c2g-packing-list-item\n [item]=\"item\"\n [members]=\"members()\"\n [selectedMemberIds]=\"selectedMemberIds()\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-item>\n }\n </div>\n }\n</section>\n", styles: [".c2g-pl-category{border:1px solid var(--c2g-color-outline-variant);border-radius:.75rem;overflow:hidden;background:var(--c2g-color-surface)}.c2g-pl-category__header{width:100%;border:0;background:var(--c2g-color-neutral-50);padding:.6rem .75rem;display:grid;grid-template-columns:auto 1fr auto auto;gap:.45rem;align-items:center;text-align:left;cursor:pointer;font-weight:600;color:var(--c2g-color-text-primary)}.c2g-pl-category__header--done{background:var(--c2g-color-secondary-container);color:var(--c2g-color-secondary-dark)}.c2g-pl-category__label{font-size:.88rem}.c2g-pl-category__icon{font-size:1.1rem!important;width:1.1rem!important;height:1.1rem!important;line-height:1!important;color:var(--c2g-color-text-muted);flex-shrink:0}.c2g-pl-category__meta{font-size:.78rem;color:var(--c2g-color-text-muted);font-weight:500}.c2g-pl-category__chevron{font-size:.8rem;color:var(--c2g-color-text-muted);transition:transform .2s ease;line-height:1}.c2g-pl-category__chevron--open{transform:rotate(180deg)}.c2g-pl-category__items{display:grid;gap:.55rem;padding:.6rem}\n"], dependencies: [{ kind: "component", type: PackingListItemComponent, selector: "c2g-packing-list-item", inputs: ["item", "members", "currentUserId", "permissions", "selectedMemberIds"], outputs: ["itemChecked", "itemAssigned", "itemDeleted", "itemEditRequested", "personalItemToggled", "memberOverlayRequested"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
820
820
|
}
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListCategoryComponent, decorators: [{
|
|
822
822
|
type: Component,
|
|
823
823
|
args: [{ selector: 'c2g-packing-list-category', standalone: true, imports: [PackingListItemComponent, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"c2g-pl-category\">\n <button type=\"button\" class=\"c2g-pl-category__header\" [class.c2g-pl-category__header--done]=\"stats().packed === stats().total && stats().total > 0\" (click)=\"onToggle()\">\n <mat-icon class=\"c2g-pl-category__icon\" aria-hidden=\"true\">{{ category().icon }}</mat-icon>\n <span class=\"c2g-pl-category__label\">{{ category().label ?? category().labelKey }}</span>\n <span class=\"c2g-pl-category__meta\">{{ stats().packed }}/{{ stats().total }}</span>\n <span class=\"c2g-pl-category__chevron\" [class.c2g-pl-category__chevron--open]=\"expanded()\" aria-hidden=\"true\">\u25BE</span>\n </button>\n\n @if (expanded()) {\n <div class=\"c2g-pl-category__items\">\n @for (item of items(); track item.id) {\n <c2g-packing-list-item\n [item]=\"item\"\n [members]=\"members()\"\n [selectedMemberIds]=\"selectedMemberIds()\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-item>\n }\n </div>\n }\n</section>\n", styles: [".c2g-pl-category{border:1px solid var(--c2g-color-outline-variant);border-radius:.75rem;overflow:hidden;background:var(--c2g-color-surface)}.c2g-pl-category__header{width:100%;border:0;background:var(--c2g-color-neutral-50);padding:.6rem .75rem;display:grid;grid-template-columns:auto 1fr auto auto;gap:.45rem;align-items:center;text-align:left;cursor:pointer;font-weight:600;color:var(--c2g-color-text-primary)}.c2g-pl-category__header--done{background:var(--c2g-color-secondary-container);color:var(--c2g-color-secondary-dark)}.c2g-pl-category__label{font-size:.88rem}.c2g-pl-category__icon{font-size:1.1rem!important;width:1.1rem!important;height:1.1rem!important;line-height:1!important;color:var(--c2g-color-text-muted);flex-shrink:0}.c2g-pl-category__meta{font-size:.78rem;color:var(--c2g-color-text-muted);font-weight:500}.c2g-pl-category__chevron{font-size:.8rem;color:var(--c2g-color-text-muted);transition:transform .2s ease;line-height:1}.c2g-pl-category__chevron--open{transform:rotate(180deg)}.c2g-pl-category__items{display:grid;gap:.55rem;padding:.6rem}\n"] }]
|
|
824
|
-
}]
|
|
824
|
+
}] });
|
|
825
825
|
|
|
826
826
|
class PackingListFiltersComponent {
|
|
827
827
|
filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
@@ -898,13 +898,13 @@ class PackingListFiltersComponent {
|
|
|
898
898
|
requestExternalOverlay() {
|
|
899
899
|
this.overlayRequested.emit();
|
|
900
900
|
}
|
|
901
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
902
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
901
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
902
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListFiltersComponent, isStandalone: true, selector: "c2g-packing-list-filters", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", overlayRequested: "overlayRequested" }, ngImport: i0, template: "<div class=\"c2g-pl-filters\">\n <input\n class=\"c2g-pl-filters__search\"\n type=\"search\"\n [value]=\"filter().query\"\n [placeholder]=\"labels().searchPlaceholderKey\"\n [disabled]=\"disabled()\"\n (input)=\"onQueryChange($event)\" />\n\n <select\n class=\"c2g-pl-filters__visibility\"\n [value]=\"filter().visibility\"\n [disabled]=\"disabled()\"\n (change)=\"onVisibilityChange($event)\">\n <option value=\"all\">{{ labels().showAllVisibilityKey }}</option>\n <option value=\"shared\">{{ labels().sharedVisibilityKey }}</option>\n <option value=\"personal\">{{ labels().personalVisibilityKey }}</option>\n <option value=\"private\">{{ labels().privateVisibilityKey }}</option>\n </select>\n\n <label class=\"c2g-pl-filters__essential\">\n <input\n type=\"checkbox\"\n [checked]=\"filter().essentialsOnly\"\n [disabled]=\"disabled()\"\n (change)=\"onEssentialsOnlyToggle($event)\" />\n <span>{{ labels().essentialsOnlyKey }}</span>\n </label>\n\n <div class=\"c2g-pl-filters__member-filter\">\n <button\n type=\"button\"\n class=\"c2g-pl-filters__member-trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"membersPanelOpen()\"\n (click)=\"toggleMembersPanel()\">\n <span>{{ memberSelectionLabel() }}</span>\n <span>{{ membersPanelOpen() ? '\u25B4' : '\u25BE' }}</span>\n </button>\n\n @if (membersPanelOpen()) {\n <div class=\"c2g-pl-filters__member-panel\" role=\"dialog\" aria-label=\"User-Filter\">\n <input\n class=\"c2g-pl-filters__member-search\"\n type=\"search\"\n [value]=\"memberQuery()\"\n placeholder=\"User suchen\"\n (input)=\"onMemberSearch($event)\" />\n\n <div class=\"c2g-pl-filters__member-actions\">\n <button type=\"button\" (click)=\"selectAllMembers()\">Alle</button>\n <button type=\"button\" (click)=\"clearMemberSelection()\">Zuruecksetzen</button>\n <button type=\"button\" (click)=\"requestExternalOverlay()\">Externe View</button>\n </div>\n\n <div class=\"c2g-pl-filters__member-list\">\n @for (member of filteredMembers(); track member.id) {\n <label class=\"c2g-pl-filters__member-option\">\n <input\n type=\"checkbox\"\n [checked]=\"isMemberSelected(member.id)\"\n (change)=\"toggleMember(member.id)\" />\n <span>{{ member.name }}</span>\n </label>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".c2g-pl-filters{display:grid;gap:.5rem;grid-template-columns:1fr auto auto auto;align-items:center}.c2g-pl-filters__search,.c2g-pl-filters__visibility{min-height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;padding:.35rem .6rem;background:var(--c2g-color-surface)}.c2g-pl-filters__essential{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--c2g-color-text-primary)}.c2g-pl-filters__member-filter{position:relative}.c2g-pl-filters__member-trigger{min-height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;padding:.35rem .6rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);display:inline-flex;gap:.5rem;align-items:center;cursor:pointer}.c2g-pl-filters__member-panel{position:absolute;z-index:20;top:calc(100% + .35rem);right:0;width:min(20rem,80vw);border:1px solid var(--c2g-color-outline);border-radius:.6rem;background:var(--c2g-color-surface);box-shadow:0 10px 26px #142d2124;padding:.55rem;display:grid;gap:.45rem}.c2g-pl-filters__member-search{min-height:1.9rem;border:1px solid var(--c2g-color-outline);border-radius:.45rem;padding:.3rem .55rem}.c2g-pl-filters__member-actions{display:flex;gap:.35rem;flex-wrap:wrap}.c2g-pl-filters__member-actions button{border:1px solid var(--c2g-color-outline);background:var(--c2g-color-neutral-50);border-radius:999px;font-size:.75rem;padding:.18rem .55rem;cursor:pointer}.c2g-pl-filters__member-list{max-height:12rem;overflow:auto;display:grid;gap:.25rem;padding-right:.15rem}.c2g-pl-filters__member-option{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--c2g-color-text-primary)}@media(max-width:720px){.c2g-pl-filters{grid-template-columns:1fr}.c2g-pl-filters__member-panel{right:auto;left:0;width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
903
903
|
}
|
|
904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListFiltersComponent, decorators: [{
|
|
905
905
|
type: Component,
|
|
906
906
|
args: [{ selector: 'c2g-packing-list-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-pl-filters\">\n <input\n class=\"c2g-pl-filters__search\"\n type=\"search\"\n [value]=\"filter().query\"\n [placeholder]=\"labels().searchPlaceholderKey\"\n [disabled]=\"disabled()\"\n (input)=\"onQueryChange($event)\" />\n\n <select\n class=\"c2g-pl-filters__visibility\"\n [value]=\"filter().visibility\"\n [disabled]=\"disabled()\"\n (change)=\"onVisibilityChange($event)\">\n <option value=\"all\">{{ labels().showAllVisibilityKey }}</option>\n <option value=\"shared\">{{ labels().sharedVisibilityKey }}</option>\n <option value=\"personal\">{{ labels().personalVisibilityKey }}</option>\n <option value=\"private\">{{ labels().privateVisibilityKey }}</option>\n </select>\n\n <label class=\"c2g-pl-filters__essential\">\n <input\n type=\"checkbox\"\n [checked]=\"filter().essentialsOnly\"\n [disabled]=\"disabled()\"\n (change)=\"onEssentialsOnlyToggle($event)\" />\n <span>{{ labels().essentialsOnlyKey }}</span>\n </label>\n\n <div class=\"c2g-pl-filters__member-filter\">\n <button\n type=\"button\"\n class=\"c2g-pl-filters__member-trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"membersPanelOpen()\"\n (click)=\"toggleMembersPanel()\">\n <span>{{ memberSelectionLabel() }}</span>\n <span>{{ membersPanelOpen() ? '\u25B4' : '\u25BE' }}</span>\n </button>\n\n @if (membersPanelOpen()) {\n <div class=\"c2g-pl-filters__member-panel\" role=\"dialog\" aria-label=\"User-Filter\">\n <input\n class=\"c2g-pl-filters__member-search\"\n type=\"search\"\n [value]=\"memberQuery()\"\n placeholder=\"User suchen\"\n (input)=\"onMemberSearch($event)\" />\n\n <div class=\"c2g-pl-filters__member-actions\">\n <button type=\"button\" (click)=\"selectAllMembers()\">Alle</button>\n <button type=\"button\" (click)=\"clearMemberSelection()\">Zuruecksetzen</button>\n <button type=\"button\" (click)=\"requestExternalOverlay()\">Externe View</button>\n </div>\n\n <div class=\"c2g-pl-filters__member-list\">\n @for (member of filteredMembers(); track member.id) {\n <label class=\"c2g-pl-filters__member-option\">\n <input\n type=\"checkbox\"\n [checked]=\"isMemberSelected(member.id)\"\n (change)=\"toggleMember(member.id)\" />\n <span>{{ member.name }}</span>\n </label>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [".c2g-pl-filters{display:grid;gap:.5rem;grid-template-columns:1fr auto auto auto;align-items:center}.c2g-pl-filters__search,.c2g-pl-filters__visibility{min-height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;padding:.35rem .6rem;background:var(--c2g-color-surface)}.c2g-pl-filters__essential{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--c2g-color-text-primary)}.c2g-pl-filters__member-filter{position:relative}.c2g-pl-filters__member-trigger{min-height:2rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;padding:.35rem .6rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);display:inline-flex;gap:.5rem;align-items:center;cursor:pointer}.c2g-pl-filters__member-panel{position:absolute;z-index:20;top:calc(100% + .35rem);right:0;width:min(20rem,80vw);border:1px solid var(--c2g-color-outline);border-radius:.6rem;background:var(--c2g-color-surface);box-shadow:0 10px 26px #142d2124;padding:.55rem;display:grid;gap:.45rem}.c2g-pl-filters__member-search{min-height:1.9rem;border:1px solid var(--c2g-color-outline);border-radius:.45rem;padding:.3rem .55rem}.c2g-pl-filters__member-actions{display:flex;gap:.35rem;flex-wrap:wrap}.c2g-pl-filters__member-actions button{border:1px solid var(--c2g-color-outline);background:var(--c2g-color-neutral-50);border-radius:999px;font-size:.75rem;padding:.18rem .55rem;cursor:pointer}.c2g-pl-filters__member-list{max-height:12rem;overflow:auto;display:grid;gap:.25rem;padding-right:.15rem}.c2g-pl-filters__member-option{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--c2g-color-text-primary)}@media(max-width:720px){.c2g-pl-filters{grid-template-columns:1fr}.c2g-pl-filters__member-panel{right:auto;left:0;width:100%}}\n"] }]
|
|
907
|
-
}]
|
|
907
|
+
}] });
|
|
908
908
|
|
|
909
909
|
class PackingListPrivateListComponent {
|
|
910
910
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -920,13 +920,13 @@ class PackingListPrivateListComponent {
|
|
|
920
920
|
itemEditRequested = output();
|
|
921
921
|
personalItemToggled = output();
|
|
922
922
|
memberOverlayRequested = output();
|
|
923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
923
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListPrivateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListPrivateListComponent, isStandalone: true, selector: "c2g-packing-list-private-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, selectedMemberIds: { classPropertyName: "selectedMemberIds", publicName: "selectedMemberIds", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChecked: "itemChecked", itemAssigned: "itemAssigned", itemDeleted: "itemDeleted", itemEditRequested: "itemEditRequested", personalItemToggled: "personalItemToggled", memberOverlayRequested: "memberOverlayRequested" }, ngImport: i0, template: "@if (privateItems().length > 0) {\n <section class=\"c2g-pl-private\">\n <h3>{{ labels().privateSectionTitleKey }}</h3>\n <div class=\"c2g-pl-private__items\">\n @for (item of privateItems(); track item.id) {\n <c2g-packing-list-item\n [item]=\"item\"\n [members]=\"members()\"\n [selectedMemberIds]=\"selectedMemberIds()\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-item>\n }\n </div>\n </section>\n}\n", styles: [".c2g-pl-private{display:grid;gap:.5rem}.c2g-pl-private h3{margin:0;font-size:.95rem;color:var(--c2g-color-text-primary)}.c2g-pl-private__items{display:grid;gap:.55rem}\n"], dependencies: [{ kind: "component", type: PackingListItemComponent, selector: "c2g-packing-list-item", inputs: ["item", "members", "currentUserId", "permissions", "selectedMemberIds"], outputs: ["itemChecked", "itemAssigned", "itemDeleted", "itemEditRequested", "personalItemToggled", "memberOverlayRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
925
925
|
}
|
|
926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListPrivateListComponent, decorators: [{
|
|
927
927
|
type: Component,
|
|
928
928
|
args: [{ selector: 'c2g-packing-list-private-list', standalone: true, imports: [PackingListItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (privateItems().length > 0) {\n <section class=\"c2g-pl-private\">\n <h3>{{ labels().privateSectionTitleKey }}</h3>\n <div class=\"c2g-pl-private__items\">\n @for (item of privateItems(); track item.id) {\n <c2g-packing-list-item\n [item]=\"item\"\n [members]=\"members()\"\n [selectedMemberIds]=\"selectedMemberIds()\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-item>\n }\n </div>\n </section>\n}\n", styles: [".c2g-pl-private{display:grid;gap:.5rem}.c2g-pl-private h3{margin:0;font-size:.95rem;color:var(--c2g-color-text-primary)}.c2g-pl-private__items{display:grid;gap:.55rem}\n"] }]
|
|
929
|
-
}]
|
|
929
|
+
}] });
|
|
930
930
|
|
|
931
931
|
class PackingListItemCreateComponent {
|
|
932
932
|
permissions = input({
|
|
@@ -1024,13 +1024,13 @@ class PackingListItemCreateComponent {
|
|
|
1024
1024
|
getCategoryLabel(categoryKey) {
|
|
1025
1025
|
return this.categories().find(c => c.key === categoryKey)?.label ?? categoryKey;
|
|
1026
1026
|
}
|
|
1027
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1028
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PackingListItemCreateComponent, isStandalone: true, selector: "c2g-packing-list-item-create", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemCreated: "itemCreated" }, ngImport: i0, template: "<c2g-button\n variant=\"secondary\"\n size=\"md\"\n icon=\"+\"\n [disabled]=\"readOnly()\"\n (clicked)=\"openDialog()\">\n {{ labels().addItemKey || 'Item hinzuf\u00FCgen' }}\n</c2g-button>\n\n@if (dialogOpen()) {\n <div class=\"c2g-pl-item-create__overlay\" (click)=\"closeDialog()\"></div>\n <dialog class=\"c2g-pl-item-create__dialog\" open>\n <div class=\"c2g-pl-item-create__header\">\n <h2>{{ labels().createItemKey || 'Neues Item' }}</h2>\n <c2g-button\n variant=\"icon\"\n size=\"sm\"\n icon=\"\u2715\"\n aria-label=\"Schlie\u00DFen\"\n (clicked)=\"closeDialog()\">\n </c2g-button>\n </div>\n\n <form class=\"c2g-pl-item-create__form\" (ngSubmit)=\"submit()\">\n <!-- Name Input -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().itemNameKey || 'Name'\"\n [required]=\"true\"\n [(ngModel)]=\"formData().name\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n name=\"name\"\n placeholder=\"z.B. Zelt, Schlafsack...\">\n </c2g-input>\n </div>\n\n <!-- Category Select -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-select\n [label]=\"(labels().categoryKey || 'Kategorie') + ' *'\"\n [options]=\"categoryOptions()\"\n [required]=\"true\"\n [(ngModel)]=\"formData().category\"\n name=\"category\">\n </c2g-select>\n </div>\n\n <!-- Visibility Radio -->\n @if (availableVisibilities().length > 1) {\n <div class=\"c2g-pl-item-create__field\">\n <c2g-radio-group\n [label]=\"(labels().visibilityKey || 'Sichtbarkeit') + ' *'\"\n [options]=\"availableVisibilities()\"\n [(ngModel)]=\"formData().visibility\"\n name=\"visibility\"\n orientation=\"vertical\">\n </c2g-radio-group>\n </div>\n }\n\n <!-- Essential Checkbox -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-checkbox\n [label]=\"labels().essentialKey || 'Essentiell'\"\n [(ngModel)]=\"formData().essential\"\n name=\"essential\">\n </c2g-checkbox>\n </div>\n\n <!-- Quantity -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().quantityKey || 'Menge'\"\n [(ngModel)]=\"formData().quantity\"\n name=\"quantity\"\n placeholder=\"z.B. 1\">\n </c2g-input>\n </div>\n\n <!-- Weight -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().weightKey || 'Gewicht (kg)'\"\n [(ngModel)]=\"formData().weightKg\"\n name=\"weightKg\"\n placeholder=\"z.B. 0.5\">\n </c2g-input>\n </div>\n\n <!-- Volume -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().volumeKey || 'Volumen (l)'\"\n [(ngModel)]=\"formData().packedVolumeL\"\n name=\"packedVolumeL\"\n placeholder=\"z.B. 1.5\">\n </c2g-input>\n </div>\n\n <!-- Hint -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-textarea\n [label]=\"labels().hintKey || 'Notiz'\"\n [(ngModel)]=\"formData().hint\"\n name=\"hint\"\n [rows]=\"2\"\n placeholder=\"z.B. Schlafsack f\u00FCr Kinder, Wetterschutz...\">\n </c2g-textarea>\n </div>\n\n <!-- Buttons -->\n <div class=\"c2g-pl-item-create__actions\">\n <c2g-button\n type=\"button\"\n variant=\"secondary\"\n size=\"md\"\n (clicked)=\"closeDialog()\">\n {{ labels().cancelKey || 'Abbrechen' }}\n </c2g-button>\n <c2g-button\n type=\"submit\"\n variant=\"primary\"\n size=\"md\"\n [disabled]=\"!formData().name.trim()\">\n {{ labels().createKey || 'Erstellen' }}\n </c2g-button>\n </div>\n </form>\n </dialog>\n}\n", styles: [".c2g-pl-item-create__btn{border:none;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.5rem;padding:.45rem .9rem;font-size:.9rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--c2g-color-outline);transition:all .2s ease}.c2g-pl-item-create__btn:hover:not(:disabled){background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}.c2g-pl-item-create__btn:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__icon{font-size:1.2rem;font-weight:600;line-height:1}.c2g-pl-item-create__overlay{position:fixed;inset:0;background:#152b2166;z-index:99}.c2g-pl-item-create__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;border:none;border-radius:.75rem;background:var(--c2g-color-surface);box-shadow:0 20px 40px #152b2133;padding:1.5rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}@media(max-width:600px){.c2g-pl-item-create__dialog{width:95%;padding:1.2rem}}.c2g-pl-item-create__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.c2g-pl-item-create__header h2{margin:0;font-size:1.3rem;font-weight:600;color:var(--c2g-color-text-primary)}.c2g-pl-item-create__close{border:none;background:transparent;color:var(--c2g-color-text-muted);font-size:1.8rem;line-height:1;padding:0;cursor:pointer;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.c2g-pl-item-create__close:hover{color:var(--c2g-color-text-primary)}.c2g-pl-item-create__form{display:grid;gap:1rem}.c2g-pl-item-create__field{display:grid;gap:.4rem}.c2g-pl-item-create__field label{font-weight:500;color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__field input[type=text],.c2g-pl-item-create__field input[type=number],.c2g-pl-item-create__field textarea,.c2g-pl-item-create__field select{border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;padding:.5rem .6rem;font-size:.9rem;font-family:inherit;color:var(--c2g-color-text-primary);background:var(--c2g-color-surface);transition:border-color .2s ease}.c2g-pl-item-create__field input[type=text]:focus,.c2g-pl-item-create__field input[type=number]:focus,.c2g-pl-item-create__field textarea:focus,.c2g-pl-item-create__field select:focus{outline:none;border-color:var(--c2g-color-text-primary);box-shadow:0 0 0 2px var(--c2g-color-border-soft)}.c2g-pl-item-create__field input[type=text]::placeholder,.c2g-pl-item-create__field input[type=number]::placeholder,.c2g-pl-item-create__field textarea::placeholder,.c2g-pl-item-create__field select::placeholder{color:var(--c2g-color-text-muted)}.c2g-pl-item-create__field textarea{resize:vertical;line-height:1.4}.c2g-pl-item-create__field select{cursor:pointer}.c2g-pl-item-create__checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__checkbox-label input[type=checkbox]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__checkbox-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__visibility-options{display:flex;flex-direction:column;gap:.5rem}.c2g-pl-item-create__visibility-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__visibility-label input[type=radio]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__visibility-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__actions{display:flex;gap:.8rem;margin-top:1.5rem;justify-content:flex-end}.c2g-pl-item-create__btn-primary{border:none;background:var(--c2g-color-text-primary);color:var(--c2g-color-surface);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-primary:hover:not(:disabled){background:var(--c2g-color-text-secondary)}.c2g-pl-item-create__btn-primary:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__btn-secondary{border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-secondary:hover{background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "c2g-button", inputs: ["variant", "size", "disabled", "loading", "icon", "iconPosition", "iconOnly", "ariaLabel", "loadingAriaLabel", "type"], outputs: ["clicked"] }, { kind: "component", type: RadioGroupComponent, selector: "c2g-radio-group", inputs: ["label", "hint", "disabled", "orientation", "options", "name"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxComponent, selector: "c2g-checkbox", inputs: ["id", "label", "hint", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SelectComponent, selector: "c2g-select", inputs: ["label", "placeholder", "hint", "error", "options", "disabled", "required", "id"], outputs: ["valueChanged"] }, { kind: "component", type: InputComponent, selector: "c2g-input", inputs: ["label", "hint", "error", "placeholder", "prefix", "suffix", "loading", "disabled", "required", "maxLength", "id", "type"], outputs: ["valueChanged"] }, { kind: "component", type: TextareaComponent, selector: "c2g-textarea", inputs: ["label", "hint", "error", "placeholder", "prefix", "suffix", "loading", "disabled", "required", "maxLength", "rows", "id"], outputs: ["valueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1027
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListItemCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1028
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListItemCreateComponent, isStandalone: true, selector: "c2g-packing-list-item-create", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemCreated: "itemCreated" }, ngImport: i0, template: "<c2g-button\n variant=\"secondary\"\n size=\"md\"\n icon=\"+\"\n [disabled]=\"readOnly()\"\n (clicked)=\"openDialog()\">\n {{ labels().addItemKey || 'Item hinzuf\u00FCgen' }}\n</c2g-button>\n\n@if (dialogOpen()) {\n <div class=\"c2g-pl-item-create__overlay\" (click)=\"closeDialog()\"></div>\n <dialog class=\"c2g-pl-item-create__dialog\" open>\n <div class=\"c2g-pl-item-create__header\">\n <h2>{{ labels().createItemKey || 'Neues Item' }}</h2>\n <c2g-button\n variant=\"icon\"\n size=\"sm\"\n icon=\"\u2715\"\n aria-label=\"Schlie\u00DFen\"\n (clicked)=\"closeDialog()\">\n </c2g-button>\n </div>\n\n <form class=\"c2g-pl-item-create__form\" (ngSubmit)=\"submit()\">\n <!-- Name Input -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().itemNameKey || 'Name'\"\n [required]=\"true\"\n [(ngModel)]=\"formData().name\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n name=\"name\"\n placeholder=\"z.B. Zelt, Schlafsack...\">\n </c2g-input>\n </div>\n\n <!-- Category Select -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-select\n [label]=\"(labels().categoryKey || 'Kategorie') + ' *'\"\n [options]=\"categoryOptions()\"\n [required]=\"true\"\n [(ngModel)]=\"formData().category\"\n name=\"category\">\n </c2g-select>\n </div>\n\n <!-- Visibility Radio -->\n @if (availableVisibilities().length > 1) {\n <div class=\"c2g-pl-item-create__field\">\n <c2g-radio-group\n [label]=\"(labels().visibilityKey || 'Sichtbarkeit') + ' *'\"\n [options]=\"availableVisibilities()\"\n [(ngModel)]=\"formData().visibility\"\n name=\"visibility\"\n orientation=\"vertical\">\n </c2g-radio-group>\n </div>\n }\n\n <!-- Essential Checkbox -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-checkbox\n [label]=\"labels().essentialKey || 'Essentiell'\"\n [(ngModel)]=\"formData().essential\"\n name=\"essential\">\n </c2g-checkbox>\n </div>\n\n <!-- Quantity -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().quantityKey || 'Menge'\"\n [(ngModel)]=\"formData().quantity\"\n name=\"quantity\"\n placeholder=\"z.B. 1\">\n </c2g-input>\n </div>\n\n <!-- Weight -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().weightKey || 'Gewicht (kg)'\"\n [(ngModel)]=\"formData().weightKg\"\n name=\"weightKg\"\n placeholder=\"z.B. 0.5\">\n </c2g-input>\n </div>\n\n <!-- Volume -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().volumeKey || 'Volumen (l)'\"\n [(ngModel)]=\"formData().packedVolumeL\"\n name=\"packedVolumeL\"\n placeholder=\"z.B. 1.5\">\n </c2g-input>\n </div>\n\n <!-- Hint -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-textarea\n [label]=\"labels().hintKey || 'Notiz'\"\n [(ngModel)]=\"formData().hint\"\n name=\"hint\"\n [rows]=\"2\"\n placeholder=\"z.B. Schlafsack f\u00FCr Kinder, Wetterschutz...\">\n </c2g-textarea>\n </div>\n\n <!-- Buttons -->\n <div class=\"c2g-pl-item-create__actions\">\n <c2g-button\n type=\"button\"\n variant=\"secondary\"\n size=\"md\"\n (clicked)=\"closeDialog()\">\n {{ labels().cancelKey || 'Abbrechen' }}\n </c2g-button>\n <c2g-button\n type=\"submit\"\n variant=\"primary\"\n size=\"md\"\n [disabled]=\"!formData().name.trim()\">\n {{ labels().createKey || 'Erstellen' }}\n </c2g-button>\n </div>\n </form>\n </dialog>\n}\n", styles: [".c2g-pl-item-create__btn{border:none;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.5rem;padding:.45rem .9rem;font-size:.9rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--c2g-color-outline);transition:all .2s ease}.c2g-pl-item-create__btn:hover:not(:disabled){background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}.c2g-pl-item-create__btn:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__icon{font-size:1.2rem;font-weight:600;line-height:1}.c2g-pl-item-create__overlay{position:fixed;inset:0;background:#152b2166;z-index:99}.c2g-pl-item-create__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;border:none;border-radius:.75rem;background:var(--c2g-color-surface);box-shadow:0 20px 40px #152b2133;padding:1.5rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}@media(max-width:600px){.c2g-pl-item-create__dialog{width:95%;padding:1.2rem}}.c2g-pl-item-create__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.c2g-pl-item-create__header h2{margin:0;font-size:1.3rem;font-weight:600;color:var(--c2g-color-text-primary)}.c2g-pl-item-create__close{border:none;background:transparent;color:var(--c2g-color-text-muted);font-size:1.8rem;line-height:1;padding:0;cursor:pointer;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.c2g-pl-item-create__close:hover{color:var(--c2g-color-text-primary)}.c2g-pl-item-create__form{display:grid;gap:1rem}.c2g-pl-item-create__field{display:grid;gap:.4rem}.c2g-pl-item-create__field label{font-weight:500;color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__field input[type=text],.c2g-pl-item-create__field input[type=number],.c2g-pl-item-create__field textarea,.c2g-pl-item-create__field select{border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;padding:.5rem .6rem;font-size:.9rem;font-family:inherit;color:var(--c2g-color-text-primary);background:var(--c2g-color-surface);transition:border-color .2s ease}.c2g-pl-item-create__field input[type=text]:focus,.c2g-pl-item-create__field input[type=number]:focus,.c2g-pl-item-create__field textarea:focus,.c2g-pl-item-create__field select:focus{outline:none;border-color:var(--c2g-color-text-primary);box-shadow:0 0 0 2px var(--c2g-color-border-soft)}.c2g-pl-item-create__field input[type=text]::placeholder,.c2g-pl-item-create__field input[type=number]::placeholder,.c2g-pl-item-create__field textarea::placeholder,.c2g-pl-item-create__field select::placeholder{color:var(--c2g-color-text-muted)}.c2g-pl-item-create__field textarea{resize:vertical;line-height:1.4}.c2g-pl-item-create__field select{cursor:pointer}.c2g-pl-item-create__checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__checkbox-label input[type=checkbox]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__checkbox-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__visibility-options{display:flex;flex-direction:column;gap:.5rem}.c2g-pl-item-create__visibility-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__visibility-label input[type=radio]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__visibility-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__actions{display:flex;gap:.8rem;margin-top:1.5rem;justify-content:flex-end}.c2g-pl-item-create__btn-primary{border:none;background:var(--c2g-color-text-primary);color:var(--c2g-color-surface);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-primary:hover:not(:disabled){background:var(--c2g-color-text-secondary)}.c2g-pl-item-create__btn-primary:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__btn-secondary{border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-secondary:hover{background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "c2g-button", inputs: ["variant", "size", "disabled", "loading", "icon", "iconPosition", "iconOnly", "ariaLabel", "loadingAriaLabel", "type"], outputs: ["clicked"] }, { kind: "component", type: RadioGroupComponent, selector: "c2g-radio-group", inputs: ["label", "hint", "disabled", "orientation", "options", "name"], outputs: ["valueChange"] }, { kind: "component", type: CheckboxComponent, selector: "c2g-checkbox", inputs: ["id", "label", "hint", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SelectComponent, selector: "c2g-select", inputs: ["label", "placeholder", "hint", "error", "options", "disabled", "required", "id"], outputs: ["valueChanged"] }, { kind: "component", type: InputComponent, selector: "c2g-input", inputs: ["label", "hint", "error", "placeholder", "prefix", "suffix", "loading", "disabled", "required", "maxLength", "id", "type"], outputs: ["valueChanged"] }, { kind: "component", type: TextareaComponent, selector: "c2g-textarea", inputs: ["label", "hint", "error", "placeholder", "prefix", "suffix", "loading", "disabled", "required", "maxLength", "rows", "id"], outputs: ["valueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1029
1029
|
}
|
|
1030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListItemCreateComponent, decorators: [{
|
|
1031
1031
|
type: Component,
|
|
1032
1032
|
args: [{ selector: 'c2g-packing-list-item-create', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, RadioGroupComponent, CheckboxComponent, SelectComponent, InputComponent, TextareaComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<c2g-button\n variant=\"secondary\"\n size=\"md\"\n icon=\"+\"\n [disabled]=\"readOnly()\"\n (clicked)=\"openDialog()\">\n {{ labels().addItemKey || 'Item hinzuf\u00FCgen' }}\n</c2g-button>\n\n@if (dialogOpen()) {\n <div class=\"c2g-pl-item-create__overlay\" (click)=\"closeDialog()\"></div>\n <dialog class=\"c2g-pl-item-create__dialog\" open>\n <div class=\"c2g-pl-item-create__header\">\n <h2>{{ labels().createItemKey || 'Neues Item' }}</h2>\n <c2g-button\n variant=\"icon\"\n size=\"sm\"\n icon=\"\u2715\"\n aria-label=\"Schlie\u00DFen\"\n (clicked)=\"closeDialog()\">\n </c2g-button>\n </div>\n\n <form class=\"c2g-pl-item-create__form\" (ngSubmit)=\"submit()\">\n <!-- Name Input -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().itemNameKey || 'Name'\"\n [required]=\"true\"\n [(ngModel)]=\"formData().name\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n name=\"name\"\n placeholder=\"z.B. Zelt, Schlafsack...\">\n </c2g-input>\n </div>\n\n <!-- Category Select -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-select\n [label]=\"(labels().categoryKey || 'Kategorie') + ' *'\"\n [options]=\"categoryOptions()\"\n [required]=\"true\"\n [(ngModel)]=\"formData().category\"\n name=\"category\">\n </c2g-select>\n </div>\n\n <!-- Visibility Radio -->\n @if (availableVisibilities().length > 1) {\n <div class=\"c2g-pl-item-create__field\">\n <c2g-radio-group\n [label]=\"(labels().visibilityKey || 'Sichtbarkeit') + ' *'\"\n [options]=\"availableVisibilities()\"\n [(ngModel)]=\"formData().visibility\"\n name=\"visibility\"\n orientation=\"vertical\">\n </c2g-radio-group>\n </div>\n }\n\n <!-- Essential Checkbox -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-checkbox\n [label]=\"labels().essentialKey || 'Essentiell'\"\n [(ngModel)]=\"formData().essential\"\n name=\"essential\">\n </c2g-checkbox>\n </div>\n\n <!-- Quantity -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().quantityKey || 'Menge'\"\n [(ngModel)]=\"formData().quantity\"\n name=\"quantity\"\n placeholder=\"z.B. 1\">\n </c2g-input>\n </div>\n\n <!-- Weight -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().weightKey || 'Gewicht (kg)'\"\n [(ngModel)]=\"formData().weightKg\"\n name=\"weightKg\"\n placeholder=\"z.B. 0.5\">\n </c2g-input>\n </div>\n\n <!-- Volume -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-input\n [label]=\"labels().volumeKey || 'Volumen (l)'\"\n [(ngModel)]=\"formData().packedVolumeL\"\n name=\"packedVolumeL\"\n placeholder=\"z.B. 1.5\">\n </c2g-input>\n </div>\n\n <!-- Hint -->\n <div class=\"c2g-pl-item-create__field\">\n <c2g-textarea\n [label]=\"labels().hintKey || 'Notiz'\"\n [(ngModel)]=\"formData().hint\"\n name=\"hint\"\n [rows]=\"2\"\n placeholder=\"z.B. Schlafsack f\u00FCr Kinder, Wetterschutz...\">\n </c2g-textarea>\n </div>\n\n <!-- Buttons -->\n <div class=\"c2g-pl-item-create__actions\">\n <c2g-button\n type=\"button\"\n variant=\"secondary\"\n size=\"md\"\n (clicked)=\"closeDialog()\">\n {{ labels().cancelKey || 'Abbrechen' }}\n </c2g-button>\n <c2g-button\n type=\"submit\"\n variant=\"primary\"\n size=\"md\"\n [disabled]=\"!formData().name.trim()\">\n {{ labels().createKey || 'Erstellen' }}\n </c2g-button>\n </div>\n </form>\n </dialog>\n}\n", styles: [".c2g-pl-item-create__btn{border:none;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.5rem;padding:.45rem .9rem;font-size:.9rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--c2g-color-outline);transition:all .2s ease}.c2g-pl-item-create__btn:hover:not(:disabled){background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}.c2g-pl-item-create__btn:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__icon{font-size:1.2rem;font-weight:600;line-height:1}.c2g-pl-item-create__overlay{position:fixed;inset:0;background:#152b2166;z-index:99}.c2g-pl-item-create__dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;border:none;border-radius:.75rem;background:var(--c2g-color-surface);box-shadow:0 20px 40px #152b2133;padding:1.5rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}@media(max-width:600px){.c2g-pl-item-create__dialog{width:95%;padding:1.2rem}}.c2g-pl-item-create__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.c2g-pl-item-create__header h2{margin:0;font-size:1.3rem;font-weight:600;color:var(--c2g-color-text-primary)}.c2g-pl-item-create__close{border:none;background:transparent;color:var(--c2g-color-text-muted);font-size:1.8rem;line-height:1;padding:0;cursor:pointer;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.c2g-pl-item-create__close:hover{color:var(--c2g-color-text-primary)}.c2g-pl-item-create__form{display:grid;gap:1rem}.c2g-pl-item-create__field{display:grid;gap:.4rem}.c2g-pl-item-create__field label{font-weight:500;color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__field input[type=text],.c2g-pl-item-create__field input[type=number],.c2g-pl-item-create__field textarea,.c2g-pl-item-create__field select{border:1px solid var(--c2g-color-outline-variant);border-radius:.4rem;padding:.5rem .6rem;font-size:.9rem;font-family:inherit;color:var(--c2g-color-text-primary);background:var(--c2g-color-surface);transition:border-color .2s ease}.c2g-pl-item-create__field input[type=text]:focus,.c2g-pl-item-create__field input[type=number]:focus,.c2g-pl-item-create__field textarea:focus,.c2g-pl-item-create__field select:focus{outline:none;border-color:var(--c2g-color-text-primary);box-shadow:0 0 0 2px var(--c2g-color-border-soft)}.c2g-pl-item-create__field input[type=text]::placeholder,.c2g-pl-item-create__field input[type=number]::placeholder,.c2g-pl-item-create__field textarea::placeholder,.c2g-pl-item-create__field select::placeholder{color:var(--c2g-color-text-muted)}.c2g-pl-item-create__field textarea{resize:vertical;line-height:1.4}.c2g-pl-item-create__field select{cursor:pointer}.c2g-pl-item-create__checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__checkbox-label input[type=checkbox]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__checkbox-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__visibility-options{display:flex;flex-direction:column;gap:.5rem}.c2g-pl-item-create__visibility-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.c2g-pl-item-create__visibility-label input[type=radio]{width:1.1rem;height:1.1rem;cursor:pointer}.c2g-pl-item-create__visibility-label span{color:var(--c2g-color-text-primary);font-size:.9rem}.c2g-pl-item-create__actions{display:flex;gap:.8rem;margin-top:1.5rem;justify-content:flex-end}.c2g-pl-item-create__btn-primary{border:none;background:var(--c2g-color-text-primary);color:var(--c2g-color-surface);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-primary:hover:not(:disabled){background:var(--c2g-color-text-secondary)}.c2g-pl-item-create__btn-primary:disabled{opacity:.5;cursor:not-allowed}.c2g-pl-item-create__btn-secondary{border:1px solid var(--c2g-color-outline);background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);border-radius:.4rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.c2g-pl-item-create__btn-secondary:hover{background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-text-primary)}\n"] }]
|
|
1033
|
-
}]
|
|
1033
|
+
}] });
|
|
1034
1034
|
|
|
1035
1035
|
class PackingListComponent {
|
|
1036
1036
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -1169,10 +1169,10 @@ class PackingListComponent {
|
|
|
1169
1169
|
}
|
|
1170
1170
|
this.expandedCategories.set(next);
|
|
1171
1171
|
}
|
|
1172
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1172
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackingListComponent, isStandalone: true, selector: "c2g-packing-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: true, transformFunction: null }, permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showPrivateAsSeparateList: { classPropertyName: "showPrivateAsSeparateList", publicName: "showPrivateAsSeparateList", isSignal: true, isRequired: false, transformFunction: null }, showStats: { classPropertyName: "showStats", publicName: "showStats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChecked: "itemChecked", itemAssigned: "itemAssigned", itemDeleted: "itemDeleted", itemEditRequested: "itemEditRequested", itemCreated: "itemCreated", personalItemToggled: "personalItemToggled", memberOverlayRequested: "memberOverlayRequested", externalMemberViewRequested: "externalMemberViewRequested", filterChanged: "filterChanged", sortChanged: "sortChanged", rowActionTriggered: "rowActionTriggered" }, ngImport: i0, template: "<section class=\"c2g-packing-list\">\n <header class=\"c2g-packing-list__header\">\n <c2g-packing-list-filters\n [filter]=\"filter()\"\n [members]=\"members()\"\n [labels]=\"labels()\"\n [disabled]=\"permissions().readOnly\"\n (filterChange)=\"onFilterChange($event)\"\n (overlayRequested)=\"onExternalMemberViewRequested()\">\n </c2g-packing-list-filters>\n\n <div class=\"c2g-packing-list__header-actions\">\n <c2g-packing-list-item-create\n [permissions]=\"permissions()\"\n [labels]=\"labels()\"\n [readOnly]=\"permissions().readOnly\"\n [categories]=\"categories()\"\n (itemCreated)=\"onItemCreated($event)\">\n </c2g-packing-list-item-create>\n </div>\n </header>\n\n @if (filteredItems().length === 0) {\n <p class=\"c2g-packing-list__empty\">{{ labels().emptyStateKey }}</p>\n }\n\n <div class=\"c2g-packing-list__categories\">\n @for (group of categoryGroups(); track group.key) {\n <c2g-packing-list-category\n [categoryKey]=\"group.key\"\n [items]=\"group.items\"\n [members]=\"members()\"\n [selectedMemberIds]=\"filter().memberIds\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n [expanded]=\"isCategoryExpanded(group.key)\"\n (toggle)=\"toggleCategory($event)\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-category>\n }\n </div>\n\n @if (showPrivateAsSeparateList()) {\n <c2g-packing-list-private-list\n [items]=\"filteredItems()\"\n [members]=\"members()\"\n [selectedMemberIds]=\"filter().memberIds\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n [labels]=\"labels()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-private-list>\n }\n</section>\n", styles: [".c2g-packing-list{display:grid;gap:.9rem}.c2g-packing-list__header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}.c2g-packing-list__header-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.c2g-packing-list__categories{display:grid;gap:.65rem}.c2g-packing-list__empty{margin:0;border:1px dashed var(--c2g-color-outline);border-radius:.75rem;background:var(--c2g-color-neutral-50);color:var(--c2g-color-text-muted);padding:.85rem;font-size:.9rem}\n"], dependencies: [{ kind: "component", type: PackingListFiltersComponent, selector: "c2g-packing-list-filters", inputs: ["filter", "members", "labels", "disabled"], outputs: ["filterChange", "overlayRequested"] }, { kind: "component", type: PackingListCategoryComponent, selector: "c2g-packing-list-category", inputs: ["categoryKey", "items", "members", "selectedMemberIds", "currentUserId", "permissions", "expanded"], outputs: ["toggle", "itemChecked", "itemAssigned", "itemDeleted", "itemEditRequested", "personalItemToggled", "memberOverlayRequested"] }, { kind: "component", type: PackingListPrivateListComponent, selector: "c2g-packing-list-private-list", inputs: ["items", "members", "selectedMemberIds", "currentUserId", "permissions", "labels"], outputs: ["itemChecked", "itemAssigned", "itemDeleted", "itemEditRequested", "personalItemToggled", "memberOverlayRequested"] }, { kind: "component", type: PackingListItemCreateComponent, selector: "c2g-packing-list-item-create", inputs: ["permissions", "labels", "readOnly", "categories"], outputs: ["itemCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1174
1174
|
}
|
|
1175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListComponent, decorators: [{
|
|
1176
1176
|
type: Component,
|
|
1177
1177
|
args: [{ selector: 'c2g-packing-list', standalone: true, imports: [
|
|
1178
1178
|
PackingListFiltersComponent,
|
|
@@ -1180,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
1180
1180
|
PackingListPrivateListComponent,
|
|
1181
1181
|
PackingListItemCreateComponent
|
|
1182
1182
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"c2g-packing-list\">\n <header class=\"c2g-packing-list__header\">\n <c2g-packing-list-filters\n [filter]=\"filter()\"\n [members]=\"members()\"\n [labels]=\"labels()\"\n [disabled]=\"permissions().readOnly\"\n (filterChange)=\"onFilterChange($event)\"\n (overlayRequested)=\"onExternalMemberViewRequested()\">\n </c2g-packing-list-filters>\n\n <div class=\"c2g-packing-list__header-actions\">\n <c2g-packing-list-item-create\n [permissions]=\"permissions()\"\n [labels]=\"labels()\"\n [readOnly]=\"permissions().readOnly\"\n [categories]=\"categories()\"\n (itemCreated)=\"onItemCreated($event)\">\n </c2g-packing-list-item-create>\n </div>\n </header>\n\n @if (filteredItems().length === 0) {\n <p class=\"c2g-packing-list__empty\">{{ labels().emptyStateKey }}</p>\n }\n\n <div class=\"c2g-packing-list__categories\">\n @for (group of categoryGroups(); track group.key) {\n <c2g-packing-list-category\n [categoryKey]=\"group.key\"\n [items]=\"group.items\"\n [members]=\"members()\"\n [selectedMemberIds]=\"filter().memberIds\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n [expanded]=\"isCategoryExpanded(group.key)\"\n (toggle)=\"toggleCategory($event)\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-category>\n }\n </div>\n\n @if (showPrivateAsSeparateList()) {\n <c2g-packing-list-private-list\n [items]=\"filteredItems()\"\n [members]=\"members()\"\n [selectedMemberIds]=\"filter().memberIds\"\n [currentUserId]=\"currentUserId()\"\n [permissions]=\"permissions()\"\n [labels]=\"labels()\"\n (itemChecked)=\"itemChecked.emit($event)\"\n (itemAssigned)=\"itemAssigned.emit($event)\"\n (itemDeleted)=\"itemDeleted.emit($event)\"\n (itemEditRequested)=\"itemEditRequested.emit($event)\"\n (personalItemToggled)=\"personalItemToggled.emit($event)\"\n (memberOverlayRequested)=\"memberOverlayRequested.emit($event)\">\n </c2g-packing-list-private-list>\n }\n</section>\n", styles: [".c2g-packing-list{display:grid;gap:.9rem}.c2g-packing-list__header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}.c2g-packing-list__header-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.c2g-packing-list__categories{display:grid;gap:.65rem}.c2g-packing-list__empty{margin:0;border:1px dashed var(--c2g-color-outline);border-radius:.75rem;background:var(--c2g-color-neutral-50);color:var(--c2g-color-text-muted);padding:.85rem;font-size:.9rem}\n"] }]
|
|
1183
|
-
}], ctorParameters: () => []
|
|
1183
|
+
}], ctorParameters: () => [] });
|
|
1184
1184
|
|
|
1185
1185
|
class PackingListStatsComponent {
|
|
1186
1186
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -1190,13 +1190,13 @@ class PackingListStatsComponent {
|
|
|
1190
1190
|
const essential = items.filter(item => !!item.essential).length;
|
|
1191
1191
|
return { total: items.length, packed, essential };
|
|
1192
1192
|
}, ...(ngDevMode ? [{ debugName: "stats" }] : []));
|
|
1193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
1193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: PackingListStatsComponent, isStandalone: true, selector: "c2g-packing-list-stats", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-pl-stats\">\n <span>{{ stats().packed }}/{{ stats().total }}</span>\n <span>essential: {{ stats().essential }}</span>\n</div>\n", styles: [".c2g-pl-stats{display:inline-flex;gap:.8rem;align-items:center;font-size:.8rem;color:var(--c2g-color-text-secondary);border:1px solid var(--c2g-color-outline);border-radius:999px;padding:.25rem .6rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1195
1195
|
}
|
|
1196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackingListStatsComponent, decorators: [{
|
|
1197
1197
|
type: Component,
|
|
1198
1198
|
args: [{ selector: 'c2g-packing-list-stats', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-pl-stats\">\n <span>{{ stats().packed }}/{{ stats().total }}</span>\n <span>essential: {{ stats().essential }}</span>\n</div>\n", styles: [".c2g-pl-stats{display:inline-flex;gap:.8rem;align-items:center;font-size:.8rem;color:var(--c2g-color-text-secondary);border:1px solid var(--c2g-color-outline);border-radius:999px;padding:.25rem .6rem}\n"] }]
|
|
1199
|
-
}]
|
|
1199
|
+
}] });
|
|
1200
1200
|
|
|
1201
1201
|
const WEATHER_ICON_MAP = {
|
|
1202
1202
|
'sunny': '☀️',
|
|
@@ -1255,13 +1255,13 @@ class WeatherWidgetComponent {
|
|
|
1255
1255
|
return 'Abreise';
|
|
1256
1256
|
return 'Mitte';
|
|
1257
1257
|
}
|
|
1258
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1258
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeatherWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: WeatherWidgetComponent, isStandalone: true, selector: "c2g-weather-widget", inputs: { currentDay: { classPropertyName: "currentDay", publicName: "currentDay", isSignal: true, isRequired: false, transformFunction: null }, forecastSlots: { classPropertyName: "forecastSlots", publicName: "forecastSlots", isSignal: true, isRequired: false, transformFunction: null }, destination: { classPropertyName: "destination", publicName: "destination", isSignal: true, isRequired: false, transformFunction: null }, dates: { classPropertyName: "dates", publicName: "dates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (currentDay()) {\n <div class=\"wx-widget\">\n <!-- Hero: current/start-day weather -->\n <div class=\"wx-hero\">\n <span class=\"wx-hero__icon\">{{ getWeatherIcon(currentDay()!.icon) }}</span>\n <div class=\"wx-hero__body\">\n <div class=\"wx-hero__temp\">{{ currentDay()!.temperature.max }}<sup>\u00B0</sup></div>\n <div class=\"wx-hero__condition\">{{ currentDay()!.description }}</div>\n @if (destination()) {\n <div class=\"wx-hero__meta\">\n <span class=\"wx-hero__location\">\uD83D\uDCCD {{ destination() }}</span>\n @if (dates()) {\n <span class=\"wx-hero__daterange\">\n {{ formatShortDate(dates()!.from) }} \u2013 {{ formatShortDate(dates()!.to) }}\n </span>\n }\n </div>\n }\n </div>\n <div class=\"wx-hero__range\">\n <span class=\"wx-range__high\">\u2191 {{ currentDay()!.temperature.max }}\u00B0</span>\n <span class=\"wx-range__low\">\u2193 {{ currentDay()!.temperature.min }}\u00B0</span>\n </div>\n </div>\n\n <!-- Forecast slots -->\n @if (forecastSlots().length > 1) {\n <div class=\"wx-forecast\" [attr.data-slots]=\"forecastSlots().length\">\n @for (slot of forecastSlots(); track $index) {\n <div class=\"wx-slot\">\n <span class=\"wx-slot__label\">{{ getSlotLabel($index, forecastSlots().length) }}</span>\n <span class=\"wx-slot__date\">{{ formatDate(slot.date) }}</span>\n <span class=\"wx-slot__icon\">{{ getWeatherIcon(slot.icon) }}</span>\n <div class=\"wx-slot__temps\">\n <span class=\"wx-slot__max\">{{ slot.temperature.max }}\u00B0</span>\n <span class=\"wx-slot__min\">{{ slot.temperature.min }}\u00B0</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n} @else {\n <div class=\"wx-empty\">Wetter erscheint nach Ziel- und Datumsauswahl.</div>\n}\n", styles: [".wx-widget{display:flex;flex-direction:column;gap:.75rem;font-family:inherit}.wx-hero{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:14px;background:linear-gradient(135deg,var(--c2g-color-primary-light) 0%,var(--c2g-color-primary-container) 100%);border:1px solid var(--c2g-color-border-subtle)}.wx-hero__icon{font-size:2.6rem;line-height:1;flex-shrink:0}.wx-hero__body{flex:1;min-width:0}.wx-hero__temp{font-size:2rem;font-weight:700;color:var(--c2g-color-text-primary);line-height:1;letter-spacing:-.03em}.wx-hero__temp sup{font-size:1rem;font-weight:500;vertical-align:super}.wx-hero__condition{font-size:.82rem;color:var(--c2g-color-text-secondary);margin-top:.15rem;font-weight:500}.wx-hero__meta{display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin-top:.3rem;font-size:.75rem;color:var(--c2g-color-text-muted)}.wx-hero__location{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}.wx-hero__daterange{opacity:.75;white-space:nowrap}.wx-range__high{display:block;font-size:.82rem;font-weight:700;color:var(--c2g-color-primary-dark)}.wx-range__low{display:block;font-size:.78rem;color:var(--c2g-color-info);margin-top:.1rem}.wx-forecast{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.wx-forecast[data-slots=\"3\"]{grid-template-columns:repeat(3,1fr)}.wx-slot{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.6rem .4rem .55rem;border-radius:10px;border:1px solid var(--c2g-color-border-soft);background:var(--c2g-color-surface);text-align:center}.wx-slot__label{font-size:.62rem;font-weight:700;color:var(--c2g-color-primary-dark);text-transform:uppercase;letter-spacing:.06em}.wx-slot__date{font-size:.67rem;color:var(--c2g-color-text-muted);line-height:1.2}.wx-slot__icon{font-size:1.5rem;margin:.15rem 0;line-height:1}.wx-slot__temps{display:flex;gap:.3rem;align-items:baseline}.wx-slot__max{font-size:.88rem;font-weight:700;color:var(--c2g-color-text-primary)}.wx-slot__min{font-size:.75rem;color:var(--c2g-color-info)}.wx-empty{padding:.75rem;font-size:.85rem;color:var(--c2g-color-text-muted);text-align:center}@media(max-width:480px){.wx-hero__icon{font-size:2.1rem}.wx-hero__temp{font-size:1.7rem}.wx-slot{padding:.5rem .25rem}.wx-slot__icon{font-size:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1260
1260
|
}
|
|
1261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeatherWidgetComponent, decorators: [{
|
|
1262
1262
|
type: Component,
|
|
1263
1263
|
args: [{ selector: 'c2g-weather-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (currentDay()) {\n <div class=\"wx-widget\">\n <!-- Hero: current/start-day weather -->\n <div class=\"wx-hero\">\n <span class=\"wx-hero__icon\">{{ getWeatherIcon(currentDay()!.icon) }}</span>\n <div class=\"wx-hero__body\">\n <div class=\"wx-hero__temp\">{{ currentDay()!.temperature.max }}<sup>\u00B0</sup></div>\n <div class=\"wx-hero__condition\">{{ currentDay()!.description }}</div>\n @if (destination()) {\n <div class=\"wx-hero__meta\">\n <span class=\"wx-hero__location\">\uD83D\uDCCD {{ destination() }}</span>\n @if (dates()) {\n <span class=\"wx-hero__daterange\">\n {{ formatShortDate(dates()!.from) }} \u2013 {{ formatShortDate(dates()!.to) }}\n </span>\n }\n </div>\n }\n </div>\n <div class=\"wx-hero__range\">\n <span class=\"wx-range__high\">\u2191 {{ currentDay()!.temperature.max }}\u00B0</span>\n <span class=\"wx-range__low\">\u2193 {{ currentDay()!.temperature.min }}\u00B0</span>\n </div>\n </div>\n\n <!-- Forecast slots -->\n @if (forecastSlots().length > 1) {\n <div class=\"wx-forecast\" [attr.data-slots]=\"forecastSlots().length\">\n @for (slot of forecastSlots(); track $index) {\n <div class=\"wx-slot\">\n <span class=\"wx-slot__label\">{{ getSlotLabel($index, forecastSlots().length) }}</span>\n <span class=\"wx-slot__date\">{{ formatDate(slot.date) }}</span>\n <span class=\"wx-slot__icon\">{{ getWeatherIcon(slot.icon) }}</span>\n <div class=\"wx-slot__temps\">\n <span class=\"wx-slot__max\">{{ slot.temperature.max }}\u00B0</span>\n <span class=\"wx-slot__min\">{{ slot.temperature.min }}\u00B0</span>\n </div>\n </div>\n }\n </div>\n }\n </div>\n} @else {\n <div class=\"wx-empty\">Wetter erscheint nach Ziel- und Datumsauswahl.</div>\n}\n", styles: [".wx-widget{display:flex;flex-direction:column;gap:.75rem;font-family:inherit}.wx-hero{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:14px;background:linear-gradient(135deg,var(--c2g-color-primary-light) 0%,var(--c2g-color-primary-container) 100%);border:1px solid var(--c2g-color-border-subtle)}.wx-hero__icon{font-size:2.6rem;line-height:1;flex-shrink:0}.wx-hero__body{flex:1;min-width:0}.wx-hero__temp{font-size:2rem;font-weight:700;color:var(--c2g-color-text-primary);line-height:1;letter-spacing:-.03em}.wx-hero__temp sup{font-size:1rem;font-weight:500;vertical-align:super}.wx-hero__condition{font-size:.82rem;color:var(--c2g-color-text-secondary);margin-top:.15rem;font-weight:500}.wx-hero__meta{display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin-top:.3rem;font-size:.75rem;color:var(--c2g-color-text-muted)}.wx-hero__location{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}.wx-hero__daterange{opacity:.75;white-space:nowrap}.wx-range__high{display:block;font-size:.82rem;font-weight:700;color:var(--c2g-color-primary-dark)}.wx-range__low{display:block;font-size:.78rem;color:var(--c2g-color-info);margin-top:.1rem}.wx-forecast{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.wx-forecast[data-slots=\"3\"]{grid-template-columns:repeat(3,1fr)}.wx-slot{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.6rem .4rem .55rem;border-radius:10px;border:1px solid var(--c2g-color-border-soft);background:var(--c2g-color-surface);text-align:center}.wx-slot__label{font-size:.62rem;font-weight:700;color:var(--c2g-color-primary-dark);text-transform:uppercase;letter-spacing:.06em}.wx-slot__date{font-size:.67rem;color:var(--c2g-color-text-muted);line-height:1.2}.wx-slot__icon{font-size:1.5rem;margin:.15rem 0;line-height:1}.wx-slot__temps{display:flex;gap:.3rem;align-items:baseline}.wx-slot__max{font-size:.88rem;font-weight:700;color:var(--c2g-color-text-primary)}.wx-slot__min{font-size:.75rem;color:var(--c2g-color-info)}.wx-empty{padding:.75rem;font-size:.85rem;color:var(--c2g-color-text-muted);text-align:center}@media(max-width:480px){.wx-hero__icon{font-size:2.1rem}.wx-hero__temp{font-size:1.7rem}.wx-slot{padding:.5rem .25rem}.wx-slot__icon{font-size:1.25rem}}\n"] }]
|
|
1264
|
-
}]
|
|
1264
|
+
}] });
|
|
1265
1265
|
|
|
1266
1266
|
class MemberTagsComponent {
|
|
1267
1267
|
isCurrentUser = input(false, ...(ngDevMode ? [{ debugName: "isCurrentUser" }] : []));
|
|
@@ -1285,13 +1285,13 @@ class MemberTagsComponent {
|
|
|
1285
1285
|
return '';
|
|
1286
1286
|
}
|
|
1287
1287
|
}
|
|
1288
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1289
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1288
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1289
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MemberTagsComponent, isStandalone: true, selector: "c2g-member-tags", inputs: { isCurrentUser: { classPropertyName: "isCurrentUser", publicName: "isCurrentUser", isSignal: true, isRequired: false, transformFunction: null }, isRegistered: { classPropertyName: "isRegistered", publicName: "isRegistered", isSignal: true, isRequired: false, transformFunction: null }, roleKey: { classPropertyName: "roleKey", publicName: "roleKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isCurrentUser()) {\n <span class=\"tw-member__you-badge\">Du</span>\n}\n\n@if (!isRegistered()) {\n <span class=\"tw-member__unreg-badge\">Ohne Account</span>\n}\n\n@if (roleKey()) {\n <span class=\"tw-member__role\">{{ getRoleLabel(roleKey()) }}</span>\n}\n", styles: [".tw-member__you-badge{font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--c2g-color-secondary-dark);color:var(--c2g-color-surface);text-transform:uppercase;letter-spacing:.06em}.tw-member__unreg-badge{font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--c2g-color-primary-container);color:var(--c2g-color-on-primary-container);text-transform:uppercase;letter-spacing:.06em}.tw-member__role{font-size:.78rem;font-weight:600;color:var(--c2g-color-secondary-dark);padding:.25rem .65rem;border-radius:999px;background:var(--c2g-color-secondary-container);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1290
1290
|
}
|
|
1291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberTagsComponent, decorators: [{
|
|
1292
1292
|
type: Component,
|
|
1293
1293
|
args: [{ selector: 'c2g-member-tags', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isCurrentUser()) {\n <span class=\"tw-member__you-badge\">Du</span>\n}\n\n@if (!isRegistered()) {\n <span class=\"tw-member__unreg-badge\">Ohne Account</span>\n}\n\n@if (roleKey()) {\n <span class=\"tw-member__role\">{{ getRoleLabel(roleKey()) }}</span>\n}\n", styles: [".tw-member__you-badge{font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--c2g-color-secondary-dark);color:var(--c2g-color-surface);text-transform:uppercase;letter-spacing:.06em}.tw-member__unreg-badge{font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;background:var(--c2g-color-primary-container);color:var(--c2g-color-on-primary-container);text-transform:uppercase;letter-spacing:.06em}.tw-member__role{font-size:.78rem;font-weight:600;color:var(--c2g-color-secondary-dark);padding:.25rem .65rem;border-radius:999px;background:var(--c2g-color-secondary-container);white-space:nowrap}\n"] }]
|
|
1294
|
-
}]
|
|
1294
|
+
}] });
|
|
1295
1295
|
|
|
1296
1296
|
class ActionMenuComponent {
|
|
1297
1297
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -1303,13 +1303,13 @@ class ActionMenuComponent {
|
|
|
1303
1303
|
return;
|
|
1304
1304
|
this.itemSelected.emit(item);
|
|
1305
1305
|
}
|
|
1306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1306
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ActionMenuComponent, isStandalone: true, selector: "c2g-action-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"c2g-action-menu\">\n <button\n class=\"c2g-action-menu__trigger\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [cdkMenuTriggerFor]=\"menuPanel\">\n {{ triggerLabel() }}\n </button>\n\n <ng-template #menuPanel>\n <ul class=\"c2g-action-menu__list\" cdkMenu>\n @for (item of items(); track item.key) {\n <li role=\"none\">\n <button\n class=\"c2g-action-menu__item\"\n [class.c2g-action-menu__item--danger]=\"item.variant === 'danger'\"\n [class.c2g-action-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"select(item)\">\n @if (item.icon) {\n <span class=\"c2g-action-menu__item-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n </button>\n </li>\n }\n </ul>\n </ng-template>\n</div>\n", styles: [".c2g-action-menu{position:relative;display:inline-flex}.c2g-action-menu__trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--c2g-color-text-muted);font-size:1.1rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.c2g-action-menu__trigger:hover{background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-outline);color:var(--c2g-color-text-primary)}.c2g-action-menu__trigger[aria-expanded=true]{background:var(--c2g-color-secondary-container);border-color:var(--c2g-color-outline-variant);color:var(--c2g-color-secondary-dark)}.c2g-action-menu__list{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:160px;margin:0;padding:.3rem;list-style:none;background:var(--c2g-color-surface);border:1px solid var(--c2g-color-outline-variant);border-radius:10px;box-shadow:0 4px 16px #0000001a,0 1px 4px #0000000f}.c2g-action-menu__item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;border-radius:7px;background:transparent;font-size:.85rem;font-weight:500;color:var(--c2g-color-text-primary);cursor:pointer;text-align:left;transition:background .1s}.c2g-action-menu__item:hover:not([disabled]){background:var(--c2g-color-neutral-100)}.c2g-action-menu__item--danger{color:var(--c2g-color-error)}.c2g-action-menu__item--danger:hover:not([disabled]){background:var(--c2g-color-primary-light)}.c2g-action-menu__item--disabled,.c2g-action-menu__item[disabled]{opacity:.4;cursor:not-allowed}.c2g-action-menu__item-icon{font-size:1rem;line-height:1;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1308
1308
|
}
|
|
1309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActionMenuComponent, decorators: [{
|
|
1310
1310
|
type: Component,
|
|
1311
1311
|
args: [{ selector: 'c2g-action-menu', standalone: true, imports: [CdkMenu, CdkMenuItem, CdkMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-action-menu\">\n <button\n class=\"c2g-action-menu__trigger\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [cdkMenuTriggerFor]=\"menuPanel\">\n {{ triggerLabel() }}\n </button>\n\n <ng-template #menuPanel>\n <ul class=\"c2g-action-menu__list\" cdkMenu>\n @for (item of items(); track item.key) {\n <li role=\"none\">\n <button\n class=\"c2g-action-menu__item\"\n [class.c2g-action-menu__item--danger]=\"item.variant === 'danger'\"\n [class.c2g-action-menu__item--disabled]=\"item.disabled\"\n [disabled]=\"item.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"select(item)\">\n @if (item.icon) {\n <span class=\"c2g-action-menu__item-icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n </button>\n </li>\n }\n </ul>\n </ng-template>\n</div>\n", styles: [".c2g-action-menu{position:relative;display:inline-flex}.c2g-action-menu__trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--c2g-color-text-muted);font-size:1.1rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.c2g-action-menu__trigger:hover{background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-outline);color:var(--c2g-color-text-primary)}.c2g-action-menu__trigger[aria-expanded=true]{background:var(--c2g-color-secondary-container);border-color:var(--c2g-color-outline-variant);color:var(--c2g-color-secondary-dark)}.c2g-action-menu__list{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:160px;margin:0;padding:.3rem;list-style:none;background:var(--c2g-color-surface);border:1px solid var(--c2g-color-outline-variant);border-radius:10px;box-shadow:0 4px 16px #0000001a,0 1px 4px #0000000f}.c2g-action-menu__item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;border-radius:7px;background:transparent;font-size:.85rem;font-weight:500;color:var(--c2g-color-text-primary);cursor:pointer;text-align:left;transition:background .1s}.c2g-action-menu__item:hover:not([disabled]){background:var(--c2g-color-neutral-100)}.c2g-action-menu__item--danger{color:var(--c2g-color-error)}.c2g-action-menu__item--danger:hover:not([disabled]){background:var(--c2g-color-primary-light)}.c2g-action-menu__item--disabled,.c2g-action-menu__item[disabled]{opacity:.4;cursor:not-allowed}.c2g-action-menu__item-icon{font-size:1rem;line-height:1;flex-shrink:0}\n"] }]
|
|
1312
|
-
}]
|
|
1312
|
+
}] });
|
|
1313
1313
|
|
|
1314
1314
|
class MemberItemComponent {
|
|
1315
1315
|
member = input.required(...(ngDevMode ? [{ debugName: "member" }] : []));
|
|
@@ -1351,39 +1351,39 @@ class MemberItemComponent {
|
|
|
1351
1351
|
return type;
|
|
1352
1352
|
}
|
|
1353
1353
|
}
|
|
1354
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
1354
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: MemberItemComponent, isStandalone: true, selector: "c2g-member-item", inputs: { member: { classPropertyName: "member", publicName: "member", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", invite: "invite", edit: "edit" }, ngImport: i0, template: "<c2g-avatar\n [initials]=\"member().avatarInitials\"\n [name]=\"member().name\"\n [backgroundColor]=\"avatarBackgroundColor()\"\n [textColor]=\"avatarTextColor()\"\n ringTone=\"neutral\">\n</c2g-avatar>\n\n<div class=\"tw-member__info\">\n <span class=\"tw-member__name\">\n {{ member().name }}\n <c2g-member-tags\n [isCurrentUser]=\"member().isCurrentUser ?? false\"\n [isRegistered]=\"member().isRegistered ?? true\">\n </c2g-member-tags>\n </span>\n <span class=\"tw-member__type\">{{ getMemberTypeLabel(member().type) }}</span>\n</div>\n\n<c2g-member-tags\n [isCurrentUser]=\"false\"\n [isRegistered]=\"true\"\n [roleKey]=\"member().roleKey\">\n</c2g-member-tags>\n\n<c2g-action-menu\n [items]=\"menuItems()\"\n ariaLabel=\"Mitglied-Aktionen\"\n (itemSelected)=\"onMenuItemSelected($event)\">\n</c2g-action-menu>\n", styles: [":host{display:contents}.tw-member__info{display:flex;flex-direction:column;flex:1;min-width:0}.tw-member__name{font-size:.9rem;font-weight:700;color:var(--c2g-color-text-primary);display:flex;align-items:center;gap:.4rem}.tw-member__type{font-size:.76rem;color:var(--c2g-color-text-muted)}\n"], dependencies: [{ kind: "component", type: MemberTagsComponent, selector: "c2g-member-tags", inputs: ["isCurrentUser", "isRegistered", "roleKey"] }, { kind: "component", type: ActionMenuComponent, selector: "c2g-action-menu", inputs: ["items", "triggerLabel", "ariaLabel"], outputs: ["itemSelected"] }, { kind: "component", type: AvatarComponent, selector: "c2g-avatar", inputs: ["name", "initials", "imageUrl", "ariaLabel", "size", "backgroundColor", "textColor", "ringTone", "ringColor", "clickable", "disabled", "badge"], outputs: ["avatarClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1356
1356
|
}
|
|
1357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberItemComponent, decorators: [{
|
|
1358
1358
|
type: Component,
|
|
1359
1359
|
args: [{ selector: 'c2g-member-item', standalone: true, imports: [MemberTagsComponent, ActionMenuComponent, AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<c2g-avatar\n [initials]=\"member().avatarInitials\"\n [name]=\"member().name\"\n [backgroundColor]=\"avatarBackgroundColor()\"\n [textColor]=\"avatarTextColor()\"\n ringTone=\"neutral\">\n</c2g-avatar>\n\n<div class=\"tw-member__info\">\n <span class=\"tw-member__name\">\n {{ member().name }}\n <c2g-member-tags\n [isCurrentUser]=\"member().isCurrentUser ?? false\"\n [isRegistered]=\"member().isRegistered ?? true\">\n </c2g-member-tags>\n </span>\n <span class=\"tw-member__type\">{{ getMemberTypeLabel(member().type) }}</span>\n</div>\n\n<c2g-member-tags\n [isCurrentUser]=\"false\"\n [isRegistered]=\"true\"\n [roleKey]=\"member().roleKey\">\n</c2g-member-tags>\n\n<c2g-action-menu\n [items]=\"menuItems()\"\n ariaLabel=\"Mitglied-Aktionen\"\n (itemSelected)=\"onMenuItemSelected($event)\">\n</c2g-action-menu>\n", styles: [":host{display:contents}.tw-member__info{display:flex;flex-direction:column;flex:1;min-width:0}.tw-member__name{font-size:.9rem;font-weight:700;color:var(--c2g-color-text-primary);display:flex;align-items:center;gap:.4rem}.tw-member__type{font-size:.76rem;color:var(--c2g-color-text-muted)}\n"] }]
|
|
1360
|
-
}]
|
|
1360
|
+
}] });
|
|
1361
1361
|
|
|
1362
1362
|
class MemberListComponent {
|
|
1363
1363
|
members = input.required(...(ngDevMode ? [{ debugName: "members" }] : []));
|
|
1364
1364
|
memberRemove = output();
|
|
1365
1365
|
memberInvite = output();
|
|
1366
1366
|
memberEdit = output();
|
|
1367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MemberListComponent, isStandalone: true, selector: "c2g-member-list", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { memberRemove: "memberRemove", memberInvite: "memberInvite", memberEdit: "memberEdit" }, ngImport: i0, template: "<ul class=\"tw-member-list\">\n @for (member of members(); track member.id) {\n <li class=\"tw-member\">\n <c2g-member-item\n [member]=\"member\"\n (remove)=\"memberRemove.emit($event)\"\n (invite)=\"memberInvite.emit($event)\"\n (edit)=\"memberEdit.emit($event)\">\n </c2g-member-item>\n </li>\n }\n</ul>\n", styles: [".tw-member-list{list-style:none;margin:0;padding:0}.tw-member{display:flex;align-items:center;gap:1rem;padding:.9rem 1.4rem;border-bottom:1px solid var(--c2g-color-neutral-100)}.tw-member:last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: MemberItemComponent, selector: "c2g-member-item", inputs: ["member"], outputs: ["remove", "invite", "edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1369
1369
|
}
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberListComponent, decorators: [{
|
|
1371
1371
|
type: Component,
|
|
1372
1372
|
args: [{ selector: 'c2g-member-list', standalone: true, imports: [MemberItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"tw-member-list\">\n @for (member of members(); track member.id) {\n <li class=\"tw-member\">\n <c2g-member-item\n [member]=\"member\"\n (remove)=\"memberRemove.emit($event)\"\n (invite)=\"memberInvite.emit($event)\"\n (edit)=\"memberEdit.emit($event)\">\n </c2g-member-item>\n </li>\n }\n</ul>\n", styles: [".tw-member-list{list-style:none;margin:0;padding:0}.tw-member{display:flex;align-items:center;gap:1rem;padding:.9rem 1.4rem;border-bottom:1px solid var(--c2g-color-neutral-100)}.tw-member:last-child{border-bottom:none}\n"] }]
|
|
1373
|
-
}]
|
|
1373
|
+
}] });
|
|
1374
1374
|
|
|
1375
1375
|
class MemberPanelComponent {
|
|
1376
1376
|
members = input.required(...(ngDevMode ? [{ debugName: "members" }] : []));
|
|
1377
1377
|
memberRemove = output();
|
|
1378
1378
|
memberInvite = output();
|
|
1379
1379
|
memberEdit = output();
|
|
1380
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1381
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
1380
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1381
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: MemberPanelComponent, isStandalone: true, selector: "c2g-member-panel", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { memberRemove: "memberRemove", memberInvite: "memberInvite", memberEdit: "memberEdit" }, ngImport: i0, template: "<div class=\"tw-card\">\n <div class=\"tw-card__header\">\n <h2 class=\"tw-card__title\">Teilnehmer ({{ members().length }})</h2>\n <ng-content select=\"[slot=header-actions]\"></ng-content>\n </div>\n\n <c2g-member-list\n [members]=\"members()\"\n (memberRemove)=\"memberRemove.emit($event)\"\n (memberInvite)=\"memberInvite.emit($event)\"\n (memberEdit)=\"memberEdit.emit($event)\">\n </c2g-member-list>\n</div>\n", styles: [".tw-card{background:var(--c2g-color-surface);border-radius:12px;border:1px solid var(--c2g-color-outline-variant);overflow:hidden}.tw-card__header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--c2g-color-neutral-100)}.tw-card__title{margin:0;font-size:.96rem;font-weight:700;color:var(--c2g-color-text-primary)}\n"], dependencies: [{ kind: "component", type: MemberListComponent, selector: "c2g-member-list", inputs: ["members"], outputs: ["memberRemove", "memberInvite", "memberEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1382
1382
|
}
|
|
1383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberPanelComponent, decorators: [{
|
|
1384
1384
|
type: Component,
|
|
1385
1385
|
args: [{ selector: 'c2g-member-panel', standalone: true, imports: [MemberListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-card\">\n <div class=\"tw-card__header\">\n <h2 class=\"tw-card__title\">Teilnehmer ({{ members().length }})</h2>\n <ng-content select=\"[slot=header-actions]\"></ng-content>\n </div>\n\n <c2g-member-list\n [members]=\"members()\"\n (memberRemove)=\"memberRemove.emit($event)\"\n (memberInvite)=\"memberInvite.emit($event)\"\n (memberEdit)=\"memberEdit.emit($event)\">\n </c2g-member-list>\n</div>\n", styles: [".tw-card{background:var(--c2g-color-surface);border-radius:12px;border:1px solid var(--c2g-color-outline-variant);overflow:hidden}.tw-card__header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--c2g-color-neutral-100)}.tw-card__title{margin:0;font-size:.96rem;font-weight:700;color:var(--c2g-color-text-primary)}\n"] }]
|
|
1386
|
-
}]
|
|
1386
|
+
}] });
|
|
1387
1387
|
|
|
1388
1388
|
class MenuComponent {
|
|
1389
1389
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -1401,13 +1401,13 @@ class MenuComponent {
|
|
|
1401
1401
|
return;
|
|
1402
1402
|
this.itemSelected.emit({ item: child, parent });
|
|
1403
1403
|
}
|
|
1404
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1404
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MenuComponent, isStandalone: true, selector: "c2g-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"c2g-menu\">\n <button\n class=\"c2g-menu__trigger\"\n type=\"button\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n [cdkMenuTriggerFor]=\"menuPanel\">\n {{ triggerLabel() }}\n </button>\n\n <ng-template #menuPanel>\n <ul class=\"c2g-menu__list\" cdkMenu>\n @for (item of flatItems(); track item.key) {\n <li\n class=\"c2g-menu__entry\"\n [class.c2g-menu__entry--has-children]=\"(item.children?.length ?? 0) > 0\">\n\n @if ((item.children?.length ?? 0) > 0) {\n <button\n class=\"c2g-menu__item\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [disabled]=\"item.disabled ?? false\"\n type=\"button\">\n @if (item.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n <span class=\"c2g-menu__caret\" aria-hidden=\"true\">\u203A</span>\n </button>\n\n <ng-template #subMenu>\n <ul class=\"c2g-menu__submenu\" cdkMenu>\n @for (child of item.children ?? []; track child.key) {\n <li role=\"none\">\n <button\n class=\"c2g-menu__item\"\n [class.c2g-menu__item--danger]=\"child.variant === 'danger'\"\n [disabled]=\"child.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"selectChild(item, child)\">\n @if (child.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n }\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n </ng-template>\n } @else {\n <button\n class=\"c2g-menu__item\"\n [class.c2g-menu__item--danger]=\"item.variant === 'danger'\"\n [disabled]=\"item.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"select(item)\">\n @if (item.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n </ng-template>\n</div>\n", styles: [".c2g-menu{position:relative;display:inline-flex}.c2g-menu__trigger{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.35rem .75rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.875rem;font-weight:600;cursor:pointer}.c2g-menu__trigger:hover{background:var(--c2g-color-neutral-100)}.c2g-menu__trigger:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:2px}.c2g-menu__list,.c2g-menu__submenu{margin:0;padding:.25rem;list-style:none;background:var(--c2g-color-surface);border:1px solid var(--c2g-color-outline-variant);border-radius:.625rem;box-shadow:0 8px 22px #1018281f}.c2g-menu__list{position:absolute;top:calc(100% + .35rem);left:0;min-width:13rem;z-index:100}.c2g-menu__entry{position:relative}.c2g-menu__entry--active>.c2g-menu__item,.c2g-menu__item:hover:not([disabled]){background:var(--c2g-color-secondary-container)}.c2g-menu__item{width:100%;display:flex;align-items:center;gap:.5rem;border:0;border-radius:.45rem;background:transparent;color:var(--c2g-color-text-primary);font-size:.84rem;font-weight:500;padding:.5rem .65rem;text-align:left;cursor:pointer}.c2g-menu__item:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:-2px}.c2g-menu__item[disabled]{opacity:.45;cursor:not-allowed}.c2g-menu__icon{font-size:.95rem;line-height:1}.c2g-menu__caret{margin-left:auto;color:var(--c2g-color-text-muted)}.c2g-menu__item--danger{color:var(--c2g-color-error)}.c2g-menu__item--danger:hover:not([disabled]){background:var(--c2g-color-primary-light)}.c2g-menu__submenu{position:absolute;top:-.25rem;left:calc(100% + .2rem);min-width:11rem;z-index:110;display:none}.c2g-menu__entry--has-children:hover>.c2g-menu__submenu,.c2g-menu__entry--has-children.c2g-menu__entry--active>.c2g-menu__submenu{display:block}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1406
1406
|
}
|
|
1407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MenuComponent, decorators: [{
|
|
1408
1408
|
type: Component,
|
|
1409
1409
|
args: [{ selector: 'c2g-menu', standalone: true, imports: [CdkMenu, CdkMenuItem, CdkMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-menu\">\n <button\n class=\"c2g-menu__trigger\"\n type=\"button\"\n [attr.aria-label]=\"triggerAriaLabel()\"\n [cdkMenuTriggerFor]=\"menuPanel\">\n {{ triggerLabel() }}\n </button>\n\n <ng-template #menuPanel>\n <ul class=\"c2g-menu__list\" cdkMenu>\n @for (item of flatItems(); track item.key) {\n <li\n class=\"c2g-menu__entry\"\n [class.c2g-menu__entry--has-children]=\"(item.children?.length ?? 0) > 0\">\n\n @if ((item.children?.length ?? 0) > 0) {\n <button\n class=\"c2g-menu__item\"\n cdkMenuItem\n [cdkMenuTriggerFor]=\"subMenu\"\n [disabled]=\"item.disabled ?? false\"\n type=\"button\">\n @if (item.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n <span class=\"c2g-menu__caret\" aria-hidden=\"true\">\u203A</span>\n </button>\n\n <ng-template #subMenu>\n <ul class=\"c2g-menu__submenu\" cdkMenu>\n @for (child of item.children ?? []; track child.key) {\n <li role=\"none\">\n <button\n class=\"c2g-menu__item\"\n [class.c2g-menu__item--danger]=\"child.variant === 'danger'\"\n [disabled]=\"child.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"selectChild(item, child)\">\n @if (child.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ child.icon }}</span>\n }\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n </ng-template>\n } @else {\n <button\n class=\"c2g-menu__item\"\n [class.c2g-menu__item--danger]=\"item.variant === 'danger'\"\n [disabled]=\"item.disabled ?? false\"\n cdkMenuItem\n type=\"button\"\n (cdkMenuItemTriggered)=\"select(item)\">\n @if (item.icon) {\n <span class=\"c2g-menu__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n <span>{{ item.label }}</span>\n </button>\n }\n </li>\n }\n </ul>\n </ng-template>\n</div>\n", styles: [".c2g-menu{position:relative;display:inline-flex}.c2g-menu__trigger{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.35rem .75rem;border:1px solid var(--c2g-color-outline);border-radius:.5rem;background:var(--c2g-color-surface);color:var(--c2g-color-text-primary);font-size:.875rem;font-weight:600;cursor:pointer}.c2g-menu__trigger:hover{background:var(--c2g-color-neutral-100)}.c2g-menu__trigger:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:2px}.c2g-menu__list,.c2g-menu__submenu{margin:0;padding:.25rem;list-style:none;background:var(--c2g-color-surface);border:1px solid var(--c2g-color-outline-variant);border-radius:.625rem;box-shadow:0 8px 22px #1018281f}.c2g-menu__list{position:absolute;top:calc(100% + .35rem);left:0;min-width:13rem;z-index:100}.c2g-menu__entry{position:relative}.c2g-menu__entry--active>.c2g-menu__item,.c2g-menu__item:hover:not([disabled]){background:var(--c2g-color-secondary-container)}.c2g-menu__item{width:100%;display:flex;align-items:center;gap:.5rem;border:0;border-radius:.45rem;background:transparent;color:var(--c2g-color-text-primary);font-size:.84rem;font-weight:500;padding:.5rem .65rem;text-align:left;cursor:pointer}.c2g-menu__item:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:-2px}.c2g-menu__item[disabled]{opacity:.45;cursor:not-allowed}.c2g-menu__icon{font-size:.95rem;line-height:1}.c2g-menu__caret{margin-left:auto;color:var(--c2g-color-text-muted)}.c2g-menu__item--danger{color:var(--c2g-color-error)}.c2g-menu__item--danger:hover:not([disabled]){background:var(--c2g-color-primary-light)}.c2g-menu__submenu{position:absolute;top:-.25rem;left:calc(100% + .2rem);min-width:11rem;z-index:110;display:none}.c2g-menu__entry--has-children:hover>.c2g-menu__submenu,.c2g-menu__entry--has-children.c2g-menu__entry--active>.c2g-menu__submenu{display:block}\n"] }]
|
|
1410
|
-
}]
|
|
1410
|
+
}] });
|
|
1411
1411
|
|
|
1412
1412
|
class SubmenuItemComponent {
|
|
1413
1413
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
@@ -1423,13 +1423,13 @@ class SubmenuItemComponent {
|
|
|
1423
1423
|
onMouseEnter() {
|
|
1424
1424
|
this.mouseenter.emit();
|
|
1425
1425
|
}
|
|
1426
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
1426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: SubmenuItemComponent, isStandalone: true, selector: "c2g-submenu-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", mouseenter: "mouseenter" }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0, template: "<li role=\"none\">\n <button\n class=\"c2g-submenu-item\"\n [class.c2g-submenu-item--active]=\"active() || item().active\"\n [disabled]=\"item().disabled ?? false\"\n role=\"menuitem\"\n type=\"button\"\n (click)=\"onClick()\">\n {{ item().label }}\n </button>\n</li>\n", styles: [".c2g-submenu-item{width:100%;display:block;border:0;border-radius:.5rem;padding:.45rem .65rem;background:transparent;color:var(--c2g-color-text-primary);text-align:left;font-size:.84rem;font-weight:500;cursor:pointer}.c2g-submenu-item:hover:not([disabled]),.c2g-submenu-item.c2g-submenu-item--active{background:var(--c2g-color-secondary-container)}.c2g-submenu-item:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:-2px}.c2g-submenu-item[disabled]{opacity:.45;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1428
1428
|
}
|
|
1429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubmenuItemComponent, decorators: [{
|
|
1430
1430
|
type: Component,
|
|
1431
1431
|
args: [{ selector: 'c2g-submenu-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li role=\"none\">\n <button\n class=\"c2g-submenu-item\"\n [class.c2g-submenu-item--active]=\"active() || item().active\"\n [disabled]=\"item().disabled ?? false\"\n role=\"menuitem\"\n type=\"button\"\n (click)=\"onClick()\">\n {{ item().label }}\n </button>\n</li>\n", styles: [".c2g-submenu-item{width:100%;display:block;border:0;border-radius:.5rem;padding:.45rem .65rem;background:transparent;color:var(--c2g-color-text-primary);text-align:left;font-size:.84rem;font-weight:500;cursor:pointer}.c2g-submenu-item:hover:not([disabled]),.c2g-submenu-item.c2g-submenu-item--active{background:var(--c2g-color-secondary-container)}.c2g-submenu-item:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:-2px}.c2g-submenu-item[disabled]{opacity:.45;cursor:not-allowed}\n"] }]
|
|
1432
|
-
}], propDecorators: {
|
|
1432
|
+
}], propDecorators: { onMouseEnter: [{
|
|
1433
1433
|
type: HostListener,
|
|
1434
1434
|
args: ['mouseenter']
|
|
1435
1435
|
}] } });
|
|
@@ -1469,13 +1469,13 @@ class SubmenuComponent {
|
|
|
1469
1469
|
this.onItemSelected(selected);
|
|
1470
1470
|
}
|
|
1471
1471
|
}
|
|
1472
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1473
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1472
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubmenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SubmenuComponent, isStandalone: true, selector: "c2g-submenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "@if (open()) {\n <ul class=\"c2g-submenu\" role=\"menu\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.key; let index = $index) {\n <c2g-submenu-item\n [item]=\"item\"\n [active]=\"activeIndex() === index\"\n (mouseenter)=\"setActiveIndex(index)\"\n (selected)=\"onItemSelected($event)\">\n </c2g-submenu-item>\n }\n </ul>\n}\n", styles: [".c2g-submenu{position:absolute;top:calc(100% + .35rem);left:0;min-width:12rem;margin:0;padding:.25rem;list-style:none;border:1px solid var(--c2g-color-outline-variant);border-radius:.7rem;background:var(--c2g-color-surface);box-shadow:0 10px 25px #10182824;z-index:120}\n"], dependencies: [{ kind: "component", type: SubmenuItemComponent, selector: "c2g-submenu-item", inputs: ["item", "active"], outputs: ["selected", "mouseenter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1474
1474
|
}
|
|
1475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SubmenuComponent, decorators: [{
|
|
1476
1476
|
type: Component,
|
|
1477
1477
|
args: [{ selector: 'c2g-submenu', standalone: true, imports: [SubmenuItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n <ul class=\"c2g-submenu\" role=\"menu\" (keydown)=\"onKeydown($event)\">\n @for (item of items(); track item.key; let index = $index) {\n <c2g-submenu-item\n [item]=\"item\"\n [active]=\"activeIndex() === index\"\n (mouseenter)=\"setActiveIndex(index)\"\n (selected)=\"onItemSelected($event)\">\n </c2g-submenu-item>\n }\n </ul>\n}\n", styles: [".c2g-submenu{position:absolute;top:calc(100% + .35rem);left:0;min-width:12rem;margin:0;padding:.25rem;list-style:none;border:1px solid var(--c2g-color-outline-variant);border-radius:.7rem;background:var(--c2g-color-surface);box-shadow:0 10px 25px #10182824;z-index:120}\n"] }]
|
|
1478
|
-
}]
|
|
1478
|
+
}] });
|
|
1479
1479
|
|
|
1480
1480
|
class MainNavigationItemComponent {
|
|
1481
1481
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
@@ -1521,13 +1521,13 @@ class MainNavigationItemComponent {
|
|
|
1521
1521
|
this.submenuOpen.set(false);
|
|
1522
1522
|
}
|
|
1523
1523
|
}
|
|
1524
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1524
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MainNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1525
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MainNavigationItemComponent, isStandalone: true, selector: "c2g-main-navigation-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemSelected: "itemSelected", subItemSelected: "subItemSelected" }, ngImport: i0, template: "<li class=\"c2g-main-nav-item\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n class=\"c2g-main-nav-item__button\"\n [class.c2g-main-nav-item__button--active]=\"item().active\"\n [disabled]=\"item().disabled ?? false\"\n [attr.aria-haspopup]=\"hasSubmenu() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasSubmenu() ? submenuOpen() : null\"\n type=\"button\"\n (click)=\"onItemClick()\"\n (keydown)=\"onItemKeydown($event)\">\n <span>{{ item().label }}</span>\n @if (hasSubmenu()) {\n <span class=\"c2g-main-nav-item__caret\" aria-hidden=\"true\">\u25BE</span>\n }\n </button>\n\n @if (hasSubmenu()) {\n <c2g-submenu\n [items]=\"item().subItems ?? []\"\n [open]=\"submenuOpen()\"\n (itemSelected)=\"onSubItemSelected($event)\">\n </c2g-submenu>\n }\n</li>\n", styles: [".c2g-main-nav-item{position:relative}.c2g-main-nav-item__button{display:inline-flex;align-items:center;gap:.35rem;min-height:2.2rem;padding:.4rem .8rem;border:1px solid transparent;border-radius:.6rem;background:transparent;color:var(--c2g-color-text-primary);font-size:.9rem;font-weight:600;cursor:pointer}.c2g-main-nav-item__button:hover:not([disabled]){background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-outline-variant)}.c2g-main-nav-item__button:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:2px}.c2g-main-nav-item__button[disabled]{opacity:.5;cursor:not-allowed}.c2g-main-nav-item__button--active{background:var(--c2g-color-secondary-container);border-color:var(--c2g-color-outline);color:var(--c2g-color-secondary-dark)}.c2g-main-nav-item__caret{font-size:.7rem;color:var(--c2g-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SubmenuComponent, selector: "c2g-submenu", inputs: ["items", "open"], outputs: ["itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1526
1526
|
}
|
|
1527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1527
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MainNavigationItemComponent, decorators: [{
|
|
1528
1528
|
type: Component,
|
|
1529
1529
|
args: [{ selector: 'c2g-main-navigation-item', standalone: true, imports: [SubmenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"c2g-main-nav-item\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n class=\"c2g-main-nav-item__button\"\n [class.c2g-main-nav-item__button--active]=\"item().active\"\n [disabled]=\"item().disabled ?? false\"\n [attr.aria-haspopup]=\"hasSubmenu() ? 'menu' : null\"\n [attr.aria-expanded]=\"hasSubmenu() ? submenuOpen() : null\"\n type=\"button\"\n (click)=\"onItemClick()\"\n (keydown)=\"onItemKeydown($event)\">\n <span>{{ item().label }}</span>\n @if (hasSubmenu()) {\n <span class=\"c2g-main-nav-item__caret\" aria-hidden=\"true\">\u25BE</span>\n }\n </button>\n\n @if (hasSubmenu()) {\n <c2g-submenu\n [items]=\"item().subItems ?? []\"\n [open]=\"submenuOpen()\"\n (itemSelected)=\"onSubItemSelected($event)\">\n </c2g-submenu>\n }\n</li>\n", styles: [".c2g-main-nav-item{position:relative}.c2g-main-nav-item__button{display:inline-flex;align-items:center;gap:.35rem;min-height:2.2rem;padding:.4rem .8rem;border:1px solid transparent;border-radius:.6rem;background:transparent;color:var(--c2g-color-text-primary);font-size:.9rem;font-weight:600;cursor:pointer}.c2g-main-nav-item__button:hover:not([disabled]){background:var(--c2g-color-neutral-100);border-color:var(--c2g-color-outline-variant)}.c2g-main-nav-item__button:focus-visible{outline:2px solid var(--c2g-color-secondary);outline-offset:2px}.c2g-main-nav-item__button[disabled]{opacity:.5;cursor:not-allowed}.c2g-main-nav-item__button--active{background:var(--c2g-color-secondary-container);border-color:var(--c2g-color-outline);color:var(--c2g-color-secondary-dark)}.c2g-main-nav-item__caret{font-size:.7rem;color:var(--c2g-color-text-muted)}\n"] }]
|
|
1530
|
-
}]
|
|
1530
|
+
}] });
|
|
1531
1531
|
|
|
1532
1532
|
class MainNavigationComponent {
|
|
1533
1533
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -1542,13 +1542,13 @@ class MainNavigationComponent {
|
|
|
1542
1542
|
}
|
|
1543
1543
|
trackByKey = (_index, item) => item.key;
|
|
1544
1544
|
trackSubByKey = (_index, item) => item.key;
|
|
1545
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1545
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MainNavigationComponent, isStandalone: true, selector: "c2g-main-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mainItemSelected: "mainItemSelected", subItemSelected: "subItemSelected" }, ngImport: i0, template: "<nav class=\"c2g-main-navigation\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"c2g-main-navigation__list\">\n @for (item of items(); track trackByKey($index, item)) {\n <c2g-main-navigation-item\n [item]=\"item\"\n (itemSelected)=\"onMainItemSelected($event)\"\n (subItemSelected)=\"onSubItemSelected($event)\">\n </c2g-main-navigation-item>\n }\n </ul>\n</nav>\n", styles: [".c2g-main-navigation{width:100%}.c2g-main-navigation__list{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: MainNavigationItemComponent, selector: "c2g-main-navigation-item", inputs: ["item"], outputs: ["itemSelected", "subItemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1547
1547
|
}
|
|
1548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MainNavigationComponent, decorators: [{
|
|
1549
1549
|
type: Component,
|
|
1550
1550
|
args: [{ selector: 'c2g-main-navigation', standalone: true, imports: [MainNavigationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"c2g-main-navigation\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"c2g-main-navigation__list\">\n @for (item of items(); track trackByKey($index, item)) {\n <c2g-main-navigation-item\n [item]=\"item\"\n (itemSelected)=\"onMainItemSelected($event)\"\n (subItemSelected)=\"onSubItemSelected($event)\">\n </c2g-main-navigation-item>\n }\n </ul>\n</nav>\n", styles: [".c2g-main-navigation{width:100%}.c2g-main-navigation__list{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}\n"] }]
|
|
1551
|
-
}]
|
|
1551
|
+
}] });
|
|
1552
1552
|
|
|
1553
1553
|
const WEATHER_ICONS = {
|
|
1554
1554
|
sunny: '☀️', 'partly-cloudy': '⛅', cloudy: '☁️',
|
|
@@ -1600,13 +1600,13 @@ class NextAdventureWidgetComponent {
|
|
|
1600
1600
|
formatWeatherDate(date) {
|
|
1601
1601
|
return new Date(date).toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric' });
|
|
1602
1602
|
}
|
|
1603
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NextAdventureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: NextAdventureWidgetComponent, isStandalone: true, selector: "c2g-next-adventure-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-next-adventure\" [class]=\"urgencyClass()\">\n\n <!-- Row 1: type icon + meta + optional pulse orb -->\n <div class=\"c2g-next-adventure__header\">\n <span class=\"c2g-next-adventure__type-icon\" aria-hidden=\"true\">{{ tourTypeIcon() }}</span>\n\n <div class=\"c2g-next-adventure__meta\">\n <span class=\"c2g-next-adventure__label\">N\u00E4chstes Abenteuer</span>\n <span class=\"c2g-next-adventure__dates\">{{ dateRange() }} \u00B7 {{ duration() }} Tage</span>\n </div>\n\n @if (data().showPulse) {\n <div class=\"c2g-next-adventure__pulse-orb\" aria-hidden=\"true\">\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--1\"></span>\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--2\"></span>\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--3\"></span>\n <span class=\"c2g-next-adventure__pulse-core\">\uD83D\uDD34</span>\n </div>\n }\n </div>\n\n <!-- Tour name + destination -->\n <div class=\"c2g-next-adventure__body\">\n <h2 class=\"c2g-next-adventure__name\">{{ data().tourName }}</h2>\n <p class=\"c2g-next-adventure__destination\">\uD83D\uDCCD {{ data().destination }}</p>\n </div>\n\n <!-- Countdown -->\n <div class=\"c2g-next-adventure__countdown\">\n <span class=\"c2g-next-adventure__countdown-number\">{{ countdown() }}</span>\n <span class=\"c2g-next-adventure__countdown-label\">{{ countdownLabel() }}</span>\n </div>\n\n <!-- Weather strip -->\n @if (weatherSlots().length > 0) {\n <div class=\"c2g-next-adventure__weather\">\n @for (day of weatherSlots(); track day.date) {\n <div class=\"c2g-next-adventure__weather-day\">\n <span class=\"c2g-next-adventure__weather-date\">{{ formatWeatherDate(day.date) }}</span>\n <span class=\"c2g-next-adventure__weather-icon\" aria-hidden=\"true\">{{ weatherIcon(day.icon) }}</span>\n <span class=\"c2g-next-adventure__weather-temp\">\n {{ day.tempMax }}\u00B0 <span class=\"c2g-next-adventure__weather-min\">{{ day.tempMin }}\u00B0</span>\n </span>\n </div>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.c2g-next-adventure{--_bg-from: var(--c2g-theme-primary, #ff6b35);--_bg-to: var(--c2g-theme-primary-dark, #c0391a);--_shadow-color: var(--c2g-theme-primary-shadow, rgba(255, 107, 53, .35));--_shadow-hover: var(--c2g-theme-primary-shadow-lg, rgba(255, 107, 53, .45));position:relative;overflow:hidden;border-radius:var(--c2g-radius-xl, 20px);padding:22px 22px 0;background:linear-gradient(135deg,var(--_bg-from) 0%,var(--_bg-to) 100%);color:var(--c2g-theme-on-primary, #fff);font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);box-shadow:0 8px 32px var(--_shadow-color),0 1px #ffffff1a inset;min-height:260px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .25s ease,transform .2s ease}.c2g-next-adventure:hover{box-shadow:0 12px 48px var(--_shadow-hover),0 1px #ffffff1f inset;transform:translateY(-2px)}.c2g-next-adventure:before{content:\"\";position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;background:#ffffff12;pointer-events:none;animation:c2g-adv-blob 6s ease-in-out infinite}.c2g-next-adventure:after{content:\"\";position:absolute;bottom:-70px;left:30px;width:180px;height:180px;border-radius:50%;background:#ffffff0a;pointer-events:none;animation:c2g-adv-blob 8s ease-in-out infinite reverse}.c2g-next-adventure--soon{--_bg-from: var(--c2g-theme-primary-soon, #ff8c42);--_bg-to: var(--c2g-theme-primary-soon-dark, #e05a10);--_shadow-color: var(--c2g-theme-primary-soon-shadow, rgba(255, 140, 66, .4))}.c2g-next-adventure--now{--_bg-from: var(--c2g-theme-tertiary, #4ecdc4);--_bg-to: var(--c2g-theme-tertiary-dark, #2d9e96);--_shadow-color: var(--c2g-theme-tertiary-shadow, rgba(78, 205, 196, .45));animation:c2g-adv-now-pulse 2.5s ease-in-out infinite}@keyframes c2g-adv-blob{0%,to{transform:scale(1) translate(0)}50%{transform:scale(1.1) translate(-8px,8px)}}@keyframes c2g-adv-now-pulse{0%,to{box-shadow:0 8px 32px var(--_shadow-color)}50%{box-shadow:0 12px 48px var(--_shadow-hover, var(--_shadow-color))}}.c2g-next-adventure__header{display:flex;align-items:center;gap:10px;position:relative;z-index:1}.c2g-next-adventure__type-icon{font-size:2.2rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));flex-shrink:0}.c2g-next-adventure__meta{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-next-adventure__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.75}.c2g-next-adventure__dates{font-size:.82rem;font-weight:500;opacity:.9}.c2g-next-adventure__pulse-orb{position:relative;width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.c2g-next-adventure__pulse-ring{position:absolute;border-radius:50%;border:2px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 80%,transparent);animation:c2g-pulse-ring 2.4s ease-out infinite}.c2g-next-adventure__pulse-ring--1{width:12px;height:12px;animation-delay:0s}.c2g-next-adventure__pulse-ring--2{width:12px;height:12px;animation-delay:.6s}.c2g-next-adventure__pulse-ring--3{width:12px;height:12px;animation-delay:1.2s}.c2g-next-adventure__pulse-core{font-size:.85rem;line-height:1;position:relative;z-index:1}@keyframes c2g-pulse-ring{0%{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}.c2g-next-adventure__body{position:relative;z-index:1;flex:1}.c2g-next-adventure__name{font-size:1.55rem;font-weight:900;margin:0 0 5px;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.15);letter-spacing:-.01em}.c2g-next-adventure__destination{font-size:.875rem;margin:0;opacity:.88}.c2g-next-adventure__countdown{position:relative;z-index:1;display:flex;align-items:baseline;gap:8px}.c2g-next-adventure__countdown-number{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.03em;text-shadow:0 3px 12px rgba(0,0,0,.2)}.c2g-next-adventure--now .c2g-next-adventure__countdown-number{font-size:1.6rem}.c2g-next-adventure__countdown-label{font-size:.9rem;font-weight:600;opacity:.88}.c2g-next-adventure__weather{position:relative;z-index:1;display:flex;gap:0;background:color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 13%,transparent);border-top:1px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 12%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin:0 -22px}.c2g-next-adventure__weather-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 8px;border-right:1px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 10%,transparent);transition:background .15s ease}.c2g-next-adventure__weather-day:last-child{border-right:none}.c2g-next-adventure__weather-day:hover{background:color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 7%,transparent)}.c2g-next-adventure__weather-date{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75}.c2g-next-adventure__weather-icon{font-size:1.3rem;line-height:1}.c2g-next-adventure__weather-temp{font-size:.8rem;font-weight:700}.c2g-next-adventure__weather-min{font-weight:400;opacity:.65}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1605
1605
|
}
|
|
1606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: NextAdventureWidgetComponent, decorators: [{
|
|
1607
1607
|
type: Component,
|
|
1608
1608
|
args: [{ selector: 'c2g-next-adventure-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-next-adventure\" [class]=\"urgencyClass()\">\n\n <!-- Row 1: type icon + meta + optional pulse orb -->\n <div class=\"c2g-next-adventure__header\">\n <span class=\"c2g-next-adventure__type-icon\" aria-hidden=\"true\">{{ tourTypeIcon() }}</span>\n\n <div class=\"c2g-next-adventure__meta\">\n <span class=\"c2g-next-adventure__label\">N\u00E4chstes Abenteuer</span>\n <span class=\"c2g-next-adventure__dates\">{{ dateRange() }} \u00B7 {{ duration() }} Tage</span>\n </div>\n\n @if (data().showPulse) {\n <div class=\"c2g-next-adventure__pulse-orb\" aria-hidden=\"true\">\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--1\"></span>\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--2\"></span>\n <span class=\"c2g-next-adventure__pulse-ring c2g-next-adventure__pulse-ring--3\"></span>\n <span class=\"c2g-next-adventure__pulse-core\">\uD83D\uDD34</span>\n </div>\n }\n </div>\n\n <!-- Tour name + destination -->\n <div class=\"c2g-next-adventure__body\">\n <h2 class=\"c2g-next-adventure__name\">{{ data().tourName }}</h2>\n <p class=\"c2g-next-adventure__destination\">\uD83D\uDCCD {{ data().destination }}</p>\n </div>\n\n <!-- Countdown -->\n <div class=\"c2g-next-adventure__countdown\">\n <span class=\"c2g-next-adventure__countdown-number\">{{ countdown() }}</span>\n <span class=\"c2g-next-adventure__countdown-label\">{{ countdownLabel() }}</span>\n </div>\n\n <!-- Weather strip -->\n @if (weatherSlots().length > 0) {\n <div class=\"c2g-next-adventure__weather\">\n @for (day of weatherSlots(); track day.date) {\n <div class=\"c2g-next-adventure__weather-day\">\n <span class=\"c2g-next-adventure__weather-date\">{{ formatWeatherDate(day.date) }}</span>\n <span class=\"c2g-next-adventure__weather-icon\" aria-hidden=\"true\">{{ weatherIcon(day.icon) }}</span>\n <span class=\"c2g-next-adventure__weather-temp\">\n {{ day.tempMax }}\u00B0 <span class=\"c2g-next-adventure__weather-min\">{{ day.tempMin }}\u00B0</span>\n </span>\n </div>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block}.c2g-next-adventure{--_bg-from: var(--c2g-theme-primary, #ff6b35);--_bg-to: var(--c2g-theme-primary-dark, #c0391a);--_shadow-color: var(--c2g-theme-primary-shadow, rgba(255, 107, 53, .35));--_shadow-hover: var(--c2g-theme-primary-shadow-lg, rgba(255, 107, 53, .45));position:relative;overflow:hidden;border-radius:var(--c2g-radius-xl, 20px);padding:22px 22px 0;background:linear-gradient(135deg,var(--_bg-from) 0%,var(--_bg-to) 100%);color:var(--c2g-theme-on-primary, #fff);font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);box-shadow:0 8px 32px var(--_shadow-color),0 1px #ffffff1a inset;min-height:260px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .25s ease,transform .2s ease}.c2g-next-adventure:hover{box-shadow:0 12px 48px var(--_shadow-hover),0 1px #ffffff1f inset;transform:translateY(-2px)}.c2g-next-adventure:before{content:\"\";position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;background:#ffffff12;pointer-events:none;animation:c2g-adv-blob 6s ease-in-out infinite}.c2g-next-adventure:after{content:\"\";position:absolute;bottom:-70px;left:30px;width:180px;height:180px;border-radius:50%;background:#ffffff0a;pointer-events:none;animation:c2g-adv-blob 8s ease-in-out infinite reverse}.c2g-next-adventure--soon{--_bg-from: var(--c2g-theme-primary-soon, #ff8c42);--_bg-to: var(--c2g-theme-primary-soon-dark, #e05a10);--_shadow-color: var(--c2g-theme-primary-soon-shadow, rgba(255, 140, 66, .4))}.c2g-next-adventure--now{--_bg-from: var(--c2g-theme-tertiary, #4ecdc4);--_bg-to: var(--c2g-theme-tertiary-dark, #2d9e96);--_shadow-color: var(--c2g-theme-tertiary-shadow, rgba(78, 205, 196, .45));animation:c2g-adv-now-pulse 2.5s ease-in-out infinite}@keyframes c2g-adv-blob{0%,to{transform:scale(1) translate(0)}50%{transform:scale(1.1) translate(-8px,8px)}}@keyframes c2g-adv-now-pulse{0%,to{box-shadow:0 8px 32px var(--_shadow-color)}50%{box-shadow:0 12px 48px var(--_shadow-hover, var(--_shadow-color))}}.c2g-next-adventure__header{display:flex;align-items:center;gap:10px;position:relative;z-index:1}.c2g-next-adventure__type-icon{font-size:2.2rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));flex-shrink:0}.c2g-next-adventure__meta{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-next-adventure__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.75}.c2g-next-adventure__dates{font-size:.82rem;font-weight:500;opacity:.9}.c2g-next-adventure__pulse-orb{position:relative;width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.c2g-next-adventure__pulse-ring{position:absolute;border-radius:50%;border:2px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 80%,transparent);animation:c2g-pulse-ring 2.4s ease-out infinite}.c2g-next-adventure__pulse-ring--1{width:12px;height:12px;animation-delay:0s}.c2g-next-adventure__pulse-ring--2{width:12px;height:12px;animation-delay:.6s}.c2g-next-adventure__pulse-ring--3{width:12px;height:12px;animation-delay:1.2s}.c2g-next-adventure__pulse-core{font-size:.85rem;line-height:1;position:relative;z-index:1}@keyframes c2g-pulse-ring{0%{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}.c2g-next-adventure__body{position:relative;z-index:1;flex:1}.c2g-next-adventure__name{font-size:1.55rem;font-weight:900;margin:0 0 5px;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.15);letter-spacing:-.01em}.c2g-next-adventure__destination{font-size:.875rem;margin:0;opacity:.88}.c2g-next-adventure__countdown{position:relative;z-index:1;display:flex;align-items:baseline;gap:8px}.c2g-next-adventure__countdown-number{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.03em;text-shadow:0 3px 12px rgba(0,0,0,.2)}.c2g-next-adventure--now .c2g-next-adventure__countdown-number{font-size:1.6rem}.c2g-next-adventure__countdown-label{font-size:.9rem;font-weight:600;opacity:.88}.c2g-next-adventure__weather{position:relative;z-index:1;display:flex;gap:0;background:color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 13%,transparent);border-top:1px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 12%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin:0 -22px}.c2g-next-adventure__weather-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 8px;border-right:1px solid color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 10%,transparent);transition:background .15s ease}.c2g-next-adventure__weather-day:last-child{border-right:none}.c2g-next-adventure__weather-day:hover{background:color-mix(in srgb,var(--c2g-theme-on-primary, #fff) 7%,transparent)}.c2g-next-adventure__weather-date{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75}.c2g-next-adventure__weather-icon{font-size:1.3rem;line-height:1}.c2g-next-adventure__weather-temp{font-size:.8rem;font-weight:700}.c2g-next-adventure__weather-min{font-weight:400;opacity:.65}\n"] }]
|
|
1609
|
-
}]
|
|
1609
|
+
}] });
|
|
1610
1610
|
|
|
1611
1611
|
class PackStatusWidgetComponent {
|
|
1612
1612
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -1680,13 +1680,13 @@ class PackStatusWidgetComponent {
|
|
|
1680
1680
|
this.raf = requestAnimationFrame(tick);
|
|
1681
1681
|
});
|
|
1682
1682
|
}
|
|
1683
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1684
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1683
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackStatusWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1684
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackStatusWidgetComponent, isStandalone: true, selector: "c2g-pack-status-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-ps\" [class]=\"'c2g-ps--' + statusColor()\">\n\n <!-- Header -->\n <div class=\"c2g-ps__header\">\n <div class=\"c2g-ps__title-row\">\n <span class=\"c2g-ps__label\">\uD83C\uDF92 Packstatus</span>\n @if (data().tourName) {\n <span class=\"c2g-ps__tour\">{{ data().tourName }}</span>\n }\n </div>\n <span class=\"c2g-ps__status-badge\">{{ statusLabel() }}</span>\n </div>\n\n <!-- Main: ring + info side by side -->\n <div class=\"c2g-ps__body\">\n\n <!-- SVG Ring -->\n <div class=\"c2g-ps__ring-wrap\">\n <svg class=\"c2g-ps__ring\" viewBox=\"0 0 112 112\" aria-hidden=\"true\">\n <!-- Track -->\n <circle class=\"c2g-ps__ring-track\"\n cx=\"56\" cy=\"56\" [attr.r]=\"radius\"\n fill=\"none\" [attr.stroke-width]=\"strokeWidth\" />\n <!-- Fill -->\n <circle class=\"c2g-ps__ring-fill\"\n cx=\"56\" cy=\"56\" [attr.r]=\"radius\"\n fill=\"none\" [attr.stroke-width]=\"strokeWidth\"\n stroke-linecap=\"round\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"strokeDashoffset()\"\n transform=\"rotate(-90 56 56)\" />\n <!-- Tick marks -->\n @for (t of ticks; track $index) {\n <line class=\"c2g-ps__tick\"\n [attr.x1]=\"t.x1\" [attr.y1]=\"t.y1\"\n [attr.x2]=\"t.x2\" [attr.y2]=\"t.y2\" />\n }\n </svg>\n <!-- Center content -->\n <div class=\"c2g-ps__ring-center\">\n <span class=\"c2g-ps__percent\">{{ displayPercent() }}<span class=\"c2g-ps__percent-unit\">%</span></span>\n @if (statusColor() === 'success') {\n <span class=\"c2g-ps__ring-emoji\">\uD83C\uDF89</span>\n }\n </div>\n </div>\n\n <!-- Info panel -->\n <div class=\"c2g-ps__info\">\n\n <!-- Item count -->\n <div class=\"c2g-ps__count-row\">\n <span class=\"c2g-ps__count-main\">{{ data().completedItems }}</span>\n <span class=\"c2g-ps__count-sep\">/</span>\n <span class=\"c2g-ps__count-total\">{{ data().totalItems }}</span>\n <span class=\"c2g-ps__count-unit\">Items</span>\n </div>\n\n <!-- Item dots grid -->\n @if (itemDots().length > 0) {\n <div class=\"c2g-ps__dots\">\n @for (done of itemDots(); track $index) {\n <span class=\"c2g-ps__dot\" [class.c2g-ps__dot--done]=\"done\"></span>\n }\n </div>\n }\n\n <!-- Critical alert / all clear -->\n @if (criticalOpen() > 0) {\n <div class=\"c2g-ps__alert\">\n <span class=\"c2g-ps__alert-icon\">\u26A0\uFE0F</span>\n <span class=\"c2g-ps__alert-text\">\n {{ criticalOpen() }} kritische{{ criticalOpen() === 1 ? 's' : '' }} fehlt{{ criticalOpen() === 1 ? '' : 'en' }}\n </span>\n </div>\n } @else if (data().criticalTotal > 0) {\n <div class=\"c2g-ps__all-clear\">\n <span>\u2713 Alle kritischen Items gepackt</span>\n </div>\n }\n\n </div>\n </div>\n\n <!-- Progress bar strip at bottom -->\n <div class=\"c2g-ps__strip-track\">\n <div class=\"c2g-ps__strip-fill\" [style.width.%]=\"percent()\"></div>\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ps{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));overflow:hidden;display:flex;flex-direction:column;gap:0;transition:box-shadow .2s ease,transform .2s ease}.c2g-ps:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .12));transform:translateY(-2px)}.c2g-ps--primary{--ps-accent: var(--c2g-theme-primary, #ff6b35);--ps-accent-soft: rgba(255, 107, 53, .12);--ps-glow: rgba(255, 107, 53, .25);--ps-badge-bg: rgba(255, 107, 53, .1);--ps-badge-color: var(--c2g-theme-primary, #ff6b35)}.c2g-ps--success{--ps-accent: var(--c2g-theme-success, #22c55e);--ps-accent-soft: rgba(34, 197, 94, .1);--ps-glow: rgba(34, 197, 94, .3);--ps-badge-bg: rgba(34, 197, 94, .1);--ps-badge-color: var(--c2g-theme-success, #22c55e)}.c2g-ps--warning{--ps-accent: var(--c2g-theme-warning, #f59e0b);--ps-accent-soft: rgba(245, 158, 11, .1);--ps-glow: rgba(245, 158, 11, .3);--ps-badge-bg: rgba(245, 158, 11, .12);--ps-badge-color: var(--c2g-theme-warning, #f59e0b)}.c2g-ps__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0;gap:8px}.c2g-ps__title-row{display:flex;flex-direction:column;gap:1px}.c2g-ps__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ps__tour{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ps__status-badge{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--ps-badge-bg);color:var(--ps-badge-color);white-space:nowrap;flex-shrink:0}.c2g-ps__body{display:flex;align-items:center;gap:16px;padding:14px 18px 16px}.c2g-ps__ring-wrap{position:relative;width:108px;height:108px;flex-shrink:0}.c2g-ps__ring{width:100%;height:100%;filter:drop-shadow(0 0 8px var(--ps-glow, transparent))}.c2g-ps__ring-track{stroke:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08))}.c2g-ps__ring-fill{stroke:var(--ps-accent);transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}.c2g-ps__tick{stroke:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));stroke-width:1.5;stroke-linecap:round}.c2g-ps__ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.c2g-ps__percent{font-size:1.6rem;font-weight:900;line-height:1;color:var(--ps-accent);letter-spacing:-.02em}.c2g-ps__percent-unit{font-size:.9rem;font-weight:700;opacity:.7}.c2g-ps__ring-emoji{font-size:1rem;line-height:1;margin-top:2px}.c2g-ps__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.c2g-ps__count-row{display:flex;align-items:baseline;gap:3px}.c2g-ps__count-main{font-size:2rem;font-weight:900;line-height:1;color:var(--ps-accent)}.c2g-ps__count-sep{font-size:1.1rem;font-weight:400;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin:0 1px}.c2g-ps__count-total{font-size:1.1rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-ps__count-unit{font-size:.75rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:3px}.c2g-ps__dots{display:flex;flex-wrap:wrap;gap:4px}.c2g-ps__dot{width:10px;height:10px;border-radius:3px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));transition:background .3s ease,transform .2s ease}.c2g-ps__dot--done{background:var(--ps-accent);transform:scale(1.05)}.c2g-ps__dot--done:last-child{box-shadow:0 0 0 2px var(--ps-accent-soft)}.c2g-ps__alert{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--c2g-theme-warning, #f59e0b);background:#f59e0b14;border-radius:8px;padding:5px 8px}.c2g-ps__all-clear{font-size:.78rem;font-weight:700;color:var(--c2g-theme-success, #22c55e);background:#22c55e14;border-radius:8px;padding:5px 8px}.c2g-ps__strip-track{height:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .06))}.c2g-ps__strip-fill{height:100%;background:var(--ps-accent);transition:width .9s cubic-bezier(.4,0,.2,1);border-radius:0 2px 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1685
1685
|
}
|
|
1686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1686
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackStatusWidgetComponent, decorators: [{
|
|
1687
1687
|
type: Component,
|
|
1688
1688
|
args: [{ selector: 'c2g-pack-status-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-ps\" [class]=\"'c2g-ps--' + statusColor()\">\n\n <!-- Header -->\n <div class=\"c2g-ps__header\">\n <div class=\"c2g-ps__title-row\">\n <span class=\"c2g-ps__label\">\uD83C\uDF92 Packstatus</span>\n @if (data().tourName) {\n <span class=\"c2g-ps__tour\">{{ data().tourName }}</span>\n }\n </div>\n <span class=\"c2g-ps__status-badge\">{{ statusLabel() }}</span>\n </div>\n\n <!-- Main: ring + info side by side -->\n <div class=\"c2g-ps__body\">\n\n <!-- SVG Ring -->\n <div class=\"c2g-ps__ring-wrap\">\n <svg class=\"c2g-ps__ring\" viewBox=\"0 0 112 112\" aria-hidden=\"true\">\n <!-- Track -->\n <circle class=\"c2g-ps__ring-track\"\n cx=\"56\" cy=\"56\" [attr.r]=\"radius\"\n fill=\"none\" [attr.stroke-width]=\"strokeWidth\" />\n <!-- Fill -->\n <circle class=\"c2g-ps__ring-fill\"\n cx=\"56\" cy=\"56\" [attr.r]=\"radius\"\n fill=\"none\" [attr.stroke-width]=\"strokeWidth\"\n stroke-linecap=\"round\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"strokeDashoffset()\"\n transform=\"rotate(-90 56 56)\" />\n <!-- Tick marks -->\n @for (t of ticks; track $index) {\n <line class=\"c2g-ps__tick\"\n [attr.x1]=\"t.x1\" [attr.y1]=\"t.y1\"\n [attr.x2]=\"t.x2\" [attr.y2]=\"t.y2\" />\n }\n </svg>\n <!-- Center content -->\n <div class=\"c2g-ps__ring-center\">\n <span class=\"c2g-ps__percent\">{{ displayPercent() }}<span class=\"c2g-ps__percent-unit\">%</span></span>\n @if (statusColor() === 'success') {\n <span class=\"c2g-ps__ring-emoji\">\uD83C\uDF89</span>\n }\n </div>\n </div>\n\n <!-- Info panel -->\n <div class=\"c2g-ps__info\">\n\n <!-- Item count -->\n <div class=\"c2g-ps__count-row\">\n <span class=\"c2g-ps__count-main\">{{ data().completedItems }}</span>\n <span class=\"c2g-ps__count-sep\">/</span>\n <span class=\"c2g-ps__count-total\">{{ data().totalItems }}</span>\n <span class=\"c2g-ps__count-unit\">Items</span>\n </div>\n\n <!-- Item dots grid -->\n @if (itemDots().length > 0) {\n <div class=\"c2g-ps__dots\">\n @for (done of itemDots(); track $index) {\n <span class=\"c2g-ps__dot\" [class.c2g-ps__dot--done]=\"done\"></span>\n }\n </div>\n }\n\n <!-- Critical alert / all clear -->\n @if (criticalOpen() > 0) {\n <div class=\"c2g-ps__alert\">\n <span class=\"c2g-ps__alert-icon\">\u26A0\uFE0F</span>\n <span class=\"c2g-ps__alert-text\">\n {{ criticalOpen() }} kritische{{ criticalOpen() === 1 ? 's' : '' }} fehlt{{ criticalOpen() === 1 ? '' : 'en' }}\n </span>\n </div>\n } @else if (data().criticalTotal > 0) {\n <div class=\"c2g-ps__all-clear\">\n <span>\u2713 Alle kritischen Items gepackt</span>\n </div>\n }\n\n </div>\n </div>\n\n <!-- Progress bar strip at bottom -->\n <div class=\"c2g-ps__strip-track\">\n <div class=\"c2g-ps__strip-fill\" [style.width.%]=\"percent()\"></div>\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ps{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));overflow:hidden;display:flex;flex-direction:column;gap:0;transition:box-shadow .2s ease,transform .2s ease}.c2g-ps:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .12));transform:translateY(-2px)}.c2g-ps--primary{--ps-accent: var(--c2g-theme-primary, #ff6b35);--ps-accent-soft: rgba(255, 107, 53, .12);--ps-glow: rgba(255, 107, 53, .25);--ps-badge-bg: rgba(255, 107, 53, .1);--ps-badge-color: var(--c2g-theme-primary, #ff6b35)}.c2g-ps--success{--ps-accent: var(--c2g-theme-success, #22c55e);--ps-accent-soft: rgba(34, 197, 94, .1);--ps-glow: rgba(34, 197, 94, .3);--ps-badge-bg: rgba(34, 197, 94, .1);--ps-badge-color: var(--c2g-theme-success, #22c55e)}.c2g-ps--warning{--ps-accent: var(--c2g-theme-warning, #f59e0b);--ps-accent-soft: rgba(245, 158, 11, .1);--ps-glow: rgba(245, 158, 11, .3);--ps-badge-bg: rgba(245, 158, 11, .12);--ps-badge-color: var(--c2g-theme-warning, #f59e0b)}.c2g-ps__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0;gap:8px}.c2g-ps__title-row{display:flex;flex-direction:column;gap:1px}.c2g-ps__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ps__tour{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ps__status-badge{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--ps-badge-bg);color:var(--ps-badge-color);white-space:nowrap;flex-shrink:0}.c2g-ps__body{display:flex;align-items:center;gap:16px;padding:14px 18px 16px}.c2g-ps__ring-wrap{position:relative;width:108px;height:108px;flex-shrink:0}.c2g-ps__ring{width:100%;height:100%;filter:drop-shadow(0 0 8px var(--ps-glow, transparent))}.c2g-ps__ring-track{stroke:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08))}.c2g-ps__ring-fill{stroke:var(--ps-accent);transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}.c2g-ps__tick{stroke:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));stroke-width:1.5;stroke-linecap:round}.c2g-ps__ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.c2g-ps__percent{font-size:1.6rem;font-weight:900;line-height:1;color:var(--ps-accent);letter-spacing:-.02em}.c2g-ps__percent-unit{font-size:.9rem;font-weight:700;opacity:.7}.c2g-ps__ring-emoji{font-size:1rem;line-height:1;margin-top:2px}.c2g-ps__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.c2g-ps__count-row{display:flex;align-items:baseline;gap:3px}.c2g-ps__count-main{font-size:2rem;font-weight:900;line-height:1;color:var(--ps-accent)}.c2g-ps__count-sep{font-size:1.1rem;font-weight:400;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin:0 1px}.c2g-ps__count-total{font-size:1.1rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-ps__count-unit{font-size:.75rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:3px}.c2g-ps__dots{display:flex;flex-wrap:wrap;gap:4px}.c2g-ps__dot{width:10px;height:10px;border-radius:3px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));transition:background .3s ease,transform .2s ease}.c2g-ps__dot--done{background:var(--ps-accent);transform:scale(1.05)}.c2g-ps__dot--done:last-child{box-shadow:0 0 0 2px var(--ps-accent-soft)}.c2g-ps__alert{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--c2g-theme-warning, #f59e0b);background:#f59e0b14;border-radius:8px;padding:5px 8px}.c2g-ps__all-clear{font-size:.78rem;font-weight:700;color:var(--c2g-theme-success, #22c55e);background:#22c55e14;border-radius:8px;padding:5px 8px}.c2g-ps__strip-track{height:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .06))}.c2g-ps__strip-fill{height:100%;background:var(--ps-accent);transition:width .9s cubic-bezier(.4,0,.2,1);border-radius:0 2px 2px 0}\n"] }]
|
|
1689
|
-
}], ctorParameters: () => []
|
|
1689
|
+
}], ctorParameters: () => [] });
|
|
1690
1690
|
|
|
1691
1691
|
const SCALE_MAX_G = 30_000;
|
|
1692
1692
|
const ZONES = [
|
|
@@ -1781,13 +1781,13 @@ class PackWeightWidgetComponent {
|
|
|
1781
1781
|
cancelAnimationFrame(this.rafMarker);
|
|
1782
1782
|
cancelAnimationFrame(this.rafKg);
|
|
1783
1783
|
}
|
|
1784
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1785
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1784
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackWeightWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackWeightWidgetComponent, isStandalone: true, selector: "c2g-pack-weight-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-pw\">\n\n <!-- Header -->\n <div class=\"c2g-pw__header\">\n <div class=\"c2g-pw__title-col\">\n <span class=\"c2g-pw__label\">Packgewicht</span>\n @if (data().tourName) {\n <span class=\"c2g-pw__tour\">{{ data().tourName }}</span>\n }\n </div>\n <!-- Zone badge -->\n <span class=\"c2g-pw__zone-badge\"\n [style.background]=\"zone().bgColor\"\n [style.color]=\"zone().color\">\n {{ zone().label }}\n </span>\n </div>\n\n <!-- Big value -->\n <div class=\"c2g-pw__value-row\">\n <span class=\"c2g-pw__value\" [style.color]=\"zone().color\">{{ displayKg() }}</span>\n <span class=\"c2g-pw__unit\">kg</span>\n\n <!-- Diff pill -->\n @if (diffG() != null) {\n <span class=\"c2g-pw__diff-pill\"\n [class.c2g-pw__diff-pill--better]=\"diffTrend() === 'better'\"\n [class.c2g-pw__diff-pill--worse]=\"diffTrend() === 'worse'\">\n @if (diffTrend() === 'better') { \u2193 {{ diffKg() }} kg }\n @else if (diffTrend() === 'worse') { \u2191 {{ diffKg() }} kg }\n @else { \u2192 gleich }\n </span>\n }\n </div>\n\n <!-- Scale bar -->\n <div class=\"c2g-pw__scale\">\n\n <!-- Colour zone segments -->\n <div class=\"c2g-pw__zones\">\n @for (seg of zoneSegments(); track seg.label) {\n <div class=\"c2g-pw__zone-seg\"\n [style.width.%]=\"seg.width\"\n [style.background]=\"seg.bgColor\"\n [style.border-right]=\"'1px solid ' + seg.color + '22'\">\n </div>\n }\n </div>\n\n <!-- Gradient fill up to current value -->\n <div class=\"c2g-pw__fill-track\">\n <div class=\"c2g-pw__fill\"\n [style.width.%]=\"animatedPercent()\"\n [style.background]=\"'linear-gradient(90deg, #22c55e, ' + zone().color + ')'\">\n </div>\n </div>\n\n <!-- Previous marker -->\n @if (prevScalePercent() != null) {\n <div class=\"c2g-pw__marker c2g-pw__marker--prev\"\n [style.left.%]=\"prevScalePercent()\">\n <div class=\"c2g-pw__marker-line\"></div>\n <span class=\"c2g-pw__marker-label\">Letzte Tour</span>\n </div>\n }\n\n <!-- Current marker -->\n <div class=\"c2g-pw__marker c2g-pw__marker--current\"\n [style.left.%]=\"animatedPercent()\"\n [style.--marker-color]=\"zone().color\">\n <div class=\"c2g-pw__marker-pin\"></div>\n <div class=\"c2g-pw__marker-line\"></div>\n </div>\n\n <!-- Tick marks -->\n <div class=\"c2g-pw__ticks\">\n @for (tick of ticks; track tick.pct) {\n <div class=\"c2g-pw__tick\" [style.left.%]=\"tick.pct\">\n <div class=\"c2g-pw__tick-line\"></div>\n <span class=\"c2g-pw__tick-label\">{{ tick.label }}</span>\n </div>\n }\n </div>\n\n </div>\n\n <!-- Zone legend -->\n <div class=\"c2g-pw__legend\">\n @for (seg of zoneSegments(); track seg.label) {\n <div class=\"c2g-pw__legend-item\"\n [class.c2g-pw__legend-item--active]=\"seg.label === zone().label\">\n <span class=\"c2g-pw__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-pw__legend-label\">{{ seg.label }}</span>\n </div>\n }\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-pw{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-pw:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-pw__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.c2g-pw__title-col{display:flex;flex-direction:column;gap:2px}.c2g-pw__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-pw__tour{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-pw__zone-badge{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0}.c2g-pw__value-row{display:flex;align-items:baseline;gap:5px}.c2g-pw__value{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.03em;transition:color .4s ease}.c2g-pw__unit{font-size:1.3rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-bottom:3px}.c2g-pw__diff-pill{margin-left:8px;font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .05));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));align-self:center;white-space:nowrap}.c2g-pw__diff-pill--better{background:#22c55e1f;color:#22c55e}.c2g-pw__diff-pill--worse{background:#f973161f;color:#f97316}.c2g-pw__scale{position:relative;height:52px;margin:4px 0 8px}.c2g-pw__zones{position:absolute;top:0;left:0;right:0;height:12px;border-radius:6px;overflow:hidden;display:flex}.c2g-pw__zone-seg{height:100%}.c2g-pw__fill-track{position:absolute;top:0;left:0;right:0;height:12px;border-radius:6px;overflow:hidden}.c2g-pw__fill{height:100%;border-radius:6px;transition:width .9s cubic-bezier(.4,0,.2,1);opacity:.85}.c2g-pw__marker{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.c2g-pw__marker--current{transition:left .9s cubic-bezier(.4,0,.2,1);z-index:2}.c2g-pw__marker--prev{z-index:1;opacity:.5}.c2g-pw__marker-pin{width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;background:var(--marker-color, #ff6b35);box-shadow:0 0 0 2px var(--marker-color, #ff6b35),0 2px 8px #0003;margin-top:-1px;position:relative;z-index:1}.c2g-pw__marker-line{width:1.5px;height:10px;background:currentColor;opacity:.4;margin-top:1px}.c2g-pw__marker-label{font-size:.58rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;margin-top:1px;text-transform:uppercase;letter-spacing:.04em}.c2g-pw__ticks{position:absolute;top:14px;left:0;right:0}.c2g-pw__tick{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:1px}.c2g-pw__tick:first-child{transform:translate(0)}.c2g-pw__tick:last-child{transform:translate(-100%)}.c2g-pw__tick-line{width:1px;height:5px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .15))}.c2g-pw__tick-label{font-size:.6rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap}.c2g-pw__legend{display:flex;flex-wrap:wrap;gap:6px 10px;padding-top:2px}.c2g-pw__legend-item{display:flex;align-items:center;gap:4px;opacity:.45;transition:opacity .2s ease}.c2g-pw__legend-item--active{opacity:1}.c2g-pw__legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.c2g-pw__legend-label{font-size:.7rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1786
1786
|
}
|
|
1787
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackWeightWidgetComponent, decorators: [{
|
|
1788
1788
|
type: Component,
|
|
1789
1789
|
args: [{ selector: 'c2g-pack-weight-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-pw\">\n\n <!-- Header -->\n <div class=\"c2g-pw__header\">\n <div class=\"c2g-pw__title-col\">\n <span class=\"c2g-pw__label\">Packgewicht</span>\n @if (data().tourName) {\n <span class=\"c2g-pw__tour\">{{ data().tourName }}</span>\n }\n </div>\n <!-- Zone badge -->\n <span class=\"c2g-pw__zone-badge\"\n [style.background]=\"zone().bgColor\"\n [style.color]=\"zone().color\">\n {{ zone().label }}\n </span>\n </div>\n\n <!-- Big value -->\n <div class=\"c2g-pw__value-row\">\n <span class=\"c2g-pw__value\" [style.color]=\"zone().color\">{{ displayKg() }}</span>\n <span class=\"c2g-pw__unit\">kg</span>\n\n <!-- Diff pill -->\n @if (diffG() != null) {\n <span class=\"c2g-pw__diff-pill\"\n [class.c2g-pw__diff-pill--better]=\"diffTrend() === 'better'\"\n [class.c2g-pw__diff-pill--worse]=\"diffTrend() === 'worse'\">\n @if (diffTrend() === 'better') { \u2193 {{ diffKg() }} kg }\n @else if (diffTrend() === 'worse') { \u2191 {{ diffKg() }} kg }\n @else { \u2192 gleich }\n </span>\n }\n </div>\n\n <!-- Scale bar -->\n <div class=\"c2g-pw__scale\">\n\n <!-- Colour zone segments -->\n <div class=\"c2g-pw__zones\">\n @for (seg of zoneSegments(); track seg.label) {\n <div class=\"c2g-pw__zone-seg\"\n [style.width.%]=\"seg.width\"\n [style.background]=\"seg.bgColor\"\n [style.border-right]=\"'1px solid ' + seg.color + '22'\">\n </div>\n }\n </div>\n\n <!-- Gradient fill up to current value -->\n <div class=\"c2g-pw__fill-track\">\n <div class=\"c2g-pw__fill\"\n [style.width.%]=\"animatedPercent()\"\n [style.background]=\"'linear-gradient(90deg, #22c55e, ' + zone().color + ')'\">\n </div>\n </div>\n\n <!-- Previous marker -->\n @if (prevScalePercent() != null) {\n <div class=\"c2g-pw__marker c2g-pw__marker--prev\"\n [style.left.%]=\"prevScalePercent()\">\n <div class=\"c2g-pw__marker-line\"></div>\n <span class=\"c2g-pw__marker-label\">Letzte Tour</span>\n </div>\n }\n\n <!-- Current marker -->\n <div class=\"c2g-pw__marker c2g-pw__marker--current\"\n [style.left.%]=\"animatedPercent()\"\n [style.--marker-color]=\"zone().color\">\n <div class=\"c2g-pw__marker-pin\"></div>\n <div class=\"c2g-pw__marker-line\"></div>\n </div>\n\n <!-- Tick marks -->\n <div class=\"c2g-pw__ticks\">\n @for (tick of ticks; track tick.pct) {\n <div class=\"c2g-pw__tick\" [style.left.%]=\"tick.pct\">\n <div class=\"c2g-pw__tick-line\"></div>\n <span class=\"c2g-pw__tick-label\">{{ tick.label }}</span>\n </div>\n }\n </div>\n\n </div>\n\n <!-- Zone legend -->\n <div class=\"c2g-pw__legend\">\n @for (seg of zoneSegments(); track seg.label) {\n <div class=\"c2g-pw__legend-item\"\n [class.c2g-pw__legend-item--active]=\"seg.label === zone().label\">\n <span class=\"c2g-pw__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-pw__legend-label\">{{ seg.label }}</span>\n </div>\n }\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-pw{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-pw:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-pw__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.c2g-pw__title-col{display:flex;flex-direction:column;gap:2px}.c2g-pw__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-pw__tour{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-pw__zone-badge{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0}.c2g-pw__value-row{display:flex;align-items:baseline;gap:5px}.c2g-pw__value{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.03em;transition:color .4s ease}.c2g-pw__unit{font-size:1.3rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-bottom:3px}.c2g-pw__diff-pill{margin-left:8px;font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .05));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));align-self:center;white-space:nowrap}.c2g-pw__diff-pill--better{background:#22c55e1f;color:#22c55e}.c2g-pw__diff-pill--worse{background:#f973161f;color:#f97316}.c2g-pw__scale{position:relative;height:52px;margin:4px 0 8px}.c2g-pw__zones{position:absolute;top:0;left:0;right:0;height:12px;border-radius:6px;overflow:hidden;display:flex}.c2g-pw__zone-seg{height:100%}.c2g-pw__fill-track{position:absolute;top:0;left:0;right:0;height:12px;border-radius:6px;overflow:hidden}.c2g-pw__fill{height:100%;border-radius:6px;transition:width .9s cubic-bezier(.4,0,.2,1);opacity:.85}.c2g-pw__marker{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.c2g-pw__marker--current{transition:left .9s cubic-bezier(.4,0,.2,1);z-index:2}.c2g-pw__marker--prev{z-index:1;opacity:.5}.c2g-pw__marker-pin{width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;background:var(--marker-color, #ff6b35);box-shadow:0 0 0 2px var(--marker-color, #ff6b35),0 2px 8px #0003;margin-top:-1px;position:relative;z-index:1}.c2g-pw__marker-line{width:1.5px;height:10px;background:currentColor;opacity:.4;margin-top:1px}.c2g-pw__marker-label{font-size:.58rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;margin-top:1px;text-transform:uppercase;letter-spacing:.04em}.c2g-pw__ticks{position:absolute;top:14px;left:0;right:0}.c2g-pw__tick{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:1px}.c2g-pw__tick:first-child{transform:translate(0)}.c2g-pw__tick:last-child{transform:translate(-100%)}.c2g-pw__tick-line{width:1px;height:5px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .15))}.c2g-pw__tick-label{font-size:.6rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap}.c2g-pw__legend{display:flex;flex-wrap:wrap;gap:6px 10px;padding-top:2px}.c2g-pw__legend-item{display:flex;align-items:center;gap:4px;opacity:.45;transition:opacity .2s ease}.c2g-pw__legend-item--active{opacity:1}.c2g-pw__legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.c2g-pw__legend-label{font-size:.7rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}\n"] }]
|
|
1790
|
-
}], ctorParameters: () => []
|
|
1790
|
+
}], ctorParameters: () => [] });
|
|
1791
1791
|
|
|
1792
1792
|
class MemberReadinessWidgetComponent {
|
|
1793
1793
|
members = input.required(...(ngDevMode ? [{ debugName: "members" }] : []));
|
|
@@ -1846,13 +1846,13 @@ class MemberReadinessWidgetComponent {
|
|
|
1846
1846
|
// Collapse groups with only-ready members by default if many groups
|
|
1847
1847
|
return this.collapsed.get(index) ?? false;
|
|
1848
1848
|
}
|
|
1849
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1850
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MemberReadinessWidgetComponent, isStandalone: true, selector: "c2g-member-readiness-widget", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, tourName: { classPropertyName: "tourName", publicName: "tourName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-mr\">\n\n <!-- Header -->\n <div class=\"c2g-mr__header\">\n <div class=\"c2g-mr__title-col\">\n <span class=\"c2g-mr__label\">\uD83D\uDC65 Gruppenbereitschaft</span>\n @if (tourName()) {\n <span class=\"c2g-mr__tour\">{{ tourName() }}</span>\n }\n </div>\n <div class=\"c2g-mr__summary-pill\">\n <span class=\"c2g-mr__summary-ready\">{{ fullyReady() }}</span>\n <span class=\"c2g-mr__summary-sep\">/</span>\n <span class=\"c2g-mr__summary-total\">{{ members().length }}</span>\n <span class=\"c2g-mr__summary-unit\">bereit</span>\n </div>\n </div>\n\n <!-- Overall progress bar -->\n <div class=\"c2g-mr__overall-track\" [attr.aria-valuenow]=\"overallPercent()\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"c2g-mr__overall-fill\"\n [style.width.%]=\"overallPercent()\"\n [class.c2g-mr__overall-fill--success]=\"overallPercent() === 100\">\n </div>\n <span class=\"c2g-mr__overall-pct\">{{ overallPercent() }}%</span>\n </div>\n\n <!-- GROUPED layout (6+ members) -->\n @if (useGrouped()) {\n <div class=\"c2g-mr__groups\">\n @for (group of groups(); track group.label; let gi = $index) {\n <div class=\"c2g-mr__group\" [class]=\"'c2g-mr__group--' + group.color\">\n\n <!-- Group header (clickable to toggle) -->\n <button class=\"c2g-mr__group-header\" (click)=\"toggleGroup(gi)\" type=\"button\">\n <span class=\"c2g-mr__group-emoji\">{{ group.emoji }}</span>\n <span class=\"c2g-mr__group-name\">{{ group.label }}</span>\n <span class=\"c2g-mr__group-count\">{{ group.members.length }}</span>\n <!-- Avatar stack preview (max 4) -->\n <div class=\"c2g-mr__avatar-stack\">\n @for (m of group.members.slice(0, 4); track m.name) {\n <span class=\"c2g-mr__avatar-tiny\" [class]=\"'c2g-mr__avatar-tiny--' + group.color\"\n [title]=\"m.name\">{{ m.initials }}</span>\n }\n @if (group.members.length > 4) {\n <span class=\"c2g-mr__avatar-tiny c2g-mr__avatar-tiny--more\">+{{ group.members.length - 4 }}</span>\n }\n </div>\n <span class=\"c2g-mr__group-chevron\" [class.c2g-mr__group-chevron--open]=\"!isCollapsed(gi)\">\u203A</span>\n </button>\n\n <!-- Member rows (collapsible) -->\n @if (!isCollapsed(gi)) {\n <ul class=\"c2g-mr__member-list\">\n @for (m of group.members; track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + group.color\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + group.color\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + group.color\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n\n } @else {\n <!-- FLAT layout (< 6 members) -->\n <ul class=\"c2g-mr__flat-list\">\n @for (m of flatSorted(); track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + readyColor(m)\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + readyColor(m)\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + readyColor(m)\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-mr{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-mr:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .12));transform:translateY(-2px)}.c2g-mr__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;gap:10px}.c2g-mr__title-col{display:flex;flex-direction:column;gap:2px;min-width:0}.c2g-mr__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__tour{font-size:.85rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-mr__summary-pill{display:flex;align-items:baseline;gap:3px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));border-radius:20px;padding:4px 12px;flex-shrink:0}.c2g-mr__summary-ready{font-size:1.1rem;font-weight:900;color:var(--c2g-theme-primary, #ff6b35);line-height:1}.c2g-mr__summary-sep{font-size:.8rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__summary-total{font-size:.9rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-mr__summary-unit{font-size:.7rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:2px}.c2g-mr__overall-track{position:relative;margin:0 18px 12px;height:7px;border-radius:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:visible}.c2g-mr__overall-fill{height:100%;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-mr__overall-fill--success{background:var(--c2g-theme-success, #22c55e)}.c2g-mr__overall-pct{position:absolute;right:0;top:-18px;font-size:.7rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__groups{display:flex;flex-direction:column;gap:2px;padding:0 10px 12px}.c2g-mr__group{border-radius:12px;overflow:hidden;transition:background .15s ease;background:var(--mr-group-bg)}.c2g-mr__group--success{--mr-accent: #22c55e;--mr-accent-bg: rgba(34, 197, 94, .12);--mr-group-bg: rgba(34, 197, 94, .08)}.c2g-mr__group--warning{--mr-accent: #f59e0b;--mr-accent-bg: rgba(245, 158, 11, .15);--mr-group-bg: rgba(245, 158, 11, .06)}.c2g-mr__group--danger{--mr-accent: #ef4444;--mr-accent-bg: rgba(239, 68, 68, .15);--mr-group-bg: rgba(239, 68, 68, .06)}.c2g-mr__group--neutral{--mr-accent: #9ca3af;--mr-accent-bg: rgba(156, 163, 175, .15);--mr-group-bg: rgba(156, 163, 175, .05)}.c2g-mr__group-header{width:100%;display:flex;align-items:center;gap:6px;padding:8px 10px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:12px;transition:background .15s ease}.c2g-mr__group-header:hover{background:var(--mr-accent-bg)}.c2g-mr__group-emoji{font-size:1rem;line-height:1;flex-shrink:0}.c2g-mr__group-name{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-mr__group-count{font-size:.72rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;background:var(--mr-accent-bg);color:var(--mr-accent);display:flex;align-items:center;justify-content:center;padding:0 5px}.c2g-mr__avatar-stack{display:flex;margin-left:4px}.c2g-mr__avatar-tiny{width:22px;height:22px;border-radius:50%;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:-6px;border:2px solid var(--c2g-theme-surface, #fff);background:var(--mr-accent-bg);color:var(--mr-accent)}.c2g-mr__avatar-tiny:first-child{margin-left:0}.c2g-mr__avatar-tiny--more{background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:.5rem}.c2g-mr__group-chevron{font-size:1.1rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));transform:rotate(90deg);transition:transform .2s ease;line-height:1;margin-left:2px}.c2g-mr__group-chevron--open{transform:rotate(-90deg)}.c2g-mr__member-list,.c2g-mr__flat-list{list-style:none;margin:0;padding:0 10px 4px;display:flex;flex-direction:column;gap:2px}.c2g-mr__flat-list{padding:0 10px 14px}.c2g-mr__member{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;transition:background .15s ease}.c2g-mr__member:hover{background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .03))}.c2g-mr__member--self{background:#ff6b350f}.c2g-mr__member--self:hover{background:#ff6b351a}.c2g-mr__avatar-sm{width:28px;height:28px;border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-mr__avatar-sm--success{background:#22c55e1f;color:#22c55e}.c2g-mr__avatar-sm--warning{background:#f59e0b26;color:#f59e0b}.c2g-mr__avatar-sm--danger{background:#ef444426;color:#ef4444}.c2g-mr__avatar-sm--neutral{background:#9ca3af26;color:#9ca3af}.c2g-mr__member-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}.c2g-mr__self-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);color:#fff;flex-shrink:0}.c2g-mr__mini-track{width:52px;height:4px;border-radius:2px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:hidden;flex-shrink:0}.c2g-mr__mini-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-mr__mini-fill--success{background:#22c55e}.c2g-mr__mini-fill--warning{background:#f59e0b}.c2g-mr__mini-fill--danger{background:#ef4444}.c2g-mr__mini-fill--neutral{background:#9ca3af}.c2g-mr__member-pct{font-size:.72rem;font-weight:700;min-width:32px;text-align:right;flex-shrink:0}.c2g-mr__member-pct--success{color:#22c55e}.c2g-mr__member-pct--warning{color:#f59e0b}.c2g-mr__member-pct--danger{color:#ef4444}.c2g-mr__member-pct--neutral{color:#9ca3af}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1849
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberReadinessWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MemberReadinessWidgetComponent, isStandalone: true, selector: "c2g-member-readiness-widget", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: true, transformFunction: null }, tourName: { classPropertyName: "tourName", publicName: "tourName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-mr\">\n\n <!-- Header -->\n <div class=\"c2g-mr__header\">\n <div class=\"c2g-mr__title-col\">\n <span class=\"c2g-mr__label\">\uD83D\uDC65 Gruppenbereitschaft</span>\n @if (tourName()) {\n <span class=\"c2g-mr__tour\">{{ tourName() }}</span>\n }\n </div>\n <div class=\"c2g-mr__summary-pill\">\n <span class=\"c2g-mr__summary-ready\">{{ fullyReady() }}</span>\n <span class=\"c2g-mr__summary-sep\">/</span>\n <span class=\"c2g-mr__summary-total\">{{ members().length }}</span>\n <span class=\"c2g-mr__summary-unit\">bereit</span>\n </div>\n </div>\n\n <!-- Overall progress bar -->\n <div class=\"c2g-mr__overall-track\" [attr.aria-valuenow]=\"overallPercent()\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"c2g-mr__overall-fill\"\n [style.width.%]=\"overallPercent()\"\n [class.c2g-mr__overall-fill--success]=\"overallPercent() === 100\">\n </div>\n <span class=\"c2g-mr__overall-pct\">{{ overallPercent() }}%</span>\n </div>\n\n <!-- GROUPED layout (6+ members) -->\n @if (useGrouped()) {\n <div class=\"c2g-mr__groups\">\n @for (group of groups(); track group.label; let gi = $index) {\n <div class=\"c2g-mr__group\" [class]=\"'c2g-mr__group--' + group.color\">\n\n <!-- Group header (clickable to toggle) -->\n <button class=\"c2g-mr__group-header\" (click)=\"toggleGroup(gi)\" type=\"button\">\n <span class=\"c2g-mr__group-emoji\">{{ group.emoji }}</span>\n <span class=\"c2g-mr__group-name\">{{ group.label }}</span>\n <span class=\"c2g-mr__group-count\">{{ group.members.length }}</span>\n <!-- Avatar stack preview (max 4) -->\n <div class=\"c2g-mr__avatar-stack\">\n @for (m of group.members.slice(0, 4); track m.name) {\n <span class=\"c2g-mr__avatar-tiny\" [class]=\"'c2g-mr__avatar-tiny--' + group.color\"\n [title]=\"m.name\">{{ m.initials }}</span>\n }\n @if (group.members.length > 4) {\n <span class=\"c2g-mr__avatar-tiny c2g-mr__avatar-tiny--more\">+{{ group.members.length - 4 }}</span>\n }\n </div>\n <span class=\"c2g-mr__group-chevron\" [class.c2g-mr__group-chevron--open]=\"!isCollapsed(gi)\">\u203A</span>\n </button>\n\n <!-- Member rows (collapsible) -->\n @if (!isCollapsed(gi)) {\n <ul class=\"c2g-mr__member-list\">\n @for (m of group.members; track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + group.color\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + group.color\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + group.color\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n\n } @else {\n <!-- FLAT layout (< 6 members) -->\n <ul class=\"c2g-mr__flat-list\">\n @for (m of flatSorted(); track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + readyColor(m)\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + readyColor(m)\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + readyColor(m)\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-mr{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-mr:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .12));transform:translateY(-2px)}.c2g-mr__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;gap:10px}.c2g-mr__title-col{display:flex;flex-direction:column;gap:2px;min-width:0}.c2g-mr__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__tour{font-size:.85rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-mr__summary-pill{display:flex;align-items:baseline;gap:3px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));border-radius:20px;padding:4px 12px;flex-shrink:0}.c2g-mr__summary-ready{font-size:1.1rem;font-weight:900;color:var(--c2g-theme-primary, #ff6b35);line-height:1}.c2g-mr__summary-sep{font-size:.8rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__summary-total{font-size:.9rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-mr__summary-unit{font-size:.7rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:2px}.c2g-mr__overall-track{position:relative;margin:0 18px 12px;height:7px;border-radius:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:visible}.c2g-mr__overall-fill{height:100%;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-mr__overall-fill--success{background:var(--c2g-theme-success, #22c55e)}.c2g-mr__overall-pct{position:absolute;right:0;top:-18px;font-size:.7rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__groups{display:flex;flex-direction:column;gap:2px;padding:0 10px 12px}.c2g-mr__group{border-radius:12px;overflow:hidden;transition:background .15s ease;background:var(--mr-group-bg)}.c2g-mr__group--success{--mr-accent: #22c55e;--mr-accent-bg: rgba(34, 197, 94, .12);--mr-group-bg: rgba(34, 197, 94, .08)}.c2g-mr__group--warning{--mr-accent: #f59e0b;--mr-accent-bg: rgba(245, 158, 11, .15);--mr-group-bg: rgba(245, 158, 11, .06)}.c2g-mr__group--danger{--mr-accent: #ef4444;--mr-accent-bg: rgba(239, 68, 68, .15);--mr-group-bg: rgba(239, 68, 68, .06)}.c2g-mr__group--neutral{--mr-accent: #9ca3af;--mr-accent-bg: rgba(156, 163, 175, .15);--mr-group-bg: rgba(156, 163, 175, .05)}.c2g-mr__group-header{width:100%;display:flex;align-items:center;gap:6px;padding:8px 10px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:12px;transition:background .15s ease}.c2g-mr__group-header:hover{background:var(--mr-accent-bg)}.c2g-mr__group-emoji{font-size:1rem;line-height:1;flex-shrink:0}.c2g-mr__group-name{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-mr__group-count{font-size:.72rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;background:var(--mr-accent-bg);color:var(--mr-accent);display:flex;align-items:center;justify-content:center;padding:0 5px}.c2g-mr__avatar-stack{display:flex;margin-left:4px}.c2g-mr__avatar-tiny{width:22px;height:22px;border-radius:50%;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:-6px;border:2px solid var(--c2g-theme-surface, #fff);background:var(--mr-accent-bg);color:var(--mr-accent)}.c2g-mr__avatar-tiny:first-child{margin-left:0}.c2g-mr__avatar-tiny--more{background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:.5rem}.c2g-mr__group-chevron{font-size:1.1rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));transform:rotate(90deg);transition:transform .2s ease;line-height:1;margin-left:2px}.c2g-mr__group-chevron--open{transform:rotate(-90deg)}.c2g-mr__member-list,.c2g-mr__flat-list{list-style:none;margin:0;padding:0 10px 4px;display:flex;flex-direction:column;gap:2px}.c2g-mr__flat-list{padding:0 10px 14px}.c2g-mr__member{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;transition:background .15s ease}.c2g-mr__member:hover{background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .03))}.c2g-mr__member--self{background:#ff6b350f}.c2g-mr__member--self:hover{background:#ff6b351a}.c2g-mr__avatar-sm{width:28px;height:28px;border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-mr__avatar-sm--success{background:#22c55e1f;color:#22c55e}.c2g-mr__avatar-sm--warning{background:#f59e0b26;color:#f59e0b}.c2g-mr__avatar-sm--danger{background:#ef444426;color:#ef4444}.c2g-mr__avatar-sm--neutral{background:#9ca3af26;color:#9ca3af}.c2g-mr__member-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}.c2g-mr__self-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);color:#fff;flex-shrink:0}.c2g-mr__mini-track{width:52px;height:4px;border-radius:2px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:hidden;flex-shrink:0}.c2g-mr__mini-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-mr__mini-fill--success{background:#22c55e}.c2g-mr__mini-fill--warning{background:#f59e0b}.c2g-mr__mini-fill--danger{background:#ef4444}.c2g-mr__mini-fill--neutral{background:#9ca3af}.c2g-mr__member-pct{font-size:.72rem;font-weight:700;min-width:32px;text-align:right;flex-shrink:0}.c2g-mr__member-pct--success{color:#22c55e}.c2g-mr__member-pct--warning{color:#f59e0b}.c2g-mr__member-pct--danger{color:#ef4444}.c2g-mr__member-pct--neutral{color:#9ca3af}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1851
1851
|
}
|
|
1852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MemberReadinessWidgetComponent, decorators: [{
|
|
1853
1853
|
type: Component,
|
|
1854
1854
|
args: [{ selector: 'c2g-member-readiness-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-mr\">\n\n <!-- Header -->\n <div class=\"c2g-mr__header\">\n <div class=\"c2g-mr__title-col\">\n <span class=\"c2g-mr__label\">\uD83D\uDC65 Gruppenbereitschaft</span>\n @if (tourName()) {\n <span class=\"c2g-mr__tour\">{{ tourName() }}</span>\n }\n </div>\n <div class=\"c2g-mr__summary-pill\">\n <span class=\"c2g-mr__summary-ready\">{{ fullyReady() }}</span>\n <span class=\"c2g-mr__summary-sep\">/</span>\n <span class=\"c2g-mr__summary-total\">{{ members().length }}</span>\n <span class=\"c2g-mr__summary-unit\">bereit</span>\n </div>\n </div>\n\n <!-- Overall progress bar -->\n <div class=\"c2g-mr__overall-track\" [attr.aria-valuenow]=\"overallPercent()\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n <div class=\"c2g-mr__overall-fill\"\n [style.width.%]=\"overallPercent()\"\n [class.c2g-mr__overall-fill--success]=\"overallPercent() === 100\">\n </div>\n <span class=\"c2g-mr__overall-pct\">{{ overallPercent() }}%</span>\n </div>\n\n <!-- GROUPED layout (6+ members) -->\n @if (useGrouped()) {\n <div class=\"c2g-mr__groups\">\n @for (group of groups(); track group.label; let gi = $index) {\n <div class=\"c2g-mr__group\" [class]=\"'c2g-mr__group--' + group.color\">\n\n <!-- Group header (clickable to toggle) -->\n <button class=\"c2g-mr__group-header\" (click)=\"toggleGroup(gi)\" type=\"button\">\n <span class=\"c2g-mr__group-emoji\">{{ group.emoji }}</span>\n <span class=\"c2g-mr__group-name\">{{ group.label }}</span>\n <span class=\"c2g-mr__group-count\">{{ group.members.length }}</span>\n <!-- Avatar stack preview (max 4) -->\n <div class=\"c2g-mr__avatar-stack\">\n @for (m of group.members.slice(0, 4); track m.name) {\n <span class=\"c2g-mr__avatar-tiny\" [class]=\"'c2g-mr__avatar-tiny--' + group.color\"\n [title]=\"m.name\">{{ m.initials }}</span>\n }\n @if (group.members.length > 4) {\n <span class=\"c2g-mr__avatar-tiny c2g-mr__avatar-tiny--more\">+{{ group.members.length - 4 }}</span>\n }\n </div>\n <span class=\"c2g-mr__group-chevron\" [class.c2g-mr__group-chevron--open]=\"!isCollapsed(gi)\">\u203A</span>\n </button>\n\n <!-- Member rows (collapsible) -->\n @if (!isCollapsed(gi)) {\n <ul class=\"c2g-mr__member-list\">\n @for (m of group.members; track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + group.color\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + group.color\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + group.color\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n </div>\n }\n </div>\n\n } @else {\n <!-- FLAT layout (< 6 members) -->\n <ul class=\"c2g-mr__flat-list\">\n @for (m of flatSorted(); track m.name) {\n <li class=\"c2g-mr__member\" [class.c2g-mr__member--self]=\"m.isSelf\">\n <span class=\"c2g-mr__avatar-sm\" [class]=\"'c2g-mr__avatar-sm--' + readyColor(m)\">\n {{ m.initials }}\n </span>\n <span class=\"c2g-mr__member-name\">\n {{ m.name }}\n @if (m.isSelf) { <span class=\"c2g-mr__self-tag\">Du</span> }\n </span>\n <div class=\"c2g-mr__mini-track\">\n <div class=\"c2g-mr__mini-fill\"\n [class]=\"'c2g-mr__mini-fill--' + readyColor(m)\"\n [style.width.%]=\"readyPercent(m)\">\n </div>\n </div>\n <span class=\"c2g-mr__member-pct\" [class]=\"'c2g-mr__member-pct--' + readyColor(m)\">\n {{ readyPercent(m) }}%\n </span>\n </li>\n }\n </ul>\n }\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-mr{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-mr:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .12));transform:translateY(-2px)}.c2g-mr__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;gap:10px}.c2g-mr__title-col{display:flex;flex-direction:column;gap:2px;min-width:0}.c2g-mr__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__tour{font-size:.85rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-mr__summary-pill{display:flex;align-items:baseline;gap:3px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));border-radius:20px;padding:4px 12px;flex-shrink:0}.c2g-mr__summary-ready{font-size:1.1rem;font-weight:900;color:var(--c2g-theme-primary, #ff6b35);line-height:1}.c2g-mr__summary-sep{font-size:.8rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__summary-total{font-size:.9rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-mr__summary-unit{font-size:.7rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:2px}.c2g-mr__overall-track{position:relative;margin:0 18px 12px;height:7px;border-radius:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:visible}.c2g-mr__overall-fill{height:100%;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-mr__overall-fill--success{background:var(--c2g-theme-success, #22c55e)}.c2g-mr__overall-pct{position:absolute;right:0;top:-18px;font-size:.7rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-mr__groups{display:flex;flex-direction:column;gap:2px;padding:0 10px 12px}.c2g-mr__group{border-radius:12px;overflow:hidden;transition:background .15s ease;background:var(--mr-group-bg)}.c2g-mr__group--success{--mr-accent: #22c55e;--mr-accent-bg: rgba(34, 197, 94, .12);--mr-group-bg: rgba(34, 197, 94, .08)}.c2g-mr__group--warning{--mr-accent: #f59e0b;--mr-accent-bg: rgba(245, 158, 11, .15);--mr-group-bg: rgba(245, 158, 11, .06)}.c2g-mr__group--danger{--mr-accent: #ef4444;--mr-accent-bg: rgba(239, 68, 68, .15);--mr-group-bg: rgba(239, 68, 68, .06)}.c2g-mr__group--neutral{--mr-accent: #9ca3af;--mr-accent-bg: rgba(156, 163, 175, .15);--mr-group-bg: rgba(156, 163, 175, .05)}.c2g-mr__group-header{width:100%;display:flex;align-items:center;gap:6px;padding:8px 10px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:12px;transition:background .15s ease}.c2g-mr__group-header:hover{background:var(--mr-accent-bg)}.c2g-mr__group-emoji{font-size:1rem;line-height:1;flex-shrink:0}.c2g-mr__group-name{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-mr__group-count{font-size:.72rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;background:var(--mr-accent-bg);color:var(--mr-accent);display:flex;align-items:center;justify-content:center;padding:0 5px}.c2g-mr__avatar-stack{display:flex;margin-left:4px}.c2g-mr__avatar-tiny{width:22px;height:22px;border-radius:50%;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:-6px;border:2px solid var(--c2g-theme-surface, #fff);background:var(--mr-accent-bg);color:var(--mr-accent)}.c2g-mr__avatar-tiny:first-child{margin-left:0}.c2g-mr__avatar-tiny--more{background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .1));color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:.5rem}.c2g-mr__group-chevron{font-size:1.1rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));transform:rotate(90deg);transition:transform .2s ease;line-height:1;margin-left:2px}.c2g-mr__group-chevron--open{transform:rotate(-90deg)}.c2g-mr__member-list,.c2g-mr__flat-list{list-style:none;margin:0;padding:0 10px 4px;display:flex;flex-direction:column;gap:2px}.c2g-mr__flat-list{padding:0 10px 14px}.c2g-mr__member{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;transition:background .15s ease}.c2g-mr__member:hover{background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .03))}.c2g-mr__member--self{background:#ff6b350f}.c2g-mr__member--self:hover{background:#ff6b351a}.c2g-mr__avatar-sm{width:28px;height:28px;border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-mr__avatar-sm--success{background:#22c55e1f;color:#22c55e}.c2g-mr__avatar-sm--warning{background:#f59e0b26;color:#f59e0b}.c2g-mr__avatar-sm--danger{background:#ef444426;color:#ef4444}.c2g-mr__avatar-sm--neutral{background:#9ca3af26;color:#9ca3af}.c2g-mr__member-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}.c2g-mr__self-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:var(--c2g-theme-primary, #ff6b35);color:#fff;flex-shrink:0}.c2g-mr__mini-track{width:52px;height:4px;border-radius:2px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));overflow:hidden;flex-shrink:0}.c2g-mr__mini-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-mr__mini-fill--success{background:#22c55e}.c2g-mr__mini-fill--warning{background:#f59e0b}.c2g-mr__mini-fill--danger{background:#ef4444}.c2g-mr__mini-fill--neutral{background:#9ca3af}.c2g-mr__member-pct{font-size:.72rem;font-weight:700;min-width:32px;text-align:right;flex-shrink:0}.c2g-mr__member-pct--success{color:#22c55e}.c2g-mr__member-pct--warning{color:#f59e0b}.c2g-mr__member-pct--danger{color:#ef4444}.c2g-mr__member-pct--neutral{color:#9ca3af}\n"] }]
|
|
1855
|
-
}]
|
|
1855
|
+
}] });
|
|
1856
1856
|
|
|
1857
1857
|
class StreakWidgetComponent {
|
|
1858
1858
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -1901,13 +1901,13 @@ class StreakWidgetComponent {
|
|
|
1901
1901
|
return `${s} Tage Streak`;
|
|
1902
1902
|
}, ...(ngDevMode ? [{ debugName: "streakLabel" }] : []));
|
|
1903
1903
|
xpToNext = computed(() => Math.max(0, this.data().nextLevelXp - this.data().experiencePoints), ...(ngDevMode ? [{ debugName: "xpToNext" }] : []));
|
|
1904
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1904
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StreakWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: StreakWidgetComponent, isStandalone: true, selector: "c2g-streak-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-streak\" [class]=\"'c2g-streak--' + streakTier()\">\n\n <div class=\"c2g-streak__header\">\n <span class=\"c2g-streak__title\">Abenteurer-Level</span>\n <span class=\"c2g-streak__level-badge\">Lvl {{ data().level }}</span>\n </div>\n\n <div class=\"c2g-streak__hero\">\n <span class=\"c2g-streak__emoji\">{{ streakEmoji() }}</span>\n <div class=\"c2g-streak__streak-info\">\n <span class=\"c2g-streak__streak-count\">{{ data().streakDays }}</span>\n <span class=\"c2g-streak__streak-unit\">{{ data().streakDays === 1 ? 'Tag' : 'Tage' }}</span>\n </div>\n </div>\n\n <div class=\"c2g-streak__level-row\">\n <span class=\"c2g-streak__level-label\">{{ levelLabel() }}</span>\n <span class=\"c2g-streak__xp-label\">{{ data().experiencePoints }} / {{ data().nextLevelXp }} XP</span>\n </div>\n\n <div class=\"c2g-streak__xp-track\">\n <div class=\"c2g-streak__xp-fill\" [style.width.%]=\"xpPercent()\"></div>\n </div>\n\n <div class=\"c2g-streak__stats\">\n @if (data().totalDistanceKm != null) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">{{ data().totalDistanceKm }}</span>\n <span class=\"c2g-streak__stat-label\">km</span>\n </div>\n }\n @if (data().totalNightsCamped != null) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">{{ data().totalNightsCamped }}</span>\n <span class=\"c2g-streak__stat-label\">N\u00E4chte</span>\n </div>\n }\n @if (data().favoriteSeason) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">\n @switch (data().favoriteSeason) {\n @case ('spring') { \uD83C\uDF38 }\n @case ('summer') { \u2600\uFE0F }\n @case ('autumn') { \uD83C\uDF42 }\n @case ('winter') { \u2744\uFE0F }\n @default { \uD83C\uDFD5\uFE0F }\n }\n </span>\n <span class=\"c2g-streak__stat-label\">Lieblingszeit</span>\n </div>\n }\n </div>\n\n @if (xpToNext() > 0) {\n <div class=\"c2g-streak__next-level\">\n Noch {{ xpToNext() }} XP bis Level {{ data().level + 1 }}\n </div>\n } @else {\n <div class=\"c2g-streak__next-level c2g-streak__next-level--ready\">\n Level Up bereit! \uD83C\uDF89\n </div>\n }\n\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease)}.c2g-streak{border-radius:var(--c2g-radius-lg, 16px);padding:20px;background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);transition:box-shadow .2s ease;position:relative;overflow:hidden}.c2g-streak:hover{box-shadow:var(--c2g-shadow-md, 0 4px 12px rgba(0, 0, 0, .1))}.c2g-streak:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));transition:background .3s ease}.c2g-streak--warm:before{background:#f59e0b}.c2g-streak--hot:before{background:linear-gradient(90deg,#f97316,#ef4444)}.c2g-streak--legendary:before{background:linear-gradient(90deg,#a855f7,#ec4899,#f59e0b)}.c2g-streak__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.c2g-streak__title{font-size:var(--c2g-font-size-sm, .875rem);font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-streak__level-badge{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:20px;background:var(--c2g-theme-primary, var(--c2g-color-primary));color:#fff;letter-spacing:.02em}.c2g-streak--hot .c2g-streak__level-badge{background:#f97316}.c2g-streak--legendary .c2g-streak__level-badge{background:linear-gradient(135deg,#a855f7,#ec4899)}.c2g-streak__hero{display:flex;align-items:center;gap:12px;margin-bottom:12px}.c2g-streak__emoji{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.c2g-streak__streak-info{display:flex;align-items:baseline;gap:4px}.c2g-streak__streak-count{font-size:3rem;font-weight:900;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));transition:color .3s ease}.c2g-streak--warm .c2g-streak__streak-count{color:#f59e0b}.c2g-streak--hot .c2g-streak__streak-count{color:#f97316}.c2g-streak--legendary .c2g-streak__streak-count{color:#a855f7}.c2g-streak__streak-unit{font-size:1rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-bottom:4px}.c2g-streak__level-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.c2g-streak__level-label{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-streak__xp-label{font-size:.72rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-streak__xp-track{height:8px;border-radius:4px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));overflow:hidden;margin-bottom:16px}.c2g-streak__xp-fill{height:100%;border-radius:4px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-streak--warm .c2g-streak__xp-fill{background:#f59e0b}.c2g-streak--hot .c2g-streak__xp-fill{background:linear-gradient(90deg,#f97316,#ef4444)}.c2g-streak--legendary .c2g-streak__xp-fill{background:linear-gradient(90deg,#a855f7,#ec4899)}.c2g-streak__stats{display:flex;gap:0;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));overflow:hidden;margin-bottom:12px}.c2g-streak__stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-right:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline))}.c2g-streak__stat:last-child{border-right:none}.c2g-streak__stat-value{font-size:1.1rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));line-height:1}.c2g-streak__stat-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-streak__next-level{font-size:.75rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center}.c2g-streak__next-level--ready{color:var(--c2g-theme-success, var(--c2g-color-success));font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1906
1906
|
}
|
|
1907
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StreakWidgetComponent, decorators: [{
|
|
1908
1908
|
type: Component,
|
|
1909
1909
|
args: [{ selector: 'c2g-streak-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-streak\" [class]=\"'c2g-streak--' + streakTier()\">\n\n <div class=\"c2g-streak__header\">\n <span class=\"c2g-streak__title\">Abenteurer-Level</span>\n <span class=\"c2g-streak__level-badge\">Lvl {{ data().level }}</span>\n </div>\n\n <div class=\"c2g-streak__hero\">\n <span class=\"c2g-streak__emoji\">{{ streakEmoji() }}</span>\n <div class=\"c2g-streak__streak-info\">\n <span class=\"c2g-streak__streak-count\">{{ data().streakDays }}</span>\n <span class=\"c2g-streak__streak-unit\">{{ data().streakDays === 1 ? 'Tag' : 'Tage' }}</span>\n </div>\n </div>\n\n <div class=\"c2g-streak__level-row\">\n <span class=\"c2g-streak__level-label\">{{ levelLabel() }}</span>\n <span class=\"c2g-streak__xp-label\">{{ data().experiencePoints }} / {{ data().nextLevelXp }} XP</span>\n </div>\n\n <div class=\"c2g-streak__xp-track\">\n <div class=\"c2g-streak__xp-fill\" [style.width.%]=\"xpPercent()\"></div>\n </div>\n\n <div class=\"c2g-streak__stats\">\n @if (data().totalDistanceKm != null) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">{{ data().totalDistanceKm }}</span>\n <span class=\"c2g-streak__stat-label\">km</span>\n </div>\n }\n @if (data().totalNightsCamped != null) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">{{ data().totalNightsCamped }}</span>\n <span class=\"c2g-streak__stat-label\">N\u00E4chte</span>\n </div>\n }\n @if (data().favoriteSeason) {\n <div class=\"c2g-streak__stat\">\n <span class=\"c2g-streak__stat-value\">\n @switch (data().favoriteSeason) {\n @case ('spring') { \uD83C\uDF38 }\n @case ('summer') { \u2600\uFE0F }\n @case ('autumn') { \uD83C\uDF42 }\n @case ('winter') { \u2744\uFE0F }\n @default { \uD83C\uDFD5\uFE0F }\n }\n </span>\n <span class=\"c2g-streak__stat-label\">Lieblingszeit</span>\n </div>\n }\n </div>\n\n @if (xpToNext() > 0) {\n <div class=\"c2g-streak__next-level\">\n Noch {{ xpToNext() }} XP bis Level {{ data().level + 1 }}\n </div>\n } @else {\n <div class=\"c2g-streak__next-level c2g-streak__next-level--ready\">\n Level Up bereit! \uD83C\uDF89\n </div>\n }\n\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease)}.c2g-streak{border-radius:var(--c2g-radius-lg, 16px);padding:20px;background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);transition:box-shadow .2s ease;position:relative;overflow:hidden}.c2g-streak:hover{box-shadow:var(--c2g-shadow-md, 0 4px 12px rgba(0, 0, 0, .1))}.c2g-streak:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));transition:background .3s ease}.c2g-streak--warm:before{background:#f59e0b}.c2g-streak--hot:before{background:linear-gradient(90deg,#f97316,#ef4444)}.c2g-streak--legendary:before{background:linear-gradient(90deg,#a855f7,#ec4899,#f59e0b)}.c2g-streak__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.c2g-streak__title{font-size:var(--c2g-font-size-sm, .875rem);font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-streak__level-badge{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:20px;background:var(--c2g-theme-primary, var(--c2g-color-primary));color:#fff;letter-spacing:.02em}.c2g-streak--hot .c2g-streak__level-badge{background:#f97316}.c2g-streak--legendary .c2g-streak__level-badge{background:linear-gradient(135deg,#a855f7,#ec4899)}.c2g-streak__hero{display:flex;align-items:center;gap:12px;margin-bottom:12px}.c2g-streak__emoji{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.c2g-streak__streak-info{display:flex;align-items:baseline;gap:4px}.c2g-streak__streak-count{font-size:3rem;font-weight:900;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));transition:color .3s ease}.c2g-streak--warm .c2g-streak__streak-count{color:#f59e0b}.c2g-streak--hot .c2g-streak__streak-count{color:#f97316}.c2g-streak--legendary .c2g-streak__streak-count{color:#a855f7}.c2g-streak__streak-unit{font-size:1rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-bottom:4px}.c2g-streak__level-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.c2g-streak__level-label{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-streak__xp-label{font-size:.72rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-streak__xp-track{height:8px;border-radius:4px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));overflow:hidden;margin-bottom:16px}.c2g-streak__xp-fill{height:100%;border-radius:4px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-streak--warm .c2g-streak__xp-fill{background:#f59e0b}.c2g-streak--hot .c2g-streak__xp-fill{background:linear-gradient(90deg,#f97316,#ef4444)}.c2g-streak--legendary .c2g-streak__xp-fill{background:linear-gradient(90deg,#a855f7,#ec4899)}.c2g-streak__stats{display:flex;gap:0;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));overflow:hidden;margin-bottom:12px}.c2g-streak__stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-right:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline))}.c2g-streak__stat:last-child{border-right:none}.c2g-streak__stat-value{font-size:1.1rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));line-height:1}.c2g-streak__stat-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-streak__next-level{font-size:.75rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center}.c2g-streak__next-level--ready{color:var(--c2g-theme-success, var(--c2g-color-success));font-weight:700}\n"] }]
|
|
1910
|
-
}]
|
|
1910
|
+
}] });
|
|
1911
1911
|
|
|
1912
1912
|
class CampingScoreWidgetComponent {
|
|
1913
1913
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -1970,13 +1970,13 @@ class CampingScoreWidgetComponent {
|
|
|
1970
1970
|
});
|
|
1971
1971
|
}
|
|
1972
1972
|
ngOnDestroy() { cancelAnimationFrame(this.raf); }
|
|
1973
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1974
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1973
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CampingScoreWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1974
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CampingScoreWidgetComponent, isStandalone: true, selector: "c2g-camping-score-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-cs\" [class]=\"'c2g-cs--' + tier()\">\n\n <!-- Ambient glow orb behind score -->\n <div class=\"c2g-cs__glow-orb\" aria-hidden=\"true\"></div>\n\n <div class=\"c2g-cs__header\">\n <div class=\"c2g-cs__title-col\">\n <span class=\"c2g-cs__label\">Camping-Score</span>\n @if (data().tourName) {\n <span class=\"c2g-cs__tour\">{{ data().tourName }}</span>\n }\n </div>\n <span class=\"c2g-cs__tier-badge\">\n {{ tierEmoji() }} {{ tierLabel() }}\n </span>\n </div>\n\n <!-- Score hero -->\n <div class=\"c2g-cs__score-hero\">\n <span class=\"c2g-cs__score-value\">{{ displayScore() }}</span>\n <div class=\"c2g-cs__score-meta\">\n <span class=\"c2g-cs__score-max\">/10</span>\n <!-- Progress bar -->\n <div class=\"c2g-cs__progress-track\">\n <div class=\"c2g-cs__progress-fill\"\n [style.width.%]=\"(data().score / 10) * 100\">\n </div>\n </div>\n </div>\n </div>\n\n <!-- Factor tiles (optional) -->\n @if (factors().length > 0) {\n <div class=\"c2g-cs__factors\">\n @for (f of factors(); track f.label) {\n <div class=\"c2g-cs__factor\"\n [class]=\"'c2g-cs__factor--' + factorTier(f.score, f.inverted)\"\n [class.c2g-cs__factor--inverted]=\"f.inverted\">\n <span class=\"c2g-cs__factor-direction\">{{ f.inverted ? '\u2193' : '\u2191' }}</span>\n <span class=\"c2g-cs__factor-icon\">{{ f.icon }}</span>\n <span class=\"c2g-cs__factor-label\">{{ f.label }}</span>\n <div class=\"c2g-cs__factor-bar-track\">\n <div class=\"c2g-cs__factor-bar-fill\"\n [style.width.%]=\"factorBarPct(f.score)\">\n </div>\n </div>\n <span class=\"c2g-cs__factor-score\">{{ f.score.toFixed(0) }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Highlights -->\n @if (data().highlights?.length) {\n <ul class=\"c2g-cs__highlights\">\n @for (h of data().highlights!.slice(0, 3); track h) {\n <li class=\"c2g-cs__highlight\">\n <span class=\"c2g-cs__highlight-dot\"></span>\n {{ h }}\n </li>\n }\n </ul>\n }\n\n <!-- Warnings -->\n @if (data().warnings?.length) {\n <div class=\"c2g-cs__warnings\">\n @for (w of data().warnings!.slice(0, 2); track w) {\n <div class=\"c2g-cs__warning\">\u26A0\uFE0F {{ w }}</div>\n }\n </div>\n }\n\n</article>\n", styles: [":host{display:block}.c2g-cs{background:color-mix(in srgb,var(--cs-color, #94a3b8) 6%,var(--c2g-theme-surface, var(--c2g-color-surface)));border:1.5px solid color-mix(in srgb,var(--cs-color, #94a3b8) 35%,transparent);border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1.125rem;display:flex;flex-direction:column;gap:.875rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-cs:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--cs-glow, rgba(0, 0, 0, .12))}.c2g-cs--great{--cs-color: #22c55e;--cs-glow: rgba(34,197,94,.35);--cs-glow-soft: rgba(34,197,94,.1)}.c2g-cs--good{--cs-color: #84cc16;--cs-glow: rgba(132,204,22,.3);--cs-glow-soft: rgba(132,204,22,.08)}.c2g-cs--ok{--cs-color: #f59e0b;--cs-glow: rgba(245,158,11,.3);--cs-glow-soft: rgba(245,158,11,.08)}.c2g-cs--bad{--cs-color: #ef4444;--cs-glow: rgba(239,68,68,.3);--cs-glow-soft: rgba(239,68,68,.08)}.c2g-cs__glow-orb{position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--cs-glow-soft, transparent) 0%,transparent 70%);pointer-events:none}.c2g-cs__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-cs__title-col{display:flex;flex-direction:column;gap:2px}.c2g-cs__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-cs__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-cs__tier-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--cs-color);background:color-mix(in srgb,var(--cs-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--cs-color) 28%,transparent);border-radius:20px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.c2g-cs__score-hero{display:flex;align-items:center;gap:1rem}.c2g-cs__score-value{font-size:4rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--cs-color);font-variant-numeric:tabular-nums;text-shadow:0 0 40px var(--cs-glow, transparent);flex-shrink:0}.c2g-cs__score-meta{flex:1;display:flex;flex-direction:column;gap:6px}.c2g-cs__score-max{font-size:1rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));line-height:1}.c2g-cs__progress-track{height:8px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .07));border-radius:4px;overflow:hidden}.c2g-cs__progress-fill{height:100%;background:var(--cs-color);border-radius:4px;transition:width .9s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px var(--cs-glow, transparent)}.c2g-cs__factors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.c2g-cs__factor{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--ft-color) 30%,transparent);background:color-mix(in srgb,var(--ft-color) 8%,var(--c2g-theme-surface, var(--c2g-color-surface)));text-align:center;position:relative;--ft-color: #94a3b8}.c2g-cs__factor--good{--ft-color: #22c55e}.c2g-cs__factor--mid{--ft-color: #f59e0b}.c2g-cs__factor--bad{--ft-color: #ef4444}.c2g-cs__factor-direction{position:absolute;top:5px;right:6px;font-size:.6rem;font-weight:900;line-height:1;color:var(--ft-color);opacity:.75}.c2g-cs__factor-icon{font-size:1.2rem;line-height:1}.c2g-cs__factor-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cs__factor-bar-track{width:100%;height:4px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:2px;overflow:hidden}.c2g-cs__factor-bar-fill{height:100%;background:var(--ft-color);border-radius:2px;transition:width .8s cubic-bezier(.4,0,.2,1)}.c2g-cs__factor-score{font-size:.8rem;font-weight:900;color:var(--ft-color);line-height:1}.c2g-cs__highlights{list-style:none;margin:0;padding:.625rem 0 0;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));display:flex;flex-direction:column;gap:.375rem}.c2g-cs__highlight{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-cs__highlight-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cs-color);box-shadow:0 0 6px var(--cs-glow, transparent)}.c2g-cs__warnings{display:flex;flex-direction:column;gap:.375rem}.c2g-cs__warning{font-size:.75rem;font-weight:600;color:#f59e0b;background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:.3rem .625rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1975
1975
|
}
|
|
1976
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CampingScoreWidgetComponent, decorators: [{
|
|
1977
1977
|
type: Component,
|
|
1978
1978
|
args: [{ selector: 'c2g-camping-score-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-cs\" [class]=\"'c2g-cs--' + tier()\">\n\n <!-- Ambient glow orb behind score -->\n <div class=\"c2g-cs__glow-orb\" aria-hidden=\"true\"></div>\n\n <div class=\"c2g-cs__header\">\n <div class=\"c2g-cs__title-col\">\n <span class=\"c2g-cs__label\">Camping-Score</span>\n @if (data().tourName) {\n <span class=\"c2g-cs__tour\">{{ data().tourName }}</span>\n }\n </div>\n <span class=\"c2g-cs__tier-badge\">\n {{ tierEmoji() }} {{ tierLabel() }}\n </span>\n </div>\n\n <!-- Score hero -->\n <div class=\"c2g-cs__score-hero\">\n <span class=\"c2g-cs__score-value\">{{ displayScore() }}</span>\n <div class=\"c2g-cs__score-meta\">\n <span class=\"c2g-cs__score-max\">/10</span>\n <!-- Progress bar -->\n <div class=\"c2g-cs__progress-track\">\n <div class=\"c2g-cs__progress-fill\"\n [style.width.%]=\"(data().score / 10) * 100\">\n </div>\n </div>\n </div>\n </div>\n\n <!-- Factor tiles (optional) -->\n @if (factors().length > 0) {\n <div class=\"c2g-cs__factors\">\n @for (f of factors(); track f.label) {\n <div class=\"c2g-cs__factor\"\n [class]=\"'c2g-cs__factor--' + factorTier(f.score, f.inverted)\"\n [class.c2g-cs__factor--inverted]=\"f.inverted\">\n <span class=\"c2g-cs__factor-direction\">{{ f.inverted ? '\u2193' : '\u2191' }}</span>\n <span class=\"c2g-cs__factor-icon\">{{ f.icon }}</span>\n <span class=\"c2g-cs__factor-label\">{{ f.label }}</span>\n <div class=\"c2g-cs__factor-bar-track\">\n <div class=\"c2g-cs__factor-bar-fill\"\n [style.width.%]=\"factorBarPct(f.score)\">\n </div>\n </div>\n <span class=\"c2g-cs__factor-score\">{{ f.score.toFixed(0) }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Highlights -->\n @if (data().highlights?.length) {\n <ul class=\"c2g-cs__highlights\">\n @for (h of data().highlights!.slice(0, 3); track h) {\n <li class=\"c2g-cs__highlight\">\n <span class=\"c2g-cs__highlight-dot\"></span>\n {{ h }}\n </li>\n }\n </ul>\n }\n\n <!-- Warnings -->\n @if (data().warnings?.length) {\n <div class=\"c2g-cs__warnings\">\n @for (w of data().warnings!.slice(0, 2); track w) {\n <div class=\"c2g-cs__warning\">\u26A0\uFE0F {{ w }}</div>\n }\n </div>\n }\n\n</article>\n", styles: [":host{display:block}.c2g-cs{background:color-mix(in srgb,var(--cs-color, #94a3b8) 6%,var(--c2g-theme-surface, var(--c2g-color-surface)));border:1.5px solid color-mix(in srgb,var(--cs-color, #94a3b8) 35%,transparent);border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1.125rem;display:flex;flex-direction:column;gap:.875rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-cs:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--cs-glow, rgba(0, 0, 0, .12))}.c2g-cs--great{--cs-color: #22c55e;--cs-glow: rgba(34,197,94,.35);--cs-glow-soft: rgba(34,197,94,.1)}.c2g-cs--good{--cs-color: #84cc16;--cs-glow: rgba(132,204,22,.3);--cs-glow-soft: rgba(132,204,22,.08)}.c2g-cs--ok{--cs-color: #f59e0b;--cs-glow: rgba(245,158,11,.3);--cs-glow-soft: rgba(245,158,11,.08)}.c2g-cs--bad{--cs-color: #ef4444;--cs-glow: rgba(239,68,68,.3);--cs-glow-soft: rgba(239,68,68,.08)}.c2g-cs__glow-orb{position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--cs-glow-soft, transparent) 0%,transparent 70%);pointer-events:none}.c2g-cs__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-cs__title-col{display:flex;flex-direction:column;gap:2px}.c2g-cs__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-cs__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-cs__tier-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--cs-color);background:color-mix(in srgb,var(--cs-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--cs-color) 28%,transparent);border-radius:20px;padding:3px 10px;white-space:nowrap;flex-shrink:0}.c2g-cs__score-hero{display:flex;align-items:center;gap:1rem}.c2g-cs__score-value{font-size:4rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--cs-color);font-variant-numeric:tabular-nums;text-shadow:0 0 40px var(--cs-glow, transparent);flex-shrink:0}.c2g-cs__score-meta{flex:1;display:flex;flex-direction:column;gap:6px}.c2g-cs__score-max{font-size:1rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));line-height:1}.c2g-cs__progress-track{height:8px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .07));border-radius:4px;overflow:hidden}.c2g-cs__progress-fill{height:100%;background:var(--cs-color);border-radius:4px;transition:width .9s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px var(--cs-glow, transparent)}.c2g-cs__factors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.c2g-cs__factor{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 7px;border-radius:12px;border:1px solid color-mix(in srgb,var(--ft-color) 30%,transparent);background:color-mix(in srgb,var(--ft-color) 8%,var(--c2g-theme-surface, var(--c2g-color-surface)));text-align:center;position:relative;--ft-color: #94a3b8}.c2g-cs__factor--good{--ft-color: #22c55e}.c2g-cs__factor--mid{--ft-color: #f59e0b}.c2g-cs__factor--bad{--ft-color: #ef4444}.c2g-cs__factor-direction{position:absolute;top:5px;right:6px;font-size:.6rem;font-weight:900;line-height:1;color:var(--ft-color);opacity:.75}.c2g-cs__factor-icon{font-size:1.2rem;line-height:1}.c2g-cs__factor-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cs__factor-bar-track{width:100%;height:4px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:2px;overflow:hidden}.c2g-cs__factor-bar-fill{height:100%;background:var(--ft-color);border-radius:2px;transition:width .8s cubic-bezier(.4,0,.2,1)}.c2g-cs__factor-score{font-size:.8rem;font-weight:900;color:var(--ft-color);line-height:1}.c2g-cs__highlights{list-style:none;margin:0;padding:.625rem 0 0;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));display:flex;flex-direction:column;gap:.375rem}.c2g-cs__highlight{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-cs__highlight-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cs-color);box-shadow:0 0 6px var(--cs-glow, transparent)}.c2g-cs__warnings{display:flex;flex-direction:column;gap:.375rem}.c2g-cs__warning{font-size:.75rem;font-weight:600;color:#f59e0b;background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:.3rem .625rem}\n"] }]
|
|
1979
|
-
}], ctorParameters: () => []
|
|
1979
|
+
}], ctorParameters: () => [] });
|
|
1980
1980
|
|
|
1981
1981
|
class RainVisualizationWidgetComponent {
|
|
1982
1982
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2020,13 +2020,13 @@ class RainVisualizationWidgetComponent {
|
|
|
2020
2020
|
default: return '☀️';
|
|
2021
2021
|
}
|
|
2022
2022
|
}, ...(ngDevMode ? [{ debugName: "summaryIcon" }] : []));
|
|
2023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2024
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2023
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RainVisualizationWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2024
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: RainVisualizationWidgetComponent, isStandalone: true, selector: "c2g-rain-visualization-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-rain\" [class]=\"'c2g-rain--' + overallRisk()\">\n\n <header class=\"c2g-rain__header\">\n <div class=\"c2g-rain__title-col\">\n <span class=\"c2g-rain__label\">\uD83C\uDF27 Niederschlag</span>\n @if (data().tourName) {\n <span class=\"c2g-rain__tour\">{{ data().tourName }}</span>\n }\n </div>\n <div class=\"c2g-rain__summary\">\n <span class=\"c2g-rain__summary-icon\">{{ summaryIcon() }}</span>\n <span class=\"c2g-rain__summary-text\">{{ riskLabel() }}</span>\n </div>\n </header>\n\n <!-- Bar chart grid -->\n <div class=\"c2g-rain__grid\" aria-label=\"Niederschlagsvorhersage\" role=\"list\">\n @for (day of enriched(); track day.date) {\n <div class=\"c2g-rain__day c2g-rain__day--{{ day.level }}\" role=\"listitem\">\n\n <!-- Weather icon -->\n <span class=\"c2g-rain__day-icon\">{{ day.icon }}</span>\n\n <!-- Probability badge -->\n <span class=\"c2g-rain__prob c2g-rain__prob--{{ day.level }}\">\n {{ day.probPct }}%\n </span>\n\n <!-- Bar (precipitation mm) -->\n <div class=\"c2g-rain__bar-wrap\" [title]=\"day.precipitation + ' mm'\">\n <div\n class=\"c2g-rain__bar c2g-rain__bar--{{ day.level }}\"\n [style.height.%]=\"day.barPct\"\n ></div>\n </div>\n\n @if (day.precipitation > 0) {\n <span class=\"c2g-rain__mm\">{{ day.precipitation.toFixed(1) }}<small>mm</small></span>\n } @else {\n <span class=\"c2g-rain__mm c2g-rain__mm--dry\">\u2013</span>\n }\n\n <!-- Day label -->\n <span class=\"c2g-rain__date\">{{ day.dayLabel }}</span>\n </div>\n }\n </div>\n\n</article>\n", styles: [":host{display:block}.c2g-rain{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-rain:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000003d}.c2g-rain--low{--rain-color: #60a5fa;--rain-glow: rgba(96,165,250,.25)}.c2g-rain--medium{--rain-color: #3b82f6;--rain-glow: rgba(59,130,246,.3)}.c2g-rain--high{--rain-color: #1d4ed8;--rain-glow: rgba(29,78,216,.35)}.c2g-rain:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(59,130,246,.06) 0%,transparent 70%);pointer-events:none}.c2g-rain__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-rain__title-col{display:flex;flex-direction:column;gap:.125rem}.c2g-rain__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-rain__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-rain__summary{display:flex;flex-direction:column;align-items:flex-end;gap:.125rem}.c2g-rain__summary-icon{font-size:1.5rem;line-height:1}.c2g-rain__summary-text{font-size:.6875rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:right;max-width:140px}.c2g-rain__grid{display:flex;gap:.375rem;align-items:flex-end}.c2g-rain__day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem}.c2g-rain__day-icon{font-size:1.125rem;line-height:1}.c2g-rain__prob{font-size:.6875rem;font-weight:800;font-variant-numeric:tabular-nums;border-radius:6px;padding:.1rem .3rem}.c2g-rain__prob--none{color:#ffffff4d;background:#ffffff0a}.c2g-rain__prob--light{color:#93c5fd;background:#93c5fd1f}.c2g-rain__prob--moderate{color:#60a5fa;background:#60a5fa26}.c2g-rain__prob--heavy{color:#3b82f6;background:#3b82f633;box-shadow:0 0 8px #3b82f64d}.c2g-rain__bar-wrap{width:100%;height:72px;display:flex;align-items:flex-end;background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));border-radius:6px 6px 4px 4px;overflow:hidden}.c2g-rain__bar{width:100%;min-height:3px;border-radius:4px 4px 0 0;transition:height .7s cubic-bezier(.4,0,.2,1)}.c2g-rain__bar--none{background:#ffffff14}.c2g-rain__bar--light{background:linear-gradient(180deg,#93c5fd,#bfdbfe)}.c2g-rain__bar--moderate{background:linear-gradient(180deg,#3b82f6,#60a5fa)}.c2g-rain__bar--heavy{background:linear-gradient(180deg,#1d4ed8,#3b82f6);box-shadow:0 0 12px #3b82f666}.c2g-rain__mm{font-size:.6875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;text-align:center}.c2g-rain__mm small{font-size:.5625rem;font-weight:600;opacity:.6;margin-left:1px}.c2g-rain__mm--dry{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-rain__date{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2025
2025
|
}
|
|
2026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: RainVisualizationWidgetComponent, decorators: [{
|
|
2027
2027
|
type: Component,
|
|
2028
2028
|
args: [{ selector: 'c2g-rain-visualization-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-rain\" [class]=\"'c2g-rain--' + overallRisk()\">\n\n <header class=\"c2g-rain__header\">\n <div class=\"c2g-rain__title-col\">\n <span class=\"c2g-rain__label\">\uD83C\uDF27 Niederschlag</span>\n @if (data().tourName) {\n <span class=\"c2g-rain__tour\">{{ data().tourName }}</span>\n }\n </div>\n <div class=\"c2g-rain__summary\">\n <span class=\"c2g-rain__summary-icon\">{{ summaryIcon() }}</span>\n <span class=\"c2g-rain__summary-text\">{{ riskLabel() }}</span>\n </div>\n </header>\n\n <!-- Bar chart grid -->\n <div class=\"c2g-rain__grid\" aria-label=\"Niederschlagsvorhersage\" role=\"list\">\n @for (day of enriched(); track day.date) {\n <div class=\"c2g-rain__day c2g-rain__day--{{ day.level }}\" role=\"listitem\">\n\n <!-- Weather icon -->\n <span class=\"c2g-rain__day-icon\">{{ day.icon }}</span>\n\n <!-- Probability badge -->\n <span class=\"c2g-rain__prob c2g-rain__prob--{{ day.level }}\">\n {{ day.probPct }}%\n </span>\n\n <!-- Bar (precipitation mm) -->\n <div class=\"c2g-rain__bar-wrap\" [title]=\"day.precipitation + ' mm'\">\n <div\n class=\"c2g-rain__bar c2g-rain__bar--{{ day.level }}\"\n [style.height.%]=\"day.barPct\"\n ></div>\n </div>\n\n @if (day.precipitation > 0) {\n <span class=\"c2g-rain__mm\">{{ day.precipitation.toFixed(1) }}<small>mm</small></span>\n } @else {\n <span class=\"c2g-rain__mm c2g-rain__mm--dry\">\u2013</span>\n }\n\n <!-- Day label -->\n <span class=\"c2g-rain__date\">{{ day.dayLabel }}</span>\n </div>\n }\n </div>\n\n</article>\n", styles: [":host{display:block}.c2g-rain{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-rain:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000003d}.c2g-rain--low{--rain-color: #60a5fa;--rain-glow: rgba(96,165,250,.25)}.c2g-rain--medium{--rain-color: #3b82f6;--rain-glow: rgba(59,130,246,.3)}.c2g-rain--high{--rain-color: #1d4ed8;--rain-glow: rgba(29,78,216,.35)}.c2g-rain:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(59,130,246,.06) 0%,transparent 70%);pointer-events:none}.c2g-rain__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-rain__title-col{display:flex;flex-direction:column;gap:.125rem}.c2g-rain__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-rain__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-rain__summary{display:flex;flex-direction:column;align-items:flex-end;gap:.125rem}.c2g-rain__summary-icon{font-size:1.5rem;line-height:1}.c2g-rain__summary-text{font-size:.6875rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:right;max-width:140px}.c2g-rain__grid{display:flex;gap:.375rem;align-items:flex-end}.c2g-rain__day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem}.c2g-rain__day-icon{font-size:1.125rem;line-height:1}.c2g-rain__prob{font-size:.6875rem;font-weight:800;font-variant-numeric:tabular-nums;border-radius:6px;padding:.1rem .3rem}.c2g-rain__prob--none{color:#ffffff4d;background:#ffffff0a}.c2g-rain__prob--light{color:#93c5fd;background:#93c5fd1f}.c2g-rain__prob--moderate{color:#60a5fa;background:#60a5fa26}.c2g-rain__prob--heavy{color:#3b82f6;background:#3b82f633;box-shadow:0 0 8px #3b82f64d}.c2g-rain__bar-wrap{width:100%;height:72px;display:flex;align-items:flex-end;background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));border-radius:6px 6px 4px 4px;overflow:hidden}.c2g-rain__bar{width:100%;min-height:3px;border-radius:4px 4px 0 0;transition:height .7s cubic-bezier(.4,0,.2,1)}.c2g-rain__bar--none{background:#ffffff14}.c2g-rain__bar--light{background:linear-gradient(180deg,#93c5fd,#bfdbfe)}.c2g-rain__bar--moderate{background:linear-gradient(180deg,#3b82f6,#60a5fa)}.c2g-rain__bar--heavy{background:linear-gradient(180deg,#1d4ed8,#3b82f6);box-shadow:0 0 12px #3b82f666}.c2g-rain__mm{font-size:.6875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;text-align:center}.c2g-rain__mm small{font-size:.5625rem;font-weight:600;opacity:.6;margin-left:1px}.c2g-rain__mm--dry{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-rain__date{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;text-align:center}\n"] }]
|
|
2029
|
-
}]
|
|
2029
|
+
}] });
|
|
2030
2030
|
|
|
2031
2031
|
const TYPE_CONFIG$1 = {
|
|
2032
2032
|
adult: { emoji: '🧑', label: 'Erwachsene', color: '#ff6b35' },
|
|
@@ -2066,13 +2066,13 @@ class GroupCompositionWidgetComponent {
|
|
|
2066
2066
|
configFor(type) {
|
|
2067
2067
|
return TYPE_CONFIG$1[type];
|
|
2068
2068
|
}
|
|
2069
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2069
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupCompositionWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2070
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GroupCompositionWidgetComponent, isStandalone: true, selector: "c2g-group-composition-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-gc\">\n\n <div class=\"c2g-gc__header\">\n <div class=\"c2g-gc__title-col\">\n <span class=\"c2g-gc__label\">Gruppenkomposition</span>\n @if (data().groupName) {\n <span class=\"c2g-gc__name\">{{ data().groupName }}</span>\n }\n </div>\n <div class=\"c2g-gc__summary-pills\">\n <span class=\"c2g-gc__pill\">\n <span class=\"c2g-gc__pill-num\">{{ totalPeople() }}</span>\n <span class=\"c2g-gc__pill-sub\">Personen</span>\n </span>\n @if (totalPets() > 0) {\n <span class=\"c2g-gc__pill c2g-gc__pill--pets\">\n <span class=\"c2g-gc__pill-num\">{{ totalPets() }}</span>\n <span class=\"c2g-gc__pill-sub\">Tiere</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Avatar cluster strip -->\n <div class=\"c2g-gc__avatars\">\n @for (a of avatars(); track a.key) {\n <span class=\"c2g-gc__avatar\" [style.--av-color]=\"a.color\">{{ a.emoji }}</span>\n }\n @if (totalPeople() + totalPets() > avatars().length) {\n <span class=\"c2g-gc__avatar-more\">+{{ totalPeople() + totalPets() - avatars().length }}</span>\n }\n </div>\n\n <!-- Bar chart breakdown -->\n <div class=\"c2g-gc__bars\">\n @for (entry of sorted(); track entry.type) {\n <div class=\"c2g-gc__bar-row\">\n <span class=\"c2g-gc__bar-emoji\">{{ configFor(entry.type).emoji }}</span>\n <span class=\"c2g-gc__bar-label\">{{ configFor(entry.type).label }}</span>\n <div class=\"c2g-gc__bar-track\">\n <div class=\"c2g-gc__bar-fill\"\n [style.width.%]=\"(entry.count / maxCount()) * 100\"\n [style.background]=\"configFor(entry.type).color\">\n </div>\n </div>\n <span class=\"c2g-gc__bar-count\" [style.color]=\"configFor(entry.type).color\">\n {{ entry.count }}\n </span>\n @if (entry.names?.length) {\n <span class=\"c2g-gc__bar-names\">{{ entry.names!.join(', ') }}</span>\n }\n </div>\n }\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gc{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gc:hover{box-shadow:0 8px 28px #0000001c;transform:translateY(-2px)}.c2g-gc__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.c2g-gc__title-col{display:flex;flex-direction:column;gap:2px}.c2g-gc__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gc__name{font-size:.9rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gc__summary-pills{display:flex;gap:6px;align-items:center}.c2g-gc__pill{display:flex;flex-direction:column;align-items:center;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:10px;padding:4px 10px;min-width:44px}.c2g-gc__pill--pets{background:#f9731614;border-color:#f9731633}.c2g-gc__pill-num{font-size:1.1rem;font-weight:900;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gc__pill-sub{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gc__avatars{display:flex;flex-wrap:wrap;gap:0;padding:10px 12px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .025));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-lg, 14px);min-height:48px;align-items:center}.c2g-gc__avatar{font-size:1.5rem;line-height:1;display:inline-block;margin-right:-4px;filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--av-color, #000) 40%,transparent));transition:transform .15s ease,z-index 0ms;cursor:default;position:relative;z-index:1}.c2g-gc__avatar:hover{transform:translateY(-4px) scale(1.2);z-index:10}.c2g-gc__avatar-more{font-size:.75rem;font-weight:800;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:20px;padding:2px 7px;margin-left:6px}.c2g-gc__bars{display:flex;flex-direction:column;gap:6px}.c2g-gc__bar-row{display:grid;grid-template-columns:20px 90px 1fr 24px;grid-template-rows:auto auto;column-gap:8px;align-items:center}.c2g-gc__bar-emoji{font-size:1rem;line-height:1;grid-column:1;grid-row:1;text-align:center}.c2g-gc__bar-label{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));grid-column:2;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-gc__bar-track{grid-column:3;grid-row:1;height:8px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .06));border-radius:4px;overflow:hidden}.c2g-gc__bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);opacity:.85}.c2g-gc__bar-count{grid-column:4;grid-row:1;font-size:.85rem;font-weight:900;text-align:right;line-height:1}.c2g-gc__bar-names{grid-column:2/5;grid-row:2;font-size:.68rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2071
2071
|
}
|
|
2072
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupCompositionWidgetComponent, decorators: [{
|
|
2073
2073
|
type: Component,
|
|
2074
2074
|
args: [{ selector: 'c2g-group-composition-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-gc\">\n\n <div class=\"c2g-gc__header\">\n <div class=\"c2g-gc__title-col\">\n <span class=\"c2g-gc__label\">Gruppenkomposition</span>\n @if (data().groupName) {\n <span class=\"c2g-gc__name\">{{ data().groupName }}</span>\n }\n </div>\n <div class=\"c2g-gc__summary-pills\">\n <span class=\"c2g-gc__pill\">\n <span class=\"c2g-gc__pill-num\">{{ totalPeople() }}</span>\n <span class=\"c2g-gc__pill-sub\">Personen</span>\n </span>\n @if (totalPets() > 0) {\n <span class=\"c2g-gc__pill c2g-gc__pill--pets\">\n <span class=\"c2g-gc__pill-num\">{{ totalPets() }}</span>\n <span class=\"c2g-gc__pill-sub\">Tiere</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Avatar cluster strip -->\n <div class=\"c2g-gc__avatars\">\n @for (a of avatars(); track a.key) {\n <span class=\"c2g-gc__avatar\" [style.--av-color]=\"a.color\">{{ a.emoji }}</span>\n }\n @if (totalPeople() + totalPets() > avatars().length) {\n <span class=\"c2g-gc__avatar-more\">+{{ totalPeople() + totalPets() - avatars().length }}</span>\n }\n </div>\n\n <!-- Bar chart breakdown -->\n <div class=\"c2g-gc__bars\">\n @for (entry of sorted(); track entry.type) {\n <div class=\"c2g-gc__bar-row\">\n <span class=\"c2g-gc__bar-emoji\">{{ configFor(entry.type).emoji }}</span>\n <span class=\"c2g-gc__bar-label\">{{ configFor(entry.type).label }}</span>\n <div class=\"c2g-gc__bar-track\">\n <div class=\"c2g-gc__bar-fill\"\n [style.width.%]=\"(entry.count / maxCount()) * 100\"\n [style.background]=\"configFor(entry.type).color\">\n </div>\n </div>\n <span class=\"c2g-gc__bar-count\" [style.color]=\"configFor(entry.type).color\">\n {{ entry.count }}\n </span>\n @if (entry.names?.length) {\n <span class=\"c2g-gc__bar-names\">{{ entry.names!.join(', ') }}</span>\n }\n </div>\n }\n </div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gc{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gc:hover{box-shadow:0 8px 28px #0000001c;transform:translateY(-2px)}.c2g-gc__header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.c2g-gc__title-col{display:flex;flex-direction:column;gap:2px}.c2g-gc__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gc__name{font-size:.9rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gc__summary-pills{display:flex;gap:6px;align-items:center}.c2g-gc__pill{display:flex;flex-direction:column;align-items:center;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .04));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:10px;padding:4px 10px;min-width:44px}.c2g-gc__pill--pets{background:#f9731614;border-color:#f9731633}.c2g-gc__pill-num{font-size:1.1rem;font-weight:900;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gc__pill-sub{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gc__avatars{display:flex;flex-wrap:wrap;gap:0;padding:10px 12px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .025));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-lg, 14px);min-height:48px;align-items:center}.c2g-gc__avatar{font-size:1.5rem;line-height:1;display:inline-block;margin-right:-4px;filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--av-color, #000) 40%,transparent));transition:transform .15s ease,z-index 0ms;cursor:default;position:relative;z-index:1}.c2g-gc__avatar:hover{transform:translateY(-4px) scale(1.2);z-index:10}.c2g-gc__avatar-more{font-size:.75rem;font-weight:800;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:20px;padding:2px 7px;margin-left:6px}.c2g-gc__bars{display:flex;flex-direction:column;gap:6px}.c2g-gc__bar-row{display:grid;grid-template-columns:20px 90px 1fr 24px;grid-template-rows:auto auto;column-gap:8px;align-items:center}.c2g-gc__bar-emoji{font-size:1rem;line-height:1;grid-column:1;grid-row:1;text-align:center}.c2g-gc__bar-label{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));grid-column:2;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-gc__bar-track{grid-column:3;grid-row:1;height:8px;background:var(--c2g-theme-surface-container, rgba(0, 0, 0, .06));border-radius:4px;overflow:hidden}.c2g-gc__bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);opacity:.85}.c2g-gc__bar-count{grid-column:4;grid-row:1;font-size:.85rem;font-weight:900;text-align:right;line-height:1}.c2g-gc__bar-names{grid-column:2/5;grid-row:2;font-size:.68rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));padding-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
2075
|
-
}]
|
|
2075
|
+
}] });
|
|
2076
2076
|
|
|
2077
2077
|
// Minimal hand-crafted Lottie confetti animation.
|
|
2078
2078
|
// 6 colored rectangles fall from top with rotation — ~3KB, no external dependency.
|
|
@@ -2207,13 +2207,13 @@ class CriticalItemsAlertWidgetComponent {
|
|
|
2207
2207
|
return 0;
|
|
2208
2208
|
return Math.min((item.coveredCount ?? 0) / item.neededCount, 1) * 100;
|
|
2209
2209
|
}
|
|
2210
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CriticalItemsAlertWidgetComponent, isStandalone: true, selector: "c2g-critical-items-alert-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-cia\" [class]=\"'c2g-cia--' + urgency()\">\n\n <div class=\"c2g-cia__header\">\n <div class=\"c2g-cia__title-col\">\n <span class=\"c2g-cia__label\">\n @if (urgency() === 'critical') { \uD83D\uDEA8 }\n @else if (urgency() === 'warning') { \u26A0\uFE0F }\n @else { \u2705 }\n Kritische Items\n </span>\n @if (data().tourName) {\n <span class=\"c2g-cia__tour\">{{ data().tourName }}</span>\n }\n </div>\n <div class=\"c2g-cia__countdown\">\n <span class=\"c2g-cia__countdown-number\">{{ daysUntil() }}</span>\n <span class=\"c2g-cia__countdown-unit\">{{ daysUntil() === 1 ? 'Tag' : 'Tage' }}</span>\n </div>\n </div>\n\n @if (allClear()) {\n <div class=\"c2g-cia__all-clear\">\n\n <!-- Visual slot -->\n <div class=\"c2g-cia__success-visual\" aria-hidden=\"true\">\n @switch (successVisualType()) {\n @case ('lottie') {\n <ng-lottie [options]=\"lottieOptions()\" width=\"100px\" height=\"80px\" />\n }\n @case ('image') {\n <img class=\"c2g-cia__success-img\"\n [src]=\"imageValue()\"\n [alt]=\"imageAlt()\" />\n }\n @case ('icon') {\n <span class=\"c2g-cia__success-icon\">{{ iconValue() }}</span>\n }\n }\n </div>\n\n <div class=\"c2g-cia__all-clear-text-block\">\n <span class=\"c2g-cia__all-clear-headline\">Alles dabei! \uD83C\uDF89</span>\n <span class=\"c2g-cia__all-clear-sub\">Alle kritischen Items sind gepackt \u2014 bereit f\u00FCr das Abenteuer.</span>\n </div>\n </div>\n } @else {\n\n <!-- Progress summary -->\n <div class=\"c2g-cia__summary\">\n <span class=\"c2g-cia__open-count\">{{ data().openItems.length }}</span>\n <span class=\"c2g-cia__summary-text\">\n von {{ data().totalCritical }} kritischen\n {{ data().totalCritical === 1 ? 'Item fehlt' : 'Items fehlen' }}\n </span>\n </div>\n <div class=\"c2g-cia__progress-track\">\n <div class=\"c2g-cia__progress-fill\"\n [style.width.%]=\"((data().totalCritical - data().openItems.length) / data().totalCritical) * 100\">\n </div>\n </div>\n\n <!-- Side-by-side sections -->\n <div class=\"c2g-cia__sections\">\n\n <!-- Personal items -->\n @if (personalItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--personal\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--personal\">\uD83D\uDC64</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Pers\u00F6nlich</span>\n <span class=\"c2g-cia__section-hint\">Jeder braucht es selbst</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of personalItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--personal\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.missingFor?.length) {\n <span class=\"c2g-cia__item-missing\">{{ item.missingFor!.join(', ') }}</span>\n }\n </li>\n }\n @if (personalHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ personalHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n <!-- Shared items -->\n @if (sharedItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--shared\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--shared\">\uD83D\uDC65</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Geteilt</span>\n <span class=\"c2g-cia__section-hint\">Mindestmenge muss gedeckt sein</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of sharedItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--shared\">\n <div class=\"c2g-cia__shared-top\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.neededCount) {\n <span class=\"c2g-cia__shared-ratio\">\n {{ item.coveredCount ?? 0 }}/{{ item.neededCount }}\n </span>\n }\n </div>\n @if (item.neededCount && item.neededCount > 1) {\n <div class=\"c2g-cia__shared-bar-track\">\n <div class=\"c2g-cia__shared-bar-fill\" [style.width.%]=\"sharedProgress(item)\"></div>\n </div>\n }\n @if (item.coveredBy?.length) {\n <span class=\"c2g-cia__shared-covered\">\u2713 {{ item.coveredBy!.join(', ') }}</span>\n }\n </li>\n }\n @if (sharedHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ sharedHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n </div>\n }\n\n <div class=\"c2g-cia__footer\">{{ urgencyLabel() }}</div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-cia{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1.5px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}.c2g-cia:hover{box-shadow:0 8px 28px #0000001a;transform:translateY(-2px)}.c2g-cia--ok{--cia-accent: #22c55e;--cia-bg: rgba(34, 197, 94, .06);border-color:#22c55e4d}.c2g-cia--warning{--cia-accent: #f59e0b;--cia-bg: rgba(245, 158, 11, .06);border-color:#f59e0b59}.c2g-cia--critical{--cia-accent: #ef4444;--cia-bg: rgba(239, 68, 68, .06);border-color:#ef444466;animation:c2g-cia-pulse 2s ease-in-out infinite}@keyframes c2g-cia-pulse{0%,to{box-shadow:none}50%{box-shadow:0 0 0 4px #ef444426}}.c2g-cia__header{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;gap:10px;background:var(--cia-bg)}.c2g-cia__title-col{display:flex;flex-direction:column;gap:2px}.c2g-cia__label{font-size:.8rem;font-weight:700;color:var(--cia-accent)}.c2g-cia__tour{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-cia__countdown{display:flex;flex-direction:column;align-items:center;background:var(--cia-accent);border-radius:12px;padding:6px 12px;flex-shrink:0}.c2g-cia__countdown-number{font-size:1.6rem;font-weight:900;line-height:1;color:#fff}.c2g-cia__countdown-unit{font-size:.62rem;font-weight:700;color:#fffc;text-transform:uppercase;letter-spacing:.06em}.c2g-cia__all-clear{display:flex;align-items:center;gap:12px;padding:16px 18px 18px}.c2g-cia__success-visual{flex-shrink:0;width:100px;height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center}.c2g-cia__success-img{width:100%;height:100%;object-fit:contain;border-radius:8px}.c2g-cia__success-icon{font-size:3.5rem;line-height:1;animation:c2g-icon-pop .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes c2g-icon-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.c2g-cia__all-clear-text-block{display:flex;flex-direction:column;gap:4px}.c2g-cia__all-clear-headline{font-size:1.2rem;font-weight:900;color:#22c55e;letter-spacing:-.02em;line-height:1}.c2g-cia__all-clear-sub{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));line-height:1.3}.c2g-cia__summary{display:flex;align-items:baseline;gap:6px;padding:12px 18px 0}.c2g-cia__open-count{font-size:2rem;font-weight:900;line-height:1;color:var(--cia-accent)}.c2g-cia__summary-text{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__progress-track{height:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));margin:8px 18px 0;border-radius:2px;overflow:hidden}.c2g-cia__progress-fill{height:100%;background:var(--cia-accent);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-cia__sections{display:grid;grid-template-columns:1fr;gap:0;margin-top:10px}@media(min-width:480px){.c2g-cia__sections{grid-template-columns:1fr 1fr;gap:0}}.c2g-cia__section{padding:0 18px 4px}.c2g-cia__section+.c2g-cia__section{padding-top:10px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}@media(min-width:480px){.c2g-cia__section+.c2g-cia__section{padding-top:0;border-top:none;border-left:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}}.c2g-cia__section--personal{--sec-accent: #f97316}.c2g-cia__section--shared{--sec-accent: #3b82f6}.c2g-cia__section-header{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}.c2g-cia__section-titles{display:flex;flex-direction:column;gap:1px}.c2g-cia__section-icon{font-size:.85rem;line-height:1;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-cia__section-icon--personal{background:#f973161f}.c2g-cia__section-icon--shared{background:#3b82f61f}.c2g-cia__section-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sec-accent, var(--c2g-theme-on-surface, var(--c2g-color-text-primary)))}.c2g-cia__section-hint{font-size:.62rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.c2g-cia__item{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-cia__item--personal .c2g-cia__item-dot{background:#f97316}.c2g-cia__item--shared .c2g-cia__item-dot{background:#3b82f6}.c2g-cia__item--shared{flex-direction:column;align-items:stretch;gap:3px}.c2g-cia__item--more{font-size:.72rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cia-accent)}.c2g-cia__item-name{flex:1}.c2g-cia__item-missing{font-size:.68rem;font-weight:500;color:#f97316;background:#f973161a;border-radius:4px;padding:1px 5px;white-space:nowrap}.c2g-cia__shared-top{display:flex;align-items:center;gap:7px}.c2g-cia__shared-ratio{font-size:.72rem;font-weight:800;color:#3b82f6;background:#3b82f61a;border-radius:4px;padding:1px 6px;white-space:nowrap;margin-left:auto}.c2g-cia__shared-bar-track{height:3px;background:#3b82f626;border-radius:2px;overflow:hidden;margin-left:13px}.c2g-cia__shared-bar-fill{height:100%;background:#3b82f6;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-cia__shared-covered{font-size:.68rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:13px}.c2g-cia__footer{margin-top:12px;padding:8px 18px;font-size:.72rem;font-weight:700;text-align:center;color:var(--cia-accent);background:var(--cia-bg);border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}\n"], dependencies: [{ kind: "component", type: LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2210
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CriticalItemsAlertWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2211
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CriticalItemsAlertWidgetComponent, isStandalone: true, selector: "c2g-critical-items-alert-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-cia\" [class]=\"'c2g-cia--' + urgency()\">\n\n <div class=\"c2g-cia__header\">\n <div class=\"c2g-cia__title-col\">\n <span class=\"c2g-cia__label\">\n @if (urgency() === 'critical') { \uD83D\uDEA8 }\n @else if (urgency() === 'warning') { \u26A0\uFE0F }\n @else { \u2705 }\n Kritische Items\n </span>\n @if (data().tourName) {\n <span class=\"c2g-cia__tour\">{{ data().tourName }}</span>\n }\n </div>\n <div class=\"c2g-cia__countdown\">\n <span class=\"c2g-cia__countdown-number\">{{ daysUntil() }}</span>\n <span class=\"c2g-cia__countdown-unit\">{{ daysUntil() === 1 ? 'Tag' : 'Tage' }}</span>\n </div>\n </div>\n\n @if (allClear()) {\n <div class=\"c2g-cia__all-clear\">\n\n <!-- Visual slot -->\n <div class=\"c2g-cia__success-visual\" aria-hidden=\"true\">\n @switch (successVisualType()) {\n @case ('lottie') {\n <ng-lottie [options]=\"lottieOptions()\" width=\"100px\" height=\"80px\" />\n }\n @case ('image') {\n <img class=\"c2g-cia__success-img\"\n [src]=\"imageValue()\"\n [alt]=\"imageAlt()\" />\n }\n @case ('icon') {\n <span class=\"c2g-cia__success-icon\">{{ iconValue() }}</span>\n }\n }\n </div>\n\n <div class=\"c2g-cia__all-clear-text-block\">\n <span class=\"c2g-cia__all-clear-headline\">Alles dabei! \uD83C\uDF89</span>\n <span class=\"c2g-cia__all-clear-sub\">Alle kritischen Items sind gepackt \u2014 bereit f\u00FCr das Abenteuer.</span>\n </div>\n </div>\n } @else {\n\n <!-- Progress summary -->\n <div class=\"c2g-cia__summary\">\n <span class=\"c2g-cia__open-count\">{{ data().openItems.length }}</span>\n <span class=\"c2g-cia__summary-text\">\n von {{ data().totalCritical }} kritischen\n {{ data().totalCritical === 1 ? 'Item fehlt' : 'Items fehlen' }}\n </span>\n </div>\n <div class=\"c2g-cia__progress-track\">\n <div class=\"c2g-cia__progress-fill\"\n [style.width.%]=\"((data().totalCritical - data().openItems.length) / data().totalCritical) * 100\">\n </div>\n </div>\n\n <!-- Side-by-side sections -->\n <div class=\"c2g-cia__sections\">\n\n <!-- Personal items -->\n @if (personalItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--personal\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--personal\">\uD83D\uDC64</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Pers\u00F6nlich</span>\n <span class=\"c2g-cia__section-hint\">Jeder braucht es selbst</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of personalItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--personal\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.missingFor?.length) {\n <span class=\"c2g-cia__item-missing\">{{ item.missingFor!.join(', ') }}</span>\n }\n </li>\n }\n @if (personalHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ personalHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n <!-- Shared items -->\n @if (sharedItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--shared\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--shared\">\uD83D\uDC65</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Geteilt</span>\n <span class=\"c2g-cia__section-hint\">Mindestmenge muss gedeckt sein</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of sharedItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--shared\">\n <div class=\"c2g-cia__shared-top\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.neededCount) {\n <span class=\"c2g-cia__shared-ratio\">\n {{ item.coveredCount ?? 0 }}/{{ item.neededCount }}\n </span>\n }\n </div>\n @if (item.neededCount && item.neededCount > 1) {\n <div class=\"c2g-cia__shared-bar-track\">\n <div class=\"c2g-cia__shared-bar-fill\" [style.width.%]=\"sharedProgress(item)\"></div>\n </div>\n }\n @if (item.coveredBy?.length) {\n <span class=\"c2g-cia__shared-covered\">\u2713 {{ item.coveredBy!.join(', ') }}</span>\n }\n </li>\n }\n @if (sharedHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ sharedHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n </div>\n }\n\n <div class=\"c2g-cia__footer\">{{ urgencyLabel() }}</div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-cia{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1.5px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}.c2g-cia:hover{box-shadow:0 8px 28px #0000001a;transform:translateY(-2px)}.c2g-cia--ok{--cia-accent: #22c55e;--cia-bg: rgba(34, 197, 94, .06);border-color:#22c55e4d}.c2g-cia--warning{--cia-accent: #f59e0b;--cia-bg: rgba(245, 158, 11, .06);border-color:#f59e0b59}.c2g-cia--critical{--cia-accent: #ef4444;--cia-bg: rgba(239, 68, 68, .06);border-color:#ef444466;animation:c2g-cia-pulse 2s ease-in-out infinite}@keyframes c2g-cia-pulse{0%,to{box-shadow:none}50%{box-shadow:0 0 0 4px #ef444426}}.c2g-cia__header{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;gap:10px;background:var(--cia-bg)}.c2g-cia__title-col{display:flex;flex-direction:column;gap:2px}.c2g-cia__label{font-size:.8rem;font-weight:700;color:var(--cia-accent)}.c2g-cia__tour{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-cia__countdown{display:flex;flex-direction:column;align-items:center;background:var(--cia-accent);border-radius:12px;padding:6px 12px;flex-shrink:0}.c2g-cia__countdown-number{font-size:1.6rem;font-weight:900;line-height:1;color:#fff}.c2g-cia__countdown-unit{font-size:.62rem;font-weight:700;color:#fffc;text-transform:uppercase;letter-spacing:.06em}.c2g-cia__all-clear{display:flex;align-items:center;gap:12px;padding:16px 18px 18px}.c2g-cia__success-visual{flex-shrink:0;width:100px;height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center}.c2g-cia__success-img{width:100%;height:100%;object-fit:contain;border-radius:8px}.c2g-cia__success-icon{font-size:3.5rem;line-height:1;animation:c2g-icon-pop .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes c2g-icon-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.c2g-cia__all-clear-text-block{display:flex;flex-direction:column;gap:4px}.c2g-cia__all-clear-headline{font-size:1.2rem;font-weight:900;color:#22c55e;letter-spacing:-.02em;line-height:1}.c2g-cia__all-clear-sub{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));line-height:1.3}.c2g-cia__summary{display:flex;align-items:baseline;gap:6px;padding:12px 18px 0}.c2g-cia__open-count{font-size:2rem;font-weight:900;line-height:1;color:var(--cia-accent)}.c2g-cia__summary-text{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__progress-track{height:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));margin:8px 18px 0;border-radius:2px;overflow:hidden}.c2g-cia__progress-fill{height:100%;background:var(--cia-accent);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-cia__sections{display:grid;grid-template-columns:1fr;gap:0;margin-top:10px}@media(min-width:480px){.c2g-cia__sections{grid-template-columns:1fr 1fr;gap:0}}.c2g-cia__section{padding:0 18px 4px}.c2g-cia__section+.c2g-cia__section{padding-top:10px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}@media(min-width:480px){.c2g-cia__section+.c2g-cia__section{padding-top:0;border-top:none;border-left:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}}.c2g-cia__section--personal{--sec-accent: #f97316}.c2g-cia__section--shared{--sec-accent: #3b82f6}.c2g-cia__section-header{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}.c2g-cia__section-titles{display:flex;flex-direction:column;gap:1px}.c2g-cia__section-icon{font-size:.85rem;line-height:1;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-cia__section-icon--personal{background:#f973161f}.c2g-cia__section-icon--shared{background:#3b82f61f}.c2g-cia__section-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sec-accent, var(--c2g-theme-on-surface, var(--c2g-color-text-primary)))}.c2g-cia__section-hint{font-size:.62rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.c2g-cia__item{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-cia__item--personal .c2g-cia__item-dot{background:#f97316}.c2g-cia__item--shared .c2g-cia__item-dot{background:#3b82f6}.c2g-cia__item--shared{flex-direction:column;align-items:stretch;gap:3px}.c2g-cia__item--more{font-size:.72rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cia-accent)}.c2g-cia__item-name{flex:1}.c2g-cia__item-missing{font-size:.68rem;font-weight:500;color:#f97316;background:#f973161a;border-radius:4px;padding:1px 5px;white-space:nowrap}.c2g-cia__shared-top{display:flex;align-items:center;gap:7px}.c2g-cia__shared-ratio{font-size:.72rem;font-weight:800;color:#3b82f6;background:#3b82f61a;border-radius:4px;padding:1px 6px;white-space:nowrap;margin-left:auto}.c2g-cia__shared-bar-track{height:3px;background:#3b82f626;border-radius:2px;overflow:hidden;margin-left:13px}.c2g-cia__shared-bar-fill{height:100%;background:#3b82f6;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-cia__shared-covered{font-size:.68rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:13px}.c2g-cia__footer{margin-top:12px;padding:8px 18px;font-size:.72rem;font-weight:700;text-align:center;color:var(--cia-accent);background:var(--cia-bg);border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}\n"], dependencies: [{ kind: "component", type: LottieComponent, selector: "ng-lottie", inputs: ["width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2212
2212
|
}
|
|
2213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CriticalItemsAlertWidgetComponent, decorators: [{
|
|
2214
2214
|
type: Component,
|
|
2215
2215
|
args: [{ selector: 'c2g-critical-items-alert-widget', standalone: true, imports: [LottieComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-cia\" [class]=\"'c2g-cia--' + urgency()\">\n\n <div class=\"c2g-cia__header\">\n <div class=\"c2g-cia__title-col\">\n <span class=\"c2g-cia__label\">\n @if (urgency() === 'critical') { \uD83D\uDEA8 }\n @else if (urgency() === 'warning') { \u26A0\uFE0F }\n @else { \u2705 }\n Kritische Items\n </span>\n @if (data().tourName) {\n <span class=\"c2g-cia__tour\">{{ data().tourName }}</span>\n }\n </div>\n <div class=\"c2g-cia__countdown\">\n <span class=\"c2g-cia__countdown-number\">{{ daysUntil() }}</span>\n <span class=\"c2g-cia__countdown-unit\">{{ daysUntil() === 1 ? 'Tag' : 'Tage' }}</span>\n </div>\n </div>\n\n @if (allClear()) {\n <div class=\"c2g-cia__all-clear\">\n\n <!-- Visual slot -->\n <div class=\"c2g-cia__success-visual\" aria-hidden=\"true\">\n @switch (successVisualType()) {\n @case ('lottie') {\n <ng-lottie [options]=\"lottieOptions()\" width=\"100px\" height=\"80px\" />\n }\n @case ('image') {\n <img class=\"c2g-cia__success-img\"\n [src]=\"imageValue()\"\n [alt]=\"imageAlt()\" />\n }\n @case ('icon') {\n <span class=\"c2g-cia__success-icon\">{{ iconValue() }}</span>\n }\n }\n </div>\n\n <div class=\"c2g-cia__all-clear-text-block\">\n <span class=\"c2g-cia__all-clear-headline\">Alles dabei! \uD83C\uDF89</span>\n <span class=\"c2g-cia__all-clear-sub\">Alle kritischen Items sind gepackt \u2014 bereit f\u00FCr das Abenteuer.</span>\n </div>\n </div>\n } @else {\n\n <!-- Progress summary -->\n <div class=\"c2g-cia__summary\">\n <span class=\"c2g-cia__open-count\">{{ data().openItems.length }}</span>\n <span class=\"c2g-cia__summary-text\">\n von {{ data().totalCritical }} kritischen\n {{ data().totalCritical === 1 ? 'Item fehlt' : 'Items fehlen' }}\n </span>\n </div>\n <div class=\"c2g-cia__progress-track\">\n <div class=\"c2g-cia__progress-fill\"\n [style.width.%]=\"((data().totalCritical - data().openItems.length) / data().totalCritical) * 100\">\n </div>\n </div>\n\n <!-- Side-by-side sections -->\n <div class=\"c2g-cia__sections\">\n\n <!-- Personal items -->\n @if (personalItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--personal\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--personal\">\uD83D\uDC64</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Pers\u00F6nlich</span>\n <span class=\"c2g-cia__section-hint\">Jeder braucht es selbst</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of personalItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--personal\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.missingFor?.length) {\n <span class=\"c2g-cia__item-missing\">{{ item.missingFor!.join(', ') }}</span>\n }\n </li>\n }\n @if (personalHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ personalHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n <!-- Shared items -->\n @if (sharedItems().length > 0) {\n <div class=\"c2g-cia__section c2g-cia__section--shared\">\n <div class=\"c2g-cia__section-header\">\n <span class=\"c2g-cia__section-icon c2g-cia__section-icon--shared\">\uD83D\uDC65</span>\n <div class=\"c2g-cia__section-titles\">\n <span class=\"c2g-cia__section-title\">Geteilt</span>\n <span class=\"c2g-cia__section-hint\">Mindestmenge muss gedeckt sein</span>\n </div>\n </div>\n <ul class=\"c2g-cia__list\">\n @for (item of sharedItems(); track item.name) {\n <li class=\"c2g-cia__item c2g-cia__item--shared\">\n <div class=\"c2g-cia__shared-top\">\n <span class=\"c2g-cia__item-dot\"></span>\n <span class=\"c2g-cia__item-name\">{{ item.name }}</span>\n @if (item.neededCount) {\n <span class=\"c2g-cia__shared-ratio\">\n {{ item.coveredCount ?? 0 }}/{{ item.neededCount }}\n </span>\n }\n </div>\n @if (item.neededCount && item.neededCount > 1) {\n <div class=\"c2g-cia__shared-bar-track\">\n <div class=\"c2g-cia__shared-bar-fill\" [style.width.%]=\"sharedProgress(item)\"></div>\n </div>\n }\n @if (item.coveredBy?.length) {\n <span class=\"c2g-cia__shared-covered\">\u2713 {{ item.coveredBy!.join(', ') }}</span>\n }\n </li>\n }\n @if (sharedHidden() > 0) {\n <li class=\"c2g-cia__item c2g-cia__item--more\">+ {{ sharedHidden() }} weitere</li>\n }\n </ul>\n </div>\n }\n\n </div>\n }\n\n <div class=\"c2g-cia__footer\">{{ urgencyLabel() }}</div>\n\n</div>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-cia{border-radius:var(--c2g-radius-xl, 20px);background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1.5px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}.c2g-cia:hover{box-shadow:0 8px 28px #0000001a;transform:translateY(-2px)}.c2g-cia--ok{--cia-accent: #22c55e;--cia-bg: rgba(34, 197, 94, .06);border-color:#22c55e4d}.c2g-cia--warning{--cia-accent: #f59e0b;--cia-bg: rgba(245, 158, 11, .06);border-color:#f59e0b59}.c2g-cia--critical{--cia-accent: #ef4444;--cia-bg: rgba(239, 68, 68, .06);border-color:#ef444466;animation:c2g-cia-pulse 2s ease-in-out infinite}@keyframes c2g-cia-pulse{0%,to{box-shadow:none}50%{box-shadow:0 0 0 4px #ef444426}}.c2g-cia__header{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;gap:10px;background:var(--cia-bg)}.c2g-cia__title-col{display:flex;flex-direction:column;gap:2px}.c2g-cia__label{font-size:.8rem;font-weight:700;color:var(--cia-accent)}.c2g-cia__tour{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-cia__countdown{display:flex;flex-direction:column;align-items:center;background:var(--cia-accent);border-radius:12px;padding:6px 12px;flex-shrink:0}.c2g-cia__countdown-number{font-size:1.6rem;font-weight:900;line-height:1;color:#fff}.c2g-cia__countdown-unit{font-size:.62rem;font-weight:700;color:#fffc;text-transform:uppercase;letter-spacing:.06em}.c2g-cia__all-clear{display:flex;align-items:center;gap:12px;padding:16px 18px 18px}.c2g-cia__success-visual{flex-shrink:0;width:100px;height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center}.c2g-cia__success-img{width:100%;height:100%;object-fit:contain;border-radius:8px}.c2g-cia__success-icon{font-size:3.5rem;line-height:1;animation:c2g-icon-pop .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes c2g-icon-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.c2g-cia__all-clear-text-block{display:flex;flex-direction:column;gap:4px}.c2g-cia__all-clear-headline{font-size:1.2rem;font-weight:900;color:#22c55e;letter-spacing:-.02em;line-height:1}.c2g-cia__all-clear-sub{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));line-height:1.3}.c2g-cia__summary{display:flex;align-items:baseline;gap:6px;padding:12px 18px 0}.c2g-cia__open-count{font-size:2rem;font-weight:900;line-height:1;color:var(--cia-accent)}.c2g-cia__summary-text{font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__progress-track{height:4px;background:var(--c2g-theme-outline-variant, rgba(0, 0, 0, .08));margin:8px 18px 0;border-radius:2px;overflow:hidden}.c2g-cia__progress-fill{height:100%;background:var(--cia-accent);border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-cia__sections{display:grid;grid-template-columns:1fr;gap:0;margin-top:10px}@media(min-width:480px){.c2g-cia__sections{grid-template-columns:1fr 1fr;gap:0}}.c2g-cia__section{padding:0 18px 4px}.c2g-cia__section+.c2g-cia__section{padding-top:10px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}@media(min-width:480px){.c2g-cia__section+.c2g-cia__section{padding-top:0;border-top:none;border-left:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}}.c2g-cia__section--personal{--sec-accent: #f97316}.c2g-cia__section--shared{--sec-accent: #3b82f6}.c2g-cia__section-header{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}.c2g-cia__section-titles{display:flex;flex-direction:column;gap:1px}.c2g-cia__section-icon{font-size:.85rem;line-height:1;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.c2g-cia__section-icon--personal{background:#f973161f}.c2g-cia__section-icon--shared{background:#3b82f61f}.c2g-cia__section-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sec-accent, var(--c2g-theme-on-surface, var(--c2g-color-text-primary)))}.c2g-cia__section-hint{font-size:.62rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.c2g-cia__item{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-cia__item--personal .c2g-cia__item-dot{background:#f97316}.c2g-cia__item--shared .c2g-cia__item-dot{background:#3b82f6}.c2g-cia__item--shared{flex-direction:column;align-items:stretch;gap:3px}.c2g-cia__item--more{font-size:.72rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-cia__item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--cia-accent)}.c2g-cia__item-name{flex:1}.c2g-cia__item-missing{font-size:.68rem;font-weight:500;color:#f97316;background:#f973161a;border-radius:4px;padding:1px 5px;white-space:nowrap}.c2g-cia__shared-top{display:flex;align-items:center;gap:7px}.c2g-cia__shared-ratio{font-size:.72rem;font-weight:800;color:#3b82f6;background:#3b82f61a;border-radius:4px;padding:1px 6px;white-space:nowrap;margin-left:auto}.c2g-cia__shared-bar-track{height:3px;background:#3b82f626;border-radius:2px;overflow:hidden;margin-left:13px}.c2g-cia__shared-bar-fill{height:100%;background:#3b82f6;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-cia__shared-covered{font-size:.68rem;font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-left:13px}.c2g-cia__footer{margin-top:12px;padding:8px 18px;font-size:.72rem;font-weight:700;text-align:center;color:var(--cia-accent);background:var(--cia-bg);border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}\n"] }]
|
|
2216
|
-
}]
|
|
2216
|
+
}] });
|
|
2217
2217
|
|
|
2218
2218
|
const BEAUFORT = [
|
|
2219
2219
|
{ max: 1, label: 'Windstille', emoji: '🌬️', color: '#22c55e' },
|
|
@@ -2262,13 +2262,13 @@ class WindIndicatorWidgetComponent {
|
|
|
2262
2262
|
formatDate(iso) {
|
|
2263
2263
|
return new Date(iso).toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric' });
|
|
2264
2264
|
}
|
|
2265
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2266
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2265
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WindIndicatorWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: WindIndicatorWidgetComponent, isStandalone: true, selector: "c2g-wind-indicator-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-wind\" [class]=\"'c2g-wind--' + overallRisk()\">\n\n <header class=\"c2g-wind__header\">\n <div class=\"c2g-wind__title-col\">\n <span class=\"c2g-wind__label\">\uD83D\uDCA8 Wind</span>\n @if (data().tourName) {\n <span class=\"c2g-wind__tour\">{{ data().tourName }}</span>\n }\n </div>\n @if (peak()) {\n <div class=\"c2g-wind__peak-badge\">\n <span class=\"c2g-wind__peak-emoji\">{{ peakBeaufort().emoji }}</span>\n <div class=\"c2g-wind__peak-text\">\n <span class=\"c2g-wind__peak-speed\">{{ peak().windSpeed }}<small>km/h</small></span>\n <span class=\"c2g-wind__peak-sublabel\">Spitze</span>\n </div>\n </div>\n }\n </header>\n\n <div class=\"c2g-wind__days\">\n @for (day of enriched(); track day.date) {\n <div class=\"c2g-wind__day\">\n\n <!-- Compass rose -->\n <svg class=\"c2g-wind__compass\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"18\" class=\"c2g-wind__compass-ring\"/>\n <text class=\"c2g-wind__compass-n\" x=\"20\" y=\"7\">N</text>\n <g [style.transform-origin]=\"'20px 20px'\" [style.transform]=\"'rotate(' + day.arrowDeg + 'deg)'\">\n <polygon points=\"20,4 23,18 20,16 17,18\" [attr.fill]=\"day.bf.color\"/>\n <polygon points=\"20,36 17,22 20,24 23,22\" fill=\"rgba(255,255,255,0.18)\"/>\n </g>\n <circle cx=\"20\" cy=\"20\" r=\"2.5\" [attr.fill]=\"day.bf.color\"/>\n </svg>\n\n <!-- Date -->\n <span class=\"c2g-wind__date\">{{ formatDate(day.date) }}</span>\n\n <!-- Speed bar -->\n <div class=\"c2g-wind__bar-track\">\n <div class=\"c2g-wind__bar-fill\"\n [style.width.%]=\"day.barPct\"\n [style.background]=\"day.bf.color\">\n </div>\n </div>\n\n <!-- Speed value -->\n <span class=\"c2g-wind__speed\" [style.color]=\"day.bf.color\">\n {{ day.windSpeed }}<small>km/h</small>\n </span>\n\n <!-- Beaufort + direction -->\n <span class=\"c2g-wind__meta\">{{ day.dirLabel }} \u00B7 {{ day.bf.label }}</span>\n\n </div>\n }\n </div>\n\n</article>\n", styles: [":host{display:block}.c2g-wind{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-wind:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000003d}.c2g-wind:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(148,163,184,.04) 0%,transparent 70%);pointer-events:none}.c2g-wind--stormy:before{background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(239,68,68,.06) 0%,transparent 70%)}.c2g-wind--windy:before{background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(249,115,22,.06) 0%,transparent 70%)}.c2g-wind__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-wind__title-col{display:flex;flex-direction:column;gap:.125rem}.c2g-wind__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-wind__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-wind__peak-badge{display:flex;align-items:center;gap:.5rem;background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:12px;padding:.375rem .75rem;flex-shrink:0}.c2g-wind__peak-emoji{font-size:1.25rem;line-height:1}.c2g-wind__peak-text{display:flex;flex-direction:column;gap:0}.c2g-wind__peak-speed{font-size:.9375rem;font-weight:900;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1.1}.c2g-wind__peak-speed small{font-size:.5625rem;font-weight:600;opacity:.55;margin-left:1px}.c2g-wind__peak-sublabel{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wind__days{display:flex;flex-direction:column;gap:.5rem}.c2g-wind__day{display:grid;grid-template-columns:40px 72px 1fr 56px;grid-template-rows:auto auto;column-gap:.625rem;align-items:center}.c2g-wind__compass{grid-column:1;grid-row:1/3;width:40px;height:40px;display:block}.c2g-wind__compass-ring{fill:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));stroke-width:1}.c2g-wind__compass-n{fill:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:5.5px;font-weight:800;font-family:inherit;text-anchor:middle;dominant-baseline:middle}.c2g-wind__date{grid-column:2;grid-row:1;font-size:.6875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));white-space:nowrap}.c2g-wind__bar-track{grid-column:3;grid-row:1;height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-wind__bar-fill{height:100%;min-width:3px;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wind__speed{grid-column:4;grid-row:1;font-size:.875rem;font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.c2g-wind__speed small{font-size:.5625rem;font-weight:600;opacity:.6;margin-left:1px}.c2g-wind__meta{grid-column:2/5;grid-row:2;font-size:.6875rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2267
2267
|
}
|
|
2268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WindIndicatorWidgetComponent, decorators: [{
|
|
2269
2269
|
type: Component,
|
|
2270
2270
|
args: [{ selector: 'c2g-wind-indicator-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-wind\" [class]=\"'c2g-wind--' + overallRisk()\">\n\n <header class=\"c2g-wind__header\">\n <div class=\"c2g-wind__title-col\">\n <span class=\"c2g-wind__label\">\uD83D\uDCA8 Wind</span>\n @if (data().tourName) {\n <span class=\"c2g-wind__tour\">{{ data().tourName }}</span>\n }\n </div>\n @if (peak()) {\n <div class=\"c2g-wind__peak-badge\">\n <span class=\"c2g-wind__peak-emoji\">{{ peakBeaufort().emoji }}</span>\n <div class=\"c2g-wind__peak-text\">\n <span class=\"c2g-wind__peak-speed\">{{ peak().windSpeed }}<small>km/h</small></span>\n <span class=\"c2g-wind__peak-sublabel\">Spitze</span>\n </div>\n </div>\n }\n </header>\n\n <div class=\"c2g-wind__days\">\n @for (day of enriched(); track day.date) {\n <div class=\"c2g-wind__day\">\n\n <!-- Compass rose -->\n <svg class=\"c2g-wind__compass\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"18\" class=\"c2g-wind__compass-ring\"/>\n <text class=\"c2g-wind__compass-n\" x=\"20\" y=\"7\">N</text>\n <g [style.transform-origin]=\"'20px 20px'\" [style.transform]=\"'rotate(' + day.arrowDeg + 'deg)'\">\n <polygon points=\"20,4 23,18 20,16 17,18\" [attr.fill]=\"day.bf.color\"/>\n <polygon points=\"20,36 17,22 20,24 23,22\" fill=\"rgba(255,255,255,0.18)\"/>\n </g>\n <circle cx=\"20\" cy=\"20\" r=\"2.5\" [attr.fill]=\"day.bf.color\"/>\n </svg>\n\n <!-- Date -->\n <span class=\"c2g-wind__date\">{{ formatDate(day.date) }}</span>\n\n <!-- Speed bar -->\n <div class=\"c2g-wind__bar-track\">\n <div class=\"c2g-wind__bar-fill\"\n [style.width.%]=\"day.barPct\"\n [style.background]=\"day.bf.color\">\n </div>\n </div>\n\n <!-- Speed value -->\n <span class=\"c2g-wind__speed\" [style.color]=\"day.bf.color\">\n {{ day.windSpeed }}<small>km/h</small>\n </span>\n\n <!-- Beaufort + direction -->\n <span class=\"c2g-wind__meta\">{{ day.dirLabel }} \u00B7 {{ day.bf.label }}</span>\n\n </div>\n }\n </div>\n\n</article>\n", styles: [":host{display:block}.c2g-wind{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:var(--c2g-radius-xl, 20px);padding:1.25rem 1.5rem 1rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-wind:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000003d}.c2g-wind:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(148,163,184,.04) 0%,transparent 70%);pointer-events:none}.c2g-wind--stormy:before{background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(239,68,68,.06) 0%,transparent 70%)}.c2g-wind--windy:before{background:radial-gradient(ellipse 80% 50% at 100% 0%,rgba(249,115,22,.06) 0%,transparent 70%)}.c2g-wind__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.c2g-wind__title-col{display:flex;flex-direction:column;gap:.125rem}.c2g-wind__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-wind__tour{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-wind__peak-badge{display:flex;align-items:center;gap:.5rem;background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:12px;padding:.375rem .75rem;flex-shrink:0}.c2g-wind__peak-emoji{font-size:1.25rem;line-height:1}.c2g-wind__peak-text{display:flex;flex-direction:column;gap:0}.c2g-wind__peak-speed{font-size:.9375rem;font-weight:900;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1.1}.c2g-wind__peak-speed small{font-size:.5625rem;font-weight:600;opacity:.55;margin-left:1px}.c2g-wind__peak-sublabel{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wind__days{display:flex;flex-direction:column;gap:.5rem}.c2g-wind__day{display:grid;grid-template-columns:40px 72px 1fr 56px;grid-template-rows:auto auto;column-gap:.625rem;align-items:center}.c2g-wind__compass{grid-column:1;grid-row:1/3;width:40px;height:40px;display:block}.c2g-wind__compass-ring{fill:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));stroke-width:1}.c2g-wind__compass-n{fill:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-size:5.5px;font-weight:800;font-family:inherit;text-anchor:middle;dominant-baseline:middle}.c2g-wind__date{grid-column:2;grid-row:1;font-size:.6875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));white-space:nowrap}.c2g-wind__bar-track{grid-column:3;grid-row:1;height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-wind__bar-fill{height:100%;min-width:3px;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wind__speed{grid-column:4;grid-row:1;font-size:.875rem;font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.c2g-wind__speed small{font-size:.5625rem;font-weight:600;opacity:.6;margin-left:1px}.c2g-wind__meta{grid-column:2/5;grid-row:2;font-size:.6875rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
2271
|
-
}]
|
|
2271
|
+
}] });
|
|
2272
2272
|
|
|
2273
2273
|
class TotalKmWidgetComponent {
|
|
2274
2274
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2321,13 +2321,13 @@ class TotalKmWidgetComponent {
|
|
|
2321
2321
|
cancelAnimationFrame(this.rafId);
|
|
2322
2322
|
cancelAnimationFrame(this.rafYearId);
|
|
2323
2323
|
}
|
|
2324
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2324
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TotalKmWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TotalKmWidgetComponent, isStandalone: true, selector: "c2g-total-km-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-tkm\">\n <header class=\"c2g-tkm__header\">\n <span class=\"c2g-tkm__icon\" aria-hidden=\"true\">\uD83D\uDDFA\uFE0F</span>\n <div class=\"c2g-tkm__titles\">\n <h3 class=\"c2g-tkm__title\">Gesamt-Kilometer</h3>\n @if (data().tourCount) {\n <span class=\"c2g-tkm__sub\">{{ data().tourCount }} Touren</span>\n }\n </div>\n </header>\n\n <div class=\"c2g-tkm__hero\">\n <span class=\"c2g-tkm__value\">{{ displayKm() | number:'1.0-0' }}</span>\n <span class=\"c2g-tkm__unit\">km</span>\n </div>\n\n @if (data().yearKm) {\n <div class=\"c2g-tkm__year-row\">\n <span class=\"c2g-tkm__year-label\">Dieses Jahr</span>\n <span class=\"c2g-tkm__year-value\">{{ displayYearKm() | number:'1.0-0' }} km</span>\n </div>\n }\n\n @if (sparklinePath()) {\n <div class=\"c2g-tkm__chart\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" class=\"c2g-tkm__svg\">\n <defs>\n <linearGradient id=\"tkm-area-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"var(--c2g-theme-primary, #ff6b35)\" stop-opacity=\"0.35\"/>\n <stop offset=\"100%\" stop-color=\"var(--c2g-theme-primary, #ff6b35)\" stop-opacity=\"0\"/>\n </linearGradient>\n </defs>\n <path class=\"c2g-tkm__area\" [attr.d]=\"sparklinePath()!.area\" fill=\"url(#tkm-area-grad)\" />\n <path class=\"c2g-tkm__line\" [attr.d]=\"sparklinePath()!.line\" />\n <circle\n class=\"c2g-tkm__dot\"\n [attr.cx]=\"sparklinePath()!.lastX\"\n [attr.cy]=\"sparklinePath()!.lastY\"\n r=\"3\"\n />\n </svg>\n </div>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tkm{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 0;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-tkm:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tkm:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(255,107,53,.05) 0%,transparent 70%);pointer-events:none}.c2g-tkm__header{display:flex;align-items:center;gap:8px}.c2g-tkm__icon{font-size:1.25rem;line-height:1}.c2g-tkm__titles{display:flex;flex-direction:column;gap:2px}.c2g-tkm__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tkm__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-tkm__hero{display:flex;align-items:baseline;gap:5px}.c2g-tkm__value{font-size:3rem;font-weight:800;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;letter-spacing:-.02em}.c2g-tkm__unit{font-size:1.25rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-tkm__year-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-tkm__year-label{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tkm__year-value{font-size:.875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-tkm__chart{height:52px;margin:0 -20px}.c2g-tkm__svg{width:100%;height:100%;display:block}.c2g-tkm__line{fill:none;stroke:var(--c2g-theme-primary, var(--c2g-color-primary));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.c2g-tkm__dot{fill:var(--c2g-theme-primary, var(--c2g-color-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2326
2326
|
}
|
|
2327
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TotalKmWidgetComponent, decorators: [{
|
|
2328
2328
|
type: Component,
|
|
2329
2329
|
args: [{ selector: 'c2g-total-km-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-tkm\">\n <header class=\"c2g-tkm__header\">\n <span class=\"c2g-tkm__icon\" aria-hidden=\"true\">\uD83D\uDDFA\uFE0F</span>\n <div class=\"c2g-tkm__titles\">\n <h3 class=\"c2g-tkm__title\">Gesamt-Kilometer</h3>\n @if (data().tourCount) {\n <span class=\"c2g-tkm__sub\">{{ data().tourCount }} Touren</span>\n }\n </div>\n </header>\n\n <div class=\"c2g-tkm__hero\">\n <span class=\"c2g-tkm__value\">{{ displayKm() | number:'1.0-0' }}</span>\n <span class=\"c2g-tkm__unit\">km</span>\n </div>\n\n @if (data().yearKm) {\n <div class=\"c2g-tkm__year-row\">\n <span class=\"c2g-tkm__year-label\">Dieses Jahr</span>\n <span class=\"c2g-tkm__year-value\">{{ displayYearKm() | number:'1.0-0' }} km</span>\n </div>\n }\n\n @if (sparklinePath()) {\n <div class=\"c2g-tkm__chart\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" class=\"c2g-tkm__svg\">\n <defs>\n <linearGradient id=\"tkm-area-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"var(--c2g-theme-primary, #ff6b35)\" stop-opacity=\"0.35\"/>\n <stop offset=\"100%\" stop-color=\"var(--c2g-theme-primary, #ff6b35)\" stop-opacity=\"0\"/>\n </linearGradient>\n </defs>\n <path class=\"c2g-tkm__area\" [attr.d]=\"sparklinePath()!.area\" fill=\"url(#tkm-area-grad)\" />\n <path class=\"c2g-tkm__line\" [attr.d]=\"sparklinePath()!.line\" />\n <circle\n class=\"c2g-tkm__dot\"\n [attr.cx]=\"sparklinePath()!.lastX\"\n [attr.cy]=\"sparklinePath()!.lastY\"\n r=\"3\"\n />\n </svg>\n </div>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tkm{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 0;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-tkm:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tkm:before{content:\"\";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(255,107,53,.05) 0%,transparent 70%);pointer-events:none}.c2g-tkm__header{display:flex;align-items:center;gap:8px}.c2g-tkm__icon{font-size:1.25rem;line-height:1}.c2g-tkm__titles{display:flex;flex-direction:column;gap:2px}.c2g-tkm__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tkm__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-tkm__hero{display:flex;align-items:baseline;gap:5px}.c2g-tkm__value{font-size:3rem;font-weight:800;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;letter-spacing:-.02em}.c2g-tkm__unit{font-size:1.25rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-tkm__year-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-tkm__year-label{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tkm__year-value{font-size:.875rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-tkm__chart{height:52px;margin:0 -20px}.c2g-tkm__svg{width:100%;height:100%;display:block}.c2g-tkm__line{fill:none;stroke:var(--c2g-theme-primary, var(--c2g-color-primary));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.c2g-tkm__dot{fill:var(--c2g-theme-primary, var(--c2g-color-primary))}\n"] }]
|
|
2330
|
-
}], ctorParameters: () => []
|
|
2330
|
+
}], ctorParameters: () => [] });
|
|
2331
2331
|
|
|
2332
2332
|
const TYPE_CONFIG = {
|
|
2333
2333
|
hiking: { label: 'Wandern', emoji: '🥾', color: '#ff6b35' },
|
|
@@ -2372,13 +2372,13 @@ class TourTypeSplitWidgetComponent {
|
|
|
2372
2372
|
trackByType(_, seg) {
|
|
2373
2373
|
return seg.type;
|
|
2374
2374
|
}
|
|
2375
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2376
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2375
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TourTypeSplitWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TourTypeSplitWidgetComponent, isStandalone: true, selector: "c2g-tour-type-split-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-tts\">\n <header class=\"c2g-tts__header\">\n <span class=\"c2g-tts__icon\" aria-hidden=\"true\">\uD83E\uDDED</span>\n <div class=\"c2g-tts__titles\">\n <h3 class=\"c2g-tts__title\">Tour-Typen</h3>\n <span class=\"c2g-tts__sub\">{{ data().totalTours }} Touren gesamt</span>\n </div>\n </header>\n\n <div class=\"c2g-tts__body\">\n <div class=\"c2g-tts__donut-wrap\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 128 128\" class=\"c2g-tts__donut\">\n <circle cx=\"64\" cy=\"64\" r=\"52\" class=\"c2g-tts__track\"/>\n @for (seg of segments(); track trackByType($index, seg)) {\n <circle\n cx=\"64\" cy=\"64\" r=\"52\"\n class=\"c2g-tts__arc\"\n [style.stroke]=\"seg.color\"\n [style.stroke-dasharray]=\"seg.dash + ' ' + circumference\"\n [style.stroke-dashoffset]=\"-seg.offset\"\n />\n }\n </svg>\n @if (dominantSegment(); as dom) {\n <div class=\"c2g-tts__center\">\n <span class=\"c2g-tts__center-emoji\">{{ dom.emoji }}</span>\n <span class=\"c2g-tts__center-label\">{{ dom.label }}</span>\n </div>\n }\n </div>\n\n <ul class=\"c2g-tts__legend\" role=\"list\">\n @for (seg of segments(); track trackByType($index, seg)) {\n <li class=\"c2g-tts__legend-item\">\n <span class=\"c2g-tts__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-tts__legend-emoji\">{{ seg.emoji }}</span>\n <span class=\"c2g-tts__legend-name\">{{ seg.label }}</span>\n <span class=\"c2g-tts__legend-count\">{{ seg.count }}</span>\n <span class=\"c2g-tts__legend-pct\">{{ (seg.pct * 100) | number:'1.0-0' }}%</span>\n </li>\n }\n </ul>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tts{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-tts:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tts__header{display:flex;align-items:center;gap:8px}.c2g-tts__icon{font-size:1.25rem;line-height:1}.c2g-tts__titles{display:flex;flex-direction:column;gap:2px}.c2g-tts__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tts__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-tts__body{display:flex;gap:16px;align-items:center}.c2g-tts__donut-wrap{position:relative;flex-shrink:0;width:120px;height:120px}.c2g-tts__donut{width:100%;height:100%;transform:rotate(-90deg)}.c2g-tts__track{fill:none;stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));stroke-width:18}.c2g-tts__arc{fill:none;stroke-width:18;stroke-linecap:butt;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1)}.c2g-tts__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.c2g-tts__center-emoji{font-size:1.5rem;line-height:1}.c2g-tts__center-label{font-size:.6rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;text-transform:uppercase;letter-spacing:.05em}.c2g-tts__legend{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:6px}.c2g-tts__legend-item{display:flex;align-items:center;gap:6px}.c2g-tts__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.c2g-tts__legend-emoji{font-size:.875rem;line-height:1;flex-shrink:0}.c2g-tts__legend-name{font-size:.8125rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-tts__legend-count{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-tts__legend-pct{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;min-width:2.5rem;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2377
2377
|
}
|
|
2378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TourTypeSplitWidgetComponent, decorators: [{
|
|
2379
2379
|
type: Component,
|
|
2380
2380
|
args: [{ selector: 'c2g-tour-type-split-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-tts\">\n <header class=\"c2g-tts__header\">\n <span class=\"c2g-tts__icon\" aria-hidden=\"true\">\uD83E\uDDED</span>\n <div class=\"c2g-tts__titles\">\n <h3 class=\"c2g-tts__title\">Tour-Typen</h3>\n <span class=\"c2g-tts__sub\">{{ data().totalTours }} Touren gesamt</span>\n </div>\n </header>\n\n <div class=\"c2g-tts__body\">\n <div class=\"c2g-tts__donut-wrap\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 128 128\" class=\"c2g-tts__donut\">\n <circle cx=\"64\" cy=\"64\" r=\"52\" class=\"c2g-tts__track\"/>\n @for (seg of segments(); track trackByType($index, seg)) {\n <circle\n cx=\"64\" cy=\"64\" r=\"52\"\n class=\"c2g-tts__arc\"\n [style.stroke]=\"seg.color\"\n [style.stroke-dasharray]=\"seg.dash + ' ' + circumference\"\n [style.stroke-dashoffset]=\"-seg.offset\"\n />\n }\n </svg>\n @if (dominantSegment(); as dom) {\n <div class=\"c2g-tts__center\">\n <span class=\"c2g-tts__center-emoji\">{{ dom.emoji }}</span>\n <span class=\"c2g-tts__center-label\">{{ dom.label }}</span>\n </div>\n }\n </div>\n\n <ul class=\"c2g-tts__legend\" role=\"list\">\n @for (seg of segments(); track trackByType($index, seg)) {\n <li class=\"c2g-tts__legend-item\">\n <span class=\"c2g-tts__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-tts__legend-emoji\">{{ seg.emoji }}</span>\n <span class=\"c2g-tts__legend-name\">{{ seg.label }}</span>\n <span class=\"c2g-tts__legend-count\">{{ seg.count }}</span>\n <span class=\"c2g-tts__legend-pct\">{{ (seg.pct * 100) | number:'1.0-0' }}%</span>\n </li>\n }\n </ul>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tts{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-tts:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tts__header{display:flex;align-items:center;gap:8px}.c2g-tts__icon{font-size:1.25rem;line-height:1}.c2g-tts__titles{display:flex;flex-direction:column;gap:2px}.c2g-tts__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tts__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-tts__body{display:flex;gap:16px;align-items:center}.c2g-tts__donut-wrap{position:relative;flex-shrink:0;width:120px;height:120px}.c2g-tts__donut{width:100%;height:100%;transform:rotate(-90deg)}.c2g-tts__track{fill:none;stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));stroke-width:18}.c2g-tts__arc{fill:none;stroke-width:18;stroke-linecap:butt;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1)}.c2g-tts__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.c2g-tts__center-emoji{font-size:1.5rem;line-height:1}.c2g-tts__center-label{font-size:.6rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;text-transform:uppercase;letter-spacing:.05em}.c2g-tts__legend{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:6px}.c2g-tts__legend-item{display:flex;align-items:center;gap:6px}.c2g-tts__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.c2g-tts__legend-emoji{font-size:.875rem;line-height:1;flex-shrink:0}.c2g-tts__legend-name{font-size:.8125rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-tts__legend-count{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-tts__legend-pct{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;min-width:2.5rem;text-align:right}\n"] }]
|
|
2381
|
-
}]
|
|
2381
|
+
}] });
|
|
2382
2382
|
|
|
2383
2383
|
const MONTH_LABELS = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
|
|
2384
2384
|
class TourRhythmWidgetComponent {
|
|
@@ -2402,13 +2402,13 @@ class TourRhythmWidgetComponent {
|
|
|
2402
2402
|
trackByCol(_, cell) {
|
|
2403
2403
|
return cell.col;
|
|
2404
2404
|
}
|
|
2405
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TourRhythmWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TourRhythmWidgetComponent, isStandalone: true, selector: "c2g-tour-rhythm-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-trh\">\n <header class=\"c2g-trh__header\">\n <span class=\"c2g-trh__icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n <div class=\"c2g-trh__titles\">\n <h3 class=\"c2g-trh__title\">Tour-Rhythmus</h3>\n <span class=\"c2g-trh__sub\">Letzte 52 Wochen</span>\n </div>\n <div class=\"c2g-trh__stats\">\n @if (data().currentStreakWeeks) {\n <span class=\"c2g-trh__streak\">\uD83D\uDD25 {{ data().currentStreakWeeks }} Wochen-Streak</span>\n }\n </div>\n </header>\n\n <div class=\"c2g-trh__grid-wrap\" aria-label=\"Aktivit\u00E4ts-Heatmap der letzten 52 Wochen\" role=\"img\">\n <div class=\"c2g-trh__month-labels\" aria-hidden=\"true\">\n @for (cell of cells(); track cell.col) {\n @if (cell.monthLabel) {\n <span class=\"c2g-trh__month-label\" [style.grid-column]=\"cell.col + 1\">\n {{ cell.monthLabel }}\n </span>\n }\n }\n </div>\n <div class=\"c2g-trh__grid\">\n @for (cell of cells(); track trackByCol($index, cell)) {\n <div\n class=\"c2g-trh__cell c2g-trh__cell--level-{{ cell.level }}\"\n [style.background]=\"levelColor(cell.level)\"\n [title]=\"cell.tourName ? cell.tourName + (cell.km ? ' \u00B7 ' + cell.km + ' km' : '') : cell.weekStart\"\n ></div>\n }\n </div>\n </div>\n\n <div class=\"c2g-trh__legend\" aria-hidden=\"true\">\n <span class=\"c2g-trh__legend-label\">Weniger</span>\n @for (l of [0, 1, 2, 3, 4]; track l) {\n <div class=\"c2g-trh__legend-cell\" [style.background]=\"levelColors[l]\"></div>\n }\n <span class=\"c2g-trh__legend-label\">Mehr</span>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-trh{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 14px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-trh:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-trh__header{display:flex;align-items:center;gap:8px}.c2g-trh__icon{font-size:1.25rem;line-height:1}.c2g-trh__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-trh__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-trh__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-trh__streak{font-size:.72rem;font-weight:700;color:var(--c2g-color-warning, #f59e0b);background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);padding:3px 8px;border-radius:999px;white-space:nowrap}.c2g-trh__grid-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.c2g-trh__grid-wrap::-webkit-scrollbar{display:none}.c2g-trh__month-labels{display:grid;grid-template-columns:repeat(52,12px);gap:2px;margin-bottom:4px;min-width:max-content}.c2g-trh__month-label{font-size:.6rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;opacity:.6}.c2g-trh__grid{display:grid;grid-template-columns:repeat(52,12px);gap:2px;min-width:max-content}.c2g-trh__cell{width:12px;height:12px;border-radius:2px;transition:transform .15s ease,filter .15s ease;cursor:default}.c2g-trh__cell:hover{transform:scale(1.3);filter:brightness(1.2);z-index:1;position:relative}.c2g-trh__legend{display:flex;align-items:center;gap:4px}.c2g-trh__legend-label{font-size:.65rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.6}.c2g-trh__legend-cell{width:10px;height:10px;border-radius:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2407
2407
|
}
|
|
2408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TourRhythmWidgetComponent, decorators: [{
|
|
2409
2409
|
type: Component,
|
|
2410
2410
|
args: [{ selector: 'c2g-tour-rhythm-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-trh\">\n <header class=\"c2g-trh__header\">\n <span class=\"c2g-trh__icon\" aria-hidden=\"true\">\uD83D\uDCC5</span>\n <div class=\"c2g-trh__titles\">\n <h3 class=\"c2g-trh__title\">Tour-Rhythmus</h3>\n <span class=\"c2g-trh__sub\">Letzte 52 Wochen</span>\n </div>\n <div class=\"c2g-trh__stats\">\n @if (data().currentStreakWeeks) {\n <span class=\"c2g-trh__streak\">\uD83D\uDD25 {{ data().currentStreakWeeks }} Wochen-Streak</span>\n }\n </div>\n </header>\n\n <div class=\"c2g-trh__grid-wrap\" aria-label=\"Aktivit\u00E4ts-Heatmap der letzten 52 Wochen\" role=\"img\">\n <div class=\"c2g-trh__month-labels\" aria-hidden=\"true\">\n @for (cell of cells(); track cell.col) {\n @if (cell.monthLabel) {\n <span class=\"c2g-trh__month-label\" [style.grid-column]=\"cell.col + 1\">\n {{ cell.monthLabel }}\n </span>\n }\n }\n </div>\n <div class=\"c2g-trh__grid\">\n @for (cell of cells(); track trackByCol($index, cell)) {\n <div\n class=\"c2g-trh__cell c2g-trh__cell--level-{{ cell.level }}\"\n [style.background]=\"levelColor(cell.level)\"\n [title]=\"cell.tourName ? cell.tourName + (cell.km ? ' \u00B7 ' + cell.km + ' km' : '') : cell.weekStart\"\n ></div>\n }\n </div>\n </div>\n\n <div class=\"c2g-trh__legend\" aria-hidden=\"true\">\n <span class=\"c2g-trh__legend-label\">Weniger</span>\n @for (l of [0, 1, 2, 3, 4]; track l) {\n <div class=\"c2g-trh__legend-cell\" [style.background]=\"levelColors[l]\"></div>\n }\n <span class=\"c2g-trh__legend-label\">Mehr</span>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-trh{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 14px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-trh:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-trh__header{display:flex;align-items:center;gap:8px}.c2g-trh__icon{font-size:1.25rem;line-height:1}.c2g-trh__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-trh__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-trh__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-trh__streak{font-size:.72rem;font-weight:700;color:var(--c2g-color-warning, #f59e0b);background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);padding:3px 8px;border-radius:999px;white-space:nowrap}.c2g-trh__grid-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.c2g-trh__grid-wrap::-webkit-scrollbar{display:none}.c2g-trh__month-labels{display:grid;grid-template-columns:repeat(52,12px);gap:2px;margin-bottom:4px;min-width:max-content}.c2g-trh__month-label{font-size:.6rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));white-space:nowrap;opacity:.6}.c2g-trh__grid{display:grid;grid-template-columns:repeat(52,12px);gap:2px;min-width:max-content}.c2g-trh__cell{width:12px;height:12px;border-radius:2px;transition:transform .15s ease,filter .15s ease;cursor:default}.c2g-trh__cell:hover{transform:scale(1.3);filter:brightness(1.2);z-index:1;position:relative}.c2g-trh__legend{display:flex;align-items:center;gap:4px}.c2g-trh__legend-label{font-size:.65rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.6}.c2g-trh__legend-cell{width:10px;height:10px;border-radius:2px}\n"] }]
|
|
2411
|
-
}]
|
|
2411
|
+
}] });
|
|
2412
2412
|
|
|
2413
2413
|
const SEASON_CONFIG = {
|
|
2414
2414
|
spring: { label: 'Frühling', emoji: '🌸', color: '#84cc16' },
|
|
@@ -2481,13 +2481,13 @@ class SeasonDnaWidgetComponent {
|
|
|
2481
2481
|
trackBySeason(_, seg) {
|
|
2482
2482
|
return seg.season;
|
|
2483
2483
|
}
|
|
2484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2484
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SeasonDnaWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SeasonDnaWidgetComponent, isStandalone: true, selector: "c2g-season-dna-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-sdn\">\n <header class=\"c2g-sdn__header\">\n <span class=\"c2g-sdn__icon\" aria-hidden=\"true\">\uD83C\uDF0D</span>\n <div class=\"c2g-sdn__titles\">\n <h3 class=\"c2g-sdn__title\">Saison-DNA</h3>\n <span class=\"c2g-sdn__sub\">{{ data().totalTours }} Touren analysiert</span>\n </div>\n </header>\n\n <div class=\"c2g-sdn__body\">\n <div class=\"c2g-sdn__chart-wrap\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 128 128\" class=\"c2g-sdn__svg\">\n @for (seg of segments(); track trackBySeason($index, seg)) {\n @if (seg.pathD) {\n <path\n class=\"c2g-sdn__segment\"\n [attr.d]=\"seg.pathD\"\n [style.fill]=\"seg.color\"\n />\n }\n }\n </svg>\n @if (dominantSeason(); as dom) {\n <div class=\"c2g-sdn__center\">\n <span class=\"c2g-sdn__center-emoji\">{{ dom.emoji }}</span>\n <span class=\"c2g-sdn__center-label\">{{ dom.label }}</span>\n </div>\n }\n </div>\n\n <ul class=\"c2g-sdn__legend\" role=\"list\">\n @for (seg of segments(); track trackBySeason($index, seg)) {\n <li class=\"c2g-sdn__legend-item\">\n <span class=\"c2g-sdn__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-sdn__legend-emoji\">{{ seg.emoji }}</span>\n <div class=\"c2g-sdn__legend-text\">\n <span class=\"c2g-sdn__legend-name\">{{ seg.label }}</span>\n <span class=\"c2g-sdn__legend-detail\">\n {{ seg.tourCount }} Tour{{ seg.tourCount !== 1 ? 'en' : '' }}\n @if (seg.km) { \u00B7 {{ seg.km | number:'1.0-0' }} km }\n </span>\n </div>\n <span class=\"c2g-sdn__legend-pct\">{{ (seg.pct * 100) | number:'1.0-0' }}%</span>\n </li>\n }\n </ul>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-sdn{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-sdn:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-sdn__header{display:flex;align-items:center;gap:8px}.c2g-sdn__icon{font-size:1.25rem;line-height:1}.c2g-sdn__titles{display:flex;flex-direction:column;gap:2px}.c2g-sdn__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-sdn__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-sdn__body{display:flex;gap:16px;align-items:center}.c2g-sdn__chart-wrap{position:relative;flex-shrink:0;width:120px;height:120px}.c2g-sdn__svg{width:100%;height:100%;display:block}.c2g-sdn__segment{transition:opacity .2s ease;opacity:.9}.c2g-sdn__segment:hover{opacity:1;filter:brightness(1.1)}.c2g-sdn__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}.c2g-sdn__center-emoji{font-size:1.5rem;line-height:1}.c2g-sdn__center-label{font-size:.6rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;text-transform:uppercase;letter-spacing:.05em}.c2g-sdn__legend{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:8px}.c2g-sdn__legend-item{display:flex;align-items:center;gap:6px}.c2g-sdn__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.c2g-sdn__legend-emoji{font-size:.875rem;line-height:1;flex-shrink:0}.c2g-sdn__legend-text{flex:1;display:flex;flex-direction:column;gap:1px}.c2g-sdn__legend-name{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-sdn__legend-detail{font-size:.6875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-sdn__legend-pct{font-size:.75rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;min-width:2.25rem;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2486
2486
|
}
|
|
2487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SeasonDnaWidgetComponent, decorators: [{
|
|
2488
2488
|
type: Component,
|
|
2489
2489
|
args: [{ selector: 'c2g-season-dna-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-sdn\">\n <header class=\"c2g-sdn__header\">\n <span class=\"c2g-sdn__icon\" aria-hidden=\"true\">\uD83C\uDF0D</span>\n <div class=\"c2g-sdn__titles\">\n <h3 class=\"c2g-sdn__title\">Saison-DNA</h3>\n <span class=\"c2g-sdn__sub\">{{ data().totalTours }} Touren analysiert</span>\n </div>\n </header>\n\n <div class=\"c2g-sdn__body\">\n <div class=\"c2g-sdn__chart-wrap\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 128 128\" class=\"c2g-sdn__svg\">\n @for (seg of segments(); track trackBySeason($index, seg)) {\n @if (seg.pathD) {\n <path\n class=\"c2g-sdn__segment\"\n [attr.d]=\"seg.pathD\"\n [style.fill]=\"seg.color\"\n />\n }\n }\n </svg>\n @if (dominantSeason(); as dom) {\n <div class=\"c2g-sdn__center\">\n <span class=\"c2g-sdn__center-emoji\">{{ dom.emoji }}</span>\n <span class=\"c2g-sdn__center-label\">{{ dom.label }}</span>\n </div>\n }\n </div>\n\n <ul class=\"c2g-sdn__legend\" role=\"list\">\n @for (seg of segments(); track trackBySeason($index, seg)) {\n <li class=\"c2g-sdn__legend-item\">\n <span class=\"c2g-sdn__legend-dot\" [style.background]=\"seg.color\"></span>\n <span class=\"c2g-sdn__legend-emoji\">{{ seg.emoji }}</span>\n <div class=\"c2g-sdn__legend-text\">\n <span class=\"c2g-sdn__legend-name\">{{ seg.label }}</span>\n <span class=\"c2g-sdn__legend-detail\">\n {{ seg.tourCount }} Tour{{ seg.tourCount !== 1 ? 'en' : '' }}\n @if (seg.km) { \u00B7 {{ seg.km | number:'1.0-0' }} km }\n </span>\n </div>\n <span class=\"c2g-sdn__legend-pct\">{{ (seg.pct * 100) | number:'1.0-0' }}%</span>\n </li>\n }\n </ul>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-sdn{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-sdn:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-sdn__header{display:flex;align-items:center;gap:8px}.c2g-sdn__icon{font-size:1.25rem;line-height:1}.c2g-sdn__titles{display:flex;flex-direction:column;gap:2px}.c2g-sdn__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-sdn__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-sdn__body{display:flex;gap:16px;align-items:center}.c2g-sdn__chart-wrap{position:relative;flex-shrink:0;width:120px;height:120px}.c2g-sdn__svg{width:100%;height:100%;display:block}.c2g-sdn__segment{transition:opacity .2s ease;opacity:.9}.c2g-sdn__segment:hover{opacity:1;filter:brightness(1.1)}.c2g-sdn__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}.c2g-sdn__center-emoji{font-size:1.5rem;line-height:1}.c2g-sdn__center-label{font-size:.6rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;text-transform:uppercase;letter-spacing:.05em}.c2g-sdn__legend{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:8px}.c2g-sdn__legend-item{display:flex;align-items:center;gap:6px}.c2g-sdn__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.c2g-sdn__legend-emoji{font-size:.875rem;line-height:1;flex-shrink:0}.c2g-sdn__legend-text{flex:1;display:flex;flex-direction:column;gap:1px}.c2g-sdn__legend-name{font-size:.8125rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-sdn__legend-detail{font-size:.6875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-sdn__legend-pct{font-size:.75rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;min-width:2.25rem;text-align:right}\n"] }]
|
|
2490
|
-
}]
|
|
2490
|
+
}] });
|
|
2491
2491
|
|
|
2492
2492
|
class WeightHistoryWidgetComponent {
|
|
2493
2493
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2528,13 +2528,13 @@ class WeightHistoryWidgetComponent {
|
|
|
2528
2528
|
formatDate(iso) {
|
|
2529
2529
|
return new Date(iso).toLocaleDateString('de-DE', { month: 'short', year: '2-digit' });
|
|
2530
2530
|
}
|
|
2531
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2532
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeightHistoryWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: WeightHistoryWidgetComponent, isStandalone: true, selector: "c2g-weight-history-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-wh\">\n <header class=\"c2g-wh__header\">\n <span class=\"c2g-wh__icon\">\u2696\uFE0F</span>\n <div class=\"c2g-wh__titles\">\n <h3 class=\"c2g-wh__title\">Gewichts-Historie</h3>\n @if (data().points.length) {\n <span class=\"c2g-wh__sub\">{{ data().points.length }} Touren</span>\n }\n </div>\n @if (trend(); as t) {\n <span class=\"c2g-wh__trend\" [class.c2g-wh__trend--good]=\"t.improving\" [class.c2g-wh__trend--bad]=\"!t.improving\">\n {{ t.improving ? '\u2193' : '\u2191' }} {{ t.pct | number:'1.0-0' }}%\n </span>\n }\n </header>\n\n <div class=\"c2g-wh__hero\">\n @if (data().latestG) {\n <span class=\"c2g-wh__value\">{{ formatKg(data().latestG!) }}</span>\n <span class=\"c2g-wh__unit\">kg</span>\n <span class=\"c2g-wh__label\">aktuell</span>\n }\n @if (data().bestG) {\n <div class=\"c2g-wh__best\">\n <span class=\"c2g-wh__best-icon\">\uD83C\uDFC6</span>\n <span class=\"c2g-wh__best-val\">{{ formatKg(data().bestG!) }} kg</span>\n <span class=\"c2g-wh__best-label\">Rekord</span>\n </div>\n }\n </div>\n\n @if (sparklinePath(); as sp) {\n <div class=\"c2g-wh__chart\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" class=\"c2g-wh__svg\">\n <defs>\n <linearGradient id=\"wh-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"sp.improving ? '#22c55e' : '#f97316'\" stop-opacity=\"0.3\"/>\n <stop offset=\"100%\" [attr.stop-color]=\"sp.improving ? '#22c55e' : '#f97316'\" stop-opacity=\"0\"/>\n </linearGradient>\n </defs>\n <path [attr.d]=\"sp.area\" fill=\"url(#wh-grad)\"/>\n <path class=\"c2g-wh__line\" [attr.d]=\"sp.line\"\n [style.stroke]=\"sp.improving ? '#22c55e' : '#f97316'\"/>\n <circle class=\"c2g-wh__dot\" [attr.cx]=\"sp.lastX\" [attr.cy]=\"sp.lastY\" r=\"3\"\n [style.fill]=\"sp.improving ? '#22c55e' : '#f97316'\"/>\n </svg>\n </div>\n }\n\n <div class=\"c2g-wh__dates\">\n @if (points().length >= 2) {\n <span>{{ formatDate(points()[0].date) }}</span>\n <span>{{ formatDate(points()[points().length - 1].date) }}</span>\n }\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-wh{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-wh:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-wh__header{display:flex;align-items:center;gap:8px}.c2g-wh__icon{font-size:1.25rem;line-height:1}.c2g-wh__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-wh__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-wh__trend{font-size:.8rem;font-weight:800;padding:3px 8px;border-radius:999px}.c2g-wh__trend--good{color:#22c55e;background:#22c55e1a}.c2g-wh__trend--bad{color:#f97316;background:#f973161a}.c2g-wh__hero{display:flex;align-items:baseline;gap:6px}.c2g-wh__value{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-wh__unit{font-size:1.125rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-wh__label{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__best{display:flex;align-items:center;gap:5px;margin-left:auto;padding:4px 10px;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-wh__best-icon{font-size:.875rem}.c2g-wh__best-val{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-wh__best-label{font-size:.6875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__chart{height:52px;margin:0 -20px}.c2g-wh__svg{width:100%;height:100%;display:block}.c2g-wh__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.c2g-wh__dates{display:flex;justify-content:space-between;padding:0 0 10px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2533
2533
|
}
|
|
2534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeightHistoryWidgetComponent, decorators: [{
|
|
2535
2535
|
type: Component,
|
|
2536
2536
|
args: [{ selector: 'c2g-weight-history-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-wh\">\n <header class=\"c2g-wh__header\">\n <span class=\"c2g-wh__icon\">\u2696\uFE0F</span>\n <div class=\"c2g-wh__titles\">\n <h3 class=\"c2g-wh__title\">Gewichts-Historie</h3>\n @if (data().points.length) {\n <span class=\"c2g-wh__sub\">{{ data().points.length }} Touren</span>\n }\n </div>\n @if (trend(); as t) {\n <span class=\"c2g-wh__trend\" [class.c2g-wh__trend--good]=\"t.improving\" [class.c2g-wh__trend--bad]=\"!t.improving\">\n {{ t.improving ? '\u2193' : '\u2191' }} {{ t.pct | number:'1.0-0' }}%\n </span>\n }\n </header>\n\n <div class=\"c2g-wh__hero\">\n @if (data().latestG) {\n <span class=\"c2g-wh__value\">{{ formatKg(data().latestG!) }}</span>\n <span class=\"c2g-wh__unit\">kg</span>\n <span class=\"c2g-wh__label\">aktuell</span>\n }\n @if (data().bestG) {\n <div class=\"c2g-wh__best\">\n <span class=\"c2g-wh__best-icon\">\uD83C\uDFC6</span>\n <span class=\"c2g-wh__best-val\">{{ formatKg(data().bestG!) }} kg</span>\n <span class=\"c2g-wh__best-label\">Rekord</span>\n </div>\n }\n </div>\n\n @if (sparklinePath(); as sp) {\n <div class=\"c2g-wh__chart\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" class=\"c2g-wh__svg\">\n <defs>\n <linearGradient id=\"wh-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"sp.improving ? '#22c55e' : '#f97316'\" stop-opacity=\"0.3\"/>\n <stop offset=\"100%\" [attr.stop-color]=\"sp.improving ? '#22c55e' : '#f97316'\" stop-opacity=\"0\"/>\n </linearGradient>\n </defs>\n <path [attr.d]=\"sp.area\" fill=\"url(#wh-grad)\"/>\n <path class=\"c2g-wh__line\" [attr.d]=\"sp.line\"\n [style.stroke]=\"sp.improving ? '#22c55e' : '#f97316'\"/>\n <circle class=\"c2g-wh__dot\" [attr.cx]=\"sp.lastX\" [attr.cy]=\"sp.lastY\" r=\"3\"\n [style.fill]=\"sp.improving ? '#22c55e' : '#f97316'\"/>\n </svg>\n </div>\n }\n\n <div class=\"c2g-wh__dates\">\n @if (points().length >= 2) {\n <span>{{ formatDate(points()[0].date) }}</span>\n <span>{{ formatDate(points()[points().length - 1].date) }}</span>\n }\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-wh{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}.c2g-wh:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-wh__header{display:flex;align-items:center;gap:8px}.c2g-wh__icon{font-size:1.25rem;line-height:1}.c2g-wh__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-wh__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-wh__trend{font-size:.8rem;font-weight:800;padding:3px 8px;border-radius:999px}.c2g-wh__trend--good{color:#22c55e;background:#22c55e1a}.c2g-wh__trend--bad{color:#f97316;background:#f973161a}.c2g-wh__hero{display:flex;align-items:baseline;gap:6px}.c2g-wh__value{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-wh__unit{font-size:1.125rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-wh__label{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__best{display:flex;align-items:center;gap:5px;margin-left:auto;padding:4px 10px;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-wh__best-icon{font-size:.875rem}.c2g-wh__best-val{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-wh__best-label{font-size:.6875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wh__chart{height:52px;margin:0 -20px}.c2g-wh__svg{width:100%;height:100%;display:block}.c2g-wh__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.c2g-wh__dates{display:flex;justify-content:space-between;padding:0 0 10px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.6}\n"] }]
|
|
2537
|
-
}]
|
|
2537
|
+
}] });
|
|
2538
2538
|
|
|
2539
2539
|
class GearValueWidgetComponent {
|
|
2540
2540
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2553,13 +2553,13 @@ class GearValueWidgetComponent {
|
|
|
2553
2553
|
return `${(v / 1000).toFixed(1)}k`;
|
|
2554
2554
|
return v.toFixed(0);
|
|
2555
2555
|
}
|
|
2556
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2556
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GearValueWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GearValueWidgetComponent, isStandalone: true, selector: "c2g-gear-value-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-gv\">\n <header class=\"c2g-gv__header\">\n <span class=\"c2g-gv__icon\">\uD83D\uDCB0</span>\n <div class=\"c2g-gv__titles\">\n <h3 class=\"c2g-gv__title\">Gear-Wert</h3>\n <span class=\"c2g-gv__sub\">{{ data().itemCount }} Items</span>\n </div>\n </header>\n\n <div class=\"c2g-gv__hero\">\n <span class=\"c2g-gv__value\">{{ formattedTotal() }}</span>\n <span class=\"c2g-gv__currency\">{{ data().currency }}</span>\n </div>\n\n @if (topCategories().length) {\n <ul class=\"c2g-gv__cats\" role=\"list\">\n @for (cat of topCategories(); track cat.label) {\n <li class=\"c2g-gv__cat\">\n <div class=\"c2g-gv__cat-header\">\n <span class=\"c2g-gv__cat-name\">{{ cat.label }}</span>\n <span class=\"c2g-gv__cat-value\">{{ formatValue(cat.value) }} {{ data().currency }}</span>\n </div>\n <div class=\"c2g-gv__bar-track\">\n <div class=\"c2g-gv__bar-fill\"\n [style.width.%]=\"(cat.value / maxCatValue()) * 100\">\n </div>\n </div>\n </li>\n }\n </ul>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gv{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gv:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-gv__header{display:flex;align-items:center;gap:8px}.c2g-gv__icon{font-size:1.25rem;line-height:1}.c2g-gv__titles{display:flex;flex-direction:column;gap:2px}.c2g-gv__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gv__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-gv__hero{display:flex;align-items:baseline;gap:5px}.c2g-gv__value{font-size:2.75rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-gv__currency{font-size:1.125rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-gv__cats{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-gv__cat{display:flex;flex-direction:column;gap:4px}.c2g-gv__cat-header{display:flex;justify-content:space-between}.c2g-gv__cat-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gv__cat-value{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums}.c2g-gv__bar-track{height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-gv__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2558
2558
|
}
|
|
2559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GearValueWidgetComponent, decorators: [{
|
|
2560
2560
|
type: Component,
|
|
2561
2561
|
args: [{ selector: 'c2g-gear-value-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-gv\">\n <header class=\"c2g-gv__header\">\n <span class=\"c2g-gv__icon\">\uD83D\uDCB0</span>\n <div class=\"c2g-gv__titles\">\n <h3 class=\"c2g-gv__title\">Gear-Wert</h3>\n <span class=\"c2g-gv__sub\">{{ data().itemCount }} Items</span>\n </div>\n </header>\n\n <div class=\"c2g-gv__hero\">\n <span class=\"c2g-gv__value\">{{ formattedTotal() }}</span>\n <span class=\"c2g-gv__currency\">{{ data().currency }}</span>\n </div>\n\n @if (topCategories().length) {\n <ul class=\"c2g-gv__cats\" role=\"list\">\n @for (cat of topCategories(); track cat.label) {\n <li class=\"c2g-gv__cat\">\n <div class=\"c2g-gv__cat-header\">\n <span class=\"c2g-gv__cat-name\">{{ cat.label }}</span>\n <span class=\"c2g-gv__cat-value\">{{ formatValue(cat.value) }} {{ data().currency }}</span>\n </div>\n <div class=\"c2g-gv__bar-track\">\n <div class=\"c2g-gv__bar-fill\"\n [style.width.%]=\"(cat.value / maxCatValue()) * 100\">\n </div>\n </div>\n </li>\n }\n </ul>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gv{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gv:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-gv__header{display:flex;align-items:center;gap:8px}.c2g-gv__icon{font-size:1.25rem;line-height:1}.c2g-gv__titles{display:flex;flex-direction:column;gap:2px}.c2g-gv__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gv__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-gv__hero{display:flex;align-items:baseline;gap:5px}.c2g-gv__value{font-size:2.75rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-gv__currency{font-size:1.125rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-gv__cats{list-style:none;margin:0;padding:10px 0 0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-gv__cat{display:flex;flex-direction:column;gap:4px}.c2g-gv__cat-header{display:flex;justify-content:space-between}.c2g-gv__cat-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-gv__cat-value{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums}.c2g-gv__bar-track{height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-gv__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}\n"] }]
|
|
2562
|
-
}]
|
|
2562
|
+
}] });
|
|
2563
2563
|
|
|
2564
2564
|
const DEFAULT_COLORS = [
|
|
2565
2565
|
'#ff6b35', '#22c55e', '#3b82f6', '#f59e0b', '#a855f7',
|
|
@@ -2592,13 +2592,13 @@ class WeightBreakdownWidgetComponent {
|
|
|
2592
2592
|
return `${(g / 1000).toFixed(2)} kg`;
|
|
2593
2593
|
return `${g} g`;
|
|
2594
2594
|
}
|
|
2595
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2595
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeightBreakdownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: WeightBreakdownWidgetComponent, isStandalone: true, selector: "c2g-weight-breakdown-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-wb\">\n <header class=\"c2g-wb__header\">\n <span class=\"c2g-wb__icon\">\uD83C\uDFCB\uFE0F</span>\n <div class=\"c2g-wb__titles\">\n <h3 class=\"c2g-wb__title\">Gewichts-Breakdown</h3>\n <span class=\"c2g-wb__sub\">{{ totalKg() }} kg gesamt</span>\n </div>\n </header>\n\n <!-- Stacked horizontal bar -->\n <div class=\"c2g-wb__stacked\" aria-hidden=\"true\">\n @for (e of entries(); track e.category) {\n <div\n class=\"c2g-wb__stack-seg\"\n [style.width.%]=\"e.pct\"\n [style.background]=\"e.color\"\n [title]=\"e.category + ': ' + (e.pct | number:'1.0-1') + '%'\"\n ></div>\n }\n </div>\n\n <!-- Legend rows -->\n <ul class=\"c2g-wb__legend\" role=\"list\">\n @for (e of entries(); track e.category) {\n <li class=\"c2g-wb__row\">\n <span class=\"c2g-wb__dot\" [style.background]=\"e.color\"></span>\n <span class=\"c2g-wb__cat\">{{ e.category }}</span>\n <div class=\"c2g-wb__bar-track\">\n <div class=\"c2g-wb__bar-fill\" [style.width.%]=\"e.pct\" [style.background]=\"e.color\"></div>\n </div>\n <span class=\"c2g-wb__pct\">{{ e.pct | number:'1.0-1' }}%</span>\n <span class=\"c2g-wb__weight\">{{ formatKg(e.weightG) }}</span>\n </li>\n }\n </ul>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-wb{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-wb:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-wb__header{display:flex;align-items:center;gap:8px}.c2g-wb__icon{font-size:1.25rem;line-height:1}.c2g-wb__titles{display:flex;flex-direction:column;gap:2px}.c2g-wb__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wb__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-wb__stacked{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:1px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-wb__stack-seg{height:100%;min-width:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wb__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.c2g-wb__row{display:grid;grid-template-columns:10px 100px 1fr 36px 72px;align-items:center;gap:8px}.c2g-wb__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.c2g-wb__cat{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-wb__bar-track{height:5px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-wb__bar-fill{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wb__pct{font-size:.72rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;text-align:right}.c2g-wb__weight{font-size:.72rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:right;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2597
2597
|
}
|
|
2598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: WeightBreakdownWidgetComponent, decorators: [{
|
|
2599
2599
|
type: Component,
|
|
2600
2600
|
args: [{ selector: 'c2g-weight-breakdown-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-wb\">\n <header class=\"c2g-wb__header\">\n <span class=\"c2g-wb__icon\">\uD83C\uDFCB\uFE0F</span>\n <div class=\"c2g-wb__titles\">\n <h3 class=\"c2g-wb__title\">Gewichts-Breakdown</h3>\n <span class=\"c2g-wb__sub\">{{ totalKg() }} kg gesamt</span>\n </div>\n </header>\n\n <!-- Stacked horizontal bar -->\n <div class=\"c2g-wb__stacked\" aria-hidden=\"true\">\n @for (e of entries(); track e.category) {\n <div\n class=\"c2g-wb__stack-seg\"\n [style.width.%]=\"e.pct\"\n [style.background]=\"e.color\"\n [title]=\"e.category + ': ' + (e.pct | number:'1.0-1') + '%'\"\n ></div>\n }\n </div>\n\n <!-- Legend rows -->\n <ul class=\"c2g-wb__legend\" role=\"list\">\n @for (e of entries(); track e.category) {\n <li class=\"c2g-wb__row\">\n <span class=\"c2g-wb__dot\" [style.background]=\"e.color\"></span>\n <span class=\"c2g-wb__cat\">{{ e.category }}</span>\n <div class=\"c2g-wb__bar-track\">\n <div class=\"c2g-wb__bar-fill\" [style.width.%]=\"e.pct\" [style.background]=\"e.color\"></div>\n </div>\n <span class=\"c2g-wb__pct\">{{ e.pct | number:'1.0-1' }}%</span>\n <span class=\"c2g-wb__weight\">{{ formatKg(e.weightG) }}</span>\n </li>\n }\n </ul>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-wb{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-wb:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-wb__header{display:flex;align-items:center;gap:8px}.c2g-wb__icon{font-size:1.25rem;line-height:1}.c2g-wb__titles{display:flex;flex-direction:column;gap:2px}.c2g-wb__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-wb__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-wb__stacked{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:1px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-wb__stack-seg{height:100%;min-width:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wb__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.c2g-wb__row{display:grid;grid-template-columns:10px 100px 1fr 36px 72px;align-items:center;gap:8px}.c2g-wb__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.c2g-wb__cat{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-wb__bar-track{height:5px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-wb__bar-fill{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-wb__pct{font-size:.72rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums;text-align:right}.c2g-wb__weight{font-size:.72rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:right;font-variant-numeric:tabular-nums}\n"] }]
|
|
2601
|
-
}]
|
|
2601
|
+
}] });
|
|
2602
2602
|
|
|
2603
2603
|
class AdventureScoreWidgetComponent {
|
|
2604
2604
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2664,13 +2664,13 @@ class AdventureScoreWidgetComponent {
|
|
|
2664
2664
|
return d;
|
|
2665
2665
|
}, ...(ngDevMode ? [{ debugName: "sparklinePath" }] : []));
|
|
2666
2666
|
ngOnDestroy() { cancelAnimationFrame(this.raf); }
|
|
2667
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2667
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdventureScoreWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2668
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AdventureScoreWidgetComponent, isStandalone: true, selector: "c2g-adventure-score-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-as\">\n <header class=\"c2g-as__header\">\n <span class=\"c2g-as__icon\">\uD83C\uDFC6</span>\n <div class=\"c2g-as__titles\">\n <h3 class=\"c2g-as__title\">Abenteuer-Score</h3>\n <span class=\"c2g-as__level-label\">{{ data().levelLabel }}</span>\n </div>\n @if (sparklinePath(); as sp) {\n <svg class=\"c2g-as__sparkline\" viewBox=\"0 0 120 28\" aria-hidden=\"true\">\n <path [attr.d]=\"sp\" [style.stroke]=\"levelColor()\" class=\"c2g-as__spark-line\"/>\n </svg>\n }\n </header>\n\n <div class=\"c2g-as__body\">\n <!-- Circular progress -->\n <div class=\"c2g-as__circle-wrap\" aria-hidden=\"true\">\n <svg class=\"c2g-as__circle\" viewBox=\"0 0 120 120\">\n <path class=\"c2g-as__track\" [attr.d]=\"trackPath\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"/>\n <path class=\"c2g-as__arc\" [attr.d]=\"arcPath()\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"\n [style.stroke]=\"levelColor()\"/>\n </svg>\n <div class=\"c2g-as__center\">\n <span class=\"c2g-as__score\" [style.color]=\"levelColor()\">{{ displayScore() }}</span>\n <span class=\"c2g-as__score-max\">/100</span>\n </div>\n </div>\n\n <!-- Stats -->\n <div class=\"c2g-as__stats\">\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalTours }}</span>\n <span class=\"c2g-as__stat-label\">Touren</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalKm | number:'1.0-0' }}</span>\n <span class=\"c2g-as__stat-label\">km</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalNights }}</span>\n <span class=\"c2g-as__stat-label\">N\u00E4chte</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().uniqueTypes }}</span>\n <span class=\"c2g-as__stat-label\">Typen</span>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-as{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-as:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-as__header{display:flex;align-items:flex-start;gap:8px}.c2g-as__icon{font-size:1.375rem;line-height:1}.c2g-as__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-as__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-as__level-label{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-as__sparkline{width:80px;height:28px;flex-shrink:0}.c2g-as__spark-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;stroke:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-as__body{display:flex;gap:16px;align-items:center}.c2g-as__circle-wrap{position:relative;width:120px;height:120px;flex-shrink:0}.c2g-as__circle{width:100%;height:100%;display:block}.c2g-as__track{stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-as__arc{transition:d .9s cubic-bezier(.4,0,.2,1)}.c2g-as__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.c2g-as__score{font-size:2.25rem;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.c2g-as__score-max{font-size:.75rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-as__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}.c2g-as__stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-as__stat-val{font-size:1.25rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1}.c2g-as__stat-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2669
2669
|
}
|
|
2670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdventureScoreWidgetComponent, decorators: [{
|
|
2671
2671
|
type: Component,
|
|
2672
2672
|
args: [{ selector: 'c2g-adventure-score-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-as\">\n <header class=\"c2g-as__header\">\n <span class=\"c2g-as__icon\">\uD83C\uDFC6</span>\n <div class=\"c2g-as__titles\">\n <h3 class=\"c2g-as__title\">Abenteuer-Score</h3>\n <span class=\"c2g-as__level-label\">{{ data().levelLabel }}</span>\n </div>\n @if (sparklinePath(); as sp) {\n <svg class=\"c2g-as__sparkline\" viewBox=\"0 0 120 28\" aria-hidden=\"true\">\n <path [attr.d]=\"sp\" [style.stroke]=\"levelColor()\" class=\"c2g-as__spark-line\"/>\n </svg>\n }\n </header>\n\n <div class=\"c2g-as__body\">\n <!-- Circular progress -->\n <div class=\"c2g-as__circle-wrap\" aria-hidden=\"true\">\n <svg class=\"c2g-as__circle\" viewBox=\"0 0 120 120\">\n <path class=\"c2g-as__track\" [attr.d]=\"trackPath\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"/>\n <path class=\"c2g-as__arc\" [attr.d]=\"arcPath()\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"\n [style.stroke]=\"levelColor()\"/>\n </svg>\n <div class=\"c2g-as__center\">\n <span class=\"c2g-as__score\" [style.color]=\"levelColor()\">{{ displayScore() }}</span>\n <span class=\"c2g-as__score-max\">/100</span>\n </div>\n </div>\n\n <!-- Stats -->\n <div class=\"c2g-as__stats\">\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalTours }}</span>\n <span class=\"c2g-as__stat-label\">Touren</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalKm | number:'1.0-0' }}</span>\n <span class=\"c2g-as__stat-label\">km</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().totalNights }}</span>\n <span class=\"c2g-as__stat-label\">N\u00E4chte</span>\n </div>\n <div class=\"c2g-as__stat\">\n <span class=\"c2g-as__stat-val\">{{ data().uniqueTypes }}</span>\n <span class=\"c2g-as__stat-label\">Typen</span>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-as{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-as:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-as__header{display:flex;align-items:flex-start;gap:8px}.c2g-as__icon{font-size:1.375rem;line-height:1}.c2g-as__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-as__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-as__level-label{font-size:.8rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-as__sparkline{width:80px;height:28px;flex-shrink:0}.c2g-as__spark-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;stroke:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-as__body{display:flex;gap:16px;align-items:center}.c2g-as__circle-wrap{position:relative;width:120px;height:120px;flex-shrink:0}.c2g-as__circle{width:100%;height:100%;display:block}.c2g-as__track{stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-as__arc{transition:d .9s cubic-bezier(.4,0,.2,1)}.c2g-as__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.c2g-as__score{font-size:2.25rem;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.c2g-as__score-max{font-size:.75rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-as__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}.c2g-as__stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-as__stat-val{font-size:1.25rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1}.c2g-as__stat-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}\n"] }]
|
|
2673
|
-
}], ctorParameters: () => []
|
|
2673
|
+
}], ctorParameters: () => [] });
|
|
2674
2674
|
|
|
2675
2675
|
class TopGearWidgetComponent {
|
|
2676
2676
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2682,13 +2682,13 @@ class TopGearWidgetComponent {
|
|
|
2682
2682
|
medal(index) {
|
|
2683
2683
|
return ['🥇', '🥈', '🥉', '', ''][index] ?? '';
|
|
2684
2684
|
}
|
|
2685
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2685
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TopGearWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TopGearWidgetComponent, isStandalone: true, selector: "c2g-top-gear-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-tg\">\n <header class=\"c2g-tg__header\">\n <span class=\"c2g-tg__icon\">\uD83C\uDF92</span>\n <h3 class=\"c2g-tg__title\">Top-Gear</h3>\n </header>\n\n <ol class=\"c2g-tg__list\" role=\"list\">\n @for (entry of top(); track entry.name; let i = $index) {\n <li class=\"c2g-tg__item\" [class.c2g-tg__item--top3]=\"i < 3\">\n <span class=\"c2g-tg__rank\">\n @if (medal(i)) { {{ medal(i) }} } @else { {{ i + 1 }} }\n </span>\n <div class=\"c2g-tg__info\">\n <span class=\"c2g-tg__name\">{{ entry.name }}</span>\n @if (entry.category) {\n <span class=\"c2g-tg__cat\">{{ entry.category }}</span>\n }\n </div>\n <div class=\"c2g-tg__bar-track\">\n <div class=\"c2g-tg__bar-fill\" [style.width.%]=\"usagePct(entry.usageCount)\"></div>\n </div>\n <span class=\"c2g-tg__count\">{{ entry.usageCount }}\u00D7</span>\n </li>\n }\n </ol>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tg{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-tg:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tg__header{display:flex;align-items:center;gap:8px}.c2g-tg__icon{font-size:1.25rem;line-height:1}.c2g-tg__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tg__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:gear}.c2g-tg__item{display:grid;grid-template-columns:28px 1fr 1fr 36px;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-tg__item--top3{background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-tg__rank{font-size:1rem;text-align:center}.c2g-tg__info{display:flex;flex-direction:column;gap:1px;overflow:hidden}.c2g-tg__name{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-tg__cat{font-size:.65rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tg__bar-track{height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-tg__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-tg__count{font-size:.8rem;font-weight:800;text-align:right;color:var(--c2g-theme-primary, var(--c2g-color-primary));font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2687
2687
|
}
|
|
2688
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TopGearWidgetComponent, decorators: [{
|
|
2689
2689
|
type: Component,
|
|
2690
2690
|
args: [{ selector: 'c2g-top-gear-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-tg\">\n <header class=\"c2g-tg__header\">\n <span class=\"c2g-tg__icon\">\uD83C\uDF92</span>\n <h3 class=\"c2g-tg__title\">Top-Gear</h3>\n </header>\n\n <ol class=\"c2g-tg__list\" role=\"list\">\n @for (entry of top(); track entry.name; let i = $index) {\n <li class=\"c2g-tg__item\" [class.c2g-tg__item--top3]=\"i < 3\">\n <span class=\"c2g-tg__rank\">\n @if (medal(i)) { {{ medal(i) }} } @else { {{ i + 1 }} }\n </span>\n <div class=\"c2g-tg__info\">\n <span class=\"c2g-tg__name\">{{ entry.name }}</span>\n @if (entry.category) {\n <span class=\"c2g-tg__cat\">{{ entry.category }}</span>\n }\n </div>\n <div class=\"c2g-tg__bar-track\">\n <div class=\"c2g-tg__bar-fill\" [style.width.%]=\"usagePct(entry.usageCount)\"></div>\n </div>\n <span class=\"c2g-tg__count\">{{ entry.usageCount }}\u00D7</span>\n </li>\n }\n </ol>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tg{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-tg:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-tg__header{display:flex;align-items:center;gap:8px}.c2g-tg__icon{font-size:1.25rem;line-height:1}.c2g-tg__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tg__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:gear}.c2g-tg__item{display:grid;grid-template-columns:28px 1fr 1fr 36px;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--c2g-radius-md, 10px);background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-tg__item--top3{background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-tg__rank{font-size:1rem;text-align:center}.c2g-tg__info{display:flex;flex-direction:column;gap:1px;overflow:hidden}.c2g-tg__name{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-tg__cat{font-size:.65rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-tg__bar-track{height:6px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-tg__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-tg__count{font-size:.8rem;font-weight:800;text-align:right;color:var(--c2g-theme-primary, var(--c2g-color-primary));font-variant-numeric:tabular-nums}\n"] }]
|
|
2691
|
-
}]
|
|
2691
|
+
}] });
|
|
2692
2692
|
|
|
2693
2693
|
class GroupActivityWidgetComponent {
|
|
2694
2694
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2716,13 +2716,13 @@ class GroupActivityWidgetComponent {
|
|
|
2716
2716
|
return 0;
|
|
2717
2717
|
return Math.round((m.completedItems / m.totalItems) * 100);
|
|
2718
2718
|
}
|
|
2719
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupActivityWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GroupActivityWidgetComponent, isStandalone: true, selector: "c2g-group-activity-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-ga\">\n <header class=\"c2g-ga__header\">\n <span class=\"c2g-ga__icon\">\uD83C\uDFC5</span>\n <div class=\"c2g-ga__titles\">\n <h3 class=\"c2g-ga__title\">Aktivste Mitglieder</h3>\n @if (data().groupName) {\n <span class=\"c2g-ga__sub\">{{ data().groupName }}</span>\n }\n </div>\n </header>\n\n <ol class=\"c2g-ga__list\" role=\"list\">\n @for (m of ranked(); track m.name) {\n <li class=\"c2g-ga__item\" [class.c2g-ga__item--self]=\"m.isSelf\">\n <!-- Avatar -->\n <div class=\"c2g-ga__avatar\">\n @if (m.avatarUrl) {\n <img [src]=\"m.avatarUrl\" [alt]=\"m.name\" class=\"c2g-ga__avatar-img\"/>\n } @else {\n <span class=\"c2g-ga__initials\">{{ m.initials }}</span>\n }\n @if (medal(m.rank)) {\n <span class=\"c2g-ga__medal\">{{ medal(m.rank) }}</span>\n }\n </div>\n\n <div class=\"c2g-ga__info\">\n <span class=\"c2g-ga__name\">{{ m.name }}{{ m.isSelf ? ' (du)' : '' }}</span>\n <div class=\"c2g-ga__bar-track\">\n <div class=\"c2g-ga__bar-fill\" [style.width.%]=\"m.pct\"></div>\n </div>\n </div>\n\n <div class=\"c2g-ga__nums\">\n <span class=\"c2g-ga__completed\">{{ m.completedItems }}</span>\n @if (m.totalItems) {\n <span class=\"c2g-ga__total\">/ {{ m.totalItems }}</span>\n }\n </div>\n </li>\n }\n </ol>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ga{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-ga:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-ga__header{display:flex;align-items:center;gap:8px}.c2g-ga__icon{font-size:1.25rem;line-height:1}.c2g-ga__titles{display:flex;flex-direction:column;gap:2px}.c2g-ga__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ga__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-ga__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.c2g-ga__item{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px}.c2g-ga__item--self{background:var(--c2g-color-primary-light, #fff4f0);border-radius:var(--c2g-radius-md, 10px);padding:4px 8px}.c2g-ga__avatar{position:relative;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));display:flex;align-items:center;justify-content:center;overflow:visible}.c2g-ga__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.c2g-ga__initials{font-size:.75rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-ga__medal{position:absolute;bottom:-4px;right:-4px;font-size:.75rem;line-height:1}.c2g-ga__info{display:flex;flex-direction:column;gap:4px;overflow:hidden}.c2g-ga__name{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ga__bar-track{height:5px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-ga__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-ga__nums{display:flex;align-items:baseline;gap:2px}.c2g-ga__completed{font-size:1rem;font-weight:900;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-ga__total{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2721
2721
|
}
|
|
2722
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GroupActivityWidgetComponent, decorators: [{
|
|
2723
2723
|
type: Component,
|
|
2724
2724
|
args: [{ selector: 'c2g-group-activity-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-ga\">\n <header class=\"c2g-ga__header\">\n <span class=\"c2g-ga__icon\">\uD83C\uDFC5</span>\n <div class=\"c2g-ga__titles\">\n <h3 class=\"c2g-ga__title\">Aktivste Mitglieder</h3>\n @if (data().groupName) {\n <span class=\"c2g-ga__sub\">{{ data().groupName }}</span>\n }\n </div>\n </header>\n\n <ol class=\"c2g-ga__list\" role=\"list\">\n @for (m of ranked(); track m.name) {\n <li class=\"c2g-ga__item\" [class.c2g-ga__item--self]=\"m.isSelf\">\n <!-- Avatar -->\n <div class=\"c2g-ga__avatar\">\n @if (m.avatarUrl) {\n <img [src]=\"m.avatarUrl\" [alt]=\"m.name\" class=\"c2g-ga__avatar-img\"/>\n } @else {\n <span class=\"c2g-ga__initials\">{{ m.initials }}</span>\n }\n @if (medal(m.rank)) {\n <span class=\"c2g-ga__medal\">{{ medal(m.rank) }}</span>\n }\n </div>\n\n <div class=\"c2g-ga__info\">\n <span class=\"c2g-ga__name\">{{ m.name }}{{ m.isSelf ? ' (du)' : '' }}</span>\n <div class=\"c2g-ga__bar-track\">\n <div class=\"c2g-ga__bar-fill\" [style.width.%]=\"m.pct\"></div>\n </div>\n </div>\n\n <div class=\"c2g-ga__nums\">\n <span class=\"c2g-ga__completed\">{{ m.completedItems }}</span>\n @if (m.totalItems) {\n <span class=\"c2g-ga__total\">/ {{ m.totalItems }}</span>\n }\n </div>\n </li>\n }\n </ol>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ga{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-ga:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-ga__header{display:flex;align-items:center;gap:8px}.c2g-ga__icon{font-size:1.25rem;line-height:1}.c2g-ga__titles{display:flex;flex-direction:column;gap:2px}.c2g-ga__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ga__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-ga__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.c2g-ga__item{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px}.c2g-ga__item--self{background:var(--c2g-color-primary-light, #fff4f0);border-radius:var(--c2g-radius-md, 10px);padding:4px 8px}.c2g-ga__avatar{position:relative;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));display:flex;align-items:center;justify-content:center;overflow:visible}.c2g-ga__avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}.c2g-ga__initials{font-size:.75rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-ga__medal{position:absolute;bottom:-4px;right:-4px;font-size:.75rem;line-height:1}.c2g-ga__info{display:flex;flex-direction:column;gap:4px;overflow:hidden}.c2g-ga__name{font-size:.8125rem;font-weight:700;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ga__bar-track{height:5px;border-radius:3px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));overflow:hidden}.c2g-ga__bar-fill{height:100%;border-radius:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:width .7s cubic-bezier(.4,0,.2,1)}.c2g-ga__nums{display:flex;align-items:baseline;gap:2px}.c2g-ga__completed{font-size:1rem;font-weight:900;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums}.c2g-ga__total{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));font-variant-numeric:tabular-nums}\n"] }]
|
|
2725
|
-
}]
|
|
2725
|
+
}] });
|
|
2726
2726
|
|
|
2727
2727
|
class GearSharingWidgetComponent {
|
|
2728
2728
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2770,13 +2770,13 @@ class GearSharingWidgetComponent {
|
|
|
2770
2770
|
return `M ${cx} ${cy - r} A ${r} ${r} 0 ${large} 1 ${x} ${y}`;
|
|
2771
2771
|
}, ...(ngDevMode ? [{ debugName: "arcPath" }] : []));
|
|
2772
2772
|
ngOnDestroy() { cancelAnimationFrame(this.raf); }
|
|
2773
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2773
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GearSharingWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: GearSharingWidgetComponent, isStandalone: true, selector: "c2g-gear-sharing-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-gs\" [class]=\"'c2g-gs--' + tier()\">\n <header class=\"c2g-gs__header\">\n <span class=\"c2g-gs__icon\">\uD83E\uDD1D</span>\n <div class=\"c2g-gs__titles\">\n <h3 class=\"c2g-gs__title\">Gear-Sharing</h3>\n <span class=\"c2g-gs__sub\">{{ data().memberCount }} Mitglieder</span>\n </div>\n </header>\n\n <div class=\"c2g-gs__body\">\n <div class=\"c2g-gs__circle-wrap\" aria-hidden=\"true\">\n <svg class=\"c2g-gs__circle\" viewBox=\"0 0 104 104\">\n <circle cx=\"52\" cy=\"52\" r=\"44\" class=\"c2g-gs__track\" fill=\"none\" stroke-width=\"10\"/>\n <path class=\"c2g-gs__arc\" [attr.d]=\"arcPath()\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"/>\n </svg>\n <div class=\"c2g-gs__center\">\n <span class=\"c2g-gs__pct\">{{ displayPct() }}%</span>\n <span class=\"c2g-gs__pct-label\">geteilt</span>\n </div>\n </div>\n\n <div class=\"c2g-gs__stats\">\n <div class=\"c2g-gs__stat\">\n <span class=\"c2g-gs__stat-val\">{{ data().sharedItems }}</span>\n <span class=\"c2g-gs__stat-label\">geteilt</span>\n </div>\n <div class=\"c2g-gs__stat\">\n <span class=\"c2g-gs__stat-val\">{{ data().totalItems - data().sharedItems }}</span>\n <span class=\"c2g-gs__stat-label\">eigene</span>\n </div>\n @if (data().savedWeightPerPersonG) {\n <div class=\"c2g-gs__stat c2g-gs__stat--highlight\">\n <span class=\"c2g-gs__stat-val\">{{ (data().savedWeightPerPersonG! / 1000) | number:'1.1-1' }} kg</span>\n <span class=\"c2g-gs__stat-label\">gespart/Person</span>\n </div>\n }\n </div>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gs{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gs:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-gs--high{--gs-color: #22c55e}.c2g-gs--medium{--gs-color: #f59e0b}.c2g-gs--low{--gs-color: #94a3b8}.c2g-gs__header{display:flex;align-items:center;gap:8px}.c2g-gs__icon{font-size:1.25rem;line-height:1}.c2g-gs__titles{display:flex;flex-direction:column;gap:2px}.c2g-gs__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-gs__body{display:flex;gap:16px;align-items:center}.c2g-gs__circle-wrap{position:relative;width:104px;height:104px;flex-shrink:0}.c2g-gs__circle{width:100%;height:100%;display:block}.c2g-gs__track{stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-gs__arc{stroke:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)));transition:d .9s cubic-bezier(.4,0,.2,1)}.c2g-gs__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.c2g-gs__pct{font-size:1.75rem;font-weight:900;color:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)));font-variant-numeric:tabular-nums;line-height:1}.c2g-gs__pct-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__stats{flex:1;display:flex;flex-direction:column;gap:8px}.c2g-gs__stat{display:flex;flex-direction:column;gap:1px}.c2g-gs__stat-val{font-size:1.125rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1}.c2g-gs__stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__stat--highlight .c2g-gs__stat-val{color:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2775
2775
|
}
|
|
2776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2776
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: GearSharingWidgetComponent, decorators: [{
|
|
2777
2777
|
type: Component,
|
|
2778
2778
|
args: [{ selector: 'c2g-gear-sharing-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-gs\" [class]=\"'c2g-gs--' + tier()\">\n <header class=\"c2g-gs__header\">\n <span class=\"c2g-gs__icon\">\uD83E\uDD1D</span>\n <div class=\"c2g-gs__titles\">\n <h3 class=\"c2g-gs__title\">Gear-Sharing</h3>\n <span class=\"c2g-gs__sub\">{{ data().memberCount }} Mitglieder</span>\n </div>\n </header>\n\n <div class=\"c2g-gs__body\">\n <div class=\"c2g-gs__circle-wrap\" aria-hidden=\"true\">\n <svg class=\"c2g-gs__circle\" viewBox=\"0 0 104 104\">\n <circle cx=\"52\" cy=\"52\" r=\"44\" class=\"c2g-gs__track\" fill=\"none\" stroke-width=\"10\"/>\n <path class=\"c2g-gs__arc\" [attr.d]=\"arcPath()\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"round\"/>\n </svg>\n <div class=\"c2g-gs__center\">\n <span class=\"c2g-gs__pct\">{{ displayPct() }}%</span>\n <span class=\"c2g-gs__pct-label\">geteilt</span>\n </div>\n </div>\n\n <div class=\"c2g-gs__stats\">\n <div class=\"c2g-gs__stat\">\n <span class=\"c2g-gs__stat-val\">{{ data().sharedItems }}</span>\n <span class=\"c2g-gs__stat-label\">geteilt</span>\n </div>\n <div class=\"c2g-gs__stat\">\n <span class=\"c2g-gs__stat-val\">{{ data().totalItems - data().sharedItems }}</span>\n <span class=\"c2g-gs__stat-label\">eigene</span>\n </div>\n @if (data().savedWeightPerPersonG) {\n <div class=\"c2g-gs__stat c2g-gs__stat--highlight\">\n <span class=\"c2g-gs__stat-val\">{{ (data().savedWeightPerPersonG! / 1000) | number:'1.1-1' }} kg</span>\n <span class=\"c2g-gs__stat-label\">gespart/Person</span>\n </div>\n }\n </div>\n </div>\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-gs{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s ease,transform .2s ease}.c2g-gs:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-gs--high{--gs-color: #22c55e}.c2g-gs--medium{--gs-color: #f59e0b}.c2g-gs--low{--gs-color: #94a3b8}.c2g-gs__header{display:flex;align-items:center;gap:8px}.c2g-gs__icon{font-size:1.25rem;line-height:1}.c2g-gs__titles{display:flex;flex-direction:column;gap:2px}.c2g-gs__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-gs__body{display:flex;gap:16px;align-items:center}.c2g-gs__circle-wrap{position:relative;width:104px;height:104px;flex-shrink:0}.c2g-gs__circle{width:100%;height:100%;display:block}.c2g-gs__track{stroke:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-gs__arc{stroke:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)));transition:d .9s cubic-bezier(.4,0,.2,1)}.c2g-gs__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.c2g-gs__pct{font-size:1.75rem;font-weight:900;color:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)));font-variant-numeric:tabular-nums;line-height:1}.c2g-gs__pct-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__stats{flex:1;display:flex;flex-direction:column;gap:8px}.c2g-gs__stat{display:flex;flex-direction:column;gap:1px}.c2g-gs__stat-val{font-size:1.125rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;line-height:1}.c2g-gs__stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-gs__stat--highlight .c2g-gs__stat-val{color:var(--gs-color, var(--c2g-theme-primary, var(--c2g-color-primary)))}\n"] }]
|
|
2779
|
-
}], ctorParameters: () => []
|
|
2779
|
+
}], ctorParameters: () => [] });
|
|
2780
2780
|
|
|
2781
2781
|
class AdventureRadiusWidgetComponent {
|
|
2782
2782
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2811,13 +2811,13 @@ class AdventureRadiusWidgetComponent {
|
|
|
2811
2811
|
default: return 'Heimatverbunden';
|
|
2812
2812
|
}
|
|
2813
2813
|
}, ...(ngDevMode ? [{ debugName: "tierLabel" }] : []));
|
|
2814
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2814
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdventureRadiusWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: AdventureRadiusWidgetComponent, isStandalone: true, selector: "c2g-adventure-radius-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"c2g-ar\">\n <header class=\"c2g-ar__header\">\n <span class=\"c2g-ar__icon\">{{ tierEmoji() }}</span>\n <div class=\"c2g-ar__titles\">\n <h3 class=\"c2g-ar__title\">Abenteuer-Radius</h3>\n @if (data().homeLabel) {\n <span class=\"c2g-ar__sub\">ab {{ data().homeLabel }}</span>\n }\n </div>\n <span class=\"c2g-ar__tier-badge c2g-ar__tier-badge--{{ radiusTier() }}\">\n {{ tierLabel() }}\n </span>\n </header>\n\n <div class=\"c2g-ar__hero\">\n <div class=\"c2g-ar__stat\">\n <span class=\"c2g-ar__val\">{{ data().avgRadiusKm | number:'1.0-0' }}</span>\n <span class=\"c2g-ar__unit\">km</span>\n <span class=\"c2g-ar__label\">\u00D8 Radius</span>\n </div>\n <div class=\"c2g-ar__divider\"></div>\n <div class=\"c2g-ar__stat\">\n <span class=\"c2g-ar__val\">{{ data().maxRadiusKm | number:'1.0-0' }}</span>\n <span class=\"c2g-ar__unit\">km</span>\n <span class=\"c2g-ar__label\">Maximum</span>\n </div>\n </div>\n\n @if (data().maxTourName) {\n <div class=\"c2g-ar__max-tour\">\n <span class=\"c2g-ar__max-icon\">\uD83D\uDCCD</span>\n <span class=\"c2g-ar__max-name\">{{ data().maxTourName }}</span>\n </div>\n }\n\n @if (buckets().length) {\n <div class=\"c2g-ar__buckets\">\n @for (b of buckets(); track b.labelKm) {\n <div class=\"c2g-ar__bucket\">\n <div class=\"c2g-ar__bucket-bar-wrap\">\n <div class=\"c2g-ar__bucket-bar\" [style.height.%]=\"bucketPct(b.count)\"></div>\n </div>\n <span class=\"c2g-ar__bucket-label\">{{ b.labelKm }}</span>\n <span class=\"c2g-ar__bucket-count\">{{ b.count }}</span>\n </div>\n }\n </div>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ar{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-ar:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-ar__header{display:flex;align-items:center;gap:8px}.c2g-ar__icon{font-size:1.5rem;line-height:1}.c2g-ar__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-ar__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ar__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-ar__tier-badge{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}.c2g-ar__tier-badge--international{color:#a855f7;background:#a855f71a}.c2g-ar__tier-badge--national{color:#3b82f6;background:#3b82f61a}.c2g-ar__tier-badge--regional{color:#22c55e;background:#22c55e1a}.c2g-ar__tier-badge--local{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-ar__hero{display:flex;align-items:center;gap:0}.c2g-ar__stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.c2g-ar__val{font-size:2.25rem;font-weight:800;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;letter-spacing:-.02em}.c2g-ar__unit{font-size:.875rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-ar__label{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ar__divider{width:1px;height:48px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-ar__max-tour{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-ar__max-icon{font-size:.875rem}.c2g-ar__max-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ar__buckets{display:flex;align-items:flex-end;gap:6px;height:64px;padding-top:4px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-ar__bucket{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}.c2g-ar__bucket-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}.c2g-ar__bucket-bar{width:100%;border-radius:3px 3px 0 0;min-height:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:height .7s cubic-bezier(.4,0,.2,1);opacity:.75}.c2g-ar__bucket-label{font-size:.55rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;white-space:nowrap}.c2g-ar__bucket-count{font-size:.6rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2816
2816
|
}
|
|
2817
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: AdventureRadiusWidgetComponent, decorators: [{
|
|
2818
2818
|
type: Component,
|
|
2819
2819
|
args: [{ selector: 'c2g-adventure-radius-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"c2g-ar\">\n <header class=\"c2g-ar__header\">\n <span class=\"c2g-ar__icon\">{{ tierEmoji() }}</span>\n <div class=\"c2g-ar__titles\">\n <h3 class=\"c2g-ar__title\">Abenteuer-Radius</h3>\n @if (data().homeLabel) {\n <span class=\"c2g-ar__sub\">ab {{ data().homeLabel }}</span>\n }\n </div>\n <span class=\"c2g-ar__tier-badge c2g-ar__tier-badge--{{ radiusTier() }}\">\n {{ tierLabel() }}\n </span>\n </header>\n\n <div class=\"c2g-ar__hero\">\n <div class=\"c2g-ar__stat\">\n <span class=\"c2g-ar__val\">{{ data().avgRadiusKm | number:'1.0-0' }}</span>\n <span class=\"c2g-ar__unit\">km</span>\n <span class=\"c2g-ar__label\">\u00D8 Radius</span>\n </div>\n <div class=\"c2g-ar__divider\"></div>\n <div class=\"c2g-ar__stat\">\n <span class=\"c2g-ar__val\">{{ data().maxRadiusKm | number:'1.0-0' }}</span>\n <span class=\"c2g-ar__unit\">km</span>\n <span class=\"c2g-ar__label\">Maximum</span>\n </div>\n </div>\n\n @if (data().maxTourName) {\n <div class=\"c2g-ar__max-tour\">\n <span class=\"c2g-ar__max-icon\">\uD83D\uDCCD</span>\n <span class=\"c2g-ar__max-name\">{{ data().maxTourName }}</span>\n </div>\n }\n\n @if (buckets().length) {\n <div class=\"c2g-ar__buckets\">\n @for (b of buckets(); track b.labelKm) {\n <div class=\"c2g-ar__bucket\">\n <div class=\"c2g-ar__bucket-bar-wrap\">\n <div class=\"c2g-ar__bucket-bar\" [style.height.%]=\"bucketPct(b.count)\"></div>\n </div>\n <span class=\"c2g-ar__bucket-label\">{{ b.labelKm }}</span>\n <span class=\"c2g-ar__bucket-count\">{{ b.count }}</span>\n </div>\n }\n </div>\n }\n</article>\n", styles: [":host{display:block;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-ar{background:var(--c2g-theme-surface, var(--c2g-color-surface));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));box-shadow:var(--c2g-shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));border-radius:var(--c2g-radius-xl, 20px);padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.c2g-ar:hover{box-shadow:var(--c2g-shadow-lg, 0 8px 28px rgba(0, 0, 0, .11));transform:translateY(-2px)}.c2g-ar__header{display:flex;align-items:center;gap:8px}.c2g-ar__icon{font-size:1.5rem;line-height:1}.c2g-ar__titles{flex:1;display:flex;flex-direction:column;gap:2px}.c2g-ar__title{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ar__sub{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));opacity:.7}.c2g-ar__tier-badge{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}.c2g-ar__tier-badge--international{color:#a855f7;background:#a855f71a}.c2g-ar__tier-badge--national{color:#3b82f6;background:#3b82f61a}.c2g-ar__tier-badge--regional{color:#22c55e;background:#22c55e1a}.c2g-ar__tier-badge--local{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-ar__hero{display:flex;align-items:center;gap:0}.c2g-ar__stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.c2g-ar__val{font-size:2.25rem;font-weight:800;line-height:1;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-variant-numeric:tabular-nums;letter-spacing:-.02em}.c2g-ar__unit{font-size:.875rem;font-weight:700;color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-ar__label{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-ar__divider{width:1px;height:48px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-ar__max-tour{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border-radius:var(--c2g-radius-md, 10px)}.c2g-ar__max-icon{font-size:.875rem}.c2g-ar__max-name{font-size:.8rem;font-weight:600;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c2g-ar__buckets{display:flex;align-items:flex-end;gap:6px;height:64px;padding-top:4px;border-top:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant))}.c2g-ar__bucket{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}.c2g-ar__bucket-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}.c2g-ar__bucket-bar{width:100%;border-radius:3px 3px 0 0;min-height:3px;background:var(--c2g-theme-primary, var(--c2g-color-primary));transition:height .7s cubic-bezier(.4,0,.2,1);opacity:.75}.c2g-ar__bucket-label{font-size:.55rem;font-weight:700;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-align:center;white-space:nowrap}.c2g-ar__bucket-count{font-size:.6rem;font-weight:800;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}\n"] }]
|
|
2820
|
-
}]
|
|
2820
|
+
}] });
|
|
2821
2821
|
|
|
2822
2822
|
class PackProgressWidgetComponent {
|
|
2823
2823
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -2839,13 +2839,13 @@ class PackProgressWidgetComponent {
|
|
|
2839
2839
|
return 'warning';
|
|
2840
2840
|
return 'danger';
|
|
2841
2841
|
}
|
|
2842
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2842
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackProgressWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2843
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PackProgressWidgetComponent, isStandalone: true, selector: "c2g-pack-progress-widget", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-pp\">\n\n <div class=\"c2g-pp__header\">\n <span class=\"c2g-pp__title\">\uD83D\uDCE6 Packfortschritt</span>\n @if (data().tourName) {\n <span class=\"c2g-pp__tour\">{{ data().tourName }}</span>\n }\n <span class=\"c2g-pp__overall\">{{ overallPacked() }}/{{ overallTotal() }}</span>\n </div>\n\n <div class=\"c2g-pp__rows\">\n @for (row of rows(); track row.label) {\n <div class=\"c2g-pp__row\" [class.c2g-pp__row--highlight]=\"row.highlight\">\n\n <div class=\"c2g-pp__row-label\">\n <span class=\"c2g-pp__row-icon\" aria-hidden=\"true\">{{ row.icon }}</span>\n <span class=\"c2g-pp__row-name\">{{ row.label }}</span>\n </div>\n\n <div class=\"c2g-pp__bar-wrap\" [attr.aria-label]=\"row.label + ': ' + row.packed + ' von ' + row.total + ' gepackt'\">\n <div\n class=\"c2g-pp__bar-fill\"\n [class.c2g-pp__bar-fill--success]=\"tone(row) === 'success'\"\n [class.c2g-pp__bar-fill--warning]=\"tone(row) === 'warning'\"\n [class.c2g-pp__bar-fill--danger]=\"tone(row) === 'danger'\"\n [style.width.%]=\"pct(row)\">\n </div>\n </div>\n\n <span\n class=\"c2g-pp__count\"\n [class.c2g-pp__count--success]=\"tone(row) === 'success'\"\n [class.c2g-pp__count--warning]=\"tone(row) === 'warning'\"\n [class.c2g-pp__count--danger]=\"tone(row) === 'danger'\">\n {{ row.packed }}/{{ row.total }}\n </span>\n\n </div>\n }\n </div>\n\n <!-- Overall strip -->\n <div class=\"c2g-pp__strip-track\">\n <div class=\"c2g-pp__strip-fill\" [style.width.%]=\"overallPercent()\"></div>\n </div>\n\n</div>\n", styles: [".c2g-pp{border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:1rem;background:var(--c2g-theme-surface, var(--c2g-color-surface));overflow:hidden;display:grid;gap:0;transition:background var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-pp__header{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem .7rem}.c2g-pp__title{font-weight:700;font-size:.9rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-pp__tour{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-pp__overall{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100));border-radius:99px;padding:.1rem .5rem}.c2g-pp__rows{display:grid;gap:0;padding:0 1rem .75rem}.c2g-pp__row{display:grid;grid-template-columns:7rem 1fr 2.8rem;align-items:center;gap:.65rem;padding:.45rem 0;border-bottom:1px solid var(--c2g-color-outline-variant)}.c2g-pp__row:last-child{border-bottom:0}.c2g-pp__row--highlight{background:color-mix(in srgb,#f59e0b 5%,transparent);border-radius:.5rem;margin:0 -.5rem;padding:.45rem .5rem}.c2g-pp__row--highlight .c2g-pp__row-name{font-weight:600}.c2g-pp__row-label{display:flex;align-items:center;gap:.4rem;min-width:0}.c2g-pp__row-icon{font-size:1rem;line-height:1;flex-shrink:0}.c2g-pp__row-name{font-size:.82rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-pp__bar-wrap{height:.45rem;border-radius:99px;background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100));overflow:hidden}.c2g-pp__bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-pp__bar-fill--success{background:#16a34a}.c2g-pp__bar-fill--warning{background:#f59e0b}.c2g-pp__bar-fill--danger{background:#ef4444}.c2g-pp__count{font-size:.75rem;font-weight:700;text-align:right;white-space:nowrap}.c2g-pp__count--success{color:#16a34a}.c2g-pp__count--warning{color:#d97706}.c2g-pp__count--danger{color:#dc2626}.c2g-pp__strip-track{height:3px;background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100))}.c2g-pp__strip-fill{height:100%;background:var(--c2g-color-secondary-dark, #2d6a4f);transition:width .7s cubic-bezier(.4,0,.2,1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2844
2844
|
}
|
|
2845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PackProgressWidgetComponent, decorators: [{
|
|
2846
2846
|
type: Component,
|
|
2847
2847
|
args: [{ selector: 'c2g-pack-progress-widget', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-pp\">\n\n <div class=\"c2g-pp__header\">\n <span class=\"c2g-pp__title\">\uD83D\uDCE6 Packfortschritt</span>\n @if (data().tourName) {\n <span class=\"c2g-pp__tour\">{{ data().tourName }}</span>\n }\n <span class=\"c2g-pp__overall\">{{ overallPacked() }}/{{ overallTotal() }}</span>\n </div>\n\n <div class=\"c2g-pp__rows\">\n @for (row of rows(); track row.label) {\n <div class=\"c2g-pp__row\" [class.c2g-pp__row--highlight]=\"row.highlight\">\n\n <div class=\"c2g-pp__row-label\">\n <span class=\"c2g-pp__row-icon\" aria-hidden=\"true\">{{ row.icon }}</span>\n <span class=\"c2g-pp__row-name\">{{ row.label }}</span>\n </div>\n\n <div class=\"c2g-pp__bar-wrap\" [attr.aria-label]=\"row.label + ': ' + row.packed + ' von ' + row.total + ' gepackt'\">\n <div\n class=\"c2g-pp__bar-fill\"\n [class.c2g-pp__bar-fill--success]=\"tone(row) === 'success'\"\n [class.c2g-pp__bar-fill--warning]=\"tone(row) === 'warning'\"\n [class.c2g-pp__bar-fill--danger]=\"tone(row) === 'danger'\"\n [style.width.%]=\"pct(row)\">\n </div>\n </div>\n\n <span\n class=\"c2g-pp__count\"\n [class.c2g-pp__count--success]=\"tone(row) === 'success'\"\n [class.c2g-pp__count--warning]=\"tone(row) === 'warning'\"\n [class.c2g-pp__count--danger]=\"tone(row) === 'danger'\">\n {{ row.packed }}/{{ row.total }}\n </span>\n\n </div>\n }\n </div>\n\n <!-- Overall strip -->\n <div class=\"c2g-pp__strip-track\">\n <div class=\"c2g-pp__strip-fill\" [style.width.%]=\"overallPercent()\"></div>\n </div>\n\n</div>\n", styles: [".c2g-pp{border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline-variant));border-radius:1rem;background:var(--c2g-theme-surface, var(--c2g-color-surface));overflow:hidden;display:grid;gap:0;transition:background var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-pp__header{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem .7rem}.c2g-pp__title{font-weight:700;font-size:.9rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));flex:1}.c2g-pp__tour{font-size:.75rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-pp__overall{font-size:.78rem;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100));border-radius:99px;padding:.1rem .5rem}.c2g-pp__rows{display:grid;gap:0;padding:0 1rem .75rem}.c2g-pp__row{display:grid;grid-template-columns:7rem 1fr 2.8rem;align-items:center;gap:.65rem;padding:.45rem 0;border-bottom:1px solid var(--c2g-color-outline-variant)}.c2g-pp__row:last-child{border-bottom:0}.c2g-pp__row--highlight{background:color-mix(in srgb,#f59e0b 5%,transparent);border-radius:.5rem;margin:0 -.5rem;padding:.45rem .5rem}.c2g-pp__row--highlight .c2g-pp__row-name{font-weight:600}.c2g-pp__row-label{display:flex;align-items:center;gap:.4rem;min-width:0}.c2g-pp__row-icon{font-size:1rem;line-height:1;flex-shrink:0}.c2g-pp__row-name{font-size:.82rem;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-pp__bar-wrap{height:.45rem;border-radius:99px;background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100));overflow:hidden}.c2g-pp__bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}.c2g-pp__bar-fill--success{background:#16a34a}.c2g-pp__bar-fill--warning{background:#f59e0b}.c2g-pp__bar-fill--danger{background:#ef4444}.c2g-pp__count{font-size:.75rem;font-weight:700;text-align:right;white-space:nowrap}.c2g-pp__count--success{color:#16a34a}.c2g-pp__count--warning{color:#d97706}.c2g-pp__count--danger{color:#dc2626}.c2g-pp__strip-track{height:3px;background:var(--c2g-theme-surface-container, var(--c2g-color-neutral-100))}.c2g-pp__strip-fill{height:100%;background:var(--c2g-color-secondary-dark, #2d6a4f);transition:width .7s cubic-bezier(.4,0,.2,1)}\n"] }]
|
|
2848
|
-
}]
|
|
2848
|
+
}] });
|
|
2849
2849
|
|
|
2850
2850
|
/**
|
|
2851
2851
|
* Generated bundle index. Do not edit.
|