select-modal.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { proxyCustomElement, HTMLElement, h, forceUpdate, Host } from '@stencil/core/internal/client';
  5. import { b as getIonMode } from './ionic-global.js';
  6. import { s as safeCall } from './overlays.js';
  7. import { g as getClassMap } from './theme.js';
  8. import { d as defineCustomElement$d } from './button.js';
  9. import { d as defineCustomElement$c } from './buttons.js';
  10. import { d as defineCustomElement$b } from './checkbox.js';
  11. import { d as defineCustomElement$a } from './content.js';
  12. import { d as defineCustomElement$9 } from './header.js';
  13. import { d as defineCustomElement$8 } from './icon.js';
  14. import { d as defineCustomElement$7 } from './item.js';
  15. import { d as defineCustomElement$6 } from './list.js';
  16. import { d as defineCustomElement$5 } from './radio.js';
  17. import { d as defineCustomElement$4 } from './radio-group.js';
  18. import { d as defineCustomElement$3 } from './ripple-effect.js';
  19. import { d as defineCustomElement$2 } from './title.js';
  20. import { d as defineCustomElement$1 } from './toolbar.js';
  21. const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
  22. const IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
  23. const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:\"\"}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}";
  24. const IonSelectModalIosStyle0 = selectModalIosCss;
  25. const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
  26. const IonSelectModalMdStyle0 = selectModalMdCss;
  27. const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends HTMLElement {
  28. constructor() {
  29. super();
  30. this.__registerHost();
  31. this.header = undefined;
  32. this.multiple = undefined;
  33. this.options = [];
  34. }
  35. closeModal() {
  36. const modal = this.el.closest('ion-modal');
  37. if (modal) {
  38. modal.dismiss();
  39. }
  40. }
  41. findOptionFromEvent(ev) {
  42. const { options } = this;
  43. return options.find((o) => o.value === ev.target.value);
  44. }
  45. getValues(ev) {
  46. const { multiple, options } = this;
  47. if (multiple) {
  48. // this is a modal with checkboxes (multiple value select)
  49. // return an array of all the checked values
  50. return options.filter((o) => o.checked).map((o) => o.value);
  51. }
  52. // this is a modal with radio buttons (single value select)
  53. // return the value that was clicked, otherwise undefined
  54. const option = ev ? this.findOptionFromEvent(ev) : null;
  55. return option ? option.value : undefined;
  56. }
  57. callOptionHandler(ev) {
  58. const option = this.findOptionFromEvent(ev);
  59. const values = this.getValues(ev);
  60. if (option === null || option === void 0 ? void 0 : option.handler) {
  61. safeCall(option.handler, values);
  62. }
  63. }
  64. setChecked(ev) {
  65. const { multiple } = this;
  66. const option = this.findOptionFromEvent(ev);
  67. // this is a modal with checkboxes (multiple value select)
  68. // we need to set the checked value for this option
  69. if (multiple && option) {
  70. option.checked = ev.detail.checked;
  71. }
  72. }
  73. renderRadioOptions() {
  74. const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
  75. return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
  76. // TODO FW-4784
  77. 'item-radio-checked': option.value === checked
  78. }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
  79. if (ev.key === ' ') {
  80. /**
  81. * Selecting a radio option with keyboard navigation,
  82. * either through the Enter or Space keys, should
  83. * dismiss the modal.
  84. */
  85. this.closeModal();
  86. }
  87. } }, option.text))))));
  88. }
  89. renderCheckboxOptions() {
  90. return this.options.map((option) => (h("ion-item", { class: Object.assign({
  91. // TODO FW-4784
  92. 'item-checkbox-checked': option.checked
  93. }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
  94. this.setChecked(ev);
  95. this.callOptionHandler(ev);
  96. // TODO FW-4784
  97. forceUpdate(this);
  98. } }, option.text))));
  99. }
  100. render() {
  101. return (h(Host, { key: '885198a9f21884e3bfb9bf0af53e0ee3ae37b231', class: getIonMode(this) }, h("ion-header", { key: 'd8b63726869747ac711e4fda78a50ce46f72970c' }, h("ion-toolbar", { key: '9ab2a4c1480dd74eeae38d7b580a2e87fb71270e' }, this.header !== undefined && h("ion-title", { key: '87a7034385ef57f55cefdd0371dbb66a64827290' }, this.header), h("ion-buttons", { key: '0a35424ea13ca002abc9a43b6138730254f187d0', slot: "end" }, h("ion-button", { key: '238bf40b47128d9aa995d14d9ff9ebcae4f79492', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '4a256f3381f8cabbc7194337b8ae4aa1c3ab1066' }, h("ion-list", { key: 'acd38fc52024632176467ed6a84106a454021544' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
  102. }
  103. get el() { return this; }
  104. static get style() { return {
  105. ionic: IonSelectModalIonicStyle0,
  106. ios: IonSelectModalIosStyle0,
  107. md: IonSelectModalMdStyle0
  108. }; }
  109. }, [34, "ion-select-modal", {
  110. "header": [1],
  111. "multiple": [4],
  112. "options": [16]
  113. }]);
  114. function defineCustomElement() {
  115. if (typeof customElements === "undefined") {
  116. return;
  117. }
  118. const components = ["ion-select-modal", "ion-button", "ion-buttons", "ion-checkbox", "ion-content", "ion-header", "ion-icon", "ion-item", "ion-list", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-title", "ion-toolbar"];
  119. components.forEach(tagName => { switch (tagName) {
  120. case "ion-select-modal":
  121. if (!customElements.get(tagName)) {
  122. customElements.define(tagName, SelectModal);
  123. }
  124. break;
  125. case "ion-button":
  126. if (!customElements.get(tagName)) {
  127. defineCustomElement$d();
  128. }
  129. break;
  130. case "ion-buttons":
  131. if (!customElements.get(tagName)) {
  132. defineCustomElement$c();
  133. }
  134. break;
  135. case "ion-checkbox":
  136. if (!customElements.get(tagName)) {
  137. defineCustomElement$b();
  138. }
  139. break;
  140. case "ion-content":
  141. if (!customElements.get(tagName)) {
  142. defineCustomElement$a();
  143. }
  144. break;
  145. case "ion-header":
  146. if (!customElements.get(tagName)) {
  147. defineCustomElement$9();
  148. }
  149. break;
  150. case "ion-icon":
  151. if (!customElements.get(tagName)) {
  152. defineCustomElement$8();
  153. }
  154. break;
  155. case "ion-item":
  156. if (!customElements.get(tagName)) {
  157. defineCustomElement$7();
  158. }
  159. break;
  160. case "ion-list":
  161. if (!customElements.get(tagName)) {
  162. defineCustomElement$6();
  163. }
  164. break;
  165. case "ion-radio":
  166. if (!customElements.get(tagName)) {
  167. defineCustomElement$5();
  168. }
  169. break;
  170. case "ion-radio-group":
  171. if (!customElements.get(tagName)) {
  172. defineCustomElement$4();
  173. }
  174. break;
  175. case "ion-ripple-effect":
  176. if (!customElements.get(tagName)) {
  177. defineCustomElement$3();
  178. }
  179. break;
  180. case "ion-title":
  181. if (!customElements.get(tagName)) {
  182. defineCustomElement$2();
  183. }
  184. break;
  185. case "ion-toolbar":
  186. if (!customElements.get(tagName)) {
  187. defineCustomElement$1();
  188. }
  189. break;
  190. } });
  191. }
  192. export { SelectModal as S, defineCustomElement as d };