@foxy.io/elements 1.13.0 → 1.14.0-beta.12

package/dist/cdn/translations/shared/es.json

@@ -1,21 +1,54 @@
 {
+  "add_country": "Agregar país",
+  "add_field": "Agregue campo",
   "add_or_clause": "Añadir cláusula O",
+  "add_region": "Agregar región",
   "add_value": "Añadir valor",
   "address1": "Línea de dirección 1",
   "address2": "Línea de dirección 2",
   "address_name": "Nombre de la dirección",
   "address_plural": "Direcciones",
+  "allowlist": "Permitir todo excepto",
   "attribute_plural": "Atributos",
   "back": "Volver",
   "backend_developer": "Desarrolladora backend",
   "backend_developer_explainer": "Administra el código del lado del servidor en PHP, Python, Ruby, etc.",
+  "billing": "Facturación",
+  "blocklist": "Prohibir todo excepto",
+  "cache": "Cache",
   "cancel": "Cancelar",
+  "cart_controls": "Cantidad",
+  "cart_type": "Exhibición del carro",
+  "cart_type_custom": "Personalizada",
+  "cart_type_custom_explainer": "Cree su propio carrito JSONP con la configuración incluida",
+  "cart_type_default": "Sidecart",
+  "cart_type_default_explainer": "Apariencia predeterminada del carrito en la versión 2.0",
+  "cart_type_fullpage": "Full page",
+  "cart_type_fullpage_explainer": "Envíe a todos los clientes a un carrito de página completa sin dejar de incluir la funcionalidad de minicart",
+  "checked_by_default": "Comprobado de forma predeterminada",
+  "checkout_type": "Cuentas",
+  "checkout_type_account_only": "Permitir solo cuentas de clientes",
+  "checkout_type_default_account": "Permitir ambos, predeterminado para el cliente",
+  "checkout_type_default_guest": "Permitir ambos, predeterminado como invitado",
+  "checkout_type_guest_only": "Permitir solo invitados",
+  "checkout_type_helper_text": "Si selecciona $t(checkout_type_guest_only), su tienda no podrá usar suscripciones.",
   "city": "Ciudad",
   "client": "Cliente",
   "close": "Cerca",
+  "close_icon": "Cerrar icono",
   "company": "Empresa",
+  "consent": "Consentimiento",
   "country": "País",
+  "coupon_entry": "Código promocional",
   "create": "Crear",
+  "custom_config": "Configuración personalizada",
+  "custom_config_helper_text": "Si tiene valores personalizados que le gustaría poner a disposición de su plantilla twig, puede agregarlos aquí como una cadena JSON válida.",
+  "custom_fields": "Campos personalizados",
+  "custom_fields_helper_text": "Si tiene información que le gustaría recopilar del cliente en la página de pago, puede agregar campos de formulario personalizados aquí que se agregarán al formulario de pago. Le recomendamos que siga la misma estructura de contenedor HTML utilizada en otros campos de pago para mantener la coherencia. Puede usar la sintaxis de Twig aquí.",
+  "custom_footer": "Pie de página personalizado",
+  "custom_footer_helper_text": "Cualquier fragmento de JS o script de conversión que necesite agregar al pie de página se puede colocar aquí y se insertará antes de la etiqueta </body>. Puede usar la sintaxis de Twig aquí. Para los scripts de conversión que solo desea mostrar una vez en la página del recibo, use {% if first_receipt_display %} {# contenido del script de conversión aquí #} {% endif %}.",
+  "custom_header": "Cabecera personalizada",
+  "custom_header_helper_text": "Cualquier CSS o JS que necesite agregar al encabezado se puede colocar aquí y se insertará antes de la etiqueta </head> de sus plantillas. Tenga en cuenta que todas las referencias de archivos de secuencias de comandos deben ser a través de https o ejecutarse a través del sistema de almacenamiento en caché de Foxy. La sintaxis de Twig no está disponible en el encabezado.",
   "customer": "Cliente",
   "daily": "Diariamente",
   "daily_plural": "Cada {{count}} días",
@@ -24,19 +57,36 @@
   "date_modified": "Última actualización",
   "day": "día",
   "day_plural": "Días",
+  "default": "Defecto",
   "default_billing_address": "Dirección de facturación",
   "default_shipping_address": "Dirección de entrega",
   "delete": "Eliminar",
   "delete_prompt": "Este recurso se eliminará de forma permanente. ¿Estás seguro?",
+  "description": "Descripción",
   "designer": "Diseñadora",
   "designer_explainer": "Administra la apariencia, el arte y la interfaz de usuario.",
+  "disabled": "Discapacitada",
+  "display_sdta": "Mostrar un acuerdo de transferencia segura de datos a los clientes de la UE",
+  "display_sdta_explainer": "Si tiene clientes en la Unión Europea, habilite esta función para que puedan optar por enviar sus datos a nuestros servidores seguros en los Estados Unidos.",
+  "display_tos_link": "Mostrar un enlace a Términos y condiciones",
+  "display_tos_link_explainer": "Incluya una casilla de verificación para pedirles a sus clientes que acepten sus Términos de servicio.",
   "email": "Correo electrónico",
+  "enable_postcode_lookup": "Ofrecer sugerencias de ciudades y estados según el código postal",
+  "enabled": "Activada",
   "end_date": "Fecha de finalización",
   "end_subscription": "Finalizar suscripción",
   "end_subscription_explainer": "Su suscripción permanecerá activa hasta la fecha de finalización seleccionada. Es posible que deba volver a suscribirse si decide reanudar esta suscripción más adelante.",
   "expires": "Caduca",
   "field": "Campo",
+  "field_plural": "Campos",
   "first_name": "Nombre",
+  "foxycomplete": "Autocompletar ubicación",
+  "foxycomplete_combobox": "Caja combo",
+  "foxycomplete_combobox_explainer": "Expandir para buscar opciones, escribir para buscar",
+  "foxycomplete_disabled": "Deshabilitada",
+  "foxycomplete_disabled_explainer": "Deje que los clientes elijan una opción de una lista",
+  "foxycomplete_search": "Búsqueda",
+  "foxycomplete_search_explainer": "Mostrar un campo de «búsqueda mientras escribe»",
   "fraud_risk": "Riesgo de fraude: {{ score }}",
   "frequency": "$t({{units}}, { \"count\": {{count}} })",
   "frequency_label": "Frecuencia",
@@ -45,6 +95,13 @@
   "frontend_developer_explainer": "Administra el código del lado del cliente en JS, CSS, HTML, etc.",
   "full_address": "{{first_name}} {{last_name}}\n{{address1}} {{address2}}\n{{city}} {{region}} {{postal_code}}",
   "full_name": "{{first_name}} {{last_name}}",
+  "ga_account_id": "Account ID",
+  "ga_account_id_explainer": "Puede encontrar el ID en la sección Administrador de Analytics en Información de seguimiento > Código de seguimiento.",
+  "ga_include_on_site": "Incluir a través de loader.js",
+  "ga_include_on_site_explainer": "Habilite Google Analytics en cualquier página donde se incluya el archivo loader.js.",
+  "hidden": "Oculta",
+  "hidden_fields": "Campos ocultos",
+  "html_template": "Plantilla HTML",
   "invalid_credential_error": "Correo electrónico o contraseña incorrectos. Verifique sus credenciales y vuelva a intentarlo.",
   "is_defined_false": "No definido",
   "is_defined_true": "Definido",
@@ -59,6 +116,8 @@
   "loading_end": "No más datos",
   "loading_error": "No se pudo cargar",
   "loading_paused": "En pausa",
+  "location_plural": "Ubicaciones",
+  "location_url": "Ubicación (URL)",
   "merchant": "Comerciante",
   "merchant_explainer": "Maneja artículos, finanzas y esta tienda en general.",
   "mfa_remember_device": "Confía en este dispositivo",
@@ -74,7 +133,10 @@
   "new_password": "Nueva contraseña",
   "new_password_format_error": "La nueva contraseña que ha elegido es demasiado débil. Ingrese una nueva contraseña segura.",
   "new_password_required_error": "Para mantener su cuenta segura, cambie su contraseña antes de iniciar sesión esta vez.",
+  "newsletter_subscribe": "Permitir a las usuarios suscribirse a su boletín",
+  "newsletter_subscribe_explainer": "Esto incluye una casilla de verificación en su pago para permitir que los clientes elijan suscribirse a su boletín informativo, disponible en los informes de transacciones, la API y los webhooks.",
   "next_transaction_date": "Fecha de la próxima transacción",
+  "open_icon": "Icono abierto",
   "operator_equal": "Igual",
   "operator_greaterthan": "Mas grande que",
   "operator_greaterthanorequal": "Mayor que o igual",
@@ -83,6 +145,7 @@
   "operator_lessthan": "Menos que",
   "operator_lessthanorequal": "Menor o igual",
   "operator_not": "No es igual",
+  "optional": "Opcional",
   "or": "O",
   "password": "Contraseña",
   "payment_method_plural": "Métodos de pago",
@@ -93,6 +156,10 @@
   "price": "{{amount, price}}",
   "price_recurring": "{{amount, price}} $t(frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\" })",
   "price_twice_a_month": "{{amount, price}} $t(frequency_twice_a_month)",
+  "product_category": "Categoria de producto",
+  "product_code": "Código de producto",
+  "product_options": "Opciones de productos",
+  "product_weight": "Peso de producto",
   "query_builder_group": "Grupo de filtros",
   "query_builder_rule": "Filtro",
   "range_from": "De",
@@ -103,16 +170,31 @@
   "recover_access_success": "¡Hecho! Consulte su correo electrónico para obtener más instrucciones.",
   "region": "Region",
   "request": "Pedido",
+  "require_consent": "Requerir consentimiento para continuar",
+  "required": "Requerida",
+  "same_as_shipping": "La misma que el envío",
   "save": "Guardar",
+  "shipping": "Transporte",
+  "show_country_flags": "Mostrar banderas de países",
   "show_on_receipt": "Mostrar en recibo",
   "sign_in": "Iniciar sesión",
   "sign_in_hint": "Por favor, introduzca su correo electrónico y contraseña",
+  "sio_account_id": "Write Key",
+  "sio_account_id_explainer": "Puede encontrar Write Key en la guía de configuración de su proyecto o en la configuración de la fuente.",
+  "skip_csc_for_saved": "Omitir CSC para tarjetas guardadas",
+  "skip_csc_for_sso": "Omitir CSC para el inicio de sesión único",
+  "sub_enddate": "Fecha de finalización de la suscripción",
+  "sub_frequency": "Frecuencia de suscripción",
+  "sub_nextdate": "Suscripción próxima fecha",
+  "sub_startdate": "Fecha de inicio de la suscripción",
   "subscription_active": "Próximo pago el {{date, date}}",
   "subscription_cancelled": "Finalizó el {{date, date}}",
   "subscription_failed": "Error en el pago el {{date, date}}",
   "subscription_inactive": "Inactiva",
   "subscription_plural": "Suscripciones",
   "subscription_will_be_cancelled": "Finaliza el {{date, date}}",
+  "supported_cards": "Tarjetas",
+  "supported_cards_disclaimer": "Se aplica solo a las pasarelas de pago donde el cliente ingresa la información de su tarjeta de pago directamente en el proceso de pago de Foxy. Excepciones: Adyen Embedded, Amazon Pay, Apple Pay, Klarna, Square y Stripe.",
   "tax_apply_to_shipping": "Aplicar al envío",
   "tax_apply_to_shipping_explainer": "Marque para aplicar este impuesto a los costos de envío",
   "tax_country": "Impuesto del país",
@@ -129,6 +211,14 @@
   "tax_union": "Impuesto de la Unión Europea",
   "tax_use_origin_rates": "Usar tasas impositivas de origen",
   "tax_use_origin_rates_explainer": "Marque para usar la tasa impositiva de su país independientemente de dónde se encuentren los clientes",
+  "template": "Plantilla",
+  "template_clipboard": "Desde portapapeles",
+  "template_clipboard_explainer": "Pegue la plantilla aquí para usarla",
+  "template_default": "Defecto",
+  "template_default_explainer": "Usar la plantilla predeterminada",
+  "template_url": "Desde URL",
+  "template_url_explainer": "Obtener la plantilla de una URL pública",
+  "text_template": "Plantilla de texto",
   "time": "{{value, time}}",
   "transaction": "Transacción",
   "transaction_approved": "Aprobado",
@@ -144,6 +234,9 @@
   "transaction_summary_plural": "{{most_expensive_item.name}} y {{count}} más",
   "transaction_verified": "Verificado",
   "transaction_voided": "Anulado",
+  "troubleshooting": "Solución de problemas",
+  "troubleshooting_debug": "Registrar mensajes de depuración en la consola del navegador",
+  "troubleshooting_debug_explainer": "Habilite esta opción para activar las llamadas a console.log() para nuestro JS, lo que puede ayudar a solucionar los problemas de su tienda.",
   "twice_a_month": "Dos veces al mes",
   "type": "Tipo",
   "type_any": "Campo de tipo desconocido",

package/dist/elements/private/Checkbox/Checkbox.d.ts

@@ -3,10 +3,12 @@ import '@vaadin/vaadin-lumo-styles/icons';
 import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
 declare const Checkbox_base: typeof LitElement & {
     styles: CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+};
 export declare class Checkbox extends Checkbox_base {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    readonly: boolean;
+    disabled: boolean;
     checked: boolean;
     render(): TemplateResult;
 }

package/dist/elements/private/Checkbox/Checkbox.js

@@ -2,16 +2,20 @@ import '@polymer/iron-icon';
 import '@vaadin/vaadin-lumo-styles/icons';
 import { LitElement, css, html, } from 'lit-element';
 import { CheckboxChangeEvent } from "./CheckboxChangeEvent.js";
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-export class Checkbox extends ConfigurableMixin(ThemeableMixin(LitElement)) {
+import { classMap } from "../../../utils/class-map.js";
+export class Checkbox extends ThemeableMixin(LitElement) {
     constructor() {
         super(...arguments);
+        this.readonly = false;
+        this.disabled = false;
         this.checked = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            readonly: { type: Boolean },
+            disabled: { type: Boolean },
             checked: { type: Boolean },
         };
     }
@@ -30,23 +34,47 @@ export class Checkbox extends ConfigurableMixin(ThemeableMixin(LitElement)) {
         ];
     }
     render() {
-        const checked = this.checked;
-        const ease = 'transition-colors ease-in-out duration-200';
-        const box = `${ease} ${checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30'}`;
-        const dot = `${ease} transform ${checked ? 'scale-100' : 'scale-0'}`;
         return html `
-      <label class="flex group cursor-pointer">
+      <label
+        class=${classMap({
+            'flex group transition-colors': true,
+            'cursor-default': this.disabled || this.readonly,
+            'text-disabled': this.disabled,
+            'text-secondary': this.readonly,
+            'cursor-pointer': !this.disabled,
+        })}
+      >
         <div
-          class="flex-shrink-0 check rounded-s ${box} text-primary-contrast focus-within-shadow-outline"
+          class=${classMap({
+            'flex-shrink-0 check transition-colors rounded-s border': true,
+            'focus-within-shadow-outline': true,
+            'bg-primary text-primary-contrast': !this.readonly && this.checked,
+            'border-dashed border-contrast-30': this.readonly,
+            'border-transparent': !this.readonly,
+            'opacity-50': this.disabled,
+            'text-secondary bg-contrast-20': !this.readonly && !this.checked,
+            'group-hover-bg-contrast-30': !this.readonly && !this.checked,
+        })}
         >
-          <iron-icon icon="lumo:checkmark" class="block w-full h-full ${dot}"></iron-icon>
+          <iron-icon
+            icon="lumo:checkmark"
+            class=${classMap({
+            'block w-full h-full transition-transform transform': true,
+            'scale-100': this.checked,
+            'scale-0': !this.checked,
+        })}
+          >
+          </iron-icon>
+
           <input
             type="checkbox"
             class="sr-only"
-            .checked=${checked}
+            .checked=${this.checked}
             ?disabled=${this.disabled}
             data-testid="input"
             @change=${(evt) => {
+            if (this.readonly)
+                return evt.preventDefault();
             evt.stopPropagation();
             this.checked = !this.checked;
             this.dispatchEvent(new CheckboxChangeEvent(this.checked));
@@ -54,12 +82,17 @@ export class Checkbox extends ConfigurableMixin(ThemeableMixin(LitElement)) {
           />
         </div>
 
-        <div class="flex-1 font-lumo text-body leading-m -mt-xs ml-m">
+        <div class="flex-1 font-lumo leading-m -mt-xs ml-m">
           <slot></slot>
         </div>
       </label>
 
-      <div class="font-lumo ${this.disabled ? 'text-tertiary' : 'text-body'} ml-xxl">
+      <div
+        class=${classMap({
+            'font-lumo ml-xxl transition-colors': true,
+            'text-disabled': this.disabled,
+        })}
+      >
         <slot name="content"></slot>
       </div>
     `;

package/dist/elements/private/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/elements/private/Checkbox/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAEL,UAAU,EAGV,GAAG,EACH,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,iCAA8B;AAC5D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAE3D,MAAM,OAAO,QAAS,SAAQ,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAA3E;;QAwBE,YAAO,GAAG,KAAK,CAAC;IAsClB,CAAC;IA7DC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;OASF;SACF,CAAC;IACJ,CAAC;IAID,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,MAAM,IAAI,GAAG,4CAA4C,CAAC;QAC1D,MAAM,GAAG,GAAG,GAAG,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2CAA2C,EAAE,CAAC;QAC9F,MAAM,GAAG,GAAG,GAAG,IAAI,cAAc,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;QAErE,OAAO,IAAI,CAAA;;;iDAGkC,GAAG;;wEAEoB,GAAG;;;;uBAIpD,OAAO;wBACN,IAAI,CAAC,QAAQ;;sBAEf,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5D,CAAC;;;;;;;;;8BASiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW;;;KAGtE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\n\nimport {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { CheckboxChangeEvent } from './CheckboxChangeEvent';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\n\nexport class Checkbox extends ConfigurableMixin(ThemeableMixin(LitElement)) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      checked: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .ml-xxl {\n          margin-left: calc(var(--lumo-space-m) + 1.125rem);\n        }\n\n        .check {\n          height: 1.125rem;\n          width: 1.125rem;\n        }\n      `,\n    ];\n  }\n\n  checked = false;\n\n  render(): TemplateResult {\n    const checked = this.checked;\n    const ease = 'transition-colors ease-in-out duration-200';\n    const box = `${ease} ${checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30'}`;\n    const dot = `${ease} transform ${checked ? 'scale-100' : 'scale-0'}`;\n\n    return html`\n      <label class=\"flex group cursor-pointer\">\n        <div\n          class=\"flex-shrink-0 check rounded-s ${box} text-primary-contrast focus-within-shadow-outline\"\n        >\n          <iron-icon icon=\"lumo:checkmark\" class=\"block w-full h-full ${dot}\"></iron-icon>\n          <input\n            type=\"checkbox\"\n            class=\"sr-only\"\n            .checked=${checked}\n            ?disabled=${this.disabled}\n            data-testid=\"input\"\n            @change=${(evt: Event) => {\n              evt.stopPropagation();\n              this.checked = !this.checked;\n              this.dispatchEvent(new CheckboxChangeEvent(this.checked));\n            }}\n          />\n        </div>\n\n        <div class=\"flex-1 font-lumo text-body leading-m -mt-xs ml-m\">\n          <slot></slot>\n        </div>\n      </label>\n\n      <div class=\"font-lumo ${this.disabled ? 'text-tertiary' : 'text-body'} ml-xxl\">\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/elements/private/Checkbox/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAEL,UAAU,EAGV,GAAG,EACH,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,iCAA8B;AAC5D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,OAAO,QAAS,SAAQ,cAAc,CAAC,UAAU,CAAC;IAAxD;;QA0BE,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;IAkElB,CAAC;IA/FC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;OASF;SACF,CAAC;IACJ,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,8BAA8B,EAAE,IAAI;YACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChD,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;SACjC,CAAC;;;kBAGQ,QAAQ,CAAC;YACf,wDAAwD,EAAE,IAAI;YAC9D,6BAA6B,EAAE,IAAI;YACnC,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAClE,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACpC,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,+BAA+B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;YAChE,4BAA4B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;SAC9D,CAAC;;;;oBAIQ,QAAQ,CAAC;YACf,oDAAoD,EAAE,IAAI;YAC1D,WAAW,EAAE,IAAI,CAAC,OAAO;YACzB,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO;SACzB,CAAC;;;;;;;uBAOS,IAAI,CAAC,OAAO;wBACX,IAAI,CAAC,QAAQ;;sBAEf,CAAC,GAAU,EAAE,EAAE;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,GAAG,CAAC,cAAc,EAAE,CAAC;YAE/C,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5D,CAAC;;;;;;;;;;gBAUG,QAAQ,CAAC;YACf,oCAAoC,EAAE,IAAI;YAC1C,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;;;;KAIL,CAAC;IACJ,CAAC;CACF","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\n\nimport {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { CheckboxChangeEvent } from './CheckboxChangeEvent';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\nexport class Checkbox extends ThemeableMixin(LitElement) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      readonly: { type: Boolean },\n      disabled: { type: Boolean },\n      checked: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .ml-xxl {\n          margin-left: calc(var(--lumo-space-m) + 1.125rem);\n        }\n\n        .check {\n          height: 1.125rem;\n          width: 1.125rem;\n        }\n      `,\n    ];\n  }\n\n  readonly = false;\n\n  disabled = false;\n\n  checked = false;\n\n  render(): TemplateResult {\n    return html`\n      <label\n        class=${classMap({\n          'flex group transition-colors': true,\n          'cursor-default': this.disabled || this.readonly,\n          'text-disabled': this.disabled,\n          'text-secondary': this.readonly,\n          'cursor-pointer': !this.disabled,\n        })}\n      >\n        <div\n          class=${classMap({\n            'flex-shrink-0 check transition-colors rounded-s border': true,\n            'focus-within-shadow-outline': true,\n            'bg-primary text-primary-contrast': !this.readonly && this.checked,\n            'border-dashed border-contrast-30': this.readonly,\n            'border-transparent': !this.readonly,\n            'opacity-50': this.disabled,\n            'text-secondary bg-contrast-20': !this.readonly && !this.checked,\n            'group-hover-bg-contrast-30': !this.readonly && !this.checked,\n          })}\n        >\n          <iron-icon\n            icon=\"lumo:checkmark\"\n            class=${classMap({\n              'block w-full h-full transition-transform transform': true,\n              'scale-100': this.checked,\n              'scale-0': !this.checked,\n            })}\n          >\n          </iron-icon>\n\n          <input\n            type=\"checkbox\"\n            class=\"sr-only\"\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            data-testid=\"input\"\n            @change=${(evt: Event) => {\n              if (this.readonly) return evt.preventDefault();\n\n              evt.stopPropagation();\n              this.checked = !this.checked;\n              this.dispatchEvent(new CheckboxChangeEvent(this.checked));\n            }}\n          />\n        </div>\n\n        <div class=\"flex-1 font-lumo leading-m -mt-xs ml-m\">\n          <slot></slot>\n        </div>\n      </label>\n\n      <div\n        class=${classMap({\n          'font-lumo ml-xxl transition-colors': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/private/Choice/Choice.js

@@ -17,13 +17,13 @@ function radio(readonly, disabled, checked, attrs, label) {
     const scale = checked ? 'scale-100' : 'scale-0';
     const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';
     const ease = 'transition ease-in-out duration-200';
-    const dotBg = readonly ? 'bg-contrast-20' : 'bg-tint';
+    const dotBg = readonly ? 'bg-contrast-70' : 'bg-tint';
     const dot = `${ease} ${disabled || readonly ? '' : 'shadow-xs'} transform ${scale} ${dotBg}`;
     const bg = readonly ? '' : disabled ? disabledBg : enabledBg;
-    const border = `border ${readonly ? 'border-contrast-20' : 'border-transparent'}`;
+    const border = `border ${readonly ? 'border-dashed border-contrast-30' : 'border-transparent'}`;
     return html `
     <label class="group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}">
-      <div class="item flex items-center justify-center">
+      <div class="item flex items-center justify-center flex-shrink-0">
         <div class="flex radio rounded-full ${border} ${ease} ${bg} focus-within-shadow-outline">
           <div class="dot m-auto rounded-full ${dot}"></div>
           <input type="radio" class="sr-only" .checked=${checked} ...=${attrs} />
@@ -39,12 +39,12 @@ function check(readonly, disabled, checked, attrs, label) {
     const scale = checked ? 'scale-100' : 'scale-0';
     const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';
     const ease = 'transition ease-in-out duration-200';
-    const dot = `${ease} transform ${scale} ${readonly ? 'text-contrast-20' : 'text-tint'}`;
+    const dot = `${ease} transform ${scale} ${readonly ? 'text-contrast-70' : 'text-tint'}`;
     const bg = readonly ? '' : disabled ? disabledBg : enabledBg;
-    const border = `border ${readonly ? 'border-contrast-20' : 'border-transparent'}`;
+    const border = `border ${readonly ? 'border-dashed border-contrast-30' : 'border-transparent'}`;
     return html `
     <label class="group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}">
-      <div class="item flex items-center justify-center text-primary-contrast">
+      <div class="item flex items-center justify-center flex-shrink-0 text-primary-contrast">
         <div class="check rounded-s ${border} ${ease} ${bg} focus-within-shadow-outline">
           <iron-icon icon="lumo:checkmark" class="block w-full h-full ${dot}"></iron-icon>
           <input type="checkbox" class="sr-only" .checked=${checked} ...=${attrs} />
@@ -192,8 +192,10 @@ export class Choice extends Translatable {
                 'value': other ? VALUE_OTHER : item,
                 'name': multiple ? item : 'choice',
                 'data-testid': `item-${item}`,
-                '?disabled': disabled || this.readonly,
+                '?disabled': disabled,
                 '@change': (evt) => {
+                    if (this.readonly)
+                        return evt.preventDefault();
                     const checked = evt.target.checked;
                     const newItem = item === VALUE_OTHER ? this.defaultCustomValue : item;
                     const value = this.value;
@@ -220,11 +222,9 @@ export class Choice extends Translatable {
         `;
             return html `
           <div class="ml-xxl border-t border-contrast-10 ${index ? '' : 'hidden'}"></div>
-
           ${multiple
                 ? check(this.readonly, disabled, checked, attributes, label)
                 : radio(this.readonly, disabled, checked, attributes, label)}
-
           <div class="mr-m ml-xxl">
             ${item === VALUE_OTHER && otherChecked ? this.__field : ''}
             ${item !== VALUE_OTHER ? html `<slot name=${item}></slot>` : ''}

package/dist/elements/private/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../../src/elements/private/Choice/Choice.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gDAAgD,CAAC;AACxD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AAErD,OAAO,EAAwD,GAAG,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAG9F,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AACxD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,MAAM,WAAW,GAAG,4BAA4B,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;AAEjG,SAAS,KAAK,CACZ,QAAiB,EACjB,QAAiB,EACjB,OAAgB,EAChB,KAAoC,EACpC,KAAqB;IAErB,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2CAA2C,CAAC;IACvF,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAChE,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC;IACrF,MAAM,IAAI,GAAG,qCAAqC,CAAC;IACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IACtD,MAAM,GAAG,GAAG,GAAG,IAAI,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,cAAc,KAAK,IAAI,KAAK,EAAE,CAAC;IAC7F,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,MAAM,MAAM,GAAG,UAAU,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAElF,OAAO,IAAI,CAAA;4CAC+B,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;;8CAE1C,MAAM,IAAI,IAAI,IAAI,EAAE;gDAClB,GAAG;yDACM,OAAO,QAAQ,KAAK;;;wCAGrC,KAAK,KAAK,KAAK;;GAEpD,CAAC;AACJ,CAAC;AAED,SAAS,KAAK,CACZ,QAAiB,EACjB,QAAiB,EACjB,OAAgB,EAChB,KAAoC,EACpC,KAAqB;IAErB,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,2CAA2C,CAAC;IACvF,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAChE,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC;IACrF,MAAM,IAAI,GAAG,qCAAqC,CAAC;IACnD,MAAM,GAAG,GAAG,GAAG,IAAI,cAAc,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACxF,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,MAAM,MAAM,GAAG,UAAU,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAElF,OAAO,IAAI,CAAA;4CAC+B,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;;sCAElD,MAAM,IAAI,IAAI,IAAI,EAAE;wEACc,GAAG;4DACf,OAAO,QAAQ,KAAK;;;wCAGxC,KAAK,KAAK,KAAK;;GAEpD,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,MAAO,SAAQ,YAAY;IAAxC;;QA8DS,YAAO,GAA8B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3C,cAAS,GAAG,SAAS,CAAC,OAAO,CAAC;aACnC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;aACpC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;aAC9D,KAAK,EAAE,CAAC;IAiLb,CAAC;IAnPQ,MAAM,KAAK,cAAc;QAC9B,OAAO;YACL,sBAAsB,EAAE,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC;YAClE,mBAAmB,EAAE,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAC5D,mBAAmB,EAAE,cAAc;YACnC,kBAAkB,EAAE,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC1D,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;SAC7C,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,kBAAkB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,sBAAsB,EAAE;YACvE,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACzB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACtB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACtB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IASD,IAAW,kBAAkB;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;IACzD,CAAC;IAED,IAAW,kBAAkB,CAAC,IAAY;QACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,0BAA0B,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC7D,CAAC;IAED,IAAW,QAAQ,CAAC,IAAa;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAChE,CAAC;IAED,IAAW,QAAQ,CAAC,IAAa;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC3D,CAAC;IAED,IAAW,MAAM,CAAC,IAAa;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC3C,CAAC;IAED,IAAW,IAAI,CAAC,IAAmD;QACjE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC1C,CAAC;IAED,IAAW,GAAG,CAAC,IAAmB;QAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;IAED,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC1C,CAAC;IAED,IAAW,GAAG,CAAC,IAAmB;QAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,IAAW,KAAK,CAAC,IAA8B;QAC7C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,IAAW,KAAK,CAAC,IAAc;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACtE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;QAEhF,MAAM,QAAQ,GAAG,IAAI,CAAA;QACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAExD,MAAM,OAAO,GAAG,KAAK;gBACnB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,CAAC,QAAC,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAC,IAAI,EAAC;oBAC9B,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;YAErD,MAAM,UAAU,GAAG,MAAM,CAAC;gBACxB,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;gBACnC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ;gBAClC,aAAa,EAAE,QAAQ,IAAI,EAAE;gBAC7B,WAAW,EAAE,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBACtC,SAAS,EAAE,CAAC,GAAU,EAAE,EAAE;oBACxB,MAAM,OAAO,GAAI,GAAG,CAAC,MAA2B,CAAC,OAAO,CAAC;oBACzD,MAAM,OAAO,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC;oBACtE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;oBAEzB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;wBACxB,IAAI,IAAI,KAAK,WAAW,EAAE;4BACxB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;yBAC/E;6BAAM;4BACL,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;yBAC/E;qBACF;yBAAM;wBACL,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;qBACvC;oBAED,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACxD,CAAC;aACF,CAAC,CAAC;YAEH,MAAM,KAAK,GAAG,IAAI,CAAA;;cAEZ,IAAI,KAAK,WAAW;gBACpB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,QAAQ,EAAE;gBACpC,CAAC,CAAC,IAAI,CAAA,cAAc,GAAG,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;;SAEvE,CAAC;YAEF,OAAO,IAAI,CAAA;2DACwC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;YAEpE,QAAQ;gBACR,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC5D,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC;;;cAG1D,IAAI,KAAK,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;cACxD,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,cAAc,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE;;SAEjE,CAAC;QACJ,CAAC,CAAC;KACH,CAAC;QAEF,OAAO,IAAI,CAAA,SAAS,QAAQ,UAAU,CAAC;IACzC,CAAC;IAED,IAAY,OAAO;QACjB,MAAM,WAAW,GAAG,CAAC,GAAU,EAAE,EAAE;YACjC,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,WAAW,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;YAE3D,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;aAC7E;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;aAC1B;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,MAAM,CAAC;YACxB,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,QAAQ,EAAE;YACjD,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW;YACjD,KAAK,EAAE,IAAI,CAAC,GAAG;YACf,KAAK,EAAE,IAAI,CAAC,GAAG;YACf,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,aAAa,EAAE,OAAO;YACtB,SAAS,EAAE,WAAW;SACvB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;YAC7B,OAAO,IAAI,CAAA,0BAA0B,UAAU,uBAAuB,CAAC;SACxE;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YAClC,OAAO,IAAI,CAAA,6BAA6B,UAAU,uCAAuC,CAAC;SAC3F;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YACnC,OAAO,IAAI,CAAA,yBAAyB,UAAU,sBAAsB,CAAC;SACtE;aAAM;YACL,OAAO,IAAI,CAAA,0BAA0B,UAAU,uBAAuB,CAAC;SACxE;IACH,CAAC;CACF","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\nimport '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\n\nimport { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\n\nimport { AttributePart } from 'lit-html';\nimport { ChoiceChangeEvent } from './ChoiceChangeEvent';\nimport { FrequencyInput } from '../FrequencyInput/FrequencyInput';\nimport { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { Translatable } from '../../../mixins/translatable';\nimport { interpret } from 'xstate';\nimport { machine } from './machine';\nimport { spread } from '@open-wc/lit-helpers/src/spread';\n\nconst VALUE_OTHER = `@foxy.io/elements::other[${(Math.pow(10, 10) * Math.random()).toFixed(0)}]`;\n\nfunction radio(\n  readonly: boolean,\n  disabled: boolean,\n  checked: boolean,\n  attrs: (part: AttributePart) => void,\n  label: TemplateResult\n) {\n  const enabledBg = checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30';\n  const disabledBg = checked ? 'bg-primary-50' : 'bg-contrast-10';\n  const scale = checked ? 'scale-100' : 'scale-0';\n  const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';\n  const ease = 'transition ease-in-out duration-200';\n  const dotBg = readonly ? 'bg-contrast-20' : 'bg-tint';\n  const dot = `${ease} ${disabled || readonly ? '' : 'shadow-xs'} transform ${scale} ${dotBg}`;\n  const bg = readonly ? '' : disabled ? disabledBg : enabledBg;\n  const border = `border ${readonly ? 'border-contrast-20' : 'border-transparent'}`;\n\n  return html`\n    <label class=\"group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}\">\n      <div class=\"item flex items-center justify-center\">\n        <div class=\"flex radio rounded-full ${border} ${ease} ${bg} focus-within-shadow-outline\">\n          <div class=\"dot m-auto rounded-full ${dot}\"></div>\n          <input type=\"radio\" class=\"sr-only\" .checked=${checked} ...=${attrs} />\n        </div>\n      </div>\n      <div class=\"font-lumo leading-m ${color}\">${label}</div>\n    </label>\n  `;\n}\n\nfunction check(\n  readonly: boolean,\n  disabled: boolean,\n  checked: boolean,\n  attrs: (part: AttributePart) => void,\n  label: TemplateResult\n) {\n  const enabledBg = checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30';\n  const disabledBg = checked ? 'bg-primary-50' : 'bg-contrast-10';\n  const scale = checked ? 'scale-100' : 'scale-0';\n  const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';\n  const ease = 'transition ease-in-out duration-200';\n  const dot = `${ease} transform ${scale} ${readonly ? 'text-contrast-20' : 'text-tint'}`;\n  const bg = readonly ? '' : disabled ? disabledBg : enabledBg;\n  const border = `border ${readonly ? 'border-contrast-20' : 'border-transparent'}`;\n\n  return html`\n    <label class=\"group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}\">\n      <div class=\"item flex items-center justify-center text-primary-contrast\">\n        <div class=\"check rounded-s ${border} ${ease} ${bg} focus-within-shadow-outline\">\n          <iron-icon icon=\"lumo:checkmark\" class=\"block w-full h-full ${dot}\"></iron-icon>\n          <input type=\"checkbox\" class=\"sr-only\" .checked=${checked} ...=${attrs} />\n        </div>\n      </div>\n      <div class=\"font-lumo leading-m ${color}\">${label}</div>\n    </label>\n  `;\n}\n\nexport class Choice extends Translatable {\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-integer-field': customElements.get('vaadin-integer-field'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'x-frequency-input': FrequencyInput,\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'iron-icon': customElements.get('iron-icon'),\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          --item-width: calc((var(--lumo-space-m) * 2) + 1.25rem);\n        }\n\n        .ml-xxl {\n          margin-left: var(--item-width);\n        }\n\n        .item {\n          height: var(--lumo-size-l);\n          width: var(--item-width);\n        }\n\n        .radio {\n          height: 1.25rem;\n          width: 1.25rem;\n        }\n\n        .check {\n          height: 1.125rem;\n          width: 1.125rem;\n        }\n\n        .dot {\n          height: 0.5rem;\n          width: 0.5rem;\n        }\n      `,\n    ];\n  }\n\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      defaultCustomValue: { type: String, attribute: 'default-custom-value' },\n      disabled: { type: Boolean },\n      readonly: { type: Boolean },\n      custom: { type: Boolean },\n      type: { type: String },\n      min: { type: Number },\n      max: { type: Number },\n      value: { type: Array },\n      items: { type: Array },\n      getText: { attribute: false },\n    };\n  }\n\n  public getText: (value: string) => string = v => v;\n\n  private __service = interpret(machine)\n    .onChange(() => this.requestUpdate())\n    .onTransition(({ changed }) => changed && this.requestUpdate())\n    .start();\n\n  public get defaultCustomValue(): string {\n    return this.__service.state.context.defaultCustomValue;\n  }\n\n  public set defaultCustomValue(data: string) {\n    this.__service.send('SET_DEFAULT_CUSTOM_VALUE', { data });\n  }\n\n  public get readonly(): boolean {\n    return this.__service.state.matches('mutability.readonly');\n  }\n\n  public set readonly(data: boolean) {\n    this.__service.send('SET_READONLY', { data });\n  }\n\n  public get disabled(): boolean {\n    return this.__service.state.matches('interactivity.disabled');\n  }\n\n  public set disabled(data: boolean) {\n    this.__service.send('SET_DISABLED', { data });\n  }\n\n  public get custom(): boolean {\n    return this.__service.state.matches('extension.present');\n  }\n\n  public set custom(data: boolean) {\n    this.__service.send('SET_CUSTOM', { data });\n  }\n\n  public get type(): 'text' | 'textarea' | 'integer' | 'frequency' {\n    return this.__service.state.context.type;\n  }\n\n  public set type(data: 'text' | 'textarea' | 'integer' | 'frequency') {\n    this.__service.send('SET_TYPE', { data });\n  }\n\n  public get min(): number | null {\n    return this.__service.state.context.min;\n  }\n\n  public set min(data: number | null) {\n    this.__service.send('SET_MIN', { data });\n  }\n\n  public get max(): number | null {\n    return this.__service.state.context.max;\n  }\n\n  public set max(data: number | null) {\n    this.__service.send('SET_MAX', { data });\n  }\n\n  public get value(): null | string | string[] {\n    return this.__service.state.context.value;\n  }\n\n  public set value(data: null | string | string[]) {\n    this.__service.send('SET_VALUE', { data });\n  }\n\n  public get items(): string[] {\n    return this.__service.state.context.items;\n  }\n\n  public set items(data: string[]) {\n    this.__service.send('SET_ITEMS', { data });\n  }\n\n  public render(): TemplateResult {\n    const items = this.custom ? [...this.items, VALUE_OTHER] : this.items;\n    const multiple = Array.isArray(this.value);\n    const otherChecked = this.__service.state.matches('extension.present.selected');\n\n    const children = html`\n      ${items.map((item, index, array) => {\n        const other = this.custom && index === array.length - 1;\n\n        const checked = other\n          ? otherChecked\n          : multiple\n          ? !!this.value?.includes(item)\n          : item === String(this.value);\n\n        const disabled = this.disabled || !this._isI18nReady;\n\n        const attributes = spread({\n          'value': other ? VALUE_OTHER : item,\n          'name': multiple ? item : 'choice',\n          'data-testid': `item-${item}`,\n          '?disabled': disabled || this.readonly,\n          '@change': (evt: Event) => {\n            const checked = (evt.target as HTMLInputElement).checked;\n            const newItem = item === VALUE_OTHER ? this.defaultCustomValue : item;\n            const value = this.value;\n\n            if (Array.isArray(value)) {\n              if (item === VALUE_OTHER) {\n                this.value = checked ? [...value, newItem] : value.slice(0, value.length - 1);\n              } else {\n                this.value = checked ? [newItem, ...value] : value.filter(v => v !== newItem);\n              }\n            } else {\n              this.value = checked ? newItem : null;\n            }\n\n            this.dispatchEvent(new ChoiceChangeEvent(this.value));\n          },\n        });\n\n        const label = html`\n          <div>\n            ${item === VALUE_OTHER\n              ? this._t('choice.other').toString()\n              : html`<slot name=${`${item}-label`}>${this.getText(item)}</slot>`}\n          </div>\n        `;\n\n        return html`\n          <div class=\"ml-xxl border-t border-contrast-10 ${index ? '' : 'hidden'}\"></div>\n\n          ${multiple\n            ? check(this.readonly, disabled, checked, attributes, label)\n            : radio(this.readonly, disabled, checked, attributes, label)}\n\n          <div class=\"mr-m ml-xxl\">\n            ${item === VALUE_OTHER && otherChecked ? this.__field : ''}\n            ${item !== VALUE_OTHER ? html`<slot name=${item}></slot>` : ''}\n          </div>\n        `;\n      })}\n    `;\n\n    return html`<form>${children}</form> `;\n  }\n\n  private get __field() {\n    const handleInput = (evt: Event) => {\n      evt.stopPropagation();\n      const customValue = (evt.target as HTMLInputElement).value;\n\n      if (Array.isArray(this.value)) {\n        this.value = this.value.slice(0, this.value.length - 1).concat(customValue);\n      } else {\n        this.value = customValue;\n      }\n\n      this.dispatchEvent(new ChoiceChangeEvent(this.value));\n    };\n\n    const attributes = spread({\n      'placeholder': this._t('choice.other').toString(),\n      'class': 'w-full mb-m',\n      'value': this.__service.state.context.customValue,\n      'max': this.max,\n      'min': this.min,\n      '?disabled': this.disabled,\n      '?readonly': this.readonly,\n      'data-testid': 'field',\n      '@change': handleInput,\n    });\n\n    if (this.type === 'frequency') {\n      return html`<x-frequency-input ...=${attributes}></x-frequency-input>`;\n    } else if (this.type === 'integer') {\n      return html`<vaadin-integer-field ...=${attributes} has-controls></vaadin-integer-field>`;\n    } else if (this.type === 'textarea') {\n      return html`<vaadin-text-area ...=${attributes}></vaadin-text-area>`;\n    } else {\n      return html`<vaadin-text-field ...=${attributes}></vaadin-text-field>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../../src/elements/private/Choice/Choice.ts"],"names":[],"mappings":"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","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\nimport '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\n\nimport { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\n\nimport { AttributePart } from 'lit-html';\nimport { ChoiceChangeEvent } from './ChoiceChangeEvent';\nimport { FrequencyInput } from '../FrequencyInput/FrequencyInput';\nimport { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { Translatable } from '../../../mixins/translatable';\nimport { interpret } from 'xstate';\nimport { machine } from './machine';\nimport { spread } from '@open-wc/lit-helpers/src/spread';\n\nconst VALUE_OTHER = `@foxy.io/elements::other[${(Math.pow(10, 10) * Math.random()).toFixed(0)}]`;\n\nfunction radio(\n  readonly: boolean,\n  disabled: boolean,\n  checked: boolean,\n  attrs: (part: AttributePart) => void,\n  label: TemplateResult\n) {\n  const enabledBg = checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30';\n  const disabledBg = checked ? 'bg-primary-50' : 'bg-contrast-10';\n  const scale = checked ? 'scale-100' : 'scale-0';\n  const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';\n  const ease = 'transition ease-in-out duration-200';\n  const dotBg = readonly ? 'bg-contrast-70' : 'bg-tint';\n  const dot = `${ease} ${disabled || readonly ? '' : 'shadow-xs'} transform ${scale} ${dotBg}`;\n  const bg = readonly ? '' : disabled ? disabledBg : enabledBg;\n  const border = `border ${readonly ? 'border-dashed border-contrast-30' : 'border-transparent'}`;\n\n  return html`\n    <label class=\"group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}\">\n      <div class=\"item flex items-center justify-center flex-shrink-0\">\n        <div class=\"flex radio rounded-full ${border} ${ease} ${bg} focus-within-shadow-outline\">\n          <div class=\"dot m-auto rounded-full ${dot}\"></div>\n          <input type=\"radio\" class=\"sr-only\" .checked=${checked} ...=${attrs} />\n        </div>\n      </div>\n      <div class=\"font-lumo leading-m ${color}\">${label}</div>\n    </label>\n  `;\n}\n\nfunction check(\n  readonly: boolean,\n  disabled: boolean,\n  checked: boolean,\n  attrs: (part: AttributePart) => void,\n  label: TemplateResult\n) {\n  const enabledBg = checked ? 'bg-primary' : 'bg-contrast-20 group-hover-bg-contrast-30';\n  const disabledBg = checked ? 'bg-primary-50' : 'bg-contrast-10';\n  const scale = checked ? 'scale-100' : 'scale-0';\n  const color = disabled ? 'text-disabled' : readonly ? 'text-secondary' : 'text-body';\n  const ease = 'transition ease-in-out duration-200';\n  const dot = `${ease} transform ${scale} ${readonly ? 'text-contrast-70' : 'text-tint'}`;\n  const bg = readonly ? '' : disabled ? disabledBg : enabledBg;\n  const border = `border ${readonly ? 'border-dashed border-contrast-30' : 'border-transparent'}`;\n\n  return html`\n    <label class=\"group flex items-center ${disabled || readonly ? '' : 'cursor-pointer'}\">\n      <div class=\"item flex items-center justify-center flex-shrink-0 text-primary-contrast\">\n        <div class=\"check rounded-s ${border} ${ease} ${bg} focus-within-shadow-outline\">\n          <iron-icon icon=\"lumo:checkmark\" class=\"block w-full h-full ${dot}\"></iron-icon>\n          <input type=\"checkbox\" class=\"sr-only\" .checked=${checked} ...=${attrs} />\n        </div>\n      </div>\n      <div class=\"font-lumo leading-m ${color}\">${label}</div>\n    </label>\n  `;\n}\n\nexport class Choice extends Translatable {\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-integer-field': customElements.get('vaadin-integer-field'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'x-frequency-input': FrequencyInput,\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'iron-icon': customElements.get('iron-icon'),\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          --item-width: calc((var(--lumo-space-m) * 2) + 1.25rem);\n        }\n        .ml-xxl {\n          margin-left: var(--item-width);\n        }\n        .item {\n          height: var(--lumo-size-l);\n          width: var(--item-width);\n        }\n        .radio {\n          height: 1.25rem;\n          width: 1.25rem;\n        }\n        .check {\n          height: 1.125rem;\n          width: 1.125rem;\n        }\n        .dot {\n          height: 0.5rem;\n          width: 0.5rem;\n        }\n      `,\n    ];\n  }\n\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      defaultCustomValue: { type: String, attribute: 'default-custom-value' },\n      disabled: { type: Boolean },\n      readonly: { type: Boolean },\n      custom: { type: Boolean },\n      type: { type: String },\n      min: { type: Number },\n      max: { type: Number },\n      value: { type: Array },\n      items: { type: Array },\n      getText: { attribute: false },\n    };\n  }\n\n  public getText: (value: string) => string = v => v;\n\n  private __service = interpret(machine)\n    .onChange(() => this.requestUpdate())\n    .onTransition(({ changed }) => changed && this.requestUpdate())\n    .start();\n\n  public get defaultCustomValue(): string {\n    return this.__service.state.context.defaultCustomValue;\n  }\n\n  public set defaultCustomValue(data: string) {\n    this.__service.send('SET_DEFAULT_CUSTOM_VALUE', { data });\n  }\n\n  public get readonly(): boolean {\n    return this.__service.state.matches('mutability.readonly');\n  }\n\n  public set readonly(data: boolean) {\n    this.__service.send('SET_READONLY', { data });\n  }\n\n  public get disabled(): boolean {\n    return this.__service.state.matches('interactivity.disabled');\n  }\n\n  public set disabled(data: boolean) {\n    this.__service.send('SET_DISABLED', { data });\n  }\n\n  public get custom(): boolean {\n    return this.__service.state.matches('extension.present');\n  }\n\n  public set custom(data: boolean) {\n    this.__service.send('SET_CUSTOM', { data });\n  }\n\n  public get type(): 'text' | 'textarea' | 'integer' | 'frequency' {\n    return this.__service.state.context.type;\n  }\n\n  public set type(data: 'text' | 'textarea' | 'integer' | 'frequency') {\n    this.__service.send('SET_TYPE', { data });\n  }\n\n  public get min(): number | null {\n    return this.__service.state.context.min;\n  }\n\n  public set min(data: number | null) {\n    this.__service.send('SET_MIN', { data });\n  }\n\n  public get max(): number | null {\n    return this.__service.state.context.max;\n  }\n\n  public set max(data: number | null) {\n    this.__service.send('SET_MAX', { data });\n  }\n\n  public get value(): null | string | string[] {\n    return this.__service.state.context.value;\n  }\n\n  public set value(data: null | string | string[]) {\n    this.__service.send('SET_VALUE', { data });\n  }\n\n  public get items(): string[] {\n    return this.__service.state.context.items;\n  }\n\n  public set items(data: string[]) {\n    this.__service.send('SET_ITEMS', { data });\n  }\n\n  public render(): TemplateResult {\n    const items = this.custom ? [...this.items, VALUE_OTHER] : this.items;\n    const multiple = Array.isArray(this.value);\n    const otherChecked = this.__service.state.matches('extension.present.selected');\n\n    const children = html`\n      ${items.map((item, index, array) => {\n        const other = this.custom && index === array.length - 1;\n        const checked = other\n          ? otherChecked\n          : multiple\n          ? !!this.value?.includes(item)\n          : item === String(this.value);\n        const disabled = this.disabled || !this._isI18nReady;\n        const attributes = spread({\n          'value': other ? VALUE_OTHER : item,\n          'name': multiple ? item : 'choice',\n          'data-testid': `item-${item}`,\n          '?disabled': disabled,\n          '@change': (evt: Event) => {\n            if (this.readonly) return evt.preventDefault();\n\n            const checked = (evt.target as HTMLInputElement).checked;\n            const newItem = item === VALUE_OTHER ? this.defaultCustomValue : item;\n            const value = this.value;\n\n            if (Array.isArray(value)) {\n              if (item === VALUE_OTHER) {\n                this.value = checked ? [...value, newItem] : value.slice(0, value.length - 1);\n              } else {\n                this.value = checked ? [newItem, ...value] : value.filter(v => v !== newItem);\n              }\n            } else {\n              this.value = checked ? newItem : null;\n            }\n\n            this.dispatchEvent(new ChoiceChangeEvent(this.value));\n          },\n        });\n        const label = html`\n          <div>\n            ${item === VALUE_OTHER\n              ? this._t('choice.other').toString()\n              : html`<slot name=${`${item}-label`}>${this.getText(item)}</slot>`}\n          </div>\n        `;\n        return html`\n          <div class=\"ml-xxl border-t border-contrast-10 ${index ? '' : 'hidden'}\"></div>\n          ${multiple\n            ? check(this.readonly, disabled, checked, attributes, label)\n            : radio(this.readonly, disabled, checked, attributes, label)}\n          <div class=\"mr-m ml-xxl\">\n            ${item === VALUE_OTHER && otherChecked ? this.__field : ''}\n            ${item !== VALUE_OTHER ? html`<slot name=${item}></slot>` : ''}\n          </div>\n        `;\n      })}\n    `;\n\n    return html`<form>${children}</form> `;\n  }\n\n  private get __field() {\n    const handleInput = (evt: Event) => {\n      evt.stopPropagation();\n      const customValue = (evt.target as HTMLInputElement).value;\n\n      if (Array.isArray(this.value)) {\n        this.value = this.value.slice(0, this.value.length - 1).concat(customValue);\n      } else {\n        this.value = customValue;\n      }\n\n      this.dispatchEvent(new ChoiceChangeEvent(this.value));\n    };\n\n    const attributes = spread({\n      'placeholder': this._t('choice.other').toString(),\n      'class': 'w-full mb-m',\n      'value': this.__service.state.context.customValue,\n      'max': this.max,\n      'min': this.min,\n      '?disabled': this.disabled,\n      '?readonly': this.readonly,\n      'data-testid': 'field',\n      '@change': handleInput,\n    });\n\n    if (this.type === 'frequency') {\n      return html`<x-frequency-input ...=${attributes}></x-frequency-input>`;\n    } else if (this.type === 'integer') {\n      return html`<vaadin-integer-field ...=${attributes} has-controls></vaadin-integer-field>`;\n    } else if (this.type === 'textarea') {\n      return html`<vaadin-text-area ...=${attributes}></vaadin-text-area>`;\n    } else {\n      return html`<vaadin-text-field ...=${attributes}></vaadin-text-field>`;\n    }\n  }\n}\n"]}

package/dist/elements/private/Group/Group.js

@@ -15,7 +15,7 @@ export class Group extends LitElement {
         return Themeable.styles;
     }
     render() {
-        const frameClass = 'border border-contrast-10';
+        const frameClass = 'border border-contrast-10 overflow-hidden';
         return html `
       <section class="space-y-s font-lumo antialiased">
         <h3 class=${`text-s font-medium text-secondary leading-none ${this.frame ? '' : 'pl-m'}`}>

package/dist/elements/private/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../src/elements/private/Group/Group.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAGV,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,SAAS,EAAE,qCAAkC;AAEtD,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAYS,UAAK,GAAG,KAAK,CAAC;IAiBvB,CAAC;IA5BQ,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACzB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,MAAM;QACtB,OAAO,SAAS,CAAC,MAAM,CAAC;IAC1B,CAAC;IAIM,MAAM;QACX,MAAM,UAAU,GAAG,2BAA2B,CAAC;QAE/C,OAAO,IAAI,CAAA;;oBAEK,kDAAkD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;;;;8CAIlD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;KAIrE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import {\n  CSSResult,\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  html,\n} from 'lit-element';\n\nimport { Themeable } from '../../../mixins/themeable';\n\nexport class Group extends LitElement {\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      frame: { type: Boolean },\n    };\n  }\n\n  public static get styles(): CSSResult | CSSResultArray {\n    return Themeable.styles;\n  }\n\n  public frame = false;\n\n  public render(): TemplateResult {\n    const frameClass = 'border border-contrast-10';\n\n    return html`\n      <section class=\"space-y-s font-lumo antialiased\">\n        <h3 class=${`text-s font-medium text-secondary leading-none ${this.frame ? '' : 'pl-m'}`}>\n          <slot name=\"header\"></slot>\n        </h3>\n\n        <div class=\"rounded-t-l rounded-b-l ${this.frame ? frameClass : ''}\">\n          <slot></slot>\n        </div>\n      </section>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["../../../../src/elements/private/Group/Group.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAGV,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,SAAS,EAAE,qCAAkC;AAEtD,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAYS,UAAK,GAAG,KAAK,CAAC;IAiBvB,CAAC;IA5BQ,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACzB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,MAAM;QACtB,OAAO,SAAS,CAAC,MAAM,CAAC;IAC1B,CAAC;IAIM,MAAM;QACX,MAAM,UAAU,GAAG,2CAA2C,CAAC;QAE/D,OAAO,IAAI,CAAA;;oBAEK,kDAAkD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;;;;8CAIlD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;KAIrE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import {\n  CSSResult,\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  html,\n} from 'lit-element';\n\nimport { Themeable } from '../../../mixins/themeable';\n\nexport class Group extends LitElement {\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      frame: { type: Boolean },\n    };\n  }\n\n  public static get styles(): CSSResult | CSSResultArray {\n    return Themeable.styles;\n  }\n\n  public frame = false;\n\n  public render(): TemplateResult {\n    const frameClass = 'border border-contrast-10 overflow-hidden';\n\n    return html`\n      <section class=\"space-y-s font-lumo antialiased\">\n        <h3 class=${`text-s font-medium text-secondary leading-none ${this.frame ? '' : 'pl-m'}`}>\n          <slot name=\"header\"></slot>\n        </h3>\n\n        <div class=\"rounded-t-l rounded-b-l ${this.frame ? frameClass : ''}\">\n          <slot></slot>\n        </div>\n      </section>\n    `;\n  }\n}\n"]}

package/dist/elements/private/I18N/I18N.js

@@ -1,4 +1,4 @@
-import { css, html, } from 'lit-element';
+import { css, html } from 'lit-element';
 import { Translatable } from "../../../mixins/translatable.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
 export class I18N extends Translatable {

package/dist/elements/private/I18N/I18N.js.map

@@ -1 +1 @@
-{"version":3,"file":"I18N.js","sourceRoot":"","sources":["../../../../src/elements/private/I18N/I18N.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,GAAG,EAEH,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,QAAQ,EAAE,gCAA6B;AAKhD,MAAM,OAAO,IAAK,SAAQ,YAAY;IAAtC;;QA0BS,QAAG,GAAG,EAAE,CAAC;IAelB,CAAC;IAxCQ,MAAM,KAAK,cAAc;QAC9B,OAAO;YACL,YAAY,EAAE,QAAQ;SACvB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;YACpC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;OAIF;SACF,CAAC;IACJ,CAAC;IAMD,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,cAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC9D,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;SAC3D;aAAM;YACL,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,GAAG,4BAA4B,CAAC;SAC9E;IACH,CAAC;CACF","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { TOptions } from 'i18next';\nimport {\n  css,\n  CSSResultArray,\n  html,\n  property,\n  TemplateResult,\n  PropertyDeclarations,\n} from 'lit-element';\nimport { Translatable } from '../../../mixins/translatable';\nimport { Skeleton } from '../Skeleton/Skeleton';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type I18NOptions = TOptions<any>;\n\nexport class I18N extends Translatable {\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-skeleton': Skeleton,\n    };\n  }\n\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      key: { type: String, reflect: true },\n      opts: { type: Object },\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: inline-block;\n        }\n      `,\n    ];\n  }\n\n  public key = '';\n\n  public opts?: I18NOptions;\n\n  public get whenReady(): Promise<unknown> {\n    return this._whenI18nReady!.then(() => this.updateComplete);\n  }\n\n  public render(): TemplateResult {\n    if (this._isI18nReady) {\n      return html`${this._t(this.key, this.opts)}<slot></slot>`;\n    } else {\n      return html`<x-skeleton class=\"block\">${this.key}<slot></slot></x-skeleton>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"I18N.js","sourceRoot":"","sources":["../../../../src/elements/private/I18N/I18N.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAwC,MAAM,aAAa,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,QAAQ,EAAE,gCAA6B;AAKhD,MAAM,OAAO,IAAK,SAAQ,YAAY;IAAtC;;QA0BS,QAAG,GAAG,EAAE,CAAC;IAelB,CAAC;IAxCQ,MAAM,KAAK,cAAc;QAC9B,OAAO;YACL,YAAY,EAAE,QAAQ;SACvB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;YACpC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;OAIF;SACF,CAAC;IACJ,CAAC;IAMD,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,cAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC9D,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;SAC3D;aAAM;YACL,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,GAAG,4BAA4B,CAAC;SAC9E;IACH,CAAC;CACF","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { TOptions } from 'i18next';\nimport { css, CSSResultArray, html, TemplateResult, PropertyDeclarations } from 'lit-element';\nimport { Translatable } from '../../../mixins/translatable';\nimport { Skeleton } from '../Skeleton/Skeleton';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type I18NOptions = TOptions<any>;\n\nexport class I18N extends Translatable {\n  public static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-skeleton': Skeleton,\n    };\n  }\n\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      key: { type: String, reflect: true },\n      opts: { type: Object },\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: inline-block;\n        }\n      `,\n    ];\n  }\n\n  public key = '';\n\n  public opts?: I18NOptions;\n\n  public get whenReady(): Promise<unknown> {\n    return this._whenI18nReady!.then(() => this.updateComplete);\n  }\n\n  public render(): TemplateResult {\n    if (this._isI18nReady) {\n      return html`${this._t(this.key, this.opts)}<slot></slot>`;\n    } else {\n      return html`<x-skeleton class=\"block\">${this.key}<slot></slot></x-skeleton>`;\n    }\n  }\n}\n"]}

package/dist/elements/public/AddressForm/AddressForm.js

@@ -136,10 +136,14 @@ export class AddressForm extends Base {
     `;
         };
         this.__renderTimestamps = () => {
-            const items = ['date_modified', 'date_created'].map(field => ({
-                name: this.t(field),
-                value: this.data ? this.t('date', { value: new Date(this.data[field]) }) : '',
-            }));
+            const items = ['date_modified', 'date_created'].map(field => {
+                var _a;
+                return ({
+                    name: this.t(field),
+                    value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
+                        : '',
+                });
+            });
             return html `
       <div>
         ${this.renderTemplateOrSlot('timestamps:before')}