ion-bottom-sheet2
Version:
A simple bottom sheet for ionic 6+
414 lines • 27.4 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { SheetState } from './ion-bottom-sheet-state';
import * as Hammer from 'hammerjs';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
export class IonBottomSheetComponent {
constructor(_element, _renderer, _domCtrl, _platform) {
this._element = _element;
this._renderer = _renderer;
this._domCtrl = _domCtrl;
this._platform = _platform;
this.dockedHeight = 200;
this.minHeight = 0;
this.topDistance = 0;
this.bounceDelta = 30;
this.canBounce = true;
this.roundBorder = true;
this.roundBorderOnTop = false;
this.shadowBorder = true;
this.shadowBorderOnTop = false;
this.disableDrag = false;
this.hideCloseButton = false;
this.hideCloseButtonOnTop = false;
this.hideDragIcon = false;
this.hideDragIconOnTop = false;
this.hideTitle = false;
this.hideHeader = false;
this.hideSeparator = false;
this.titleCentered = false;
this.titleSize = "20px";
this.titleFamily = "inherit";
this.transition = '0.25s ease-out';
this.state = SheetState.Bottom;
this.title = "Header Title";
this.enableScrollContent = false;
this.enableScrollContentOnlyOnTop = false;
this.enableShadowHeaderOnScrolling = true;
this.useSmoothScrolling = true;
this.stateChange = new EventEmitter();
this._startScroll = 0;
this._sheetTopAnimationHasBeenPerformed = false;
this._bottomShadowHeaderHasBeenPerformed = false;
this._scrollUpContentCheckHasBeenPerformed = false;
this._defaultScrollSetting = false;
this._scrollContent = false;
this._dyInitialScrollDown = 0;
this._dyInitialScrollUp = 0;
this._adjustForShadow();
}
/*********************************************************************************************************/
/* Ng interface implements */
/*********************************************************************************************************/
ngAfterViewInit() {
this._loadForScroll();
this._loadEvents();
this._loadCssStyle();
this._loadContentGesture();
this._loadHeaderGesture();
}
ngOnChanges(changes) {
if (!changes.state) {
return;
}
this._restoreNativeContentSize();
this._enableTransition();
this._setSheetState(changes.state.currentValue);
}
/*********************************************************************************************************/
/* Base class methods */
/*********************************************************************************************************/
_loadHeaderGesture() {
if (this.disableDrag) {
return;
}
let target = this.enableScrollContent ? this._element.nativeElement.querySelector("#ibs-header") : this._element.nativeElement;
const headerGesture = new Hammer(target);
headerGesture.get('pan').set({ enable: true, direction: Hammer.DIRECTION_VERTICAL });
headerGesture.on('panstart', () => this._onHeaderGestureStart());
headerGesture.on('panend', (ev) => this._onHeaderGestureEnd(ev));
headerGesture.on('pan', (ev) => this._onHeaderGestureMove(ev));
}
_loadContentGesture() {
if (!this.enableScrollContent) {
return;
}
const contentGesture = new Hammer(this._element.nativeElement.querySelector("#ibs-content-inner"));
contentGesture.get('pan').set({ enable: true, direction: Hammer.DIRECTION_VERTICAL });
contentGesture.on('panstart', () => this._onContentGestureStart());
contentGesture.on('panend', (ev) => this._onContentGestureEnd(ev));
contentGesture.on('pan', (ev) => this._onContentGestureMove(ev));
}
_loadForScroll() {
this._defaultScrollSetting = this.enableScrollContent && (!this.enableScrollContentOnlyOnTop || !this.canBounce || this.disableDrag);
this._scrollContent = this._defaultScrollSetting;
}
_adjustForShadow() {
if (!this.shadowBorder) {
return;
}
if (this.minHeight > 0) {
return;
}
this.minHeight = this.minHeight - 10;
}
_loadEvents() {
this._renderer.listen(this._element.nativeElement, "transitionend", this._checkForAnimationOnTop.bind(this));
if (!this.hideCloseButton) {
this._renderer.listen(this._element.nativeElement.querySelector("#close-button"), "click", this.closeSheet.bind(this));
}
if (this.enableScrollContent) {
this._renderer.listen(this._element.nativeElement, "transitionend", this._checkForScrolling.bind(this));
this._renderer.listen(this._element.nativeElement.querySelector("#ibs-content-inner"), "scroll", this._contentShadowOnScroll.bind(this));
this._renderer.listen(this._element.nativeElement, "transitionend", this._changeNativeContentSize.bind(this));
}
}
_loadCssStyle() {
this._cssAutoManageClass("no-close-btn", this.hideCloseButton, this._element.nativeElement);
this._cssAutoManageClass("no-drag-icon", this.hideDragIcon, this._element.nativeElement);
this._cssAutoManageClass("no-title", this.hideTitle, this._element.nativeElement);
this._cssAutoManageClass("no-header", this.hideHeader, this._element.nativeElement);
this._cssAutoManageClass("separator", !this.hideSeparator, this._element.nativeElement.querySelector("#ibs-header"));
this._cssAutoManageClass("round-border", this.roundBorder, this._element.nativeElement.querySelector("#ibs-container"));
this._cssAutoManageClass("shadow-border", this.shadowBorder, this._element.nativeElement.querySelector("#ibs-container"));
this._cssAutoManageClass("txt-center", this.titleCentered, this._element.nativeElement.querySelector("#title"));
this._cssAutoManageClass("pd5", this.enableShadowHeaderOnScrolling, this._element.nativeElement.querySelector("#ibs-content"));
this._setStyle("font-size", this.titleSize, this._element.nativeElement.querySelector("#title"));
this._setStyle("font-family", this.titleFamily, this._element.nativeElement.querySelector("#title"));
}
_setSheetState(state) {
switch (state) {
case SheetState.Bottom:
this._setTranslateY('calc(100vh - ' + this.minHeight + 'px)');
break;
case SheetState.Docked:
this._setTranslateY('calc(100vh - ' + this.dockedHeight + 'px)');
break;
case SheetState.Top:
this._setTranslateY(this.topDistance + 'px');
break;
}
}
_getPosition(currentState) {
switch (currentState) {
case SheetState.Bottom:
return this._platform.height() - this.minHeight;
case SheetState.Docked:
return this._platform.height() - this.dockedHeight;
case SheetState.Top:
return this.topDistance;
}
}
_nextSate(currentState, gestureDirection) {
switch (currentState) {
case SheetState.Bottom:
return gestureDirection < 0 ? SheetState.Docked : SheetState.Bottom;
case SheetState.Docked:
return gestureDirection < 0 ? SheetState.Top : SheetState.Bottom;
case SheetState.Top:
return gestureDirection < 0 ? SheetState.Top : SheetState.Docked;
}
}
_checkForScrolling() {
this._dyInitialScrollUp = this._dyInitialScrollDown = 0;
if (this._element.nativeElement.getBoundingClientRect().y == this._getPosition(SheetState.Top)) {
this._scrollContent = this.enableScrollContent;
return;
}
this._scrollContent = this._defaultScrollSetting;
}
_checkForAnimationOnTop() {
if (this._element.nativeElement.getBoundingClientRect().y == this._getPosition(SheetState.Top)) {
if (this._sheetTopAnimationHasBeenPerformed) {
return;
}
this._sheetTopAnimationHasBeenPerformed = true;
this._scrollContent = this.enableScrollContent;
}
else {
if (!this._sheetTopAnimationHasBeenPerformed) {
return;
}
this._sheetTopAnimationHasBeenPerformed = false;
this._scrollContent = false;
if (this.enableScrollContent && this.enableScrollContentOnlyOnTop) {
this._element.nativeElement.querySelector("#ibs-content-inner").scroll({ top: 0, behavior: this.useSmoothScrolling ? 'smooth' : 'auto' });
}
}
if (!this.roundBorderOnTop && this.roundBorder) {
this._cssAutoManageClass("round-border", !this._sheetTopAnimationHasBeenPerformed, this._element.nativeElement.querySelector("#ibs-container"));
}
if (!this.shadowBorderOnTop && this.shadowBorder) {
this._cssAutoManageClass("shadow-border", !this._sheetTopAnimationHasBeenPerformed, this._element.nativeElement.querySelector("#ibs-container"));
}
if (this.hideDragIconOnTop && !this.hideDragIcon) {
this._cssSwitchClass(this._sheetTopAnimationHasBeenPerformed ? "fadeOut" : "fadeIn", this._sheetTopAnimationHasBeenPerformed ? "fadeIn" : "fadeOut", this._element.nativeElement.querySelector("#drag-icon"));
}
if (this.hideCloseButtonOnTop && !this.hideCloseButton) {
this._cssSwitchClass(this._sheetTopAnimationHasBeenPerformed ? "fadeOut" : "fadeIn", this._sheetTopAnimationHasBeenPerformed ? "fadeIn" : "fadeOut", this._element.nativeElement.querySelector("#close-button"));
}
}
_cssSwitchClass(entryClassName, exitClassName, selector) {
this._cssRemoveClass(exitClassName, selector);
this._cssAddClass(entryClassName, selector);
}
_cssAutoManageClass(className, isToaddClass, selector) {
this._domCtrl.write(() => { isToaddClass ? this._cssAddClass(className, selector) : this._cssRemoveClass(className, selector); });
}
_cssAddClass(className, selector) {
this._domCtrl.write(() => this._renderer.addClass(selector, className));
}
_cssRemoveClass(className, selector) {
this._domCtrl.write(() => this._renderer.removeClass(selector, className));
}
_setStyle(property, value, selector) {
this._domCtrl.write(() => this._renderer.setStyle(selector, property, value));
}
_enableTransition() {
this._setStyle('transition', this.transition, this._element.nativeElement);
}
_disableTransition() {
this._setStyle('transition', "none", this._element.nativeElement);
}
_restoreNativeContentSize() {
if (!this._scrollContent) {
return;
}
let newContentHeight = "calc(100vh - " + (this.topDistance + this._getHeaderHeight()) + "px)";
this._setStyle("height", newContentHeight, this._element.nativeElement.querySelector("#ibs-content"));
}
_changeNativeContentSize() {
if (!this._scrollContent) {
return;
}
let newContentHeight = "calc(100vh - " + (this._element.nativeElement.getBoundingClientRect().y + this._getHeaderHeight()) + "px)";
this._setStyle("height", newContentHeight, this._element.nativeElement.querySelector("#ibs-content"));
this._autoEnableContentScroll();
}
_getHeaderHeight() {
return this.hideHeader ? 0 : this._element.nativeElement.querySelector("#ibs-header").getBoundingClientRect().height;
}
_autoEnableContentScroll() {
this._domCtrl.read(() => {
let contentInnerScrollHeight = this._element.nativeElement.querySelector("#ibs-content-inner").scrollHeight;
let contentHeight = this._element.nativeElement.querySelector("#ibs-content").getBoundingClientRect().height;
this._scrollContent = (contentHeight - contentInnerScrollHeight < 0);
});
}
_contentShadowOnScroll() {
if (this._element.nativeElement.querySelector("#ibs-content-inner").scrollTop > 0) {
if (this._bottomShadowHeaderHasBeenPerformed) {
return;
}
this._bottomShadowHeaderHasBeenPerformed = true;
}
else {
if (!this._bottomShadowHeaderHasBeenPerformed) {
return;
}
this._bottomShadowHeaderHasBeenPerformed = false;
}
if (this.enableShadowHeaderOnScrolling) {
this._cssAutoManageClass("bottom-header-shadow", this._bottomShadowHeaderHasBeenPerformed, this._element.nativeElement.querySelector("#ibs-header"));
}
}
_setTranslateY(value) {
this._setStyle('transform', 'translateY(' + value + ')', this._element.nativeElement);
}
closeSheet() {
this.stateChange.emit(this.state = SheetState.Bottom);
}
/*********************************************************************************************************/
/* Gestures */
/*********************************************************************************************************/
_onHeaderGestureStart() {
this._startPosition = this._element.nativeElement.getBoundingClientRect().y;
this._disableTransition();
this._restoreNativeContentSize();
}
_onHeaderGestureEnd(ev, dyInitial = 0) {
if (!this.canBounce) {
return;
}
if (Math.abs(ev.deltaY - dyInitial) > this.bounceDelta) {
this.stateChange.emit(this.state = this._nextSate(this.state, ev.deltaY - dyInitial));
}
else {
this._enableTransition();
this._setTranslateY(this._getPosition(this.state) + "px");
}
}
_onHeaderGestureMove(ev, dyInitial = 0) {
let nextYposition = this._startPosition + ev.deltaY - dyInitial;
if ((nextYposition <= this._getPosition(SheetState.Top)) && ((ev.deltaY - dyInitial) < 0)) {
nextYposition = this._getPosition(SheetState.Top);
}
if ((nextYposition >= this._getPosition(SheetState.Bottom)) && ((ev.deltaY - dyInitial) > 0)) {
nextYposition = this._getPosition(SheetState.Bottom);
}
this._setTranslateY(nextYposition + "px");
this._changeNativeContentSize();
this._checkForAnimationOnTop();
}
_onContentGestureStart() {
if (!this._scrollContent && !this.disableDrag) {
this._onHeaderGestureStart();
return;
}
this._startScroll = this._element.nativeElement.querySelector("#ibs-content-inner").scrollTop;
}
_onContentGestureEnd(ev) {
if (!this._scrollContent && !this.disableDrag) {
this._onHeaderGestureEnd(ev, this._dyInitialScrollDown);
this._scrollContent = true;
return;
}
// initialize up and down scroll initial values
this._dyInitialScrollUp = this._dyInitialScrollDown = 0;
// restore performance scroll flag
this._scrollUpContentCheckHasBeenPerformed = false;
// define scroll math function
let currentScrollPosition = this._element.nativeElement.querySelector("#ibs-content-inner").scrollTop;
let speed = -Math.sign(ev.deltaY) * (Math.exp(Math.round(Math.abs(ev.velocityY))) - 1);
let mP = this.useSmoothScrolling ? speed * Math.abs(ev.deltaY) : 0;
let nextScroll = currentScrollPosition + mP;
// scroll
this._element.nativeElement.querySelector("#ibs-content-inner").scroll({ top: nextScroll, behavior: this.useSmoothScrolling ? 'smooth' : 'auto' });
}
_onContentGestureMove(ev) {
if (!this._scrollContent && !this.disableDrag) {
this._onHeaderGestureMove(ev, this._dyInitialScrollDown);
return;
}
// get Delta Y before scrolling
if ((this.state != SheetState.Top) && (ev.deltaY < 0) && (!this._scrollUpContentCheckHasBeenPerformed)) {
this._dyInitialScrollUp = ev.deltaY;
this._scrollUpContentCheckHasBeenPerformed = true;
}
let nextScroll = this._startScroll - ev.deltaY + this._dyInitialScrollUp;
// stop scroll and move all sheet down / up
if ((nextScroll <= 0) && (ev.deltaY - this._dyInitialScrollUp > 0)) {
this._onHeaderGestureStart();
this._scrollContent = false;
nextScroll = 0;
this._dyInitialScrollUp = 0;
// get Delta Y before moving sheet
this._dyInitialScrollDown = ev.deltaY;
this._scrollUpContentCheckHasBeenPerformed = false;
}
this._element.nativeElement.querySelector("#ibs-content-inner").scroll(0, nextScroll);
}
}
IonBottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonBottomSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DomController }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component });
IonBottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IonBottomSheetComponent, isStandalone: true, selector: "ion-bottom-sheet", inputs: { dockedHeight: "dockedHeight", minHeight: "minHeight", topDistance: "topDistance", bounceDelta: "bounceDelta", canBounce: "canBounce", roundBorder: "roundBorder", roundBorderOnTop: "roundBorderOnTop", shadowBorder: "shadowBorder", shadowBorderOnTop: "shadowBorderOnTop", disableDrag: "disableDrag", hideCloseButton: "hideCloseButton", hideCloseButtonOnTop: "hideCloseButtonOnTop", hideDragIcon: "hideDragIcon", hideDragIconOnTop: "hideDragIconOnTop", hideTitle: "hideTitle", hideHeader: "hideHeader", hideSeparator: "hideSeparator", titleCentered: "titleCentered", titleSize: "titleSize", titleFamily: "titleFamily", transition: "transition", state: "state", title: "title", enableScrollContent: "enableScrollContent", enableScrollContentOnlyOnTop: "enableScrollContentOnlyOnTop", enableShadowHeaderOnScrolling: "enableShadowHeaderOnScrolling", useSmoothScrolling: "useSmoothScrolling" }, outputs: { stateChange: "stateChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"ibs-container\">\n <div id=\"ibs-header\" #ibs_header>\n <div id=\"drag-icon\"></div>\n <div id=\"title-button\">\n <div id=\"title\">{{ title }}</div>\n <div id=\"close-button\"></div>\n </div>\n </div>\n <div id=\"ibs-content\" #ibs_content>\n <div id=\"ibs-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host {\n touch-action: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 999 !important;\n background-color: transparent;\n will-change: transform;\n}\n\n:host #ibs-container{\n position: relative;\n background-color: white;\n width: 100%;\n height: 100%;\n}\n\n:host #ibs-container.round-border{\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n}\n\n:host #ibs-container.shadow-border{\n box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.12);\n}\n\n:host #ibs-header.bottom-header-shadow{\n box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.12);\n}\n\n:host #ibs-header{\n padding: 5px;\n width: 100%;\n min-height: 35px;\n}\n\n:host .separator{\n border-bottom-style: solid;\n border-bottom-color: rgba(220, 220, 220, 1);\n border-bottom-width: 1px;\n}\n\n:host #drag-icon{\n margin: 0 auto;\n height: 5px;\n width: 36px;\n background-color: #c0c0c0;\n border-radius: 4px;\n}\n\n:host #title-button{\n width: 100%;\n height: 100%;\n position: relative;\n height: 26px;\n margin-top: 5px;\n margin-bottom: 5px;\n}\n\n:host #close-button{\n width: 26px;\n height: 26px;\n position: absolute;\n right: 10px;\n background: #c0c0c0;\n border-radius: 100%;\n content: url('data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"> <path fill=\"7a7a7e\" d=\"M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z\"/> </svg>');\n}\n\n:host #title{\n position: absolute;\n left: 10px;\n padding: 0px;\n margin: 0px;\n font-size: 20px;\n line-height: 26px;\n color: inherit; \n}\n\n:host .txt-center{\n text-align: center;\n width: 100%;\n left: 0px !important;\n}\n\n:host #ibs-content{\n width: 100%;\n height: 100%;\n padding-left: 5px;\n padding-right: 5px;\n}\n\n:host .pd5{\n padding-top: 5px;\n}\n\n:host #ibs-content-inner{\n touch-action: none;\n overflow: hidden;\n height: 100%;\n}\n\n:host .fadeOut {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s linear 700ms, opacity 700ms; \n}\n\n:host .fadeIn {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s, opacity 300ms;\n}\n\n:host.no-drag-icon #drag-icon,\n:host.no-close-btn #close-button,\n:host.no-title #title,\n:host.no-header #ibs-header {\n display: none !important;\n}\n\n:host.no-title #title-button {\n margin-top: 0px;\n}\n\n:host.no-title.no-drag-icon #title-button {\n margin-top: 5px;\n}\n\n:host.no-title.no-close-btn #title-button {\n margin-bottom: 0px;\n}\n\n:host.no-drag-icon.no-title.no-close-btn #title-button {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonBottomSheetComponent, decorators: [{
type: Component,
args: [{ selector: 'ion-bottom-sheet', standalone: true, imports: [], template: "<div id=\"ibs-container\">\n <div id=\"ibs-header\" #ibs_header>\n <div id=\"drag-icon\"></div>\n <div id=\"title-button\">\n <div id=\"title\">{{ title }}</div>\n <div id=\"close-button\"></div>\n </div>\n </div>\n <div id=\"ibs-content\" #ibs_content>\n <div id=\"ibs-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host {\n touch-action: none;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 999 !important;\n background-color: transparent;\n will-change: transform;\n}\n\n:host #ibs-container{\n position: relative;\n background-color: white;\n width: 100%;\n height: 100%;\n}\n\n:host #ibs-container.round-border{\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n}\n\n:host #ibs-container.shadow-border{\n box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.12);\n}\n\n:host #ibs-header.bottom-header-shadow{\n box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.12);\n}\n\n:host #ibs-header{\n padding: 5px;\n width: 100%;\n min-height: 35px;\n}\n\n:host .separator{\n border-bottom-style: solid;\n border-bottom-color: rgba(220, 220, 220, 1);\n border-bottom-width: 1px;\n}\n\n:host #drag-icon{\n margin: 0 auto;\n height: 5px;\n width: 36px;\n background-color: #c0c0c0;\n border-radius: 4px;\n}\n\n:host #title-button{\n width: 100%;\n height: 100%;\n position: relative;\n height: 26px;\n margin-top: 5px;\n margin-bottom: 5px;\n}\n\n:host #close-button{\n width: 26px;\n height: 26px;\n position: absolute;\n right: 10px;\n background: #c0c0c0;\n border-radius: 100%;\n content: url('data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"> <path fill=\"7a7a7e\" d=\"M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z\"/> </svg>');\n}\n\n:host #title{\n position: absolute;\n left: 10px;\n padding: 0px;\n margin: 0px;\n font-size: 20px;\n line-height: 26px;\n color: inherit; \n}\n\n:host .txt-center{\n text-align: center;\n width: 100%;\n left: 0px !important;\n}\n\n:host #ibs-content{\n width: 100%;\n height: 100%;\n padding-left: 5px;\n padding-right: 5px;\n}\n\n:host .pd5{\n padding-top: 5px;\n}\n\n:host #ibs-content-inner{\n touch-action: none;\n overflow: hidden;\n height: 100%;\n}\n\n:host .fadeOut {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s linear 700ms, opacity 700ms; \n}\n\n:host .fadeIn {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s, opacity 300ms;\n}\n\n:host.no-drag-icon #drag-icon,\n:host.no-close-btn #close-button,\n:host.no-title #title,\n:host.no-header #ibs-header {\n display: none !important;\n}\n\n:host.no-title #title-button {\n margin-top: 0px;\n}\n\n:host.no-title.no-drag-icon #title-button {\n margin-top: 5px;\n}\n\n:host.no-title.no-close-btn #title-button {\n margin-bottom: 0px;\n}\n\n:host.no-drag-icon.no-title.no-close-btn #title-button {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DomController }, { type: i1.Platform }], propDecorators: { dockedHeight: [{
type: Input
}], minHeight: [{
type: Input
}], topDistance: [{
type: Input
}], bounceDelta: [{
type: Input
}], canBounce: [{
type: Input
}], roundBorder: [{
type: Input
}], roundBorderOnTop: [{
type: Input
}], shadowBorder: [{
type: Input
}], shadowBorderOnTop: [{
type: Input
}], disableDrag: [{
type: Input
}], hideCloseButton: [{
type: Input
}], hideCloseButtonOnTop: [{
type: Input
}], hideDragIcon: [{
type: Input
}], hideDragIconOnTop: [{
type: Input
}], hideTitle: [{
type: Input
}], hideHeader: [{
type: Input
}], hideSeparator: [{
type: Input
}], titleCentered: [{
type: Input
}], titleSize: [{
type: Input
}], titleFamily: [{
type: Input
}], transition: [{
type: Input
}], state: [{
type: Input
}], title: [{
type: Input
}], enableScrollContent: [{
type: Input
}], enableScrollContentOnlyOnTop: [{
type: Input
}], enableShadowHeaderOnScrolling: [{
type: Input
}], useSmoothScrolling: [{
type: Input
}], stateChange: [{
type: Output
}] } });
//# sourceMappingURL=ion-bottom-sheet.component.js.map