@ng-primitives/mcp 0.95.0 → 0.97.0
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/package.json
CHANGED
|
@@ -2254,6 +2254,26 @@
|
|
|
2254
2254
|
"inputs": [],
|
|
2255
2255
|
"outputs": []
|
|
2256
2256
|
},
|
|
2257
|
+
"NgpRangeSliderThumb": {
|
|
2258
|
+
"name": "NgpRangeSliderThumb",
|
|
2259
|
+
"description": "Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.\nEach thumb can be configured to control either the 'low' or 'high' value.",
|
|
2260
|
+
"selector": "[ngpRangeSliderThumb]",
|
|
2261
|
+
"exportAs": [
|
|
2262
|
+
"ngpRangeSliderThumb"
|
|
2263
|
+
],
|
|
2264
|
+
"inputs": [],
|
|
2265
|
+
"outputs": []
|
|
2266
|
+
},
|
|
2267
|
+
"NgpRangeSliderTrack": {
|
|
2268
|
+
"name": "NgpRangeSliderTrack",
|
|
2269
|
+
"description": "Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.",
|
|
2270
|
+
"selector": "[ngpRangeSliderTrack]",
|
|
2271
|
+
"exportAs": [
|
|
2272
|
+
"ngpRangeSliderTrack"
|
|
2273
|
+
],
|
|
2274
|
+
"inputs": [],
|
|
2275
|
+
"outputs": []
|
|
2276
|
+
},
|
|
2257
2277
|
"NgpSliderRange": {
|
|
2258
2278
|
"name": "NgpSliderRange",
|
|
2259
2279
|
"description": "Apply the `ngpSliderRange` directive to an element that represents the range of the slider.",
|
|
@@ -2284,26 +2304,6 @@
|
|
|
2284
2304
|
"inputs": [],
|
|
2285
2305
|
"outputs": []
|
|
2286
2306
|
},
|
|
2287
|
-
"NgpRangeSliderTrack": {
|
|
2288
|
-
"name": "NgpRangeSliderTrack",
|
|
2289
|
-
"description": "Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.",
|
|
2290
|
-
"selector": "[ngpRangeSliderTrack]",
|
|
2291
|
-
"exportAs": [
|
|
2292
|
-
"ngpRangeSliderTrack"
|
|
2293
|
-
],
|
|
2294
|
-
"inputs": [],
|
|
2295
|
-
"outputs": []
|
|
2296
|
-
},
|
|
2297
|
-
"NgpRangeSliderThumb": {
|
|
2298
|
-
"name": "NgpRangeSliderThumb",
|
|
2299
|
-
"description": "Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.\nEach thumb can be configured to control either the 'low' or 'high' value.",
|
|
2300
|
-
"selector": "[ngpRangeSliderThumb]",
|
|
2301
|
-
"exportAs": [
|
|
2302
|
-
"ngpRangeSliderThumb"
|
|
2303
|
-
],
|
|
2304
|
-
"inputs": [],
|
|
2305
|
-
"outputs": []
|
|
2306
|
-
},
|
|
2307
2307
|
"NgpSlider": {
|
|
2308
2308
|
"name": "NgpSlider",
|
|
2309
2309
|
"description": "Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.",
|
|
@@ -770,6 +770,11 @@
|
|
|
770
770
|
"name": "example-3",
|
|
771
771
|
"code": "offset: {\n mainAxis: 8, // Distance between menu and trigger element\n crossAxis: 4, // Skidding along the alignment axis \n alignmentAxis: 2 // Same as crossAxis but for aligned placements\n }",
|
|
772
772
|
"description": "NgpMenuConfig"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"name": "example-4",
|
|
776
|
+
"code": "shift: {\n padding: 8, // Minimum padding between menu and viewport edges\n limiter: { // Optional limiter to control shifting behavior\n fn: limitShift,\n options: { /* limiter options */ }\n }\n }",
|
|
777
|
+
"description": "NgpMenuConfig"
|
|
773
778
|
}
|
|
774
779
|
],
|
|
775
780
|
"reusableComponent": {
|
|
@@ -885,6 +890,11 @@
|
|
|
885
890
|
"name": "example-3",
|
|
886
891
|
"code": "offset: {\n mainAxis: 8, // Distance between popover and trigger element\n crossAxis: 4, // Skidding along the alignment axis \n alignmentAxis: 2 // Same as crossAxis but for aligned placements\n }",
|
|
887
892
|
"description": "NgpPopoverConfig"
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"name": "example-4",
|
|
896
|
+
"code": "shift: {\n padding: 8, // Minimum padding between popover and viewport edges\n limiter: { // Optional limiter to control shifting behavior\n fn: limitShift,\n options: { /* limiter options */ }\n }\n }",
|
|
897
|
+
"description": "NgpPopoverConfig"
|
|
888
898
|
}
|
|
889
899
|
],
|
|
890
900
|
"reusableComponent": {
|
|
@@ -897,6 +907,10 @@
|
|
|
897
907
|
"name": "portal",
|
|
898
908
|
"entryPoint": "ng-primitives/portal",
|
|
899
909
|
"exports": [
|
|
910
|
+
"coerceOffset",
|
|
911
|
+
"NgpOffset",
|
|
912
|
+
"NgpOffsetInput",
|
|
913
|
+
"NgpOffsetOptions",
|
|
900
914
|
"createOverlay",
|
|
901
915
|
"injectOverlay",
|
|
902
916
|
"NgpOverlay",
|
|
@@ -913,10 +927,10 @@
|
|
|
913
927
|
"BlockScrollStrategy",
|
|
914
928
|
"NoopScrollStrategy",
|
|
915
929
|
"ScrollStrategy",
|
|
916
|
-
"
|
|
917
|
-
"
|
|
918
|
-
"
|
|
919
|
-
"
|
|
930
|
+
"coerceShift",
|
|
931
|
+
"NgpShift",
|
|
932
|
+
"NgpShiftInput",
|
|
933
|
+
"NgpShiftOptions"
|
|
920
934
|
],
|
|
921
935
|
"hasSecondaryEntryPoint": true,
|
|
922
936
|
"category": "layout",
|
|
@@ -1175,10 +1189,28 @@
|
|
|
1175
1189
|
"NgpSliderState",
|
|
1176
1190
|
"provideSliderState",
|
|
1177
1191
|
"NgpRangeSliderRange",
|
|
1192
|
+
"injectRangeSliderRangeState",
|
|
1193
|
+
"ngpRangeSliderRange",
|
|
1194
|
+
"NgpRangeSliderRangeProps",
|
|
1195
|
+
"NgpRangeSliderRangeState",
|
|
1196
|
+
"provideRangeSliderRangeState",
|
|
1178
1197
|
"NgpRangeSliderThumb",
|
|
1198
|
+
"injectRangeSliderThumbState",
|
|
1199
|
+
"ngpRangeSliderThumb",
|
|
1200
|
+
"NgpRangeSliderThumbProps",
|
|
1201
|
+
"NgpRangeSliderThumbState",
|
|
1202
|
+
"provideRangeSliderThumbState",
|
|
1179
1203
|
"NgpRangeSliderTrack",
|
|
1204
|
+
"injectRangeSliderTrackState",
|
|
1205
|
+
"ngpRangeSliderTrack",
|
|
1206
|
+
"NgpRangeSliderTrackProps",
|
|
1207
|
+
"NgpRangeSliderTrackState",
|
|
1208
|
+
"provideRangeSliderTrackState",
|
|
1180
1209
|
"NgpRangeSlider",
|
|
1181
1210
|
"injectRangeSliderState",
|
|
1211
|
+
"ngpRangeSlider",
|
|
1212
|
+
"NgpRangeSliderProps",
|
|
1213
|
+
"NgpRangeSliderState",
|
|
1182
1214
|
"provideRangeSliderState"
|
|
1183
1215
|
],
|
|
1184
1216
|
"hasSecondaryEntryPoint": true,
|
|
@@ -1341,7 +1373,8 @@
|
|
|
1341
1373
|
"provideToastConfig",
|
|
1342
1374
|
"NgpToast",
|
|
1343
1375
|
"injectToastContext",
|
|
1344
|
-
"NgpToastManager"
|
|
1376
|
+
"NgpToastManager",
|
|
1377
|
+
"NgpToastRef"
|
|
1345
1378
|
],
|
|
1346
1379
|
"hasSecondaryEntryPoint": true,
|
|
1347
1380
|
"category": "feedback",
|
|
@@ -1510,6 +1543,11 @@
|
|
|
1510
1543
|
"name": "example-5",
|
|
1511
1544
|
"code": "offset: {\n mainAxis: 8, // Distance between tooltip and trigger element\n crossAxis: 4, // Skidding along the alignment axis\n alignmentAxis: 2 // Same as crossAxis but for aligned placements\n}",
|
|
1512
1545
|
"description": "NgpTooltipConfig"
|
|
1546
|
+
},
|
|
1547
|
+
{
|
|
1548
|
+
"name": "example-6",
|
|
1549
|
+
"code": "shift: {\n padding: 8, // Minimum padding between tooltip and viewport edges\n limiter: { // Optional limiter to control shifting behavior\n fn: limitShift,\n options: { /* limiter options */ }\n }\n}",
|
|
1550
|
+
"description": "NgpTooltipConfig"
|
|
1513
1551
|
}
|
|
1514
1552
|
],
|
|
1515
1553
|
"reusableComponent": {
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
},
|
|
135
135
|
{
|
|
136
136
|
"name": "range-slider",
|
|
137
|
-
"code": "import { Component, input } from '@angular/core';\nimport {
|
|
137
|
+
"code": "import { Component, input } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport {\n injectRangeSliderState,\n NgpRangeSlider,\n NgpRangeSliderRange,\n NgpRangeSliderThumb,\n NgpRangeSliderTrack,\n provideRangeSliderState,\n} from 'ng-primitives/slider';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\nimport { merge } from 'rxjs';\n\n@Component({\n selector: 'app-range-slider',\n hostDirectives: [\n {\n directive: NgpRangeSlider,\n inputs: [\n 'ngpRangeSliderLow:low',\n 'ngpRangeSliderHigh:high',\n 'ngpRangeSliderMin:min',\n 'ngpRangeSliderMax:max',\n 'ngpRangeSliderStep:step',\n 'ngpRangeSliderDisabled:disabled',\n 'ngpRangeSliderOrientation:orientation',\n ],\n outputs: ['ngpRangeSliderLowChange:lowChange', 'ngpRangeSliderHighChange:highChange'],\n },\n ],\n imports: [NgpRangeSliderTrack, NgpRangeSliderRange, NgpRangeSliderThumb],\n providers: [provideRangeSliderState(), provideValueAccessor(RangeSlider)],\n template: `\n <div ngpRangeSliderTrack>\n <div ngpRangeSliderRange></div>\n </div>\n <div ngpRangeSliderThumb></div>\n <div ngpRangeSliderThumb></div>\n `,\n styles: `\n :host {\n display: flex;\n position: relative;\n width: 200px;\n height: 20px;\n touch-action: none;\n user-select: none;\n align-items: center;\n }\n\n [ngpRangeSliderTrack] {\n position: relative;\n height: 5px;\n width: 100%;\n border-radius: 999px;\n background-color: var(--ngp-background-secondary);\n }\n\n [ngpRangeSliderRange] {\n position: absolute;\n height: 100%;\n border-radius: 999px;\n background-color: var(--ngp-background-inverse);\n }\n\n [ngpRangeSliderThumb] {\n position: absolute;\n display: block;\n height: 20px;\n width: 20px;\n border-radius: 10px;\n background-color: white;\n box-shadow: var(--ngp-button-shadow);\n outline: none;\n transform: translateX(-50%);\n }\n\n [ngpRangeSliderThumb][data-focus-visible] {\n outline: 2px solid var(--ngp-focus-ring);\n outline-offset: 0;\n }\n\n [ngpRangeSliderThumb][data-thumb='high'] {\n z-index: 2;\n }\n `,\n host: {\n '(focusout)': 'onTouched?.()',\n },\n})\nexport class RangeSlider implements ControlValueAccessor {\n /** Access the range slider state */\n private readonly state = injectRangeSliderState();\n\n /** Forward aria-labels to each thumb */\n readonly ariaLabelLow = input<string | null>(null);\n readonly ariaLabelHigh = input<string | null>(null);\n\n /** The onChange callback function. */\n private onChange?: ChangeFn<[number, number]>;\n\n /** The onTouched callback function. */\n protected onTouched?: TouchedFn;\n\n constructor() {\n // Whenever either value changes, call the onChange function with the new tuple [low, high].\n merge(this.state().lowChange, this.state().highChange)\n .pipe(takeUntilDestroyed())\n .subscribe(() => this.onChange?.([this.state().low(), this.state().high()]));\n }\n\n writeValue(value: [number, number]): void {\n if (!value || value.length !== 2) {\n return;\n }\n\n const [low, high] = value;\n // Use the directive's clamping setters to respect min/max and ordering\n this.state().setLowValue(low);\n this.state().setHighValue(high);\n }\n\n registerOnChange(fn: ChangeFn<[number, number]>): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: TouchedFn): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.state().setDisabled(isDisabled);\n }\n}\n",
|
|
138
138
|
"primitive": "range-slider",
|
|
139
139
|
"hasVariants": false,
|
|
140
140
|
"hasSizes": false
|