test-isc
Version:
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.
1 lines • 5.06 kB
JavaScript
import{i as e,w as t,r as o,h as i,H as n,e as s}from"./p-aa742337.js";import{g as r}from"./p-bdcea876.js";import{c as a}from"./p-54ff9b40.js";const l=e=>{const t=document.querySelector(e+".ion-cloned-element");if(null!==t)return t;const o=document.createElement(e);return o.classList.add("ion-cloned-element"),o.style.setProperty("display","none"),document.body.appendChild(o),o},d=e=>{if(!e)return;const t=e.querySelectorAll("ion-toolbar");return{el:e,toolbars:Array.from(t).map(e=>{const t=e.querySelector("ion-title");return{el:e,background:e.shadowRoot.querySelector(".toolbar-background"),ionTitleEl:t,innerTitleEl:t?t.shadowRoot.querySelector(".toolbar-title"):null,ionButtonsEl:Array.from(e.querySelectorAll("ion-buttons"))||[]}})||[]}},h=(e,t)=>{void 0===t?e.background.style.removeProperty("--opacity"):e.background.style.setProperty("--opacity",t.toString())},c=(e,t=!0)=>{t?e.el.classList.remove("header-collapse-condense-inactive"):e.el.classList.add("header-collapse-condense-inactive")},A=class{constructor(e){o(this,e),this.collapsibleHeaderInitialized=!1,this.translucent=!1}async componentDidLoad(){await this.checkCollapsibleHeader()}async componentDidUpdate(){await this.checkCollapsibleHeader()}componentDidUnload(){this.destroyCollapsibleHeader()}async checkCollapsibleHeader(){const e="condense"===this.collapse,t=!(!e||"ios"!==r(this))&&e;if(!t&&this.collapsibleHeaderInitialized)this.destroyCollapsibleHeader();else if(t&&!this.collapsibleHeaderInitialized){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),t=e?e.querySelector("ion-content"):null;await this.setupCollapsibleHeader(t,e)}}destroyCollapsibleHeader(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=void 0),this.scrollEl&&this.contentScrollCallback&&(this.scrollEl.removeEventListener("scroll",this.contentScrollCallback),this.contentScrollCallback=void 0),this.collapsibleMainHeader&&(this.collapsibleMainHeader.classList.remove("header-collapse-main"),this.collapsibleMainHeader=void 0)}async setupCollapsibleHeader(o,i){if(!o||!i)return void console.error("ion-header requires a content to collapse, make sure there is an ion-content.");this.scrollEl=await o.getScrollElement();const n=i.querySelectorAll("ion-header");if(this.collapsibleMainHeader=Array.from(n).find(e=>"condense"!==e.collapse),!this.collapsibleMainHeader)return;const s=d(this.collapsibleMainHeader),r=d(this.el);s&&r&&(c(s,!1),s.toolbars.forEach(e=>{h(e,0)}),this.intersectionObserver=new IntersectionObserver(e=>{((e,o,i)=>{t(()=>{((e,t)=>{if(!e[0].isIntersecting)return;const o=e[0].intersectionRatio>.9?0:100*(1-e[0].intersectionRatio)/75;t.toolbars.forEach(e=>{h(e,1===o?void 0:o)})})(e,o);const t=e[0],n=t.intersectionRect,s=n.width*n.height,r=0===s&&0==t.rootBounds.width*t.rootBounds.height,a=Math.abs(n.left-t.boundingClientRect.left),l=Math.abs(n.right-t.boundingClientRect.right);r||s>0&&(a>=5||l>=5)||(t.isIntersecting?(c(o,!1),c(i)):(0===n.x&&0===n.y||0!==n.width&&0!==n.height)&&(c(o),c(i,!1),h(o.toolbars[0])))})})(e,s,r)},{root:o,threshold:[.25,.3,.4,.5,.6,.7,.8,.9,1]}),this.intersectionObserver.observe(r.toolbars[r.toolbars.length-1].el),this.contentScrollCallback=()=>{((o,i,n)=>{e(()=>{const e=a(1,1+-o.scrollTop/500,1.1);null===n.querySelector("ion-refresher.refresher-native")&&t(()=>{((e=[],t=1,o=!1)=>{e.forEach(e=>{const i=e.ionTitleEl,n=e.innerTitleEl;i&&"large"===i.size&&(n.style.transformOrigin="left center",n.style.transition=o?"all 0.2s ease-in-out":"",n.style.transform=`scale3d(${t}, ${t}, 1)`)})})(i.toolbars,e)})})})(this.scrollEl,r,o)},this.scrollEl.addEventListener("scroll",this.contentScrollCallback),t(()=>{l("ion-title").size="large",l("ion-back-button"),void 0!==this.collapsibleMainHeader&&this.collapsibleMainHeader.classList.add("header-collapse-main")}),this.collapsibleHeaderInitialized=!0)}render(){const{translucent:e}=this,t=r(this);return i(n,{role:"banner",class:{[t]:!0,["header-"+t]:!0,"header-translucent":this.translucent,["header-collapse-"+(this.collapse||"none")]:!0,["header-translucent-"+t]:this.translucent}},"ios"===t&&e&&i("div",{class:"header-background"}),i("slot",null))}get el(){return s(this)}};A.style={md:'ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:""}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}'};export{A as ion_header}