@ng-primitives/mcp 0.95.0 → 0.96.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.",
|
|
@@ -1175,10 +1175,28 @@
|
|
|
1175
1175
|
"NgpSliderState",
|
|
1176
1176
|
"provideSliderState",
|
|
1177
1177
|
"NgpRangeSliderRange",
|
|
1178
|
+
"injectRangeSliderRangeState",
|
|
1179
|
+
"ngpRangeSliderRange",
|
|
1180
|
+
"NgpRangeSliderRangeProps",
|
|
1181
|
+
"NgpRangeSliderRangeState",
|
|
1182
|
+
"provideRangeSliderRangeState",
|
|
1178
1183
|
"NgpRangeSliderThumb",
|
|
1184
|
+
"injectRangeSliderThumbState",
|
|
1185
|
+
"ngpRangeSliderThumb",
|
|
1186
|
+
"NgpRangeSliderThumbProps",
|
|
1187
|
+
"NgpRangeSliderThumbState",
|
|
1188
|
+
"provideRangeSliderThumbState",
|
|
1179
1189
|
"NgpRangeSliderTrack",
|
|
1190
|
+
"injectRangeSliderTrackState",
|
|
1191
|
+
"ngpRangeSliderTrack",
|
|
1192
|
+
"NgpRangeSliderTrackProps",
|
|
1193
|
+
"NgpRangeSliderTrackState",
|
|
1194
|
+
"provideRangeSliderTrackState",
|
|
1180
1195
|
"NgpRangeSlider",
|
|
1181
1196
|
"injectRangeSliderState",
|
|
1197
|
+
"ngpRangeSlider",
|
|
1198
|
+
"NgpRangeSliderProps",
|
|
1199
|
+
"NgpRangeSliderState",
|
|
1182
1200
|
"provideRangeSliderState"
|
|
1183
1201
|
],
|
|
1184
1202
|
"hasSecondaryEntryPoint": true,
|
|
@@ -1341,7 +1359,8 @@
|
|
|
1341
1359
|
"provideToastConfig",
|
|
1342
1360
|
"NgpToast",
|
|
1343
1361
|
"injectToastContext",
|
|
1344
|
-
"NgpToastManager"
|
|
1362
|
+
"NgpToastManager",
|
|
1363
|
+
"NgpToastRef"
|
|
1345
1364
|
],
|
|
1346
1365
|
"hasSecondaryEntryPoint": true,
|
|
1347
1366
|
"category": "feedback",
|
|
@@ -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
|