@carefirst/library 7.0.4 → 7.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1970,6 +1970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
1970
1970
  * %--cf-page-mobile-max-width: 100%;%
1971
1971
  * %--cf-page-desktop-max-width: 1300px;%
1972
1972
  * %--cf-page-mobile-header-max-width: 100%;%
1973
+ * %--cf-page-header-no-page-padding: false;%
1973
1974
  * %--cf-page-desktop-header-max-width: 1300px;%
1974
1975
  * %--cf-page-content-mobile-max-width: 100%;%
1975
1976
  * %--cf-page-content-desktop-max-width: 100%;%
@@ -1987,7 +1988,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
1987
1988
  class PageComponent {
1988
1989
  centerH;
1989
1990
  centerV;
1990
- headerInheritanceOff;
1991
+ headerCenterInheritanceOff;
1992
+ headerNoPagePadding;
1991
1993
  stickyHeaderOff;
1992
1994
  dark;
1993
1995
  noScroll;
@@ -1999,7 +2001,8 @@ class PageComponent {
1999
2001
  //--- Local variables
2000
2002
  inputCenterH = false;
2001
2003
  inputCenterV = false;
2002
- inputHeaderInheritanceOff = false;
2004
+ inputHeaderCenterInheritanceOff = false;
2005
+ inputHeaderNoPagePadding = false;
2003
2006
  inputStickyHeaderOff = false;
2004
2007
  inputDark = false;
2005
2008
  inputNoScroll = false;
@@ -2018,7 +2021,9 @@ class PageComponent {
2018
2021
  //--- Center V
2019
2022
  this.inputCenterV = checkTruthAttribute(changes, 'centerV', this.inputCenterV);
2020
2023
  //--- Header CF Page Center Inheritance
2021
- this.inputHeaderInheritanceOff = checkTruthAttribute(changes, 'headerInheritanceOff', this.inputHeaderInheritanceOff);
2024
+ this.inputHeaderCenterInheritanceOff = checkTruthAttribute(changes, 'headerCenterInheritanceOff', this.inputHeaderCenterInheritanceOff);
2025
+ //--- Header No Page Padding
2026
+ this.inputHeaderNoPagePadding = checkTruthAttribute(changes, 'headerNoPagePadding', this.inputHeaderNoPagePadding);
2022
2027
  //--- Header No Sticky Position
2023
2028
  this.inputStickyHeaderOff = checkTruthAttribute(changes, 'stickyHeaderOff', this.inputStickyHeaderOff);
2024
2029
  //--- Dark
@@ -2035,16 +2040,18 @@ class PageComponent {
2035
2040
  this.inputStickyButtonOn = checkTruthAttribute(changes, 'stickyButtonOn', this.inputStickyButtonOn);
2036
2041
  }
2037
2042
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2038
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageComponent, isStandalone: false, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", headerInheritanceOff: "headerInheritanceOff", stickyHeaderOff: "stickyHeaderOff", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div\n id=\"header\"\n [ngClass]=\"{\n 'center-h': inputCenterH && !inputHeaderInheritanceOff,\n 'center-v': inputCenterV && !inputHeaderInheritanceOff,\n 'sticky-header-off': inputStickyHeaderOff,\n 'ion-no-border': true,\n }\">\n <div class=\"header-content content-base\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content content-base\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content content-base\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n @if (inputStickyButtonOn) {\n <div id=\"sticky-buttons\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media(min-width:768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page .content-base{display:flex;flex-direction:column}ion-content.cf-page .content-base>*{max-width:100%}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--cf-page-header-bg-color, var(--page-background-color))}ion-content.cf-page #page-setup #header .header-content{width:100%;max-width:var(--cf-page-mobile-header-max-width, var(--cf-page-mobile-max-width, 100%))}@media(min-width:768px){ion-content.cf-page #page-setup #header .header-content{max-width:var(--cf-page-desktop-header-max-width, var(--cf-page-desktop-max-width, 1300px))}}ion-content.cf-page #page-setup #header.sticky-header-off{position:relative}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #header.center-h,ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #header.center-v,ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:12px;width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.vertical-buttons{flex-direction:column;align-items:center}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .header-content{background-color:#ff0}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
2043
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PageComponent, isStandalone: false, selector: "cf-page", inputs: { centerH: "centerH", centerV: "centerV", headerCenterInheritanceOff: "headerCenterInheritanceOff", headerNoPagePadding: "headerNoPagePadding", stickyHeaderOff: "stickyHeaderOff", dark: "dark", noScroll: "noScroll", devMode: "devMode", buttonsVertical: "buttonsVertical", stickyButtonOn: "stickyButtonOn", noStickyButtonFade: "noStickyButtonFade" }, outputs: { scrollEvent: "scrollEvent" }, usesOnChanges: true, ngImport: i0, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div\n id=\"header\"\n [ngClass]=\"{\n 'center-h': inputCenterH && !inputHeaderCenterInheritanceOff,\n 'center-v': inputCenterV && !inputHeaderCenterInheritanceOff,\n 'sticky-header-off': inputStickyHeaderOff,\n 'no-page-padding': inputHeaderNoPagePadding,\n 'ion-no-border': true,\n }\">\n <div class=\"header-content content-base\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content content-base\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content content-base\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n @if (inputStickyButtonOn) {\n <div id=\"sticky-buttons\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media(min-width:768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page .content-base{display:flex;flex-direction:column}ion-content.cf-page .content-base>*{max-width:100%}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--cf-page-header-bg-color, var(--page-background-color))}ion-content.cf-page #page-setup #header .header-content{width:100%;max-width:var(--cf-page-mobile-header-max-width, var(--cf-page-mobile-max-width, 100%))}@media(min-width:768px){ion-content.cf-page #page-setup #header .header-content{max-width:var(--cf-page-desktop-header-max-width, var(--cf-page-desktop-max-width, 1300px))}}ion-content.cf-page #page-setup #header.no-page-padding{padding-inline:0px}ion-content.cf-page #page-setup #header.no-page-padding .header-content{max-width:100%}ion-content.cf-page #page-setup #header.sticky-header-off{position:relative}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #header.center-h,ion-content.cf-page #page-setup #header.center-h>.header-content,ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #header.center-v,ion-content.cf-page #page-setup #header.center-v>.header-content,ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:12px;width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.vertical-buttons{flex-direction:column;align-items:center}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .header-content{background-color:#ff0}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
2039
2044
  }
2040
2045
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageComponent, decorators: [{
2041
2046
  type: Component,
2042
- args: [{ selector: 'cf-page', standalone: false, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div\n id=\"header\"\n [ngClass]=\"{\n 'center-h': inputCenterH && !inputHeaderInheritanceOff,\n 'center-v': inputCenterV && !inputHeaderInheritanceOff,\n 'sticky-header-off': inputStickyHeaderOff,\n 'ion-no-border': true,\n }\">\n <div class=\"header-content content-base\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content content-base\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content content-base\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n @if (inputStickyButtonOn) {\n <div id=\"sticky-buttons\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media(min-width:768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page .content-base{display:flex;flex-direction:column}ion-content.cf-page .content-base>*{max-width:100%}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--cf-page-header-bg-color, var(--page-background-color))}ion-content.cf-page #page-setup #header .header-content{width:100%;max-width:var(--cf-page-mobile-header-max-width, var(--cf-page-mobile-max-width, 100%))}@media(min-width:768px){ion-content.cf-page #page-setup #header .header-content{max-width:var(--cf-page-desktop-header-max-width, var(--cf-page-desktop-max-width, 1300px))}}ion-content.cf-page #page-setup #header.sticky-header-off{position:relative}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #header.center-h,ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #header.center-v,ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:12px;width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.vertical-buttons{flex-direction:column;align-items:center}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .header-content{background-color:#ff0}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"] }]
2047
+ args: [{ selector: 'cf-page', standalone: false, template: "<ion-content\n scrollEvents=\"true\"\n class=\"ion-page cf-page\"\n [ngClass]=\"{ 'bg-dark': inputDark, 'no-scroll': inputNoScroll, 'dev-mode': inputDevMode }\"\n (ionScroll)=\"scrollEvent.emit($event)\">\n <div id=\"page-setup\" [ngClass]=\"{ 'center-v': inputCenterV }\">\n <!-- Header -->\n <div\n id=\"header\"\n [ngClass]=\"{\n 'center-h': inputCenterH && !inputHeaderCenterInheritanceOff,\n 'center-v': inputCenterV && !inputHeaderCenterInheritanceOff,\n 'sticky-header-off': inputStickyHeaderOff,\n 'no-page-padding': inputHeaderNoPagePadding,\n 'ion-no-border': true,\n }\">\n <div class=\"header-content content-base\">\n <ng-content select=\"[cf-page-header]\"></ng-content>\n </div>\n </div>\n <!-- Content and Buttons -->\n <div id=\"device-spacing\" [ngClass]=\"{ 'center-h': inputCenterH, 'center-v': inputCenterV }\">\n <div class=\"content content-base\">\n <ng-content></ng-content>\n </div>\n <div id=\"page-buttons\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n <!-- Footer -->\n <div id=\"footer\">\n <div class=\"content content-base\">\n <ng-content select=\"[cf-page-footer]\"></ng-content>\n </div>\n </div>\n <!-- Sticky-buttons -->\n @if (inputStickyButtonOn) {\n <div id=\"sticky-buttons\">\n <div id=\"overlay\" [ngClass]=\"{ off: inputNoStickyButtonFade }\"> </div>\n <div id=\"buttons-container-background\">\n <div id=\"buttons-container\">\n <div class=\"content content-base\" [ngClass]=\"{ 'vertical-buttons': inputButtonsVertical }\">\n <ng-content select=\"[cf-page-sticky-buttons]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ion-content>\n", styles: ["ion-content.cf-page{--page-background-color: var(--cf-page-main-bg-color, var(--cf-app-background-light))}ion-content.cf-page.bg-dark{--page-background-color: var(--cf-app-background-dark)}ion-content.cf-page::part(scroll){background-color:var(--page-background-color);-ms-overflow-style:none;scrollbar-width:none}ion-content.cf-page::part(scroll)::-webkit-scrollbar{display:none}ion-content.cf-page.no-scroll::part(scroll){overflow:hidden}ion-content.cf-page{--main-page-block-padding: 24px}@media(min-width:768px){ion-content.cf-page{--main-page-block-padding: 48px}}ion-content.cf-page .content-base{display:flex;flex-direction:column}ion-content.cf-page .content-base>*{max-width:100%}ion-content.cf-page #page-setup{position:relative;width:100%;min-height:100%;height:fit-content;flex-direction:column;display:flex}ion-content.cf-page #page-setup>*{width:100%;padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup>*{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup .content{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup .content{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #header{display:flex;flex-direction:column;align-items:center;position:sticky;top:0;z-index:10;background-color:var(--cf-page-header-bg-color, var(--page-background-color))}ion-content.cf-page #page-setup #header .header-content{width:100%;max-width:var(--cf-page-mobile-header-max-width, var(--cf-page-mobile-max-width, 100%))}@media(min-width:768px){ion-content.cf-page #page-setup #header .header-content{max-width:var(--cf-page-desktop-header-max-width, var(--cf-page-desktop-max-width, 1300px))}}ion-content.cf-page #page-setup #header.no-page-padding{padding-inline:0px}ion-content.cf-page #page-setup #header.no-page-padding .header-content{max-width:100%}ion-content.cf-page #page-setup #header.sticky-header-off{position:relative}ion-content.cf-page #page-setup #device-spacing{flex-grow:1;display:flex;flex-direction:column}ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:1;width:min(var(--cf-page-content-mobile-max-width, 100%),100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing>.content:first-child{flex-grow:0;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}ion-content.cf-page #page-setup #device-spacing #page-buttons{width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #device-spacing #page-buttons>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #device-spacing #page-buttons>.vertical-buttons{flex-direction:column;align-items:center}}ion-content.cf-page #page-setup #header.center-h,ion-content.cf-page #page-setup #header.center-h>.header-content,ion-content.cf-page #page-setup #device-spacing.center-h,ion-content.cf-page #page-setup #device-spacing.center-h>.content{align-items:center;text-align:center}ion-content.cf-page #page-setup #header.center-v,ion-content.cf-page #page-setup #header.center-v>.header-content,ion-content.cf-page #page-setup #device-spacing.center-v,ion-content.cf-page #page-setup #device-spacing.center-v>.content{justify-content:center}ion-content.cf-page #page-setup #footer{display:flex;flex-direction:column;align-items:center;background-color:var(--cf-page-footer-bg-color, transparent)}ion-content.cf-page #page-setup #sticky-buttons{--fade-height: var(--cf-page-sticky-button-fade-height, 48px);display:flex;flex-direction:column;align-items:center;position:sticky;bottom:0;z-index:10;background-color:transparent;margin-inline:auto;padding-inline:0px}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{background-color:var(--page-background-color);width:100%;display:flex;flex-direction:column;align-items:center;margin-top:var(--fade-height);padding-inline:var(--cf-page-inline-padding, 16px)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background{padding-inline:var(--cf-page-inline-padding, 72px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:12px;width:100%;max-width:var(--cf-page-mobile-max-width, 100%)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{max-width:var(--cf-page-desktop-max-width, 1300px)}}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{justify-content:center;align-items:center;flex-wrap:nowrap;gap:16px;width:min(var(--cf-page-content-mobile-max-width, 100%),100%);margin-inline:auto}ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content:not(:empty){padding-bottom:var(--main-page-block-padding)}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.content{flex-direction:row;width:min(var(--cf-page-content-desktop-max-width, 100%),100%)}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container>.vertical-buttons{flex-direction:column;align-items:center}}@media(min-width:768px){ion-content.cf-page #page-setup #sticky-buttons #buttons-container-background #buttons-container{padding-top:24px}}ion-content.cf-page #page-setup #sticky-buttons #overlay{width:100%;height:var(--fade-height);position:absolute;background-image:linear-gradient(to bottom,transparent,var(--page-background-color) 80%)}ion-content.cf-page #page-setup #sticky-buttons #overlay.off{background-color:var(--page-background-color)}#page-setup.center-v{justify-content:center}ion-content.cf-page.dev-mode #page-setup{background-color:#0ff}ion-content.cf-page.dev-mode #page-setup #header{background-color:#00f}ion-content.cf-page.dev-mode #page-setup .header-content{background-color:#ff0}ion-content.cf-page.dev-mode #page-setup .content{background-color:green}ion-content.cf-page.dev-mode #page-setup #page-buttons>.content{background-color:tomato}ion-content.cf-page.dev-mode #page-setup #footer{background-color:brown}ion-content.cf-page.dev-mode #page-setup #sticky-buttons #buttons-container-background{background-color:#7fff00}\n"] }]
2043
2048
  }], propDecorators: { centerH: [{
2044
2049
  type: Input
2045
2050
  }], centerV: [{
2046
2051
  type: Input
2047
- }], headerInheritanceOff: [{
2052
+ }], headerCenterInheritanceOff: [{
2053
+ type: Input
2054
+ }], headerNoPagePadding: [{
2048
2055
  type: Input
2049
2056
  }], stickyHeaderOff: [{
2050
2057
  type: Input