https://studio.ironflock.com/vendor/v-vaadin-checkbox-Ccpd9HAy.js

1import{css as e,unsafeCSS as t}from"./v-lit-reactive-element-Bam2ilA-.js";import{html as n}from"./v-lit-html-B3oYDcAv.js";import{n as r}from"./shared-DQVDLu-U.js";import{n as i}from"./shared-ChOkXhPJ2.js";import{t as a}from"./shared-DoLpwos02.js";import{r as o,t as s}from"./shared-Br7Y5mRb2.js";import{t as c}from"./shared-Be1EC8g62.js";import{t as l}from"./shared-w8NfsLOa2.js";import{t as u}from"./shared-8B-a3yOW2.js";import{ThemableMixin as d}from"./v-vaadin-vaadin-themable-mixin-GJAsPuoO.js";import{t as f}from"./shared-CbG54vgR2.js";import{n as p}from"./shared-CZuXNXMV.js";import{n as m,r as h,t as g}from"./shared-D05yiGf-.js";import{t as _}from"./shared-DOkhRfCE.js";var v=(n,r=n)=>e`
2  :host {
3    align-items: baseline;
4    column-gap: var(--vaadin-${t(r)}-gap, var(--vaadin-gap-s));
5    grid-template: none;
6    grid-template-columns: auto 1fr;
7    grid-template-rows: repeat(auto-fill, minmax(0, max-content));
8    -webkit-tap-highlight-color: transparent;
9    --_cursor: var(--vaadin-clickable-cursor);
10  }
11
12  :host([disabled]) {
13    --_cursor: var(--vaadin-disabled-cursor);
14  }
15
16  :host(:not([has-label])) {
17    column-gap: 0;
18  }
19
20  [part='${t(n)}'],
21  ::slotted(input),
22  [part='label'],
23  ::slotted(label) {
24    grid-row: 1;
25  }
26
27  [part='label'],
28  ::slotted(label) {
29    font-size: var(--vaadin-${t(r)}-label-font-size, var(--vaadin-input-field-label-font-size, inherit));
30    line-height: var(--vaadin-${t(r)}-label-line-height, var(--vaadin-input-field-label-line-height, inherit));
31    font-weight: var(--vaadin-${t(r)}-font-weight, var(--vaadin-input-field-label-font-weight, 500));
32    color: var(--vaadin-${t(r)}-label-color, var(--vaadin-input-field-label-color, var(--vaadin-text-color)));
33    word-break: break-word;
34    cursor: var(--_cursor);
35    /* TODO clicking the label part doesn't toggle the checked state, even though it triggers the active state */
36  }
37
38  [part='${t(n)}'],
39  ::slotted(input) {
40    grid-column: 1;
41  }
42
43  [part='label'],
44  [part='helper-text'],
45  [part='error-message'] {
46    margin-bottom: 0;
47    grid-column: 2;
48    width: auto;
49    min-width: auto;
50  }
51
52  [part='helper-text'],
53  [part='error-message'] {
54    margin-top: var(--_gap-s);
55    grid-row: auto;
56  }
57
58  /* Baseline vertical alignment */
59  :host::before {
60    grid-row: 1;
61    margin: 0;
62    padding: 0;
63    border: 0;
64  }
65
66  /* visually hidden */
67  ::slotted(input) {
68    cursor: inherit;
69    align-self: stretch;
70    appearance: none;
71    cursor: var(--_cursor);
72    /* Ensure minimum click target (WCAG) */
73    margin: min(0px, (24px - 100%) / -2) !important;
74    /* Extend the input to cover the gap between the checkbox/radio and label */
75    margin-inline-end: calc(min(0px, (24px - 100%) / -2) - var(--vaadin-${t(r)}-gap, var(--vaadin-gap-s))) !important;
76  }
77
78  /* Control container (checkbox, radio button) */
79  [part='${t(n)}'] {
80    background: var(--vaadin-${t(r)}-background, var(--vaadin-background-color));
81    border-color: var(--vaadin-${t(r)}-border-color, var(--vaadin-input-field-border-color, var(--vaadin-border-color)));
82    border-radius: var(--vaadin-${t(r)}-border-radius, var(--vaadin-radius-s));
83    border-style: var(--_border-style, solid);
84    --_border-width: var(--vaadin-${t(r)}-border-width, var(--vaadin-input-field-border-width, 1px));
85    border-width: var(--_border-width);
86    box-sizing: border-box;
87    --_color: var(--vaadin-${t(r)}-marker-color, var(--vaadin-${t(r)}-background, var(--vaadin-background-color)));
88    color: var(--_color);
89    height: var(--vaadin-${t(r)}-size, 1lh);
90    width: var(--vaadin-${t(r)}-size, 1lh);
91    position: relative;
92    cursor: var(--_cursor);
93    display: flex;
94    align-items: center;
95    justify-content: center;
96  }
97
98  :host(:is([checked], [indeterminate])) {
99    --vaadin-${t(r)}-background: var(--vaadin-text-color);
100    --vaadin-${t(r)}-border-color: transparent;
101  }
102
103  :host([disabled]) {
104    --vaadin-${t(r)}-background: var(--vaadin-input-field-disabled-background, var(--vaadin-background-container-strong));
105    --vaadin-${t(r)}-border-color: transparent;
106    --vaadin-${t(r)}-marker-color: var(--vaadin-text-color-disabled);
107  }
108
109  /* Focus ring */
110  :host([focus-ring]) [part='${t(n)}'] {
111    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
112    outline-offset: calc(var(--_border-width) * -1);
113  }
114
115  :host([focus-ring]:is([checked], [indeterminate])) [part='${t(n)}'] {
116    outline-offset: 1px;
117  }
118
119  :host([readonly][focus-ring]) [part='${t(n)}'] {
120    --vaadin-${t(r)}-border-color: transparent;
121    outline-offset: calc(var(--_border-width) * -1);
122    outline-style: dashed;
123  }
124
125  /* Checked indicator (checkmark, dot) */
126  [part='${t(n)}']::after {
127    content: '\\2003' / '';
128    background: currentColor;
129    border-radius: inherit;
130    display: flex;
131    align-items: center;
132    --_filter: var(--vaadin-${t(r)}-marker-color, saturate(0) invert(1) hue-rotate(180deg) contrast(100) brightness(100));
133    filter: var(--_filter);
134  }
135
136  :host(:not([checked], [indeterminate])) [part='${t(n)}']::after {
137    opacity: 0;
138  }
139
140  @media (forced-colors: active) {
141    :host(:is([checked], [indeterminate])) {
142      --vaadin-${t(r)}-border-color: CanvasText !important;
143    }
144
145    :host(:is([checked], [indeterminate])) [part='${t(n)}'] {
146      background: SelectedItem !important;
147    }
148
149    :host(:is([checked], [indeterminate])) [part='${t(n)}']::after {
150      background: SelectedItemText !important;
151    }
152
153    :host([readonly]) [part='${t(n)}']::after {
154      background: CanvasText !important;
155    }
156
157    :host([disabled]) {
158      --vaadin-${t(r)}-border-color: GrayText !important;
159    }
160
161    :host([disabled]) [part='${t(n)}']::after {
162      background: GrayText !important;
163    }
164  }
165`,y=e`
166  [part='checkbox'] {
167    color: var(--vaadin-checkbox-checkmark-color, var(--_color));
168  }
169
170  [part='checkbox']::after {
171    inset: 0;
172    mask: var(--_vaadin-icon-checkmark) 50% /
173      var(--vaadin-checkbox-checkmark-size, var(--vaadin-checkbox-marker-size, 100%)) no-repeat;
174    filter: var(--vaadin-checkbox-checkmark-color, var(--_filter));
175  }
176
177  :host([readonly]) {
178    --vaadin-checkbox-background: transparent;
179    --vaadin-checkbox-border-color: var(--vaadin-border-color);
180    --vaadin-checkbox-marker-color: var(--vaadin-text-color);
181    --_border-style: dashed;
182  }
183
184  :host([indeterminate]) [part='checkbox']::after {
185    mask-image: var(--_vaadin-icon-minus);
186  }
187`,b=[f,v(`checkbox`),y],x=e=>class extends p(h(_(i(a(e))))){static get properties(){return{indeterminate:{type:Boolean,notify:!0,value:!1,reflectToAttribute:!0},name:{type:String,value:``},readonly:{type:Boolean,value:!1,reflectToAttribute:!0}}}static get observers(){return[`__readonlyChanged(readonly, inputElement)`]}static get delegateProps(){return[...super.delegateProps,`indeterminate`]}static get delegateAttrs(){return[...super.delegateAttrs,`name`,`invalid`,`required`]}constructor(){super(),this._setType(`checkbox`),this._boundOnInputClick=this._onInputClick.bind(this),this.value=`on`,this.tabindex=0}get slotStyles(){return[`
188          ${this.localName} > input[slot='input'] {
189            opacity: 0;
190          }
191        `]}ready(){super.ready(),this.addController(new m(this,e=>{this._setInputElement(e),this._setFocusElement(e),this.stateTarget=e,this.ariaTarget=e})),this.addController(new g(this.inputElement,this._labelController)),this._createMethodObserver(`_checkedChanged(checked)`)}_shouldSetActive(e){return this.readonly||e.target.localName===`a`||e.target===this._helperNode||e.target===this._errorNode?!1:super._shouldSetActive(e)}_addInputListeners(e){super._addInputListeners(e),e.addEventListener(`click`,this._boundOnInputClick)}_removeInputListeners(e){super._removeInputListeners(e),e.removeEventListener(`click`,this._boundOnInputClick)}_onInputClick(e){this.readonly&&e.preventDefault()}__readonlyChanged(e,t){t&&(e?t.setAttribute(`aria-readonly`,`true`):t.removeAttribute(`aria-readonly`))}_toggleChecked(e){this.indeterminate&&=!1,super._toggleChecked(e)}checkValidity(){return!this.required||!!this.checked}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&this._requestValidation()}_checkedChanged(e){(e||this.__oldChecked)&&this._requestValidation(),this.__oldChecked=e}_requiredChanged(e){super._requiredChanged(e),e===!1&&this._requestValidation()}_onRequiredIndicatorClick(){this._labelNode.click()}},S=class extends x(c(d(s(u(r))))){static get is(){return`vaadin-checkbox`}static get styles(){return b}render(){return n`
192      <div class="vaadin-checkbox-container">
193        <div part="checkbox" aria-hidden="true"></div>
194        <slot name="input"></slot>
195        <div part="label">
196          <slot name="label"></slot>
197          <div part="required-indicator" @click="${this._onRequiredIndicatorClick}"></div>
198        </div>
199        <div part="helper-text">
200          <slot name="helper"></slot>
201        </div>
202        <div part="error-message">
203          <slot name="error-message"></slot>
204        </div>
205      </div>
206      <slot name="tooltip"></slot>
207    `}ready(){super.ready(),this._tooltipController=new l(this),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}};o(S);export{S as Checkbox};