@ionic/core/components/ion-datetime-button.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{d as t,H as e,c as i,h as a,f as o,t as n}from"./p-Ct2aBEue.js";import{a as s,c as r}from"./p-B4IBdPVJ.js";import{c as d}from"./p-byZM6qHV.js";import{b as c}from"./p-HthJZjZ6.js";import{D as m,d as l,O as p,N as b}from"./p-CdrNHfZl.js";import{d as h}from"./p-7KepMw9O.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.datetimeEl=null,this.overlayEl=null,this.datetimePresentation="date-time",this.datetimeActive=!1,this.disabled=!1,this.getParsedDateValues=t=>null==t?[]:Array.isArray(t)?t:[t],this.setDateTimeText=async()=>{const{datetimeEl:t,datetimePresentation:e}=this;if(!t)return;const{value:a,locale:o,formatOptions:n,hourCycle:s,preferWheel:r,multiple:d,titleSelectedDatesFormatter:c}=t,h=this.getParsedDateValues(a),u=h.length>0?m(h):[await t.getDefaultPart()];if(!u)return;const f=u[0],x=l(o,s);switch(this.dateText=this.timeText=void 0,e){case"date-time":case"time-date":const t=p(o,f,n?.date??{month:"short",day:"numeric",year:"numeric"}),e=b(o,f,x,n?.time);r?this.dateText=`${t} ${e}`:(this.dateText=t,this.timeText=e);break;case"date":if(d&&1!==h.length){let t=h.length+" days";if(void 0!==c)try{t=c(h)}catch(t){i("[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:",t)}this.dateText=t}else this.dateText=p(o,f,n?.date??{month:"short",day:"numeric",year:"numeric"});break;case"time":this.timeText=b(o,f,x,n?.time);break;case"month-year":this.dateText=p(o,f,n?.date??{month:"long",year:"numeric"});break;case"month":this.dateText=p(o,f,n?.time??{month:"long"});break;case"year":this.dateText=p(o,f,n?.time??{year:"numeric"})}},this.waitForDatetimeChanges=async()=>{const{datetimeEl:t}=this;return t?new Promise((e=>{s(t,"ionRender",e,{once:!0})})):Promise.resolve()},this.handleDateClick=async t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e)return;let a=!1;switch(i){case"date-time":case"time-date":!e.preferWheel&&"date"!==e.presentation&&(e.presentation="date",a=!0)}this.selectedButton="date",this.presentOverlay(t,a,this.dateTargetEl)},this.handleTimeClick=t=>{const{datetimeEl:e,datetimePresentation:i}=this;if(!e)return;let a=!1;switch(i){case"date-time":case"time-date":"time"!==e.presentation&&(e.presentation="time",a=!0)}this.selectedButton="time",this.presentOverlay(t,a,this.timeTargetEl)},this.presentOverlay=async(t,e,i)=>{const{overlayEl:a}=this;a&&("ION-POPOVER"===a.tagName?(e&&await this.waitForDatetimeChanges(),a.present({...t,detail:{ionShadowTarget:i}})):a.present())}}async componentWillLoad(){const{datetime:t}=this;if(!t)return void i("[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.",this.el);const e=this.datetimeEl=document.getElementById(t);if(!e)return void i(`[ion-datetime-button] - No ion-datetime instance found for ID '${t}'.`,this.el);if("ION-DATETIME"!==e.tagName)return void i(`[ion-datetime-button] - Expected an ion-datetime instance for ID '${t}' but received '${e.tagName.toLowerCase()}' instead.`,e);new IntersectionObserver((t=>{this.datetimeActive=t[0].isIntersecting}),{threshold:.01}).observe(e);const a=this.overlayEl=e.closest("ion-modal, ion-popover");a&&a.classList.add("ion-datetime-button-overlay"),r(e,(()=>{const t=this.datetimePresentation=e.presentation||"date-time";switch(this.setDateTimeText(),s(e,"ionValueChange",this.setDateTimeText),t){case"date-time":case"date":case"month-year":case"month":case"year":this.selectedButton="date";break;case"time-date":case"time":this.selectedButton="time"}}))}render(){const{color:t,dateText:e,timeText:i,selectedButton:n,datetimeActive:s,disabled:r}=this,m=c(this);return a(o,{key:"2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd",class:d(t,{[m]:!0,[n+"-active"]:s,"datetime-button-disabled":r})},e&&a("button",{key:"d9698471fa5d5c834ca73db57f9ed98dfc705b4c",class:"ion-activatable",id:"date-button","aria-expanded":s?"true":"false",onClick:this.handleDateClick,disabled:r,part:"native",ref:t=>this.dateTargetEl=t},a("slot",{key:"c8761a7f25ae5b93c953b3486dd6335f5ad4fd53",name:"date-target"},e),"md"===m&&a("ion-ripple-effect",{key:"3dd5e97af8d35a2b008de4ab01f690b3c2223135"})),i&&a("button",{key:"1107ca2382940b642b551f885f7ca763012c236c",class:"ion-activatable",id:"time-button","aria-expanded":s?"true":"false",onClick:this.handleTimeClick,disabled:r,part:"native",ref:t=>this.timeTargetEl=t},a("slot",{key:"5cff53e486923b03715b9ab4dc0947e26f4ea1d9",name:"time-target"},i),"md"===m&&a("ion-ripple-effect",{key:"5aac1facb6fc7457307c4f59a241e3a5b31facc8"})))}get el(){return this}static get style(){return{ios:":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-primary, #0054e9)}:host(.ion-color.time-active) #time-button,:host(.ion-color.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))}",md:":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-primary, #0054e9)}:host(.ion-color.time-active) #time-button,:host(.ion-color.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}"}}},[289,"ion-datetime-button",{color:[513],disabled:[516],datetime:[1],datetimePresentation:[32],dateText:[32],timeText:[32],datetimeActive:[32],selectedButton:[32]}]),f=u,x=function(){"undefined"!=typeof customElements&&["ion-datetime-button","ion-ripple-effect"].forEach((t=>{switch(t){case"ion-datetime-button":customElements.get(n(t))||customElements.define(n(t),u);break;case"ion-ripple-effect":customElements.get(n(t))||h()}}))};export{f as IonDatetimeButton,x as defineCustomElement}