keevo-components 2.0.45 → 2.0.47
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/api/components/step/step.model.mjs +2 -0
- package/esm2022/lib/components/kv-pick-list/kv-pick-list.component.mjs +247 -19
- package/esm2022/lib/components/kv-steps/kv-steps.component.mjs +105 -0
- package/esm2022/public-api.mjs +5 -1
- package/fesm2022/keevo-components.mjs +347 -19
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/api/components/step/step.model.d.ts +13 -0
- package/lib/components/kv-pick-list/kv-pick-list.component.d.ts +20 -1
- package/lib/components/kv-steps/kv-steps.component.d.ts +21 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
|
@@ -7067,15 +7067,15 @@ class KvPickListComponent {
|
|
|
7067
7067
|
constructor(fb) {
|
|
7068
7068
|
this.fb = fb;
|
|
7069
7069
|
this.itemIdField = 'id';
|
|
7070
|
-
this.breakpoint = "1400px";
|
|
7071
|
-
this.dragdrop = true;
|
|
7072
|
-
this.responsive = true;
|
|
7070
|
+
this.breakpoint = "1400px";
|
|
7071
|
+
this.dragdrop = true;
|
|
7072
|
+
this.responsive = true;
|
|
7073
7073
|
this.sourceHeader = 'Título da lista de origem';
|
|
7074
|
-
this.stripedRows = false;
|
|
7074
|
+
this.stripedRows = false;
|
|
7075
7075
|
this.targetHeader = 'Título de lista de destino';
|
|
7076
|
-
this.showSourceControls = true;
|
|
7077
|
-
this.showTargetControls = true;
|
|
7078
|
-
this.showCheckBox = false;
|
|
7076
|
+
this.showSourceControls = true;
|
|
7077
|
+
this.showTargetControls = true;
|
|
7078
|
+
this.showCheckBox = false;
|
|
7079
7079
|
this.onMoveToSource = new EventEmitter();
|
|
7080
7080
|
this.onMoveToTarget = new EventEmitter();
|
|
7081
7081
|
this.onMoveAllToSource = new EventEmitter();
|
|
@@ -7084,52 +7084,283 @@ class KvPickListComponent {
|
|
|
7084
7084
|
this.onTargetSelect = new EventEmitter();
|
|
7085
7085
|
this.ngModel = false;
|
|
7086
7086
|
this.selectedItems = {};
|
|
7087
|
-
|
|
7088
|
-
|
|
7089
|
-
|
|
7090
|
-
|
|
7087
|
+
this.ultimoItemSelecionado = [];
|
|
7088
|
+
this.lastDraggedItems = [];
|
|
7089
|
+
this.draggedIds = [];
|
|
7090
|
+
this.mouseX = 0;
|
|
7091
|
+
this.mouseY = 0;
|
|
7092
|
+
this.previewClones = [];
|
|
7093
|
+
document.addEventListener('keydown', (event) => this.onKeyDown(event));
|
|
7094
|
+
}
|
|
7095
|
+
ngOnInit() {
|
|
7096
|
+
document.addEventListener('mousemove', (event) => {
|
|
7097
|
+
this.mouseX = event.clientX;
|
|
7098
|
+
this.mouseY = event.clientY;
|
|
7099
|
+
});
|
|
7100
|
+
}
|
|
7101
|
+
ngAfterViewInit() {
|
|
7102
|
+
this.createDropOverlay();
|
|
7103
|
+
}
|
|
7104
|
+
createDropOverlay() {
|
|
7105
|
+
this.dropOverlay = document.createElement('div');
|
|
7106
|
+
this.dropOverlay.innerText = 'Soltar';
|
|
7107
|
+
this.dropOverlay.style.position = 'fixed';
|
|
7108
|
+
this.dropOverlay.style.background = '#BFDBFE'; // Azul claro visível
|
|
7109
|
+
this.dropOverlay.style.color = '#1E3A8A'; // Azul escuro pro texto
|
|
7110
|
+
this.dropOverlay.style.border = '9px #1E40AF'; // Borda azul escuro
|
|
7111
|
+
this.dropOverlay.style.boxShadow = '0 2px 6px rgba(30, 58, 138, 0.2)'; // Shadow reduzida
|
|
7112
|
+
this.dropOverlay.style.display = 'none';
|
|
7113
|
+
this.dropOverlay.style.justifyContent = 'center';
|
|
7114
|
+
this.dropOverlay.style.alignItems = 'center';
|
|
7115
|
+
this.dropOverlay.style.zIndex = '9999';
|
|
7116
|
+
this.dropOverlay.style.fontSize = '1.5rem';
|
|
7117
|
+
this.dropOverlay.style.fontWeight = 'bold';
|
|
7118
|
+
this.dropOverlay.style.pointerEvents = 'all';
|
|
7119
|
+
this.dropOverlay.style.transition = 'all 0.2s ease';
|
|
7120
|
+
// Encaixar no mesmo lugar do target
|
|
7121
|
+
const targetListEl = document.querySelector('.p-picklist-target');
|
|
7122
|
+
if (targetListEl) {
|
|
7123
|
+
const rect = targetListEl.getBoundingClientRect();
|
|
7124
|
+
this.dropOverlay.style.top = rect.top + 'px';
|
|
7125
|
+
this.dropOverlay.style.left = rect.left + 'px';
|
|
7126
|
+
this.dropOverlay.style.width = rect.width + 'px';
|
|
7127
|
+
this.dropOverlay.style.height = rect.height + 'px';
|
|
7128
|
+
}
|
|
7129
|
+
this.dropOverlay.addEventListener('click', () => {
|
|
7130
|
+
const selectedInSource = this.source.some(item => this.selectedItems[item[this.itemIdField]]);
|
|
7131
|
+
const selectedInTarget = this.target.some(item => this.selectedItems[item[this.itemIdField]]);
|
|
7132
|
+
if (selectedInSource) {
|
|
7133
|
+
this.OnMoveToTarget({});
|
|
7091
7134
|
}
|
|
7135
|
+
else if (selectedInTarget) {
|
|
7136
|
+
this.OnMoveToSource({});
|
|
7137
|
+
}
|
|
7138
|
+
this.hideDropOverlay();
|
|
7139
|
+
});
|
|
7140
|
+
this.dropOverlay.addEventListener('mouseenter', () => {
|
|
7141
|
+
this.dropOverlay.style.background = '#93C5FD'; // Azul um pouco mais escuro no hover
|
|
7142
|
+
});
|
|
7143
|
+
this.dropOverlay.addEventListener('mouseleave', () => {
|
|
7144
|
+
this.dropOverlay.style.background = '#BFDBFE';
|
|
7092
7145
|
});
|
|
7146
|
+
document.body.appendChild(this.dropOverlay);
|
|
7147
|
+
}
|
|
7148
|
+
handleMouseMove(event) {
|
|
7149
|
+
this.mouseX = event.clientX;
|
|
7150
|
+
this.mouseY = event.clientY;
|
|
7151
|
+
}
|
|
7152
|
+
clearPreviewClones() {
|
|
7153
|
+
this.previewClones.forEach(clone => clone.remove());
|
|
7154
|
+
this.previewClones = [];
|
|
7093
7155
|
}
|
|
7094
7156
|
OnMoveToSource(event) {
|
|
7157
|
+
this.clearPreviewClones();
|
|
7095
7158
|
this.picklist.moveLeft();
|
|
7096
7159
|
this.onMoveToSource.emit(event);
|
|
7097
7160
|
this.selectedItems = {};
|
|
7161
|
+
this.hideDropOverlay();
|
|
7162
|
+
this.clearPreviewClones();
|
|
7098
7163
|
}
|
|
7099
7164
|
OnMoveToTarget(event) {
|
|
7165
|
+
this.clearPreviewClones();
|
|
7100
7166
|
this.picklist.moveRight();
|
|
7101
7167
|
this.onMoveToTarget.emit(event);
|
|
7102
7168
|
this.selectedItems = {};
|
|
7169
|
+
this.hideDropOverlay();
|
|
7170
|
+
this.clearPreviewClones();
|
|
7171
|
+
}
|
|
7172
|
+
getSelectedItems() {
|
|
7173
|
+
// Filtra os itens da lista de origem (source) com base nos itens selecionados
|
|
7174
|
+
return this.source.filter(item => {
|
|
7175
|
+
const itemId = item[this.itemIdField]; // Obtém o ID do item
|
|
7176
|
+
return this.selectedItems[itemId] === true; // Verifica se está marcado como true
|
|
7177
|
+
});
|
|
7103
7178
|
}
|
|
7104
7179
|
OnMoveAllToSource(event) {
|
|
7105
7180
|
this.onMoveToSource.emit(event);
|
|
7106
7181
|
this.selectedItems = {};
|
|
7182
|
+
this.hideDropOverlay();
|
|
7183
|
+
this.clearPreviewClones();
|
|
7107
7184
|
}
|
|
7108
7185
|
OnMoveAllToTarget(event) {
|
|
7109
7186
|
this.onMoveToTarget.emit(event);
|
|
7110
7187
|
this.selectedItems = {};
|
|
7188
|
+
this.hideDropOverlay();
|
|
7189
|
+
this.clearPreviewClones();
|
|
7111
7190
|
}
|
|
7112
7191
|
OnSourceSelect(event) {
|
|
7192
|
+
const selectedItems = this.getSelectedItems();
|
|
7193
|
+
// Primeiro remove todos os previews antigos
|
|
7194
|
+
this.clearPreviewClones();
|
|
7195
|
+
if (selectedItems.length === 0) {
|
|
7196
|
+
this.hideDropOverlay();
|
|
7197
|
+
this.onSourceSelect.emit(event);
|
|
7198
|
+
return;
|
|
7199
|
+
}
|
|
7200
|
+
selectedItems.forEach((item, index) => {
|
|
7201
|
+
const itemId = item[this.itemIdField];
|
|
7202
|
+
// Se já existe um clone para esse item, não cria novamente
|
|
7203
|
+
if (!document.getElementById('preview_' + itemId)) {
|
|
7204
|
+
const original = document.getElementById('id_pick_list' + itemId);
|
|
7205
|
+
if (original) {
|
|
7206
|
+
const rect = original.getBoundingClientRect();
|
|
7207
|
+
const clone = original.cloneNode(true);
|
|
7208
|
+
clone.classList.add('drag-preview-clone');
|
|
7209
|
+
clone.classList.add(`level-${index + 1}`);
|
|
7210
|
+
clone.id = 'preview_' + itemId;
|
|
7211
|
+
document.body.appendChild(clone);
|
|
7212
|
+
this.previewClones.push(clone);
|
|
7213
|
+
this.animateCloneToCursor(clone, rect);
|
|
7214
|
+
}
|
|
7215
|
+
}
|
|
7216
|
+
});
|
|
7217
|
+
this.showDropOverlay();
|
|
7113
7218
|
this.onSourceSelect.emit(event);
|
|
7114
7219
|
}
|
|
7220
|
+
showDropOverlay() {
|
|
7221
|
+
const selectedInSource = this.source.some(item => this.selectedItems[item[this.itemIdField]]);
|
|
7222
|
+
const selectedInTarget = this.target.some(item => this.selectedItems[item[this.itemIdField]]);
|
|
7223
|
+
let targetListEl = null;
|
|
7224
|
+
if (selectedInSource) {
|
|
7225
|
+
// Itens selecionados na lista da esquerda → overlay no lado direito
|
|
7226
|
+
targetListEl = document.querySelector('.p-picklist-target');
|
|
7227
|
+
this.dropOverlay.innerText = 'Soltar aqui para mover';
|
|
7228
|
+
}
|
|
7229
|
+
else if (selectedInTarget) {
|
|
7230
|
+
// Itens selecionados na lista da direita → overlay no lado esquerdo
|
|
7231
|
+
targetListEl = document.querySelector('.p-picklist-source');
|
|
7232
|
+
this.dropOverlay.innerText = 'Soltar aqui para retornar';
|
|
7233
|
+
}
|
|
7234
|
+
if (targetListEl) {
|
|
7235
|
+
const rect = targetListEl.getBoundingClientRect();
|
|
7236
|
+
this.dropOverlay.style.top = rect.top + 'px';
|
|
7237
|
+
this.dropOverlay.style.left = rect.left + 'px';
|
|
7238
|
+
this.dropOverlay.style.width = rect.width + 'px';
|
|
7239
|
+
this.dropOverlay.style.height = rect.height + 'px';
|
|
7240
|
+
this.dropOverlay.style.display = 'flex';
|
|
7241
|
+
}
|
|
7242
|
+
}
|
|
7243
|
+
hideDropOverlay() {
|
|
7244
|
+
if (this.dropOverlay) {
|
|
7245
|
+
this.dropOverlay.style.display = 'none';
|
|
7246
|
+
}
|
|
7247
|
+
}
|
|
7248
|
+
animateCloneToCursor(clone, originRect) {
|
|
7249
|
+
// Começa exatamente da posição do original
|
|
7250
|
+
let posX = originRect.left;
|
|
7251
|
+
let posY = originRect.top;
|
|
7252
|
+
clone.style.position = 'fixed';
|
|
7253
|
+
clone.style.left = `${posX}px`;
|
|
7254
|
+
clone.style.top = `${posY}px`;
|
|
7255
|
+
clone.style.width = `${originRect.width}px`;
|
|
7256
|
+
clone.style.height = `${originRect.height}px`;
|
|
7257
|
+
clone.style.pointerEvents = 'none';
|
|
7258
|
+
const animate = () => {
|
|
7259
|
+
const dx = this.mouseX - posX;
|
|
7260
|
+
const dy = this.mouseY - posY;
|
|
7261
|
+
posX += dx * 0.15;
|
|
7262
|
+
posY += dy * 0.15;
|
|
7263
|
+
clone.style.left = `${posX}px`;
|
|
7264
|
+
clone.style.top = `${posY}px`;
|
|
7265
|
+
if (document.body.contains(clone)) {
|
|
7266
|
+
requestAnimationFrame(animate);
|
|
7267
|
+
}
|
|
7268
|
+
};
|
|
7269
|
+
animate();
|
|
7270
|
+
}
|
|
7115
7271
|
OnTargetSelect(event) {
|
|
7272
|
+
const selectedItems = this.target.filter(item => {
|
|
7273
|
+
const itemId = item[this.itemIdField];
|
|
7274
|
+
return this.selectedItems[itemId] === true;
|
|
7275
|
+
});
|
|
7276
|
+
// Limpa clones antigos
|
|
7277
|
+
this.clearPreviewClones();
|
|
7278
|
+
if (selectedItems.length === 0) {
|
|
7279
|
+
this.hideDropOverlay();
|
|
7280
|
+
this.onTargetSelect.emit(event);
|
|
7281
|
+
return;
|
|
7282
|
+
}
|
|
7283
|
+
selectedItems.forEach((item, index) => {
|
|
7284
|
+
const itemId = item[this.itemIdField];
|
|
7285
|
+
if (!document.getElementById('preview_' + itemId)) {
|
|
7286
|
+
const original = document.getElementById('id_pick_list' + itemId);
|
|
7287
|
+
if (original) {
|
|
7288
|
+
const rect = original.getBoundingClientRect();
|
|
7289
|
+
const clone = original.cloneNode(true);
|
|
7290
|
+
clone.classList.add('drag-preview-clone');
|
|
7291
|
+
clone.classList.add(`level-${index + 1}`);
|
|
7292
|
+
clone.id = 'preview_' + itemId;
|
|
7293
|
+
document.body.appendChild(clone);
|
|
7294
|
+
this.previewClones.push(clone);
|
|
7295
|
+
this.animateCloneToCursor(clone, rect);
|
|
7296
|
+
}
|
|
7297
|
+
}
|
|
7298
|
+
});
|
|
7299
|
+
this.showDropOverlay();
|
|
7116
7300
|
this.onTargetSelect.emit(event);
|
|
7117
7301
|
}
|
|
7118
7302
|
onSelectAll() {
|
|
7119
7303
|
this.selectAllItems(true);
|
|
7120
7304
|
}
|
|
7121
7305
|
selectAllItems(isSelected) {
|
|
7122
|
-
// Selecionar todos os itens na lista de origem (source)
|
|
7123
7306
|
this.source.forEach(item => {
|
|
7124
7307
|
const itemId = item[this.itemIdField];
|
|
7125
7308
|
this.selectedItems[itemId] = isSelected;
|
|
7126
7309
|
});
|
|
7127
|
-
// Selecionar todos os itens na lista de destino (target)
|
|
7128
7310
|
this.target.forEach(item => {
|
|
7129
7311
|
const itemId = item[this.itemIdField];
|
|
7130
7312
|
this.selectedItems[itemId] = isSelected;
|
|
7131
7313
|
});
|
|
7132
7314
|
}
|
|
7315
|
+
onKeyDown(event) {
|
|
7316
|
+
if (event.ctrlKey && event.key === 'a') {
|
|
7317
|
+
event.preventDefault();
|
|
7318
|
+
this.onSelectAll();
|
|
7319
|
+
}
|
|
7320
|
+
else if (event.key === 'Enter') {
|
|
7321
|
+
const sourceSelected = this.picklist.selectedItemsSource;
|
|
7322
|
+
const selectedItemsIds = Object.entries(this.selectedItems)
|
|
7323
|
+
.filter(([_, value]) => value === true)
|
|
7324
|
+
.map(([key, _]) => Number(key));
|
|
7325
|
+
const notInSelected = sourceSelected.find((item) => !selectedItemsIds.includes(item[this.itemIdField]));
|
|
7326
|
+
const indexInSource = this.source.findIndex((item) => item[this.itemIdField] === notInSelected?.[this.itemIdField]);
|
|
7327
|
+
const ultimoItemArray = {
|
|
7328
|
+
item: notInSelected,
|
|
7329
|
+
index: indexInSource,
|
|
7330
|
+
};
|
|
7331
|
+
const selectedIndexInSource = this.source.findIndex((sourceItem) => selectedItemsIds.includes(sourceItem[this.itemIdField]));
|
|
7332
|
+
if (notInSelected === undefined) {
|
|
7333
|
+
const beforeIds = this.ultimoItemSelecionado.map(i => i.item[this.itemIdField]);
|
|
7334
|
+
const afterIds = this.picklist.selectedItemsSource.map(i => i[this.itemIdField]);
|
|
7335
|
+
const removedId = beforeIds.find(id => !afterIds.includes(id));
|
|
7336
|
+
if (removedId != null) {
|
|
7337
|
+
const removedItem = this.source.find(item => item[this.itemIdField] === removedId);
|
|
7338
|
+
if (removedItem) {
|
|
7339
|
+
this.selectCheckBox(removedItem);
|
|
7340
|
+
this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter((i) => i.item[this.itemIdField] !== removedId);
|
|
7341
|
+
}
|
|
7342
|
+
}
|
|
7343
|
+
else {
|
|
7344
|
+
const enterIds = this.ultimoItemSelecionado.map(i => i.item[this.itemIdField]);
|
|
7345
|
+
const selectedItemsIds = Object.entries(this.selectedItems)
|
|
7346
|
+
.filter(([_, value]) => value === true)
|
|
7347
|
+
.map(([key, _]) => Number(key));
|
|
7348
|
+
const clickedIds = selectedItemsIds.filter(id => !enterIds.includes(id));
|
|
7349
|
+
if (clickedIds.length > 0) {
|
|
7350
|
+
const clickedItem = this.source.find(item => item[this.itemIdField] === clickedIds[0]);
|
|
7351
|
+
if (clickedItem) {
|
|
7352
|
+
this.selectCheckBox(clickedItem);
|
|
7353
|
+
this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter((i) => i.item[this.itemIdField] !== clickedIds[0]);
|
|
7354
|
+
}
|
|
7355
|
+
}
|
|
7356
|
+
}
|
|
7357
|
+
return;
|
|
7358
|
+
}
|
|
7359
|
+
this.selectCheckBox(notInSelected);
|
|
7360
|
+
this.ultimoItemSelecionado = this.ultimoItemSelecionado.filter((item) => item.index !== indexInSource);
|
|
7361
|
+
this.ultimoItemSelecionado.push(ultimoItemArray);
|
|
7362
|
+
}
|
|
7363
|
+
}
|
|
7133
7364
|
selectCheckBox(item) {
|
|
7134
7365
|
const itemId = item[this.itemIdField];
|
|
7135
7366
|
this.selectedPreview = item;
|
|
@@ -7139,17 +7370,14 @@ class KvPickListComponent {
|
|
|
7139
7370
|
this.ngModel = this.selectedItems[itemId];
|
|
7140
7371
|
}
|
|
7141
7372
|
isItemSelected(item) {
|
|
7142
|
-
console.log(this.selectedPreview === item);
|
|
7143
7373
|
return this.selectedPreview === item;
|
|
7144
7374
|
}
|
|
7145
|
-
ngOnInit() {
|
|
7146
|
-
}
|
|
7147
7375
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvPickListComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvPickListComponent, selector: "kv-picklist", inputs: { itemIdField: "itemIdField", breakpoint: "breakpoint", dragdrop: "dragdrop", filterBy: "filterBy", itemTemplate: "itemTemplate", responsive: "responsive", source: "source", sourceHeader: "sourceHeader", sourceStyle: "sourceStyle", stripedRows: "stripedRows", target: "target", targetHeader: "targetHeader", targetStyle: "targetStyle", showSourceControls: "showSourceControls", showTargetControls: "showTargetControls", showCheckBox: "showCheckBox" }, outputs: { onMoveToSource: "onMoveToSource", onMoveToTarget: "onMoveToTarget", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect" }, viewQueries: [{ propertyName: "picklist", first: true, predicate: PickList, descendants: true }], ngImport: i0, template: "<p-pickList\r\n [source]=\"source\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [sourceStyle]=\"sourceStyle\"\r\n [target]=\"target\"\r\n [targetHeader]=\"targetHeader\"\r\n [targetStyle]=\"targetStyle\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [filterBy]=\"filterBy\"\r\n [breakpoint]=\"breakpoint\"\r\n [stripedRows]=\"stripedRows\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n (onMoveToSource)=\"OnMoveToSource($event)\"\r\n (onMoveToTarget)=\"OnMoveToTarget($event)\"\r\n (onMoveAllToSource)=\"OnMoveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"OnMoveAllToTarget($event)\"\r\n (onSourceSelect)=\"OnSourceSelect($event)\"\r\n (onTargetSelect)=\"OnTargetSelect($event)\"\r\n>\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\">\r\n <div (click)=\"selectCheckBox(item)\" class=\"flex mr-5\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n @if(showCheckBox){\r\n <kv-check (onCheckChange)=\"selectCheckBox(item)\" [(ngModel)]=\"selectedItems[item[itemIdField]]\" class=\"mr-1\"></kv-check>\r\n }\r\n </ng-container>\r\n </div> \r\n </ng-template>\r\n</p-pickList>\r\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .p-picklist .p-picklist-filter-container{position:sticky!important;top:0!important;z-index:99!important}:host ::ng-deep .p-picklist .p-picklist-filter-container{border-left:0px;border-right:0px}.item-with-checkbox{display:flex;align-items:center}.item-with-checkbox kv-check{margin-right:8px}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$1.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvCheckComponent, selector: "kv-check", outputs: ["onCheckChange"] }] }); }
|
|
7376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvPickListComponent, selector: "kv-picklist", inputs: { itemIdField: "itemIdField", breakpoint: "breakpoint", dragdrop: "dragdrop", filterBy: "filterBy", itemTemplate: "itemTemplate", responsive: "responsive", source: "source", sourceHeader: "sourceHeader", sourceStyle: "sourceStyle", stripedRows: "stripedRows", target: "target", targetHeader: "targetHeader", targetStyle: "targetStyle", showSourceControls: "showSourceControls", showTargetControls: "showTargetControls", showCheckBox: "showCheckBox" }, outputs: { onMoveToSource: "onMoveToSource", onMoveToTarget: "onMoveToTarget", onMoveAllToSource: "onMoveAllToSource", onMoveAllToTarget: "onMoveAllToTarget", onSourceSelect: "onSourceSelect", onTargetSelect: "onTargetSelect" }, viewQueries: [{ propertyName: "picklist", first: true, predicate: PickList, descendants: true }], ngImport: i0, template: "<p-pickList\r\n [source]=\"source\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [sourceStyle]=\"sourceStyle\"\r\n [target]=\"target\" \r\n [targetHeader]=\"targetHeader\"\r\n [targetStyle]=\"targetStyle\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [filterBy]=\"filterBy\"\r\n [breakpoint]=\"breakpoint\"\r\n [stripedRows]=\"stripedRows\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n (onMoveToSource)=\"OnMoveToSource($event)\"\r\n (onMoveToTarget)=\"OnMoveToTarget($event)\"\r\n (onMoveAllToSource)=\"OnMoveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"OnMoveAllToTarget($event)\"\r\n (onSourceSelect)=\"OnSourceSelect($event)\"\r\n (onTargetSelect)=\"OnTargetSelect($event)\"\r\n>\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\" >\r\n <div (click)=\"selectCheckBox(item)\" class=\"flex mr-5\" [id]=\"'id_pick_list'+item.idindicativolotacao\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n @if(showCheckBox) {\r\n <kv-check (onCheckChange)=\"selectCheckBox(item)\" [(ngModel)]=\"selectedItems[item[itemIdField]]\" class=\"mr-1\"></kv-check>\r\n }\r\n </ng-container>\r\n </div> \r\n </ng-template>\r\n</p-pickList>\r\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .p-picklist .p-picklist-filter-container{position:sticky!important;top:0!important;z-index:99!important}:host ::ng-deep .p-picklist .p-picklist-filter-container{border-left:0px;border-right:0px}.item-with-checkbox{display:flex;align-items:center}.item-with-checkbox kv-check{margin-right:8px}@keyframes shake-base{0%{transform:translate(0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}to{transform:translate(-1px,-1px)}}.drag-preview-clone{animation-name:shake-base;animation-duration:.25s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;position:fixed;z-index:9999;opacity:.85;pointer-events:none;transition:transform .1s ease;box-shadow:0 10px 20px #0003;border-radius:6px;padding:8px;background-color:#fff}.drag-preview-clone.level-1{margin-top:.5rem}.drag-preview-clone.level-2{margin-bottom:1rem}.drag-preview-clone.level-3{margin-left:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$1.PickList, selector: "p-pickList", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvCheckComponent, selector: "kv-check", outputs: ["onCheckChange"] }] }); }
|
|
7149
7377
|
}
|
|
7150
7378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvPickListComponent, decorators: [{
|
|
7151
7379
|
type: Component,
|
|
7152
|
-
args: [{ selector: 'kv-picklist', template: "<p-pickList\r\n [source]=\"source\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [sourceStyle]=\"sourceStyle\"\r\n [target]=\"target\"\r\n [targetHeader]=\"targetHeader\"\r\n [targetStyle]=\"targetStyle\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [filterBy]=\"filterBy\"\r\n [breakpoint]=\"breakpoint\"\r\n [stripedRows]=\"stripedRows\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n (onMoveToSource)=\"OnMoveToSource($event)\"\r\n (onMoveToTarget)=\"OnMoveToTarget($event)\"\r\n (onMoveAllToSource)=\"OnMoveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"OnMoveAllToTarget($event)\"\r\n (onSourceSelect)=\"OnSourceSelect($event)\"\r\n (onTargetSelect)=\"OnTargetSelect($event)\"\r\n>\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\">\r\n <div (click)=\"selectCheckBox(item)\" class=\"flex mr-5\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n @if(showCheckBox){\r\n <kv-check (onCheckChange)=\"selectCheckBox(item)\" [(ngModel)]=\"selectedItems[item[itemIdField]]\" class=\"mr-1\"></kv-check>\r\n }\r\n </ng-container>\r\n </div> \r\n </ng-template>\r\n</p-pickList>\r\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .p-picklist .p-picklist-filter-container{position:sticky!important;top:0!important;z-index:99!important}:host ::ng-deep .p-picklist .p-picklist-filter-container{border-left:0px;border-right:0px}.item-with-checkbox{display:flex;align-items:center}.item-with-checkbox kv-check{margin-right:8px}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}\n"] }]
|
|
7380
|
+
args: [{ selector: 'kv-picklist', template: "<p-pickList\r\n [source]=\"source\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [sourceStyle]=\"sourceStyle\"\r\n [target]=\"target\" \r\n [targetHeader]=\"targetHeader\"\r\n [targetStyle]=\"targetStyle\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [filterBy]=\"filterBy\"\r\n [breakpoint]=\"breakpoint\"\r\n [stripedRows]=\"stripedRows\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n (onMoveToSource)=\"OnMoveToSource($event)\"\r\n (onMoveToTarget)=\"OnMoveToTarget($event)\"\r\n (onMoveAllToSource)=\"OnMoveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"OnMoveAllToTarget($event)\"\r\n (onSourceSelect)=\"OnSourceSelect($event)\"\r\n (onTargetSelect)=\"OnTargetSelect($event)\"\r\n>\r\n <ng-template let-item pTemplate=\"item\" *ngIf=\"itemTemplate\" >\r\n <div (click)=\"selectCheckBox(item)\" class=\"flex mr-5\" [id]=\"'id_pick_list'+item.idindicativolotacao\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n @if(showCheckBox) {\r\n <kv-check (onCheckChange)=\"selectCheckBox(item)\" [(ngModel)]=\"selectedItems[item[itemIdField]]\" class=\"mr-1\"></kv-check>\r\n }\r\n </ng-container>\r\n </div> \r\n </ng-template>\r\n</p-pickList>\r\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .p-picklist .p-picklist-filter-container{position:sticky!important;top:0!important;z-index:99!important}:host ::ng-deep .p-picklist .p-picklist-filter-container{border-left:0px;border-right:0px}.item-with-checkbox{display:flex;align-items:center}.item-with-checkbox kv-check{margin-right:8px}@keyframes shake-base{0%{transform:translate(0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}to{transform:translate(-1px,-1px)}}.drag-preview-clone{animation-name:shake-base;animation-duration:.25s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;position:fixed;z-index:9999;opacity:.85;pointer-events:none;transition:transform .1s ease;box-shadow:0 10px 20px #0003;border-radius:6px;padding:8px;background-color:#fff}.drag-preview-clone.level-1{margin-top:.5rem}.drag-preview-clone.level-2{margin-bottom:1rem}.drag-preview-clone.level-3{margin-left:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255;--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}::ng-deep .padrao{--kv-color-system: 10,58,120;--kv-color-system-cta: 76, 175, 80;--kv-color-text: 0, 0, 0;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-keevocenter{--kv-color-system: 88,25,153;--kv-color-system-cta: 0, 116, 217;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 248,250,253;--kv-background-card: 255,255,255}::ng-deep .theme-holos{--kv-color-system: 241,90,36;--kv-color-system-cta: 224, 168, 35;--kv-color-text: 0, 0, 0;--kv-color-text-inv: 255, 255, 165;--kv-background-system: 240,240,240;--kv-background-card: 2255,255,255}.system-color{color:rgb(var(--kv-color-system),1)}.bg-system-100{background:rgb(var(--kv-color-system),1)}.bg-system-75{background:rgb(var(--kv-color-system),.75)}.bg-system-50{background:rgb(var(--kv-color-system),.5)}.bg-system-25{background:rgb(var(--kv-color-system),.25)}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter,Inter var,sans-serif!important}::ng-deep .p-icon,svg{height:.6rem}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:rgb(var(--kv-color-text))!important;background:linear-gradient(0deg,#00000005 .44%,#0000 49.5%),#fff!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word;border-bottom:1px solid rgb(var(--kv-color-text),.15)}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}::ng-deep svg.p-icon{width:.65rem;height:.65rem}::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:#004172;background:#004172}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:hover{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:active{background-color:#002542}::ng-deep .p-checkbox .p-checkbox-box.p-highlight:disabled{background-color:#002542;opacity:.4;cursor:auto}input{height:1.75rem}::ng-deep .p-checkbox .p-checkbox-box{width:1.125rem;height:1.125rem;border:1.5px solid #d1d5db}::ng-deep p-tablecheckbox p-tableheadercheckbox .p-checkbox{display:flex!important;align-items:center!important;justify-content:right}::ng-deep .p-checkbox{display:flex!important;align-items:center!important;justify-content:center}::ng-deep .p-checkbox-label{font-size:.875rem}\n"] }]
|
|
7153
7381
|
}], ctorParameters: () => [{ type: i2$2.FormBuilder }], propDecorators: { picklist: [{
|
|
7154
7382
|
type: ViewChild,
|
|
7155
7383
|
args: [PickList]
|
|
@@ -9732,6 +9960,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
9732
9960
|
}]
|
|
9733
9961
|
}] });
|
|
9734
9962
|
|
|
9963
|
+
class KvStepsComponent {
|
|
9964
|
+
constructor() {
|
|
9965
|
+
this.notificationService = inject(NotificationService);
|
|
9966
|
+
this.steps = input([]);
|
|
9967
|
+
this.currentStepIndex = signal(0);
|
|
9968
|
+
this.emitData = output();
|
|
9969
|
+
}
|
|
9970
|
+
ngAfterViewInit() {
|
|
9971
|
+
if (this.steps().length > 0) {
|
|
9972
|
+
this.renderCurrentStep();
|
|
9973
|
+
}
|
|
9974
|
+
}
|
|
9975
|
+
getCurrentStep() {
|
|
9976
|
+
const stepsArray = this.steps();
|
|
9977
|
+
const index = this.currentStepIndex();
|
|
9978
|
+
if (index < 0 || index >= stepsArray.length) {
|
|
9979
|
+
return null;
|
|
9980
|
+
}
|
|
9981
|
+
return stepsArray[index];
|
|
9982
|
+
}
|
|
9983
|
+
renderCurrentStep() {
|
|
9984
|
+
const currentStep = this.getCurrentStep();
|
|
9985
|
+
if (currentStep && this.stepContainer) {
|
|
9986
|
+
this.renderStep(currentStep);
|
|
9987
|
+
}
|
|
9988
|
+
}
|
|
9989
|
+
renderStep(step) {
|
|
9990
|
+
if (!this.stepContainer)
|
|
9991
|
+
return;
|
|
9992
|
+
this.stepContainer.clear();
|
|
9993
|
+
const compRef = this.stepContainer.createComponent(step.component);
|
|
9994
|
+
step.instance = compRef.instance;
|
|
9995
|
+
}
|
|
9996
|
+
updateStepIndex(newIndex) {
|
|
9997
|
+
const stepsArray = this.steps();
|
|
9998
|
+
if (newIndex < 0 || newIndex >= stepsArray.length)
|
|
9999
|
+
return;
|
|
10000
|
+
this.currentStepIndex.set(newIndex);
|
|
10001
|
+
this.renderCurrentStep();
|
|
10002
|
+
}
|
|
10003
|
+
async nextPage() {
|
|
10004
|
+
const currentStep = this.getCurrentStep();
|
|
10005
|
+
if (!currentStep)
|
|
10006
|
+
return;
|
|
10007
|
+
if (currentStep.instance?.isValid()) {
|
|
10008
|
+
this.emitData.emit(currentStep?.instance?.getData());
|
|
10009
|
+
//aguardar o salvamento do step atual
|
|
10010
|
+
if (currentStep.instance?.isValid()) {
|
|
10011
|
+
currentStep.instance?.save().subscribe({
|
|
10012
|
+
next: () => { },
|
|
10013
|
+
complete: () => {
|
|
10014
|
+
if (currentStep.instance?.isCompleted()) {
|
|
10015
|
+
currentStep.completed = true;
|
|
10016
|
+
}
|
|
10017
|
+
this.updateStepIndex(this.currentStepIndex() + 1);
|
|
10018
|
+
}
|
|
10019
|
+
});
|
|
10020
|
+
}
|
|
10021
|
+
}
|
|
10022
|
+
else {
|
|
10023
|
+
// this.notificationService.toastError('Preencha todos os campos obrigatórios!');
|
|
10024
|
+
}
|
|
10025
|
+
}
|
|
10026
|
+
jumpPage() {
|
|
10027
|
+
const currentStep = this.getCurrentStep();
|
|
10028
|
+
if (currentStep && !currentStep.required) {
|
|
10029
|
+
this.updateStepIndex(this.currentStepIndex() + 1);
|
|
10030
|
+
}
|
|
10031
|
+
}
|
|
10032
|
+
previousPage() {
|
|
10033
|
+
if (this.currentStepIndex() > 0) {
|
|
10034
|
+
this.updateStepIndex(this.currentStepIndex() - 1);
|
|
10035
|
+
}
|
|
10036
|
+
}
|
|
10037
|
+
goToStep(index) {
|
|
10038
|
+
const currentStep = this.getCurrentStep();
|
|
10039
|
+
if (currentStep?.required) {
|
|
10040
|
+
this.notificationService.toastError('Não é possível sair de um passo obrigatório!');
|
|
10041
|
+
return;
|
|
10042
|
+
}
|
|
10043
|
+
else {
|
|
10044
|
+
this.notificationService.question({
|
|
10045
|
+
type: 'question',
|
|
10046
|
+
message: 'Ao sair do passo atual, todas as informações preenchidas serão perdidas. Deseja continuar?',
|
|
10047
|
+
accept: () => { this.updateStepIndex(index); },
|
|
10048
|
+
reject: () => { return; }
|
|
10049
|
+
});
|
|
10050
|
+
}
|
|
10051
|
+
}
|
|
10052
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10053
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvStepsComponent, isStandalone: true, selector: "kv-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitData: "emitData" }, viewQueries: [{ propertyName: "stepContainer", first: true, predicate: ["stepContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<kv-page-form\r\n [txtBtnSave]=\"steps()[currentStepIndex()]?.textNextButton || ''\"\r\n (onSave)=\"nextPage()\"\r\n iconBtnSave=\"\"\r\n (onCancel)=\"jumpPage()\"\r\n iconBtnCancel=\"\"\r\n [txtBtnCancel]=\"steps()[currentStepIndex()]?.textSkipButton || ''\"\r\n [showBtnCancel]=\"!steps()[currentStepIndex()]?.required || false\"\r\n [txtBtnSecundary]=\"steps()[currentStepIndex()]?.textCancelButton || ''\"\r\n (onClickSecundary)=\"previousPage()\"\r\n [showBtnSecundary]=\"currentStepIndex() > 0\"\r\n iconBtnSecundary=\"\"\r\n>\r\n <div class=\"step-main\">\r\n <div class=\"step-header\">\r\n @for (item of steps(); track $index) {\r\n\r\n <!-- \u00CDTEM DO HEADER -->\r\n <div\r\n class=\"step-header-item {{ currentStepIndex() == $index && 'active' }}\"\r\n (click)=\"goToStep($index)\"\r\n >\r\n <div\r\n class=\"step-header-icon {{\r\n currentStepIndex() == $index && 'active'\r\n }} {{ item.completed && 'completed' }}\"\r\n >\r\n <span class=\"material-symbols-rounded\">{{ item.icon }}</span>\r\n </div>\r\n\r\n <div class=\"step-header-info\">\r\n <div class=\"step-header-step-number\">\r\n Etapa {{ $index + 1 }}/{{ steps().length }}\r\n </div>\r\n <div class=\"step-header-title\">{{ item.title }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- SEPARATOR -->\r\n @if($index != steps().length - 1) {\r\n <!-- <div class=\"step-header-separator-horizontal {{ currentStepIndex() > $index && 'fill'}}\"></div> -->\r\n <div\r\n class=\"step-header-separator-vertical {{\r\n currentStepIndex() > $index && 'fill'\r\n }}\"\r\n ></div>\r\n } }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-container\" #stepContainer></div>\r\n </div>\r\n </div>\r\n</kv-page-form>\r\n", styles: [".step-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}.step-header-separator-horizontal{position:relative;background-color:#e0e0e0;height:.1rem;width:3rem;overflow:hidden}.step-header-separator-horizontal:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:0%;background-color:#000;transition:width .3s ease-in-out}.step-header-separator-horizontal.fill:before{width:100%}.step-header-separator-vertical{position:relative;background-color:#e0e0e0;width:.1rem;height:2rem;overflow:hidden}.step-header{display:flex;align-items:center;padding:.5rem 1rem;border-radius:.5rem;transition:width 1s ease-in-out;width:auto;gap:.5rem}.step-header .step-header-item{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.2rem .5rem;border-radius:.5rem;transition:all .5s ease-in-out}.step-header .step-header-item .step-header-info{overflow:hidden;max-width:0;opacity:0;transition:max-width .5s ease-in-out,opacity .5s ease-in-out;white-space:nowrap}.step-header .step-header-item.active .step-header-info{max-width:200px;opacity:1}.step-header .step-header-item .step-header-step-number{font-size:.6rem;font-weight:500;color:rgba(var(--kv-color-text),.8)}.step-header .step-header-item .step-header-title{font-size:1.1rem;font-weight:600;color:rgba(var(--kv-color-system),1)}.step-header .step-header-icon{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(var(--kv-background-card),1);transition:all .5s ease-in-out}.step-header .step-header-icon.active{background-color:rgba(var(--kv-color-system),1);color:rgba(var(--kv-background-card),1)}.step-header .step-header-icon.completed{background-color:#dcfce7;color:#15803d}.step-header .step-header-icon span{font-size:1.25rem}.step-content{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: KvPageFormModule }, { kind: "component", type: KvPageFormComponent, selector: "kv-page-form", inputs: ["formGroup", "TituloForm", "SubTituloForm", "isSaveLoading", "popup", "locationUseComponent", "iconBtnCancel", "showBtnCancel", "txtBtnCancel", "actionsCancelToogle", "iconBtnCancelToogle", "showBtnCancelToogle", "txtBtnCancelToogle", "iconBtnSave", "showBtnSave", "txtBtnSave", "disableBtnSave", "actionsSaveToogle", "iconBtnSaveToogle", "showBtnSaveToogle", "txtBtnSaveToogle", "iconBtnSecundary", "showBtnSecundary", "txtBtnSecundary", "colorBtnSecundary", "actionsToogle", "iconBtnToogle", "showBtnToogle", "txtBtnToogle", "classBtnToogle", "disableBtnSair", "showMessageCamposObrigatorios"], outputs: ["onSave", "onCancel", "onClickSecundary"] }] }); }
|
|
10054
|
+
}
|
|
10055
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStepsComponent, decorators: [{
|
|
10056
|
+
type: Component,
|
|
10057
|
+
args: [{ selector: 'kv-steps', standalone: true, imports: [KvPageFormModule], template: "<kv-page-form\r\n [txtBtnSave]=\"steps()[currentStepIndex()]?.textNextButton || ''\"\r\n (onSave)=\"nextPage()\"\r\n iconBtnSave=\"\"\r\n (onCancel)=\"jumpPage()\"\r\n iconBtnCancel=\"\"\r\n [txtBtnCancel]=\"steps()[currentStepIndex()]?.textSkipButton || ''\"\r\n [showBtnCancel]=\"!steps()[currentStepIndex()]?.required || false\"\r\n [txtBtnSecundary]=\"steps()[currentStepIndex()]?.textCancelButton || ''\"\r\n (onClickSecundary)=\"previousPage()\"\r\n [showBtnSecundary]=\"currentStepIndex() > 0\"\r\n iconBtnSecundary=\"\"\r\n>\r\n <div class=\"step-main\">\r\n <div class=\"step-header\">\r\n @for (item of steps(); track $index) {\r\n\r\n <!-- \u00CDTEM DO HEADER -->\r\n <div\r\n class=\"step-header-item {{ currentStepIndex() == $index && 'active' }}\"\r\n (click)=\"goToStep($index)\"\r\n >\r\n <div\r\n class=\"step-header-icon {{\r\n currentStepIndex() == $index && 'active'\r\n }} {{ item.completed && 'completed' }}\"\r\n >\r\n <span class=\"material-symbols-rounded\">{{ item.icon }}</span>\r\n </div>\r\n\r\n <div class=\"step-header-info\">\r\n <div class=\"step-header-step-number\">\r\n Etapa {{ $index + 1 }}/{{ steps().length }}\r\n </div>\r\n <div class=\"step-header-title\">{{ item.title }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- SEPARATOR -->\r\n @if($index != steps().length - 1) {\r\n <!-- <div class=\"step-header-separator-horizontal {{ currentStepIndex() > $index && 'fill'}}\"></div> -->\r\n <div\r\n class=\"step-header-separator-vertical {{\r\n currentStepIndex() > $index && 'fill'\r\n }}\"\r\n ></div>\r\n } }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-container\" #stepContainer></div>\r\n </div>\r\n </div>\r\n</kv-page-form>\r\n", styles: [".step-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}.step-header-separator-horizontal{position:relative;background-color:#e0e0e0;height:.1rem;width:3rem;overflow:hidden}.step-header-separator-horizontal:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:0%;background-color:#000;transition:width .3s ease-in-out}.step-header-separator-horizontal.fill:before{width:100%}.step-header-separator-vertical{position:relative;background-color:#e0e0e0;width:.1rem;height:2rem;overflow:hidden}.step-header{display:flex;align-items:center;padding:.5rem 1rem;border-radius:.5rem;transition:width 1s ease-in-out;width:auto;gap:.5rem}.step-header .step-header-item{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.2rem .5rem;border-radius:.5rem;transition:all .5s ease-in-out}.step-header .step-header-item .step-header-info{overflow:hidden;max-width:0;opacity:0;transition:max-width .5s ease-in-out,opacity .5s ease-in-out;white-space:nowrap}.step-header .step-header-item.active .step-header-info{max-width:200px;opacity:1}.step-header .step-header-item .step-header-step-number{font-size:.6rem;font-weight:500;color:rgba(var(--kv-color-text),.8)}.step-header .step-header-item .step-header-title{font-size:1.1rem;font-weight:600;color:rgba(var(--kv-color-system),1)}.step-header .step-header-icon{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(var(--kv-background-card),1);transition:all .5s ease-in-out}.step-header .step-header-icon.active{background-color:rgba(var(--kv-color-system),1);color:rgba(var(--kv-background-card),1)}.step-header .step-header-icon.completed{background-color:#dcfce7;color:#15803d}.step-header .step-header-icon span{font-size:1.25rem}.step-content{width:100%}\n"] }]
|
|
10058
|
+
}], propDecorators: { stepContainer: [{
|
|
10059
|
+
type: ViewChild,
|
|
10060
|
+
args: ['stepContainer', { read: ViewContainerRef }]
|
|
10061
|
+
}] } });
|
|
10062
|
+
|
|
9735
10063
|
class KvProgressBarAlternativeComponent {
|
|
9736
10064
|
constructor() {
|
|
9737
10065
|
/**
|
|
@@ -10318,5 +10646,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
|
|
|
10318
10646
|
* Generated bundle index. Do not edit.
|
|
10319
10647
|
*/
|
|
10320
10648
|
|
|
10321
|
-
export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvContentViewerComponent, KvContentViewerModule, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTagComponent, KvTagModule, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
|
|
10649
|
+
export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvContentViewerComponent, KvContentViewerModule, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTagComponent, KvTagModule, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
|
|
10322
10650
|
//# sourceMappingURL=keevo-components.mjs.map
|