ion-select-modal.cjs.entry.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. 'use strict';
  5. Object.defineProperty(exports, '__esModule', { value: true });
  6. const index = require('./index-2e236a04.js');
  7. const ionicGlobal = require('./ionic-global-6dea5a96.js');
  8. const overlays = require('./overlays-4c291a05.js');
  9. const theme = require('./theme-d1c573d2.js');
  10. require('./index-cc858e97.js');
  11. require('./index-c8d52405.js');
  12. require('./helpers-8a48fdea.js');
  13. require('./hardware-back-button-3d2b1004.js');
  14. require('./framework-delegate-862d9d00.js');
  15. require('./gesture-controller-9436f482.js');
  16. 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)}";
  17. const IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
  18. 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)}";
  19. const IonSelectModalIosStyle0 = selectModalIosCss;
  20. 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)}";
  21. const IonSelectModalMdStyle0 = selectModalMdCss;
  22. const SelectModal = class {
  23. constructor(hostRef) {
  24. index.registerInstance(this, hostRef);
  25. this.header = undefined;
  26. this.multiple = undefined;
  27. this.options = [];
  28. }
  29. closeModal() {
  30. const modal = this.el.closest('ion-modal');
  31. if (modal) {
  32. modal.dismiss();
  33. }
  34. }
  35. findOptionFromEvent(ev) {
  36. const { options } = this;
  37. return options.find((o) => o.value === ev.target.value);
  38. }
  39. getValues(ev) {
  40. const { multiple, options } = this;
  41. if (multiple) {
  42. // this is a modal with checkboxes (multiple value select)
  43. // return an array of all the checked values
  44. return options.filter((o) => o.checked).map((o) => o.value);
  45. }
  46. // this is a modal with radio buttons (single value select)
  47. // return the value that was clicked, otherwise undefined
  48. const option = ev ? this.findOptionFromEvent(ev) : null;
  49. return option ? option.value : undefined;
  50. }
  51. callOptionHandler(ev) {
  52. const option = this.findOptionFromEvent(ev);
  53. const values = this.getValues(ev);
  54. if (option === null || option === void 0 ? void 0 : option.handler) {
  55. overlays.safeCall(option.handler, values);
  56. }
  57. }
  58. setChecked(ev) {
  59. const { multiple } = this;
  60. const option = this.findOptionFromEvent(ev);
  61. // this is a modal with checkboxes (multiple value select)
  62. // we need to set the checked value for this option
  63. if (multiple && option) {
  64. option.checked = ev.detail.checked;
  65. }
  66. }
  67. renderRadioOptions() {
  68. const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
  69. return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (index.h("ion-item", { lines: "none", class: Object.assign({
  70. // TODO FW-4784
  71. 'item-radio-checked': option.value === checked
  72. }, theme.getClassMap(option.cssClass)) }, index.h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
  73. if (ev.key === ' ') {
  74. /**
  75. * Selecting a radio option with keyboard navigation,
  76. * either through the Enter or Space keys, should
  77. * dismiss the modal.
  78. */
  79. this.closeModal();
  80. }
  81. } }, option.text))))));
  82. }
  83. renderCheckboxOptions() {
  84. return this.options.map((option) => (index.h("ion-item", { class: Object.assign({
  85. // TODO FW-4784
  86. 'item-checkbox-checked': option.checked
  87. }, theme.getClassMap(option.cssClass)) }, index.h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
  88. this.setChecked(ev);
  89. this.callOptionHandler(ev);
  90. // TODO FW-4784
  91. index.forceUpdate(this);
  92. } }, option.text))));
  93. }
  94. render() {
  95. return (index.h(index.Host, { key: '885198a9f21884e3bfb9bf0af53e0ee3ae37b231', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: 'd8b63726869747ac711e4fda78a50ce46f72970c' }, index.h("ion-toolbar", { key: '9ab2a4c1480dd74eeae38d7b580a2e87fb71270e' }, this.header !== undefined && index.h("ion-title", { key: '87a7034385ef57f55cefdd0371dbb66a64827290' }, this.header), index.h("ion-buttons", { key: '0a35424ea13ca002abc9a43b6138730254f187d0', slot: "end" }, index.h("ion-button", { key: '238bf40b47128d9aa995d14d9ff9ebcae4f79492', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: '4a256f3381f8cabbc7194337b8ae4aa1c3ab1066' }, index.h("ion-list", { key: 'acd38fc52024632176467ed6a84106a454021544' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
  96. }
  97. get el() { return index.getElement(this); }
  98. };
  99. SelectModal.style = {
  100. ionic: IonSelectModalIonicStyle0,
  101. ios: IonSelectModalIosStyle0,
  102. md: IonSelectModalMdStyle0
  103. };
  104. exports.ion_select_modal = SelectModal;