@wizishop/angular-components 0.0.188 → 0.0.192
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 +88 -3
- package/bundles/wizishop-angular-components.umd.js +12 -5
- 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/esm2015/lib/components/selects/select/select.component.js +4 -2
- package/esm2015/lib/components/wrapper-sidebar/wrapper-sidebar.component.js +2 -2
- package/fesm2015/wizishop-angular-components.js +12 -5
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/mosaic/mosaic.component.d.ts +2 -1
- package/lib/components/selects/select/select.component.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.192.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);
|
|
@@ -6142,6 +6221,12 @@ h4.wac-h4 {
|
|
|
6142
6221
|
opacity: 1;
|
|
6143
6222
|
box-shadow: 3px 3px 20px $wac-select-box-shadow;
|
|
6144
6223
|
padding: 10px;
|
|
6224
|
+
.to-top & {
|
|
6225
|
+
top: auto;
|
|
6226
|
+
bottom: 100%;
|
|
6227
|
+
margin-top: 0;
|
|
6228
|
+
margin-bottom: rem(14);
|
|
6229
|
+
}
|
|
6145
6230
|
&.hidden {
|
|
6146
6231
|
visibility: hidden;
|
|
6147
6232
|
opacity: 0;
|
|
@@ -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
|
];
|
|
@@ -3159,6 +3159,7 @@
|
|
|
3159
3159
|
this.translateService = translateService;
|
|
3160
3160
|
this.search = false;
|
|
3161
3161
|
this.searchValue = '';
|
|
3162
|
+
this.openUp = false;
|
|
3162
3163
|
this.searchValueChange = new i0.EventEmitter();
|
|
3163
3164
|
this.type = 'default';
|
|
3164
3165
|
this.maxWidth = '100%';
|
|
@@ -3254,7 +3255,7 @@
|
|
|
3254
3255
|
SelectComponent.decorators = [
|
|
3255
3256
|
{ type: i0.Component, args: [{
|
|
3256
3257
|
selector: 'wac-select',
|
|
3257
|
-
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\" (keypressEnter)=\"onClickCallToAction()\"/>\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div
|
|
3258
|
+
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [ngClass]=\"{'to-top': openUp}\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\" (keypressEnter)=\"onClickCallToAction()\"/>\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>\n",
|
|
3258
3259
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
|
|
3259
3260
|
},] }
|
|
3260
3261
|
];
|
|
@@ -3268,6 +3269,7 @@
|
|
|
3268
3269
|
maxWidthItems: [{ type: i0.Input }],
|
|
3269
3270
|
search: [{ type: i0.Input }],
|
|
3270
3271
|
searchValue: [{ type: i0.Input }],
|
|
3272
|
+
openUp: [{ type: i0.Input }],
|
|
3271
3273
|
searchValueChange: [{ type: i0.Output }],
|
|
3272
3274
|
type: [{ type: i0.Input }],
|
|
3273
3275
|
callToAction: [{ type: i0.Input }],
|
|
@@ -4221,7 +4223,7 @@
|
|
|
4221
4223
|
WrapperSidebarComponent.decorators = [
|
|
4222
4224
|
{ type: i0.Component, args: [{
|
|
4223
4225
|
selector: 'wac-wrapper-sidebar',
|
|
4224
|
-
template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n <div class=\"wac-wrapper-sidebar__left\">\n <ng-content select=\"[sidebar]\"></ng-content>\n </div>\n <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n"
|
|
4226
|
+
template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n <div class=\"wac-wrapper-sidebar__left\">\n <ng-content select=\"[sidebar]\"></ng-content>\n </div>\n <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n"
|
|
4225
4227
|
},] }
|
|
4226
4228
|
];
|
|
4227
4229
|
WrapperSidebarComponent.ctorParameters = function () { return []; };
|
|
@@ -4413,6 +4415,12 @@
|
|
|
4413
4415
|
this.importImageSrc = new i0.EventEmitter();
|
|
4414
4416
|
this.loadMoreImages = new i0.EventEmitter();
|
|
4415
4417
|
}
|
|
4418
|
+
MosaicComponent.prototype.trackColumn = function (index) {
|
|
4419
|
+
return index;
|
|
4420
|
+
};
|
|
4421
|
+
MosaicComponent.prototype.trackImage = function (index, image) {
|
|
4422
|
+
return image.src;
|
|
4423
|
+
};
|
|
4416
4424
|
MosaicComponent.prototype.ngOnChanges = function (changes) {
|
|
4417
4425
|
console.log('changes', changes);
|
|
4418
4426
|
var isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
|
|
@@ -4459,12 +4467,11 @@
|
|
|
4459
4467
|
MosaicComponent.decorators = [
|
|
4460
4468
|
{ type: i0.Component, args: [{
|
|
4461
4469
|
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
|
|
4470
|
+
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
4471
|
encapsulation: i0.ViewEncapsulation.None,
|
|
4464
4472
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
4465
4473
|
},] }
|
|
4466
4474
|
];
|
|
4467
|
-
MosaicComponent.ctorParameters = function () { return []; };
|
|
4468
4475
|
MosaicComponent.propDecorators = {
|
|
4469
4476
|
imagesList: [{ type: i0.Input }],
|
|
4470
4477
|
isLoading: [{ type: i0.Input }],
|