@wizco/fenixds-ngx 17.0.14 → 17.0.17
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/esm2022/lib/msg-box-feedback/msg-box-feeback.types.mjs +1 -1
- package/esm2022/lib/msg-box-feedback/msg-box-feedback.component.mjs +24 -6
- package/esm2022/lib/pagination/pagination.component.mjs +6 -5
- package/esm2022/lib/smart-select/smart-select-options.component.mjs +48 -0
- package/esm2022/lib/smart-select/smart-select.component.mjs +297 -0
- package/esm2022/lib/step/step.component.mjs +4 -4
- package/esm2022/lib/stepper/stepper.component.mjs +4 -4
- package/esm2022/lib/tabs/tabs.component.mjs +5 -5
- package/esm2022/lib/upload/upload.component.mjs +4 -4
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/wizco-fenixds-ngx.mjs +380 -24
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/msg-box-feedback/msg-box-feeback.types.d.ts +1 -0
- package/lib/msg-box-feedback/msg-box-feeback.types.d.ts.map +1 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts +3 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts.map +1 -1
- package/lib/pagination/pagination.component.d.ts.map +1 -1
- package/lib/smart-select/smart-select-options.component.d.ts +18 -0
- package/lib/smart-select/smart-select-options.component.d.ts.map +1 -0
- package/lib/smart-select/smart-select.component.d.ts +64 -0
- package/lib/smart-select/smart-select.component.d.ts.map +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/public-api.d.ts.map +1 -1
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy } from '@angular/core';
|
|
4
|
+
import { EventEmitter, Component, ViewEncapsulation, Input, Output, SkipSelf, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
|
|
5
5
|
import * as i1$1 from '@angular/common/http';
|
|
6
6
|
import { HttpEventType, HttpClientModule } from '@angular/common/http';
|
|
7
7
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
8
8
|
import * as i1$2 from '@angular/router';
|
|
9
9
|
import { NavigationEnd, RouterModule } from '@angular/router';
|
|
10
|
+
import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
11
|
+
import * as i1$3 from '@angular/platform-browser';
|
|
10
12
|
|
|
11
13
|
class StepComponent {
|
|
12
14
|
/**
|
|
@@ -73,10 +75,10 @@ class StepComponent {
|
|
|
73
75
|
}
|
|
74
76
|
this.clicked.emit();
|
|
75
77
|
}
|
|
76
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
78
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 });
|
|
78
80
|
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
80
82
|
type: Component,
|
|
81
83
|
args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{display:inherit;align-items:baseline}.step{position:relative;--step-size: var(--wco-font-size-lg, 24px);--step-color: var(--wco-color-primary-600, #000);--step-background-color: var(--wco-color-primary-50, #fff);display:inline-grid;z-index:0}.step.step--active .step__title{font-weight:var(--wco-font-weight-bold, 700)}.step .step__line{width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000)}.step .step__line--start{grid-area:linestart}.step .step__content{grid-area:content}.step .step__line--end{grid-area:lineend}.step--vertical{grid-template-columns:auto 1fr;grid:\"linestart .\" \"bullet content\" \"lineend .\"}.step--vertical .step__bullet{position:relative}.step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}.step--vertical .step__content{display:flex;align-items:center}.step--vertical .step__content .step__title{text-align:left}.step--horizontal{grid-template-columns:auto 1fr;grid:\"linestart bullet lineend\" \"content content content\";align-items:center}.step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}.step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-color-neutral-700, #000);z-index:-1}.step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}.step__bullet{grid-area:bullet;position:relative}.step__bullet>div{height:var(--step-size);width:var(--step-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}.step__bullet span{font-size:var(--wco-font-size-xxs, 12px);font-weight:var(--wco-font-weight-bold, 700)}.step-status--current{--step-color: #080809;--step-background-color: var(--wco-color-primary-500, #fff)}.step-status--finalized{--step-color: #080809;--step-background-color: #FFB578}.step-status--waiting{--step-color: #080809;--step-background-color: #C4C4C4}.step-status--error{--step-color: #080809;--step-background-color: #FC9393}.step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}.step.step--disabled-linestart.step--horizontal{grid:\"bullet bullet lineend\" \"content content content\"}.step.step--disabled-linestart.step--horizontal .step__bullet{justify-content:flex-start}.step.step--disabled-linestart.step--horizontal .step__title{text-align:left}.step.step--disabled-linestart .step__line--start{display:none}.step.step--disabled-lineend.step--horizontal{grid:\"linestart bullet bullet\" \"content content content\"}.step.step--disabled-lineend.step--horizontal .step__bullet{justify-content:flex-end}.step.step--disabled-lineend.step--horizontal .step__title{text-align:end}.step.step--disabled-lineend .step__line--end{display:none}.step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}.step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}.step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}.step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}.step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"] }]
|
|
82
84
|
}], ctorParameters: function () { return []; }, propDecorators: { active: [{
|
|
@@ -127,10 +129,10 @@ class StepperComponent {
|
|
|
127
129
|
}
|
|
128
130
|
this.stepperSelected.emit(index);
|
|
129
131
|
}
|
|
130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
132
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperComponent, isStandalone: true, selector: "wco-stepper", inputs: { isVertical: "isVertical", stepperArray: "stepperArray" }, outputs: { stepperSelected: "stepperSelected" }, ngImport: i0, template: "<div\n class=\"stepper-vertical\"\n [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n *ngIf=\"stepperArray\"\n>\n <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n <div class=\"stepper-component__main\">\n <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\" (click)=\"clickedItem(items,$i)\">\n <span\n [ngClass]=\"\n items.showLineStart === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n items.valueIcon\n }}</span>\n <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n items.valueBullet\n }}</span></span\n >\n <span\n [ngClass]=\"\n items.showLineEnd === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n </div>\n <div class=\"stepper-label\">\n <span\n class=\"stepper-label__text\"\n [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n >{{ items.label }}</span\n >\n </div>\n </div>\n </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
132
134
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, decorators: [{
|
|
134
136
|
type: Component,
|
|
135
137
|
args: [{ selector: "wco-stepper", standalone: true, imports: [CommonModule], template: "<div\n class=\"stepper-vertical\"\n [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n *ngIf=\"stepperArray\"\n>\n <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n <div class=\"stepper-component__main\">\n <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\" (click)=\"clickedItem(items,$i)\">\n <span\n [ngClass]=\"\n items.showLineStart === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n items.valueIcon\n }}</span>\n <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n items.valueBullet\n }}</span></span\n >\n <span\n [ngClass]=\"\n items.showLineEnd === true\n ? 'stepper-item__line'\n : 'stepper-item__without-line'\n \"\n ></span>\n </div>\n <div class=\"stepper-label\">\n <span\n class=\"stepper-label__text\"\n [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n >{{ items.label }}</span\n >\n </div>\n </div>\n </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"] }]
|
|
136
138
|
}], ctorParameters: function () { return []; }, propDecorators: { isVertical: [{
|
|
@@ -513,10 +515,10 @@ class UploadComponent {
|
|
|
513
515
|
event.preventDefault();
|
|
514
516
|
event.dataTransfer.dropEffect = 'copy';
|
|
515
517
|
}
|
|
516
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
517
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
518
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1$1.HttpClient, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
519
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "wco-file-upload", inputs: { description: "description", config: "config", resetUpload: "resetUpload" }, outputs: { ApiResponse: "apiResponse", fileSelected: "fileSelected" }, usesOnChanges: true, ngImport: i0, template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <div class=\"upload__drop-info\">\n <span>Arraste-os aqui ou</span>\n <div class=\"upload__button\">\n <span class=\"material-icons\">cloud_upload</span>\n <span>{{replaceTexts.selectFileBtn}}</span>\n </div>\n </div>\n <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n <ng-container *ngIf=\"allowedFiles.length\">\n <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n </span>\n </ng-container>\n <input class=\"upload__file\" type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>\n", styles: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: HttpClientModule }] });
|
|
518
520
|
}
|
|
519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
|
|
520
522
|
type: Component,
|
|
521
523
|
args: [{ selector: "wco-file-upload", standalone: true, imports: [CommonModule, HttpClientModule], template: "<label for=\"sel{{id}}\" class=\"wco-file-upload\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\n <div class=\"upload__drop-info\">\n <span>Arraste-os aqui ou</span>\n <div class=\"upload__button\">\n <span class=\"material-icons\">cloud_upload</span>\n <span>{{replaceTexts.selectFileBtn}}</span>\n </div>\n </div>\n <span class=\"upload__info\" *ngIf=\"!allowedFiles.length\" >{{description}}</span>\n <ng-container *ngIf=\"allowedFiles.length\">\n <span class=\"upload__info\" *ngFor=\"let sf of allowedFiles;let i=index\">\n {{sf.name}} <small>({{convertSize(sf.size)}})</small>\n </span>\n </ng-container>\n <input class=\"upload__file\" type=\"file\" id=\"sel{{id}}\" (change)=\"onChange($event)\" style=\"display: none\" title=\"Select file\"\n name=\"files[]\" [accept]=\"formatsAllowed\" [attr.multiple]=\"multiple ? '' : null\" />\n</label>\n", styles: [".wco-file-upload{--color-button: var(--wco-color-primary-600);--color-button-hover: var(--wco-color-primary-700);border:2px dashed #c1c3c5;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.wco-file-upload .upload__drop-info{display:inherit;justify-content:center;align-items:center;gap:16px}.wco-file-upload .upload__button{display:inherit;justify-content:center;gap:8px;padding:10px 0}.wco-file-upload .upload__button span,.wco-file-upload .upload__button label{color:var(--color-button);cursor:pointer}.wco-file-upload .upload__file{display:none}\n"] }]
|
|
522
524
|
}], ctorParameters: function () { return [{ type: i1$1.HttpClient, decorators: [{
|
|
@@ -535,6 +537,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
|
|
|
535
537
|
}] } });
|
|
536
538
|
|
|
537
539
|
class MsgBoxFeedbackComponent {
|
|
540
|
+
/*
|
|
541
|
+
* Sombra do componente
|
|
542
|
+
* @param {boolean} shadow
|
|
543
|
+
* @default true
|
|
544
|
+
* @example true | false
|
|
545
|
+
*/
|
|
546
|
+
shadow = false;
|
|
547
|
+
/*
|
|
548
|
+
* Modo do componente
|
|
549
|
+
* @param {MsgBoxFeedbackTypes['mode']} mode
|
|
550
|
+
* @default 'fit'
|
|
551
|
+
* @example 'fit' | 'full'
|
|
552
|
+
*/
|
|
553
|
+
mode = 'fit';
|
|
538
554
|
/*
|
|
539
555
|
* Título do componente
|
|
540
556
|
* @param {MsgBoxFeedbackTypes['title']} title
|
|
@@ -559,8 +575,8 @@ class MsgBoxFeedbackComponent {
|
|
|
559
575
|
close() {
|
|
560
576
|
this.onClose.emit(true);
|
|
561
577
|
}
|
|
562
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
578
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MsgBoxFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <svg *ngIf=\"type !== 'loading'\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path *ngIf=\"type === 'error'\"\n d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z\"\n fill=\"var(--box-feedback-icon-color)\" />\n <path *ngIf=\"type === 'success'\"\n d=\"M0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM3.52322 10.8768L7.11322 14.4668C7.59915 14.9527 8.39831 14.9565 8.87783 14.4657C8.87824 14.4653 8.87865 14.4649 8.87906 14.4645L16.4668 6.87678C16.9544 6.38915 16.9544 5.60085 16.4668 5.11322C15.9791 4.62559 15.1909 4.62559 14.7032 5.11322L7.99969 11.8168L5.28678 9.11322C5.28672 9.11316 5.28666 9.1131 5.2866 9.11304C4.79895 8.62559 4.01079 8.62565 3.52322 9.11322C3.03559 9.60085 3.03559 10.3891 3.52322 10.8768Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'warning'\"\n d=\"M19.0436 15.1252L19.0436 15.1253C19.7173 16.2888 18.8771 17.75 17.53 17.75H2.47C1.12285 17.75 0.282712 16.2888 0.956356 15.1253L0.956371 15.1252L8.48636 2.11526C8.48636 2.11525 8.48637 2.11524 8.48637 2.11523C9.16008 0.951589 10.8399 0.951589 11.5136 2.11523C11.5136 2.11524 11.5136 2.11525 11.5136 2.11526L19.0436 15.1252ZM11 15.25H11.25V15V13V12.75H11H9H8.75V13V15V15.25H9H11ZM8.75 10C8.75 10.6881 9.31193 11.25 10 11.25C10.6881 11.25 11.25 10.6881 11.25 10V8C11.25 7.31193 10.6881 6.75 10 6.75C9.31193 6.75 8.75 7.31193 8.75 8V10Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'info'\"\n d=\"M11 7.25H11.25V7V5V4.75H11H9H8.75V5V7V7.25H9H11ZM0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM8.75 14C8.75 14.6881 9.31193 15.25 10 15.25C10.6881 15.25 11.25 14.6881 11.25 14V10C11.25 9.31193 10.6881 8.75 10 8.75C9.31193 8.75 8.75 9.31193 8.75 10V14Z\"\n fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n </svg>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\">\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback svg{margin:5px 10px 0 0;flex:0 0 20px}div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
564
580
|
trigger('fadeSlideInOut', [
|
|
565
581
|
transition(':enter', [
|
|
566
582
|
style({ opacity: 0, transform: 'translateY(10px)' }),
|
|
@@ -572,7 +588,7 @@ class MsgBoxFeedbackComponent {
|
|
|
572
588
|
]),
|
|
573
589
|
], encapsulation: i0.ViewEncapsulation.None });
|
|
574
590
|
}
|
|
575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MsgBoxFeedbackComponent, decorators: [{
|
|
576
592
|
type: Component,
|
|
577
593
|
args: [{ selector: 'wco-msg-box-feedback', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, animations: [
|
|
578
594
|
trigger('fadeSlideInOut', [
|
|
@@ -584,8 +600,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
|
|
|
584
600
|
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
|
|
585
601
|
]),
|
|
586
602
|
]),
|
|
587
|
-
], template: "<div [ngClass]=\"'box-feedback box-feedback-' + type\" @fadeSlideInOut>\n <svg *ngIf=\"type !== 'loading'\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path *ngIf=\"type === 'error'\"\n d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z\"\n fill=\"var(--box-feedback-icon-color)\" />\n <path *ngIf=\"type === 'success'\"\n d=\"M0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM3.52322 10.8768L7.11322 14.4668C7.59915 14.9527 8.39831 14.9565 8.87783 14.4657C8.87824 14.4653 8.87865 14.4649 8.87906 14.4645L16.4668 6.87678C16.9544 6.38915 16.9544 5.60085 16.4668 5.11322C15.9791 4.62559 15.1909 4.62559 14.7032 5.11322L7.99969 11.8168L5.28678 9.11322C5.28672 9.11316 5.28666 9.1131 5.2866 9.11304C4.79895 8.62559 4.01079 8.62565 3.52322 9.11322C3.03559 9.60085 3.03559 10.3891 3.52322 10.8768Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'warning'\"\n d=\"M19.0436 15.1252L19.0436 15.1253C19.7173 16.2888 18.8771 17.75 17.53 17.75H2.47C1.12285 17.75 0.282712 16.2888 0.956356 15.1253L0.956371 15.1252L8.48636 2.11526C8.48636 2.11525 8.48637 2.11524 8.48637 2.11523C9.16008 0.951589 10.8399 0.951589 11.5136 2.11523C11.5136 2.11524 11.5136 2.11525 11.5136 2.11526L19.0436 15.1252ZM11 15.25H11.25V15V13V12.75H11H9H8.75V13V15V15.25H9H11ZM8.75 10C8.75 10.6881 9.31193 11.25 10 11.25C10.6881 11.25 11.25 10.6881 11.25 10V8C11.25 7.31193 10.6881 6.75 10 6.75C9.31193 6.75 8.75 7.31193 8.75 8V10Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'info'\"\n d=\"M11 7.25H11.25V7V5V4.75H11H9H8.75V5V7V7.25H9H11ZM0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM8.75 14C8.75 14.6881 9.31193 15.25 10 15.25C10.6881 15.25 11.25 14.6881 11.25 14V10C11.25 9.31193 10.6881 8.75 10 8.75C9.31193 8.75 8.75 9.31193 8.75 10V14Z\"\n fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n </svg>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div>\n <
|
|
588
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
603
|
+
], template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <svg *ngIf=\"type !== 'loading'\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path *ngIf=\"type === 'error'\"\n d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z\"\n fill=\"var(--box-feedback-icon-color)\" />\n <path *ngIf=\"type === 'success'\"\n d=\"M0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM3.52322 10.8768L7.11322 14.4668C7.59915 14.9527 8.39831 14.9565 8.87783 14.4657C8.87824 14.4653 8.87865 14.4649 8.87906 14.4645L16.4668 6.87678C16.9544 6.38915 16.9544 5.60085 16.4668 5.11322C15.9791 4.62559 15.1909 4.62559 14.7032 5.11322L7.99969 11.8168L5.28678 9.11322C5.28672 9.11316 5.28666 9.1131 5.2866 9.11304C4.79895 8.62559 4.01079 8.62565 3.52322 9.11322C3.03559 9.60085 3.03559 10.3891 3.52322 10.8768Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'warning'\"\n d=\"M19.0436 15.1252L19.0436 15.1253C19.7173 16.2888 18.8771 17.75 17.53 17.75H2.47C1.12285 17.75 0.282712 16.2888 0.956356 15.1253L0.956371 15.1252L8.48636 2.11526C8.48636 2.11525 8.48637 2.11524 8.48637 2.11523C9.16008 0.951589 10.8399 0.951589 11.5136 2.11523C11.5136 2.11524 11.5136 2.11525 11.5136 2.11526L19.0436 15.1252ZM11 15.25H11.25V15V13V12.75H11H9H8.75V13V15V15.25H9H11ZM8.75 10C8.75 10.6881 9.31193 11.25 10 11.25C10.6881 11.25 11.25 10.6881 11.25 10V8C11.25 7.31193 10.6881 6.75 10 6.75C9.31193 6.75 8.75 7.31193 8.75 8V10Z\"\n fill=\"var(--box-feedback-icon-color)\" fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n <path *ngIf=\"type === 'info'\"\n d=\"M11 7.25H11.25V7V5V4.75H11H9H8.75V5V7V7.25H9H11ZM0.25 10C0.25 4.61807 4.61807 0.25 10 0.25C15.3819 0.25 19.75 4.61807 19.75 10C19.75 15.3819 15.3819 19.75 10 19.75C4.61807 19.75 0.25 15.3819 0.25 10ZM8.75 14C8.75 14.6881 9.31193 15.25 10 15.25C10.6881 15.25 11.25 14.6881 11.25 14V10C11.25 9.31193 10.6881 8.75 10 8.75C9.31193 8.75 8.75 9.31193 8.75 10V14Z\"\n fill=\"var(--box-feedback-icon-color)\" stroke-width=\"0.5\" />\n </svg>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\">\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback svg{margin:5px 10px 0 0;flex:0 0 20px}div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
|
|
604
|
+
}], ctorParameters: function () { return []; }, propDecorators: { shadow: [{
|
|
605
|
+
type: Input
|
|
606
|
+
}], mode: [{
|
|
607
|
+
type: Input
|
|
608
|
+
}], title: [{
|
|
589
609
|
type: Input
|
|
590
610
|
}], message: [{
|
|
591
611
|
type: Input
|
|
@@ -715,15 +735,15 @@ class TabsComponent {
|
|
|
715
735
|
}
|
|
716
736
|
}, timer);
|
|
717
737
|
}
|
|
718
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
738
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponent, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
739
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabsComponent, isStandalone: true, selector: "wco-navtabs", inputs: { type: "type", full: "full", selected: "selected", enabledResponsive: ["enabled-responsive", "enabledResponsive"], setListOptions: ["listOptions", "setListOptions"], noBorder: ["no-border", "noBorder"] }, outputs: { handleClick: "handleClick" }, viewQueries: [{ propertyName: "navTabs", first: true, predicate: ["navTabs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n <nav \n class=\"wco-navtabs\" \n #navTabs role=\"navigation\"\n [class.no-border]=\"noBorder\" \n [class.navTabs-full]=\"full\"\n [class.navTabs-mobile]=\"!isMobile\"\n>\n <ng-container *ngFor=\"let link of links\">\n <ng-container *ngIf=\"link.type === 'link'\">\n <button \n (click)=\"eventSubmit()\" \n [class.color-to-nav]=\"type === 'nav'\"\n [routerLink]=\"link.path\" routerLinkActive=\"active\" [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n</nav>\n", styles: ["wco-navtabs{width:100%;overflow:auto;display:block}@media screen and (max-width: 600px){wco-navtabs{overflow:auto;white-space:nowrap;max-width:100vw}wco-navtabs::-webkit-scrollbar{display:none}}.wco-navtabs{--leftActive: 50px;--widthActive: 0px;--navtabs-gapLine: var(--wco-spacing-nano);--navtabs-gap: 0;--navtab-color-selected: var(--wco-color-primary-600);--navtabs-underline-height: 3px;display:inline-flex;position:relative;gap:var(--navtabs-gap);height:100%;border-bottom:1px solid var(--wco-color-neutral-100);scroll-behavior:smooth}.wco-navtabs.navTabs-mobile:before{display:none}.wco-navtabs.navTabs-mobile button.active{border-bottom:3px solid var(--wco-color-primary-600)}.wco-navtabs.navTabs-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.wco-navtabs.navTabs-full>button{width:100%}.wco-navtabs.no-border{border-bottom:none!important}@media (max-width: 900px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxxs);--navtabs-gap: var(--wco-spacing-xxs)}}@media (max-width: 600px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxs)}}.wco-navtabs:before{content:\"\";width:var(--widthActive);height:var(--navtabs-underline-height);background-color:var(--navtab-color-selected);position:absolute;bottom:0;left:0;transform:translate(var(--leftActive));transition:transform .15s cubic-bezier(.645,.045,.355,1),width .1s linear}.wco-navtabs button{background-color:transparent;border:none;font-size:var(--wco-font-size-md);font-weight:400;min-height:48px;padding:var(--wco-spacing-nano) var(--wco-spacing-xxs) var(--navtabs-gapLine) var(--wco-spacing-xxs);display:flex;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;color:var(--wco-color-neutral-900);letter-spacing:.5px}.wco-navtabs button:hover:not(:disabled){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer;border-radius:var(--wco-spacing-nano) var(--wco-spacing-nano) 0 0}@media (max-width: 600px){.wco-navtabs button{font-size:var(--wco-font-size-xs);min-height:30px}}.wco-navtabs button:disabled{cursor:not-allowed;color:var(--wco-color-neutral-900)}.wco-navtabs button.color-to-nav{font-weight:700}.wco-navtabs button.active{font-weight:700;letter-spacing:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
720
740
|
}
|
|
721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabsComponent, decorators: [{
|
|
722
742
|
type: Component,
|
|
723
743
|
args: [{ selector: 'wco-navtabs', standalone: true, imports: [
|
|
724
744
|
CommonModule,
|
|
725
745
|
RouterModule
|
|
726
|
-
], encapsulation: ViewEncapsulation.None, template: "\n <nav \n class=\"wco-navtabs\" \n #navTabs role=\"navigation\"\n [class.no-border]=\"noBorder\" \n [class.navTabs-full]=\"full\"\n [class.navTabs-mobile]=\"!isMobile\"\n>\n <ng-container *ngFor=\"let link of links\">\n <ng-container *ngIf=\"link.type === 'link'\">\n <button \n (click)=\"eventSubmit()\" \n [class.color-to-nav]=\"type === 'nav'\"\n [routerLink]=\"link.path\" routerLinkActive=\"active\" [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n</nav>\n", styles: ["wco-navtabs{width:100%;overflow:auto;display:block}@media screen and (max-width: 600px){wco-navtabs{overflow:auto;white-space:nowrap;max-width:100vw}wco-navtabs::-webkit-scrollbar{display:none}}.wco-navtabs{--leftActive: 50px;--widthActive: 0px;--navtabs-gapLine: var(--wco-spacing-nano);--navtabs-gap: 0;--navtab-color-selected: var(--wco-color-primary-600);--navtabs-underline-height: 3px;display:inline-flex;position:relative;gap:var(--navtabs-gap);height:100%;border-bottom:1px solid var(--wco-color-neutral-100);scroll-behavior:smooth}.wco-navtabs.navTabs-mobile:before{display:none}.wco-navtabs.navTabs-mobile button.active{border-bottom:3px solid var(--wco-color-primary-600)}.wco-navtabs.navTabs-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.wco-navtabs.navTabs-full>button{width:100%}.wco-navtabs.no-border{border-bottom:none!important}@media (max-width: 900px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxxs);--navtabs-gap: var(--wco-spacing-xxs)}}@media (max-width: 600px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxs)}}.wco-navtabs:before{content:\"\";width:var(--widthActive);height:var(--navtabs-underline-height);background-color:var(--navtab-color-selected);position:absolute;bottom:0;left:0;transform:translate(var(--leftActive));transition:transform .15s cubic-bezier(.645,.045,.355,1),width .1s linear}.wco-navtabs button{background-color:transparent;border:none;font-size:var(--wco-font-size-md);font-weight:
|
|
746
|
+
], encapsulation: ViewEncapsulation.None, template: "\n <nav \n class=\"wco-navtabs\" \n #navTabs role=\"navigation\"\n [class.no-border]=\"noBorder\" \n [class.navTabs-full]=\"full\"\n [class.navTabs-mobile]=\"!isMobile\"\n>\n <ng-container *ngFor=\"let link of links\">\n <ng-container *ngIf=\"link.type === 'link'\">\n <button \n (click)=\"eventSubmit()\" \n [class.color-to-nav]=\"type === 'nav'\"\n [routerLink]=\"link.path\" routerLinkActive=\"active\" [attr.id]=\"'page-' + link.path\"\n >\n {{ link.name }}\n </button>\n </ng-container>\n </ng-container>\n <ng-content></ng-content>\n</nav>\n", styles: ["wco-navtabs{width:100%;overflow:auto;display:block}@media screen and (max-width: 600px){wco-navtabs{overflow:auto;white-space:nowrap;max-width:100vw}wco-navtabs::-webkit-scrollbar{display:none}}.wco-navtabs{--leftActive: 50px;--widthActive: 0px;--navtabs-gapLine: var(--wco-spacing-nano);--navtabs-gap: 0;--navtab-color-selected: var(--wco-color-primary-600);--navtabs-underline-height: 3px;display:inline-flex;position:relative;gap:var(--navtabs-gap);height:100%;border-bottom:1px solid var(--wco-color-neutral-100);scroll-behavior:smooth}.wco-navtabs.navTabs-mobile:before{display:none}.wco-navtabs.navTabs-mobile button.active{border-bottom:3px solid var(--wco-color-primary-600)}.wco-navtabs.navTabs-full{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr))}.wco-navtabs.navTabs-full>button{width:100%}.wco-navtabs.no-border{border-bottom:none!important}@media (max-width: 900px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxxs);--navtabs-gap: var(--wco-spacing-xxs)}}@media (max-width: 600px){.wco-navtabs{--navtabs-gapLine: var(--wco-spacing-xxs)}}.wco-navtabs:before{content:\"\";width:var(--widthActive);height:var(--navtabs-underline-height);background-color:var(--navtab-color-selected);position:absolute;bottom:0;left:0;transform:translate(var(--leftActive));transition:transform .15s cubic-bezier(.645,.045,.355,1),width .1s linear}.wco-navtabs button{background-color:transparent;border:none;font-size:var(--wco-font-size-md);font-weight:400;min-height:48px;padding:var(--wco-spacing-nano) var(--wco-spacing-xxs) var(--navtabs-gapLine) var(--wco-spacing-xxs);display:flex;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:center;color:var(--wco-color-neutral-900);letter-spacing:.5px}.wco-navtabs button:hover:not(:disabled){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer;border-radius:var(--wco-spacing-nano) var(--wco-spacing-nano) 0 0}@media (max-width: 600px){.wco-navtabs button{font-size:var(--wco-font-size-xs);min-height:30px}}.wco-navtabs button:disabled{cursor:not-allowed;color:var(--wco-color-neutral-900)}.wco-navtabs button.color-to-nav{font-weight:700}.wco-navtabs button.active{font-weight:700;letter-spacing:0px}\n"] }]
|
|
727
747
|
}], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i0.ElementRef }]; }, propDecorators: { navTabs: [{
|
|
728
748
|
type: ViewChild,
|
|
729
749
|
args: ['navTabs']
|
|
@@ -824,7 +844,7 @@ class PaginationComponent {
|
|
|
824
844
|
* Voltar para a página anterior
|
|
825
845
|
*/
|
|
826
846
|
previousPage() {
|
|
827
|
-
if (this.currenPage
|
|
847
|
+
if (this.currenPage >= 2) {
|
|
828
848
|
this.currenPage -= 1;
|
|
829
849
|
this.changePage.emit(this.currenPage);
|
|
830
850
|
}
|
|
@@ -836,12 +856,13 @@ class PaginationComponent {
|
|
|
836
856
|
*/
|
|
837
857
|
out(i) {
|
|
838
858
|
this.currenPage = parseInt(`${i}`, 10);
|
|
859
|
+
console.log(i, this.currenPage);
|
|
839
860
|
this.changePage.emit(i);
|
|
840
861
|
}
|
|
841
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.
|
|
862
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
863
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, isStandalone: true, selector: "wco-pagination", inputs: { totalPage: "totalPage", currenPage: "currenPage", mode: "mode" }, outputs: { changePage: "changePage" }, ngImport: i0, template: "<div class=\"pagination\"\n *ngIf=\"!!totalPage && totalPage >= 2\"\n ngClass=\"pagination-{{mode}}\"\n>\n\n <ng-container *ngIf=\"mode === 'simple'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button class=\"active\">{{currenPage}}</button>\n <span>/</span>\n <button>{{totalPage}}</button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"mode === 'default'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button *ngFor=\"let i of pagination()\" [ngClass]=\"{ \n active: currenPage === i,\n disable: i === '...'\n }\" (click)=\"out(i)\">\n {{ i }}\n </button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n</div>\n\n", styles: [".pagination{--wco-paginator-size: 32px;--wco-paginator-border-radius: var(--wco-radius-sm);--wco-paginator-color: var(--wco-color-primary-900);--wco-paginator-bg: transparent;display:flex;gap:var(--wco-spacing-nano);justify-content:center;align-items:center}.pagination.pagination-simple{gap:var(--wco-spacing-quark);--wco-paginator-size: 26px;--wco-paginator-padding: 0 var(--wco-spacing-quark)}.pagination.pagination-simple>span{color:var(--wco-color-neutral-500)}.pagination button{border:0px solid transparent;display:flex;justify-content:center;align-items:center;background-color:transparent;transition:all .2s ease-in-out;color:var(--wco-color-primary-900);min-width:var(--wco-paginator-size, 32px);min-height:var(--wco-paginator-size, 32px);border-radius:var(--wco-paginator-border-radius);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:var(--wco-paginator-fontweight);letter-spacing:var(--wco-paginator-letterspacing);padding:var(--wco-paginator-padding, 0)}.pagination button:hover:not(.active){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer}.pagination button:focus-within{outline:none;box-shadow:inset 0 0 0 2px var(--wco-color-primary-700)}.pagination button.last-button svg{transform:scale(-1)}.pagination button.disable{cursor:default;color:#999;pointer-events:none}.pagination button.disable svg path{fill:var(--wco-color-neutral-300)}.pagination .active{background-color:var(--wco-color-primary-600);color:var(--wco-color-neutral-50)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
843
864
|
}
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
845
866
|
type: Component,
|
|
846
867
|
args: [{ selector: 'wco-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pagination\"\n *ngIf=\"!!totalPage && totalPage >= 2\"\n ngClass=\"pagination-{{mode}}\"\n>\n\n <ng-container *ngIf=\"mode === 'simple'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button class=\"active\">{{currenPage}}</button>\n <span>/</span>\n <button>{{totalPage}}</button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"mode === 'default'\">\n <button (click)=\"previousPage()\" [ngClass]=\"{ disable: currenPage === 1 }\" title=\"P\u00E1gina anterior\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n <button *ngFor=\"let i of pagination()\" [ngClass]=\"{ \n active: currenPage === i,\n disable: i === '...'\n }\" (click)=\"out(i)\">\n {{ i }}\n </button>\n <button (click)=\"nextPage()\" class=\"last-button\" [ngClass]=\"{ disable: currenPage === totalPage }\"\n title=\"Proxima P\u00E1gina\">\n <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.00002 9.87498L3.12002 5.99498L7.00002 2.11498C7.39002 1.72498 7.39002 1.09498 7.00002 0.704976C6.61002 0.314976 5.98002 0.314976 5.59002 0.704976L1.00002 5.29498C0.61002 5.68498 0.61002 6.31498 1.00002 6.70498L5.59002 11.295C5.98002 11.685 6.61002 11.685 7.00002 11.295C7.38002 10.905 7.39002 10.265 7.00002 9.87498Z\"\n fill=\"var(--wco-color-primary-600)\" />\n </svg>\n </button>\n </ng-container>\n\n\n\n</div>\n\n", styles: [".pagination{--wco-paginator-size: 32px;--wco-paginator-border-radius: var(--wco-radius-sm);--wco-paginator-color: var(--wco-color-primary-900);--wco-paginator-bg: transparent;display:flex;gap:var(--wco-spacing-nano);justify-content:center;align-items:center}.pagination.pagination-simple{gap:var(--wco-spacing-quark);--wco-paginator-size: 26px;--wco-paginator-padding: 0 var(--wco-spacing-quark)}.pagination.pagination-simple>span{color:var(--wco-color-neutral-500)}.pagination button{border:0px solid transparent;display:flex;justify-content:center;align-items:center;background-color:transparent;transition:all .2s ease-in-out;color:var(--wco-color-primary-900);min-width:var(--wco-paginator-size, 32px);min-height:var(--wco-paginator-size, 32px);border-radius:var(--wco-paginator-border-radius);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:var(--wco-paginator-fontweight);letter-spacing:var(--wco-paginator-letterspacing);padding:var(--wco-paginator-padding, 0)}.pagination button:hover:not(.active){background-color:var(--wco-color-primary-50);color:var(--wco-color-primary-700);cursor:pointer}.pagination button:focus-within{outline:none;box-shadow:inset 0 0 0 2px var(--wco-color-primary-700)}.pagination button.last-button svg{transform:scale(-1)}.pagination button.disable{cursor:default;color:#999;pointer-events:none}.pagination button.disable svg path{fill:var(--wco-color-neutral-300)}.pagination .active{background-color:var(--wco-color-primary-600);color:var(--wco-color-neutral-50)}\n"] }]
|
|
847
868
|
}], propDecorators: { changePage: [{
|
|
@@ -854,6 +875,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
|
|
|
854
875
|
type: Input
|
|
855
876
|
}] } });
|
|
856
877
|
|
|
878
|
+
class SmartSelectOptionComponent {
|
|
879
|
+
el;
|
|
880
|
+
sanitizer;
|
|
881
|
+
value;
|
|
882
|
+
label;
|
|
883
|
+
iconPrefix;
|
|
884
|
+
disabled = false;
|
|
885
|
+
viewOnly = false;
|
|
886
|
+
safeHtmlContent;
|
|
887
|
+
constructor(el, sanitizer) {
|
|
888
|
+
this.el = el;
|
|
889
|
+
this.sanitizer = sanitizer;
|
|
890
|
+
}
|
|
891
|
+
ngAfterViewInit() {
|
|
892
|
+
const rawHtmlContent = this.el.nativeElement.innerHTML.trim();
|
|
893
|
+
this.safeHtmlContent =
|
|
894
|
+
rawHtmlContent.length > 0
|
|
895
|
+
? this.sanitizer.bypassSecurityTrustHtml(rawHtmlContent)
|
|
896
|
+
: undefined;
|
|
897
|
+
}
|
|
898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
899
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartSelectOptionComponent, isStandalone: true, selector: "wco-smart-select-option", inputs: { value: "value", label: "label", iconPrefix: "iconPrefix", disabled: "disabled", viewOnly: "viewOnly" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
900
|
+
}
|
|
901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectOptionComponent, decorators: [{
|
|
902
|
+
type: Component,
|
|
903
|
+
args: [{
|
|
904
|
+
selector: 'wco-smart-select-option',
|
|
905
|
+
standalone: true,
|
|
906
|
+
imports: [CommonModule],
|
|
907
|
+
template: '<ng-content></ng-content>',
|
|
908
|
+
encapsulation: ViewEncapsulation.None,
|
|
909
|
+
}]
|
|
910
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.DomSanitizer }]; }, propDecorators: { value: [{
|
|
911
|
+
type: Input
|
|
912
|
+
}], label: [{
|
|
913
|
+
type: Input
|
|
914
|
+
}], iconPrefix: [{
|
|
915
|
+
type: Input
|
|
916
|
+
}], disabled: [{
|
|
917
|
+
type: Input
|
|
918
|
+
}], viewOnly: [{
|
|
919
|
+
type: Input
|
|
920
|
+
}] } });
|
|
921
|
+
|
|
922
|
+
class SmartSelectComponent {
|
|
923
|
+
el;
|
|
924
|
+
options;
|
|
925
|
+
onChange = new EventEmitter();
|
|
926
|
+
/* Id do elemento */
|
|
927
|
+
inputId = 'select_' + Math.random().toString(36).substring(2);
|
|
928
|
+
/* Attr name do elemento */
|
|
929
|
+
inputName;
|
|
930
|
+
IconMaterial = 'arrow_drop_down';
|
|
931
|
+
/* Placeholder do select */
|
|
932
|
+
placeholder = 'Selecione uma opção';
|
|
933
|
+
/* Label do select */
|
|
934
|
+
label = ' ';
|
|
935
|
+
showSearch = false;
|
|
936
|
+
/* Texto exibido quando não há resultados */
|
|
937
|
+
textEmpty = 'Não há resultados para a busca';
|
|
938
|
+
/* habilitar opção de multiplas seleções */
|
|
939
|
+
multiSelect = false;
|
|
940
|
+
/* Limitar visualização de itens selecionados */
|
|
941
|
+
showMaxSelectedLabel = 0;
|
|
942
|
+
/* Tipos pré definidos de checkbox, radio ou null */
|
|
943
|
+
typePrefix = null;
|
|
944
|
+
isMobile = window.innerWidth <= 768;
|
|
945
|
+
formValue;
|
|
946
|
+
isFocused = false;
|
|
947
|
+
preventEscapeFocus = false;
|
|
948
|
+
autocompleteControl = new FormControl();
|
|
949
|
+
filteredOptions = [];
|
|
950
|
+
showList = false;
|
|
951
|
+
constructor(el) {
|
|
952
|
+
this.el = el;
|
|
953
|
+
}
|
|
954
|
+
onTouched = () => {
|
|
955
|
+
this.isFocused = true;
|
|
956
|
+
};
|
|
957
|
+
/// estados do control
|
|
958
|
+
ngOnInit() { }
|
|
959
|
+
writeValue(obj) {
|
|
960
|
+
this.formValue = obj;
|
|
961
|
+
this.autocompleteControl.setValue(obj);
|
|
962
|
+
}
|
|
963
|
+
registerOnChange(fn) {
|
|
964
|
+
this.autocompleteControl.valueChanges.subscribe((value) => {
|
|
965
|
+
fn(value);
|
|
966
|
+
});
|
|
967
|
+
}
|
|
968
|
+
registerOnTouched(fn) {
|
|
969
|
+
this.onTouched = fn;
|
|
970
|
+
}
|
|
971
|
+
validate(_control) {
|
|
972
|
+
if (this.multiSelect) {
|
|
973
|
+
if (this.formValue?.length) {
|
|
974
|
+
return null;
|
|
975
|
+
}
|
|
976
|
+
return { required: true };
|
|
977
|
+
}
|
|
978
|
+
if (this.formValue) {
|
|
979
|
+
return null;
|
|
980
|
+
}
|
|
981
|
+
return { required: true };
|
|
982
|
+
}
|
|
983
|
+
setDisabledState(isDisabled) {
|
|
984
|
+
if (isDisabled) {
|
|
985
|
+
this.autocompleteControl.disable();
|
|
986
|
+
}
|
|
987
|
+
else {
|
|
988
|
+
this.autocompleteControl.enable();
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
/// Abertura e fechamento da lista
|
|
992
|
+
onFocusIn(focus = false) {
|
|
993
|
+
this.renderBoxOptions();
|
|
994
|
+
this.autocompleteControl.markAsTouched();
|
|
995
|
+
this.onTouched();
|
|
996
|
+
this.isFocused = focus;
|
|
997
|
+
this.showList = focus;
|
|
998
|
+
this.positionBox();
|
|
999
|
+
}
|
|
1000
|
+
/// here function to position box element top or bottom
|
|
1001
|
+
positionBox() {
|
|
1002
|
+
if (this.isMobile) {
|
|
1003
|
+
return;
|
|
1004
|
+
}
|
|
1005
|
+
const componentBox = this.el.nativeElement;
|
|
1006
|
+
if (!componentBox) {
|
|
1007
|
+
return;
|
|
1008
|
+
}
|
|
1009
|
+
const componentBoxPosition = componentBox.getBoundingClientRect();
|
|
1010
|
+
const inputId = componentBox.querySelector('.form-field');
|
|
1011
|
+
const box = componentBox.querySelector('.wco-smartSelect--box');
|
|
1012
|
+
const inputIdPosition = inputId.getBoundingClientRect().height;
|
|
1013
|
+
const pageHeight = window.innerHeight;
|
|
1014
|
+
if (box && componentBoxPosition.y + 320 >= pageHeight) {
|
|
1015
|
+
box.style.bottom = inputIdPosition + 'px';
|
|
1016
|
+
box.style.height = `var(--wco-smart-select-box-max-height)`;
|
|
1017
|
+
box.style.top = 'initial';
|
|
1018
|
+
}
|
|
1019
|
+
else {
|
|
1020
|
+
box.style.top = inputIdPosition + 'px';
|
|
1021
|
+
box.style.bottom = 'initial';
|
|
1022
|
+
box.style.height = `auto`;
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1025
|
+
onSelect(option) {
|
|
1026
|
+
if (option.disabled || option.viewOnly) {
|
|
1027
|
+
return;
|
|
1028
|
+
}
|
|
1029
|
+
const oldValue = this.formValue;
|
|
1030
|
+
if (this.multiSelect) {
|
|
1031
|
+
if (this.formValue?.includes(option.value)) {
|
|
1032
|
+
this.formValue = this.formValue.filter((item) => item !== option.value);
|
|
1033
|
+
this.autocompleteControl.setValue(this.formValue);
|
|
1034
|
+
this.renderBoxOptions();
|
|
1035
|
+
return;
|
|
1036
|
+
}
|
|
1037
|
+
// is Array []
|
|
1038
|
+
if (!!this.formValue === false) {
|
|
1039
|
+
this.formValue = [];
|
|
1040
|
+
this.autocompleteControl.setValue(this.formValue);
|
|
1041
|
+
}
|
|
1042
|
+
this.formValue = [...this.formValue, option.value];
|
|
1043
|
+
this.autocompleteControl.setValue(this.formValue);
|
|
1044
|
+
}
|
|
1045
|
+
else {
|
|
1046
|
+
this.formValue = option.value;
|
|
1047
|
+
this.autocompleteControl.setValue(option.value);
|
|
1048
|
+
}
|
|
1049
|
+
if (!this.multiSelect) {
|
|
1050
|
+
this.showList = false;
|
|
1051
|
+
}
|
|
1052
|
+
if (oldValue !== this.formValue) {
|
|
1053
|
+
this.onChange.emit({ type: 'updateValue', value: this.formValue });
|
|
1054
|
+
}
|
|
1055
|
+
}
|
|
1056
|
+
// Show label span
|
|
1057
|
+
get selectedLabel() {
|
|
1058
|
+
const selectedOption = this.options?.find((option) => this.normalizeText(String(option.value)) ===
|
|
1059
|
+
this.normalizeText(String(this.formValue)));
|
|
1060
|
+
return selectedOption?.label || ' ';
|
|
1061
|
+
}
|
|
1062
|
+
// show label multi select
|
|
1063
|
+
get selectedLabelMulti() {
|
|
1064
|
+
const selectedOptions = this.options?.filter((option) => this.formValue?.includes(option.value));
|
|
1065
|
+
if (!selectedOptions?.length) {
|
|
1066
|
+
return [];
|
|
1067
|
+
}
|
|
1068
|
+
if (!this.showMaxSelectedLabel) {
|
|
1069
|
+
return selectedOptions;
|
|
1070
|
+
}
|
|
1071
|
+
if (this.showMaxSelectedLabel && selectedOptions.length > this.showMaxSelectedLabel) {
|
|
1072
|
+
return selectedOptions.slice(0, this.showMaxSelectedLabel);
|
|
1073
|
+
}
|
|
1074
|
+
return selectedOptions;
|
|
1075
|
+
}
|
|
1076
|
+
get selectedLabelMultiCount() {
|
|
1077
|
+
const show = this.showMaxSelectedLabel || 0;
|
|
1078
|
+
const selectedOptions = this.options?.filter((option) => this.formValue?.includes(option.value));
|
|
1079
|
+
console.log('selectedOptions', selectedOptions);
|
|
1080
|
+
console.log('show', show);
|
|
1081
|
+
if (!selectedOptions?.length) {
|
|
1082
|
+
return 0;
|
|
1083
|
+
}
|
|
1084
|
+
if (show > 0 && selectedOptions.length > show) {
|
|
1085
|
+
return selectedOptions.length - show;
|
|
1086
|
+
}
|
|
1087
|
+
return 0;
|
|
1088
|
+
}
|
|
1089
|
+
removeItem(option) {
|
|
1090
|
+
this.onSelect(option);
|
|
1091
|
+
setTimeout(() => {
|
|
1092
|
+
this.showList = false;
|
|
1093
|
+
}, 100);
|
|
1094
|
+
}
|
|
1095
|
+
onKeyPress(event) {
|
|
1096
|
+
event.preventDefault();
|
|
1097
|
+
this.renderBoxOptions();
|
|
1098
|
+
}
|
|
1099
|
+
onFilter(event) {
|
|
1100
|
+
const value = event.target.value;
|
|
1101
|
+
if (!value) {
|
|
1102
|
+
this.renderBoxOptions();
|
|
1103
|
+
return;
|
|
1104
|
+
}
|
|
1105
|
+
if (this.filteredOptions.length) {
|
|
1106
|
+
this.renderBoxOptions(value);
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
onResize() {
|
|
1110
|
+
this.renderBoxOptions();
|
|
1111
|
+
this.positionBox();
|
|
1112
|
+
}
|
|
1113
|
+
onFocusOut() {
|
|
1114
|
+
if (!this.preventEscapeFocus && !this.isMobile) {
|
|
1115
|
+
this.isFocused = false;
|
|
1116
|
+
this.showList = false;
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
closeList() {
|
|
1120
|
+
this.preventEscapeFocus = true;
|
|
1121
|
+
this.isFocused = false;
|
|
1122
|
+
this.showList = false;
|
|
1123
|
+
}
|
|
1124
|
+
selectedValue(option) {
|
|
1125
|
+
if (this.multiSelect) {
|
|
1126
|
+
return this.formValue?.includes(option.value);
|
|
1127
|
+
}
|
|
1128
|
+
return option.value === this.formValue;
|
|
1129
|
+
}
|
|
1130
|
+
renderBoxOptions(filterValue = null) {
|
|
1131
|
+
if (!this.options || !this.options.length) {
|
|
1132
|
+
return;
|
|
1133
|
+
}
|
|
1134
|
+
this.filteredOptions = this.options
|
|
1135
|
+
?.map((option) => {
|
|
1136
|
+
return {
|
|
1137
|
+
value: option.value,
|
|
1138
|
+
iconPrefix: option.iconPrefix,
|
|
1139
|
+
htmlLabel: option.safeHtmlContent || option.label,
|
|
1140
|
+
disabled: option.disabled,
|
|
1141
|
+
viewOnly: option.viewOnly,
|
|
1142
|
+
};
|
|
1143
|
+
})
|
|
1144
|
+
.filter((option) => {
|
|
1145
|
+
if (!filterValue) {
|
|
1146
|
+
return true;
|
|
1147
|
+
}
|
|
1148
|
+
const normalizedFilter = this.normalizeText(filterValue);
|
|
1149
|
+
const normalizedLabel = this.normalizeText(option.htmlLabel?.toString() || '');
|
|
1150
|
+
return normalizedLabel.includes(normalizedFilter);
|
|
1151
|
+
});
|
|
1152
|
+
}
|
|
1153
|
+
normalizeText(text) {
|
|
1154
|
+
return text
|
|
1155
|
+
.replace(/[\W_]+/g, '') // Remove caracteres especiais e sublinhados
|
|
1156
|
+
.toLowerCase();
|
|
1157
|
+
}
|
|
1158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showSearch: "showSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix" }, outputs: { onChange: "onChange" }, providers: [
|
|
1160
|
+
{
|
|
1161
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1162
|
+
useExisting: forwardRef(() => SmartSelectComponent),
|
|
1163
|
+
multi: true,
|
|
1164
|
+
},
|
|
1165
|
+
{
|
|
1166
|
+
provide: NG_VALIDATORS,
|
|
1167
|
+
useExisting: SmartSelectComponent,
|
|
1168
|
+
multi: true,
|
|
1169
|
+
},
|
|
1170
|
+
], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1171
|
+
}
|
|
1172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, decorators: [{
|
|
1173
|
+
type: Component,
|
|
1174
|
+
args: [{ selector: 'wco-smart-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
|
|
1175
|
+
{
|
|
1176
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1177
|
+
useExisting: forwardRef(() => SmartSelectComponent),
|
|
1178
|
+
multi: true,
|
|
1179
|
+
},
|
|
1180
|
+
{
|
|
1181
|
+
provide: NG_VALIDATORS,
|
|
1182
|
+
useExisting: SmartSelectComponent,
|
|
1183
|
+
multi: true,
|
|
1184
|
+
},
|
|
1185
|
+
], template: "<div\n class=\"wco-smartSelect\"\n [ngClass]=\"{\n 'wco-smartSelect--open': showList,\n 'wco-smartSelect--isMobile': isMobile,\n}\"\n (resize)=\"onResize()\"\n (mouseleave)=\"onFocusOut()\"\n>\n <div class=\"form-field\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\n [ngClass]=\"{\n 'form-field--error':\n autocompleteControl.invalid && autocompleteControl.touched\n }\"\n [disabled]=\"autocompleteControl.disabled\"\n id=\"{{ inputId ? inputId : '' }}\"\n name=\"{{ inputName ? inputName : '' }}\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n (keypress)=\"onKeyPress($event)\"\n [placeholder]=\"placeholder\"\n type=\"text\"\n [value]=\"selectedLabel\"\n aria-label=\"Selecione uma op\u00E7\u00E3o\"\n />\n <div\n *ngIf=\"multiSelect\"\n class=\"form-field__input readonly multiSelect\"\n [ngClass]=\"{\n 'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n 'form-field--disabled': autocompleteControl.disabled,\n }\"\n (click)=\"onFocusIn(true)\"\n (focusin)=\"onFocusIn()\"\n (keyup.escape)=\"onFocusOut()\"\n >\n <ng-container *ngIf=\"!selectedLabelMulti.length\">\n <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n </ng-container>\n <ng-container *ngIf=\"selectedLabelMulti.length\">\n <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n {{optionSelected.label}} \n <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n <span class=\"material-icons\">close</span>\n </span>\n </span>\n <span class=\"wco-smart-select-item\" *ngIf=\"selectedLabelMultiCount >= 1\">\n +{{selectedLabelMultiCount}} \n </span>\n </ng-container>\n </div>\n <label>{{ label }}</label>\n <span class=\"material-icons\">{{ IconMaterial }}</span>\n </div>\n <div\n class=\"wco-smartSelect--box\"\n [ngClass]=\"{\n 'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n }\"\n >\n <div class=\"wco-smartSelect--isMobile-close\">\n <button\n (click)=\"closeList()\"\n class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n >\n fechar\n </button>\n </div>\n <ul>\n <li\n tabindex=\"0\"\n class=\"wco-smart-selected-filter\"\n *ngIf=\"showList && showSearch\"\n >\n <input\n placeholder=\"buscar\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Search through site content\"\n type=\"text\"\n />\n </li>\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [tabindex]=\"i + 1\"\n [ngClass]=\"{\n 'wco-smart-selected': selectedValue(option),\n 'wc-smart-select-disabled-option': option.disabled,\n 'wc-smart-select-view-only-option': option.viewOnly,\n }\"\n (click)=\"onSelect(option)\"\n >\n <span class=\"wco-smart-select-label-prefix\">\n <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n }}\n </span>\n </ng-container>\n <ng-container *ngIf=\"typePrefix === 'radio'\">\n <span class=\"material-icons-outlined\">\n {{\n selectedValue(option)\n ? \"radio_button_checked\"\n : \"radio_button_unchecked\"\n }}\n </span>\n </ng-container>\n <ng-container\n *ngIf=\"\n !!option.iconPrefix &&\n typePrefix !== 'radio' &&\n typePrefix !== 'checkbox'\n \"\n >\n <span class=\"material-icons-outlined\">\n {{ option.iconPrefix }}\n </span>\n </ng-container>\n </span>\n <span\n class=\"wco-smart-select-label\"\n [innerHTML]=\"option.htmlLabel\"\n ></span>\n </li>\n <li *ngIf=\"!filteredOptions.length\">\n <p class=\"display-body\">{{ textEmpty }}</p>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
|
|
1186
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
1187
|
+
type: ContentChildren,
|
|
1188
|
+
args: [SmartSelectOptionComponent]
|
|
1189
|
+
}], onChange: [{
|
|
1190
|
+
type: Output
|
|
1191
|
+
}], inputId: [{
|
|
1192
|
+
type: Input
|
|
1193
|
+
}], inputName: [{
|
|
1194
|
+
type: Input
|
|
1195
|
+
}], IconMaterial: [{
|
|
1196
|
+
type: Input
|
|
1197
|
+
}], placeholder: [{
|
|
1198
|
+
type: Input
|
|
1199
|
+
}], label: [{
|
|
1200
|
+
type: Input
|
|
1201
|
+
}], showSearch: [{
|
|
1202
|
+
type: Input
|
|
1203
|
+
}], textEmpty: [{
|
|
1204
|
+
type: Input
|
|
1205
|
+
}], multiSelect: [{
|
|
1206
|
+
type: Input
|
|
1207
|
+
}], showMaxSelectedLabel: [{
|
|
1208
|
+
type: Input
|
|
1209
|
+
}], typePrefix: [{
|
|
1210
|
+
type: Input
|
|
1211
|
+
}] } });
|
|
1212
|
+
|
|
857
1213
|
/*
|
|
858
1214
|
* Public API Surface of ngx-fenixds
|
|
859
1215
|
*/
|
|
@@ -862,5 +1218,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
|
|
|
862
1218
|
* Generated bundle index. Do not edit.
|
|
863
1219
|
*/
|
|
864
1220
|
|
|
865
|
-
export { MsgBoxFeedbackComponent, PaginationComponent, StepComponent, StepperComponent, TabsComponent, UploadComponent };
|
|
1221
|
+
export { MsgBoxFeedbackComponent, PaginationComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, UploadComponent };
|
|
866
1222
|
//# sourceMappingURL=wizco-fenixds-ngx.mjs.map
|