@wizishop/angular-components 0.0.188 → 0.0.190
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 +82 -3
- package/bundles/wizishop-angular-components.umd.js +8 -3
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +1 -1
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/inputs/input/input.component.js +2 -2
- package/esm2015/lib/components/mosaic/mosaic.component.js +8 -3
- package/fesm2015/wizishop-angular-components.js +8 -3
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/mosaic/mosaic.component.d.ts +2 -1
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.190.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.188.tgz +0 -0
package/angular-components.scss
CHANGED
|
@@ -4269,7 +4269,7 @@ span.wac-tooltip {
|
|
|
4269
4269
|
@include media('>=desktop') {
|
|
4270
4270
|
width: 67%;
|
|
4271
4271
|
min-width: 67%;
|
|
4272
|
-
padding:
|
|
4272
|
+
padding: 30px;
|
|
4273
4273
|
}
|
|
4274
4274
|
}
|
|
4275
4275
|
}
|
|
@@ -4347,28 +4347,81 @@ h1.wac-h1 {
|
|
|
4347
4347
|
width: 100%;
|
|
4348
4348
|
display: flex;
|
|
4349
4349
|
flex-direction: column;
|
|
4350
|
+
animation-duration: 2s;
|
|
4351
|
+
animation-fill-mode: forwards;
|
|
4352
|
+
animation-iteration-count: infinite;
|
|
4353
|
+
animation-name: preloadAnimation;
|
|
4354
|
+
animation-timing-function: linear;
|
|
4355
|
+
background: #F6F7F8;
|
|
4356
|
+
background: linear-gradient(to right, #EEEEEE 8%, #DDDDDD 18%, #EEEEEE 33%);
|
|
4350
4357
|
@include media('>tablet') {
|
|
4351
4358
|
flex-direction: row;
|
|
4352
4359
|
width: calc(100% + 10px);
|
|
4353
4360
|
transform: translateX(-5px);
|
|
4354
4361
|
}
|
|
4362
|
+
&.load {
|
|
4363
|
+
padding-top: 10px;
|
|
4364
|
+
min-height: 200px;
|
|
4365
|
+
}
|
|
4355
4366
|
&__scrollbar {
|
|
4356
4367
|
width: 100%;
|
|
4357
4368
|
}
|
|
4358
4369
|
&__column {
|
|
4359
4370
|
width: 100%;
|
|
4360
4371
|
margin: 0;
|
|
4372
|
+
position: relative;
|
|
4373
|
+
&:before {
|
|
4374
|
+
content: '';
|
|
4375
|
+
display: block;
|
|
4376
|
+
position: absolute;
|
|
4377
|
+
top: 0;
|
|
4378
|
+
left: 100%;
|
|
4379
|
+
width: 10px;
|
|
4380
|
+
height:100%;
|
|
4381
|
+
background-color: $white;
|
|
4382
|
+
z-index: 1;
|
|
4383
|
+
}
|
|
4384
|
+
& > * {
|
|
4385
|
+
z-index: 2;
|
|
4386
|
+
}
|
|
4361
4387
|
@include media('>tablet') {
|
|
4362
4388
|
margin: 0 5px;
|
|
4363
4389
|
}
|
|
4364
4390
|
&__image {
|
|
4365
4391
|
width: 100%;
|
|
4366
|
-
margin: 0
|
|
4392
|
+
margin: 0;
|
|
4393
|
+
padding: 0 0 10px;
|
|
4367
4394
|
position: relative;
|
|
4368
4395
|
overflow: hidden;
|
|
4369
|
-
|
|
4396
|
+
&:before {
|
|
4397
|
+
content: '';
|
|
4398
|
+
display: block;
|
|
4399
|
+
position: absolute;
|
|
4400
|
+
top: -10px;
|
|
4401
|
+
left: 0;
|
|
4402
|
+
width: calc(100% + 10px);
|
|
4403
|
+
height: calc(100% + 20px);
|
|
4404
|
+
background-color: $white;
|
|
4405
|
+
z-index: 1;
|
|
4406
|
+
}
|
|
4407
|
+
&:after {
|
|
4408
|
+
content: '';
|
|
4409
|
+
display: block;
|
|
4370
4410
|
position: absolute;
|
|
4371
4411
|
top: 100%;
|
|
4412
|
+
left: 0;
|
|
4413
|
+
width: 100%;
|
|
4414
|
+
height: 10px;
|
|
4415
|
+
background-color: $white;
|
|
4416
|
+
z-index: 1;
|
|
4417
|
+
}
|
|
4418
|
+
& > * {
|
|
4419
|
+
z-index: 2;
|
|
4420
|
+
position: relative;
|
|
4421
|
+
}
|
|
4422
|
+
.hover {
|
|
4423
|
+
position: absolute!important;
|
|
4424
|
+
top: 100%;
|
|
4372
4425
|
transform: translateY(50px);
|
|
4373
4426
|
margin-bottom: 50px;
|
|
4374
4427
|
transition: .3s ease;
|
|
@@ -4376,6 +4429,7 @@ h1.wac-h1 {
|
|
|
4376
4429
|
width: 100%;
|
|
4377
4430
|
display: flex;
|
|
4378
4431
|
justify-content: center;
|
|
4432
|
+
z-index: 3;
|
|
4379
4433
|
}
|
|
4380
4434
|
img {
|
|
4381
4435
|
display: block;
|
|
@@ -4391,6 +4445,31 @@ h1.wac-h1 {
|
|
|
4391
4445
|
}
|
|
4392
4446
|
}
|
|
4393
4447
|
}
|
|
4448
|
+
.load-img {
|
|
4449
|
+
width: 100%;
|
|
4450
|
+
height: 200px;
|
|
4451
|
+
position: relative;
|
|
4452
|
+
&:before {
|
|
4453
|
+
content: '';
|
|
4454
|
+
display: block;
|
|
4455
|
+
position: absolute;
|
|
4456
|
+
bottom: 0;
|
|
4457
|
+
left: 100%;
|
|
4458
|
+
width: 10px;
|
|
4459
|
+
height: calc(100% + 10px);
|
|
4460
|
+
background-color: $white;
|
|
4461
|
+
z-index: 1;
|
|
4462
|
+
}
|
|
4463
|
+
}
|
|
4464
|
+
}
|
|
4465
|
+
|
|
4466
|
+
@keyframes preloadAnimation {
|
|
4467
|
+
0% {
|
|
4468
|
+
background-position: -1080px 0
|
|
4469
|
+
}
|
|
4470
|
+
100% {
|
|
4471
|
+
background-position: 1080px 0
|
|
4472
|
+
}
|
|
4394
4473
|
}
|
|
4395
4474
|
h2.wac-h2 {
|
|
4396
4475
|
font-size: rem(18);
|
|
@@ -2220,7 +2220,7 @@
|
|
|
2220
2220
|
InputComponent.decorators = [
|
|
2221
2221
|
{ type: i0.Component, args: [{
|
|
2222
2222
|
selector: 'wac-input',
|
|
2223
|
-
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n <strong>{{ value.toString().length }}</strong> / {{ size }}\n </span>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p\n class=\"control\"\n [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n >\n <!-- Text Prepend -->\n <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n </span>\n\n <!-- Input -->\n <input\n [class]=\"'input ' + extraClasses\"\n [id]=\"id\"\n [ngClass]=\"{\n 'is-danger': textError,\n 'is-large': big,\n 'is-number': isNumber,\n 'remove-margin': disableMargin,\n 'text-append': textAppend\n }\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n (focusout)=\"onFocusOut()\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n (keypress)=\"keyPress($event)\"\n />\n\n <!-- Indication at the end of the input -->\n <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n <span [innerHTML]=\"indication\"></span>\n </span>\n\n <!-- Text Append -->\n <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n <!-- error if text append not empty -->\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n </span>\n\n <!-- Icon Left -->\n <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n\n <!-- Icon error if textAppend empty -->\n <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n\n <!-- Icon success -->\n <span *ngIf=\"success\" class=\"icon is-small is-right\">\n <i class=\"fas fa-check has-text-success\"></i>\n </span>\n\n <!-- Text Info -->\n <span\n *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n class=\"is-size-7 wac-input__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n\n <!-- Text Error -->\n <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n </p>\n\n <!-- Progress Bar -->\n <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2223
|
+
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"size && !progressBar && value\" class=\"is-size-7 wac-input__size\">\n <strong>{{ value.toString().length }}</strong> / {{ size }}\n </span>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p\n class=\"control\"\n [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n >\n <!-- Text Prepend -->\n <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n </span>\n\n <!-- Input -->\n <input\n [class]=\"'input ' + extraClasses\"\n [id]=\"id\"\n [ngClass]=\"{\n 'is-danger': textError,\n 'is-large': big,\n 'is-number': isNumber,\n 'remove-margin': disableMargin,\n 'text-append': textAppend\n }\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n (focusout)=\"onFocusOut()\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n (keypress)=\"keyPress($event)\"\n />\n\n <!-- Indication at the end of the input -->\n <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n <span [innerHTML]=\"indication\"></span>\n </span>\n\n <!-- Text Append -->\n <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n <!-- error if text append not empty -->\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n </span>\n\n <!-- Icon Left -->\n <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n\n <!-- Icon error if textAppend empty -->\n <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n\n <!-- Icon success -->\n <span *ngIf=\"success\" class=\"icon is-small is-right\">\n <i class=\"fas fa-check has-text-success\"></i>\n </span>\n\n <!-- Text Info -->\n <span\n *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n class=\"is-size-7 wac-input__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n\n <!-- Text Error -->\n <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n </p>\n\n <!-- Progress Bar -->\n <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2224
2224
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
|
|
2225
2225
|
},] }
|
|
2226
2226
|
];
|
|
@@ -4413,6 +4413,12 @@
|
|
|
4413
4413
|
this.importImageSrc = new i0.EventEmitter();
|
|
4414
4414
|
this.loadMoreImages = new i0.EventEmitter();
|
|
4415
4415
|
}
|
|
4416
|
+
MosaicComponent.prototype.trackColumn = function (index) {
|
|
4417
|
+
return index;
|
|
4418
|
+
};
|
|
4419
|
+
MosaicComponent.prototype.trackImage = function (index, image) {
|
|
4420
|
+
return image.src;
|
|
4421
|
+
};
|
|
4416
4422
|
MosaicComponent.prototype.ngOnChanges = function (changes) {
|
|
4417
4423
|
console.log('changes', changes);
|
|
4418
4424
|
var isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
|
|
@@ -4459,12 +4465,11 @@
|
|
|
4459
4465
|
MosaicComponent.decorators = [
|
|
4460
4466
|
{ type: i0.Component, args: [{
|
|
4461
4467
|
selector: 'wac-mosaic',
|
|
4462
|
-
template: "<div class=\"wac-mosaic\">\n <ng-scrollbar (reachedBottom)=\"onBottomReached()\" reachedOffset=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n <div class=\"wac-mosaic__wrapper\">\n
|
|
4468
|
+
template: "<div class=\"wac-mosaic\" [ngClass]=\"{'is-loading': isLoading}\">\n <ng-scrollbar (reachedBottom)=\"onBottomReached()\" reachedOffset=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n <div class=\"wac-mosaic__wrapper\">\n <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n <div class=\"hover\">\n <ng-container\n [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n [ngTemplateOutletContext]=\"{ $implicit: image }\"\n >\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div class=\"wac-mosaic__wrapper load\">\n <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n <div class=\"load-img\">\n </div>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n",
|
|
4463
4469
|
encapsulation: i0.ViewEncapsulation.None,
|
|
4464
4470
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
4465
4471
|
},] }
|
|
4466
4472
|
];
|
|
4467
|
-
MosaicComponent.ctorParameters = function () { return []; };
|
|
4468
4473
|
MosaicComponent.propDecorators = {
|
|
4469
4474
|
imagesList: [{ type: i0.Input }],
|
|
4470
4475
|
isLoading: [{ type: i0.Input }],
|