@w2p-ui/kit 0.1.24 → 0.1.26
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-swipe-confirm.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-swipe-confirm.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components.mjs +17 -12
- package/fesm2022/w2p-ui-kit-components.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit.mjs +17 -12
- package/fesm2022/w2p-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -9,11 +9,11 @@ class W2pActionButton {
|
|
|
9
9
|
return `action-button--${this.variant()}`;
|
|
10
10
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
11
11
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
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:
|
|
12
|
+
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"] });
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
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:
|
|
16
|
+
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"] }]
|
|
17
17
|
}], 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 }] }] } });
|
|
18
18
|
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-action-button.mjs","sources":["../../../projects/kit/components/action-button/action-button.ts","../../../projects/kit/components/action-button/action-button.html","../../../projects/kit/components/action-button/w2p-ui-kit-components-action-button.ts"],"sourcesContent":["import { Component, output, input, computed } from '@angular/core';\n\n@Component({\n selector: 'w2p-action-button',\n imports: [],\n templateUrl: './action-button.html',\n styleUrls: ['./action-button.scss', './variants.scss'],\n})\nexport class W2pActionButton {\n public readonly onClick = output<void>();\n public readonly variant = input<'primary' | 'neutral' | 'critical' | 'ghost'>('primary');\n public readonly disabled = input<boolean>(false);\n\n protected readonly classes = computed((): string => {\n return `action-button--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,eAAe,CAAA;IACV,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAA+C,SAAS,8EAAC;AACxE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,IAAA,CAAC,8EAAC;wGAPS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,yXCR5B,oPAMS,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-action-button.mjs","sources":["../../../projects/kit/components/action-button/action-button.ts","../../../projects/kit/components/action-button/action-button.html","../../../projects/kit/components/action-button/w2p-ui-kit-components-action-button.ts"],"sourcesContent":["import { Component, output, input, computed } from '@angular/core';\n\n@Component({\n selector: 'w2p-action-button',\n imports: [],\n templateUrl: './action-button.html',\n styleUrls: ['./action-button.scss', './variants.scss'],\n})\nexport class W2pActionButton {\n public readonly onClick = output<void>();\n public readonly variant = input<'primary' | 'neutral' | 'critical' | 'ghost'>('primary');\n public readonly disabled = input<boolean>(false);\n\n protected readonly classes = computed((): string => {\n return `action-button--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,eAAe,CAAA;IACV,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAA+C,SAAS,8EAAC;AACxE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,IAAA,CAAC,8EAAC;wGAPS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,yXCR5B,oPAMS,EAAA,MAAA,EAAA,CAAA,glEAAA,EAAA,80IAAA,CAAA,EAAA,CAAA;;4FDEI,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WACpB,EAAE,EAAA,QAAA,EAAA,oPAAA,EAAA,MAAA,EAAA,CAAA,glEAAA,EAAA,80IAAA,CAAA,EAAA;;;AEJb;;AAEG;;;;"}
|
|
@@ -6,6 +6,11 @@ const AvatarColors = [
|
|
|
6
6
|
'var(--System-Information-Default, #697DFF)',
|
|
7
7
|
'var(--System-Attention-Default, #F99B00)',
|
|
8
8
|
'var(--System-Success-Default, #12CA55)',
|
|
9
|
+
'#D25921',
|
|
10
|
+
'#E12990',
|
|
11
|
+
'#33B5D3',
|
|
12
|
+
'#E33939',
|
|
13
|
+
'#7E37DC',
|
|
9
14
|
];
|
|
10
15
|
|
|
11
16
|
class ProgressiveImageDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-avatar.mjs","sources":["../../../projects/kit/components/avatar/avatar.colors.ts","../../../projects/kit/components/avatar/progressive-image.directive.ts","../../../projects/kit/components/avatar/avatar.ts","../../../projects/kit/components/avatar/avatar.html","../../../projects/kit/components/avatar/w2p-ui-kit-components-avatar.ts"],"sourcesContent":["export const AvatarColors = [\n 'var(--Brand-Primary-Default, #F3400D)',\n 'var(--System-Information-Default, #697DFF)',\n 'var(--System-Attention-Default, #F99B00)',\n 'var(--System-Success-Default, #12CA55)',\n];\n","import {\n Directive,\n ElementRef,\n Renderer2,\n effect,\n inject,\n input,\n signal,\n OnDestroy,\n output,\n} from '@angular/core';\n\n@Directive({\n selector: 'img[progressiveImage]',\n standalone: true,\n})\nexport class ProgressiveImageDirective implements OnDestroy {\n private el = inject(ElementRef<HTMLImageElement>);\n private renderer = inject(Renderer2);\n\n placeholder = input.required<string>();\n srcFull = input.required<string>();\n\n public loadError = output<void>();\n\n private loaded = signal(false);\n private observer?: IntersectionObserver;\n private abortController?: AbortController;\n\n private static cache = new Set<string>();\n private static errorCache = new Set<string>();\n\n constructor() {\n effect(() => {\n const img = this.el.nativeElement;\n const preview = this.placeholder();\n const full = this.srcFull();\n\n if (!preview || !full) return;\n\n // сброс состояния\n this.abortCurrent();\n this.loaded.set(false);\n this.observer?.disconnect();\n\n if (ProgressiveImageDirective.errorCache.has(full)) {\n this.loadError.emit();\n return;\n }\n\n // ставим placeholder\n this.renderer.setAttribute(img, 'src', preview);\n this.renderer.setStyle(img, 'transition', 'opacity 200ms ease');\n this.renderer.setStyle(img, 'opacity', '0.7');\n this.renderer.setStyle(img, 'filter', 'blur(3px)');\n\n // если full уже в кеше — сразу ставим\n if (ProgressiveImageDirective.cache.has(full)) {\n this.setFullImage(full);\n return;\n }\n\n // если уже видим — грузим сразу\n if (this.isElementInViewport(img)) {\n this.loadFullImage();\n } else {\n this.createObserver(img);\n }\n });\n }\n\n private isElementInViewport(el: HTMLElement): boolean {\n const rect = el.getBoundingClientRect();\n return (\n rect.top < window.innerHeight &&\n rect.bottom > 0 &&\n rect.left < window.innerWidth &&\n rect.right > 0\n );\n }\n\n private createObserver(img: HTMLImageElement) {\n this.observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n this.loadFullImage();\n this.observer?.disconnect();\n }\n });\n });\n\n this.observer.observe(img);\n }\n\n private loadFullImage() {\n const full = this.srcFull();\n if (!full) return;\n\n this.abortCurrent();\n this.abortController = new AbortController();\n const signal = this.abortController.signal;\n\n const fullImage = new Image();\n fullImage.src = full;\n\n fullImage.onload = () => {\n ProgressiveImageDirective.cache.add(full);\n this.setFullImage(full);\n };\n\n fullImage.onerror = (e) => {\n if (signal.aborted) return;\n\n ProgressiveImageDirective.errorCache.add(full);\n this.loadError.emit();\n };\n\n this.abortController.signal.addEventListener('abort', () => {\n fullImage.src = '';\n });\n }\n\n private setFullImage(full: string) {\n const img = this.el.nativeElement;\n\n this.renderer.setAttribute(img, 'src', full);\n this.renderer.setStyle(img, 'opacity', '1');\n this.renderer.setStyle(img, 'filter', 'none');\n\n this.loaded.set(true);\n }\n\n private abortCurrent() {\n this.abortController?.abort();\n this.abortController = undefined;\n }\n\n ngOnDestroy(): void {\n this.abortCurrent();\n this.observer?.disconnect();\n }\n}\n","import { Component, computed, input, signal } from '@angular/core';\nimport { AvatarColors } from './avatar.colors';\nimport { ProgressiveImageDirective } from './progressive-image.directive';\n\n@Component({\n selector: 'w2p-avatar',\n imports: [ProgressiveImageDirective],\n templateUrl: './avatar.html',\n styleUrls: ['./avatar.scss'],\n})\nexport class W2pAvatar {\n public readonly userId = input<number | undefined>();\n public readonly userName = input<string | undefined>();\n public readonly placeholder = input<string | undefined>(undefined);\n public readonly srcFull = input<string | undefined>(undefined);\n\n protected readonly imageLoadFailed = signal(false);\n protected visible = signal<boolean>(false);\n\n // получаем цвет аватара по id\n protected readonly color = computed(() => {\n if (this.placeholder() && this.srcFull() && !this.imageLoadFailed()) return '';\n\n const id = this.userId();\n if (!id) return AvatarColors[0];\n return AvatarColors[id % AvatarColors.length];\n });\n\n protected readonly latter = computed(() => {\n const name = this.userName();\n if (!name) return 'A';\n return name[0].toUpperCase();\n });\n\n protected loaded() {\n this.visible.set(true);\n }\n\n protected onImageError() {\n this.imageLoadFailed.set(true);\n }\n}\n","<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n @if (placeholder() && srcFull() && !imageLoadFailed()) {\n <img\n progressiveImage\n (loadError)=\"onImageError()\"\n [placeholder]=\"placeholder()!\"\n [srcFull]=\"srcFull()!\"\n />\n } @else {\n <p>{{ latter() }}</p>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAO,MAAM,YAAY,GAAG;IAC1B,uCAAuC;IACvC,4CAA4C;IAC5C,0CAA0C;IAC1C,wCAAwC;CACzC;;MCWY,yBAAyB,CAAA;AAC5B,IAAA,EAAE,GAAG,MAAM,EAAC,UAA4B,EAAC;AACzC,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC;AAEpC,IAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,iFAAU;AACtC,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAU;IAE3B,SAAS,GAAG,MAAM,EAAQ;AAEzB,IAAA,MAAM,GAAG,MAAM,CAAC,KAAK,6EAAC;AACtB,IAAA,QAAQ;AACR,IAAA,eAAe;AAEf,IAAA,OAAO,KAAK,GAAG,IAAI,GAAG,EAAU;AAChC,IAAA,OAAO,UAAU,GAAG,IAAI,GAAG,EAAU;AAE7C,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;AACjC,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAE3B,YAAA,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI;gBAAE;;YAGvB,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;YAE3B,IAAI,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAClD,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;gBACrB;YACF;;YAGA,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC;YAC/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,YAAY,EAAE,oBAAoB,CAAC;YAC/D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,CAAC;YAC7C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC;;YAGlD,IAAI,yBAAyB,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAC7C,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACvB;YACF;;AAGA,YAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE;gBACjC,IAAI,CAAC,aAAa,EAAE;YACtB;iBAAO;AACL,gBAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;YAC1B;AACF,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,mBAAmB,CAAC,EAAe,EAAA;AACzC,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACvC,QAAA,QACE,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW;YAC7B,IAAI,CAAC,MAAM,GAAG,CAAC;AACf,YAAA,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,UAAU;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,CAAC;IAElB;AAEQ,IAAA,cAAc,CAAC,GAAqB,EAAA;QAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,KAAI;AACnD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,IAAI,CAAC,aAAa,EAAE;AACpB,oBAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;gBAC7B;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC;IAC5B;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,EAAE;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM;AAE1C,QAAA,MAAM,SAAS,GAAG,IAAI,KAAK,EAAE;AAC7B,QAAA,SAAS,CAAC,GAAG,GAAG,IAAI;AAEpB,QAAA,SAAS,CAAC,MAAM,GAAG,MAAK;AACtB,YAAA,yBAAyB,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACzC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACzB,QAAA,CAAC;AAED,QAAA,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,KAAI;YACxB,IAAI,MAAM,CAAC,OAAO;gBAAE;AAEpB,YAAA,yBAAyB,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AAC9C,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,QAAA,CAAC;QAED,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AACzD,YAAA,SAAS,CAAC,GAAG,GAAG,EAAE;AACpB,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,YAAY,CAAC,IAAY,EAAA;AAC/B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa;QAEjC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC;QAC5C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC;AAE7C,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE;AAC7B,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;IAClC;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,YAAY,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE;IAC7B;wGA5HW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;MCLY,SAAS,CAAA;IACJ,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;IACpC,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAsB;AACtC,IAAA,WAAW,GAAG,KAAK,CAAqB,SAAS,kFAAC;AAClD,IAAA,OAAO,GAAG,KAAK,CAAqB,SAAS,8EAAC;AAE3C,IAAA,eAAe,GAAG,MAAM,CAAC,KAAK,sFAAC;AACxC,IAAA,OAAO,GAAG,MAAM,CAAU,KAAK,8EAAC;;AAGvB,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AAAE,YAAA,OAAO,EAAE;AAE9E,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACxB,QAAA,IAAI,CAAC,EAAE;AAAE,YAAA,OAAO,YAAY,CAAC,CAAC,CAAC;QAC/B,OAAO,YAAY,CAAC,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC;AAC/C,IAAA,CAAC,4EAAC;AAEiB,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC5B,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,GAAG;AACrB,QAAA,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAC9B,IAAA,CAAC,6EAAC;IAEQ,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;IACxB;IAEU,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;IAChC;wGA9BW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVtB,gVAYA,EAAA,MAAA,EAAA,CAAA,8tDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,yBAAyB,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAIxB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,yBAAyB,CAAC,EAAA,QAAA,EAAA,gVAAA,EAAA,MAAA,EAAA,CAAA,8tDAAA,CAAA,EAAA;;;AENtC;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-avatar.mjs","sources":["../../../projects/kit/components/avatar/avatar.colors.ts","../../../projects/kit/components/avatar/progressive-image.directive.ts","../../../projects/kit/components/avatar/avatar.ts","../../../projects/kit/components/avatar/avatar.html","../../../projects/kit/components/avatar/w2p-ui-kit-components-avatar.ts"],"sourcesContent":["export const AvatarColors = [\n 'var(--Brand-Primary-Default, #F3400D)',\n 'var(--System-Information-Default, #697DFF)',\n 'var(--System-Attention-Default, #F99B00)',\n 'var(--System-Success-Default, #12CA55)',\n '#D25921',\n '#E12990',\n '#33B5D3',\n '#E33939',\n '#7E37DC',\n];\n","import {\n Directive,\n ElementRef,\n Renderer2,\n effect,\n inject,\n input,\n signal,\n OnDestroy,\n output,\n} from '@angular/core';\n\n@Directive({\n selector: 'img[progressiveImage]',\n standalone: true,\n})\nexport class ProgressiveImageDirective implements OnDestroy {\n private el = inject(ElementRef<HTMLImageElement>);\n private renderer = inject(Renderer2);\n\n placeholder = input.required<string>();\n srcFull = input.required<string>();\n\n public loadError = output<void>();\n\n private loaded = signal(false);\n private observer?: IntersectionObserver;\n private abortController?: AbortController;\n\n private static cache = new Set<string>();\n private static errorCache = new Set<string>();\n\n constructor() {\n effect(() => {\n const img = this.el.nativeElement;\n const preview = this.placeholder();\n const full = this.srcFull();\n\n if (!preview || !full) return;\n\n // сброс состояния\n this.abortCurrent();\n this.loaded.set(false);\n this.observer?.disconnect();\n\n if (ProgressiveImageDirective.errorCache.has(full)) {\n this.loadError.emit();\n return;\n }\n\n // ставим placeholder\n this.renderer.setAttribute(img, 'src', preview);\n this.renderer.setStyle(img, 'transition', 'opacity 200ms ease');\n this.renderer.setStyle(img, 'opacity', '0.7');\n this.renderer.setStyle(img, 'filter', 'blur(3px)');\n\n // если full уже в кеше — сразу ставим\n if (ProgressiveImageDirective.cache.has(full)) {\n this.setFullImage(full);\n return;\n }\n\n // если уже видим — грузим сразу\n if (this.isElementInViewport(img)) {\n this.loadFullImage();\n } else {\n this.createObserver(img);\n }\n });\n }\n\n private isElementInViewport(el: HTMLElement): boolean {\n const rect = el.getBoundingClientRect();\n return (\n rect.top < window.innerHeight &&\n rect.bottom > 0 &&\n rect.left < window.innerWidth &&\n rect.right > 0\n );\n }\n\n private createObserver(img: HTMLImageElement) {\n this.observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n this.loadFullImage();\n this.observer?.disconnect();\n }\n });\n });\n\n this.observer.observe(img);\n }\n\n private loadFullImage() {\n const full = this.srcFull();\n if (!full) return;\n\n this.abortCurrent();\n this.abortController = new AbortController();\n const signal = this.abortController.signal;\n\n const fullImage = new Image();\n fullImage.src = full;\n\n fullImage.onload = () => {\n ProgressiveImageDirective.cache.add(full);\n this.setFullImage(full);\n };\n\n fullImage.onerror = (e) => {\n if (signal.aborted) return;\n\n ProgressiveImageDirective.errorCache.add(full);\n this.loadError.emit();\n };\n\n this.abortController.signal.addEventListener('abort', () => {\n fullImage.src = '';\n });\n }\n\n private setFullImage(full: string) {\n const img = this.el.nativeElement;\n\n this.renderer.setAttribute(img, 'src', full);\n this.renderer.setStyle(img, 'opacity', '1');\n this.renderer.setStyle(img, 'filter', 'none');\n\n this.loaded.set(true);\n }\n\n private abortCurrent() {\n this.abortController?.abort();\n this.abortController = undefined;\n }\n\n ngOnDestroy(): void {\n this.abortCurrent();\n this.observer?.disconnect();\n }\n}\n","import { Component, computed, input, signal } from '@angular/core';\nimport { AvatarColors } from './avatar.colors';\nimport { ProgressiveImageDirective } from './progressive-image.directive';\n\n@Component({\n selector: 'w2p-avatar',\n imports: [ProgressiveImageDirective],\n templateUrl: './avatar.html',\n styleUrls: ['./avatar.scss'],\n})\nexport class W2pAvatar {\n public readonly userId = input<number | undefined>();\n public readonly userName = input<string | undefined>();\n public readonly placeholder = input<string | undefined>(undefined);\n public readonly srcFull = input<string | undefined>(undefined);\n\n protected readonly imageLoadFailed = signal(false);\n protected visible = signal<boolean>(false);\n\n // получаем цвет аватара по id\n protected readonly color = computed(() => {\n if (this.placeholder() && this.srcFull() && !this.imageLoadFailed()) return '';\n\n const id = this.userId();\n if (!id) return AvatarColors[0];\n return AvatarColors[id % AvatarColors.length];\n });\n\n protected readonly latter = computed(() => {\n const name = this.userName();\n if (!name) return 'A';\n return name[0].toUpperCase();\n });\n\n protected loaded() {\n this.visible.set(true);\n }\n\n protected onImageError() {\n this.imageLoadFailed.set(true);\n }\n}\n","<div class=\"avatar\" [style.--w2p-ui-avatar-bg-color]=\"color()\">\n @if (placeholder() && srcFull() && !imageLoadFailed()) {\n <img\n progressiveImage\n (loadError)=\"onImageError()\"\n [placeholder]=\"placeholder()!\"\n [srcFull]=\"srcFull()!\"\n />\n } @else {\n <p>{{ latter() }}</p>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -10,11 +10,11 @@ class W2pButton {
|
|
|
10
10
|
return `button--${this.variant()}`;
|
|
11
11
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
12
12
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
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.
|
|
13
|
+
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-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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" }] });
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
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.
|
|
17
|
+
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-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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"] }]
|
|
18
18
|
}], 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 }] }] } });
|
|
19
19
|
|
|
20
20
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-button.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/button/w2p-ui-kit-components-button.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n selector: 'w2p-button',\n imports: [NavArrowIconComponent],\n templateUrl: './button.html',\n styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n public readonly onClick = output<void>();\n public readonly variant = input<'primary' | 'neutral'>('primary');\n public readonly disabled = input<boolean>(false);\n\n protected readonly classes = computed((): string => {\n return `button--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-button.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/button/w2p-ui-kit-components-button.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n selector: 'w2p-button',\n imports: [NavArrowIconComponent],\n templateUrl: './button.html',\n styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n public readonly onClick = output<void>();\n public readonly variant = input<'primary' | 'neutral'>('primary');\n public readonly disabled = input<boolean>(false);\n\n protected readonly classes = computed((): string => {\n return `button--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,u2FAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,u2FAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}
|
|
@@ -10,11 +10,11 @@ class W2pColorAlertBig {
|
|
|
10
10
|
return `color-alert--${this.variant()}`;
|
|
11
11
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
12
12
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlertBig, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
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
|
|
13
|
+
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" }] });
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlertBig, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
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
|
|
17
|
+
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"] }]
|
|
18
18
|
}], 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 }] }] } });
|
|
19
19
|
|
|
20
20
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-color-alert-big.mjs","sources":["../../../projects/kit/components/color-alert-big/color-alert-big.ts","../../../projects/kit/components/color-alert-big/color-alert-big.html","../../../projects/kit/components/color-alert-big/w2p-ui-kit-components-color-alert-big.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { InfoIconComponent, SuccessIconComponent } from '@w2p-ui/icons';\n\nexport type W2pColorAlertBigVarinat =\n 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';\n\n@Component({\n selector: 'w2p-color-alert-big',\n imports: [InfoIconComponent, SuccessIconComponent],\n templateUrl: './color-alert-big.html',\n styleUrls: ['./color-alert-big.scss', './variants.scss'],\n})\nexport class W2pColorAlertBig {\n public readonly label = input.required<string>();\n public readonly description = input.required<string>();\n public readonly variant = input<W2pColorAlertBigVarinat>('default');\n\n protected readonly classes = computed((): string => {\n return `color-alert--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,gBAAgB,CAAA;AACX,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,iFAAU;AACtC,IAAA,OAAO,GAAG,KAAK,CAA0B,SAAS,8EAAC;AAEhD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,gBAAgB,IAAI,CAAC,OAAO,EAAE,EAAE;AACzC,IAAA,CAAC,8EAAC;wGAPS,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ7B,qyBA6BM,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-color-alert-big.mjs","sources":["../../../projects/kit/components/color-alert-big/color-alert-big.ts","../../../projects/kit/components/color-alert-big/color-alert-big.html","../../../projects/kit/components/color-alert-big/w2p-ui-kit-components-color-alert-big.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { InfoIconComponent, SuccessIconComponent } from '@w2p-ui/icons';\n\nexport type W2pColorAlertBigVarinat =\n 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';\n\n@Component({\n selector: 'w2p-color-alert-big',\n imports: [InfoIconComponent, SuccessIconComponent],\n templateUrl: './color-alert-big.html',\n styleUrls: ['./color-alert-big.scss', './variants.scss'],\n})\nexport class W2pColorAlertBig {\n public readonly label = input.required<string>();\n public readonly description = input.required<string>();\n public readonly variant = input<W2pColorAlertBigVarinat>('default');\n\n protected readonly classes = computed((): string => {\n return `color-alert--${this.variant()}`;\n });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,gBAAgB,CAAA;AACX,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,iFAAU;AACtC,IAAA,OAAO,GAAG,KAAK,CAA0B,SAAS,8EAAC;AAEhD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,gBAAgB,IAAI,CAAC,OAAO,EAAE,EAAE;AACzC,IAAA,CAAC,8EAAC;wGAPS,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ7B,qyBA6BM,EAAA,MAAA,EAAA,CAAA,k7EAAA,EAAA,4dAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrBM,iBAAiB,6DAAE,oBAAoB,EAAA,QAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,CAAA;;4FAItC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,OAAA,EACtB,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,qyBAAA,EAAA,MAAA,EAAA,CAAA,k7EAAA,EAAA,4dAAA,CAAA,EAAA;;;AERpD;;AAEG;;;;"}
|
|
@@ -9,11 +9,11 @@ class W2pColorAlert {
|
|
|
9
9
|
return `color-alert--${this.variant()}`;
|
|
10
10
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
11
11
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
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:
|
|
12
|
+
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" }] });
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pColorAlert, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
|
-
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:
|
|
16
|
+
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"] }]
|
|
17
17
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
18
18
|
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-color-alert.mjs","sources":["../../../projects/kit/components/color-alert/color-alert.ts","../../../projects/kit/components/color-alert/color-alert.html","../../../projects/kit/components/color-alert/w2p-ui-kit-components-color-alert.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { InfoIconComponent, SuccessIconComponent } from '@w2p-ui/icons';\n\nexport type W2pColorAlertVarinat = 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';\n\n@Component({\n selector: 'w2p-color-alert',\n imports: [InfoIconComponent, SuccessIconComponent],\n templateUrl: './color-alert.html',\n styleUrls: ['./color-alert.scss', './variants.scss'],\n})\nexport class W2pColorAlert {\n public readonly label = input.required<string>();\n public readonly variant = input<W2pColorAlertVarinat>('default');\n\n protected readonly classes = computed((): string => {\n return `color-alert--${this.variant()}`;\n });\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,aAAa,CAAA;AACR,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,OAAO,GAAG,KAAK,CAAuB,SAAS,8EAAC;AAE7C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,gBAAgB,IAAI,CAAC,OAAO,EAAE,EAAE;AACzC,IAAA,CAAC,8EAAC;wGANS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX1B,wmBAyBA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-color-alert.mjs","sources":["../../../projects/kit/components/color-alert/color-alert.ts","../../../projects/kit/components/color-alert/color-alert.html","../../../projects/kit/components/color-alert/w2p-ui-kit-components-color-alert.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { InfoIconComponent, SuccessIconComponent } from '@w2p-ui/icons';\n\nexport type W2pColorAlertVarinat = 'success' | 'info' | 'warning' | 'error' | 'warning' | 'default';\n\n@Component({\n selector: 'w2p-color-alert',\n imports: [InfoIconComponent, SuccessIconComponent],\n templateUrl: './color-alert.html',\n styleUrls: ['./color-alert.scss', './variants.scss'],\n})\nexport class W2pColorAlert {\n public readonly label = input.required<string>();\n public readonly variant = input<W2pColorAlertVarinat>('default');\n\n protected readonly classes = computed((): string => {\n return `color-alert--${this.variant()}`;\n });\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,aAAa,CAAA;AACR,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,OAAO,GAAG,KAAK,CAAuB,SAAS,8EAAC;AAE7C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,gBAAgB,IAAI,CAAC,OAAO,EAAE,EAAE;AACzC,IAAA,CAAC,8EAAC;wGANS,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX1B,wmBAyBA,EAAA,MAAA,EAAA,CAAA,47DAAA,EAAA,4dAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlBY,iBAAiB,6DAAE,oBAAoB,EAAA,QAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,CAAA;;4FAItC,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAAA,QAAA,EAAA,wmBAAA,EAAA,MAAA,EAAA,CAAA,47DAAA,EAAA,4dAAA,CAAA,EAAA;;;AEPpD;;AAEG;;;;"}
|
|
@@ -70,7 +70,7 @@ class W2pInput {
|
|
|
70
70
|
useExisting: forwardRef(() => W2pInput),
|
|
71
71
|
multi: true,
|
|
72
72
|
},
|
|
73
|
-
], 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
|
|
73
|
+
], 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" }] });
|
|
74
74
|
}
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pInput, decorators: [{
|
|
76
76
|
type: Component,
|
|
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
|
|
|
80
80
|
useExisting: forwardRef(() => W2pInput),
|
|
81
81
|
multi: true,
|
|
82
82
|
},
|
|
83
|
-
], 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
|
|
83
|
+
], 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"] }]
|
|
84
84
|
}], 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 }] }] } });
|
|
85
85
|
|
|
86
86
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-input.mjs","sources":["../../../projects/kit/components/input/input.ts","../../../projects/kit/components/input/input.html","../../../projects/kit/components/input/w2p-ui-kit-components-input.ts"],"sourcesContent":["import {\n afterNextRender,\n Component,\n effect,\n ElementRef,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { EyeClosedIconComponent, InfoIconComponent, ViewIconComponent } from '@w2p-ui/icons';\n\n@Component({\n selector: 'w2p-input',\n imports: [InfoIconComponent, ViewIconComponent, EyeClosedIconComponent],\n templateUrl: './input.html',\n styleUrls: ['./input.scss', './variants.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => W2pInput),\n multi: true,\n },\n ],\n})\nexport class W2pInput {\n // сигнальный ViewChild\n public readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputRef');\n\n public readonly picture = input<string>('');\n public readonly type = input<string>('text');\n public readonly trim = input<boolean>(true);\n public readonly inputMode = input<string>('text');\n public readonly placeholder = input<string>('');\n public readonly autofocus = input<boolean>(false);\n public readonly disabledInput = input<boolean>(false);\n public readonly invalid = input<boolean>(false, { alias: 'invalid' });\n\n // состояние теперь в сигналах\n public readonly value = signal<string>('');\n public readonly disabled = signal<boolean>(false);\n public readonly typeToggling = signal<string>('');\n\n private onChange: (value: any) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor() {\n // замена ngAfterViewInit + setTimeout\n afterNextRender(() => {\n if (this.autofocus()) {\n this.inputRef()?.nativeElement.focus();\n }\n });\n\n effect(() => {\n this.disabled.set(this.disabledInput());\n });\n\n effect(() => {\n this.typeToggling.set(this.type());\n });\n }\n\n protected toggleType(): void {\n if (this.type() !== 'password') return;\n\n this.typeToggling.update((prev) => (prev === 'password' ? 'text' : this.type()));\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n const value = this.trim() ? input.value.replace(/^\\s+|\\s+$/, '') : input.value;\n\n if (value !== input.value) {\n input.value = value;\n }\n this.value.set(input.value);\n this.onChange(this.value()); // уведомляем Angular\n }\n\n writeValue(obj: string): void {\n this.value.set(obj ?? '');\n }\n\n onBlur(): void {\n this.onTouched();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-input.mjs","sources":["../../../projects/kit/components/input/input.ts","../../../projects/kit/components/input/input.html","../../../projects/kit/components/input/w2p-ui-kit-components-input.ts"],"sourcesContent":["import {\n afterNextRender,\n Component,\n effect,\n ElementRef,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { EyeClosedIconComponent, InfoIconComponent, ViewIconComponent } from '@w2p-ui/icons';\n\n@Component({\n selector: 'w2p-input',\n imports: [InfoIconComponent, ViewIconComponent, EyeClosedIconComponent],\n templateUrl: './input.html',\n styleUrls: ['./input.scss', './variants.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => W2pInput),\n multi: true,\n },\n ],\n})\nexport class W2pInput {\n // сигнальный ViewChild\n public readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputRef');\n\n public readonly picture = input<string>('');\n public readonly type = input<string>('text');\n public readonly trim = input<boolean>(true);\n public readonly inputMode = input<string>('text');\n public readonly placeholder = input<string>('');\n public readonly autofocus = input<boolean>(false);\n public readonly disabledInput = input<boolean>(false);\n public readonly invalid = input<boolean>(false, { alias: 'invalid' });\n\n // состояние теперь в сигналах\n public readonly value = signal<string>('');\n public readonly disabled = signal<boolean>(false);\n public readonly typeToggling = signal<string>('');\n\n private onChange: (value: any) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor() {\n // замена ngAfterViewInit + setTimeout\n afterNextRender(() => {\n if (this.autofocus()) {\n this.inputRef()?.nativeElement.focus();\n }\n });\n\n effect(() => {\n this.disabled.set(this.disabledInput());\n });\n\n effect(() => {\n this.typeToggling.set(this.type());\n });\n }\n\n protected toggleType(): void {\n if (this.type() !== 'password') return;\n\n this.typeToggling.update((prev) => (prev === 'password' ? 'text' : this.type()));\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n const value = this.trim() ? input.value.replace(/^\\s+|\\s+$/, '') : input.value;\n\n if (value !== input.value) {\n input.value = value;\n }\n this.value.set(input.value);\n this.onChange(this.value()); // уведомляем Angular\n }\n\n writeValue(obj: string): void {\n this.value.set(obj ?? '');\n }\n\n onBlur(): void {\n this.onTouched();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|