@w2p-ui/kit 0.1.23 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/w2p-ui-kit-components-action-button.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-action-button.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-avatar.mjs +5 -0
- package/fesm2022/w2p-ui-kit-components-avatar.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-button.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-button.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-color-alert-big.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-color-alert-big.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-color-alert.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-color-alert.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-input.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-input.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-label.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-label.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components-swipe-confirm.mjs +2 -2
- package/fesm2022/w2p-ui-kit-components-swipe-confirm.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit-components.mjs +19 -14
- package/fesm2022/w2p-ui-kit-components.mjs.map +1 -1
- package/fesm2022/w2p-ui-kit.mjs +19 -14
- package/fesm2022/w2p-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3,11 +3,11 @@ import { Component } from '@angular/core';
|
|
|
3
3
|
|
|
4
4
|
class W2pLabel {
|
|
5
5
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: W2pLabel, isStandalone: true, selector: "w2p-label", ngImport: i0, template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\";--w2p-ui-label-background: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--w2p-ui-label-border-radius: var(--Border-radius-999, 62.4375rem);--w2p-ui-label-border: 1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--w2p-ui-label-border-radius);border:1px solid var(--w2p-ui-label-border);background:var(--w2p-ui-label-background)}.label p{color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:1;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:flex;gap:var(--Spasing-1, .25rem);align-items:center}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] });
|
|
7
7
|
}
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pLabel, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
|
-
args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\"}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--
|
|
10
|
+
args: [{ selector: 'w2p-label', template: "<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-label-width: min-content;--w2p-ui-label-padding: var(--spasing-fractional-15, .375rem) var(--Spasing-2, .5rem);--w2p-ui-label-icon-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--w2p-ui-label-text-color: var(--Base-Inverse-Default, #fff);--w2p-ui-label-font-size: .875rem;--w2p-ui-label-font-weight: 400;--w2p-ui-label-font-family: \"SF Pro Display\";--w2p-ui-label-background: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--w2p-ui-label-border-radius: var(--Border-radius-999, 62.4375rem);--w2p-ui-label-border: 1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.label{width:var(--w2p-ui-label-width);display:flex;gap:var(--Spasing-1, .25rem);align-items:center;padding:var(--w2p-ui-label-padding);justify-content:center;border-radius:var(--w2p-ui-label-border-radius);border:1px solid var(--w2p-ui-label-border);background:var(--w2p-ui-label-background)}.label p{color:var(--w2p-ui-label-text-color);font-family:var(--w2p-ui-label-font-family);font-size:var(--w2p-ui-label-font-size);font-style:normal;font-weight:var(--w2p-ui-label-font-weight);line-height:1;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:flex;gap:var(--Spasing-1, .25rem);align-items:center}.label__icon{display:contents;--w2p-icon-size: .875rem;color:var(--w2p-ui-label-icon-color)}\n"] }]
|
|
11
11
|
}] });
|
|
12
12
|
|
|
13
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-label.mjs","sources":["../../../projects/kit/components/label/label.ts","../../../projects/kit/components/label/label.html","../../../projects/kit/components/label/w2p-ui-kit-components-label.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'w2p-label',\n templateUrl: './label.html',\n styleUrls: ['./label.scss'],\n})\nexport class W2pLabel {}\n","<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,QAAQ,CAAA;wGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,QAAQ,qECPrB,0LAOM,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"w2p-ui-kit-components-label.mjs","sources":["../../../projects/kit/components/label/label.ts","../../../projects/kit/components/label/label.html","../../../projects/kit/components/label/w2p-ui-kit-components-label.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n selector: 'w2p-label',\n templateUrl: './label.html',\n styleUrls: ['./label.scss'],\n})\nexport class W2pLabel {}\n","<div class=\"label\">\n <div class=\"label__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </div>\n <p>\n <ng-content select=\"[label]\"></ng-content>\n </p>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,QAAQ,CAAA;wGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,QAAQ,qECPrB,0LAOM,EAAA,MAAA,EAAA,CAAA,+lFAAA,CAAA,EAAA,CAAA;;4FDAO,QAAQ,EAAA,UAAA,EAAA,CAAA;kBALpB,SAAS;+BACE,WAAW,EAAA,QAAA,EAAA,0LAAA,EAAA,MAAA,EAAA,CAAA,+lFAAA,CAAA,EAAA;;;AEHvB;;AAEG;;;;"}
|
|
@@ -77,11 +77,11 @@ class W2pSwipeConfirm {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pSwipeConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pSwipeConfirm, isStandalone: true, selector: "w2p-swipe-confirm", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }, { propertyName: "handle", first: true, predicate: ["handleRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: W2pSwipeConfirm, isStandalone: true, selector: "w2p-swipe-confirm", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["trackRef"], descendants: true, isSignal: true }, { propertyName: "handle", first: true, predicate: ["handleRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.swipe-handle{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;margin-left:.25rem;margin-right:.25rem;border-radius:50%;background:var(--Base-Inverse-Default, #fff);color:var(--Base-Modal-80, rgba(26, 26, 26, .8));cursor:grab;touch-action:none}.swipe-handle.active{cursor:grabbing;background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}@media(hover:hover){.swipe-handle:hover{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}}.swipe-handle.loading{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff);cursor:default}.swipe-handle svg{width:1.25rem;height:1.25rem}.swipe-track.settled .swipe-handle:not(.loading){background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}.spinner{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
81
81
|
}
|
|
82
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pSwipeConfirm, decorators: [{
|
|
83
83
|
type: Component,
|
|
84
|
-
args: [{ selector: 'w2p-swipe-confirm', imports: [], template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size
|
|
84
|
+
args: [{ selector: 'w2p-swipe-confirm', imports: [], template: "<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}.swipe-track{position:relative;display:flex;align-items:center;width:100%;height:3.125rem;border-radius:var(--Border-radius-999, 62.4375rem);background:var(--Base-Inverse-10, rgba(255, 255, 255, .1));overflow:hidden;border:1px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));-webkit-user-select:none;user-select:none;touch-action:pan-y}.swipe-track.disabled{opacity:.3;pointer-events:none}.swipe-track.active{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.swipe-track:hover{background:var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.swipe-label{position:absolute;left:0;right:0;color:var(--Base-Inverse-30, rgba(255, 255, 255, .3));text-align:center;font-family:SF Pro Display;font-size:1rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.swipe-handle{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:2.625rem;height:2.625rem;margin-left:.25rem;margin-right:.25rem;border-radius:50%;background:var(--Base-Inverse-Default, #fff);color:var(--Base-Modal-80, rgba(26, 26, 26, .8));cursor:grab;touch-action:none}.swipe-handle.active{cursor:grabbing;background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}@media(hover:hover){.swipe-handle:hover{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}}.swipe-handle.loading{background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff);cursor:default}.swipe-handle svg{width:1.25rem;height:1.25rem}.swipe-track.settled .swipe-handle:not(.loading){background:linear-gradient(0deg,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%,var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100%),var(--Base-Inverse-Default, #fff);color:var(--Base-Inverse-Default, #fff)}.spinner{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
85
85
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], track: [{ type: i0.ViewChild, args: ['trackRef', { isSignal: true }] }], handle: [{ type: i0.ViewChild, args: ['handleRef', { isSignal: true }] }] } });
|
|
86
86
|
|
|
87
87
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"w2p-ui-kit-components-swipe-confirm.mjs","sources":["../../../projects/kit/components/swipe-confirm/swipe-confirm.ts","../../../projects/kit/components/swipe-confirm/swipe-confirm.html","../../../projects/kit/components/swipe-confirm/w2p-ui-kit-components-swipe-confirm.ts"],"sourcesContent":["import { Component, ElementRef, computed, input, output, signal, viewChild } from '@angular/core';\n\n@Component({\n selector: 'w2p-swipe-confirm',\n imports: [],\n templateUrl: './swipe-confirm.html',\n styleUrls: ['./swipe-confirm.scss'],\n})\nexport class W2pSwipeConfirm {\n public readonly label = input<string>('Swipe to confirm');\n public readonly loadingLabel = input<string>('Loading...');\n public readonly disabled = input<boolean>(false);\n public readonly loading = input<boolean>(false);\n public readonly threshold = input<number>(0.8);\n\n public readonly confirmed = output<void>();\n\n public readonly track = viewChild<ElementRef<HTMLDivElement>>('trackRef');\n public readonly handle = viewChild<ElementRef<HTMLDivElement>>('handleRef');\n\n // settled — единственное состояние, которое реально нужно реактивно (влияет на классы/спиннер)\n protected readonly settled = signal(false);\n\n protected readonly isConfirmedVisual = computed(() => this.settled() || this.loading());\n protected readonly pressed = signal(false);\n\n private startX = 0;\n private startTranslate = 0;\n private maxTranslate = 0;\n private currentTranslate = 0; // обычное поле, не сигнал — живёт только во время драга\n private dragging = false;\n\n onPointerDown(event: PointerEvent): void {\n if (this.disabled() || this.loading() || this.settled()) return;\n\n const trackEl = this.track()?.nativeElement;\n const handleEl = this.handle()?.nativeElement;\n if (!trackEl || !handleEl) return;\n\n this.maxTranslate = trackEl.clientWidth - handleEl.clientWidth - 8;\n this.startX = event.clientX;\n this.startTranslate = this.currentTranslate;\n this.dragging = true;\n this.pressed.set(true);\n\n handleEl.style.transition = 'none'; // на время драга без transition — иначе будет отставать\n handleEl.setPointerCapture(event.pointerId);\n }\n\n onPointerMove(event: PointerEvent): void {\n if (!this.dragging) return;\n\n const handleEl = this.handle()?.nativeElement;\n if (!handleEl) return;\n\n const delta = event.clientX - this.startX;\n const next = Math.min(Math.max(this.startTranslate + delta, 0), this.maxTranslate);\n this.currentTranslate = next;\n\n // прямая манипуляция DOM — минуя Angular change detection, для нулевой задержки\n handleEl.style.transform = `translateX(${next}px)`;\n }\n\n onPointerUp(): void {\n if (!this.dragging) return;\n this.dragging = false;\n this.pressed.set(false);\n\n const handleEl = this.handle()?.nativeElement;\n if (!handleEl) return;\n\n handleEl.style.transition = 'transform 0.25s ease';\n\n const reached =\n this.maxTranslate > 0 && this.currentTranslate / this.maxTranslate >= this.threshold();\n\n if (reached) {\n handleEl.style.transform = `translateX(${this.maxTranslate}px)`;\n this.currentTranslate = this.maxTranslate;\n this.settled.set(true); // единственное место, где трогаем сигнал — уже после драга\n this.confirmed.emit();\n } else {\n handleEl.style.transform = `translateX(0px)`;\n this.currentTranslate = 0;\n }\n }\n\n public reset(): void {\n this.settled.set(false);\n this.currentTranslate = 0;\n const handleEl = this.handle()?.nativeElement;\n if (handleEl) {\n handleEl.style.transition = 'transform 0.25s ease';\n handleEl.style.transform = 'translateX(0px)';\n }\n }\n}\n","<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n","/**\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-swipe-confirm.mjs","sources":["../../../projects/kit/components/swipe-confirm/swipe-confirm.ts","../../../projects/kit/components/swipe-confirm/swipe-confirm.html","../../../projects/kit/components/swipe-confirm/w2p-ui-kit-components-swipe-confirm.ts"],"sourcesContent":["import { Component, ElementRef, computed, input, output, signal, viewChild } from '@angular/core';\n\n@Component({\n selector: 'w2p-swipe-confirm',\n imports: [],\n templateUrl: './swipe-confirm.html',\n styleUrls: ['./swipe-confirm.scss'],\n})\nexport class W2pSwipeConfirm {\n public readonly label = input<string>('Swipe to confirm');\n public readonly loadingLabel = input<string>('Loading...');\n public readonly disabled = input<boolean>(false);\n public readonly loading = input<boolean>(false);\n public readonly threshold = input<number>(0.8);\n\n public readonly confirmed = output<void>();\n\n public readonly track = viewChild<ElementRef<HTMLDivElement>>('trackRef');\n public readonly handle = viewChild<ElementRef<HTMLDivElement>>('handleRef');\n\n // settled — единственное состояние, которое реально нужно реактивно (влияет на классы/спиннер)\n protected readonly settled = signal(false);\n\n protected readonly isConfirmedVisual = computed(() => this.settled() || this.loading());\n protected readonly pressed = signal(false);\n\n private startX = 0;\n private startTranslate = 0;\n private maxTranslate = 0;\n private currentTranslate = 0; // обычное поле, не сигнал — живёт только во время драга\n private dragging = false;\n\n onPointerDown(event: PointerEvent): void {\n if (this.disabled() || this.loading() || this.settled()) return;\n\n const trackEl = this.track()?.nativeElement;\n const handleEl = this.handle()?.nativeElement;\n if (!trackEl || !handleEl) return;\n\n this.maxTranslate = trackEl.clientWidth - handleEl.clientWidth - 8;\n this.startX = event.clientX;\n this.startTranslate = this.currentTranslate;\n this.dragging = true;\n this.pressed.set(true);\n\n handleEl.style.transition = 'none'; // на время драга без transition — иначе будет отставать\n handleEl.setPointerCapture(event.pointerId);\n }\n\n onPointerMove(event: PointerEvent): void {\n if (!this.dragging) return;\n\n const handleEl = this.handle()?.nativeElement;\n if (!handleEl) return;\n\n const delta = event.clientX - this.startX;\n const next = Math.min(Math.max(this.startTranslate + delta, 0), this.maxTranslate);\n this.currentTranslate = next;\n\n // прямая манипуляция DOM — минуя Angular change detection, для нулевой задержки\n handleEl.style.transform = `translateX(${next}px)`;\n }\n\n onPointerUp(): void {\n if (!this.dragging) return;\n this.dragging = false;\n this.pressed.set(false);\n\n const handleEl = this.handle()?.nativeElement;\n if (!handleEl) return;\n\n handleEl.style.transition = 'transform 0.25s ease';\n\n const reached =\n this.maxTranslate > 0 && this.currentTranslate / this.maxTranslate >= this.threshold();\n\n if (reached) {\n handleEl.style.transform = `translateX(${this.maxTranslate}px)`;\n this.currentTranslate = this.maxTranslate;\n this.settled.set(true); // единственное место, где трогаем сигнал — уже после драга\n this.confirmed.emit();\n } else {\n handleEl.style.transform = `translateX(0px)`;\n this.currentTranslate = 0;\n }\n }\n\n public reset(): void {\n this.settled.set(false);\n this.currentTranslate = 0;\n const handleEl = this.handle()?.nativeElement;\n if (handleEl) {\n handleEl.style.transition = 'transform 0.25s ease';\n handleEl.style.transform = 'translateX(0px)';\n }\n }\n}\n","<div\n #trackRef\n class=\"swipe-track\"\n [class.disabled]=\"disabled()\"\n [class.settled]=\"isConfirmedVisual()\"\n [class.active]=\"pressed()\"\n>\n <span class=\"swipe-label\">\n {{ label() }}\n </span>\n\n <div\n #handleRef\n class=\"swipe-handle\"\n [class.loading]=\"loading()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n [class.active]=\"pressed()\"\n >\n @if (loading()) {\n <svg class=\"spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"40\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M5 12h14m0 0l-6-6m6 6l-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|