UNPKG

forms-reactive

Version:

Reactive Form Web Component

2 lines 5.3 kB
import{r as o,c as t,h as r,H as a,e as n}from"./p-3e1171f6.js";import{c as e}from"./p-db0ee376.js";import{c as s}from"./p-100c2286.js";import{g as c}from"./p-9c83f640.js";import"./p-3647f076.js";import"./p-9ac21ff8.js";import"./p-78bffe29.js";const i=":host{display:flex;align-items:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;user-select:none;z-index:10;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:50px}@supports (backdrop-filter: blur(0)){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";const b=i;const d=":host{display:flex;align-items:center;justify-content:center;width:auto;padding-right:var(--ion-safe-area-right);padding-bottom:var(--ion-safe-area-bottom, 0);padding-left:var(--ion-safe-area-left);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;user-select:none;z-index:10;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-background-color, #fff));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.07)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-650, var(--ion-text-color-step-350, #595959)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:56px}";const l=d;const u=class{constructor(r){o(this,r);this.ionTabBarChanged=t(this,"ionTabBarChanged",7);this.ionTabBarLoaded=t(this,"ionTabBarLoaded",7);this.keyboardCtrl=null;this.keyboardVisible=false;this.color=undefined;this.selectedTab=undefined;this.translucent=false}selectedTabChanged(){if(this.selectedTab!==undefined){this.ionTabBarChanged.emit({tab:this.selectedTab})}}componentWillLoad(){this.selectedTabChanged()}async connectedCallback(){this.keyboardCtrl=await e((async(o,t)=>{if(o===false&&t!==undefined){await t}this.keyboardVisible=o}))}disconnectedCallback(){if(this.keyboardCtrl){this.keyboardCtrl.destroy()}}componentDidLoad(){this.ionTabBarLoaded.emit()}render(){const{color:o,translucent:t,keyboardVisible:n}=this;const e=c(this);const i=n&&this.el.getAttribute("slot")!=="top";return r(a,{key:"62303a7f9d8c98ffab51a5900c144c5117b9c543",role:"tablist","aria-hidden":i?"true":null,class:s(o,{[e]:true,"tab-bar-translucent":t,"tab-bar-hidden":i})},r("slot",{key:"5771a9828f748c2bd6b5e26758b9723c6b3de5ff"}))}get el(){return n(this)}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};u.style={ios:b,md:l};export{u as ion_tab_bar}; //# sourceMappingURL=p-f66e8fdc.entry.js.map