@wizishop/angular-components 15.1.137 → 15.1.138
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/angular-components.scss +0 -8
- package/esm2020/lib/components/alert-popup/alert-popup.component.mjs +6 -37
- package/esm2020/lib/components/color-picker/color-picker.component.mjs +17 -4
- package/fesm2015/wizishop-angular-components.mjs +19 -39
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +19 -38
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/alert-popup/alert-popup.component.d.ts +3 -9
- package/package.json +1 -1
- package/wizishop-angular-components-15.1.138.tgz +0 -0
- package/wizishop-angular-components-15.1.137.tgz +0 -0
|
@@ -4594,32 +4594,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
4594
4594
|
}] } });
|
|
4595
4595
|
|
|
4596
4596
|
class AlertPopupComponent {
|
|
4597
|
-
constructor(
|
|
4598
|
-
this.elRef = elRef;
|
|
4599
|
-
this.renderer = renderer;
|
|
4597
|
+
constructor() {
|
|
4600
4598
|
/** Subject for notifying the user that the dialog has finished closing. */
|
|
4601
4599
|
this.afterClosedPopup = new Subject();
|
|
4602
4600
|
this.open = false;
|
|
4603
4601
|
}
|
|
4604
|
-
|
|
4602
|
+
ngAfterViewInit() {
|
|
4605
4603
|
setTimeout(() => {
|
|
4606
4604
|
this.open = true;
|
|
4607
|
-
},
|
|
4608
|
-
this.observer = new MutationObserver(() => {
|
|
4609
|
-
const alert = document.querySelector('.wac-alert-popup:last-child .alert');
|
|
4610
|
-
if (alert) {
|
|
4611
|
-
const bgColor = getComputedStyle(alert).backgroundColor;
|
|
4612
|
-
const hexColor = this.rgbToHex(bgColor);
|
|
4613
|
-
if ((hexColor === '#2ecc71' || hexColor === '#e95656') && !alert.classList.contains('is-loaded')) {
|
|
4614
|
-
alert.classList.add('is-loaded');
|
|
4615
|
-
this.observer.disconnect();
|
|
4616
|
-
}
|
|
4617
|
-
}
|
|
4618
|
-
});
|
|
4619
|
-
this.observer.observe(document.body, {
|
|
4620
|
-
childList: true,
|
|
4621
|
-
subtree: true
|
|
4622
|
-
});
|
|
4605
|
+
}, 50);
|
|
4623
4606
|
if (this.config.duration > 0) {
|
|
4624
4607
|
this.timer = setTimeout(() => this.dismiss(), this.config.duration);
|
|
4625
4608
|
}
|
|
@@ -4637,29 +4620,15 @@ class AlertPopupComponent {
|
|
|
4637
4620
|
afterClosed() {
|
|
4638
4621
|
return this.afterClosedPopup.asObservable();
|
|
4639
4622
|
}
|
|
4640
|
-
ngOnDestroy() {
|
|
4641
|
-
this.observer?.disconnect();
|
|
4642
|
-
}
|
|
4643
|
-
rgbToHex(rgb) {
|
|
4644
|
-
const result = rgb.match(/\d+/g);
|
|
4645
|
-
if (!result)
|
|
4646
|
-
return '';
|
|
4647
|
-
const [r, g, b] = result.map(Number);
|
|
4648
|
-
return ('#' +
|
|
4649
|
-
[r, g, b]
|
|
4650
|
-
.map((x) => x.toString(16).padStart(2, '0'))
|
|
4651
|
-
.join('')
|
|
4652
|
-
.toLowerCase());
|
|
4653
|
-
}
|
|
4654
4623
|
}
|
|
4655
|
-
AlertPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, deps: [
|
|
4624
|
+
AlertPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4656
4625
|
AlertPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: AlertPopupComponent, selector: "wac-alert-popup", host: { classAttribute: "wac-alert-popup" }, ngImport: i0, template: "<div\r\n [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '') + ((config.small) ? ' small' : '') + ((config.icon) ? ' with-icon' : '') + ((config.duration) ? '' : ' no-duration')\"\r\n [ngClass]=\"{'is-active': open, 'has-close': config.closeButton}\"\r\n>\r\n <div class=\"alert--message\">\r\n <span class=\"icon\" *ngIf=\"config.icon\">\r\n <i [class]=\"config.icon\"></i>\r\n </span>\r\n <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\r\n <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\r\n <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
4657
4626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AlertPopupComponent, decorators: [{
|
|
4658
4627
|
type: Component,
|
|
4659
4628
|
args: [{ selector: 'wac-alert-popup', host: {
|
|
4660
4629
|
class: 'wac-alert-popup'
|
|
4661
4630
|
}, encapsulation: ViewEncapsulation.None, template: "<div\r\n [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '') + ((config.small) ? ' small' : '') + ((config.icon) ? ' with-icon' : '') + ((config.duration) ? '' : ' no-duration')\"\r\n [ngClass]=\"{'is-active': open, 'has-close': config.closeButton}\"\r\n>\r\n <div class=\"alert--message\">\r\n <span class=\"icon\" *ngIf=\"config.icon\">\r\n <i [class]=\"config.icon\"></i>\r\n </span>\r\n <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\" *ngIf=\"!config.small || (config.small && config.closeButton)\"><i class=\"far fa-times\"></i></span>\r\n <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\r\n <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\r\n </div>\r\n</div>\r\n" }]
|
|
4662
|
-
}]
|
|
4631
|
+
}] });
|
|
4663
4632
|
|
|
4664
4633
|
class AlertPopupService {
|
|
4665
4634
|
constructor(domService) {
|
|
@@ -6677,10 +6646,22 @@ class ColorPickerComponent {
|
|
|
6677
6646
|
}
|
|
6678
6647
|
}
|
|
6679
6648
|
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6680
|
-
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, selector: "wac-color-picker", inputs: { label: "label", value: "value", gap: "gap", fontSize: "fontSize", id: "id", info: "info" }, outputs: { colorChange: "colorChange" },
|
|
6649
|
+
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorPickerComponent, selector: "wac-color-picker", inputs: { label: "label", value: "value", gap: "gap", fontSize: "fontSize", id: "id", info: "info" }, outputs: { colorChange: "colorChange" }, providers: [
|
|
6650
|
+
{
|
|
6651
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6652
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6653
|
+
multi: true
|
|
6654
|
+
}
|
|
6655
|
+
], ngImport: i0, template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n <div class=\"w-label\">\r\n <label class=\"cp-label\" [for]=\"id\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n <wac-info *ngIf=\"info\" [colorPicker]=\"'true'\">{{ info }}</wac-info>\r\n </div>\r\n\r\n <div class=\"w-input\">\r\n\r\n <div\r\n class=\"color-preview\"\r\n [colorPicker]=\"value\"\r\n (click)=\"colorPickerInput.openDialog()\"\r\n [ngStyle]=\"{'background-color': value}\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n ></div>\r\n\r\n <input\r\n class=\"cp-input\"\r\n [id]=\"id\"\r\n #colorPickerInput=\"ngxColorPicker\"\r\n maxlength=\"7\"\r\n placeholder=\"#000000\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"changeColor($event)\"\r\n [colorPicker]=\"value\"\r\n (colorPickerChange)=\"changeColor($event)\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n </div>\r\n\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$3.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: InfoComponent, selector: "wac-info", inputs: ["colorPicker"] }] });
|
|
6681
6656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
6682
6657
|
type: Component,
|
|
6683
|
-
args: [{ selector: "wac-color-picker",
|
|
6658
|
+
args: [{ selector: "wac-color-picker", providers: [
|
|
6659
|
+
{
|
|
6660
|
+
provide: NG_VALUE_ACCESSOR,
|
|
6661
|
+
useExisting: forwardRef(() => ColorPickerComponent),
|
|
6662
|
+
multi: true
|
|
6663
|
+
}
|
|
6664
|
+
], template: "<div class=\"w-color-picker\" [ngStyle]=\"{'gap': gap}\">\r\n\r\n <div class=\"w-label\">\r\n <label class=\"cp-label\" [for]=\"id\" [ngStyle]=\"{'font-size': fontSize}\">{{ label }}</label>\r\n <wac-info *ngIf=\"info\" [colorPicker]=\"'true'\">{{ info }}</wac-info>\r\n </div>\r\n\r\n <div class=\"w-input\">\r\n\r\n <div\r\n class=\"color-preview\"\r\n [colorPicker]=\"value\"\r\n (click)=\"colorPickerInput.openDialog()\"\r\n [ngStyle]=\"{'background-color': value}\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n ></div>\r\n\r\n <input\r\n class=\"cp-input\"\r\n [id]=\"id\"\r\n #colorPickerInput=\"ngxColorPicker\"\r\n maxlength=\"7\"\r\n placeholder=\"#000000\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"changeColor($event)\"\r\n [colorPicker]=\"value\"\r\n (colorPickerChange)=\"changeColor($event)\"\r\n [cpPosition]=\"'bottom'\"\r\n [cpPositionOffset]=\"'-35'\"\r\n (input)=\"setValue($event)\"\r\n />\r\n\r\n </div>\r\n\r\n</div>\r\n" }]
|
|
6684
6665
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
6685
6666
|
type: Input
|
|
6686
6667
|
}], value: [{
|