1 line
38 KiB
JSON
1 line
38 KiB
JSON
{"ast":null,"code":"import _asyncToGenerator from \"D:/MobileDev/WRB/WrenchBoard2023a/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\";\n\n/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { r as registerInstance, h, H as Host, i as getElement } from './index-1a99aeb7.js';\nimport { b as getIonMode } from './ionic-global-04e268e7.js';\nimport { a as addEventListener, c as componentOnReady } from './helpers-4d272360.js';\nimport { p as printIonWarning, b as printIonError } from './index-c4b11676.js';\nimport { c as createColorClasses } from './theme-7670341c.js';\nimport { p as parseDate, e as getToday, D as is24Hour, M as getLocalizedDateTime, A as getMonthAndYear, E as getLocalizedTime, N as getMonthDayAndYear } from './parse-26477881.js';\nconst iosDatetimeButtonCss = \":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right: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, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}: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}\";\nconst mdDatetimeButtonCss = \":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right: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, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}: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}\";\nconst DatetimeButton = class {\n constructor(hostRef) {\n var _this = this;\n\n registerInstance(this, hostRef);\n this.datetimeEl = null;\n this.overlayEl = null;\n this.datetimePresentation = 'date-time';\n this.datetimeActive = false;\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n * For more information on colors, see [theming](/docs/theming/basics).\n */\n\n this.color = 'primary';\n /**\n * If `true`, the user cannot interact with the button.\n */\n\n this.disabled = false;\n /**\n * Check the value property on the linked\n * ion-datetime and then format it according\n * to the locale specified on ion-datetime.\n */\n\n this.setDateTimeText = () => {\n const {\n datetimeEl,\n datetimePresentation\n } = this;\n\n if (!datetimeEl) {\n return;\n }\n\n const {\n value,\n locale,\n hourCycle,\n preferWheel,\n multiple\n } = datetimeEl;\n\n if (multiple) {\n printIonWarning(`Multi-date selection cannot be used with ion-datetime-button.\n\nPlease upvote https://github.com/ionic-team/ionic-framework/issues/25668 if you are interested in seeing this functionality added.\n `, this.el);\n return;\n }\n /**\n * Both ion-datetime and ion-datetime-button default\n * to today's date and time if no value is set.\n */\n\n\n const parsedDatetime = parseDate(value || getToday());\n const use24Hour = is24Hour(locale, hourCycle); // TODO(FW-1865) - Remove once FW-1831 is fixed.\n\n parsedDatetime.tzOffset = undefined;\n this.dateText = this.timeText = undefined;\n\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const dateText = getMonthDayAndYear(locale, parsedDatetime);\n const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);\n\n if (preferWheel) {\n this.dateText = `${dateText} ${timeText}`;\n } else {\n this.dateText = dateText;\n this.timeText = timeText;\n }\n\n break;\n\n case 'date':\n this.dateText = getMonthDayAndYear(locale, parsedDatetime);\n break;\n\n case 'time':\n this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);\n break;\n\n case 'month-year':\n this.dateText = getMonthAndYear(locale, parsedDatetime);\n break;\n\n case 'month':\n this.dateText = getLocalizedDateTime(locale, parsedDatetime, {\n month: 'long'\n });\n break;\n\n case 'year':\n this.dateText = getLocalizedDateTime(locale, parsedDatetime, {\n year: 'numeric'\n });\n break;\n }\n };\n /**\n * Waits for the ion-datetime to re-render.\n * This is needed in order to correctly position\n * a popover relative to the trigger element.\n */\n\n\n this.waitForDatetimeChanges = /*#__PURE__*/_asyncToGenerator(function* () {\n const {\n datetimeEl\n } = _this;\n\n if (!datetimeEl) {\n return Promise.resolve();\n }\n\n return new Promise(resolve => {\n addEventListener(datetimeEl, 'ionRender', resolve, {\n once: true\n });\n });\n });\n\n this.handleDateClick = /*#__PURE__*/function () {\n var _ref2 = _asyncToGenerator(function* (ev) {\n const {\n datetimeEl,\n datetimePresentation\n } = _this;\n\n if (!datetimeEl) {\n return;\n }\n\n let needsPresentationChange = false;\n /**\n * When clicking the date button,\n * we need to make sure that only a date\n * picker is displayed. For presentation styles\n * that display content other than a date picker,\n * we need to update the presentation style.\n */\n\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const needsChange = datetimeEl.presentation !== 'date';\n /**\n * The date+time wheel picker\n * shows date and time together,\n * so do not adjust the presentation\n * in that case.\n */\n\n if (!datetimeEl.preferWheel && needsChange) {\n datetimeEl.presentation = 'date';\n needsPresentationChange = true;\n }\n\n break;\n }\n /**\n * Track which button was clicked\n * so that it can have the correct\n * activated styles applied when\n * the modal/popover containing\n * the datetime is opened.\n */\n\n\n _this.selectedButton = 'date';\n\n _this.presentOverlay(ev, needsPresentationChange, _this.dateTargetEl);\n });\n\n return function (_x) {\n return _ref2.apply(this, arguments);\n };\n }();\n\n this.handleTimeClick = ev => {\n const {\n datetimeEl,\n datetimePresentation\n } = this;\n\n if (!datetimeEl) {\n return;\n }\n\n let needsPresentationChange = false;\n /**\n * When clicking the time button,\n * we need to make sure that only a time\n * picker is displayed. For presentation styles\n * that display content other than a time picker,\n * we need to update the presentation style.\n */\n\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const needsChange = datetimeEl.presentation !== 'time';\n\n if (needsChange) {\n datetimeEl.presentation = 'time';\n needsPresentationChange = true;\n }\n\n break;\n }\n /**\n * Track which button was clicked\n * so that it can have the correct\n * activated styles applied when\n * the modal/popover containing\n * the datetime is opened.\n */\n\n\n this.selectedButton = 'time';\n this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);\n };\n /**\n * If the datetime is presented in an\n * overlay, the datetime and overlay\n * should be appropriately sized.\n * These classes provide default sizing values\n * that developers can customize.\n * The goal is to provide an overlay that is\n * reasonably sized with a datetime that\n * fills the entire container.\n */\n\n\n this.presentOverlay = /*#__PURE__*/function () {\n var _ref3 = _asyncToGenerator(function* (ev, needsPresentationChange, triggerEl) {\n const {\n overlayEl\n } = _this;\n\n if (!overlayEl) {\n return;\n }\n\n if (overlayEl.tagName === 'ION-POPOVER') {\n /**\n * When the presentation on datetime changes,\n * we need to wait for the component to re-render\n * otherwise the computed width/height of the\n * popover content will be wrong, causing\n * the popover to not align with the trigger element.\n */\n if (needsPresentationChange) {\n yield _this.waitForDatetimeChanges();\n }\n /**\n * We pass the trigger button element\n * so that the popover aligns with the individual\n * button that was clicked, not the component container.\n */\n\n\n overlayEl.present(Object.assign(Object.assign({}, ev), {\n detail: {\n ionShadowTarget: triggerEl\n }\n }));\n } else {\n overlayEl.present();\n }\n });\n\n return function (_x2, _x3, _x4) {\n return _ref3.apply(this, arguments);\n };\n }();\n }\n\n componentWillLoad() {\n var _this2 = this;\n\n return _asyncToGenerator(function* () {\n const {\n datetime\n } = _this2;\n\n if (!datetime) {\n printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', _this2.el);\n return;\n }\n\n const datetimeEl = _this2.datetimeEl = document.getElementById(datetime);\n\n if (!datetimeEl) {\n printIonError(`No ion-datetime instance found for ID '${datetime}'.`, _this2.el);\n return;\n }\n /**\n * Since the datetime can be used in any context (overlays, accordion, etc)\n * we track when it is visible to determine when it is active.\n * This informs which button is highlighted as well as the\n * aria-expanded state.\n */\n\n\n const io = new IntersectionObserver(entries => {\n const ev = entries[0];\n _this2.datetimeActive = ev.isIntersecting;\n }, {\n threshold: 0.01\n });\n io.observe(datetimeEl);\n /**\n * Get a reference to any modal/popover\n * the datetime is being used in so we can\n * correctly size it when it is presented.\n */\n\n const overlayEl = _this2.overlayEl = datetimeEl.closest('ion-modal, ion-popover');\n /**\n * The .ion-datetime-button-overlay class contains\n * styles that allow any modal/popover to be\n * sized according to the dimensions of the datetime.\n * If developers want a smaller/larger overlay all they need\n * to do is change the width/height of the datetime.\n * Additionally, this lets us avoid having to set\n * explicit widths on each variant of datetime.\n */\n\n if (overlayEl) {\n overlayEl.classList.add('ion-datetime-button-overlay');\n }\n\n componentOnReady(datetimeEl, () => {\n const datetimePresentation = _this2.datetimePresentation = datetimeEl.presentation || 'date-time';\n /**\n * Set the initial display\n * in the rendered buttons.\n *\n * From there, we need to listen\n * for ionChange to be emitted\n * from datetime so we know when\n * to re-render the displayed\n * text in the buttons.\n */\n\n _this2.setDateTimeText();\n\n addEventListener(datetimeEl, 'ionChange', _this2.setDateTimeText);\n /**\n * Configure the initial selected button\n * in the event that the datetime is displayed\n * without clicking one of the datetime buttons.\n * For example, a datetime could be expanded\n * in an accordion. In this case users only\n * need to click the accordion header to show\n * the datetime.\n */\n\n switch (datetimePresentation) {\n case 'date-time':\n case 'date':\n case 'month-year':\n case 'month':\n case 'year':\n _this2.selectedButton = 'date';\n break;\n\n case 'time-date':\n case 'time':\n _this2.selectedButton = 'time';\n break;\n }\n });\n })();\n }\n\n render() {\n const {\n color,\n dateText,\n timeText,\n selectedButton,\n datetimeActive,\n disabled\n } = this;\n const mode = getIonMode(this);\n return h(Host, {\n class: createColorClasses(color, {\n [mode]: true,\n [`${selectedButton}-active`]: datetimeActive,\n ['datetime-button-disabled']: disabled\n })\n }, dateText && h(\"button\", {\n class: \"ion-activatable\",\n id: \"date-button\",\n \"aria-expanded\": datetimeActive ? 'true' : 'false',\n onClick: this.handleDateClick,\n disabled: disabled,\n part: \"native\",\n ref: el => this.dateTargetEl = el\n }, h(\"slot\", {\n name: \"date-target\"\n }, dateText), mode === 'md' && h(\"ion-ripple-effect\", null)), timeText && h(\"button\", {\n class: \"ion-activatable\",\n id: \"time-button\",\n \"aria-expanded\": datetimeActive ? 'true' : 'false',\n onClick: this.handleTimeClick,\n disabled: disabled,\n part: \"native\",\n ref: el => this.timeTargetEl = el\n }, h(\"slot\", {\n name: \"time-target\"\n }, timeText), mode === 'md' && h(\"ion-ripple-effect\", null)));\n }\n\n get el() {\n return getElement(this);\n }\n\n};\nDatetimeButton.style = {\n ios: iosDatetimeButtonCss,\n md: mdDatetimeButtonCss\n};\nexport { DatetimeButton as ion_datetime_button };","map":{"version":3,"names":["r","registerInstance","h","H","Host","i","getElement","b","getIonMode","a","addEventListener","c","componentOnReady","p","printIonWarning","printIonError","createColorClasses","parseDate","e","getToday","D","is24Hour","M","getLocalizedDateTime","A","getMonthAndYear","E","getLocalizedTime","N","getMonthDayAndYear","iosDatetimeButtonCss","mdDatetimeButtonCss","DatetimeButton","constructor","hostRef","datetimeEl","overlayEl","datetimePresentation","datetimeActive","color","disabled","setDateTimeText","value","locale","hourCycle","preferWheel","multiple","el","parsedDatetime","use24Hour","tzOffset","undefined","dateText","timeText","month","year","waitForDatetimeChanges","Promise","resolve","once","handleDateClick","ev","needsPresentationChange","needsChange","presentation","selectedButton","presentOverlay","dateTargetEl","handleTimeClick","timeTargetEl","triggerEl","tagName","present","Object","assign","detail","ionShadowTarget","componentWillLoad","datetime","document","getElementById","io","IntersectionObserver","entries","isIntersecting","threshold","observe","closest","classList","add","render","mode","class","id","onClick","part","ref","name","style","ios","md","ion_datetime_button"],"sources":["D:/MobileDev/WRB/WrenchBoard2023a/node_modules/@ionic/core/dist/esm/ion-datetime-button.entry.js"],"sourcesContent":["/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { r as registerInstance, h, H as Host, i as getElement } from './index-1a99aeb7.js';\nimport { b as getIonMode } from './ionic-global-04e268e7.js';\nimport { a as addEventListener, c as componentOnReady } from './helpers-4d272360.js';\nimport { p as printIonWarning, b as printIonError } from './index-c4b11676.js';\nimport { c as createColorClasses } from './theme-7670341c.js';\nimport { p as parseDate, e as getToday, D as is24Hour, M as getLocalizedDateTime, A as getMonthAndYear, E as getLocalizedTime, N as getMonthDayAndYear } from './parse-26477881.js';\n\nconst iosDatetimeButtonCss = \":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right: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, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}: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}\";\n\nconst mdDatetimeButtonCss = \":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right: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, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}: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}\";\n\nconst DatetimeButton = class {\n constructor(hostRef) {\n registerInstance(this, hostRef);\n this.datetimeEl = null;\n this.overlayEl = null;\n this.datetimePresentation = 'date-time';\n this.datetimeActive = false;\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n * For more information on colors, see [theming](/docs/theming/basics).\n */\n this.color = 'primary';\n /**\n * If `true`, the user cannot interact with the button.\n */\n this.disabled = false;\n /**\n * Check the value property on the linked\n * ion-datetime and then format it according\n * to the locale specified on ion-datetime.\n */\n this.setDateTimeText = () => {\n const { datetimeEl, datetimePresentation } = this;\n if (!datetimeEl) {\n return;\n }\n const { value, locale, hourCycle, preferWheel, multiple } = datetimeEl;\n if (multiple) {\n printIonWarning(`Multi-date selection cannot be used with ion-datetime-button.\n\nPlease upvote https://github.com/ionic-team/ionic-framework/issues/25668 if you are interested in seeing this functionality added.\n `, this.el);\n return;\n }\n /**\n * Both ion-datetime and ion-datetime-button default\n * to today's date and time if no value is set.\n */\n const parsedDatetime = parseDate(value || getToday());\n const use24Hour = is24Hour(locale, hourCycle);\n // TODO(FW-1865) - Remove once FW-1831 is fixed.\n parsedDatetime.tzOffset = undefined;\n this.dateText = this.timeText = undefined;\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const dateText = getMonthDayAndYear(locale, parsedDatetime);\n const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);\n if (preferWheel) {\n this.dateText = `${dateText} ${timeText}`;\n }\n else {\n this.dateText = dateText;\n this.timeText = timeText;\n }\n break;\n case 'date':\n this.dateText = getMonthDayAndYear(locale, parsedDatetime);\n break;\n case 'time':\n this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);\n break;\n case 'month-year':\n this.dateText = getMonthAndYear(locale, parsedDatetime);\n break;\n case 'month':\n this.dateText = getLocalizedDateTime(locale, parsedDatetime, { month: 'long' });\n break;\n case 'year':\n this.dateText = getLocalizedDateTime(locale, parsedDatetime, { year: 'numeric' });\n break;\n }\n };\n /**\n * Waits for the ion-datetime to re-render.\n * This is needed in order to correctly position\n * a popover relative to the trigger element.\n */\n this.waitForDatetimeChanges = async () => {\n const { datetimeEl } = this;\n if (!datetimeEl) {\n return Promise.resolve();\n }\n return new Promise((resolve) => {\n addEventListener(datetimeEl, 'ionRender', resolve, { once: true });\n });\n };\n this.handleDateClick = async (ev) => {\n const { datetimeEl, datetimePresentation } = this;\n if (!datetimeEl) {\n return;\n }\n let needsPresentationChange = false;\n /**\n * When clicking the date button,\n * we need to make sure that only a date\n * picker is displayed. For presentation styles\n * that display content other than a date picker,\n * we need to update the presentation style.\n */\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const needsChange = datetimeEl.presentation !== 'date';\n /**\n * The date+time wheel picker\n * shows date and time together,\n * so do not adjust the presentation\n * in that case.\n */\n if (!datetimeEl.preferWheel && needsChange) {\n datetimeEl.presentation = 'date';\n needsPresentationChange = true;\n }\n break;\n }\n /**\n * Track which button was clicked\n * so that it can have the correct\n * activated styles applied when\n * the modal/popover containing\n * the datetime is opened.\n */\n this.selectedButton = 'date';\n this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);\n };\n this.handleTimeClick = (ev) => {\n const { datetimeEl, datetimePresentation } = this;\n if (!datetimeEl) {\n return;\n }\n let needsPresentationChange = false;\n /**\n * When clicking the time button,\n * we need to make sure that only a time\n * picker is displayed. For presentation styles\n * that display content other than a time picker,\n * we need to update the presentation style.\n */\n switch (datetimePresentation) {\n case 'date-time':\n case 'time-date':\n const needsChange = datetimeEl.presentation !== 'time';\n if (needsChange) {\n datetimeEl.presentation = 'time';\n needsPresentationChange = true;\n }\n break;\n }\n /**\n * Track which button was clicked\n * so that it can have the correct\n * activated styles applied when\n * the modal/popover containing\n * the datetime is opened.\n */\n this.selectedButton = 'time';\n this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);\n };\n /**\n * If the datetime is presented in an\n * overlay, the datetime and overlay\n * should be appropriately sized.\n * These classes provide default sizing values\n * that developers can customize.\n * The goal is to provide an overlay that is\n * reasonably sized with a datetime that\n * fills the entire container.\n */\n this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {\n const { overlayEl } = this;\n if (!overlayEl) {\n return;\n }\n if (overlayEl.tagName === 'ION-POPOVER') {\n /**\n * When the presentation on datetime changes,\n * we need to wait for the component to re-render\n * otherwise the computed width/height of the\n * popover content will be wrong, causing\n * the popover to not align with the trigger element.\n */\n if (needsPresentationChange) {\n await this.waitForDatetimeChanges();\n }\n /**\n * We pass the trigger button element\n * so that the popover aligns with the individual\n * button that was clicked, not the component container.\n */\n overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {\n ionShadowTarget: triggerEl,\n } }));\n }\n else {\n overlayEl.present();\n }\n };\n }\n async componentWillLoad() {\n const { datetime } = this;\n if (!datetime) {\n printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);\n return;\n }\n const datetimeEl = (this.datetimeEl = document.getElementById(datetime));\n if (!datetimeEl) {\n printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);\n return;\n }\n /**\n * Since the datetime can be used in any context (overlays, accordion, etc)\n * we track when it is visible to determine when it is active.\n * This informs which button is highlighted as well as the\n * aria-expanded state.\n */\n const io = new IntersectionObserver((entries) => {\n const ev = entries[0];\n this.datetimeActive = ev.isIntersecting;\n }, {\n threshold: 0.01,\n });\n io.observe(datetimeEl);\n /**\n * Get a reference to any modal/popover\n * the datetime is being used in so we can\n * correctly size it when it is presented.\n */\n const overlayEl = (this.overlayEl = datetimeEl.closest('ion-modal, ion-popover'));\n /**\n * The .ion-datetime-button-overlay class contains\n * styles that allow any modal/popover to be\n * sized according to the dimensions of the datetime.\n * If developers want a smaller/larger overlay all they need\n * to do is change the width/height of the datetime.\n * Additionally, this lets us avoid having to set\n * explicit widths on each variant of datetime.\n */\n if (overlayEl) {\n overlayEl.classList.add('ion-datetime-button-overlay');\n }\n componentOnReady(datetimeEl, () => {\n const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');\n /**\n * Set the initial display\n * in the rendered buttons.\n *\n * From there, we need to listen\n * for ionChange to be emitted\n * from datetime so we know when\n * to re-render the displayed\n * text in the buttons.\n */\n this.setDateTimeText();\n addEventListener(datetimeEl, 'ionChange', this.setDateTimeText);\n /**\n * Configure the initial selected button\n * in the event that the datetime is displayed\n * without clicking one of the datetime buttons.\n * For example, a datetime could be expanded\n * in an accordion. In this case users only\n * need to click the accordion header to show\n * the datetime.\n */\n switch (datetimePresentation) {\n case 'date-time':\n case 'date':\n case 'month-year':\n case 'month':\n case 'year':\n this.selectedButton = 'date';\n break;\n case 'time-date':\n case 'time':\n this.selectedButton = 'time';\n break;\n }\n });\n }\n render() {\n const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;\n const mode = getIonMode(this);\n return (h(Host, { class: createColorClasses(color, {\n [mode]: true,\n [`${selectedButton}-active`]: datetimeActive,\n ['datetime-button-disabled']: disabled,\n }) }, dateText && (h(\"button\", { 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\", { name: \"date-target\" }, dateText), mode === 'md' && h(\"ion-ripple-effect\", null))), timeText && (h(\"button\", { 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\", { name: \"time-target\" }, timeText), mode === 'md' && h(\"ion-ripple-effect\", null)))));\n }\n get el() { return getElement(this); }\n};\nDatetimeButton.style = {\n ios: iosDatetimeButtonCss,\n md: mdDatetimeButtonCss\n};\n\nexport { DatetimeButton as ion_datetime_button };\n"],"mappings":"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"},"metadata":{},"sourceType":"module"} |