@carefirst/library 7.0.5 → 7.1.1
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.
|
@@ -1204,11 +1204,11 @@ class BadgeComponent {
|
|
|
1204
1204
|
this.inputStretch = checkTruthAttribute(changes, 'stretch', this.inputStretch);
|
|
1205
1205
|
}
|
|
1206
1206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", emoji: "emoji", "extra-small": "extra-small", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-
|
|
1207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BadgeComponent, isStandalone: false, selector: "cf-badge", inputs: { type: "type", icon: "icon", emoji: "emoji", "extra-small": "extra-small", small: "small", large: "large", stretch: "stretch" }, usesOnChanges: true, ngImport: i0, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-color-white);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-success{--cf-badge-background: var(--cf-app-system-color-success-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning-100);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-grey-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-success-25);--cf-badge-text-color: var(--cf-app-system-color-success-100)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-error-25);--cf-badge-text-color: var(--cf-app-system-color-error-100)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-warning-25);--cf-badge-text-color: var(--cf-app-system-color-warning-100)}div.cf-badge-feedback-busy ion-spinner{height:1.2rem;width:1.2rem}div.cf-badge-feedback-accent{--cf-badge-background: var(--cf-app-color-accent-25);--cf-badge-text-color: var(--cf-app-color-accent)}div.cf-badge-feedback-disabled{--cf-badge-background: var(--cf-app-system-color-grey-background);--cf-badge-text-color: var(--cf-app-system-color-grey-disabled)}div.cf-badge-custom-color{--cf-badge-background: var(--custom-color, var(--cf-app-color-primary));--cf-badge-text-color: var(--custom-color-text, var(--cf-app-text-color-light))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor", "iconColorCustom"] }, { kind: "component", type: EmojiComponent, selector: "cf-emoji", inputs: ["emoji", "height", "heightMobile", "heightDesktop"] }, { kind: "component", type: SpinnerComponent, selector: "cf-spinner", inputs: ["size", "primaryColor"] }] });
|
|
1208
1208
|
}
|
|
1209
1209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1210
1210
|
type: Component,
|
|
1211
|
-
args: [{ selector: 'cf-badge', standalone: false, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-
|
|
1211
|
+
args: [{ selector: 'cf-badge', standalone: false, template: "<div\n [className]=\"'cf-badge-' + inputType\"\n [ngClass]=\"{\n 'extra-small': inputExtraSmall,\n 'cf-button-text-extra-small': inputExtraSmall,\n small: inputSmall,\n 'cf-button-text-small': inputSmall,\n large: inputLarge,\n 'cf-button-text-large': inputLarge,\n stretch: inputStretch,\n }\">\n @if (inputType !== 'feedback-busy') {\n @if (inputIcon) {\n <cf-icon [icon]=\"inputIcon\" [height]=\"fontsize\"></cf-icon>\n } @else if (inputEmoji) {\n <cf-emoji [emoji]=\"inputEmoji\" [height]=\"fontsize\"></cf-emoji>\n }\n }\n @if (inputType === 'feedback-busy') {\n <cf-spinner primaryColor [size]=\"inputExtraSmall ? '8' : '12'\"></cf-spinner>\n }\n <p><ng-content></ng-content></p>\n</div>\n", styles: ["div[class^=cf-badge-]{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light);--cf-svg-overwrite-stroke-color: var(--cf-badge-text-color);display:flex;flex-direction:row;gap:1rem;justify-content:center;align-items:center;padding:0px 1.6rem;border-radius:2rem;width:fit-content;background:var(--cf-badge-background);height:3.4rem}div[class^=cf-badge-]>p{width:fit-content;color:var(--cf-badge-text-color)}div[class^=cf-badge-].extra-small{padding:0px 1.2rem;height:2.1rem}div[class^=cf-badge-].small{height:2.8rem}div[class^=cf-badge-].large{height:4rem}div[class^=cf-badge-].stretch{width:100%}div.cf-badge-feedback-primary{--cf-badge-background: var(--cf-app-color-primary);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-white{--cf-badge-background: var(--cf-app-color-white);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-success{--cf-badge-background: var(--cf-app-system-color-success-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-alert{--cf-badge-background: var(--cf-app-system-color-error-100);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-accent{--cf-badge-background: var(--cf-app-color-accent);--cf-badge-text-color: var(--cf-app-text-color-light)}div.cf-badge-warning{--cf-badge-background: var(--cf-app-system-color-warning-100);--cf-badge-text-color: var(--cf-app-text-color-default)}div.cf-badge-disabled{--cf-badge-background: var(--cf-app-system-color-grey-disabled);--cf-badge-text-color: var(--cf-app-text-color-grey)}div.cf-badge-feedback-success{--cf-badge-background: var(--cf-app-system-color-success-25);--cf-badge-text-color: var(--cf-app-system-color-success-100)}div.cf-badge-feedback-error{--cf-badge-background: var(--cf-app-system-color-error-25);--cf-badge-text-color: var(--cf-app-system-color-error-100)}div.cf-badge-feedback-warning,div.cf-badge-feedback-busy{--cf-badge-background: var(--cf-app-system-color-warning-25);--cf-badge-text-color: var(--cf-app-system-color-warning-100)}div.cf-badge-feedback-busy ion-spinner{height:1.2rem;width:1.2rem}div.cf-badge-feedback-accent{--cf-badge-background: var(--cf-app-color-accent-25);--cf-badge-text-color: var(--cf-app-color-accent)}div.cf-badge-feedback-disabled{--cf-badge-background: var(--cf-app-system-color-grey-background);--cf-badge-text-color: var(--cf-app-system-color-grey-disabled)}div.cf-badge-custom-color{--cf-badge-background: var(--custom-color, var(--cf-app-color-primary));--cf-badge-text-color: var(--custom-color-text, var(--cf-app-text-color-light))}\n"] }]
|
|
1212
1212
|
}], propDecorators: { type: [{
|
|
1213
1213
|
type: Input
|
|
1214
1214
|
}], icon: [{
|
|
@@ -1956,7 +1956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
1956
1956
|
* @usage <cf-page
|
|
1957
1957
|
* %centerH%
|
|
1958
1958
|
* %centerV%
|
|
1959
|
-
* %
|
|
1959
|
+
* %headerCenterInheritanceOff%
|
|
1960
1960
|
* %stickyHeaderOff%
|
|
1961
1961
|
* %dark%
|
|
1962
1962
|
* %noScroll%
|
|
@@ -1967,14 +1967,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
1967
1967
|
* style="
|
|
1968
1968
|
* %--cf-page-main-bg-color: light;%
|
|
1969
1969
|
* %--cf-page-inline-padding: 16px;%
|
|
1970
|
+
* %--cf-page-header-no-page-padding: false;%
|
|
1971
|
+
* %--cf-page-header-bg-color: transparent;%
|
|
1972
|
+
*
|
|
1970
1973
|
* %--cf-page-mobile-max-width: 100%;%
|
|
1971
|
-
* %--cf-page-desktop-max-width: 1300px;%
|
|
1972
1974
|
* %--cf-page-mobile-header-max-width: 100%;%
|
|
1973
|
-
* %--cf-page-header-no-page-padding: false;%
|
|
1974
|
-
* %--cf-page-desktop-header-max-width: 1300px;%
|
|
1975
1975
|
* %--cf-page-content-mobile-max-width: 100%;%
|
|
1976
|
+
*
|
|
1977
|
+
* %--cf-page-desktop-max-width: 1300px;%
|
|
1978
|
+
* %--cf-page-desktop-header-max-width: 1300px;%
|
|
1976
1979
|
* %--cf-page-content-desktop-max-width: 100%;%
|
|
1977
|
-
*
|
|
1980
|
+
*
|
|
1978
1981
|
* %--cf-page-footer-bg-color: transparent;%
|
|
1979
1982
|
* %--cf-page-sticky-button-fade-height: 24px;%
|
|
1980
1983
|
* ">
|
|
@@ -2040,11 +2043,11 @@ class PageComponent {
|
|
|
2040
2043
|
this.inputStickyButtonOn = checkTruthAttribute(changes, 'stickyButtonOn', this.inputStickyButtonOn);
|
|
2041
2044
|
}
|
|
2042
2045
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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:
|
|
2046
|
+
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{margin-inline:auto;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 #device-spacing #page-buttons{margin-inline:auto}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:transparent;background-image:none}#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"] }] });
|
|
2044
2047
|
}
|
|
2045
2048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PageComponent, decorators: [{
|
|
2046
2049
|
type: Component,
|
|
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:
|
|
2050
|
+
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{margin-inline:auto;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 #device-spacing #page-buttons{margin-inline:auto}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:transparent;background-image:none}#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"] }]
|
|
2048
2051
|
}], propDecorators: { centerH: [{
|
|
2049
2052
|
type: Input
|
|
2050
2053
|
}], centerV: [{
|