ion-datetime-button.entry.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, h, e as Host, f as getElement } from './index-527b9e34.js';
  5. import { a as addEventListener, c as componentOnReady } from './helpers-d94bc8ad.js';
  6. import { d as printIonError } from './index-cfd9c1f2.js';
  7. import { c as createColorClasses } from './theme-01f3f29c.js';
  8. import { b as getIonMode } from './ionic-global-b26f573e.js';
  9. import { s as parseDate, x as getToday, L as getHourCycle, N as getLocalizedDateTime, M as getLocalizedTime } from './data-0d7ea6eb.js';
  10. const datetimeButtonIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
  11. const IonDatetimeButtonIosStyle0 = datetimeButtonIosCss;
  12. const datetimeButtonMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}";
  13. const IonDatetimeButtonMdStyle0 = datetimeButtonMdCss;
  14. const DatetimeButton = class {
  15. constructor(hostRef) {
  16. registerInstance(this, hostRef);
  17. this.datetimeEl = null;
  18. this.overlayEl = null;
  19. /**
  20. * Accepts one or more string values and converts
  21. * them to DatetimeParts. This is done so datetime-button
  22. * can work with an array internally and not need
  23. * to keep checking if the datetime value is `string` or `string[]`.
  24. */
  25. this.getParsedDateValues = (value) => {
  26. if (value === undefined || value === null) {
  27. return [];
  28. }
  29. if (Array.isArray(value)) {
  30. return value;
  31. }
  32. return [value];
  33. };
  34. /**
  35. * Check the value property on the linked
  36. * ion-datetime and then format it according
  37. * to the locale specified on ion-datetime.
  38. */
  39. this.setDateTimeText = () => {
  40. var _a, _b, _c, _d, _e;
  41. const { datetimeEl, datetimePresentation } = this;
  42. if (!datetimeEl) {
  43. return;
  44. }
  45. const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
  46. const parsedValues = this.getParsedDateValues(value);
  47. /**
  48. * Both ion-datetime and ion-datetime-button default
  49. * to today's date and time if no value is set.
  50. */
  51. const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
  52. if (!parsedDatetimes) {
  53. return;
  54. }
  55. /**
  56. * If developers incorrectly use multiple="true"
  57. * with non "date" datetimes, then just select
  58. * the first value so the interface does
  59. * not appear broken. Datetime will provide a
  60. * warning in the console.
  61. */
  62. const firstParsedDatetime = parsedDatetimes[0];
  63. const computedHourCycle = getHourCycle(locale, hourCycle);
  64. this.dateText = this.timeText = undefined;
  65. switch (datetimePresentation) {
  66. case 'date-time':
  67. case 'time-date':
  68. const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
  69. const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
  70. if (preferWheel) {
  71. this.dateText = `${dateText} ${timeText}`;
  72. }
  73. else {
  74. this.dateText = dateText;
  75. this.timeText = timeText;
  76. }
  77. break;
  78. case 'date':
  79. if (multiple && parsedValues.length !== 1) {
  80. let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
  81. if (titleSelectedDatesFormatter !== undefined) {
  82. try {
  83. headerText = titleSelectedDatesFormatter(parsedValues);
  84. }
  85. catch (e) {
  86. printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
  87. }
  88. }
  89. this.dateText = headerText;
  90. }
  91. else {
  92. this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
  93. }
  94. break;
  95. case 'time':
  96. this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
  97. break;
  98. case 'month-year':
  99. this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
  100. break;
  101. case 'month':
  102. this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
  103. break;
  104. case 'year':
  105. this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
  106. break;
  107. }
  108. };
  109. /**
  110. * Waits for the ion-datetime to re-render.
  111. * This is needed in order to correctly position
  112. * a popover relative to the trigger element.
  113. */
  114. this.waitForDatetimeChanges = async () => {
  115. const { datetimeEl } = this;
  116. if (!datetimeEl) {
  117. return Promise.resolve();
  118. }
  119. return new Promise((resolve) => {
  120. addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
  121. });
  122. };
  123. this.handleDateClick = async (ev) => {
  124. const { datetimeEl, datetimePresentation } = this;
  125. if (!datetimeEl) {
  126. return;
  127. }
  128. let needsPresentationChange = false;
  129. /**
  130. * When clicking the date button,
  131. * we need to make sure that only a date
  132. * picker is displayed. For presentation styles
  133. * that display content other than a date picker,
  134. * we need to update the presentation style.
  135. */
  136. switch (datetimePresentation) {
  137. case 'date-time':
  138. case 'time-date':
  139. const needsChange = datetimeEl.presentation !== 'date';
  140. /**
  141. * The date+time wheel picker
  142. * shows date and time together,
  143. * so do not adjust the presentation
  144. * in that case.
  145. */
  146. if (!datetimeEl.preferWheel && needsChange) {
  147. datetimeEl.presentation = 'date';
  148. needsPresentationChange = true;
  149. }
  150. break;
  151. }
  152. /**
  153. * Track which button was clicked
  154. * so that it can have the correct
  155. * activated styles applied when
  156. * the modal/popover containing
  157. * the datetime is opened.
  158. */
  159. this.selectedButton = 'date';
  160. this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
  161. };
  162. this.handleTimeClick = (ev) => {
  163. const { datetimeEl, datetimePresentation } = this;
  164. if (!datetimeEl) {
  165. return;
  166. }
  167. let needsPresentationChange = false;
  168. /**
  169. * When clicking the time button,
  170. * we need to make sure that only a time
  171. * picker is displayed. For presentation styles
  172. * that display content other than a time picker,
  173. * we need to update the presentation style.
  174. */
  175. switch (datetimePresentation) {
  176. case 'date-time':
  177. case 'time-date':
  178. const needsChange = datetimeEl.presentation !== 'time';
  179. if (needsChange) {
  180. datetimeEl.presentation = 'time';
  181. needsPresentationChange = true;
  182. }
  183. break;
  184. }
  185. /**
  186. * Track which button was clicked
  187. * so that it can have the correct
  188. * activated styles applied when
  189. * the modal/popover containing
  190. * the datetime is opened.
  191. */
  192. this.selectedButton = 'time';
  193. this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
  194. };
  195. /**
  196. * If the datetime is presented in an
  197. * overlay, the datetime and overlay
  198. * should be appropriately sized.
  199. * These classes provide default sizing values
  200. * that developers can customize.
  201. * The goal is to provide an overlay that is
  202. * reasonably sized with a datetime that
  203. * fills the entire container.
  204. */
  205. this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
  206. const { overlayEl } = this;
  207. if (!overlayEl) {
  208. return;
  209. }
  210. if (overlayEl.tagName === 'ION-POPOVER') {
  211. /**
  212. * When the presentation on datetime changes,
  213. * we need to wait for the component to re-render
  214. * otherwise the computed width/height of the
  215. * popover content will be wrong, causing
  216. * the popover to not align with the trigger element.
  217. */
  218. if (needsPresentationChange) {
  219. await this.waitForDatetimeChanges();
  220. }
  221. /**
  222. * We pass the trigger button element
  223. * so that the popover aligns with the individual
  224. * button that was clicked, not the component container.
  225. */
  226. overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
  227. ionShadowTarget: triggerEl,
  228. } }));
  229. }
  230. else {
  231. overlayEl.present();
  232. }
  233. };
  234. this.datetimePresentation = 'date-time';
  235. this.dateText = undefined;
  236. this.timeText = undefined;
  237. this.datetimeActive = false;
  238. this.selectedButton = undefined;
  239. this.color = 'primary';
  240. this.disabled = false;
  241. this.datetime = undefined;
  242. }
  243. async componentWillLoad() {
  244. const { datetime } = this;
  245. if (!datetime) {
  246. printIonError('[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.', this.el);
  247. return;
  248. }
  249. const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
  250. if (!datetimeEl) {
  251. printIonError(`[ion-datetime-button] - No ion-datetime instance found for ID '${datetime}'.`, this.el);
  252. return;
  253. }
  254. /**
  255. * The element reference must be an ion-datetime. Print an error
  256. * if a non-datetime element was provided.
  257. */
  258. if (datetimeEl.tagName !== 'ION-DATETIME') {
  259. printIonError(`[ion-datetime-button] - Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
  260. return;
  261. }
  262. /**
  263. * Since the datetime can be used in any context (overlays, accordion, etc)
  264. * we track when it is visible to determine when it is active.
  265. * This informs which button is highlighted as well as the
  266. * aria-expanded state.
  267. */
  268. const io = new IntersectionObserver((entries) => {
  269. const ev = entries[0];
  270. this.datetimeActive = ev.isIntersecting;
  271. }, {
  272. threshold: 0.01,
  273. });
  274. io.observe(datetimeEl);
  275. /**
  276. * Get a reference to any modal/popover
  277. * the datetime is being used in so we can
  278. * correctly size it when it is presented.
  279. */
  280. const overlayEl = (this.overlayEl = datetimeEl.closest('ion-modal, ion-popover'));
  281. /**
  282. * The .ion-datetime-button-overlay class contains
  283. * styles that allow any modal/popover to be
  284. * sized according to the dimensions of the datetime.
  285. * If developers want a smaller/larger overlay all they need
  286. * to do is change the width/height of the datetime.
  287. * Additionally, this lets us avoid having to set
  288. * explicit widths on each variant of datetime.
  289. */
  290. if (overlayEl) {
  291. overlayEl.classList.add('ion-datetime-button-overlay');
  292. }
  293. componentOnReady(datetimeEl, () => {
  294. const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
  295. /**
  296. * Set the initial display
  297. * in the rendered buttons.
  298. *
  299. * From there, we need to listen
  300. * for ionChange to be emitted
  301. * from datetime so we know when
  302. * to re-render the displayed
  303. * text in the buttons.
  304. */
  305. this.setDateTimeText();
  306. addEventListener(datetimeEl, 'ionValueChange', this.setDateTimeText);
  307. /**
  308. * Configure the initial selected button
  309. * in the event that the datetime is displayed
  310. * without clicking one of the datetime buttons.
  311. * For example, a datetime could be expanded
  312. * in an accordion. In this case users only
  313. * need to click the accordion header to show
  314. * the datetime.
  315. */
  316. switch (datetimePresentation) {
  317. case 'date-time':
  318. case 'date':
  319. case 'month-year':
  320. case 'month':
  321. case 'year':
  322. this.selectedButton = 'date';
  323. break;
  324. case 'time-date':
  325. case 'time':
  326. this.selectedButton = 'time';
  327. break;
  328. }
  329. });
  330. }
  331. render() {
  332. const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
  333. const mode = getIonMode(this);
  334. return (h(Host, { key: '11d037e6ab061e5116842970760b04850b42f2c7', class: createColorClasses(color, {
  335. [mode]: true,
  336. [`${selectedButton}-active`]: datetimeActive,
  337. ['datetime-button-disabled']: disabled,
  338. }) }, dateText && (h("button", { key: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (h("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
  339. }
  340. get el() { return getElement(this); }
  341. };
  342. DatetimeButton.style = {
  343. ios: IonDatetimeButtonIosStyle0,
  344. md: IonDatetimeButtonMdStyle0
  345. };
  346. export { DatetimeButton as ion_datetime_button };