@warp-ds/elements 2.2.0-next.17 → 2.2.0-next.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:768px){.md\\:block{display:block}}`;
2
+ export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.border-0{border-width:0}.rounded-full{border-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.hover\\:no-underline:hover,.focus\\:no-underline:focus{text-decoration:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-icon{color:var(--w-s-color-icon)}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-4{padding:.4rem}.p-8{padding:.8rem}.visible{visibility:visible}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}`;
@@ -1,210 +1,160 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html } from 'lit';
8
- import { property, query } from 'lit/decorators.js';
9
- import { classMap } from 'lit/directives/class-map.js';
10
- import { ifDefined } from 'lit/directives/if-defined.js';
11
- import { live } from 'lit/directives/live.js';
12
- import { BaseFormAssociatedElement } from '../rip-and-tear-radio/form-associated-element';
13
- import { RequiredValidator } from '../rip-and-tear-radio/required-validator';
14
- import { HasSlotController } from '../rip-and-tear-radio/slot';
15
- import { watch } from '../rip-and-tear-radio/watch';
16
- import '@warp-ds/icons/elements/check-16';
17
- // eslint-disable-next-line
18
- // @ts-ignore
19
- import { styles } from './styles';
20
- export class WCheckbox extends BaseFormAssociatedElement {
21
- constructor() {
22
- super(...arguments);
23
- this.hasSlotController = new HasSlotController(this, 'hint');
24
- this.title = ''; // make reactive to pass through
25
- /** The name of the checkbox, submitted as a name/value pair with form data. */
26
- this.name = '';
27
- this._value = this.getAttribute('value') ?? null;
28
- /** The checkbox's size. */
29
- this.size = 'medium';
30
- /** Disables the checkbox. */
31
- this.disabled = false;
32
- /**
33
- * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
34
- * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
35
- */
36
- this.indeterminate = false;
37
- /** Draws the checkbox in a checked state. */
38
- this.checked = this.hasAttribute('checked');
39
- /** The default value of the form control. Primarily used for resetting the form control. */
40
- this.defaultChecked = this.hasAttribute('checked');
41
- /**
42
- * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
43
- * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
44
- * the same document or shadow root for this to work.
45
- */
46
- this.form = null;
47
- /** Makes the checkbox a required field. */
48
- this.required = false;
49
- /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
50
- this.hint = '';
51
- }
52
- static { this.css = [styles]; }
53
- static { this.shadowRootOptions = { ...BaseFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; }
54
- static get validators() {
55
- const validators = [
56
- RequiredValidator({
57
- validationProperty: 'checked',
58
- // Use a checkbox so we get "free" translation strings.
59
- validationElement: Object.assign(document.createElement('input'), {
60
- type: 'checkbox',
61
- required: true,
62
- }),
63
- }),
64
- ];
65
- return [...super.validators, ...validators];
66
- }
67
- /** The value of the checkbox, submitted as a name/value pair with form data. */
68
- get value() {
69
- return this._value ?? 'on';
70
- }
71
- set value(val) {
72
- this._value = val;
73
- }
74
- handleClick() {
75
- this.hasInteracted = true;
76
- this.checked = !this.checked;
77
- this.indeterminate = false;
78
- this.updateComplete.then(() => {
79
- this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
80
- });
81
- }
82
- handleDefaultCheckedChange() {
83
- if (!this.hasInteracted && this.checked !== this.defaultChecked) {
84
- this.checked = this.defaultChecked;
85
- this.handleValueOrCheckedChange();
86
- }
87
- }
88
- handleValueOrCheckedChange() {
89
- // These @watch() commands seem to override the base element checks for changes, so we need to setValue for the form and and updateValidity()
90
- this.setValue(this.checked ? this.value : null, this._value);
91
- this.updateValidity();
92
- }
93
- handleStateChange() {
94
- if (this.hasUpdated) {
95
- this.input.checked = this.checked; // force a sync update
96
- this.input.indeterminate = this.indeterminate; // force a sync update
97
- }
98
- this.customStates.set('checked', this.checked);
99
- this.customStates.set('indeterminate', this.indeterminate);
100
- this.updateValidity();
101
- }
102
- handleDisabledChange() {
103
- this.customStates.set('disabled', this.disabled);
104
- }
105
- willUpdate(changedProperties) {
106
- super.willUpdate(changedProperties);
107
- if (changedProperties.has('defaultChecked')) {
108
- if (!this.hasInteracted) {
109
- this.checked = this.defaultChecked;
110
- }
111
- }
112
- if (changedProperties.has('value') || changedProperties.has('checked')) {
113
- this.handleValueOrCheckedChange();
114
- }
115
- }
116
- formResetCallback() {
117
- // Evaluate checked before the super call because of our watcher on value.
118
- this.checked = this.defaultChecked;
119
- super.formResetCallback();
120
- this.handleValueOrCheckedChange();
121
- }
122
- /** Simulates a click on the checkbox. */
123
- click() {
124
- this.input.click();
125
- }
126
- /** Sets focus on the checkbox. */
127
- focus(options) {
128
- this.input.focus(options);
129
- }
130
- /** Removes focus from the checkbox. */
131
- blur() {
132
- this.input.blur();
133
- }
134
- render() {
135
- const hasHintSlot = this.hasSlotController.test('hint');
136
- const hasHint = this.hint ? true : !!hasHintSlot;
137
- const isIndeterminate = !this.checked && this.indeterminate;
138
- return html `
1
+ var Ee=Object.create;var H=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var we=Object.getOwnPropertyNames;var ke=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var J=s=>{throw TypeError(s)};var G=(s,t)=>()=>(t||s((t={exports:{}}).exports,t),t.exports);var _e=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of we(t))!Ce.call(s,i)&&i!==e&&H(s,i,{get:()=>t[i],enumerable:!(r=z(t,i))||r.enumerable});return s};var Ve=(s,t,e)=>(e=s!=null?Ee(ke(s)):{},_e(t||!s||!s.__esModule?H(e,"default",{value:s,enumerable:!0}):e,s));var c=(s,t,e,r)=>{for(var i=r>1?void 0:r?z(t,e):t,a=s.length-1,n;a>=0;a--)(n=s[a])&&(i=(r?n(t,e,i):n(i))||i);return r&&i&&H(t,e,i),i};var X=(s,t,e)=>t.has(s)||J("Cannot "+e);var Z=(s,t,e)=>(X(s,t,"read from private field"),e?e.call(s):t.get(s)),Q=(s,t,e)=>t.has(s)?J("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(s):t.set(s,e),Y=(s,t,e,r)=>(X(s,t,"write to private field"),r?r.call(s,e):t.set(s,e),e);var se=G(w=>{"use strict";Object.defineProperty(w,"__esModule",{value:!0});w.errorMessages=w.ErrorType=void 0;var _;(function(s){s.MalformedUnicode="MALFORMED_UNICODE",s.MalformedHexadecimal="MALFORMED_HEXADECIMAL",s.CodePointLimit="CODE_POINT_LIMIT",s.OctalDeprecation="OCTAL_DEPRECATION",s.EndOfString="END_OF_STRING"})(_=w.ErrorType||(w.ErrorType={}));w.errorMessages=new Map([[_.MalformedUnicode,"malformed Unicode character escape sequence"],[_.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[_.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[_.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[_.EndOfString,"malformed escape sequence at end of string"]])});var ne=G(g=>{"use strict";Object.defineProperty(g,"__esModule",{value:!0});g.unraw=g.errorMessages=g.ErrorType=void 0;var h=se();Object.defineProperty(g,"ErrorType",{enumerable:!0,get:function(){return h.ErrorType}});Object.defineProperty(g,"errorMessages",{enumerable:!0,get:function(){return h.errorMessages}});function Le(s){return!s.match(/[^a-f0-9]/i)?parseInt(s,16):NaN}function N(s,t,e){let r=Le(s);if(Number.isNaN(r)||e!==void 0&&e!==s.length)throw new SyntaxError(h.errorMessages.get(t));return r}function Oe(s){let t=N(s,h.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(t)}function ie(s,t){let e=N(s,h.ErrorType.MalformedUnicode,4);if(t!==void 0){let r=N(t,h.ErrorType.MalformedUnicode,4);return String.fromCharCode(e,r)}return String.fromCharCode(e)}function Ne(s){return s.charAt(0)==="{"&&s.charAt(s.length-1)==="}"}function Ie(s){if(!Ne(s))throw new SyntaxError(h.errorMessages.get(h.ErrorType.MalformedUnicode));let t=s.slice(1,-1),e=N(t,h.ErrorType.MalformedUnicode);try{return String.fromCodePoint(e)}catch(r){throw r instanceof RangeError?new SyntaxError(h.errorMessages.get(h.ErrorType.CodePointLimit)):r}}function xe(s,t=!1){if(t)throw new SyntaxError(h.errorMessages.get(h.ErrorType.OctalDeprecation));let e=parseInt(s,8);return String.fromCharCode(e)}var De=new Map([["b","\b"],["f","\f"],["n",`
2
+ `],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Re(s){return De.get(s)||s}var He=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function ae(s,t=!1){return s.replace(He,function(e,r,i,a,n,o,l,d,f){if(r!==void 0)return"\\";if(i!==void 0)return Oe(i);if(a!==void 0)return Ie(a);if(n!==void 0)return ie(n,o);if(l!==void 0)return ie(l);if(d==="0")return"\0";if(d!==void 0)return xe(d,!t);if(f!==void 0)return Re(f);throw new SyntaxError(h.errorMessages.get(h.ErrorType.EndOfString))})}g.unraw=ae;g.default=ae});import{html as lt}from"lit";import{property as p,query as ct}from"lit/decorators.js";import{classMap as dt}from"lit/directives/class-map.js";import{ifDefined as ut}from"lit/directives/if-defined.js";import{live as ye}from"lit/directives/live.js";import{isServer as U}from"lit";import{property as C}from"lit/decorators.js";import{LitElement as Me,unsafeCSS as Te}from"lit";import{property as ee}from"lit/decorators.js";import{css as Se}from"lit";var W=Se`
3
+ :host {
4
+ box-sizing: border-box !important;
5
+ }
6
+
7
+ :host *,
8
+ :host *::before,
9
+ :host *::after {
10
+ box-sizing: inherit !important;
11
+ }
12
+ `;var V,E=class extends Me{constructor(){super();Q(this,V,!1);this.initialReflectedProperties=new Map;this.customStates={set:(e,r)=>{var i;(i=this.internals)!=null&&i.states&&(r?this.internals.states.add(e):this.internals.states.delete(e))},has:e=>{var r;return(r=this.internals)!=null&&r.states?this.internals.states.has(e):!1}};try{this.internals=this.attachInternals()}catch(r){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[r,i]of e.elementProperties)i.default==="inherit"&&i.initial!==void 0&&typeof r=="string"&&this.customStates.set(`initial-${r}-${i.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[W,...e].map(r=>typeof r=="string"?Te(r):r)}attributeChangedCallback(e,r,i){Z(this,V)||(this.constructor.elementProperties.forEach((a,n)=>{a.reflect&&this[n]!=null&&this.initialReflectedProperties.set(n,this[n])}),Y(this,V,!0)),super.attributeChangedCallback(e,r,i)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((r,i)=>{e.has(i)&&this[i]==null&&(this[i]=r)})}relayNativeEvent(e,r){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,{...e,...r}))}};V=new WeakMap,c([ee()],E.prototype,"dir",2),c([ee()],E.prototype,"lang",2);var te=()=>({observedAttributes:["custom-error"],checkValidity(s){let t={message:"",isValid:!0,invalidKeys:[]};return s.customError&&(t.message=s.customError,t.isValid=!1,t.invalidKeys=["customError"]),t}});var T=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var m=class extends E{constructor(){super();this.name=null;this.disabled=!1;this.required=!1;this.assumeInteractionOn=["input"];this.validators=[];this.valueHasChanged=!1;this.hasInteracted=!1;this.customError=null;this.emittedEvents=[];this.emitInvalid=e=>{e.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new T))};this.handleInteraction=e=>{var i;let r=this.emittedEvents;r.includes(e.type)||r.push(e.type),r.length===((i=this.assumeInteractionOn)==null?void 0:i.length)&&(this.hasInteracted=!0)};U||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[te()]}static get observedAttributes(){let e=new Set(super.observedAttributes||[]);for(let r of this.validators)if(r.observedAttributes)for(let i of r.observedAttributes)e.add(i);return[...e]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(e=>{this.addEventListener(e,this.handleInteraction)})}firstUpdated(...e){super.firstUpdated(...e),this.updateValidity()}willUpdate(e){if(!U&&e.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),e.has("value")||e.has("disabled")){let r=this.value;if(Array.isArray(r)){if(this.name){let i=new FormData;for(let a of r)i.append(this.name,a);this.setValue(i,i)}}else this.setValue(r,r)}e.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!U&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(e)}get labels(){return this.internals.labels}getForm(){return this.internals.form}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}get validationMessage(){return this.internals.validationMessage}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.internals.reportValidity()}get validationTarget(){return this.input||void 0}setValidity(...e){let r=e[0],i=e[1],a=e[2];a||(a=this.validationTarget),this.internals.setValidity(r,i,a||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let e=!!this.required,r=this.internals.validity.valid,i=this.hasInteracted;this.customStates.set("required",e),this.customStates.set("optional",!e),this.customStates.set("invalid",!r),this.customStates.set("valid",r),this.customStates.set("user-invalid",!r&&i),this.customStates.set("user-valid",r&&i)}setCustomValidity(e){if(!e){this.customError=null,this.setValidity({});return}this.customError=e,this.setValidity({customError:!0},e,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(e){this.disabled=e,this.updateValidity()}formStateRestoreCallback(e,r){this.value=e,r==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...e){let[r,i]=e;this.internals.setFormValue(r,i)}get allValidators(){let e=this.constructor.validators||[],r=this.validators||[];return[...e,...r]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let e=this.allValidators;if(!(e!=null&&e.length))return;let r={customError:!!this.customError},i=this.validationTarget||this.input||void 0,a="";for(let n of e){let{isValid:o,message:l,invalidKeys:d}=n.checkValidity(this);o||(a||(a=l),(d==null?void 0:d.length)>=0&&d.forEach(f=>r[f]=!0))}a||(a=this.validationMessage),this.setValidity(r,a,i)}};m.formAssociated=!0,c([C({reflect:!0})],m.prototype,"name",2),c([C({type:Boolean})],m.prototype,"disabled",2),c([C({state:!0,attribute:!1})],m.prototype,"valueHasChanged",2),c([C({state:!0,attribute:!1})],m.prototype,"hasInteracted",2),c([C({attribute:"custom-error",reflect:!0})],m.prototype,"customError",2),c([C({attribute:!1,state:!0,type:Object})],m.prototype,"validity",1);var re=(s={})=>{let{validationElement:t,validationProperty:e}=s;t||(t=Object.assign(document.createElement("input"),{required:!0})),e||(e="value");let r={observedAttributes:["required"],message:t.validationMessage,checkValidity(i){var d;let a={message:"",isValid:!0,invalidKeys:[]};return((d=i.required)!=null?d:i.hasAttribute("required"))&&!i[e]&&(a.message=typeof r.message=="function"?r.message(i):r.message||"",a.isValid=!1,a.invalidKeys.push("valueMissing")),a}};return r};var L=class{constructor(t,...e){this.slotNames=[];this.handleSlotChange=t=>{let e=t.target;(this.slotNames.includes("[default]")&&!e.name||e.name&&this.slotNames.includes(e.name))&&this.host.requestUpdate()};(this.host=t).addController(this),this.slotNames=e}hasDefaultSlot(){return[...this.host.childNodes].some(t=>{if(t.nodeType===Node.TEXT_NODE&&t.textContent.trim()!=="")return!0;if(t.nodeType===Node.ELEMENT_NODE){let e=t;if(e.tagName.toLowerCase()==="w-visually-hidden")return!1;if(!e.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(t){return this.host.querySelector(`:scope > [slot="${t}"]`)!==null}test(t){return t==="[default]"?this.hasDefaultSlot():this.hasNamedSlot(t)}hostConnected(){this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange)}};function O(s,t){let e={waitUntilFirstUpdate:!1,...t};return(r,i)=>{let{update:a}=r,n=Array.isArray(s)?s:[s];r.update=function(o){n.forEach(l=>{let d=l;if(o.has(d)){let f=o.get(d),v=this[d];f!==v&&(!e.waitUntilFirstUpdate||this.hasUpdated)&&this[i](f,v)}}),a.call(this,o)}}}import{LitElement as Ge}from"lit";import{unsafeStatic as Xe,html as Ze}from"lit/static-html.js";var ce=Ve(ne(),1);var y=s=>typeof s=="string",Ue=s=>typeof s=="function",oe=new Map,de="en";function P(s){return[...Array.isArray(s)?s:[s],de]}function $(s,t,e){let r=P(s);e||(e="default");let i;if(typeof e=="string")switch(i={day:"numeric",month:"short",year:"numeric"},e){case"full":i.weekday="long";case"long":i.month="long";break;case"short":i.month="numeric";break}else i=e;return I(()=>x("date",r,e),()=>new Intl.DateTimeFormat(r,i)).format(y(t)?new Date(t):t)}function Ae(s,t,e){let r;if(e||(e="default"),typeof e=="string")switch(r={second:"numeric",minute:"numeric",hour:"numeric"},e){case"full":case"long":r.timeZoneName="short";break;case"short":delete r.second}else r=e;return $(s,t,r)}function A(s,t,e){let r=P(s);return I(()=>x("number",r,e),()=>new Intl.NumberFormat(r,e)).format(t)}function le(s,t,e,{offset:r=0,...i}){var o,l;let a=P(s),n=t?I(()=>x("plural-ordinal",a),()=>new Intl.PluralRules(a,{type:"ordinal"})):I(()=>x("plural-cardinal",a),()=>new Intl.PluralRules(a,{type:"cardinal"}));return(l=(o=i[e])!=null?o:i[n.select(e-r)])!=null?l:i.other}function I(s,t){let e=s(),r=oe.get(e);return r||(r=t(),oe.set(e,r)),r}function x(s,t,e){let r=t.join("-");return`${s}-${r}-${JSON.stringify(e)}`}var ue=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,he="%__lingui_octothorpe__%",Fe=(s,t,e={})=>{let r=t||s,i=n=>typeof n=="object"?n:e[n],a=(n,o)=>{let l=Object.keys(e).length?i("number"):void 0,d=A(r,n,l);return o.replace(new RegExp(he,"g"),d)};return{plural:(n,o)=>{let{offset:l=0}=o,d=le(r,!1,n,o);return a(n-l,d)},selectordinal:(n,o)=>{let{offset:l=0}=o,d=le(r,!0,n,o);return a(n-l,d)},select:qe,number:(n,o)=>A(r,n,i(o)||{style:o}),date:(n,o)=>$(r,n,i(o)||o),time:(n,o)=>Ae(r,n,i(o)||o)}},qe=(s,t)=>{var e;return(e=t[s])!=null?e:t.other};function Pe(s,t,e){return(r={},i)=>{let a=Fe(t,e,i),n=(l,d=!1)=>Array.isArray(l)?l.reduce((f,v)=>{if(v==="#"&&d)return f+he;if(y(v))return f+v;let[B,b,K]=v,D={};b==="plural"||b==="selectordinal"||b==="select"?Object.entries(K).forEach(([R,be])=>{D[R]=n(be,b==="plural"||b==="selectordinal")}):D=K;let M;if(b){let R=a[b];M=R(r[B],D)}else M=r[B];return M==null?f:f+M},""):l,o=n(s);return y(o)&&ue.test(o)?(0,ce.unraw)(o):y(o)?o:o?String(o):""}}var $e=Object.defineProperty,je=(s,t,e)=>t in s?$e(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,Be=(s,t,e)=>(je(s,typeof t!="symbol"?t+"":t,e),e),F=class{constructor(){Be(this,"_events",{})}on(t,e){var i;var r;return(i=(r=this._events)[t])!=null||(r[t]=[]),this._events[t].push(e),()=>this.removeListener(t,e)}removeListener(t,e){let r=this._getListeners(t);if(!r)return;let i=r.indexOf(e);~i&&r.splice(i,1)}emit(t,...e){let r=this._getListeners(t);r&&r.map(i=>i.apply(this,e))}_getListeners(t){let e=this._events[t];return Array.isArray(e)?e:!1}},Ke=Object.defineProperty,ze=(s,t,e)=>t in s?Ke(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e,k=(s,t,e)=>(ze(s,typeof t!="symbol"?t+"":t,e),e),q=class extends F{constructor(t){var e;super(),k(this,"_locale",""),k(this,"_locales"),k(this,"_localeData",{}),k(this,"_messages",{}),k(this,"_missing"),k(this,"_messageCompiler"),k(this,"t",this._.bind(this)),t.missing!=null&&(this._missing=t.missing),t.messages!=null&&this.load(t.messages),t.localeData!=null&&this.loadLocaleData(t.localeData),(typeof t.locale=="string"||t.locales)&&this.activate((e=t.locale)!=null?e:de,t.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var t;return(t=this._messages[this._locale])!=null?t:{}}get localeData(){var t;return(t=this._localeData[this._locale])!=null?t:{}}_loadLocaleData(t,e){let r=this._localeData[t];r?Object.assign(r,e):this._localeData[t]=e}setMessagesCompiler(t){return this._messageCompiler=t,this}loadLocaleData(t,e){typeof t=="string"?this._loadLocaleData(t,e):Object.keys(t).forEach(r=>this._loadLocaleData(r,t[r])),this.emit("change")}_load(t,e){let r=this._messages[t];r?Object.assign(r,e):this._messages[t]=e}load(t,e){typeof t=="string"&&typeof e=="object"?this._load(t,e):Object.entries(t).forEach(([r,i])=>this._load(r,i)),this.emit("change")}loadAndActivate({locale:t,locales:e,messages:r}){this._locale=t,this._locales=e||void 0,this._messages[this._locale]=r,this.emit("change")}activate(t,e){this._locale=t,this._locales=e,this.emit("change")}_(t,e,r){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let i=r==null?void 0:r.message;t||(t=""),y(t)||(e=t.values||e,i=t.message,t=t.id);let a=this.messages[t],n=a===void 0,o=this._missing;if(o&&n)return Ue(o)?o(this._locale,t):o;n&&this.emit("missing",{id:t,locale:this._locale});let l=a||i||t;return y(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
13
+
14
+ > ${l}
15
+
16
+ That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
17
+ ICU features such as interpolation and plurals will not work properly for that message.
18
+
19
+ Please compile your catalog first.
20
+ `)),y(l)&&ue.test(l)?JSON.parse(`"${l}"`):y(l)?l:Pe(l,this._locale,this._locales)(e,r==null?void 0:r.formats)}date(t,e){return $(this._locales||this._locale,t,e)}number(t,e){return A(this._locales||this._locale,t,e)}};function Je(s={}){return new q(s)}var S=Je();var Qe=JSON.parse('{"icon.title.check":["Sjekkmerke"]}'),Ye=JSON.parse('{"icon.title.check":["Checkmark"]}'),We=JSON.parse('{"icon.title.check":["Valintamerkki"]}'),et=JSON.parse('{"icon.title.check":["Flueben"]}'),tt=JSON.parse('{"icon.title.check":["Bock"]}'),fe=["en","nb","fi","da","sv"],me="en",rt=()=>{var s;let t;switch((s=process==null?void 0:process.env)==null?void 0:s.NMP_BRAND){case"FINN":t="nb";break;case"TORI":t="fi";break;case"BLOCKET":t="sv";break;case"DBA":t="da";break;default:t="en"}return t},pe=()=>{var s;let t=(s=document==null?void 0:document.location)==null?void 0:s.hostname;return t!=null&&t.includes("finn")?"nb":t.includes("tori")?"fi":t.includes("blocket")?"sv":t.includes("dba")?"da":me},j=s=>fe.find(t=>s===t||s.toLowerCase().includes(t))||pe();function st(){var s;if(typeof window=="undefined"){let t=rt();return j(t)}try{let t=(s=document==null?void 0:document.documentElement)==null?void 0:s.lang,e=pe();return fe.includes(t)?j(t!=null?t:e):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),j(e))}catch(t){return console.warn("could not detect locale, falling back to source locale",t),me}}var it=(s,t,e,r,i,a)=>s==="nb"?e:s==="fi"?r:s==="da"?i:s==="sv"?a:t,at=(s,t,e,r,i)=>{let a=st(),n=it(a,s,t,e,r,i);S.load(a,n),S.activate(a)};at(Ye,Qe,We,et,tt);var nt=class extends Ge{render(){let s=S.t({message:"Checkmark",id:"icon.title.check",comment:"Title for check icon"});return Ze`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-check-16-part">${Xe(`<title>${s}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.83 7.667 7.163 11l5.334-6"></path></svg>`}};customElements.get("w-icon-check-16")||customElements.define("w-icon-check-16",nt);import{css as ot}from"lit";var ge=ot`
21
+ :host {
22
+ display: block;
23
+ user-select: none;
24
+ -webkit-user-select: none;
25
+ }
26
+
27
+ [part~='control'] {
28
+ position: relative;
29
+ width: 2rem;
30
+ height: 2rem;
31
+ border-color: var(--w-s-color-border);
32
+ border-radius: 2px;
33
+ border-style: solid;
34
+ border-width: 1px;
35
+ background-color: var(--w-s-color-background);
36
+ transition-property: all;
37
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
38
+ transition-duration: 150ms;
39
+ margin-right: 0.8rem;
40
+ text-align: center;
41
+ line-height: var(--w-line-height-xs);
42
+ font-size: var(--w-font-size-m);
43
+ }
44
+
45
+ [part~='base'] {
46
+ display: flex;
47
+ align-items: center;
48
+ position: relative;
49
+ color: currentColor;
50
+ vertical-align: middle;
51
+ cursor: pointer;
52
+ }
53
+
54
+ [part~='label'] {
55
+ display: block;
56
+ font-size: var(--w-font-size-m);
57
+ line-height: var(--w-line-height-m);
58
+ user-select: none;
59
+ cursor: pointer;
60
+ padding: 0.2rem 0;
61
+ }
62
+
63
+ label:hover [part~='control']:not(:has(:checked, :indeterminate)) {
64
+ background-color: var(--w-s-color-background-hover);
65
+ border-color: var(--w-s-color-border-primary);
66
+ }
67
+
68
+ label:hover [part~='control']:has(:checked, :indeterminate) {
69
+ border-color: var(--w-s-color-border-primary-hover);
70
+ background-color: var(--w-s-color-background-primary-hover);
71
+ }
72
+
73
+ [part~='control']:has(:checked, :indeterminate) {
74
+ color: var(--checked-icon-color, white);
75
+ border-color: var(--w-s-color-border-primary);
76
+ background-color: var(--w-s-color-background-primary);
77
+ }
78
+
79
+ [part~='control']:has(:indeterminate) {
80
+ font-weight: 700;
81
+ }
82
+
83
+ [part~='control']:has(:invalid) {
84
+ border-color: var(--w-s-color-border-negative);
85
+ }
86
+
87
+ [part~='control']:has(:invalid):hover {
88
+ background-color: var(--w-s-color-background-negative-subtle-hover);
89
+ }
90
+
91
+ [part~='control']:has(:checked):has(:invalid) {
92
+ background-color: var(--w-s-color-background-negative);
93
+ }
94
+
95
+ [part~='control']:has(:checked) {
96
+ background-image: var(--w-icon-toggle-checked);
97
+ background-position: center;
98
+ }
99
+
100
+ /* Focus */
101
+ [part~='control']:has(> input:focus-visible:not(:disabled)) {
102
+ outline: var(--wa-focus-ring);
103
+ outline-offset: var(--wa-focus-ring-offset);
104
+ }
105
+
106
+ /* Disabled */
107
+ :host [part~='base']:has(input:disabled) {
108
+ opacity: 0.5;
109
+ cursor: not-allowed;
110
+ }
111
+
112
+ input {
113
+ position: absolute;
114
+ padding: 0;
115
+ margin: 0;
116
+ height: 100%;
117
+ width: 100%;
118
+ opacity: 0;
119
+ pointer-events: none;
120
+ }
121
+
122
+ [part~='icon'] {
123
+ display: flex;
124
+
125
+ input:not(:checked, :indeterminate) + & {
126
+ visibility: hidden;
127
+ }
128
+ }
129
+
130
+ :host([required]) [part~='label']::after {
131
+ content: var(--wa-form-control-required-content);
132
+ color: var(--wa-form-control-required-content-color);
133
+ margin-inline-start: var(--wa-form-control-required-content-offset);
134
+ }`;var ve,u=class extends m{constructor(){super(...arguments);this.hasSlotController=new L(this,"hint");this.title="";this.name="";this._value=(ve=this.getAttribute("value"))!=null?ve:null;this.size="medium";this.disabled=!1;this.indeterminate=!1;this.checked=this.hasAttribute("checked");this.defaultChecked=this.hasAttribute("checked");this.form=null;this.required=!1;this.hint=""}static get validators(){let e=[re({validationProperty:"checked",validationElement:Object.assign(document.createElement("input"),{type:"checkbox",required:!0})})];return[...super.validators,...e]}get value(){var e;return(e=this._value)!=null?e:"on"}set value(e){this._value=e}handleClick(){this.hasInteracted=!0,this.checked=!this.checked,this.indeterminate=!1,this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})}handleDefaultCheckedChange(){!this.hasInteracted&&this.checked!==this.defaultChecked&&(this.checked=this.defaultChecked,this.handleValueOrCheckedChange())}handleValueOrCheckedChange(){this.setValue(this.checked?this.value:null,this._value),this.updateValidity()}handleStateChange(){this.hasUpdated&&(this.input.checked=this.checked,this.input.indeterminate=this.indeterminate),this.customStates.set("checked",this.checked),this.customStates.set("indeterminate",this.indeterminate),this.updateValidity()}handleDisabledChange(){this.customStates.set("disabled",this.disabled)}willUpdate(e){super.willUpdate(e),e.has("defaultChecked")&&(this.hasInteracted||(this.checked=this.defaultChecked)),(e.has("value")||e.has("checked"))&&this.handleValueOrCheckedChange()}formResetCallback(){this.checked=this.defaultChecked,super.formResetCallback(),this.handleValueOrCheckedChange()}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}render(){let e=this.hasSlotController.test("hint"),r=this.hint?!0:!!e,i=!this.checked&&this.indeterminate;return lt`
139
135
  <label part="base">
140
136
  <span part="control">
141
137
  <input
142
138
  class="input"
143
139
  type="checkbox"
144
- title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
140
+ title=${this.title}
145
141
  name=${this.name}
146
- value=${ifDefined(this._value)}
147
- .indeterminate=${live(this.indeterminate)}
148
- .checked=${live(this.checked)}
142
+ value=${ut(this._value)}
143
+ .indeterminate=${ye(this.indeterminate)}
144
+ .checked=${ye(this.checked)}
149
145
  .disabled=${this.disabled}
150
146
  .required=${this.required}
151
- aria-checked=${this.checked ? 'true' : 'false'}
147
+ aria-checked=${this.checked?"true":"false"}
152
148
  aria-describedby="hint"
153
149
  @click=${this.handleClick} />
154
- ${isIndeterminate ? '–' : ''}
150
+ ${i?"\u2013":""}
155
151
  </span>
156
152
 
157
153
  <slot part="label"></slot>
158
154
  </label>
159
155
 
160
- <slot id="hint" part="hint" name="hint" aria-hidden=${hasHint ? 'false' : 'true'} class="${classMap({ 'has-slotted': hasHint })}">
156
+ <slot id="hint" part="hint" name="hint" aria-hidden=${r?"false":"true"} class="${dt({"has-slotted":r})}">
161
157
  ${this.hint}
162
158
  </slot>
163
- `;
164
- }
165
- }
166
- __decorate([
167
- query('input[type="checkbox"]')
168
- ], WCheckbox.prototype, "input", void 0);
169
- __decorate([
170
- property()
171
- ], WCheckbox.prototype, "title", void 0);
172
- __decorate([
173
- property({ reflect: true })
174
- ], WCheckbox.prototype, "name", void 0);
175
- __decorate([
176
- property({ reflect: true })
177
- ], WCheckbox.prototype, "value", null);
178
- __decorate([
179
- property({ reflect: true })
180
- ], WCheckbox.prototype, "size", void 0);
181
- __decorate([
182
- property({ type: Boolean })
183
- ], WCheckbox.prototype, "disabled", void 0);
184
- __decorate([
185
- property({ type: Boolean, reflect: true })
186
- ], WCheckbox.prototype, "indeterminate", void 0);
187
- __decorate([
188
- property({ type: Boolean, attribute: false })
189
- ], WCheckbox.prototype, "checked", void 0);
190
- __decorate([
191
- property({ type: Boolean, reflect: true, attribute: 'checked' })
192
- ], WCheckbox.prototype, "defaultChecked", void 0);
193
- __decorate([
194
- property({ reflect: true })
195
- ], WCheckbox.prototype, "form", void 0);
196
- __decorate([
197
- property({ type: Boolean, reflect: true })
198
- ], WCheckbox.prototype, "required", void 0);
199
- __decorate([
200
- property()
201
- ], WCheckbox.prototype, "hint", void 0);
202
- __decorate([
203
- watch('defaultChecked')
204
- ], WCheckbox.prototype, "handleDefaultCheckedChange", null);
205
- __decorate([
206
- watch(['checked', 'indeterminate'])
207
- ], WCheckbox.prototype, "handleStateChange", null);
208
- __decorate([
209
- watch('disabled')
210
- ], WCheckbox.prototype, "handleDisabledChange", null);
159
+ `}};u.css=[ge],u.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0},c([ct('input[type="checkbox"]')],u.prototype,"input",2),c([p()],u.prototype,"title",2),c([p({reflect:!0})],u.prototype,"name",2),c([p({reflect:!0})],u.prototype,"value",1),c([p({reflect:!0})],u.prototype,"size",2),c([p({type:Boolean})],u.prototype,"disabled",2),c([p({type:Boolean,reflect:!0})],u.prototype,"indeterminate",2),c([p({type:Boolean,attribute:!1})],u.prototype,"checked",2),c([p({type:Boolean,reflect:!0,attribute:"checked"})],u.prototype,"defaultChecked",2),c([p({reflect:!0})],u.prototype,"form",2),c([p({type:Boolean,reflect:!0})],u.prototype,"required",2),c([p()],u.prototype,"hint",2),c([O("defaultChecked")],u.prototype,"handleDefaultCheckedChange",1),c([O(["checked","indeterminate"])],u.prototype,"handleStateChange",1),c([O("disabled")],u.prototype,"handleDisabledChange",1);export{u as WCheckbox};
160
+ //# sourceMappingURL=checkbox.js.map