@progressio_resources/gravity-design-system 3.7.11 → 3.8.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.
- package/esm2022/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.mjs +3 -3
- package/esm2022/lib/components/gravity-backdrop/gravity-backdrop.component.mjs +2 -2
- package/esm2022/lib/components/gravity-calendar-v2/gravity-calendar-v2.component.mjs +2 -2
- package/esm2022/lib/components/gravity-currency/gravity-currency.component.mjs +2 -2
- package/esm2022/lib/components/gravity-currency-dropdown-short/gravity-currency-dropdown-short.component.mjs +3 -3
- package/esm2022/lib/components/gravity-date-picker/gravity-date-picker.component.mjs +2 -2
- package/esm2022/lib/components/gravity-detail-container/gravity-detail-container.component.mjs +2 -2
- package/esm2022/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +2 -2
- package/esm2022/lib/components/gravity-dropdown-list-display/gravity-dropdown-list-display.component.mjs +3 -3
- package/esm2022/lib/components/gravity-icon-button/gravity-icon-button.component.mjs +3 -3
- package/esm2022/lib/components/gravity-modal/gravity-modal.component.mjs +2 -2
- package/esm2022/lib/components/gravity-notification-instant/gravity-notification-instant-container.component.mjs +2 -2
- package/esm2022/lib/components/gravity-push-notifications/gravity-push-notifications.component.mjs +2 -2
- package/esm2022/lib/components/gravity-stepper/gravity-stepper.component.mjs +2 -2
- package/esm2022/lib/components/gravity-text-field-amount-only/gravity-text-field-amount-only.component.mjs +2 -2
- package/esm2022/lib/layout/gravity-menu/gravity-menu.component.mjs +4 -3
- package/esm2022/lib/vendor/gravity-tooltip/gravity-tooltip.component.mjs +2 -2
- package/fesm2022/progressio_resources-gravity-design-system.mjs +35 -34
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/components/_datepicker-v2.scss +3 -1
- package/src/lib/styles/components/_datepicker.scss +4 -3
- package/src/lib/styles/components/_offcanvas.scss +3 -5
- package/src/lib/styles/components/_tables.scss +3 -2
- package/src/lib/styles/foundations/z-index/_z-index.scss +10 -0
- package/src/lib/styles/gravity-design-system.scss +6 -5
- package/src/lib/styles/overwrite/bootstrap/_modal.scss +3 -1
- package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass +3 -1
|
@@ -15,11 +15,11 @@ export class GravityModalComponent {
|
|
|
15
15
|
this.close.emit();
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityModalComponent, selector: "gravity-modal", inputs: { title: "title", iconName: "iconName", preTitle: "preTitle", subTitle: "subTitle", isVisible: "isVisible", state: "state", link: "link", primaryBtn: "primaryBtn", secondaryBtn: "secondaryBtn" }, outputs: { close: "close" }, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n <div class=\"modal-header {{state}}\">\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n\n <div class=\"title\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\"> </gravity-icon>\n\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'modal_title'\">{{ title }}</h1>\n </div>\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n\n <div class=\"close-button\">\n <gravity-icon [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n class=\"close\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\" [title]=\"'Close'\" [attr.data-cy]=\"'modal_closeButton'\"/>\n </div>\n </div>\n\n <div class=\"modal-body\" [attr.data-cy]=\"'modal_body'\"> <ng-content> </ng-content> </div>\n\n <div class=\"modal-footer\">\n <gravity-button *ngIf=\"primaryBtn?.text || primaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"primaryBtn?.icon\" [disabled]=\"primaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"primaryBtn?.type\" [iconPosition]=\"primaryBtn?.iconPosition || 'left'\"\n (click)=\"primaryBtn.callback?.()\" [attr.data-cy]=\"'modal_primaryButton'\">{{ primaryBtn?.text }} </gravity-button>\n\n <gravity-button *ngIf=\"secondaryBtn?.text || secondaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"secondaryBtn?.icon\" [disabled]=\"secondaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"secondaryBtn?.type\" [iconPosition]=\"secondaryBtn?.iconPosition || 'left'\"\n (click)=\"secondaryBtn.callback?.()\" [attr.data-cy]=\"'modal_secondaryButton'\">{{ secondaryBtn?.text }} </gravity-button>\n\n <gravity-link *ngIf=\"link?.text || link?.icon\" [linkText]=\"link?.text\" [iconName]=\"link?.icon\" (click)=\"link?.callback?.()\"\n [iconPosition]=\"link?.iconPosition || 'left'\" [state]=\"link?.state || 'active'\" [link]=\"link?.url\" [fontClass]=\"link?.fontClass\" [attr.data-cy]=\"'modal_link'\"> </gravity-link>\n </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;z-index:999;position:fixed;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;z-index:1000;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: i3.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: i4.GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityModalComponent, selector: "gravity-modal", inputs: { title: "title", iconName: "iconName", preTitle: "preTitle", subTitle: "subTitle", isVisible: "isVisible", state: "state", link: "link", primaryBtn: "primaryBtn", secondaryBtn: "secondaryBtn" }, outputs: { close: "close" }, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n <div class=\"modal-header {{state}}\">\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n\n <div class=\"title\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\"> </gravity-icon>\n\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'modal_title'\">{{ title }}</h1>\n </div>\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n\n <div class=\"close-button\">\n <gravity-icon [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n class=\"close\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\" [title]=\"'Close'\" [attr.data-cy]=\"'modal_closeButton'\"/>\n </div>\n </div>\n\n <div class=\"modal-body\" [attr.data-cy]=\"'modal_body'\"> <ng-content> </ng-content> </div>\n\n <div class=\"modal-footer\">\n <gravity-button *ngIf=\"primaryBtn?.text || primaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"primaryBtn?.icon\" [disabled]=\"primaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"primaryBtn?.type\" [iconPosition]=\"primaryBtn?.iconPosition || 'left'\"\n (click)=\"primaryBtn.callback?.()\" [attr.data-cy]=\"'modal_primaryButton'\">{{ primaryBtn?.text }} </gravity-button>\n\n <gravity-button *ngIf=\"secondaryBtn?.text || secondaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"secondaryBtn?.icon\" [disabled]=\"secondaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"secondaryBtn?.type\" [iconPosition]=\"secondaryBtn?.iconPosition || 'left'\"\n (click)=\"secondaryBtn.callback?.()\" [attr.data-cy]=\"'modal_secondaryButton'\">{{ secondaryBtn?.text }} </gravity-button>\n\n <gravity-link *ngIf=\"link?.text || link?.icon\" [linkText]=\"link?.text\" [iconName]=\"link?.icon\" (click)=\"link?.callback?.()\"\n [iconPosition]=\"link?.iconPosition || 'left'\" [state]=\"link?.state || 'active'\" [link]=\"link?.url\" [fontClass]=\"link?.fontClass\" [attr.data-cy]=\"'modal_link'\"> </gravity-link>\n </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;position:fixed;z-index:10;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;z-index:10;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }, { kind: "component", type: i3.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: i4.GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityModalComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: 'gravity-modal', template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n <div class=\"modal-header {{state}}\">\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n\n <div class=\"title\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\"> </gravity-icon>\n\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'modal_title'\">{{ title }}</h1>\n </div>\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n\n <div class=\"close-button\">\n <gravity-icon [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n class=\"close\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\" [title]=\"'Close'\" [attr.data-cy]=\"'modal_closeButton'\"/>\n </div>\n </div>\n\n <div class=\"modal-body\" [attr.data-cy]=\"'modal_body'\"> <ng-content> </ng-content> </div>\n\n <div class=\"modal-footer\">\n <gravity-button *ngIf=\"primaryBtn?.text || primaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"primaryBtn?.icon\" [disabled]=\"primaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"primaryBtn?.type\" [iconPosition]=\"primaryBtn?.iconPosition || 'left'\"\n (click)=\"primaryBtn.callback?.()\" [attr.data-cy]=\"'modal_primaryButton'\">{{ primaryBtn?.text }} </gravity-button>\n\n <gravity-button *ngIf=\"secondaryBtn?.text || secondaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"secondaryBtn?.icon\" [disabled]=\"secondaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"secondaryBtn?.type\" [iconPosition]=\"secondaryBtn?.iconPosition || 'left'\"\n (click)=\"secondaryBtn.callback?.()\" [attr.data-cy]=\"'modal_secondaryButton'\">{{ secondaryBtn?.text }} </gravity-button>\n\n <gravity-link *ngIf=\"link?.text || link?.icon\" [linkText]=\"link?.text\" [iconName]=\"link?.icon\" (click)=\"link?.callback?.()\"\n [iconPosition]=\"link?.iconPosition || 'left'\" [state]=\"link?.state || 'active'\" [link]=\"link?.url\" [fontClass]=\"link?.fontClass\" [attr.data-cy]=\"'modal_link'\"> </gravity-link>\n </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;z-index:999;position:fixed;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;z-index:1000;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"] }]
|
|
22
|
+
args: [{ selector: 'gravity-modal', template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n <div class=\"modal-header {{state}}\">\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n\n <div class=\"title\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\"> </gravity-icon>\n\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'modal_title'\">{{ title }}</h1>\n </div>\n\n <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n\n <div class=\"close-button\">\n <gravity-icon [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n class=\"close\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\" [title]=\"'Close'\" [attr.data-cy]=\"'modal_closeButton'\"/>\n </div>\n </div>\n\n <div class=\"modal-body\" [attr.data-cy]=\"'modal_body'\"> <ng-content> </ng-content> </div>\n\n <div class=\"modal-footer\">\n <gravity-button *ngIf=\"primaryBtn?.text || primaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"primaryBtn?.icon\" [disabled]=\"primaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"primaryBtn?.type\" [iconPosition]=\"primaryBtn?.iconPosition || 'left'\"\n (click)=\"primaryBtn.callback?.()\" [attr.data-cy]=\"'modal_primaryButton'\">{{ primaryBtn?.text }} </gravity-button>\n\n <gravity-button *ngIf=\"secondaryBtn?.text || secondaryBtn?.icon\"\n [customState]=\"'active'\" [iconName]=\"secondaryBtn?.icon\" [disabled]=\"secondaryBtn.disabled\"\n [size]=\"'sm'\" [type]=\"secondaryBtn?.type\" [iconPosition]=\"secondaryBtn?.iconPosition || 'left'\"\n (click)=\"secondaryBtn.callback?.()\" [attr.data-cy]=\"'modal_secondaryButton'\">{{ secondaryBtn?.text }} </gravity-button>\n\n <gravity-link *ngIf=\"link?.text || link?.icon\" [linkText]=\"link?.text\" [iconName]=\"link?.icon\" (click)=\"link?.callback?.()\"\n [iconPosition]=\"link?.iconPosition || 'left'\" [state]=\"link?.state || 'active'\" [link]=\"link?.url\" [fontClass]=\"link?.fontClass\" [attr.data-cy]=\"'modal_link'\"> </gravity-link>\n </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;position:fixed;z-index:10;opacity:var(--backdrop-opacity);background-color:var(--backdrop-primary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;z-index:10;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"] }]
|
|
23
23
|
}], propDecorators: { title: [{
|
|
24
24
|
type: Input
|
|
25
25
|
}], iconName: [{
|
|
@@ -21,11 +21,11 @@ export class GravityNotificationInstantContainerComponent {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: i1.GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\">{{notification.text}}</h2>\n <h2 class=\"hr-body sm-regular\" *ngIf=\"notification.errorCode\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\">{{notification.text}}</h2>\n <h2 class=\"hr-body sm-regular\" *ngIf=\"notification.errorCode\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:10}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: i4.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\">{{notification.text}}</h2>\n <h2 class=\"hr-body sm-regular\" *ngIf=\"notification.errorCode\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:
|
|
28
|
+
args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\">{{notification.text}}</h2>\n <h2 class=\"hr-body sm-regular\" *ngIf=\"notification.errorCode\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:10}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
|
|
29
29
|
}], ctorParameters: function () { return [{ type: i1.GravityInstantNotificationsService }]; }, propDecorators: { delay: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}] } });
|
package/esm2022/lib/components/gravity-push-notifications/gravity-push-notifications.component.mjs
CHANGED
|
@@ -39,11 +39,11 @@ export class GravityPushNotificationsComponent {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPushNotificationsComponent, deps: [{ token: i1.PushNotificationsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: { userNotifications: "userNotifications" }, outputs: { viewedNotificationsResponse: "viewedNotificationsResponse" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: { userNotifications: "userNotifications" }, outputs: { viewedNotificationsResponse: "viewedNotificationsResponse" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{display:block;position:absolute;top:42px!important;right:-16px!important;z-index:5;border-radius:.9375rem;border:1px solid rgba(0,0,0,.175);background-color:var(--bg-dialog-primary)}@media (min-width: 993px){.notifications-box{width:25rem}}@media (max-width: 992px){.notifications-box{width:19rem}}.notifications-box:before{top:-6px;content:\"\";right:23px;width:12px;height:12px;z-index:1;position:absolute;transform:rotate(45deg);border-left:1px solid rgba(0,0,0,.175);border-top:1px solid rgba(0,0,0,.175);background-color:var(--on-bg-highlight-neutro-primary)}.panel-header{display:flex;padding:1rem 2rem;justify-content:space-between;border-radius:.9375rem .9375rem 0 0;background-color:var(--on-bg-highlight-neutro-primary)}.panel-header p{font-weight:600;letter-spacing:1.023px;color:var(--on-bg-notification-list-primary)}.notifications{padding:.75rem 2rem;color:var(--text-primary)}.notifications .notification:last-of-type{padding-bottom:0}.notification{display:flex;padding-block:1rem;align-items:flex-start}.notification .notification-content{margin-left:1.5rem}.notification .notification-content .title{margin-bottom:.25rem}.notification .notification-content .title span.pending-notification-circle{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem;margin-right:.25rem;display:inline-block;border-radius:1.5625rem;background-color:var(--notification-success-highlight-primary)}.notification .notification-content .body{overflow:hidden;text-overflow:ellipsis}@media (min-width: 993px){.notification .notification-content .body{width:18rem}}@media (max-width: 992px){.notification .notification-content .body{width:10rem}}.notification .notification-content .body.white-space-nowrap{white-space:nowrap}hr{margin:0;border-top-color:var(--divider-primary)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityPushNotificationsComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'gravity-push-notifications', template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{
|
|
46
|
+
args: [{ selector: 'gravity-push-notifications', template: "<div class=\"btn-group notifications-wrapper\" data-cy=\"PUSH_NOTIFICATIONS_wrapper\">\n <div class=\"notifications-toggle pointer\" [class.active]=\"isPanelOpen\" data-cy=\"PUSH_NOTIFICATIONS_toggle\"\n (click)=\"handleToggleNotificationsPanel()\">\n <gravity-icon class=\"bell\" [iconName]=\"'bell'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <span *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\" class=\"circle\"></span>\n </div>\n <div *ngIf=\"isPanelOpen\" class=\"notifications-box dropdown-menu-right elevation-sm\" data-cy=\"PUSH_NOTIFICATIONS_panel\">\n <div class=\"panel-header\" data-cy=\"PUSH_NOTIFICATIONS_panel_header\">\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_title\"> Notifications </p>\n <p class=\"hr-body md-regular\" data-cy=\"PUSH_NOTIFICATIONS_panel_pending_counter\"\n *ngIf=\"pushNotificationsService.pendingNotifications.length > 0\">\n {{pushNotificationsService.pendingNotifications.length}}\n </p>\n </div>\n <div class=\"notifications\" data-cy=\"PUSH_NOTIFICATIONS_item\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0\">\n <p> New </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.pendingNotifications, let index = index\">\n <div class=\"notification pending\" data-cy=\"PUSH_NOTIFICATIONS_new_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('pending-' + index)\"\n id=\"pending-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n <span class=\"pending-notification-circle\"></span>\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.pendingNotifications.length\">\n </ng-container>\n </div>\n <hr *ngIf=\"pushNotificationsService.pendingNotifications?.length > 0 && pushNotificationsService.seenNotifications?.length > 0\">\n <div class=\"notifications\" *ngIf=\"pushNotificationsService.seenNotifications?.length > 0\">\n <p> Old </p>\n <ng-container *ngFor=\"let notification of pushNotificationsService.seenNotifications, let index = index\">\n <div class=\"notification\" data-cy=\"PUSH_NOTIFICATIONS_old_notification\"\n (click)=\"$event.stopPropagation(); pushNotificationsService.removeTextOverflow('seen-' + index)\"\n id=\"seen-{{index}}\">\n <gravity-icon *ngIf=\"notification.iconName\" [iconName]=\"notification.iconName\" [hoverIcon]=\"false\" [iconSize]=\"'lg-24'\"></gravity-icon>\n <div class=\"notification-content\">\n <p class=\"hr-title sm-bold title\">\n {{pushNotificationsService.getNotificationContent(notification.titleText, notification.titleAdditionalText)}}\n </p>\n <p class=\"body hr-body md-regular white-space-nowrap\" title=\"Click to expand\">\n {{pushNotificationsService.getNotificationContent(notification.bodyAdditionalText, notification.bodyAdditionalText)}}\n </p>\n </div>\n </div>\n <hr *ngIf=\"index + 1 != pushNotificationsService.seenNotifications.length\">\n </ng-container>\n </div>\n <div class=\"notifications\"\n *ngIf=\"pushNotificationsService.pendingNotifications?.length == 0 && pushNotificationsService.seenNotifications?.length == 0\">\n <p class=\"no-notification\"> No new notifications </p>\n </div>\n </div>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.notifications-wrapper{--circle-top: 3.25px;--circle-width: 8.67px;--circle-right: 6.13px;--circle-height: 8.67px;--notifications-wrapper-width: 29px;--notifications-wrapper-height: 29px;--notifications-toggle-padding: 6.5px;--circle-border-radius: 6.25rem;--notifications-wrapper-border-radius: 0;--notifications-toggle-border-radius: 6.25rem}.notifications-wrapper{width:var(--notifications-wrapper-width);height:var(--notifications-wrapper-height);border-radius:var(--notifications-wrapper-border-radius)}.notifications-toggle{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center;padding:var(--notifications-toggle-padding);border-radius:var(--notifications-toggle-border-radius)}.notifications-toggle:hover,.notifications-toggle.active{cursor:pointer;background-color:var(--bg-notification-button-hover)}.notifications-toggle:hover .bell,.notifications-toggle.active .bell{--icon-color: var(--on-bg-notification-button-hover)}.notifications-toggle .bell{--icon-color: var(--on-bg-notification-button-active)}.notifications-toggle .circle{position:absolute;top:var(--circle-top);right:var(--circle-right);width:var(--circle-width);height:var(--circle-height);border-radius:var(--circle-border-radius);background-color:var(--bg-notification-badge-button)}.notifications-box{display:block;position:absolute;top:42px!important;right:-16px!important;z-index:5;border-radius:.9375rem;border:1px solid rgba(0,0,0,.175);background-color:var(--bg-dialog-primary)}@media (min-width: 993px){.notifications-box{width:25rem}}@media (max-width: 992px){.notifications-box{width:19rem}}.notifications-box:before{top:-6px;content:\"\";right:23px;width:12px;height:12px;z-index:1;position:absolute;transform:rotate(45deg);border-left:1px solid rgba(0,0,0,.175);border-top:1px solid rgba(0,0,0,.175);background-color:var(--on-bg-highlight-neutro-primary)}.panel-header{display:flex;padding:1rem 2rem;justify-content:space-between;border-radius:.9375rem .9375rem 0 0;background-color:var(--on-bg-highlight-neutro-primary)}.panel-header p{font-weight:600;letter-spacing:1.023px;color:var(--on-bg-notification-list-primary)}.notifications{padding:.75rem 2rem;color:var(--text-primary)}.notifications .notification:last-of-type{padding-bottom:0}.notification{display:flex;padding-block:1rem;align-items:flex-start}.notification .notification-content{margin-left:1.5rem}.notification .notification-content .title{margin-bottom:.25rem}.notification .notification-content .title span.pending-notification-circle{width:.625rem;height:.625rem;min-width:.625rem;min-height:.625rem;margin-right:.25rem;display:inline-block;border-radius:1.5625rem;background-color:var(--notification-success-highlight-primary)}.notification .notification-content .body{overflow:hidden;text-overflow:ellipsis}@media (min-width: 993px){.notification .notification-content .body{width:18rem}}@media (max-width: 992px){.notification .notification-content .body{width:10rem}}.notification .notification-content .body.white-space-nowrap{white-space:nowrap}hr{margin:0;border-top-color:var(--divider-primary)}\n"] }]
|
|
47
47
|
}], ctorParameters: function () { return [{ type: i1.PushNotificationsService }, { type: i0.ElementRef }]; }, propDecorators: { userNotifications: [{
|
|
48
48
|
type: Input
|
|
49
49
|
}], viewedNotificationsResponse: [{
|
|
@@ -21,11 +21,11 @@ export class GravityStepperComponent {
|
|
|
21
21
|
this.currentStepResponse.emit(this.currentStep);
|
|
22
22
|
}
|
|
23
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background)
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{z-index:1;background-color:var(--step-icon-background)}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background)
|
|
28
|
+
args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n [iconSize]=\"'xl-32'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{z-index:1;background-color:var(--step-icon-background)}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"] }]
|
|
29
29
|
}], propDecorators: { currentLang: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], stepLabels: [{
|
|
@@ -121,11 +121,11 @@ export class GravityTextFieldAmountOnlyComponent {
|
|
|
121
121
|
this.state = null;
|
|
122
122
|
}
|
|
123
123
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldAmountOnlyComponent, selector: "gravity-text-field-amount-only", inputs: { cypressTag: "cypressTag", priority: "priority", placeholder: "placeholder", fiatCurrencies: "fiatCurrencies", fiatCurrenciesSize: "fiatCurrenciesSize", cryptoCurrency: "cryptoCurrency", rate: "rate", rateDirection: "rateDirection", state: "state", width: "width", disabled: "disabled", readonly: "readonly" }, outputs: { swapCurrenciesFlag: "swapCurrenciesFlag", changeFiat: "changeFiat", amountValues: "amountValues" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\" *ngIf=\"!readonly\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [(ngModel)]=\"inputValue\" placeholder=\"{{placeholder}}\"\n type=\"number\">\n\n <ng-container *ngIf=\"priority == 'fiat'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'crypto'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n <ng-container *ngIf=\"priority == 'crypto'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'fiat'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:-moz-fit-content;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.GravityCurrencyDropdownShortComponent, selector: "gravity-currency-dropdown-short", inputs: ["cypressTag", "size", "readonly", "disabled", "showFlag", "config"], outputs: ["onClick"] }, { kind: "component", type: i4.GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
|
|
124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldAmountOnlyComponent, selector: "gravity-text-field-amount-only", inputs: { cypressTag: "cypressTag", priority: "priority", placeholder: "placeholder", fiatCurrencies: "fiatCurrencies", fiatCurrenciesSize: "fiatCurrenciesSize", cryptoCurrency: "cryptoCurrency", rate: "rate", rateDirection: "rateDirection", state: "state", width: "width", disabled: "disabled", readonly: "readonly" }, outputs: { swapCurrenciesFlag: "swapCurrenciesFlag", changeFiat: "changeFiat", amountValues: "amountValues" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\" *ngIf=\"!readonly\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [(ngModel)]=\"inputValue\" placeholder=\"{{placeholder}}\"\n type=\"number\">\n\n <ng-container *ngIf=\"priority == 'fiat'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'crypto'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n <ng-container *ngIf=\"priority == 'crypto'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'fiat'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:-moz-fit-content;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.GravityCurrencyDropdownShortComponent, selector: "gravity-currency-dropdown-short", inputs: ["cypressTag", "size", "readonly", "disabled", "showFlag", "config"], outputs: ["onClick"] }, { kind: "component", type: i4.GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }] }); }
|
|
125
125
|
}
|
|
126
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
|
-
args: [{ selector: 'gravity-text-field-amount-only', template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\" *ngIf=\"!readonly\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [(ngModel)]=\"inputValue\" placeholder=\"{{placeholder}}\"\n type=\"number\">\n\n <ng-container *ngIf=\"priority == 'fiat'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'crypto'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n <ng-container *ngIf=\"priority == 'crypto'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'fiat'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:-moz-fit-content;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"] }]
|
|
128
|
+
args: [{ selector: 'gravity-text-field-amount-only', template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\" *ngIf=\"!readonly\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [(ngModel)]=\"inputValue\" placeholder=\"{{placeholder}}\"\n type=\"number\">\n\n <ng-container *ngIf=\"priority == 'fiat'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'crypto'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n <ng-container *ngIf=\"priority == 'crypto'\">\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n </ng-container>\n <ng-container *ngIf=\"priority == 'fiat'\">\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n </ng-container>\n </div>\n </div>\n</div>", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:-moz-fit-content;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"] }]
|
|
129
129
|
}], propDecorators: { cypressTag: [{
|
|
130
130
|
type: Input
|
|
131
131
|
}], priority: [{
|