@w2p-ui/kit 0.1.23 → 0.1.25
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/fesm2022/w2p-ui-kit-components-action-button.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-action-button.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-avatar.mjs +5 -0
- package/fesm2022/w2p-ui-kit-components-avatar.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-button.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-button.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-color-alert-big.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-color-alert-big.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-color-alert.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-color-alert.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-input.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-input.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-label.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-label.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-swipe-confirm.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-swipe-confirm.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components.mjs +19 -14
- package/fesm2022/w2p-ui-kit-components.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit.mjs +19 -14
- package/fesm2022/w2p-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -12,11 +12,11 @@ class W2pButton {
|
|
|
12
12
|
return `button--${this.variant()}`;
|
|
13
13
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
14
14
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <div class=\"button__separator\"></div>\n\n <div class=\"button__text\">\n <p><ng-content select=\"[label]\"></ng-content></p>\n <span> <ng-content select=\"[description]\"></ng-content>\n </span>\n </div>\n\n <div class=\"button__action\">\n <div class=\"button__action-icon\">\n <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n </div>\n </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <div class=\"button__separator\"></div>\n\n <div class=\"button__text\">\n <p><ng-content select=\"[label]\"></ng-content></p>\n <span> <ng-content select=\"[description]\"></ng-content>\n </span>\n </div>\n\n <div class=\"button__action\">\n <div class=\"button__action-icon\">\n <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n </div>\n </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
|
-
args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <div class=\"button__separator\"></div>\n\n <div class=\"button__text\">\n <p><ng-content select=\"[label]\"></ng-content></p>\n <span> <ng-content select=\"[description]\"></ng-content>\n </span>\n </div>\n\n <div class=\"button__action\">\n <div class=\"button__action-icon\">\n <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n </div>\n </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.
|
|
19
|
+
args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <div class=\"button__separator\"></div>\n\n <div class=\"button__text\">\n <p><ng-content select=\"[label]\"></ng-content></p>\n <span> <ng-content select=\"[description]\"></ng-content>\n </span>\n </div>\n\n <div class=\"button__action\">\n <div class=\"button__action-icon\">\n <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n </div>\n </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
|
|
20
20
|
}], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
21
21
|
|
|
22
22
|
class W2pActionButton {
|
|
@@ -27,11 +27,11 @@ class W2pActionButton {
|
|
|
27
27
|
return `action-button--${this.variant()}`;
|
|
28
28
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
29
29
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pActionButton, isStandalone: true, selector: "w2p-action-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"action-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size:
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pActionButton, isStandalone: true, selector: "w2p-action-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"action-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\n"] });
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
|
-
args: [{ selector: 'w2p-action-button', imports: [], template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"action-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size:
|
|
34
|
+
args: [{ selector: 'w2p-action-button', imports: [], template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n <div class=\"action-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n\n <ng-content></ng-content>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\n"] }]
|
|
35
35
|
}], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
36
36
|
|
|
37
37
|
class W2pInput {
|
|
@@ -101,7 +101,7 @@ class W2pInput {
|
|
|
101
101
|
useExisting: forwardRef(() => W2pInput),
|
|
102
102
|
multi: true,
|
|
103
103
|
},
|
|
104
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"input-wrap\"\n [class.input-wrap--disabled]=\"disabled()\"\n [class.input-wrap--invalid]=\"invalid()\"\n>\n <input\n #inputRef\n class=\"input-wrap__input\"\n [type]=\"typeToggling()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [inputMode]=\"inputMode()\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n <div class=\"input-wrap__icon\" (click)=\"toggleType()\">\n @if (invalid()) {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n } @else if (type() === 'password') {\n <button>\n @if (typeToggling() === 'password') {\n <w2p-ui-icon-eye-closed></w2p-ui-icon-eye-closed>\n } @else {\n <w2p-ui-icon-view></w2p-ui-icon-view>\n }\n </button>\n } @else {\n <ng-content icon></ng-content>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-input-width: 18.625rem}.input-wrap{position:relative;display:flex;align-items:center;border-radius:var(--Border-radius-3, .75rem);border:1px solid var(--input-border-color);background:var(--input-bg-color);width:var(--w2p-ui-input-width);padding:var(--Spasing-3, .75rem);justify-content:center;gap:var(--Spasing-3, .75rem)}.input-wrap__input{flex:1 0 0;color:var(--input-text-color);font-family:SF Pro Display;font-size
|
|
104
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"input-wrap\"\n [class.input-wrap--disabled]=\"disabled()\"\n [class.input-wrap--invalid]=\"invalid()\"\n>\n <input\n #inputRef\n class=\"input-wrap__input\"\n [type]=\"typeToggling()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [inputMode]=\"inputMode()\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n <div class=\"input-wrap__icon\" (click)=\"toggleType()\">\n @if (invalid()) {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n } @else if (type() === 'password') {\n <button>\n @if (typeToggling() === 'password') {\n <w2p-ui-icon-eye-closed></w2p-ui-icon-eye-closed>\n } @else {\n <w2p-ui-icon-view></w2p-ui-icon-view>\n }\n </button>\n } @else {\n <ng-content icon></ng-content>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-input-width: 18.625rem}.input-wrap{position:relative;display:flex;align-items:center;border-radius:var(--Border-radius-3, .75rem);border:1px solid var(--input-border-color);background:var(--input-bg-color);width:var(--w2p-ui-input-width);padding:var(--Spasing-3, .75rem);justify-content:center;gap:var(--Spasing-3, .75rem)}.input-wrap__input{flex:1 0 0;color:var(--input-text-color);font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem;background:none;border:none;outline:none}.input-wrap__input::placeholder{color:var(--input-placeholder-color)}.input-wrap__input{caret-color:var(--input-caret-color)}.input-wrap__icon{display:flex;align-items:center;--w2p-ui-icon-size: .875rem;color:var(--input-icon-color)}.input-wrap__icon button{color:var(--input-icon-color);background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem}.input-wrap__icon button:focus-visible{border-radius:.25rem;outline:1px solid var(--Brand-Primary-Default, #f3400d)}\n", ".input-wrap{--input-caret-color: var(--Base-Inverse-Default, #fff);--input-placeholder-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--input-text-color: var(--Base-Inverse-Default, #fff);--input-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--input-border-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--input-bg-color: linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}@media(hover:hover){.input-wrap:hover{--input-border-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--input-bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}}.input-wrap:focus-within{--input-border-color: var(--Brand-Primary-Default, #f3400d);--input-caret-color: var(--Brand-Primary-Default, #f3400d)}.input-wrap--disabled{--input-text-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-placeholder-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-icon-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-border-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-bg-color: linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}.input-wrap--invalid{--input-border-color: var(--System-Danger-70, rgba(247, 36, 48, .7));--input-icon-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"], dependencies: [{ kind: "component", type: InfoIconComponent, selector: "w2p-ui-icon-info" }, { kind: "component", type: ViewIconComponent, selector: "w2p-ui-icon-view" }, { kind: "component", type: EyeClosedIconComponent, selector: "w2p-ui-icon-eye-closed" }] });
|
|
105
105
|
}
|
|
106
106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pInput, decorators: [{
|
|
107
107
|
type: Component,
|
|
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
111
111
|
useExisting: forwardRef(() => W2pInput),
|
|
112
112
|
multi: true,
|
|
113
113
|
},
|
|
114
|
-
], template: "<div\n class=\"input-wrap\"\n [class.input-wrap--disabled]=\"disabled()\"\n [class.input-wrap--invalid]=\"invalid()\"\n>\n <input\n #inputRef\n class=\"input-wrap__input\"\n [type]=\"typeToggling()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [inputMode]=\"inputMode()\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n <div class=\"input-wrap__icon\" (click)=\"toggleType()\">\n @if (invalid()) {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n } @else if (type() === 'password') {\n <button>\n @if (typeToggling() === 'password') {\n <w2p-ui-icon-eye-closed></w2p-ui-icon-eye-closed>\n } @else {\n <w2p-ui-icon-view></w2p-ui-icon-view>\n }\n </button>\n } @else {\n <ng-content icon></ng-content>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-input-width: 18.625rem}.input-wrap{position:relative;display:flex;align-items:center;border-radius:var(--Border-radius-3, .75rem);border:1px solid var(--input-border-color);background:var(--input-bg-color);width:var(--w2p-ui-input-width);padding:var(--Spasing-3, .75rem);justify-content:center;gap:var(--Spasing-3, .75rem)}.input-wrap__input{flex:1 0 0;color:var(--input-text-color);font-family:SF Pro Display;font-size
|
|
114
|
+
], template: "<div\n class=\"input-wrap\"\n [class.input-wrap--disabled]=\"disabled()\"\n [class.input-wrap--invalid]=\"invalid()\"\n>\n <input\n #inputRef\n class=\"input-wrap__input\"\n [type]=\"typeToggling()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [inputMode]=\"inputMode()\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n <div class=\"input-wrap__icon\" (click)=\"toggleType()\">\n @if (invalid()) {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n } @else if (type() === 'password') {\n <button>\n @if (typeToggling() === 'password') {\n <w2p-ui-icon-eye-closed></w2p-ui-icon-eye-closed>\n } @else {\n <w2p-ui-icon-view></w2p-ui-icon-view>\n }\n </button>\n } @else {\n <ng-content icon></ng-content>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-input-width: 18.625rem}.input-wrap{position:relative;display:flex;align-items:center;border-radius:var(--Border-radius-3, .75rem);border:1px solid var(--input-border-color);background:var(--input-bg-color);width:var(--w2p-ui-input-width);padding:var(--Spasing-3, .75rem);justify-content:center;gap:var(--Spasing-3, .75rem)}.input-wrap__input{flex:1 0 0;color:var(--input-text-color);font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem;background:none;border:none;outline:none}.input-wrap__input::placeholder{color:var(--input-placeholder-color)}.input-wrap__input{caret-color:var(--input-caret-color)}.input-wrap__icon{display:flex;align-items:center;--w2p-ui-icon-size: .875rem;color:var(--input-icon-color)}.input-wrap__icon button{color:var(--input-icon-color);background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem}.input-wrap__icon button:focus-visible{border-radius:.25rem;outline:1px solid var(--Brand-Primary-Default, #f3400d)}\n", ".input-wrap{--input-caret-color: var(--Base-Inverse-Default, #fff);--input-placeholder-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--input-text-color: var(--Base-Inverse-Default, #fff);--input-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--input-border-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--input-bg-color: linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}@media(hover:hover){.input-wrap:hover{--input-border-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--input-bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}}.input-wrap:focus-within{--input-border-color: var(--Brand-Primary-Default, #f3400d);--input-caret-color: var(--Brand-Primary-Default, #f3400d)}.input-wrap--disabled{--input-text-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-placeholder-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-icon-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-border-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--input-bg-color: linear-gradient( 0deg, var(--Base-Base-30, rgba(11, 11, 11, .3)) 0%, var(--Base-Base-30, rgba(11, 11, 11, .3)) 100% ), var(--Base-Modal-Default, #1a1a1a)}.input-wrap--invalid{--input-border-color: var(--System-Danger-70, rgba(247, 36, 48, .7));--input-icon-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"] }]
|
|
115
115
|
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }], picture: [{ type: i0.Input, args: [{ isSignal: true, alias: "picture", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], trim: [{ type: i0.Input, args: [{ isSignal: true, alias: "trim", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInput", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
|
|
116
116
|
|
|
117
117
|
class W2pLoader {
|
|
@@ -130,11 +130,11 @@ class W2pColorAlert {
|
|
|
130
130
|
return `color-alert--${this.variant()}`;
|
|
131
131
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
132
132
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pColorAlert, isStandalone: true, selector: "w2p-color-alert", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`color-alert ${classes()}`\">\n <div class=\"color-alert__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n <ng-content></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert{display:flex;align-items:center;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert__icon{display:contents;--w2p-ui-icon-size:
|
|
133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pColorAlert, isStandalone: true, selector: "w2p-color-alert", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`color-alert ${classes()}`\">\n <div class=\"color-alert__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n <ng-content></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert{display:flex;align-items:center;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert__icon{display:contents;--w2p-ui-icon-size: 1.125rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert p{flex:1 0 0;margin:0;color:var(--Base-Inverse-90, rgba(255, 255, 255, .9));font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}\n", ".color-alert--default{--alert-color-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}.color-alert--success{--alert-color-bg-color: var(--System-Success-80, rgba(18, 202, 85, .8))}.color-alert--info{--alert-color-bg-color: var(--System-Information-80, rgba(105, 125, 255, .8))}.color-alert--warning{--alert-color-bg-color: var(--System-Attention-90, rgba(249, 155, 0, .9))}.color-alert--error{--alert-color-bg-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"], dependencies: [{ kind: "component", type: InfoIconComponent, selector: "w2p-ui-icon-info" }, { kind: "component", type: SuccessIconComponent, selector: "w2p-ui-icon-success" }] });
|
|
134
134
|
}
|
|
135
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlert, decorators: [{
|
|
136
136
|
type: Component,
|
|
137
|
-
args: [{ selector: 'w2p-color-alert', imports: [InfoIconComponent, SuccessIconComponent], template: "<div [class]=\"`color-alert ${classes()}`\">\n <div class=\"color-alert__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n <ng-content></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert{display:flex;align-items:center;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert__icon{display:contents;--w2p-ui-icon-size:
|
|
137
|
+
args: [{ selector: 'w2p-color-alert', imports: [InfoIconComponent, SuccessIconComponent], template: "<div [class]=\"`color-alert ${classes()}`\">\n <div class=\"color-alert__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n <ng-content></ng-content>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert{display:flex;align-items:center;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert__icon{display:contents;--w2p-ui-icon-size: 1.125rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert p{flex:1 0 0;margin:0;color:var(--Base-Inverse-90, rgba(255, 255, 255, .9));font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}\n", ".color-alert--default{--alert-color-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}.color-alert--success{--alert-color-bg-color: var(--System-Success-80, rgba(18, 202, 85, .8))}.color-alert--info{--alert-color-bg-color: var(--System-Information-80, rgba(105, 125, 255, .8))}.color-alert--warning{--alert-color-bg-color: var(--System-Attention-90, rgba(249, 155, 0, .9))}.color-alert--error{--alert-color-bg-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"] }]
|
|
138
138
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
139
139
|
|
|
140
140
|
class W2pOtpInput {
|
|
@@ -291,11 +291,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
291
291
|
|
|
292
292
|
class W2pLabel {
|
|
293
293
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--
|
|
294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\";--w2p-ui-label-background: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--w2p-ui-label-border-radius: var(--Border-radius-999, 62.4375rem);--w2p-ui-label-border: 1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--w2p-ui-label-border-radius);border:1px solid var(--w2p-ui-label-border);background:var(--w2p-ui-label-background)}.label p{color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:1;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:flex;gap:var(--Spasing-1, .25rem);align-items:center}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
|
|
295
295
|
}
|
|
296
296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, decorators: [{
|
|
297
297
|
type: Component,
|
|
298
|
-
args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--
|
|
298
|
+
args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\";--w2p-ui-label-background: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--w2p-ui-label-border-radius: var(--Border-radius-999, 62.4375rem);--w2p-ui-label-border: 1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--w2p-ui-label-border-radius);border:1px solid var(--w2p-ui-label-border);background:var(--w2p-ui-label-background)}.label p{color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:1;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:flex;gap:var(--Spasing-1, .25rem);align-items:center}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
|
|
299
299
|
}] });
|
|
300
300
|
|
|
301
301
|
const AvatarColors = [
|
|
@@ -303,6 +303,11 @@ const AvatarColors = [
|
|
|
303
303
|
'var(--System-Information-Default, #697DFF)',
|
|
304
304
|
'var(--System-Attention-Default, #F99B00)',
|
|
305
305
|
'var(--System-Success-Default, #12CA55)',
|
|
306
|
+
'#D25921',
|
|
307
|
+
'#E12990',
|
|
308
|
+
'#33B5D3',
|
|
309
|
+
'#E33939',
|
|
310
|
+
'#7E37DC',
|
|
306
311
|
];
|
|
307
312
|
|
|
308
313
|
class ProgressiveImageDirective {
|
|
@@ -529,11 +534,11 @@ class W2pSwipeConfirm {
|
|
|
529
534
|
}
|
|
530
535
|
}
|
|
531
536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pSwipeConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
532
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pSwipeConfirm, isStandalone: true, selector: "w2p-swipe-confirm", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }, { propertyName: "handle", first: true, predicate: ["handleRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size
|
|
537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pSwipeConfirm, isStandalone: true, selector: "w2p-swipe-confirm", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }, { propertyName: "handle", first: true, predicate: ["handleRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.swipe-handle{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;margin-left:.25rem;margin-right:.25rem;border-radius:50%;background:var(--Base-Inverse-Default, #fff);color:var(--Base-Modal-80, rgba(26, 26, 26, .8));cursor:grab;touch-action:none}.swipe-handle.active{cursor:grabbing;background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}@media(hover:hover){.swipe-handle:hover{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}}.swipe-handle.loading{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff);cursor:default}.swipe-handle svg{width:1.25rem;height:1.25rem}.swipe-track.settled .swipe-handle:not(.loading){background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}.spinner{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
533
538
|
}
|
|
534
539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pSwipeConfirm, decorators: [{
|
|
535
540
|
type: Component,
|
|
536
|
-
args: [{ selector: 'w2p-swipe-confirm', imports: [], template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size
|
|
541
|
+
args: [{ selector: 'w2p-swipe-confirm', imports: [], template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.swipe-handle{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;margin-left:.25rem;margin-right:.25rem;border-radius:50%;background:var(--Base-Inverse-Default, #fff);color:var(--Base-Modal-80, rgba(26, 26, 26, .8));cursor:grab;touch-action:none}.swipe-handle.active{cursor:grabbing;background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}@media(hover:hover){.swipe-handle:hover{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}}.swipe-handle.loading{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff);cursor:default}.swipe-handle svg{width:1.25rem;height:1.25rem}.swipe-track.settled .swipe-handle:not(.loading){background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}.spinner{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
537
542
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], track: [{ type: i0.ViewChild, args: ['trackRef', { isSignal: true }] }], handle: [{ type: i0.ViewChild, args: ['handleRef', { isSignal: true }] }] } });
|
|
538
543
|
|
|
539
544
|
class W2pSkeleton {
|
|
@@ -557,11 +562,11 @@ class W2pColorAlertBig {
|
|
|
557
562
|
return `color-alert--${this.variant()}`;
|
|
558
563
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
559
564
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlertBig, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
560
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pColorAlertBig, isStandalone: true, selector: "w2p-color-alert-big", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`color-alert-big ${classes()}`\">\n\n\n <div class=\"color-alert-big__label\">\n <div class=\"color-alert-big__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n </div>\n\n <span>{{description()}}</span>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert-big{display:flex;flex-direction:column;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert-big__icon{display:contents;--w2p-ui-icon-size: 1rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert-big__label{gap:var(--Spasing-1, .25rem);display:flex;align-items:flex-start;justify-content:flex-start}.color-alert-big__label p{padding:.1875rem 0;flex:1 0 0;margin:0;color:var(--Base-Inverse-Default, #fff);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:Manrope;font-size
|
|
565
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pColorAlertBig, isStandalone: true, selector: "w2p-color-alert-big", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`color-alert-big ${classes()}`\">\n\n\n <div class=\"color-alert-big__label\">\n <div class=\"color-alert-big__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n </div>\n\n <span>{{description()}}</span>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert-big{display:flex;flex-direction:column;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert-big__icon{display:contents;--w2p-ui-icon-size: 1rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert-big__label{gap:var(--Spasing-1, .25rem);display:flex;align-items:flex-start;justify-content:flex-start}.color-alert-big__label p{padding:.1875rem 0;flex:1 0 0;margin:0;color:var(--Base-Inverse-Default, #fff);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:Manrope;font-size:1rem;font-style:normal;font-weight:700;line-height:normal;text-transform:uppercase}.color-alert-big span{color:var(--Base-Inverse-70, rgba(255, 255, 255, .7));text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}\n", ".color-alert--default{--alert-color-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}.color-alert--success{--alert-color-bg-color: var(--System-Success-80, rgba(18, 202, 85, .8))}.color-alert--info{--alert-color-bg-color: var(--System-Information-80, rgba(105, 125, 255, .8))}.color-alert--warning{--alert-color-bg-color: var(--System-Attention-90, rgba(249, 155, 0, .9))}.color-alert--error{--alert-color-bg-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"], dependencies: [{ kind: "component", type: InfoIconComponent, selector: "w2p-ui-icon-info" }, { kind: "component", type: SuccessIconComponent, selector: "w2p-ui-icon-success" }] });
|
|
561
566
|
}
|
|
562
567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlertBig, decorators: [{
|
|
563
568
|
type: Component,
|
|
564
|
-
args: [{ selector: 'w2p-color-alert-big', imports: [InfoIconComponent, SuccessIconComponent], template: "<div [class]=\"`color-alert-big ${classes()}`\">\n\n\n <div class=\"color-alert-big__label\">\n <div class=\"color-alert-big__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n </div>\n\n <span>{{description()}}</span>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert-big{display:flex;flex-direction:column;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert-big__icon{display:contents;--w2p-ui-icon-size: 1rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert-big__label{gap:var(--Spasing-1, .25rem);display:flex;align-items:flex-start;justify-content:flex-start}.color-alert-big__label p{padding:.1875rem 0;flex:1 0 0;margin:0;color:var(--Base-Inverse-Default, #fff);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:Manrope;font-size
|
|
569
|
+
args: [{ selector: 'w2p-color-alert-big', imports: [InfoIconComponent, SuccessIconComponent], template: "<div [class]=\"`color-alert-big ${classes()}`\">\n\n\n <div class=\"color-alert-big__label\">\n <div class=\"color-alert-big__icon\">\n @switch (variant()) {\n @case ('default') {\n <ng-content select=\"[icon]\"></ng-content>\n }\n @case ('error') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('success') {\n <w2p-ui-icon-success></w2p-ui-icon-success>\n }\n @case ('warning') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n @case ('info') {\n <w2p-ui-icon-info></w2p-ui-icon-info>\n }\n }\n </div>\n\n <p>{{ label() }}</p>\n\n </div>\n\n <span>{{description()}}</span>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-color-alert-width: 18.125rem;--alert-color-icon-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}.color-alert-big{display:flex;flex-direction:column;width:var(--w2p-ui-color-alert-width);padding:var(--spasing-fractional-25, .625rem);gap:var(--Spasing-2, .5rem);border-radius:var(--Border-radius-3, .75rem);background:var(--alert-color-bg-color)}.color-alert-big__icon{display:contents;--w2p-ui-icon-size: 1rem;--w2p-ui-icon-color: var(--alert-color-icon-color)}.color-alert-big__label{gap:var(--Spasing-1, .25rem);display:flex;align-items:flex-start;justify-content:flex-start}.color-alert-big__label p{padding:.1875rem 0;flex:1 0 0;margin:0;color:var(--Base-Inverse-Default, #fff);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:Manrope;font-size:1rem;font-style:normal;font-weight:700;line-height:normal;text-transform:uppercase}.color-alert-big span{color:var(--Base-Inverse-70, rgba(255, 255, 255, .7));text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}\n", ".color-alert--default{--alert-color-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}.color-alert--success{--alert-color-bg-color: var(--System-Success-80, rgba(18, 202, 85, .8))}.color-alert--info{--alert-color-bg-color: var(--System-Information-80, rgba(105, 125, 255, .8))}.color-alert--warning{--alert-color-bg-color: var(--System-Attention-90, rgba(249, 155, 0, .9))}.color-alert--error{--alert-color-bg-color: var(--System-Danger-80, rgba(247, 36, 48, .8))}\n"] }]
|
|
565
570
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
566
571
|
|
|
567
572
|
/**
|