@dev-tcloud/tcloud-ui 7.8.1 → 7.9.0
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/docs/tcloud-ui-tag.md
CHANGED
|
@@ -248,16 +248,24 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
|
248
248
|
<!-- Neutras -->
|
|
249
249
|
<div>
|
|
250
250
|
<h5>Neutras</h5>
|
|
251
|
+
<tcloud-ui-tag [color]="'neutral-50'">neutral-50</tcloud-ui-tag>
|
|
252
|
+
<tcloud-ui-tag [color]="'neutral-100'">neutral-100</tcloud-ui-tag>
|
|
253
|
+
<tcloud-ui-tag [color]="'neutral-200'">neutral-200</tcloud-ui-tag>
|
|
251
254
|
<tcloud-ui-tag [color]="'neutral-300'">neutral-300</tcloud-ui-tag>
|
|
255
|
+
<tcloud-ui-tag [color]="'neutral-400'">neutral-400</tcloud-ui-tag>
|
|
252
256
|
<tcloud-ui-tag [color]="'neutral-500'">neutral-500</tcloud-ui-tag>
|
|
257
|
+
<tcloud-ui-tag [color]="'neutral-600'">neutral-600</tcloud-ui-tag>
|
|
253
258
|
<tcloud-ui-tag [color]="'neutral-700'">neutral-700</tcloud-ui-tag>
|
|
259
|
+
<tcloud-ui-tag [color]="'neutral-800'">neutral-800</tcloud-ui-tag>
|
|
254
260
|
</div>
|
|
255
261
|
|
|
256
262
|
<!-- Primárias -->
|
|
257
263
|
<div>
|
|
258
264
|
<h5>Primárias</h5>
|
|
259
265
|
<tcloud-ui-tag [color]="'primary-300'">primary-300</tcloud-ui-tag>
|
|
266
|
+
<tcloud-ui-tag [color]="'primary-400'">primary-400</tcloud-ui-tag>
|
|
260
267
|
<tcloud-ui-tag [color]="'primary-500'">primary-500</tcloud-ui-tag>
|
|
268
|
+
<tcloud-ui-tag [color]="'primary-600'">primary-600</tcloud-ui-tag>
|
|
261
269
|
<tcloud-ui-tag [color]="'primary-700'">primary-700</tcloud-ui-tag>
|
|
262
270
|
</div>
|
|
263
271
|
|
|
@@ -265,6 +273,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
|
265
273
|
<div>
|
|
266
274
|
<h5>Risco/Erro</h5>
|
|
267
275
|
<tcloud-ui-tag [color]="'danger-300'">danger-300</tcloud-ui-tag>
|
|
276
|
+
<tcloud-ui-tag [color]="'danger-400'">danger-400</tcloud-ui-tag>
|
|
268
277
|
<tcloud-ui-tag [color]="'danger-500'">danger-500</tcloud-ui-tag>
|
|
269
278
|
</div>
|
|
270
279
|
|
|
@@ -272,6 +281,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
|
272
281
|
<div>
|
|
273
282
|
<h5>Sucesso</h5>
|
|
274
283
|
<tcloud-ui-tag [color]="'success-300'">success-300</tcloud-ui-tag>
|
|
284
|
+
<tcloud-ui-tag [color]="'success-400'">success-400</tcloud-ui-tag>
|
|
275
285
|
<tcloud-ui-tag [color]="'success-500'">success-500</tcloud-ui-tag>
|
|
276
286
|
</div>
|
|
277
287
|
|
|
@@ -279,6 +289,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
|
279
289
|
<div>
|
|
280
290
|
<h5>Informação</h5>
|
|
281
291
|
<tcloud-ui-tag [color]="'info-300'">info-300</tcloud-ui-tag>
|
|
292
|
+
<tcloud-ui-tag [color]="'info-400'">info-400</tcloud-ui-tag>
|
|
282
293
|
<tcloud-ui-tag [color]="'info-500'">info-500</tcloud-ui-tag>
|
|
283
294
|
</div>
|
|
284
295
|
|
|
@@ -286,6 +297,7 @@ import { TCloudUiModule } from '@tcloud-ui/lib';
|
|
|
286
297
|
<div>
|
|
287
298
|
<h5>Alerta</h5>
|
|
288
299
|
<tcloud-ui-tag [color]="'alert-300'">alert-300</tcloud-ui-tag>
|
|
300
|
+
<tcloud-ui-tag [color]="'alert-400'">alert-400</tcloud-ui-tag>
|
|
289
301
|
<tcloud-ui-tag [color]="'alert-500'">alert-500</tcloud-ui-tag>
|
|
290
302
|
</div>
|
|
291
303
|
</div>
|
|
@@ -281,6 +281,10 @@ var multiSelect$1 = {
|
|
|
281
281
|
var notFound$1 = {
|
|
282
282
|
message: "No results found"
|
|
283
283
|
};
|
|
284
|
+
var pagination$1 = {
|
|
285
|
+
page: "Page",
|
|
286
|
+
of: "of"
|
|
287
|
+
};
|
|
284
288
|
var searchInObject$1 = {
|
|
285
289
|
placeholder: "Search..."
|
|
286
290
|
};
|
|
@@ -310,6 +314,7 @@ var enUS = {
|
|
|
310
314
|
multiplesValues: multiplesValues$1,
|
|
311
315
|
multiSelect: multiSelect$1,
|
|
312
316
|
notFound: notFound$1,
|
|
317
|
+
pagination: pagination$1,
|
|
313
318
|
searchInObject: searchInObject$1,
|
|
314
319
|
uploadArea: uploadArea$1,
|
|
315
320
|
modal: modal$1,
|
|
@@ -336,6 +341,10 @@ var multiSelect = {
|
|
|
336
341
|
var notFound = {
|
|
337
342
|
message: "No se encontraron resultados"
|
|
338
343
|
};
|
|
344
|
+
var pagination = {
|
|
345
|
+
page: "Página",
|
|
346
|
+
of: "de"
|
|
347
|
+
};
|
|
339
348
|
var searchInObject = {
|
|
340
349
|
placeholder: "Buscar..."
|
|
341
350
|
};
|
|
@@ -365,6 +374,7 @@ var esES = {
|
|
|
365
374
|
multiplesValues: multiplesValues,
|
|
366
375
|
multiSelect: multiSelect,
|
|
367
376
|
notFound: notFound,
|
|
377
|
+
pagination: pagination,
|
|
368
378
|
searchInObject: searchInObject,
|
|
369
379
|
uploadArea: uploadArea,
|
|
370
380
|
modal: modal,
|
|
@@ -8662,14 +8672,15 @@ class TCloudUiPaginationComponent {
|
|
|
8662
8672
|
return page < 10 ? `0${page}` : `${page}`;
|
|
8663
8673
|
}
|
|
8664
8674
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8665
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { id: "id", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">P\u00E1gina</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">de\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700);background-color:transparent}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-300);border-color:var(--c-primary-400);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TCloudUiPaginationComponent, isStandalone: true, selector: "tcloud-ui-pagination", inputs: { id: "id", currentPage: "currentPage" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">{{ 'pagination.page' | i18nTranslate:'P\u00E1gina' }}</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">{{ 'pagination.of' | i18nTranslate:'de' }}\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700);background-color:transparent}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-300);border-color:var(--c-primary-400);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: I18nTranslatePipe, name: "i18nTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8666
8676
|
}
|
|
8667
8677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TCloudUiPaginationComponent, decorators: [{
|
|
8668
8678
|
type: Component,
|
|
8669
8679
|
args: [{ selector: 'tcloud-ui-pagination', imports: [
|
|
8670
8680
|
CommonModule,
|
|
8671
|
-
TCloudUiPaginationPipe
|
|
8672
|
-
|
|
8681
|
+
TCloudUiPaginationPipe,
|
|
8682
|
+
I18nTranslatePipe
|
|
8683
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"pagination-container\">\n\t<button class=\"arrow\" [disabled]=\"currentPage === 1\" (click)=\"previous()\"><i class=\"fas fa-angle-left\"></i></button>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">{{ 'pagination.page' | i18nTranslate:'P\u00E1gina' }}</span>\n\n\t<div class=\"page-input-container\">\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tclass=\"page-input\"\n\t\t\t[ngClass]=\"{'error': pageInputError}\"\n\t\t\t[value]=\"formatPage(currentPage)\"\n\t\t\t(keyup.enter)=\"goToPage($event)\"\n\t\t\t(blur)=\"goToPage($event)\"\n\t\t/>\n\t</div>\n\n\t<span class=\"label f-family f-weight-600 f-size-14 c-neutral-700\">{{ 'pagination.of' | i18nTranslate:'de' }}\n\t\t{{ totalPages }}\n\t</span>\n\n\t<button class=\"arrow\" [disabled]=\"currentPage === totalPages\" (click)=\"next()\"><i class=\"fas fa-angle-right\"></i></button>\n</div>\n", styles: [":host{display:block}.pagination-container{display:flex;align-items:center;gap:8px;font-family:var(--f-family);justify-content:center}.pagination-container .label{color:var(--c-neutral-700);background-color:transparent}.pagination-container .page-input-container{position:relative;width:48px;height:32px}.pagination-container .page-input{width:100%;height:100%;padding:var(--size-4) var(--size-8);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);font-size:var(--f-size-14);font-family:var(--f-family);font-weight:var(--f-weight-600);color:var(--c-neutral-700);text-align:center;background-color:var(--c-neutral-50);outline:none;transition:border-color .2s ease}.pagination-container .page-input:focus:not(.error){border-color:var(--c-primary-500)}.pagination-container .page-input.error{border-color:var(--c-danger-500)}.pagination-container .page-input.error:focus{border-color:var(--c-danger-500)}.pagination-container .arrow{background-color:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-8);width:32px;height:32px;font-size:var(--f-size-16);color:var(--c-neutral-300);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.pagination-container .arrow:disabled{cursor:not-allowed;opacity:.5}.pagination-container .arrow:hover:not(:disabled){background-color:var(--c-primary-300);border-color:var(--c-primary-400);color:var(--c-primary-500)}\n"] }]
|
|
8673
8684
|
}], propDecorators: { id: [{
|
|
8674
8685
|
type: Input
|
|
8675
8686
|
}], currentPage: [{
|