insert property data

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.css

@@ -247,7 +247,7 @@
 .draggable-table-container .resize-handle.resize-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
 .draggable-table-container .resize-handle.resize-se { bottom: -4px; right: -4px; cursor: se-resize; }
 /* Draggable table container (mirrors images) */
-.draggable-table-container { position: absolute; cursor: move; user-select: none; z-index: 1000; border: 2px dashed #667eea; border-radius: 8px; background: #ffffff; }
+.draggable-table-container { position: absolute; cursor: move; user-select: none; z-index: 1000; border: 2px solid transparent; border-radius: 8px; background: #ffffff; }
 .draggable-table-container .resize-handle { opacity: 1; }
 .asgar1-preview .cover-hero { position: relative; height: 180px; overflow: hidden; border-radius: 10px; margin: 12px; background: #222; background-size: cover; background-position: center; }
 .asgar1-preview .cover-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.35)); }
@@ -638,12 +638,315 @@ late particularay
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     border-color: #C0A062;
     background: #ffffff;
+    animation: templateHoverPulse 0.6s ease-in-out;
+}
+
+/* Enhanced hover animation */
+@keyframes templateHoverPulse {
+    0% {
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+    }
+    50% {
+        box-shadow: 0 25px 60px rgba(192, 160, 98, 0.25);
+    }
+    100% {
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    }
+}
+
+/* Additional hover effects for template content */
+.template-card:hover .template-content {
+    transform: translateY(-2px);
+    transition: transform 0.3s ease;
+}
+
+/* Hover effect for template titles */
+.template-card:hover h1,
+.template-card:hover h2,
+.template-card:hover h3 {
+    color: #C0A062;
+    transition: color 0.3s ease;
+}
+
+/* Hover effect for template preview images */
+.template-card:hover .gallery-item,
+.template-card:hover .hero,
+.template-card:hover .p1-image-side,
+.template-card:hover .p2-image,
+.template-card:hover .vision-image {
+    transform: scale(1.05);
+    transition: transform 0.3s ease;
+    filter: brightness(1.1);
+}
+
+/* Hover effect for buttons within templates */
+.template-card:hover .cta-btn,
+.template-card:hover .btn {
+    background: #C0A062 !important;
+    color: white !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.3);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property stats */
+.template-card:hover .stat-item,
+.template-card:hover .feature-item {
+    color: #C0A062;
+    transform: translateX(5px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for amenities and lists */
+.template-card:hover .amenity-item,
+.template-card:hover .amenities-list li {
+    color: #C0A062;
+    transform: translateX(8px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for icons */
+.template-card:hover .fa-solid,
+.template-card:hover .fa-check {
+    color: #C0A062;
+    transform: scale(1.2);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property details */
+.template-card:hover .spec-item,
+.template-card:hover .item {
+    border-left: 3px solid #C0A062;
+    padding-left: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for contact info */
+.template-card:hover .agent-info,
+.template-card:hover .contact-info {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for cover elements */
+.template-card:hover .cover-title,
+.template-card:hover .main-title,
+.template-card:hover .p1-main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for gallery items */
+.template-card:hover .gallery-item span {
+    background: rgba(192, 160, 98, 0.9);
+    color: white;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for page numbers and footers */
+.template-card:hover .page-number,
+.template-card:hover .page-footer-bar {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for newsletter-style template */
+.template-card:hover .newsletter-header h2 {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for modern home template elements */
+.template-card:hover .property-name,
+.template-card:hover .property-address {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for grand oak template */
+.template-card:hover .cover-title,
+.template-card:hover .p1-main-title {
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for vertice template */
+.template-card:hover .main-title {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    transition: text-shadow 0.3s ease;
+}
+
+/* Hover effect for serenity template */
+.template-card:hover .p1-main-title {
+    color: #C0A062;
+    transform: translateY(-2px);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for price displays */
+.template-card:hover .price,
+.template-card:hover .priceDisplay {
+    color: #C0A062;
+    font-weight: 700;
+    transform: scale(1.05);
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for reference IDs */
+.template-card:hover .reference-id,
+.template-card:hover .p1-ref-id {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for collection badges */
+.template-card:hover .collection {
+    background: #C0A062;
+    color: white;
+    padding: 4px 12px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for area displays */
+.template-card:hover .area {
+    color: #C0A062;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for section titles */
+.template-card:hover .section-title {
+    border-bottom: 2px solid #C0A062;
+    padding-bottom: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for description text */
+.template-card:hover .description p,
+.template-card:hover .pull-quote {
+    color: #555;
+    line-height: 1.7;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for pull quotes */
+.template-card:hover .pull-quote {
+    border-left: 4px solid #C0A062;
+    padding-left: 16px;
+    font-style: italic;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for floor plan stats */
+.template-card:hover .floorplan-stats-p5 .stat {
+    background: rgba(192, 160, 98, 0.1);
+    border-radius: 8px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for highlights list */
+.template-card:hover .highlights-list-p6 li {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin: 2px 0;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for property field displays */
+.template-card:hover .property-field {
+    background: rgba(192, 160, 98, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* Hover effect for owner info */
+.template-card:hover .owner-info {
+    background: rgba(192, 160, 98, 0.1);
+    padding: 8px;
+    border-radius: 8px;
+    border-left: 3px solid #C0A062;
+    transition: all 0.3s ease;
 }
 
 .template-card.selected {
     border: 3px solid #000000 !important; /* Black selected border */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     transform: translateY(-6px);
+    animation: selectedPulse 2s ease-in-out infinite;
+}
+
+/* Selected state animation */
+@keyframes selectedPulse {
+    0%, 100% {
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    }
+    50% {
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* Enhanced selected indicator */
+.selected-indicator {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: linear-gradient(135deg, #C0A062, #8B6914);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: 0 4px 12px rgba(192, 160, 98, 0.4);
+    animation: selectedIndicatorBounce 0.6s ease-out;
+    z-index: 10;
+}
+
+@keyframes selectedIndicatorBounce {
+    0% {
+        transform: scale(0) rotate(-180deg);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.2) rotate(-90deg);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+.selected-icon {
+    font-size: 14px;
+    animation: checkmarkPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes checkmarkPulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
 }
 
 /* Template Heights - Masonry Zigzag Layout */
@@ -7376,7 +7679,7 @@ late particularay
 
 .draggable-element:hover,
 .draggable-element.selected {
-    border-color: #C0A062; /* Gold accent theme */
+    border: 2px solid transparent !important; /* Keep transparent border */
     background: rgba(102, 126, 234, 0.1);
     box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
 }
@@ -8233,20 +8536,27 @@ button, .btn, .toolbar-button, .export-pdf-btn {
     z-index: 1000;
     min-width: 100px;
     min-height: 100px;
-    border: 2px dashed #667eea;
-    border-radius: 8px;
-    background: rgba(102, 126, 234, 0.1);
-    padding: 5px;
+    border: none !important;
+    border-radius: 4px;
+    background: transparent;
+    padding: 0;
     transition: all 0.2s ease;
     transform: translate3d(0, 0, 0);
+    box-shadow: none;
+}
+.draggable-image-container img { 
+    display: block; 
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
 }
-.draggable-image-container img { display: block; }
 
 .draggable-image-container:hover {
-    border-color: #764ba2;
-    background: rgba(102, 126, 234, 0.15);
-    transform: translate3d(0, -2px, 0);
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+    border: none !important;
+    background: transparent;
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Minimal frame variant to avoid visual/positional shifts when wrapping existing images */
@@ -8255,9 +8565,9 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 .draggable-image-container.no-frame.dragging { border: none; background: transparent; box-shadow: none; transform: none; }
 
 .draggable-image-container.dragging {
-    border-color: #764ba2;
-    background: rgba(102, 126, 234, 0.2);
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+    border: none !important;
+    background: transparent;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     transform: scale(1.02);
     transition: none;
     z-index: 1001;
@@ -8355,15 +8665,15 @@ button, .btn, .toolbar-button, .export-pdf-btn {
 
 /* Dragging state */
 .draggable-image-container.dragging {
-    border-color: #764ba2;
-    background: rgba(102, 126, 234, 0.2);
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+    border: none !important;
+    background: transparent;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Resizing state */
 .draggable-image-container.resizing {
-    border-color: #ff6b6b;
-    background: rgba(255, 107, 107, 0.1);
+    border: none !important;
+    background: transparent;
 }
 
 /* Text Alignment Section - Fixed Width */
@@ -10128,8 +10438,8 @@ img[draggable="true"] {
 }
 
 .draggable-image-container.selected {
-    border-color: #C0A062; /* Gold accent theme */
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
+    border: none !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .draggable-image-container img {
@@ -10196,7 +10506,7 @@ img[draggable="true"] {
     overflow: hidden;
 }
 .draggable-table-container.selected {
-    border-color: #C0A062; /* Gold accent theme */
+    border: 2px solid transparent !important; /* Keep transparent border */
     box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
 }
 

force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html

@@ -846,37 +846,76 @@
                                 <div class="toolbar-section">
                                     <div class="toolbar-section-title">Insert Property Data</div>
                                     <div class="property-insert-grid">
+                                        <!-- Basic Information -->
                                         <button class="property-insert-btn" onclick={insertPropertyName}
                                             title="Insert Property Name">
                                             Name
                                         </button>
-                                        <button class="property-insert-btn" onclick={insertPropertyPrice}
-                                            title="Insert Property Price">
-                                            Price
+                                        <button class="property-insert-btn" onclick={insertPropertyTitle}
+                                            title="Insert Property Title">
+                                            Title
                                         </button>
                                         <button class="property-insert-btn" onclick={insertPropertyType}
                                             title="Insert Property Type">
                                             Type
                                         </button>
-                                        <button class="property-insert-btn" onclick={insertPropertyBedrooms}
-                                            title="Insert Bedrooms">
-                                            Beds
-                                        </button>
-                                        <button class="property-insert-btn" onclick={insertPropertyBathrooms}
-                                            title="Insert Bathrooms">
-                                            Baths
+                                        
+                                      
+                                        
+                                        <!-- Pricing Information -->
+                                        <button class="property-insert-btn" onclick={insertPropertyPrice}
+                                            title="Insert Property Price">
+                                            Price
                                         </button>
+                                      
+                                     
+                                        
+                                 
                                         <button class="property-insert-btn" onclick={insertPropertySqft}
                                             title="Insert Square Footage">
                                             Sq Ft
                                         </button>
-                                        <button class="property-insert-btn" onclick={insertPropertyAddress} title="Insert Address">
-                                            Address
+                                        <button class="property-insert-btn" onclick={insertPropertyFloor}
+                                            title="Insert Floor">
+                                            Floor
                                         </button>
-                                        <button class="property-insert-btn" onclick={insertPropertyDescription}
-                                            title="Insert Description">
-                                            Description
+                                        <button class="property-insert-btn" onclick={insertPropertyBuildYear}
+                                            title="Insert Build Year">
+                                            Year
                                         </button>
+                                        <button class="property-insert-btn" onclick={insertPropertyParking}
+                                            title="Insert Parking">
+                                            Parking
+                                        </button>
+                                        <button class="property-insert-btn" onclick={insertPropertyFurnished}
+                                            title="Insert Furnished Status">
+                                            Furnished
+                                        </button>
+                                        <button class="property-insert-btn" onclick={insertPropertyOfferingType}
+                                            title="Insert Offering Type">
+                                            Offering
+                                        </button>
+                                        <!-- Location Information -->
+                                        <button class="property-insert-btn" onclick={insertPropertyCity}
+                                            title="Insert City">
+                                            City
+                                        </button>
+                                     
+                                   
+                                   
+                        
+                                      
+                                        <button class="property-insert-btn" onclick={insertPropertyContactEmail}
+                                            title="Insert Contact Email">
+                                            Email
+                                        </button>
+                                        <button class="property-insert-btn" onclick={insertPropertyContactPhone}
+                                            title="Insert Contact Phone">
+                                            Phone
+                                        </button>
+                                        
+                                       
+                                 
                                     </div>
                                 </div>