242 lines
16 KiB
JavaScript
242 lines
16 KiB
JavaScript
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[24],{
|
|
|
|
/***/ "./node_modules/@ionic/core/dist/esm/ion-radio_2.entry.js":
|
|
/*!****************************************************************!*\
|
|
!*** ./node_modules/@ionic/core/dist/esm/ion-radio_2.entry.js ***!
|
|
\****************************************************************/
|
|
/*! exports provided: ion_radio, ion_radio_group */
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ion_radio", function() { return Radio; });
|
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ion_radio_group", function() { return RadioGroup; });
|
|
/* harmony import */ var _index_92848855_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index-92848855.js */ "./node_modules/@ionic/core/dist/esm/index-92848855.js");
|
|
/* harmony import */ var _ionic_global_23e7365a_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ionic-global-23e7365a.js */ "./node_modules/@ionic/core/dist/esm/ionic-global-23e7365a.js");
|
|
/* harmony import */ var _helpers_5c745fbd_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helpers-5c745fbd.js */ "./node_modules/@ionic/core/dist/esm/helpers-5c745fbd.js");
|
|
/* harmony import */ var _theme_5641d27f_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./theme-5641d27f.js */ "./node_modules/@ionic/core/dist/esm/theme-5641d27f.js");
|
|
|
|
|
|
|
|
|
|
|
|
const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}button{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}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--color-checked:var(--ion-color-primary, #3880ff);width:15px;height:24px}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{margin-left:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.item-radio.item-ios ion-label{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-9px;top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-9px}:host(.in-item){margin-left:10px;margin-right:11px;margin-top:8px;margin-bottom:8px;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:10px;margin-inline-start:10px;-webkit-margin-end:11px;margin-inline-end:11px}}:host(.in-item[slot=start]){margin-left:3px;margin-right:21px;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:3px;margin-inline-start:3px;-webkit-margin-end:21px;margin-inline-end:21px}}";
|
|
|
|
const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}button{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}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--color:var(--ion-color-step-400, #999999);--color-checked:var(--ion-color-primary, #3880ff);--border-width:2px;--border-style:solid;--border-radius:50%;width:20px;height:20px}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-12px;top:-12px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-12px}:host(.in-item){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:11px;margin-bottom:10px}@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}}";
|
|
|
|
const Radio = class {
|
|
constructor(hostRef) {
|
|
Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
|
|
this.ionStyle = Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["e"])(this, "ionStyle", 7);
|
|
this.ionFocus = Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["e"])(this, "ionFocus", 7);
|
|
this.ionBlur = Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["e"])(this, "ionBlur", 7);
|
|
this.inputId = `ion-rb-${radioButtonIds++}`;
|
|
this.radioGroup = null;
|
|
/**
|
|
* If `true`, the radio is selected.
|
|
*/
|
|
this.checked = false;
|
|
/**
|
|
* The tabindex of the radio button.
|
|
* @internal
|
|
*/
|
|
this.buttonTabindex = -1;
|
|
/**
|
|
* The name of the control, which is submitted with the form data.
|
|
*/
|
|
this.name = this.inputId;
|
|
/**
|
|
* If `true`, the user cannot interact with the radio.
|
|
*/
|
|
this.disabled = false;
|
|
this.updateState = () => {
|
|
if (this.radioGroup) {
|
|
this.checked = this.radioGroup.value === this.value;
|
|
}
|
|
};
|
|
this.onFocus = () => {
|
|
this.ionFocus.emit();
|
|
};
|
|
this.onBlur = () => {
|
|
this.ionBlur.emit();
|
|
};
|
|
}
|
|
/** @internal */
|
|
async setFocus() {
|
|
if (this.buttonEl) {
|
|
this.buttonEl.focus();
|
|
}
|
|
}
|
|
/** @internal */
|
|
async setButtonTabindex(value) {
|
|
this.buttonTabindex = value;
|
|
}
|
|
connectedCallback() {
|
|
if (this.value === undefined) {
|
|
this.value = this.inputId;
|
|
}
|
|
const radioGroup = this.radioGroup = this.el.closest('ion-radio-group');
|
|
if (radioGroup) {
|
|
this.updateState();
|
|
radioGroup.addEventListener('ionChange', this.updateState);
|
|
}
|
|
}
|
|
disconnectedCallback() {
|
|
const radioGroup = this.radioGroup;
|
|
if (radioGroup) {
|
|
radioGroup.removeEventListener('ionChange', this.updateState);
|
|
this.radioGroup = null;
|
|
}
|
|
}
|
|
componentWillLoad() {
|
|
this.emitStyle();
|
|
}
|
|
emitStyle() {
|
|
this.ionStyle.emit({
|
|
'radio-checked': this.checked,
|
|
'interactive-disabled': this.disabled,
|
|
});
|
|
}
|
|
render() {
|
|
const { inputId, disabled, checked, color, el, buttonTabindex } = this;
|
|
const mode = Object(_ionic_global_23e7365a_js__WEBPACK_IMPORTED_MODULE_1__["b"])(this);
|
|
const labelId = inputId + '-lbl';
|
|
const label = Object(_helpers_5c745fbd_js__WEBPACK_IMPORTED_MODULE_2__["f"])(el);
|
|
if (label) {
|
|
label.id = labelId;
|
|
}
|
|
return (Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["H"], { role: "radio", "aria-disabled": disabled ? 'true' : null, "aria-checked": `${checked}`, "aria-labelledby": labelId, class: Object(_theme_5641d27f_js__WEBPACK_IMPORTED_MODULE_3__["c"])(color, {
|
|
[mode]: true,
|
|
'in-item': Object(_theme_5641d27f_js__WEBPACK_IMPORTED_MODULE_3__["h"])('ion-item', el),
|
|
'interactive': true,
|
|
'radio-checked': checked,
|
|
'radio-disabled': disabled,
|
|
}) }, Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", { class: "radio-icon", part: "container" }, Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", { class: "radio-inner", part: "mark" })), Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])("button", { ref: btnEl => this.buttonEl = btnEl, type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled, tabindex: buttonTabindex })));
|
|
}
|
|
get el() { return Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["i"])(this); }
|
|
static get watchers() { return {
|
|
"color": ["emitStyle"],
|
|
"checked": ["emitStyle"],
|
|
"disabled": ["emitStyle"]
|
|
}; }
|
|
};
|
|
let radioButtonIds = 0;
|
|
Radio.style = {
|
|
ios: radioIosCss,
|
|
md: radioMdCss
|
|
};
|
|
|
|
const RadioGroup = class {
|
|
constructor(hostRef) {
|
|
Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
|
|
this.ionChange = Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["e"])(this, "ionChange", 7);
|
|
this.inputId = `ion-rg-${radioGroupIds++}`;
|
|
this.labelId = `${this.inputId}-lbl`;
|
|
/**
|
|
* If `true`, the radios can be deselected.
|
|
*/
|
|
this.allowEmptySelection = false;
|
|
/**
|
|
* The name of the control, which is submitted with the form data.
|
|
*/
|
|
this.name = this.inputId;
|
|
this.setRadioTabindex = (value) => {
|
|
const radios = this.getRadios();
|
|
// Get the first radio that is not disabled and the checked one
|
|
const first = radios.find(radio => !radio.disabled);
|
|
const checked = radios.find(radio => (radio.value === value && !radio.disabled));
|
|
if (!first && !checked) {
|
|
return;
|
|
}
|
|
// If an enabled checked radio exists, set it to be the focusable radio
|
|
// otherwise we default to focus the first radio
|
|
const focusable = checked || first;
|
|
for (const radio of radios) {
|
|
const tabindex = radio === focusable ? 0 : -1;
|
|
radio.setButtonTabindex(tabindex);
|
|
}
|
|
};
|
|
this.onClick = (ev) => {
|
|
const selectedRadio = ev.target && ev.target.closest('ion-radio');
|
|
if (selectedRadio) {
|
|
const currentValue = this.value;
|
|
const newValue = selectedRadio.value;
|
|
if (newValue !== currentValue) {
|
|
this.value = newValue;
|
|
}
|
|
else if (this.allowEmptySelection) {
|
|
this.value = undefined;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
valueChanged(value) {
|
|
this.setRadioTabindex(value);
|
|
this.ionChange.emit({ value });
|
|
}
|
|
componentDidLoad() {
|
|
this.setRadioTabindex(this.value);
|
|
}
|
|
async connectedCallback() {
|
|
// Get the list header if it exists and set the id
|
|
// this is used to set aria-labelledby
|
|
const el = this.el;
|
|
const header = el.querySelector('ion-list-header') || el.querySelector('ion-item-divider');
|
|
if (header) {
|
|
const label = header.querySelector('ion-label');
|
|
if (label) {
|
|
this.labelId = label.id = this.name + '-lbl';
|
|
}
|
|
}
|
|
}
|
|
getRadios() {
|
|
return Array.from(this.el.querySelectorAll('ion-radio'));
|
|
}
|
|
onKeydown(ev) {
|
|
if (ev.target && !this.el.contains(ev.target)) {
|
|
return;
|
|
}
|
|
// Get all radios inside of the radio group and then
|
|
// filter out disabled radios since we need to skip those
|
|
const radios = Array.from(this.el.querySelectorAll('ion-radio')).filter(radio => !radio.disabled);
|
|
// Only move the radio if the current focus is in the radio group
|
|
if (ev.target && radios.includes(ev.target)) {
|
|
const index = radios.findIndex(radio => radio === ev.target);
|
|
let next;
|
|
// If hitting arrow down or arrow right, move to the next radio
|
|
// If we're on the last radio, move to the first radio
|
|
if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
|
|
next = (index === radios.length - 1)
|
|
? radios[0]
|
|
: radios[index + 1];
|
|
}
|
|
// If hitting arrow up or arrow left, move to the previous radio
|
|
// If we're on the first radio, move to the last radio
|
|
if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
|
|
next = (index === 0)
|
|
? radios[radios.length - 1]
|
|
: radios[index - 1];
|
|
}
|
|
if (next && radios.includes(next)) {
|
|
next.setFocus();
|
|
this.value = next.value;
|
|
}
|
|
}
|
|
}
|
|
render() {
|
|
return (Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["h"])(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["H"], { role: "radiogroup", "aria-labelledby": this.labelId, onClick: this.onClick, class: Object(_ionic_global_23e7365a_js__WEBPACK_IMPORTED_MODULE_1__["b"])(this) }));
|
|
}
|
|
get el() { return Object(_index_92848855_js__WEBPACK_IMPORTED_MODULE_0__["i"])(this); }
|
|
static get watchers() { return {
|
|
"value": ["valueChanged"]
|
|
}; }
|
|
};
|
|
let radioGroupIds = 0;
|
|
|
|
|
|
|
|
|
|
/***/ })
|
|
|
|
}]);
|
|
//# sourceMappingURL=24-es2015.js.map
|