1 line
41 KiB
JSON
1 line
41 KiB
JSON
{"ast":null,"code":"import { __decorate } from \"tslib\";\nimport { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, Validators } from '@angular/forms';\nlet ContactComponent = class ContactComponent {\n constructor(fb, emailService) {\n this.fb = fb;\n this.emailService = emailService;\n this.isSubmitting = false;\n this.showSuccessMessage = false;\n // Set minimum date to today\n const today = new Date();\n this.minDate = today.toISOString().split('T')[0];\n this.contactForm = this.fb.group({\n firstName: ['', Validators.required],\n lastName: ['', Validators.required],\n email: ['', [Validators.required, Validators.email]],\n phone: [''],\n eventType: ['', Validators.required],\n eventDate: [''],\n guestCount: [''],\n budget: [''],\n message: ['', Validators.required],\n privacy: [false, Validators.requiredTrue]\n });\n }\n onSubmit() {\n if (this.contactForm.valid) {\n this.isSubmitting = true;\n const formData = this.contactForm.value;\n this.emailService.sendContactForm(formData).subscribe({\n next: response => {\n this.isSubmitting = false;\n this.showSuccessMessage = true;\n this.contactForm.reset();\n // Hide success message after 5 seconds\n setTimeout(() => {\n this.showSuccessMessage = false;\n }, 5000);\n },\n error: error => {\n this.isSubmitting = false;\n console.error('Error sending contact form:', error);\n // You could show an error message here\n }\n });\n } else {\n // Mark all fields as touched to show validation errors\n Object.keys(this.contactForm.controls).forEach(key => {\n this.contactForm.get(key)?.markAsTouched();\n });\n }\n }\n};\nContactComponent = __decorate([Component({\n selector: 'app-contact',\n standalone: true,\n imports: [CommonModule, ReactiveFormsModule],\n template: `\n <div class=\"min-h-screen bg-gray-50\">\n <!-- Header -->\n <section class=\"bg-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6\">\n Kontakt\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot für Ihr Event? \n Wir freuen uns auf Ihre Nachricht und beraten Sie gerne persönlich.\n </p>\n </div>\n </section>\n\n <section class=\"py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n <!-- Contact Form -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Anfrage senden\n </h2>\n \n <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-6\">\n <!-- Personal Information -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"firstName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Vorname *\n </label>\n <input \n type=\"text\" \n id=\"firstName\" \n formControlName=\"firstName\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\">\n <div *ngIf=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Vorname ist erforderlich\n </div>\n </div>\n \n <div>\n <label for=\"lastName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Nachname *\n </label>\n <input \n type=\"text\" \n id=\"lastName\" \n formControlName=\"lastName\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\">\n <div *ngIf=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Nachname ist erforderlich\n </div>\n </div>\n </div>\n\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n E-Mail-Adresse *\n </label>\n <input \n type=\"email\" \n id=\"email\" \n formControlName=\"email\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\n <div *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">E-Mail ist erforderlich</span>\n <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Bitte geben Sie eine gültige E-Mail ein</span>\n </div>\n </div>\n\n <div>\n <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Telefonnummer\n </label>\n <input \n type=\"tel\" \n id=\"phone\" \n formControlName=\"phone\"\n class=\"input-field\">\n </div>\n\n <!-- Event Details -->\n <div class=\"border-t pt-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Event-Details</h3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"eventType\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Art des Events *\n </label>\n <select \n id=\"eventType\" \n formControlName=\"eventType\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\">\n <option value=\"\">Bitte wählen</option>\n <option value=\"wedding\">Hochzeit</option>\n <option value=\"funeral\">Beerdigung</option>\n <option value=\"corporate\">Firmenevent</option>\n <option value=\"birthday\">Geburtstag</option>\n <option value=\"anniversary\">Jubiläum</option>\n <option value=\"other\">Sonstiges</option>\n </select>\n <div *ngIf=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Bitte wählen Sie eine Event-Art\n </div>\n </div>\n\n <div>\n <label for=\"eventDate\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Gewünschtes Datum\n </label>\n <input \n type=\"date\" \n id=\"eventDate\" \n formControlName=\"eventDate\"\n class=\"input-field\"\n [min]=\"minDate\">\n </div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"guestCount\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Anzahl Gäste (ca.)\n </label>\n <input \n type=\"number\" \n id=\"guestCount\" \n formControlName=\"guestCount\"\n class=\"input-field\"\n min=\"1\">\n </div>\n\n <div>\n <label for=\"budget\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Budget (ca.)\n </label>\n <select \n id=\"budget\" \n formControlName=\"budget\"\n class=\"input-field\">\n <option value=\"\">Bitte wählen</option>\n <option value=\"under-500\">Unter 500€</option>\n <option value=\"500-1000\">500€ - 1.000€</option>\n <option value=\"1000-2500\">1.000€ - 2.500€</option>\n <option value=\"2500-5000\">2.500€ - 5.000€</option>\n <option value=\"over-5000\">Über 5.000€</option>\n </select>\n </div>\n </div>\n </div>\n\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Ihre Nachricht *\n </label>\n <textarea \n id=\"message\" \n formControlName=\"message\"\n rows=\"5\"\n class=\"textarea-field\"\n [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"\n placeholder=\"Beschreiben Sie uns Ihre Wünsche und Vorstellungen für Ihr Event...\"></textarea>\n <div *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Bitte beschreiben Sie Ihre Anfrage\n </div>\n </div>\n\n <!-- Privacy Checkbox -->\n <div class=\"flex items-start\">\n <input \n type=\"checkbox\" \n id=\"privacy\" \n formControlName=\"privacy\"\n class=\"mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500\">\n <label for=\"privacy\" class=\"ml-3 text-sm text-gray-700\">\n Ich stimme der Verarbeitung meiner Daten gemäß der \n <a href=\"#\" class=\"text-primary-600 hover:text-primary-700\">Datenschutzerklärung</a> zu. *\n </label>\n </div>\n <div *ngIf=\"contactForm.get('privacy')?.invalid && contactForm.get('privacy')?.touched\" \n class=\"text-red-500 text-sm\">\n Bitte stimmen Sie der Datenschutzerklärung zu\n </div>\n\n <!-- Submit Button -->\n <div class=\"pt-4\">\n <button \n type=\"submit\" \n [disabled]=\"contactForm.invalid || isSubmitting\"\n class=\"btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed\">\n <span *ngIf=\"!isSubmitting\">Anfrage senden</span>\n <span *ngIf=\"isSubmitting\" class=\"flex items-center justify-center\">\n <svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n Wird gesendet...\n </span>\n </button>\n </div>\n </form>\n\n <!-- Success Message -->\n <div *ngIf=\"showSuccessMessage\" \n class=\"mt-6 p-4 bg-green-50 border border-green-200 rounded-lg\">\n <div class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-600 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n </svg>\n <span class=\"text-green-800 font-medium\">Vielen Dank für Ihre Anfrage!</span>\n </div>\n <p class=\"text-green-700 mt-1\">Wir werden uns schnellstmöglich bei Ihnen melden.</p>\n </div>\n </div>\n\n <!-- Contact Information -->\n <div class=\"space-y-8\">\n <!-- Contact Details -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Kontaktinformationen\n </h2>\n \n <div class=\"space-y-4\">\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">E-Mail</h3>\n <p class=\"text-gray-600\">info@florale-emotion.de</p>\n </div>\n </div>\n\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z\" clip-rule=\"evenodd\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">Standort</h3>\n <p class=\"text-gray-600\">Deutschland<br>Termine nach Vereinbarung</p>\n </div>\n </div>\n\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\" clip-rule=\"evenodd\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">Beratungszeiten</h3>\n <p class=\"text-gray-600\">\n Montag - Freitag: 9:00 - 18:00<br>\n Samstag: 10:00 - 16:00<br>\n Sonntag: Nach Vereinbarung\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Team -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Unser Team\n </h2>\n \n <div class=\"space-y-6\">\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mr-4\">\n <span class=\"text-primary-600 font-semibold text-lg\">V</span>\n </div>\n <div>\n <h3 class=\"font-semibold text-gray-900\">Veronika</h3>\n <p class=\"text-gray-600\">Floristmeisterin & Geschäftsführung</p>\n <p class=\"text-sm text-gray-500\">veronika@florale-emotion.de</p>\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mr-4\">\n <span class=\"text-secondary-600 font-semibold text-lg\">C</span>\n </div>\n <div>\n <h3 class=\"font-semibold text-gray-900\">Corinna</h3>\n <p class=\"text-gray-600\">Floristin & Eventplanung</p>\n <p class=\"text-sm text-gray-500\">corinna@florale-emotion.de</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- FAQ -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Häufige Fragen\n </h2>\n \n <div class=\"space-y-4\">\n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Wie weit im Voraus sollte ich buchen?</h3>\n <p class=\"text-gray-600 text-sm\">Für Hochzeiten empfehlen wir eine Buchung 3-6 Monate im Voraus. Bei anderen Events reichen meist 2-4 Wochen.</p>\n </div>\n \n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Liefern Sie auch außerhalb der Region?</h3>\n <p class=\"text-gray-600 text-sm\">Ja, wir liefern deutschlandweit. Die Lieferkosten werden individuell berechnet.</p>\n </div>\n \n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Bieten Sie auch Beratungstermine an?</h3>\n <p class=\"text-gray-600 text-sm\">Selbstverständlich! Wir kommen gerne zu Ihnen oder Sie besuchen uns in unserem Atelier.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n </div>\n `\n})], ContactComponent);\nexport { ContactComponent };","map":{"version":3,"names":["Component","CommonModule","ReactiveFormsModule","Validators","ContactComponent","constructor","fb","emailService","isSubmitting","showSuccessMessage","today","Date","minDate","toISOString","split","contactForm","group","firstName","required","lastName","email","phone","eventType","eventDate","guestCount","budget","message","privacy","requiredTrue","onSubmit","valid","formData","value","sendContactForm","subscribe","next","response","reset","setTimeout","error","console","Object","keys","controls","forEach","key","get","markAsTouched","__decorate","selector","standalone","imports","template"],"sources":["/Users/julianvollmer/workspace/florale-emotion/src/app/pages/contact/contact.component.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { EmailService, ContactFormData } from '../../services/email.service';\n\n@Component({\n selector: 'app-contact',\n standalone: true,\n imports: [CommonModule, ReactiveFormsModule],\n template: `\n <div class=\"min-h-screen bg-gray-50\">\n <!-- Header -->\n <section class=\"bg-white py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6\">\n Kontakt\n </h1>\n <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot für Ihr Event? \n Wir freuen uns auf Ihre Nachricht und beraten Sie gerne persönlich.\n </p>\n </div>\n </section>\n\n <section class=\"py-16\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n <!-- Contact Form -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Anfrage senden\n </h2>\n \n <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-6\">\n <!-- Personal Information -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"firstName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Vorname *\n </label>\n <input \n type=\"text\" \n id=\"firstName\" \n formControlName=\"firstName\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\">\n <div *ngIf=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Vorname ist erforderlich\n </div>\n </div>\n \n <div>\n <label for=\"lastName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Nachname *\n </label>\n <input \n type=\"text\" \n id=\"lastName\" \n formControlName=\"lastName\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\">\n <div *ngIf=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Nachname ist erforderlich\n </div>\n </div>\n </div>\n\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n E-Mail-Adresse *\n </label>\n <input \n type=\"email\" \n id=\"email\" \n formControlName=\"email\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\n <div *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">E-Mail ist erforderlich</span>\n <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Bitte geben Sie eine gültige E-Mail ein</span>\n </div>\n </div>\n\n <div>\n <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Telefonnummer\n </label>\n <input \n type=\"tel\" \n id=\"phone\" \n formControlName=\"phone\"\n class=\"input-field\">\n </div>\n\n <!-- Event Details -->\n <div class=\"border-t pt-6\">\n <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Event-Details</h3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"eventType\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Art des Events *\n </label>\n <select \n id=\"eventType\" \n formControlName=\"eventType\"\n class=\"input-field\"\n [class.border-red-500]=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\">\n <option value=\"\">Bitte wählen</option>\n <option value=\"wedding\">Hochzeit</option>\n <option value=\"funeral\">Beerdigung</option>\n <option value=\"corporate\">Firmenevent</option>\n <option value=\"birthday\">Geburtstag</option>\n <option value=\"anniversary\">Jubiläum</option>\n <option value=\"other\">Sonstiges</option>\n </select>\n <div *ngIf=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Bitte wählen Sie eine Event-Art\n </div>\n </div>\n\n <div>\n <label for=\"eventDate\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Gewünschtes Datum\n </label>\n <input \n type=\"date\" \n id=\"eventDate\" \n formControlName=\"eventDate\"\n class=\"input-field\"\n [min]=\"minDate\">\n </div>\n </div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label for=\"guestCount\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Anzahl Gäste (ca.)\n </label>\n <input \n type=\"number\" \n id=\"guestCount\" \n formControlName=\"guestCount\"\n class=\"input-field\"\n min=\"1\">\n </div>\n\n <div>\n <label for=\"budget\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Budget (ca.)\n </label>\n <select \n id=\"budget\" \n formControlName=\"budget\"\n class=\"input-field\">\n <option value=\"\">Bitte wählen</option>\n <option value=\"under-500\">Unter 500€</option>\n <option value=\"500-1000\">500€ - 1.000€</option>\n <option value=\"1000-2500\">1.000€ - 2.500€</option>\n <option value=\"2500-5000\">2.500€ - 5.000€</option>\n <option value=\"over-5000\">Über 5.000€</option>\n </select>\n </div>\n </div>\n </div>\n\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n Ihre Nachricht *\n </label>\n <textarea \n id=\"message\" \n formControlName=\"message\"\n rows=\"5\"\n class=\"textarea-field\"\n [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"\n placeholder=\"Beschreiben Sie uns Ihre Wünsche und Vorstellungen für Ihr Event...\"></textarea>\n <div *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \n class=\"text-red-500 text-sm mt-1\">\n Bitte beschreiben Sie Ihre Anfrage\n </div>\n </div>\n\n <!-- Privacy Checkbox -->\n <div class=\"flex items-start\">\n <input \n type=\"checkbox\" \n id=\"privacy\" \n formControlName=\"privacy\"\n class=\"mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500\">\n <label for=\"privacy\" class=\"ml-3 text-sm text-gray-700\">\n Ich stimme der Verarbeitung meiner Daten gemäß der \n <a href=\"#\" class=\"text-primary-600 hover:text-primary-700\">Datenschutzerklärung</a> zu. *\n </label>\n </div>\n <div *ngIf=\"contactForm.get('privacy')?.invalid && contactForm.get('privacy')?.touched\" \n class=\"text-red-500 text-sm\">\n Bitte stimmen Sie der Datenschutzerklärung zu\n </div>\n\n <!-- Submit Button -->\n <div class=\"pt-4\">\n <button \n type=\"submit\" \n [disabled]=\"contactForm.invalid || isSubmitting\"\n class=\"btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed\">\n <span *ngIf=\"!isSubmitting\">Anfrage senden</span>\n <span *ngIf=\"isSubmitting\" class=\"flex items-center justify-center\">\n <svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n Wird gesendet...\n </span>\n </button>\n </div>\n </form>\n\n <!-- Success Message -->\n <div *ngIf=\"showSuccessMessage\" \n class=\"mt-6 p-4 bg-green-50 border border-green-200 rounded-lg\">\n <div class=\"flex items-center\">\n <svg class=\"w-5 h-5 text-green-600 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n </svg>\n <span class=\"text-green-800 font-medium\">Vielen Dank für Ihre Anfrage!</span>\n </div>\n <p class=\"text-green-700 mt-1\">Wir werden uns schnellstmöglich bei Ihnen melden.</p>\n </div>\n </div>\n\n <!-- Contact Information -->\n <div class=\"space-y-8\">\n <!-- Contact Details -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Kontaktinformationen\n </h2>\n \n <div class=\"space-y-4\">\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">E-Mail</h3>\n <p class=\"text-gray-600\">info@florale-emotion.de</p>\n </div>\n </div>\n\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z\" clip-rule=\"evenodd\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">Standort</h3>\n <p class=\"text-gray-600\">Deutschland<br>Termine nach Vereinbarung</p>\n </div>\n </div>\n\n <div class=\"flex items-start\">\n <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\" clip-rule=\"evenodd\"/>\n </svg>\n <div>\n <h3 class=\"font-medium text-gray-900\">Beratungszeiten</h3>\n <p class=\"text-gray-600\">\n Montag - Freitag: 9:00 - 18:00<br>\n Samstag: 10:00 - 16:00<br>\n Sonntag: Nach Vereinbarung\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Team -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Unser Team\n </h2>\n \n <div class=\"space-y-6\">\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mr-4\">\n <span class=\"text-primary-600 font-semibold text-lg\">V</span>\n </div>\n <div>\n <h3 class=\"font-semibold text-gray-900\">Veronika</h3>\n <p class=\"text-gray-600\">Floristmeisterin & Geschäftsführung</p>\n <p class=\"text-sm text-gray-500\">veronika@florale-emotion.de</p>\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mr-4\">\n <span class=\"text-secondary-600 font-semibold text-lg\">C</span>\n </div>\n <div>\n <h3 class=\"font-semibold text-gray-900\">Corinna</h3>\n <p class=\"text-gray-600\">Floristin & Eventplanung</p>\n <p class=\"text-sm text-gray-500\">corinna@florale-emotion.de</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- FAQ -->\n <div class=\"card\">\n <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n Häufige Fragen\n </h2>\n \n <div class=\"space-y-4\">\n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Wie weit im Voraus sollte ich buchen?</h3>\n <p class=\"text-gray-600 text-sm\">Für Hochzeiten empfehlen wir eine Buchung 3-6 Monate im Voraus. Bei anderen Events reichen meist 2-4 Wochen.</p>\n </div>\n \n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Liefern Sie auch außerhalb der Region?</h3>\n <p class=\"text-gray-600 text-sm\">Ja, wir liefern deutschlandweit. Die Lieferkosten werden individuell berechnet.</p>\n </div>\n \n <div>\n <h3 class=\"font-medium text-gray-900 mb-2\">Bieten Sie auch Beratungstermine an?</h3>\n <p class=\"text-gray-600 text-sm\">Selbstverständlich! Wir kommen gerne zu Ihnen oder Sie besuchen uns in unserem Atelier.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n </div>\n `\n})\nexport class ContactComponent {\n contactForm: FormGroup;\n isSubmitting = false;\n showSuccessMessage = false;\n minDate: string;\n\n constructor(\n private fb: FormBuilder,\n private emailService: EmailService\n ) {\n // Set minimum date to today\n const today = new Date();\n this.minDate = today.toISOString().split('T')[0];\n\n this.contactForm = this.fb.group({\n firstName: ['', Validators.required],\n lastName: ['', Validators.required],\n email: ['', [Validators.required, Validators.email]],\n phone: [''],\n eventType: ['', Validators.required],\n eventDate: [''],\n guestCount: [''],\n budget: [''],\n message: ['', Validators.required],\n privacy: [false, Validators.requiredTrue]\n });\n }\n\n onSubmit() {\n if (this.contactForm.valid) {\n this.isSubmitting = true;\n \n const formData: ContactFormData = this.contactForm.value;\n \n this.emailService.sendContactForm(formData).subscribe({\n next: (response) => {\n this.isSubmitting = false;\n this.showSuccessMessage = true;\n this.contactForm.reset();\n \n // Hide success message after 5 seconds\n setTimeout(() => {\n this.showSuccessMessage = false;\n }, 5000);\n },\n error: (error) => {\n this.isSubmitting = false;\n console.error('Error sending contact form:', error);\n // You could show an error message here\n }\n });\n } else {\n // Mark all fields as touched to show validation errors\n Object.keys(this.contactForm.controls).forEach(key => {\n this.contactForm.get(key)?.markAsTouched();\n });\n }\n }\n}"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |