1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | const index = require('./index-a0a08b2a.js');
|
6 | const ionicGlobal = require('./ionic-global-06f21c1a.js');
|
7 | const helpers = require('./helpers-d381ec4d.js');
|
8 | const theme = require('./theme-30b7a575.js');
|
9 |
|
10 | const checkboxIosCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:1px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--background:var(--ion-item-background, var(--ion-background-color, #fff));--size:26px;width:var(--size);height:var(--size)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.in-item[slot=start]){margin-left:2px;margin-right:20px;margin-top:8px;margin-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:20px;margin-inline-end:20px}}";
|
11 |
|
12 | const checkboxMdCss = ":host{--background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.ion-color){--background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.51);--checkmark-width:3;--background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px;width:var(--size);height:var(--size)}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled){opacity:0.3}:host(.in-item){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:18px;margin-bottom:18px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";
|
13 |
|
14 | const Checkbox = class {
|
15 | constructor(hostRef) {
|
16 | index.registerInstance(this, hostRef);
|
17 | this.ionChange = index.createEvent(this, "ionChange", 7);
|
18 | this.ionFocus = index.createEvent(this, "ionFocus", 7);
|
19 | this.ionBlur = index.createEvent(this, "ionBlur", 7);
|
20 | this.ionStyle = index.createEvent(this, "ionStyle", 7);
|
21 | this.inputId = `ion-cb-${checkboxIds++}`;
|
22 | |
23 |
|
24 |
|
25 | this.name = this.inputId;
|
26 | |
27 |
|
28 |
|
29 | this.checked = false;
|
30 | |
31 |
|
32 |
|
33 | this.indeterminate = false;
|
34 | |
35 |
|
36 |
|
37 | this.disabled = false;
|
38 | |
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | this.value = 'on';
|
46 | this.onClick = (ev) => {
|
47 | ev.preventDefault();
|
48 | this.setFocus();
|
49 | this.checked = !this.checked;
|
50 | this.indeterminate = false;
|
51 | };
|
52 | this.onFocus = () => {
|
53 | this.ionFocus.emit();
|
54 | };
|
55 | this.onBlur = () => {
|
56 | this.ionBlur.emit();
|
57 | };
|
58 | }
|
59 | componentWillLoad() {
|
60 | this.emitStyle();
|
61 | }
|
62 | checkedChanged(isChecked) {
|
63 | this.ionChange.emit({
|
64 | checked: isChecked,
|
65 | value: this.value
|
66 | });
|
67 | this.emitStyle();
|
68 | }
|
69 | disabledChanged() {
|
70 | this.emitStyle();
|
71 | }
|
72 | emitStyle() {
|
73 | this.ionStyle.emit({
|
74 | 'checkbox-checked': this.checked,
|
75 | 'interactive-disabled': this.disabled,
|
76 | });
|
77 | }
|
78 | setFocus() {
|
79 | if (this.focusEl) {
|
80 | this.focusEl.focus();
|
81 | }
|
82 | }
|
83 | render() {
|
84 | const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
|
85 | const mode = ionicGlobal.getIonMode(this);
|
86 | const { label, labelId, labelText } = helpers.getAriaLabel(el, inputId);
|
87 | helpers.renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
|
88 | let path = indeterminate
|
89 | ? index.h("path", { d: "M6 12L18 12", part: "mark" })
|
90 | : index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" });
|
91 | if (mode === 'md') {
|
92 | path = indeterminate
|
93 | ? index.h("path", { d: "M2 12H22", part: "mark" })
|
94 | : index.h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" });
|
95 | }
|
96 | return (index.h(index.Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: theme.createColorClasses(color, {
|
97 | [mode]: true,
|
98 | 'in-item': theme.hostContext('ion-item', el),
|
99 | 'checkbox-checked': checked,
|
100 | 'checkbox-disabled': disabled,
|
101 | 'checkbox-indeterminate': indeterminate,
|
102 | 'interactive': true
|
103 | }) }, index.h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), index.h("label", { htmlFor: inputId }, labelText), index.h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: focusEl => this.focusEl = focusEl })));
|
104 | }
|
105 | get el() { return index.getElement(this); }
|
106 | static get watchers() { return {
|
107 | "checked": ["checkedChanged"],
|
108 | "disabled": ["disabledChanged"]
|
109 | }; }
|
110 | };
|
111 | let checkboxIds = 0;
|
112 | Checkbox.style = {
|
113 | ios: checkboxIosCss,
|
114 | md: checkboxMdCss
|
115 | };
|
116 |
|
117 | exports.ion_checkbox = Checkbox;
|