@mintplayer/ng-bootstrap 21.27.0 → 21.29.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/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs +64 -124
- package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs +1332 -0
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs.map +1 -0
- package/package.json +5 -1
- package/types/mintplayer-ng-bootstrap-color-picker.d.ts +20 -24
- package/types/mintplayer-ng-bootstrap-tile-manager.d.ts +285 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
2
|
+
import { viewChild, input, model, signal, computed, ChangeDetectionStrategy, Component, Directive, inject, forwardRef, output, effect } from '@angular/core';
|
|
3
|
+
import { Subject } from 'rxjs';
|
|
4
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -162,25 +162,13 @@ function hueFromRgb(r, g, b, max, d) {
|
|
|
162
162
|
|
|
163
163
|
class BsSliderComponent {
|
|
164
164
|
constructor() {
|
|
165
|
-
this.observeSize = inject(BsObserveSizeDirective);
|
|
166
165
|
this.track = viewChild.required('track');
|
|
167
166
|
this.thumb = viewChild.required('thumb');
|
|
168
167
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
169
168
|
this.value = model(0.5, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
170
|
-
this.valueChange = output();
|
|
171
169
|
this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
|
|
172
|
-
this.
|
|
173
|
-
|
|
174
|
-
const width = this.observeSize.width() ?? 0;
|
|
175
|
-
return value * width - 12;
|
|
176
|
-
}, ...(ngDevMode ? [{ debugName: "thumbMarginLeft" }] : /* istanbul ignore next */ []));
|
|
177
|
-
this.cursorClass = computed(() => {
|
|
178
|
-
return this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab';
|
|
179
|
-
}, ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
|
|
180
|
-
effect(() => {
|
|
181
|
-
const value = this.value();
|
|
182
|
-
this.valueChange.emit(value);
|
|
183
|
-
});
|
|
170
|
+
this.thumbLeft = computed(() => `${this.value() * 100}%`, ...(ngDevMode ? [{ debugName: "thumbLeft" }] : /* istanbul ignore next */ []));
|
|
171
|
+
this.cursorClass = computed(() => 'position-absolute top-0 ' + (this.isPointerDown() ? 'cursor-grabbing' : 'cursor-grab'), ...(ngDevMode ? [{ debugName: "cursorClass" }] : /* istanbul ignore next */ []));
|
|
184
172
|
}
|
|
185
173
|
onPointerDown(ev) {
|
|
186
174
|
if (this.disabled())
|
|
@@ -197,37 +185,26 @@ class BsSliderComponent {
|
|
|
197
185
|
this.updateColor(ev);
|
|
198
186
|
}
|
|
199
187
|
}
|
|
200
|
-
onPointerUp(
|
|
188
|
+
onPointerUp(_ev) {
|
|
201
189
|
this.isPointerDown.set(false);
|
|
202
190
|
}
|
|
203
191
|
updateColor(ev) {
|
|
204
|
-
let co;
|
|
205
192
|
const rect = this.track().nativeElement.getBoundingClientRect();
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
};
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
co = {
|
|
213
|
-
x: ev.clientX - rect.left,
|
|
214
|
-
};
|
|
215
|
-
}
|
|
216
|
-
const percent = co.x / this.track().nativeElement.clientWidth;
|
|
217
|
-
const limited = Math.max(0, Math.min(1, percent));
|
|
218
|
-
this.value.set(limited);
|
|
193
|
+
const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
|
|
194
|
+
const percent = (clientX - rect.left) / this.track().nativeElement.clientWidth;
|
|
195
|
+
this.value.set(Math.max(0, Math.min(1, percent)));
|
|
219
196
|
}
|
|
220
197
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange"
|
|
198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsSliderComponent, isStandalone: true, selector: "bs-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.left]=\"thumbLeft()\">\n <ng-content select=\"[bsThumb]\"></ng-content>\n </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
222
199
|
}
|
|
223
200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsSliderComponent, decorators: [{
|
|
224
201
|
type: Component,
|
|
225
|
-
args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
202
|
+
args: [{ selector: 'bs-slider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
226
203
|
'class': 'd-block position-relative',
|
|
227
204
|
'(document:mousemove)': 'onPointerMove($event)',
|
|
228
205
|
'(document:mouseup)': 'onPointerUp($event)',
|
|
229
|
-
}, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.
|
|
230
|
-
}],
|
|
206
|
+
}, template: "<div class=\"wrapper d-block position-relative\">\n <div #track class=\"track2\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\">\n <ng-content select=\"[bsTrack]\"></ng-content>\n </div>\n <div #thumb\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n [class]=\"cursorClass()\"\n [style.left]=\"thumbLeft()\">\n <ng-content select=\"[bsThumb]\"></ng-content>\n </div>\n</div>\n", styles: [".track2{height:8px}.wrapper{padding-top:8px;padding-bottom:8px}\n"] }]
|
|
207
|
+
}], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumb: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
231
208
|
class BsThumbDirective {
|
|
232
209
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
233
210
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsThumbDirective, isStandalone: true, selector: "[bsThumb]", host: { classAttribute: "thumb position-absolute" }, ngImport: i0 }); }
|
|
@@ -257,13 +234,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
257
234
|
|
|
258
235
|
class BsAlphaStripComponent {
|
|
259
236
|
constructor() {
|
|
260
|
-
this.canvas = viewChild.required('track');
|
|
261
237
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
262
238
|
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
263
239
|
this.brightness = model(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
264
240
|
this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
|
|
265
|
-
this.
|
|
266
|
-
|
|
241
|
+
this.trackGradient = computed(() => {
|
|
242
|
+
const hs = this.hs();
|
|
243
|
+
const brightness = this.brightness();
|
|
244
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
245
|
+
const r = Math.round(rgb.r), g = Math.round(rgb.g), b = Math.round(rgb.b);
|
|
246
|
+
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`;
|
|
247
|
+
}, ...(ngDevMode ? [{ debugName: "trackGradient" }] : /* istanbul ignore next */ []));
|
|
267
248
|
this.resultBackground = computed(() => {
|
|
268
249
|
const hs = this.hs();
|
|
269
250
|
const brightness = this.brightness();
|
|
@@ -271,106 +252,53 @@ class BsAlphaStripComponent {
|
|
|
271
252
|
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
272
253
|
return `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${alpha})`;
|
|
273
254
|
}, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
|
|
274
|
-
effect(() => {
|
|
275
|
-
const hs = this.hs();
|
|
276
|
-
const brightness = this.brightness();
|
|
277
|
-
setTimeout(() => {
|
|
278
|
-
if (this.canvasContext) {
|
|
279
|
-
const width = this.canvas().nativeElement.width;
|
|
280
|
-
const height = this.canvas().nativeElement.height;
|
|
281
|
-
this.canvasContext.clearRect(0, 0, width, height);
|
|
282
|
-
this.canvasContext.save();
|
|
283
|
-
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
284
|
-
const r = Math.round(rgb.r), g = Math.round(rgb.g), b = Math.round(rgb.b);
|
|
285
|
-
const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
|
|
286
|
-
gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
|
|
287
|
-
gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 1)`);
|
|
288
|
-
this.canvasContext.fillStyle = gradient;
|
|
289
|
-
this.canvasContext.fillRect(0, 0, width, height);
|
|
290
|
-
}
|
|
291
|
-
});
|
|
292
|
-
});
|
|
293
|
-
effect(() => {
|
|
294
|
-
const alpha = this.alpha();
|
|
295
|
-
this.alphaChange.emit(alpha);
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
|
-
ngAfterViewInit() {
|
|
299
|
-
if (typeof window !== 'undefined') {
|
|
300
|
-
this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
|
|
301
|
-
}
|
|
302
255
|
}
|
|
303
256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsAlphaStripComponent, isStandalone: true, selector: "bs-alpha-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange", alpha: "alphaChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
305
258
|
}
|
|
306
259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsAlphaStripComponent, decorators: [{
|
|
307
260
|
type: Component,
|
|
308
|
-
args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"
|
|
309
|
-
}],
|
|
261
|
+
args: [{ selector: 'bs-alpha-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"alpha()\" (valueChange)=\"alpha.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px;background-image:linear-gradient(45deg,#C0C0C0 25%,transparent 25%),linear-gradient(-45deg,#C0C0C0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#C0C0C0 75%),linear-gradient(-45deg,transparent 75%,#C0C0C0 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
|
|
262
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
|
|
310
263
|
|
|
311
264
|
class BsBrightnessStripComponent {
|
|
312
265
|
constructor() {
|
|
313
|
-
this.canvas = viewChild.required('canvas');
|
|
314
266
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
315
267
|
this.hs = model({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
316
268
|
this.brightness = model(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
317
|
-
this.
|
|
318
|
-
|
|
269
|
+
this.trackGradient = computed(() => {
|
|
270
|
+
const hs = this.hs();
|
|
271
|
+
const peak = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: 1 });
|
|
272
|
+
return `linear-gradient(to right, #000, rgb(${Math.round(peak.r)}, ${Math.round(peak.g)}, ${Math.round(peak.b)}))`;
|
|
273
|
+
}, ...(ngDevMode ? [{ debugName: "trackGradient" }] : /* istanbul ignore next */ []));
|
|
319
274
|
this.resultBackground = computed(() => {
|
|
320
275
|
const hs = this.hs();
|
|
321
276
|
const brightness = this.brightness();
|
|
322
277
|
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
323
278
|
return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
|
|
324
279
|
}, ...(ngDevMode ? [{ debugName: "resultBackground" }] : /* istanbul ignore next */ []));
|
|
325
|
-
effect(() => {
|
|
326
|
-
const hs = this.hs();
|
|
327
|
-
if (this.canvasContext) {
|
|
328
|
-
const width = this.canvas().nativeElement.width;
|
|
329
|
-
const height = this.canvas().nativeElement.height;
|
|
330
|
-
this.canvasContext.clearRect(0, 0, width, height);
|
|
331
|
-
this.canvasContext.save();
|
|
332
|
-
const peak = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: 1 });
|
|
333
|
-
const gradient = this.canvasContext.createLinearGradient(0, 0, width, 0);
|
|
334
|
-
gradient.addColorStop(0, 'rgb(0, 0, 0)');
|
|
335
|
-
gradient.addColorStop(1, `rgb(${Math.round(peak.r)}, ${Math.round(peak.g)}, ${Math.round(peak.b)})`);
|
|
336
|
-
this.canvasContext.fillStyle = gradient;
|
|
337
|
-
this.canvasContext.fillRect(0, 0, width, height);
|
|
338
|
-
}
|
|
339
|
-
});
|
|
340
|
-
effect(() => {
|
|
341
|
-
const brightness = this.brightness();
|
|
342
|
-
this.brightnessChange.emit(brightness);
|
|
343
|
-
});
|
|
344
|
-
}
|
|
345
|
-
ngAfterViewInit() {
|
|
346
|
-
if (typeof window !== 'undefined') {
|
|
347
|
-
this.canvasContext = this.canvas().nativeElement.getContext('2d', { willReadFrequently: true });
|
|
348
|
-
}
|
|
349
280
|
}
|
|
350
281
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsBrightnessStripComponent, isStandalone: true, selector: "bs-brightness-strip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hs: "hsChange", brightness: "brightnessChange" }, ngImport: i0, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"], dependencies: [{ kind: "component", type: BsSliderComponent, selector: "bs-slider", inputs: ["disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: BsThumbDirective, selector: "[bsThumb]" }, { kind: "directive", type: BsTrackDirective, selector: "[bsTrack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
352
283
|
}
|
|
353
284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsBrightnessStripComponent, decorators: [{
|
|
354
285
|
type: Component,
|
|
355
|
-
args: [{ selector: 'bs-brightness-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"
|
|
356
|
-
}],
|
|
286
|
+
args: [{ selector: 'bs-brightness-strip', imports: [BsSliderComponent, BsThumbDirective, BsTrackDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-slider [disabled]=\"disabled()\" [value]=\"brightness()\" (valueChange)=\"brightness.set($event)\">\n <div bsTrack class=\"position-absolute w-100\" [style.background]=\"trackGradient()\"></div>\n <div bsThumb [style.background]=\"resultBackground()\"></div>\n</bs-slider>\n", styles: [".track{height:8px;border-radius:8px}.thumb{width:24px;height:24px;top:0;transform:translate(-50%);border-radius:50%;box-shadow:0 0 0 .1rem #646b7240}\n"] }]
|
|
287
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }] } });
|
|
357
288
|
|
|
358
289
|
class BsColorPickerValueAccessor {
|
|
359
290
|
constructor() {
|
|
360
291
|
this.host = inject(BsColorPickerComponent);
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
this.lastHex = hex;
|
|
372
|
-
this.onValueChange?.(hex);
|
|
373
|
-
});
|
|
292
|
+
this.host.userChanged.pipe(takeUntilDestroyed()).subscribe(() => this.emit());
|
|
293
|
+
}
|
|
294
|
+
emit() {
|
|
295
|
+
this.onTouched?.();
|
|
296
|
+
if (!this.onValueChange)
|
|
297
|
+
return;
|
|
298
|
+
const hs = this.host.hs();
|
|
299
|
+
const brightness = this.host.brightness();
|
|
300
|
+
const rgb = hsv2rgb({ hue: hs.hue, saturation: hs.saturation, value: brightness });
|
|
301
|
+
this.onValueChange(rgb2hex(rgb));
|
|
374
302
|
}
|
|
375
303
|
registerOnChange(fn) {
|
|
376
304
|
this.onValueChange = fn;
|
|
@@ -382,7 +310,6 @@ class BsColorPickerValueAccessor {
|
|
|
382
310
|
if (!value)
|
|
383
311
|
return;
|
|
384
312
|
const hsv = hex2hsv(value);
|
|
385
|
-
this.lastHex = rgb2hex(hsv2rgb(hsv));
|
|
386
313
|
this.host.hs.set({ hue: hsv.hue, saturation: hsv.saturation });
|
|
387
314
|
this.host.brightness.set(hsv.value);
|
|
388
315
|
}
|
|
@@ -468,7 +395,7 @@ class BsColorWheelComponent {
|
|
|
468
395
|
this.hs.set(hs);
|
|
469
396
|
}
|
|
470
397
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", brightness: "brightnessChange", hs: "hsChange", hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"
|
|
398
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorWheelComponent, isStandalone: true, selector: "bs-color-wheel", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, hs: { classPropertyName: "hs", publicName: "hs", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange", brightness: "brightnessChange", hs: "hsChange", hsChange: "hsChange" }, host: { listeners: { "document:mousemove": "onPointerMove($event)", "document:mouseup": "onPointerUp($event)" }, classAttribute: "position-relative" }, viewQueries: [{ propertyName: "surface", first: true, predicate: ["surface"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
472
399
|
}
|
|
473
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorWheelComponent, decorators: [{
|
|
474
401
|
type: Component,
|
|
@@ -476,7 +403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
476
403
|
'class': 'position-relative',
|
|
477
404
|
'(document:mousemove)': 'onPointerMove($event)',
|
|
478
405
|
'(document:mouseup)': 'onPointerUp($event)',
|
|
479
|
-
}, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"
|
|
406
|
+
}, template: "<div [style.width.px]=\"width()\" [style.height.px]=\"height()\" class=\"position-relative\">\n <div class=\"wheel-surface position-absolute\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"\n (mousedown)=\"onPointerDown($event)\"\n (touchstart)=\"onPointerDown($event)\"\n (touchmove)=\"onPointerMove($event)\"\n (touchend)=\"onPointerUp($event)\"\n #surface></div>\n\n <div class=\"brightness-overlay position-absolute pe-none\"\n [style.opacity]=\"overlayOpacity()\"\n [style.left.px]=\"shiftX()\"\n [style.top.px]=\"shiftY()\"\n [style.width.px]=\"squareSize()\"\n [style.height.px]=\"squareSize()\"></div>\n\n @if (markerPosition(); as markerPosition) {\n <div class=\"marker position-absolute pe-none\" [style.left.px]=\"markerPosition.x\" [style.top.px]=\"markerPosition.y\"></div>\n }\n</div>\n", styles: [".wheel-surface{border-radius:50%;background:radial-gradient(circle closest-side,#fff,transparent),conic-gradient(from 90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);touch-action:none;cursor:crosshair}.brightness-overlay{background:#000;border-radius:50%;transition:opacity 60ms linear}.marker{width:30px;height:30px;border-radius:15px;margin-top:-15px;margin-left:-15px;box-sizing:border-box;border:2px solid white;box-shadow:#0000001a 0 0 10px 5px;pointer-events:none}\n"] }]
|
|
480
407
|
}], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }, { type: i0.Output, args: ["brightnessChange"] }], hs: [{ type: i0.Input, args: [{ isSignal: true, alias: "hs", required: false }] }, { type: i0.Output, args: ["hsChange"] }], hsChange: [{ type: i0.Output, args: ["hsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
481
408
|
|
|
482
409
|
class BsColorPickerComponent {
|
|
@@ -488,19 +415,32 @@ class BsColorPickerComponent {
|
|
|
488
415
|
this.hs = signal({ hue: 0, saturation: 0 }, ...(ngDevMode ? [{ debugName: "hs" }] : /* istanbul ignore next */ []));
|
|
489
416
|
this.brightness = signal(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
|
|
490
417
|
this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
418
|
+
/**
|
|
419
|
+
* Fires when the user drives a change (drags the wheel or the brightness strip).
|
|
420
|
+
* The value accessor subscribes to this so it only emits to the form on real
|
|
421
|
+
* user actions — not on writeValue echoes or initial signal-default state.
|
|
422
|
+
*/
|
|
423
|
+
this.userChanged = new Subject();
|
|
424
|
+
}
|
|
425
|
+
onUserHsChange(hs) {
|
|
426
|
+
this.hs.set(hs);
|
|
427
|
+
this.userChanged.next();
|
|
428
|
+
}
|
|
429
|
+
onUserBrightnessChange(brightness) {
|
|
430
|
+
this.brightness.set(brightness);
|
|
431
|
+
this.userChanged.next();
|
|
432
|
+
}
|
|
433
|
+
onUserAlphaChange(alpha) {
|
|
434
|
+
this.alpha.set(alpha);
|
|
435
|
+
this.userChanged.next();
|
|
496
436
|
}
|
|
497
437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange"
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsColorPickerComponent, isStandalone: true, selector: "bs-color-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowAlpha: { classPropertyName: "allowAlpha", publicName: "allowAlpha", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { alpha: "alphaChange" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["wheel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: BsColorPickerValueAccessor }], ngImport: i0, template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n", styles: [""], dependencies: [{ kind: "component", type: BsColorWheelComponent, selector: "bs-color-wheel", inputs: ["width", "height", "brightness", "hs", "disabled"], outputs: ["widthChange", "heightChange", "brightnessChange", "hsChange"] }, { kind: "component", type: BsBrightnessStripComponent, selector: "bs-brightness-strip", inputs: ["disabled", "hs", "brightness"], outputs: ["hsChange", "brightnessChange"] }, { kind: "component", type: BsAlphaStripComponent, selector: "bs-alpha-strip", inputs: ["disabled", "hs", "brightness", "alpha"], outputs: ["hsChange", "brightnessChange", "alphaChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
499
439
|
}
|
|
500
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsColorPickerComponent, decorators: [{
|
|
501
441
|
type: Component,
|
|
502
|
-
args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsBrightnessStripComponent, BsAlphaStripComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"
|
|
503
|
-
}],
|
|
442
|
+
args: [{ selector: 'bs-color-picker', imports: [BsColorWheelComponent, BsBrightnessStripComponent, BsAlphaStripComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [BsColorPickerValueAccessor], template: "@let letDisabled = disabled();\n@let letHS = hs();\n@let letBrightness = brightness();\n@let letAlpha = alpha();\n\n<bs-color-wheel [disabled]=\"letDisabled\" [hs]=\"letHS\" (hsChange)=\"onUserHsChange($event)\" [brightness]=\"letBrightness\" [width]=\"size()\" [height]=\"size()\" #wheel></bs-color-wheel>\n<bs-brightness-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" (brightnessChange)=\"onUserBrightnessChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #strip></bs-brightness-strip>\n@if (allowAlpha()) {\n <bs-alpha-strip [disabled]=\"letDisabled\" [hs]=\"letHS\" [brightness]=\"letBrightness\" [alpha]=\"letAlpha\" (alphaChange)=\"onUserAlphaChange($event)\" class=\"d-block mt-2\" [style.width.px]=\"size()\" #alphaStrip></bs-alpha-strip>\n}\n" }]
|
|
443
|
+
}], propDecorators: { colorWheel: [{ type: i0.ViewChild, args: ['wheel', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAlpha", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }] } });
|
|
504
444
|
|
|
505
445
|
/**
|
|
506
446
|
* Generated bundle index. Do not edit.
|