@ajuarezso/sui-design-system 0.4.5 → 0.4.6
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.
|
@@ -13964,11 +13964,11 @@ class SuiStoreCard {
|
|
|
13964
13964
|
this.ratingClicked.emit({ id: s.id, name: s.name, logoUrl: s.logoUrl ?? null });
|
|
13965
13965
|
}
|
|
13966
13966
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13967
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#fb9a56 0%,var(--sui-primary-base, #fa7319) 100%)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13967
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13968
13968
|
}
|
|
13969
13969
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, decorators: [{
|
|
13970
13970
|
type: Component,
|
|
13971
|
-
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon], template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#fb9a56 0%,var(--sui-primary-base, #fa7319) 100%)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
|
|
13971
|
+
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon], template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [style.background-image]=\"store().coverUrl ? 'url(' + store().coverUrl + ')' : null\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"#fa7319\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <img [src]=\"store().logoUrl\" [alt]=\"store().name\" (error)=\"$any($event).target.style.display='none'\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver calificaciones del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n </span>\n </button>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--brand-500, #fa7319)\"></sui-icon>\n {{ store().district || '\u2014' }}\n </span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;background:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center}.store__cover--fallback{background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:#c2530b;background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;gap:12px;align-items:flex-start}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-bg-white-0, #fff);border:2px solid var(--sui-bg-white-0, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}\n"] }]
|
|
13972
13972
|
}], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
|
|
13973
13973
|
|
|
13974
13974
|
/**
|
|
@@ -14534,7 +14534,7 @@ class SuiTabChips {
|
|
|
14534
14534
|
nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
|
|
14535
14535
|
}
|
|
14536
14536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:
|
|
14537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14538
14538
|
}
|
|
14539
14539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
|
|
14540
14540
|
type: Component,
|
|
@@ -14543,7 +14543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14543
14543
|
<nav> sticky resuelva contra el scroll container real y no contra el host
|
|
14544
14544
|
(que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
|
|
14545
14545
|
'[class.sui-tab-chips--host-sticky]': 'sticky()',
|
|
14546
|
-
}, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:
|
|
14546
|
+
}, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
|
|
14547
14547
|
}], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
|
|
14548
14548
|
type: ViewChild,
|
|
14549
14549
|
args: ['sentinel']
|