var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import * as plugins from '../../plugins.js';
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, state, } from '@design.estate/dees-element';
import * as sharedStyles from '../../styles/shared.styles.js';
import { demoFunc } from './upladmin-statuspage-config.demo.js';
let UpladminStatuspageConfig = (() => {
    let _classDecorators = [customElement('upladmin-statuspage-config')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _config_decorators;
    let _config_initializers = [];
    let _config_extraInitializers = [];
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _formData_decorators;
    let _formData_initializers = [];
    let _formData_extraInitializers = [];
    let _activeSection_decorators;
    let _activeSection_initializers = [];
    let _activeSection_extraInitializers = [];
    let _hasChanges_decorators;
    let _hasChanges_initializers = [];
    let _hasChanges_extraInitializers = [];
    var UpladminStatuspageConfig = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _config_decorators = [property({ type: Object })];
            _loading_decorators = [property({ type: Boolean })];
            _formData_decorators = [state()];
            _activeSection_decorators = [state()];
            _hasChanges_decorators = [state()];
            __esDecorate(this, null, _config_decorators, { kind: "accessor", name: "config", static: false, private: false, access: { has: obj => "config" in obj, get: obj => obj.config, set: (obj, value) => { obj.config = value; } }, metadata: _metadata }, _config_initializers, _config_extraInitializers);
            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
            __esDecorate(this, null, _formData_decorators, { kind: "accessor", name: "formData", static: false, private: false, access: { has: obj => "formData" in obj, get: obj => obj.formData, set: (obj, value) => { obj.formData = value; } }, metadata: _metadata }, _formData_initializers, _formData_extraInitializers);
            __esDecorate(this, null, _activeSection_decorators, { kind: "accessor", name: "activeSection", static: false, private: false, access: { has: obj => "activeSection" in obj, get: obj => obj.activeSection, set: (obj, value) => { obj.activeSection = value; } }, metadata: _metadata }, _activeSection_initializers, _activeSection_extraInitializers);
            __esDecorate(this, null, _hasChanges_decorators, { kind: "accessor", name: "hasChanges", static: false, private: false, access: { has: obj => "hasChanges" in obj, get: obj => obj.hasChanges, set: (obj, value) => { obj.hasChanges = value; } }, metadata: _metadata }, _hasChanges_initializers, _hasChanges_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            UpladminStatuspageConfig = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static demo = demoFunc;
        #config_accessor_storage = __runInitializers(this, _config_initializers, {});
        get config() { return this.#config_accessor_storage; }
        set config(value) { this.#config_accessor_storage = value; }
        #loading_accessor_storage = (__runInitializers(this, _config_extraInitializers), __runInitializers(this, _loading_initializers, false));
        get loading() { return this.#loading_accessor_storage; }
        set loading(value) { this.#loading_accessor_storage = value; }
        #formData_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _formData_initializers, {}));
        get formData() { return this.#formData_accessor_storage; }
        set formData(value) { this.#formData_accessor_storage = value; }
        #activeSection_accessor_storage = (__runInitializers(this, _formData_extraInitializers), __runInitializers(this, _activeSection_initializers, 'branding'));
        get activeSection() { return this.#activeSection_accessor_storage; }
        set activeSection(value) { this.#activeSection_accessor_storage = value; }
        #hasChanges_accessor_storage = (__runInitializers(this, _activeSection_extraInitializers), __runInitializers(this, _hasChanges_initializers, false));
        get hasChanges() { return this.#hasChanges_accessor_storage; }
        set hasChanges(value) { this.#hasChanges_accessor_storage = value; }
        static styles = [
            plugins.domtools.elementBasic.staticStyles,
            sharedStyles.commonStyles,
            css `
      :host {
        display: block;
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
      }

      .config-container {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
        min-height: 500px;
      }

      @media (max-width: 768px) {
        .config-container {
          grid-template-columns: 1fr;
        }
      }

      .config-nav {
        background: ${sharedStyles.colors.background.secondary};
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        padding: ${unsafeCSS(sharedStyles.spacing.sm)};
        height: fit-content;
      }

      .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 500;
        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
        color: ${sharedStyles.colors.text.secondary};
        background: transparent;
        border: none;
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        cursor: pointer;
        text-align: left;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .nav-item:hover {
        background: ${sharedStyles.colors.background.muted};
        color: ${sharedStyles.colors.text.primary};
      }

      .nav-item.active {
        background: ${sharedStyles.colors.accent.primary};
        color: white;
      }

      .nav-item.active dees-icon {
        --icon-color: white;
      }

      .nav-item dees-icon {
        --icon-color: ${sharedStyles.colors.text.muted};
        transition: color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .nav-item:hover dees-icon {
        --icon-color: ${sharedStyles.colors.text.primary};
      }

      .config-content {
        background: ${sharedStyles.colors.background.secondary};
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
        overflow: hidden;
      }

      .content-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
        border-bottom: 1px solid ${sharedStyles.colors.border.default};
        background: ${sharedStyles.colors.background.muted};
      }

      .content-title {
        font-size: 16px;
        font-weight: 600;
        color: ${sharedStyles.colors.text.primary};
      }

      .content-subtitle {
        font-size: 13px;
        color: ${sharedStyles.colors.text.muted};
        margin-top: 2px;
      }

      .save-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
        color: ${sharedStyles.colors.accent.warning};
        background: ${cssManager.bdTheme('rgba(234, 179, 8, 0.1)', 'rgba(234, 179, 8, 0.15)')};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
      }

      .save-indicator dees-icon {
        --icon-color: ${sharedStyles.colors.accent.warning};
      }

      .content-body {
        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
      }

      dees-form {
        display: contents;
      }

      .form-section {
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.xl)};
      }

      .form-section:last-child {
        margin-bottom: 0;
      }

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: ${sharedStyles.colors.text.primary};
        margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
        padding-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
        border-bottom: 1px solid ${sharedStyles.colors.border.light};
      }

      .section-title dees-icon {
        --icon-color: ${sharedStyles.colors.text.muted};
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
      }

      .content-actions {
        display: flex;
        justify-content: flex-end;
        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
        padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
        border-top: 1px solid ${sharedStyles.colors.border.default};
        background: ${sharedStyles.colors.background.muted};
      }

      .theme-options {
        display: flex;
        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
      }

      .theme-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 18px;
        background: ${sharedStyles.colors.background.primary};
        border: 2px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        cursor: pointer;
        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
      }

      .theme-option:hover {
        border-color: ${sharedStyles.colors.border.strong};
      }

      .theme-option.selected {
        border-color: ${sharedStyles.colors.accent.primary};
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(96, 165, 250, 0.1)')};
      }

      .theme-option input {
        display: none;
      }

      .theme-preview {
        width: 56px;
        height: 36px;
        border-radius: 6px;
        border: 1px solid ${sharedStyles.colors.border.default};
        overflow: hidden;
      }

      .theme-preview.light {
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
      }

      .theme-preview.dark {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
      }

      .theme-preview.auto {
        background: linear-gradient(135deg, #f8fafc 0%, #f8fafc 50%, #1e293b 50%, #1e293b 100%);
      }

      .theme-label {
        font-size: 13px;
        font-weight: 500;
        color: ${sharedStyles.colors.text.primary};
      }

      .logo-preview {
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
        padding: ${unsafeCSS(sharedStyles.spacing.md)};
        background: ${sharedStyles.colors.background.primary};
        border: 1px solid ${sharedStyles.colors.border.default};
        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
        margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
      }

      .logo-preview img {
        max-width: 140px;
        max-height: 48px;
        object-fit: contain;
      }

      .logo-placeholder {
        display: flex;
        align-items: center;
        gap: 8px;
        color: ${sharedStyles.colors.text.muted};
        font-size: 13px;
      }

      .logo-placeholder dees-icon {
        --icon-color: ${sharedStyles.colors.text.muted};
        opacity: 0.5;
      }

      .toggle-row {
        display: flex;
        align-items: center;
        gap: ${unsafeCSS(sharedStyles.spacing.md)};
        padding: ${unsafeCSS(sharedStyles.spacing.sm)} 0;
      }

      .toggle-label {
        flex: 1;
      }

      .toggle-label-text {
        font-size: 14px;
        font-weight: 500;
        color: ${sharedStyles.colors.text.primary};
      }

      .toggle-label-hint {
        font-size: 12px;
        color: ${sharedStyles.colors.text.muted};
        margin-top: 2px;
      }

      /* Style dees-input components */
      dees-input-text,
      dees-input-dropdown {
        --dees-input-background: ${sharedStyles.colors.background.primary};
        --dees-input-border-color: ${sharedStyles.colors.border.default};
      }
    `
        ];
        async connectedCallback() {
            await super.connectedCallback();
            this.formData = { ...this.config };
        }
        updated(changedProperties) {
            if (changedProperties.has('config')) {
                this.formData = { ...this.config };
                this.hasChanges = false;
            }
        }
        render() {
            const sections = [
                { id: 'branding', icon: 'lucide:Palette', label: 'Branding', subtitle: 'Logo, company name, colors' },
                { id: 'urls', icon: 'lucide:Link', label: 'URLs', subtitle: 'Links and endpoints' },
                { id: 'behavior', icon: 'lucide:Settings', label: 'Behavior', subtitle: 'Refresh, notifications, history' },
                { id: 'advanced', icon: 'lucide:Wrench', label: 'Advanced', subtitle: 'API, timezone, language' },
            ];
            return html `
      <div class="config-container">
        <nav class="config-nav">
          ${sections.map(section => html `
            <button
              class="nav-item ${this.activeSection === section.id ? 'active' : ''}"
              @click="${() => this.activeSection = section.id}"
            >
              <dees-icon .icon=${section.icon} .iconSize=${18}></dees-icon>
              <span>${section.label}</span>
            </button>
          `)}
        </nav>

        <div class="config-content">
          <div class="content-header">
            <div>
              <div class="content-title">${sections.find(s => s.id === this.activeSection)?.label}</div>
              <div class="content-subtitle">${sections.find(s => s.id === this.activeSection)?.subtitle}</div>
            </div>
            ${this.hasChanges ? html `
              <div class="save-indicator">
                <dees-icon .icon=${'lucide:AlertCircle'} .iconSize=${14}></dees-icon>
                <span>Unsaved changes</span>
              </div>
            ` : ''}
          </div>

          <div class="content-body">
            <dees-form>
              ${this.renderSection()}
            </dees-form>
          </div>

          <div class="content-actions">
            <dees-button type="discreet" @click="${this.handleReset}" ?disabled="${!this.hasChanges || this.loading}">
              <dees-icon .icon=${'lucide:RotateCcw'} .iconSize=${14}></dees-icon>
              Reset
            </dees-button>
            <dees-button type="highlighted" @click="${this.handleSave}" ?disabled="${!this.hasChanges || this.loading}">
              ${this.loading ? html `<dees-spinner .size=${16}></dees-spinner>` : html `<dees-icon .icon=${'lucide:Save'} .iconSize=${16}></dees-icon>`}
              Save Changes
            </dees-button>
          </div>
        </div>
      </div>
    `;
        }
        renderSection() {
            switch (this.activeSection) {
                case 'branding':
                    return this.renderBrandingSection();
                case 'urls':
                    return this.renderUrlsSection();
                case 'behavior':
                    return this.renderBehaviorSection();
                case 'advanced':
                    return this.renderAdvancedSection();
                default:
                    return html ``;
            }
        }
        renderBrandingSection() {
            const themeOptions = [
                { value: 'light', label: 'Light', icon: 'lucide:Sun' },
                { value: 'dark', label: 'Dark', icon: 'lucide:Moon' },
                { value: 'auto', label: 'Auto', icon: 'lucide:Monitor' },
            ];
            return html `
      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Building'} .iconSize=${16}></dees-icon>
          Company Information
        </div>
        <div class="form-grid">
          <dees-input-text
            key="companyName"
            label="Company Name"
            .value="${this.formData.companyName || ''}"
            placeholder="Your Company"
            description="Displayed in the header and footer"
            @changeSubject="${(e) => this.handleTextChange('companyName', e.detail)}"
          ></dees-input-text>

          <dees-input-text
            key="supportEmail"
            label="Support Email"
            .value="${this.formData.supportEmail || ''}"
            placeholder="support@example.com"
            description="Contact email for users"
            @changeSubject="${(e) => this.handleTextChange('supportEmail', e.detail)}"
          ></dees-input-text>
        </div>

        <dees-input-text
          key="companyLogo"
          label="Company Logo URL"
          .value="${this.formData.companyLogo || ''}"
          placeholder="https://example.com/logo.png"
          @changeSubject="${(e) => this.handleTextChange('companyLogo', e.detail)}"
        ></dees-input-text>

        ${this.formData.companyLogo ? html `
          <div class="logo-preview">
            <img src="${this.formData.companyLogo}" alt="Company logo" @error="${this.handleLogoError}" />
          </div>
        ` : html `
          <div class="logo-preview">
            <div class="logo-placeholder">
              <dees-icon .icon=${'lucide:Image'} .iconSize=${20}></dees-icon>
              No logo configured
            </div>
          </div>
        `}
      </div>

      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Palette'} .iconSize=${16}></dees-icon>
          Theme
        </div>
        <div class="theme-options">
          ${themeOptions.map(opt => html `
            <label
              class="theme-option ${this.formData.theme === opt.value ? 'selected' : ''}"
              @click="${() => this.handleThemeChange(opt.value)}"
            >
              <input type="radio" name="theme" value="${opt.value}" ?checked="${this.formData.theme === opt.value}" />
              <div class="theme-preview ${opt.value}"></div>
              <span class="theme-label">${opt.label}</span>
            </label>
          `)}
        </div>
      </div>

      <div class="form-section">
        <div class="toggle-row">
          <div class="toggle-label">
            <div class="toggle-label-text">White Label Mode</div>
            <div class="toggle-label-hint">Hide 'Powered by' branding</div>
          </div>
          <dees-input-checkbox
            key="whitelabel"
            .value="${this.formData.whitelabel || false}"
            @changeSubject="${(e) => this.handleBooleanChange('whitelabel', e.detail)}"
          ></dees-input-checkbox>
        </div>
      </div>
    `;
        }
        renderUrlsSection() {
            return html `
      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Globe'} .iconSize=${16}></dees-icon>
          Status Page URLs
        </div>
        <div class="form-grid">
          <dees-input-text
            key="statusPageUrl"
            label="Status Page URL"
            .value="${this.formData.statusPageUrl || ''}"
            placeholder="https://status.example.com"
            description="Public URL of your status page"
            @changeSubject="${(e) => this.handleTextChange('statusPageUrl', e.detail)}"
          ></dees-input-text>

          <dees-input-text
            key="legalUrl"
            label="Legal / Terms URL"
            .value="${this.formData.legalUrl || ''}"
            placeholder="https://example.com/terms"
            description="Link to terms of service or legal info"
            @changeSubject="${(e) => this.handleTextChange('legalUrl', e.detail)}"
          ></dees-input-text>
        </div>
      </div>

      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Server'} .iconSize=${16}></dees-icon>
          API Configuration
        </div>
        <dees-input-text
          key="apiEndpoint"
          label="API Endpoint"
          .value="${this.formData.apiEndpoint || ''}"
          placeholder="https://api.example.com/status"
          description="Base URL for status API requests"
          @changeSubject="${(e) => this.handleTextChange('apiEndpoint', e.detail)}"
        ></dees-input-text>
      </div>
    `;
        }
        renderBehaviorSection() {
            return html `
      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:RefreshCw'} .iconSize=${16}></dees-icon>
          Auto-refresh
        </div>
        <dees-input-text
          key="refreshInterval"
          label="Refresh Interval (seconds)"
          inputType="number"
          .value="${String(this.formData.refreshInterval || 60)}"
          placeholder="60"
          description="How often to refresh status data (minimum 30 seconds)"
          @changeSubject="${(e) => this.handleNumberChange('refreshInterval', e.detail)}"
        ></dees-input-text>
      </div>

      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:History'} .iconSize=${16}></dees-icon>
          History
        </div>
        <dees-input-text
          key="showHistoricalDays"
          label="Historical Days to Show"
          inputType="number"
          .value="${String(this.formData.showHistoricalDays || 90)}"
          placeholder="90"
          description="Number of days of history to display"
          @changeSubject="${(e) => this.handleNumberChange('showHistoricalDays', e.detail)}"
        ></dees-input-text>
      </div>

      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Zap'} .iconSize=${16}></dees-icon>
          Features
        </div>
        <div class="toggle-row">
          <div class="toggle-label">
            <div class="toggle-label-text">WebSocket Updates</div>
            <div class="toggle-label-hint">Enable real-time updates</div>
          </div>
          <dees-input-checkbox
            key="enableWebSocket"
            .value="${this.formData.enableWebSocket || false}"
            @changeSubject="${(e) => this.handleBooleanChange('enableWebSocket', e.detail)}"
          ></dees-input-checkbox>
        </div>

        <div class="toggle-row">
          <div class="toggle-label">
            <div class="toggle-label-text">Browser Notifications</div>
            <div class="toggle-label-hint">Allow push notifications</div>
          </div>
          <dees-input-checkbox
            key="enableNotifications"
            .value="${this.formData.enableNotifications || false}"
            @changeSubject="${(e) => this.handleBooleanChange('enableNotifications', e.detail)}"
          ></dees-input-checkbox>
        </div>
      </div>
    `;
        }
        renderAdvancedSection() {
            const timezoneOptions = [
                { key: 'UTC', option: 'UTC', payload: null },
                { key: 'America/New_York', option: 'Eastern Time (US)', payload: null },
                { key: 'America/Los_Angeles', option: 'Pacific Time (US)', payload: null },
                { key: 'Europe/London', option: 'London', payload: null },
                { key: 'Europe/Berlin', option: 'Berlin', payload: null },
                { key: 'Asia/Tokyo', option: 'Tokyo', payload: null },
                { key: 'Asia/Shanghai', option: 'Shanghai', payload: null },
            ];
            const dateFormatOptions = [
                { key: 'relative', option: 'Relative (2 hours ago)', payload: null },
                { key: 'absolute', option: 'Absolute (Dec 23, 2024 14:30)', payload: null },
                { key: 'iso', option: 'ISO (2024-12-23T14:30:00)', payload: null },
            ];
            const languageOptions = [
                { key: 'en', option: 'English', payload: null },
                { key: 'de', option: 'German', payload: null },
                { key: 'fr', option: 'French', payload: null },
                { key: 'es', option: 'Spanish', payload: null },
                { key: 'ja', option: 'Japanese', payload: null },
                { key: 'zh', option: 'Chinese', payload: null },
            ];
            return html `
      <div class="form-section">
        <div class="section-title">
          <dees-icon .icon=${'lucide:Globe2'} .iconSize=${16}></dees-icon>
          Localization
        </div>
        <div class="form-grid">
          <dees-input-dropdown
            key="timeZone"
            label="Timezone"
            .options="${timezoneOptions}"
            .selectedOption="${this.formData.timeZone || 'UTC'}"
            @selectedOption="${(e) => this.handleDropdownChange('timeZone', e.detail)}"
          ></dees-input-dropdown>

          <dees-input-dropdown
            key="language"
            label="Language"
            .options="${languageOptions}"
            .selectedOption="${this.formData.language || 'en'}"
            @selectedOption="${(e) => this.handleDropdownChange('language', e.detail)}"
          ></dees-input-dropdown>

          <dees-input-dropdown
            key="dateFormat"
            label="Date Format"
            .options="${dateFormatOptions}"
            .selectedOption="${this.formData.dateFormat || 'relative'}"
            @selectedOption="${(e) => this.handleDropdownChange('dateFormat', e.detail)}"
          ></dees-input-dropdown>
        </div>
      </div>
    `;
        }
        handleTextChange(name, value) {
            this.formData = { ...this.formData, [name]: value };
            this.hasChanges = true;
        }
        handleNumberChange(name, value) {
            this.formData = { ...this.formData, [name]: parseInt(value, 10) || 0 };
            this.hasChanges = true;
        }
        handleBooleanChange(name, value) {
            this.formData = { ...this.formData, [name]: value };
            this.hasChanges = true;
        }
        handleDropdownChange(name, value) {
            this.formData = { ...this.formData, [name]: value };
            this.hasChanges = true;
        }
        handleThemeChange(theme) {
            this.formData = { ...this.formData, theme };
            this.hasChanges = true;
        }
        handleLogoError(e) {
            const img = e.target;
            img.style.display = 'none';
        }
        handleSave() {
            this.dispatchEvent(new CustomEvent('configSave', {
                detail: { config: { ...this.formData } },
                bubbles: true,
                composed: true
            }));
        }
        handleReset() {
            this.formData = { ...this.config };
            this.hasChanges = false;
        }
        setConfig(config) {
            this.formData = { ...config };
            this.hasChanges = false;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _hasChanges_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return UpladminStatuspageConfig = _classThis;
})();
export { UpladminStatuspageConfig };
//# sourceMappingURL=data:application/json;base64, 