@ionic/core
Version:
Base components for Ionic
4 lines • 7.01 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import{r as t,h as e,e as i,f as a}from"./p-66a5d6a8.js";import{a as n,c as o}from"./p-ece78e7b.js";import{a as s}from"./p-3f4327f7.js";import{c as r}from"./p-47794def.js";import{b as d}from"./p-597ff9af.js";import{s as c,x as l,L as m,N as p,M as h}from"./p-f7ce606e.js";const b=class{constructor(e){t(this,e),this.datetimeEl=null,this.overlayEl=null,this.getParsedDateValues=t=>null==t?[]:Array.isArray(t)?t:[t],this.setDateTimeText=()=>{var t,e,i,a,n;const{datetimeEl:o,datetimePresentation:r}=this;if(!o)return;const{value:d,locale:b,formatOptions:f,hourCycle:u,preferWheel:v,multiple:x,titleSelectedDatesFormatter:g}=o,y=this.getParsedDateValues(d),k=c(y.length>0?y:[l()]);if(!k)return;const w=k[0],j=m(b,u);switch(this.dateText=this.timeText=void 0,r){case"date-time":case"time-date":const o=p(b,w,null!==(t=null==f?void 0:f.date)&&void 0!==t?t:{month:"short",day:"numeric",year:"numeric"}),r=h(b,w,j,null==f?void 0:f.time);v?this.dateText=`${o} ${r}`:(this.dateText=o,this.timeText=r);break;case"date":if(x&&1!==y.length){let t=`${y.length} days`;if(void 0!==g)try{t=g(y)}catch(t){s("Exception in provided `titleSelectedDatesFormatter`: ",t)}this.dateText=t}else this.dateText=p(b,w,null!==(e=null==f?void 0:f.date)&&void 0!==e?e:{month:"short",day:"numeric",year:"numeric"});break;case"time":this.timeText=h(b,w,j,null==f?void 0:f.time);break;case"month-year":this.dateText=p(b,w,null!==(i=null==f?void 0:f.date)&&void 0!==i?i:{month:"long",year:"numeric"});break;case"month":this.dateText=p(b,w,null!==(a=null==f?void 0:f.time)&&void 0!==a?a:{month:"long"});break;case"year":this.dateText=p(b,w,null!==(n=null==f?void 0:f.time)&&void 0!==n?n:{year:"numeric"})}},this.waitForDatetimeChanges=async()=>{const{datetimeEl:t}=this;return t?new Promise((e=>{n(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(Object.assign(Object.assign({},t),{detail:{ionShadowTarget:i}}))):a.present())},this.datetimePresentation="date-time",this.dateText=void 0,this.timeText=void 0,this.datetimeActive=!1,this.selectedButton=void 0,this.color="primary",this.disabled=!1,this.datetime=void 0}async componentWillLoad(){const{datetime:t}=this;if(!t)return void s("An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.",this.el);const e=this.datetimeEl=document.getElementById(t);if(!e)return void s(`No ion-datetime instance found for ID '${t}'.`,this.el);if("ION-DATETIME"!==e.tagName)return void s(`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 i=this.overlayEl=e.closest("ion-modal, ion-popover");i&&i.classList.add("ion-datetime-button-overlay"),o(e,(()=>{const t=this.datetimePresentation=e.presentation||"date-time";switch(this.setDateTimeText(),n(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:a,timeText:n,selectedButton:o,datetimeActive:s,disabled:c}=this,l=d(this);return e(i,{key:"26e606af6f067a5774db37ed41387ffebb941777",class:r(t,{[l]:!0,[`${o}-active`]:s,"datetime-button-disabled":c})},a&&e("button",{key:"6b7aa66a15b4a6d89d411e40586de28a2ac9f343",class:"ion-activatable",id:"date-button","aria-expanded":s?"true":"false",onClick:this.handleDateClick,disabled:c,part:"native",ref:t=>this.dateTargetEl=t},e("slot",{key:"d42f34fd167be34386319e7ea788c2ab03c90b87",name:"date-target"},a),"md"===l&&e("ion-ripple-effect",{key:"47dd34f3c2799064cac7a5fe25440ecc043950f0"})),n&&e("button",{key:"d77424a20fae320654774c7bfc8a8e2369d3afe3",class:"ion-activatable",id:"time-button","aria-expanded":s?"true":"false",onClick:this.handleTimeClick,disabled:c,part:"native",ref:t=>this.timeTargetEl=t},e("slot",{key:"ac088a78141bb53f2efd48dd7745f8954c92378b",name:"time-target"},n),"md"===l&&e("ion-ripple-effect",{key:"b3a58ddfd28b9396e2518ffd62a045ec13d8b9d0"})))}get el(){return a(this)}};b.style={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-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-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}"};export{b as ion_datetime_button}