import { Component, Input } from '@angular/core';
import BaseSection from '../../../sections/BaseSection';
import { CommonModule } from '@angular/common';
import { AnimationDirective } from '../../../directive/animation-directive';
import { BackgroundDirective } from '../../../directive/background-directive';
import { CornerDirective } from '../../../directive/corner-directive';
import { SimpoComponentModule } from '../../../components/index';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { ContentFitDirective } from '../../../directive/content-fit-directive';
import { SpacingHorizontalDirective } from '../../../directive/spacing-horizontal.directive';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/rest.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "../../../components/hover-elements/hover-elements.component";
import * as i5 from "../../../components/delete-hover-element/delete-hover-element.component";
import * as i6 from "ngx-skeleton-loader";
export class StorePageComponent extends BaseSection {
    constructor(restService, activeRoute) {
        super();
        this.restService = restService;
        this.activeRoute = activeRoute;
        this.edit = true;
        this.loading = false;
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        this.activeRoute.queryParams.subscribe(params => {
            if (params['storeId']) {
                this.getStoreDetails(params['storeId']);
            }
        });
    }
    getStoreDetails(storeId) {
        this.loading = true;
        this.restService.getStoreById(storeId).subscribe((res) => {
            this.storeData = res?.data?.data[0];
            this.loading = false;
        }, (err) => {
            console.error('Error fetching store details:', err);
        });
    }
    getTextColor(bgColor) {
        if (bgColor) {
            const threshold = 130; // Adjust this threshold as needed
            const r = parseInt(bgColor.slice(1, 3), 16);
            const g = parseInt(bgColor.slice(3, 5), 16);
            const b = parseInt(bgColor.slice(5, 7), 16);
            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
            return brightness > threshold ? '#000000' : '#ffffff';
        }
        return "#ffffff;";
    }
    getTime(storeHours) {
        if (storeHours == null) {
            return;
        }
        const today = new Date();
        const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
        for (let ele of Object.keys(storeHours)) {
            if (ele == dayName) {
                if (storeHours[ele].isClosed)
                    return 'Closed';
                // if (storeHours[ele].is24Hours)
                //   return 'Open 24 Hours';
                return `${storeHours[ele].openingTime} to ${storeHours[ele].closingTime}`;
            }
        }
        return "";
    }
    removeUnderScore(text) {
        return text?.replaceAll('_', ' ');
    }
    openWhatsapp(phone) {
        if (phone) {
            const message = encodeURIComponent('I want to visit your store');
            const whatsappUrl = `https://wa.me/${phone}?text=${message}`;
            window.open(whatsappUrl, '_blank');
        }
    }
    dialNumber(phone) {
        window.location.href = `tel:${phone}`;
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, deps: [{ token: i1.RestService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\n            <div class=\"col-4 store-img\">\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\n                    [id]=\"data?.id\">\n            </div>\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\n                            </h4>\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\n                                {{storeData?.addressDetails?.pincode}}</p>\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\n                                DIRECTIONS</a>\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\n                                    <path fill=\"#ffffff\"\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                </svg> </button>\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\n                                <mat-icon> phone</mat-icon>\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"mb-3 px-2\">\n                        <h5 class=\"mb-3\">Facilities</h5>\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <div class=\"d-flex align-items-center gap- facility-text\">\n                                <mat-icon\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\n                                <span> {{getTime(storeData?.storeHours)}}\n                                </span>\n                            </div>\n                            <div class=\"facility-text align-content-center\"\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\n                        </div>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\n            <!-- Image skeleton -->\n            <div class=\"col-4 store-img\">\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                'background-color': '#f0f0f0',\n                'border-radius': '8px',\n                'height': '100%',\n                'width': '100%'\n              }\">\n                </ngx-skeleton-loader>\n            </div>\n        \n            <!-- Details skeleton -->\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <!-- Store info skeleton -->\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <!-- Store name -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '60%',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- Address lines -->\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '80%',\n                      'margin-bottom': '4px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- View directions link -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '40%',\n                      'margin-top': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n        \n                        <!-- Action buttons skeleton -->\n                        <div class=\"d-flex gap-2\">\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '33px',\n                      'width': '30px',\n                      'margin-right': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Facilities section skeleton -->\n                    <div class=\"mb-3 px-2\">\n                        <!-- Facilities title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '25%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Facilities items -->\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '120px',\n                      'margin-right': '12px',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Walk-in services section skeleton -->\n                    <div class=\"px-2 mb-2\">\n                        <!-- Services title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '30%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Service cards -->\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\n                                <div class=\"h-100 py-2\">\n                                    <!-- Service type -->\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '16px',\n                          'width': '80%',\n                          'margin-bottom': '8px'\n                        }\">\n                                    </ngx-skeleton-loader>\n        \n                                    <!-- Service description -->\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '14px',\n                          'width': '100%',\n                          'margin-bottom': '4px'\n                        }\">\n                                    </ngx-skeleton-loader>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n\n\n    </div>\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-store-page', standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatIcon,
                        SimpoComponentModule,
                        AnimationDirective,
                        BackgroundDirective,
                        CornerDirective,
                        HoverDirective,
                        ButtonDirectiveDirective,
                        ContentFitDirective,
                        SpacingHorizontalDirective,
                        MatIcon,
                        NgxSkeletonLoaderModule
                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\n            <div class=\"col-4 store-img\">\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\n                    [id]=\"data?.id\">\n            </div>\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\n                            </h4>\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\n                                {{storeData?.addressDetails?.pincode}}</p>\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\n                                DIRECTIONS</a>\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\n                                    <path fill=\"#ffffff\"\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                </svg> </button>\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\n                                <mat-icon> phone</mat-icon>\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"mb-3 px-2\">\n                        <h5 class=\"mb-3\">Facilities</h5>\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <div class=\"d-flex align-items-center gap- facility-text\">\n                                <mat-icon\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\n                                <span> {{getTime(storeData?.storeHours)}}\n                                </span>\n                            </div>\n                            <div class=\"facility-text align-content-center\"\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\n                        </div>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\n            <!-- Image skeleton -->\n            <div class=\"col-4 store-img\">\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                'background-color': '#f0f0f0',\n                'border-radius': '8px',\n                'height': '100%',\n                'width': '100%'\n              }\">\n                </ngx-skeleton-loader>\n            </div>\n        \n            <!-- Details skeleton -->\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <!-- Store info skeleton -->\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <!-- Store name -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '60%',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- Address lines -->\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '80%',\n                      'margin-bottom': '4px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- View directions link -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '40%',\n                      'margin-top': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n        \n                        <!-- Action buttons skeleton -->\n                        <div class=\"d-flex gap-2\">\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '33px',\n                      'width': '30px',\n                      'margin-right': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Facilities section skeleton -->\n                    <div class=\"mb-3 px-2\">\n                        <!-- Facilities title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '25%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Facilities items -->\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '120px',\n                      'margin-right': '12px',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Walk-in services section skeleton -->\n                    <div class=\"px-2 mb-2\">\n                        <!-- Services title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '30%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Service cards -->\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\n                                <div class=\"h-100 py-2\">\n                                    <!-- Service type -->\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '16px',\n                          'width': '80%',\n                          'margin-bottom': '8px'\n                        }\">\n                                    </ngx-skeleton-loader>\n        \n                                    <!-- Service description -->\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '14px',\n                          'width': '100%',\n                          'margin-bottom': '4px'\n                        }\">\n                                    </ngx-skeleton-loader>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n\n\n    </div>\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"] }]
        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.ActivatedRoute }], propDecorators: { data: [{
                type: Input
            }], edit: [{
                type: Input
            }], customClass: [{
                type: Input
            }], delete: [{
                type: Input
            }], index: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 