CookiePreferencesDialog

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CookiePreferencesDialog
  title="Cookie preferences"
  description="Choose which optional cookies you allow. Essential cookies are always enabled."
  saveLabel="Save preferences"
  acceptLabel="Accept all"
  rejectLabel="Reject optional"
/>

Legacy mount name: data-component="CookiePreferencesDialog".

Props and attributes

Slots

This component does not declare a slot.

Events

• change
• click

Source contract

Installed source: components/CookiePreferencesDialog.wrn

component CookiePreferencesDialog {
  props {
    title = "Cookie preferences"
    description = "Choose which optional cookies you allow. Essential cookies are always enabled."
    saveLabel = "Save preferences"
    acceptLabel = "Accept all"
    rejectLabel = "Reject optional"
    open = false
    class = ""
  }
  state visible = open
  state analytics = false
  state marketing = false
  view {
        <div data-show="visible" class="wire-overlay {class}" role="presentation">
        <section role="dialog" aria-modal="true" aria-labelledby="cookie-preferences-title" class="wire-dialog wire-cookie-dialog">
        <h2 id="cookie-preferences-title" class="wire-dialog__title">{title}</h2>
        <p class="wire-dialog__description">{description}</p>
        <div class="wire-cookie-list">
        <label class="wire-cookie-option">
        <span>
        <strong>Essential</strong>
        <small>Required for security and core functionality.</small>
        </span>
        <input type="checkbox" checked disabled />
        </label>
        <label class="wire-cookie-option">
        <span>
        <strong>Analytics</strong>
        <small>Helps improve product performance.</small>
        </span>
        <input type="checkbox" checked="{analytics}" @change="analytics = event.target.checked" />
        </label>
        <label class="wire-cookie-option">
        <span>
        <strong>Marketing</strong>
        <small>Supports relevant campaigns and measurement.</small>
        </span>
        <input type="checkbox" checked="{marketing}" @change="marketing = event.target.checked" />
        </label>
        </div>
        <div class="wire-dialog__actions wire-dialog__actions--wrap">
        <button type="button" class="wire-btn wire-btn--ghost" @click="analytics = false; marketing = false">{rejectLabel}</button>
        <button type="button" class="wire-btn wire-btn--default" @click="analytics = true; marketing = true">{acceptLabel}</button>
        <button type="button" class="wire-btn wire-btn--primary" @click="visible = false">{saveLabel}</button>
        </div>
        </section>
        </div>
    }
}