@wizco/fenixds-ngx 17.12.1 → 17.12.2

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -6,6 +6,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpEventType, HttpClientModule } from '@angular/common/http';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
+import * as i2 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$3 from '@angular/platform-browser';
 
@@ -3346,6 +3347,348 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:resize']
             }] } });
 
+class ContractsComponent {
+    elementRef;
+    /**
+     * Contratos já gerados, exibidos na listagem
+     */
+    contracts = [];
+    /**
+     * Templates de documento disponíveis (apenas mapeados e ativos)
+     */
+    templates = [];
+    /**
+     * Participantes disponíveis para assinatura do contrato
+     */
+    signers = [];
+    /**
+     * Papéis padrão, usados quando o template escolhido não traz os seus
+     * próprios em `templates[].roles`
+     */
+    roles = ['Contratante', 'Signatário', 'Testemunha'];
+    /**
+     * Título do card de contratos
+     */
+    title = 'Contratos';
+    /**
+     * Mensagem exibida quando não há contratos gerados
+     */
+    emptyMessage = 'Os contratos estão prontos para serem gerados!';
+    /**
+     * Ícone (material icons) do estado vazio
+     */
+    emptyIcon = 'description';
+    /**
+     * Loading da listagem de contratos
+     */
+    loading = false;
+    /**
+     * Estado da requisição de criação do contrato. Enquanto true, o botão
+     * "Gerar contrato" exibe loading (btn-loading) e o modal permanece
+     * aberto; na transição true → false o modal é fechado
+     */
+    set generating(value) {
+        const finished = this._generating && !value;
+        this._generating = value;
+        if (finished) {
+            this.closeGenerateModal();
+        }
+    }
+    get generating() {
+        return this._generating;
+    }
+    _generating = false;
+    /**
+     * Página atual da listagem (paginação server-side)
+     */
+    page = 1;
+    /**
+     * Total de páginas da listagem; a paginação só é exibida
+     * quando houver mais de uma página
+     */
+    totalPages = 0;
+    /**
+     * Solicitação de criação de contrato: template escolhido e
+     * signatários ativos com seus respectivos papéis
+     */
+    generateContract = new EventEmitter();
+    /**
+     * Solicitação de download do documento de um contrato
+     */
+    downloadDocument = new EventEmitter();
+    /**
+     * Emitido ao abrir o modal "Signatários e status" de um contrato.
+     * Permite ao consumidor carregar os signatários sob demanda pela API
+     */
+    signersRequested = new EventEmitter();
+    /**
+     * Emitido ao trocar de página na listagem; o consumidor deve
+     * recarregar os contratos da página solicitada
+     */
+    pageChange = new EventEmitter();
+    generateModal;
+    signersModal;
+    step = 1;
+    templateControl = new FormControl(null);
+    signersState = [];
+    menuOpen = null;
+    menuPosition = { top: 0, right: 0 };
+    contractDetail = null;
+    headers = [
+        { key: 'template', label: 'Template' },
+        { key: 'date', label: 'Data da geração', template: 'date' },
+        { key: 'status', label: 'Status', template: 'status' },
+    ];
+    get stepTemplateBullet() {
+        return this.step === 1 ? '1' : undefined;
+    }
+    get stepTemplateIcon() {
+        return this.step === 2 ? 'check' : undefined;
+    }
+    get activeSigners() {
+        return this.signersState.filter((signer) => !signer.removed);
+    }
+    get selectedTemplate() {
+        return this.templates.find((template) => template.id === this.templateControl.value);
+    }
+    /**
+     * Papéis exibidos na etapa de signatários: os do template escolhido,
+     * ou o input `roles` quando o template não os define
+     */
+    get availableRoles() {
+        const templateRoles = this.selectedTemplate?.roles;
+        return templateRoles?.length ? templateRoles : this.roles;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    closeMenu() {
+        this.menuOpen = null;
+    }
+    openGenerateModal() {
+        this.step = 1;
+        this.templateControl.reset();
+        this.signersState = this.signers.map((signer) => ({
+            ...signer,
+            role: '',
+            removed: false,
+        }));
+        this.generateModal?.nativeElement.showModal();
+    }
+    closeGenerateModal() {
+        this.generateModal?.nativeElement.close();
+    }
+    nextStep() {
+        if (this.templateControl.value) {
+            this.step = 2;
+        }
+    }
+    toggleSigner(signer) {
+        signer.removed = !signer.removed;
+        if (signer.removed) {
+            signer.role = '';
+        }
+    }
+    /**
+     * Um papel só pode ser usado por um signatário: já escolhido por
+     * outro signatário ativo, fica desabilitado no select dos demais
+     */
+    isRoleTaken(role, signer) {
+        return this.activeSigners.some((other) => other !== signer && other.role === role);
+    }
+    /**
+     * Signatário ativo sem papel fica desabilitado quando todos os papéis
+     * disponíveis já foram tomados pelos demais; ele sai da validação e do
+     * payload de geração, e volta a habilitar se algum papel for liberado
+     */
+    isSignerBlocked(signer) {
+        return (!signer.removed &&
+            !signer.role &&
+            this.availableRoles.every((role) => this.isRoleTaken(role, signer)));
+    }
+    /**
+     * Só permite gerar o contrato quando todos os signatários ativos e não
+     * bloqueados possuem um papel vinculado
+     */
+    canGenerate() {
+        const eligible = this.activeSigners.filter((signer) => !this.isSignerBlocked(signer));
+        return eligible.length > 0 && eligible.every((signer) => !!signer.role);
+    }
+    generate() {
+        const template = this.selectedTemplate;
+        if (!template || !this.canGenerate() || this.generating) {
+            return;
+        }
+        this.generateContract.emit({
+            template,
+            signers: this.activeSigners
+                .filter((signer) => !this.isSignerBlocked(signer))
+                .map(({ name, email, role }) => ({
+                name,
+                email,
+                role,
+            })),
+        });
+        // Consumidor que seta [generating]="true" no handler mantém o modal
+        // aberto com o botão em loading até a requisição terminar; quem não
+        // usa o input mantém o comportamento de fechar imediatamente
+        setTimeout(() => {
+            if (!this.generating) {
+                this.closeGenerateModal();
+            }
+        });
+    }
+    /**
+     * O menu é renderizado na raiz do componente (fora da área rolável da
+     * tabela) e posicionado de forma absoluta em relação a ela, a partir
+     * da posição do botão que o abriu
+     */
+    toggleMenu(row, event) {
+        event.stopPropagation();
+        if (this.menuOpen === row) {
+            this.menuOpen = null;
+            return;
+        }
+        const button = event.currentTarget;
+        const host = this.elementRef.nativeElement.querySelector('.wco-contracts');
+        const hostRect = (host ?? this.elementRef.nativeElement).getBoundingClientRect();
+        const rect = button.getBoundingClientRect();
+        this.menuPosition = {
+            top: rect.bottom - hostRect.top + 4,
+            right: hostRect.right - rect.right,
+        };
+        this.menuOpen = row;
+    }
+    openSigners(row) {
+        this.menuOpen = null;
+        this.contractDetail = row;
+        this.signersRequested.emit(row);
+        this.signersModal?.nativeElement.showModal();
+    }
+    closeSigners() {
+        this.signersModal?.nativeElement.close();
+    }
+    download(row) {
+        this.menuOpen = null;
+        this.downloadDocument.emit(row);
+    }
+    /**
+     * O wco-pagination pode emitir string (número clicado) ou até '...'
+     * (reticências não desabilitadas de fato); saneia antes de reemitir
+     */
+    onPageChange(value) {
+        const page = Number(value);
+        if (!Number.isFinite(page) || page < 1 || page === this.page) {
+            return;
+        }
+        this.page = page;
+        this.pageChange.emit(page);
+    }
+    /**
+     * Tradução dos status retornados pela API de Assinatura Digital
+     * (em inglês, ex.: Signed/Pending/Generated) para exibição
+     */
+    static STATUS_LABELS = {
+        signed: 'Assinado',
+        assinado: 'Assinado',
+        pending: 'Pendente',
+        pendente: 'Pendente',
+        generated: 'Gerado',
+        gerado: 'Gerado',
+    };
+    /**
+     * Status traduzido do contrato/signatário; status desconhecidos
+     * são exibidos como vieram e ausência de status vale Pendente
+     */
+    statusLabel(status) {
+        if (!status) {
+            return 'Pendente';
+        }
+        const key = String(status).trim().toLowerCase();
+        return ContractsComponent.STATUS_LABELS[key] ?? String(status);
+    }
+    isSignedStatus(status) {
+        return this.statusLabel(status) === 'Assinado';
+    }
+    isSigned(row) {
+        return this.isSignedStatus(row.status);
+    }
+    statusClass(status) {
+        const label = this.statusLabel(status);
+        if (label === 'Assinado') {
+            return 'tag-success';
+        }
+        if (label === 'Pendente') {
+            return 'tag-warning';
+        }
+        return 'tag-info';
+    }
+    displayDate(value, separator = ' ') {
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime())) {
+            return String(value);
+        }
+        const pad = (num) => String(num).padStart(2, '0');
+        return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}${separator}${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContractsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContractsComponent, isStandalone: true, selector: "wco-contracts", inputs: { contracts: "contracts", templates: "templates", signers: "signers", roles: "roles", title: "title", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", loading: "loading", generating: "generating", page: "page", totalPages: "totalPages" }, outputs: { generateContract: "generateContract", downloadDocument: "downloadDocument", signersRequested: "signersRequested", pageChange: "pageChange" }, host: { listeners: { "document:click": "closeMenu()", "window:resize": "closeMenu()" } }, viewQueries: [{ propertyName: "generateModal", first: true, predicate: ["generateModal"], descendants: true }, { propertyName: "signersModal", first: true, predicate: ["signersModal"], descendants: true }], ngImport: i0, template: "<div class=\"wco-contracts wco-content\">\n  <div class=\"wco-contracts__header\">\n    <h5 class=\"display-5 bold\">{{ title }}</h5>\n    <button\n      *ngIf=\"contracts.length > 0\"\n      class=\"wco-btn btn-primary\"\n      (click)=\"openGenerateModal()\"\n    >\n      Gerar contrato\n    </button>\n  </div>\n\n  <!-- Estado vazio -->\n  <div\n    *ngIf=\"contracts.length === 0 && !loading\"\n    class=\"flex flex-col items-center gap-xxxs my-lg\"\n  >\n    <span class=\"material-icons iconEmpty text-primary-500\">{{\n      emptyIcon\n    }}</span>\n    <p class=\"display-p\">{{ emptyMessage }}</p>\n    <button class=\"wco-btn btn-primary mt-nano\" (click)=\"openGenerateModal()\">\n      Gerar contratos\n    </button>\n  </div>\n\n  <!-- Listagem de contratos -->\n  <div *ngIf=\"contracts.length > 0 || loading\" class=\"mt-sm\">\n    <ng-template #dateTpl let-data>\n      {{ displayDate(data) }}\n    </ng-template>\n\n    <ng-template #statusTpl let-data let-row=\"row\">\n      <div class=\"flex justify-between gap-xxs\">\n        <span class=\"wco-tag\" [class]=\"statusClass(data)\">\n          <i *ngIf=\"isSignedStatus(data)\" class=\"material-icons\">check_circle</i>\n          {{ statusLabel(data) }}\n        </span>\n        <div class=\"wco-contracts__menu-wrapper\">\n          <button\n            class=\"wco-btn btn-primary btn-basic btn-icon btn-sm\"\n            aria-label=\"A\u00E7\u00F5es do contrato\"\n            (click)=\"toggleMenu(row, $event)\"\n          >\n            <span class=\"material-icons\">more_vert</span>\n          </button>\n        </div>\n      </div>\n    </ng-template>\n\n    <wco-table\n      [headers]=\"headers\"\n      [data]=\"contracts\"\n      [loading]=\"loading\"\n      [templates]=\"{ date: dateTpl, status: statusTpl }\"\n    />\n\n    <div *ngIf=\"totalPages > 1\" class=\"flex justify-center mt-xs\">\n      <wco-pagination\n        [totalPage]=\"totalPages\"\n        [currenPage]=\"page\"\n        (changePage)=\"onPageChange($event)\"\n      />\n    </div>\n  </div>\n\n  <!-- Menu de a\u00E7\u00F5es do contrato: renderizado na raiz do componente para\n       n\u00E3o ser cortado pelo overflow da \u00E1rea rol\u00E1vel da tabela -->\n  <div\n    *ngIf=\"menuOpen as openContract\"\n    class=\"wco-contracts__menu\"\n    [style.top.px]=\"menuPosition.top\"\n    [style.right.px]=\"menuPosition.right\"\n  >\n    <button\n      class=\"wco-contracts__menu-item\"\n      (click)=\"openSigners(openContract)\"\n    >\n      <span class=\"material-icons\">person</span>\n      Signat\u00E1rios\n    </button>\n    <button\n      class=\"wco-contracts__menu-item\"\n      [disabled]=\"!isSigned(openContract)\"\n      (click)=\"download(openContract)\"\n    >\n      <span class=\"material-icons\">download</span>\n      Baixar documento\n    </button>\n  </div>\n\n  <!-- Modal Gerar contratos -->\n  <dialog\n    #generateModal\n    class=\"wco-modal wco-contracts__modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <main>\n      <div class=\"flex justify-between header-modal\">\n        <h2 class=\"display-5 bold\">Gerar contratos</h2>\n        <button class=\"wco-btn btn-icon btn-sm\" (click)=\"closeGenerateModal()\">\n          <span class=\"material-icons text-neutral-500\">close</span>\n        </button>\n      </div>\n\n      <div class=\"my-xs\">\n        <wco-stepper-group [size]=\"'full'\" [current]=\"step\">\n          <wco-step\n            [isVertical]=\"false\"\n            [bulletValue]=\"stepTemplateBullet\"\n            [iconName]=\"stepTemplateIcon\"\n            [status]=\"step === 1 ? 'current' : 'finalized'\"\n            label=\"Template\"\n          ></wco-step>\n          <wco-step\n            [isVertical]=\"false\"\n            bulletValue=\"2\"\n            [status]=\"step === 2 ? 'current' : 'waiting'\"\n            label=\"Signat\u00E1rios\"\n          ></wco-step>\n        </wco-stepper-group>\n      </div>\n\n      <!-- Etapa 1: Template -->\n      <div *ngIf=\"step === 1\">\n        <h3 class=\"display-body bold-600\">Template</h3>\n        <p class=\"display-p mt-nano text-neutral-700\">\n          Escolha um modelo de documento\n        </p>\n\n        <div class=\"mt-xxs wco-form-field\">\n          <select\n            [formControl]=\"templateControl\"\n            id=\"wcoContractsTemplate\"\n            name=\"wcoContractsTemplate\"\n          >\n            <option [ngValue]=\"null\" disabled>Selecione</option>\n            <option *ngFor=\"let template of templates\" [value]=\"template.id\">\n              {{ template.name }}\n            </option>\n          </select>\n        </div>\n\n        <div class=\"wco-contracts__footer\">\n          <button\n            class=\"wco-btn btn-primary btn-basic\"\n            (click)=\"closeGenerateModal()\"\n          >\n            Cancelar\n          </button>\n          <button\n            class=\"wco-btn btn-primary\"\n            [disabled]=\"!templateControl.value\"\n            (click)=\"nextStep()\"\n          >\n            Pr\u00F3ximo\n            <span class=\"material-icons\">arrow_forward</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Etapa 2: Signat\u00E1rios -->\n      <div *ngIf=\"step === 2\">\n        <h3 class=\"display-body bold-600\">Signat\u00E1rios</h3>\n        <p class=\"display-p mt-nano text-neutral-700\">\n          Defina os pap\u00E9is de cada participante para garantir que o fluxo de\n          assinaturas siga as normas jur\u00EDdicas necess\u00E1rias para este contrato.\n        </p>\n\n        <div class=\"wco-contracts__signers-header\">\n          <span class=\"display-text bold-600\">Assinante</span>\n          <span class=\"display-text bold-600\">Papel</span>\n        </div>\n\n        <div *ngFor=\"let signer of signersState\" class=\"wco-contracts__signer\">\n          <div\n            class=\"wco-contracts__signer-info\"\n            [class.wco-contracts__signer-info--removed]=\"\n              signer.removed || isSignerBlocked(signer)\n            \"\n          >\n            <span class=\"display-text bold\">{{ signer.name }}</span>\n            <span class=\"display-caption\">{{ signer.email }}</span>\n          </div>\n          <div class=\"wco-contracts__signer-actions\">\n            <div class=\"wco-form-field\">\n              <select\n                [(ngModel)]=\"signer.role\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [disabled]=\"signer.removed || isSignerBlocked(signer)\"\n              >\n                <option value=\"\" disabled>Selecione</option>\n                <option\n                  *ngFor=\"let role of availableRoles\"\n                  [value]=\"role\"\n                  [disabled]=\"isRoleTaken(role, signer)\"\n                >\n                  {{ role }}\n                </option>\n              </select>\n            </div>\n            <button\n              class=\"wco-btn btn-primary btn-basic btn-icon btn-sm\"\n              [attr.aria-label]=\"\n                signer.removed ? 'Adicionar signat\u00E1rio' : 'Remover signat\u00E1rio'\n              \"\n              (click)=\"toggleSigner(signer)\"\n            >\n              <span class=\"material-icons\">{{\n                signer.removed ? \"person_add\" : \"person_remove\"\n              }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"wco-contracts__footer\">\n          <button\n            class=\"wco-btn btn-primary btn-basic\"\n            (click)=\"closeGenerateModal()\"\n          >\n            Cancelar\n          </button>\n          <button\n            class=\"wco-btn btn-primary\"\n            [class.btn-loading]=\"generating\"\n            [disabled]=\"!canGenerate() || generating\"\n            (click)=\"generate()\"\n          >\n            Gerar contrato\n          </button>\n        </div>\n      </div>\n    </main>\n  </dialog>\n\n  <!-- Modal Signat\u00E1rios do contrato -->\n  <dialog\n    #signersModal\n    class=\"wco-modal wco-contracts__modal--signers\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <main>\n      <div class=\"flex justify-between\">\n        <h2 class=\"display-5 bold\">Signat\u00E1rios</h2>\n        <button class=\"wco-btn btn-icon btn-sm\" (click)=\"closeSigners()\">\n          <span class=\"material-icons text-neutral-500\">close</span>\n        </button>\n      </div>\n\n      <p class=\"display-p mt-nano text-neutral-700\">\n        Documento: {{ contractDetail?.fileName || contractDetail?.template }}\n      </p>\n\n      <div class=\"wco-contracts__signer-cards\">\n        <div\n          *ngFor=\"let signer of contractDetail?.signers\"\n          class=\"wco-contracts__signer-card\"\n        >\n          <div class=\"wco-contracts__signer-card-row\">\n            <div class=\"flex items-center gap-nano\">\n              <span class=\"wco-contracts__role-tag\">{{ signer.role }}</span>\n              <span class=\"display-text bold-600\">{{ signer.name }}</span>\n            </div>\n            <span class=\"wco-tag\" [class]=\"statusClass(signer.status)\">\n              <i *ngIf=\"isSignedStatus(signer.status)\" class=\"material-icons\">check_circle</i>\n              {{ statusLabel(signer.status) }}\n            </span>\n          </div>\n          <div class=\"wco-contracts__signer-card-row\">\n            <span class=\"display-caption text-neutral-700\">{{ signer.email }}</span>\n            <span\n              *ngIf=\"isSignedStatus(signer.status) && signer.signedAt\"\n              class=\"display-caption text-neutral-700 flex items-center gap-nano\"\n            >\n              <i class=\"material-icons\">calendar_today</i>\n              {{ displayDate(signer.signedAt, ' - ') }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"wco-contracts__footer\">\n        <button class=\"wco-btn btn-primary btn-basic\" (click)=\"closeSigners()\">\n          Fechar\n        </button>\n      </div>\n    </main>\n  </dialog>\n</div>\n", styles: [".wco-contracts{display:block;position:relative}.wco-contracts__header{display:flex;align-items:center;justify-content:space-between}.wco-contracts__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 16px;text-align:center}.wco-contracts__empty .material-icons{font-size:56px;color:var(--wco-color-primary-700, #1d4ed8)}.wco-contracts__stepper{display:flex;justify-content:center;margin-top:16px;padding:0 48px}.wco-contracts__modal{--wco-modal-size: 560px}.wco-contracts__modal--signers{--wco-modal-size: 480px}.wco-contracts__select-template{min-height:60px}.wco-contracts__footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:32px}.wco-contracts__signers-header{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-bottom:8px}.wco-contracts__signers-header span{padding:0 var(--wco-spacing-xxxs)}.wco-contracts__signers-header span:last-child{min-width:208px}.wco-contracts__signer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--wco-color-neutral-300, #e5e7eb)}.wco-contracts__signer-info{display:flex;flex-direction:column;padding:var(--wco-spacing-xxxs)}.wco-contracts__signer-info--removed{opacity:.4}.wco-contracts__signer-actions{display:flex;align-items:center;gap:8px;padding:var(--wco-spacing-xxxs)}.wco-contracts__signer-actions .wco-form-field{min-width:160px}.wco-contracts__signer-cards{display:flex;flex-direction:column;gap:12px;margin-top:16px}.wco-contracts__signer-card{padding:12px 16px;border:1px solid var(--wco-color-neutral-300, #e5e7eb);border-radius:8px;background:var(--wco-color-neutral-50, #f9fafb)}.wco-contracts__signer-card-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.wco-contracts__signer-card-row+.wco-contracts__signer-card-row{margin-top:4px}.wco-contracts__signer-card-row .material-icons{font-size:16px}.wco-contracts__role-tag{display:inline-flex;align-items:center;padding:2px 12px;border:1px solid var(--wco-color-neutral-300, #e5e7eb);border-radius:16px;background:var(--wco-color-neutral-100, #f3f4f6);color:var(--wco-color-neutral-900, #111827);font-size:12px;font-weight:600;white-space:nowrap}.wco-contracts__menu-wrapper{display:flex;justify-content:flex-end}.wco-contracts__menu{position:absolute;z-index:10;min-width:230px;padding:4px 0;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000029}.wco-contracts__menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:0;background:none;cursor:pointer;font-size:14px;color:var(--wco-color-neutral-900, #111827)}.wco-contracts__menu-item:hover:not(:disabled){background:var(--wco-color-neutral-50, #f9fafb)}.wco-contracts__menu-item:disabled{opacity:.4;cursor:default}.wco-contracts table td{width:25%}.wco-contracts table td:nth-child(1){width:50%}.wco-contracts .iconEmpty{font-size:61px!important}.wco-contracts .bold-600{font-weight:600!important}.wco-contracts .header-modal{margin-top:-24px}\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: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PaginationComponent, selector: "wco-pagination", inputs: ["totalPage", "currenPage", "mode"], outputs: ["changePage"] }, { kind: "component", type: StepComponent, selector: "wco-step", inputs: ["active", "label", "iconName", "bulletValue", "isVertical", "lineStart", "lineEnd", "status", "size", "hasClick"], outputs: ["clicked"] }, { kind: "component", type: StepperGroupComponent, selector: "wco-stepper-group", inputs: ["size", "mode", "orientation", "current"] }, { kind: "component", type: TableComponent, selector: "wco-table", inputs: ["data", "sortedItem", "headers", "loading", "templates"], outputs: ["handlerSortedBy"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContractsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-contracts', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PaginationComponent,
+                        StepComponent,
+                        StepperGroupComponent,
+                        TableComponent,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"wco-contracts wco-content\">\n  <div class=\"wco-contracts__header\">\n    <h5 class=\"display-5 bold\">{{ title }}</h5>\n    <button\n      *ngIf=\"contracts.length > 0\"\n      class=\"wco-btn btn-primary\"\n      (click)=\"openGenerateModal()\"\n    >\n      Gerar contrato\n    </button>\n  </div>\n\n  <!-- Estado vazio -->\n  <div\n    *ngIf=\"contracts.length === 0 && !loading\"\n    class=\"flex flex-col items-center gap-xxxs my-lg\"\n  >\n    <span class=\"material-icons iconEmpty text-primary-500\">{{\n      emptyIcon\n    }}</span>\n    <p class=\"display-p\">{{ emptyMessage }}</p>\n    <button class=\"wco-btn btn-primary mt-nano\" (click)=\"openGenerateModal()\">\n      Gerar contratos\n    </button>\n  </div>\n\n  <!-- Listagem de contratos -->\n  <div *ngIf=\"contracts.length > 0 || loading\" class=\"mt-sm\">\n    <ng-template #dateTpl let-data>\n      {{ displayDate(data) }}\n    </ng-template>\n\n    <ng-template #statusTpl let-data let-row=\"row\">\n      <div class=\"flex justify-between gap-xxs\">\n        <span class=\"wco-tag\" [class]=\"statusClass(data)\">\n          <i *ngIf=\"isSignedStatus(data)\" class=\"material-icons\">check_circle</i>\n          {{ statusLabel(data) }}\n        </span>\n        <div class=\"wco-contracts__menu-wrapper\">\n          <button\n            class=\"wco-btn btn-primary btn-basic btn-icon btn-sm\"\n            aria-label=\"A\u00E7\u00F5es do contrato\"\n            (click)=\"toggleMenu(row, $event)\"\n          >\n            <span class=\"material-icons\">more_vert</span>\n          </button>\n        </div>\n      </div>\n    </ng-template>\n\n    <wco-table\n      [headers]=\"headers\"\n      [data]=\"contracts\"\n      [loading]=\"loading\"\n      [templates]=\"{ date: dateTpl, status: statusTpl }\"\n    />\n\n    <div *ngIf=\"totalPages > 1\" class=\"flex justify-center mt-xs\">\n      <wco-pagination\n        [totalPage]=\"totalPages\"\n        [currenPage]=\"page\"\n        (changePage)=\"onPageChange($event)\"\n      />\n    </div>\n  </div>\n\n  <!-- Menu de a\u00E7\u00F5es do contrato: renderizado na raiz do componente para\n       n\u00E3o ser cortado pelo overflow da \u00E1rea rol\u00E1vel da tabela -->\n  <div\n    *ngIf=\"menuOpen as openContract\"\n    class=\"wco-contracts__menu\"\n    [style.top.px]=\"menuPosition.top\"\n    [style.right.px]=\"menuPosition.right\"\n  >\n    <button\n      class=\"wco-contracts__menu-item\"\n      (click)=\"openSigners(openContract)\"\n    >\n      <span class=\"material-icons\">person</span>\n      Signat\u00E1rios\n    </button>\n    <button\n      class=\"wco-contracts__menu-item\"\n      [disabled]=\"!isSigned(openContract)\"\n      (click)=\"download(openContract)\"\n    >\n      <span class=\"material-icons\">download</span>\n      Baixar documento\n    </button>\n  </div>\n\n  <!-- Modal Gerar contratos -->\n  <dialog\n    #generateModal\n    class=\"wco-modal wco-contracts__modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <main>\n      <div class=\"flex justify-between header-modal\">\n        <h2 class=\"display-5 bold\">Gerar contratos</h2>\n        <button class=\"wco-btn btn-icon btn-sm\" (click)=\"closeGenerateModal()\">\n          <span class=\"material-icons text-neutral-500\">close</span>\n        </button>\n      </div>\n\n      <div class=\"my-xs\">\n        <wco-stepper-group [size]=\"'full'\" [current]=\"step\">\n          <wco-step\n            [isVertical]=\"false\"\n            [bulletValue]=\"stepTemplateBullet\"\n            [iconName]=\"stepTemplateIcon\"\n            [status]=\"step === 1 ? 'current' : 'finalized'\"\n            label=\"Template\"\n          ></wco-step>\n          <wco-step\n            [isVertical]=\"false\"\n            bulletValue=\"2\"\n            [status]=\"step === 2 ? 'current' : 'waiting'\"\n            label=\"Signat\u00E1rios\"\n          ></wco-step>\n        </wco-stepper-group>\n      </div>\n\n      <!-- Etapa 1: Template -->\n      <div *ngIf=\"step === 1\">\n        <h3 class=\"display-body bold-600\">Template</h3>\n        <p class=\"display-p mt-nano text-neutral-700\">\n          Escolha um modelo de documento\n        </p>\n\n        <div class=\"mt-xxs wco-form-field\">\n          <select\n            [formControl]=\"templateControl\"\n            id=\"wcoContractsTemplate\"\n            name=\"wcoContractsTemplate\"\n          >\n            <option [ngValue]=\"null\" disabled>Selecione</option>\n            <option *ngFor=\"let template of templates\" [value]=\"template.id\">\n              {{ template.name }}\n            </option>\n          </select>\n        </div>\n\n        <div class=\"wco-contracts__footer\">\n          <button\n            class=\"wco-btn btn-primary btn-basic\"\n            (click)=\"closeGenerateModal()\"\n          >\n            Cancelar\n          </button>\n          <button\n            class=\"wco-btn btn-primary\"\n            [disabled]=\"!templateControl.value\"\n            (click)=\"nextStep()\"\n          >\n            Pr\u00F3ximo\n            <span class=\"material-icons\">arrow_forward</span>\n          </button>\n        </div>\n      </div>\n\n      <!-- Etapa 2: Signat\u00E1rios -->\n      <div *ngIf=\"step === 2\">\n        <h3 class=\"display-body bold-600\">Signat\u00E1rios</h3>\n        <p class=\"display-p mt-nano text-neutral-700\">\n          Defina os pap\u00E9is de cada participante para garantir que o fluxo de\n          assinaturas siga as normas jur\u00EDdicas necess\u00E1rias para este contrato.\n        </p>\n\n        <div class=\"wco-contracts__signers-header\">\n          <span class=\"display-text bold-600\">Assinante</span>\n          <span class=\"display-text bold-600\">Papel</span>\n        </div>\n\n        <div *ngFor=\"let signer of signersState\" class=\"wco-contracts__signer\">\n          <div\n            class=\"wco-contracts__signer-info\"\n            [class.wco-contracts__signer-info--removed]=\"\n              signer.removed || isSignerBlocked(signer)\n            \"\n          >\n            <span class=\"display-text bold\">{{ signer.name }}</span>\n            <span class=\"display-caption\">{{ signer.email }}</span>\n          </div>\n          <div class=\"wco-contracts__signer-actions\">\n            <div class=\"wco-form-field\">\n              <select\n                [(ngModel)]=\"signer.role\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                [disabled]=\"signer.removed || isSignerBlocked(signer)\"\n              >\n                <option value=\"\" disabled>Selecione</option>\n                <option\n                  *ngFor=\"let role of availableRoles\"\n                  [value]=\"role\"\n                  [disabled]=\"isRoleTaken(role, signer)\"\n                >\n                  {{ role }}\n                </option>\n              </select>\n            </div>\n            <button\n              class=\"wco-btn btn-primary btn-basic btn-icon btn-sm\"\n              [attr.aria-label]=\"\n                signer.removed ? 'Adicionar signat\u00E1rio' : 'Remover signat\u00E1rio'\n              \"\n              (click)=\"toggleSigner(signer)\"\n            >\n              <span class=\"material-icons\">{{\n                signer.removed ? \"person_add\" : \"person_remove\"\n              }}</span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"wco-contracts__footer\">\n          <button\n            class=\"wco-btn btn-primary btn-basic\"\n            (click)=\"closeGenerateModal()\"\n          >\n            Cancelar\n          </button>\n          <button\n            class=\"wco-btn btn-primary\"\n            [class.btn-loading]=\"generating\"\n            [disabled]=\"!canGenerate() || generating\"\n            (click)=\"generate()\"\n          >\n            Gerar contrato\n          </button>\n        </div>\n      </div>\n    </main>\n  </dialog>\n\n  <!-- Modal Signat\u00E1rios do contrato -->\n  <dialog\n    #signersModal\n    class=\"wco-modal wco-contracts__modal--signers\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <main>\n      <div class=\"flex justify-between\">\n        <h2 class=\"display-5 bold\">Signat\u00E1rios</h2>\n        <button class=\"wco-btn btn-icon btn-sm\" (click)=\"closeSigners()\">\n          <span class=\"material-icons text-neutral-500\">close</span>\n        </button>\n      </div>\n\n      <p class=\"display-p mt-nano text-neutral-700\">\n        Documento: {{ contractDetail?.fileName || contractDetail?.template }}\n      </p>\n\n      <div class=\"wco-contracts__signer-cards\">\n        <div\n          *ngFor=\"let signer of contractDetail?.signers\"\n          class=\"wco-contracts__signer-card\"\n        >\n          <div class=\"wco-contracts__signer-card-row\">\n            <div class=\"flex items-center gap-nano\">\n              <span class=\"wco-contracts__role-tag\">{{ signer.role }}</span>\n              <span class=\"display-text bold-600\">{{ signer.name }}</span>\n            </div>\n            <span class=\"wco-tag\" [class]=\"statusClass(signer.status)\">\n              <i *ngIf=\"isSignedStatus(signer.status)\" class=\"material-icons\">check_circle</i>\n              {{ statusLabel(signer.status) }}\n            </span>\n          </div>\n          <div class=\"wco-contracts__signer-card-row\">\n            <span class=\"display-caption text-neutral-700\">{{ signer.email }}</span>\n            <span\n              *ngIf=\"isSignedStatus(signer.status) && signer.signedAt\"\n              class=\"display-caption text-neutral-700 flex items-center gap-nano\"\n            >\n              <i class=\"material-icons\">calendar_today</i>\n              {{ displayDate(signer.signedAt, ' - ') }}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"wco-contracts__footer\">\n        <button class=\"wco-btn btn-primary btn-basic\" (click)=\"closeSigners()\">\n          Fechar\n        </button>\n      </div>\n    </main>\n  </dialog>\n</div>\n", styles: [".wco-contracts{display:block;position:relative}.wco-contracts__header{display:flex;align-items:center;justify-content:space-between}.wco-contracts__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 16px;text-align:center}.wco-contracts__empty .material-icons{font-size:56px;color:var(--wco-color-primary-700, #1d4ed8)}.wco-contracts__stepper{display:flex;justify-content:center;margin-top:16px;padding:0 48px}.wco-contracts__modal{--wco-modal-size: 560px}.wco-contracts__modal--signers{--wco-modal-size: 480px}.wco-contracts__select-template{min-height:60px}.wco-contracts__footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:32px}.wco-contracts__signers-header{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-bottom:8px}.wco-contracts__signers-header span{padding:0 var(--wco-spacing-xxxs)}.wco-contracts__signers-header span:last-child{min-width:208px}.wco-contracts__signer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--wco-color-neutral-300, #e5e7eb)}.wco-contracts__signer-info{display:flex;flex-direction:column;padding:var(--wco-spacing-xxxs)}.wco-contracts__signer-info--removed{opacity:.4}.wco-contracts__signer-actions{display:flex;align-items:center;gap:8px;padding:var(--wco-spacing-xxxs)}.wco-contracts__signer-actions .wco-form-field{min-width:160px}.wco-contracts__signer-cards{display:flex;flex-direction:column;gap:12px;margin-top:16px}.wco-contracts__signer-card{padding:12px 16px;border:1px solid var(--wco-color-neutral-300, #e5e7eb);border-radius:8px;background:var(--wco-color-neutral-50, #f9fafb)}.wco-contracts__signer-card-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.wco-contracts__signer-card-row+.wco-contracts__signer-card-row{margin-top:4px}.wco-contracts__signer-card-row .material-icons{font-size:16px}.wco-contracts__role-tag{display:inline-flex;align-items:center;padding:2px 12px;border:1px solid var(--wco-color-neutral-300, #e5e7eb);border-radius:16px;background:var(--wco-color-neutral-100, #f3f4f6);color:var(--wco-color-neutral-900, #111827);font-size:12px;font-weight:600;white-space:nowrap}.wco-contracts__menu-wrapper{display:flex;justify-content:flex-end}.wco-contracts__menu{position:absolute;z-index:10;min-width:230px;padding:4px 0;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000029}.wco-contracts__menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 16px;border:0;background:none;cursor:pointer;font-size:14px;color:var(--wco-color-neutral-900, #111827)}.wco-contracts__menu-item:hover:not(:disabled){background:var(--wco-color-neutral-50, #f9fafb)}.wco-contracts__menu-item:disabled{opacity:.4;cursor:default}.wco-contracts table td{width:25%}.wco-contracts table td:nth-child(1){width:50%}.wco-contracts .iconEmpty{font-size:61px!important}.wco-contracts .bold-600{font-weight:600!important}.wco-contracts .header-modal{margin-top:-24px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { contracts: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }], signers: [{
+                type: Input
+            }], roles: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyIcon: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], generating: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], generateContract: [{
+                type: Output
+            }], downloadDocument: [{
+                type: Output
+            }], signersRequested: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], generateModal: [{
+                type: ViewChild,
+                args: ['generateModal']
+            }], signersModal: [{
+                type: ViewChild,
+                args: ['signersModal']
+            }], closeMenu: [{
+                type: HostListener,
+                args: ['document:click']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 /*
  * Public API Surface of ngx-fenixds
  */
@@ -3354,5 +3697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DatepickerComponent, MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, SubTabsComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent, WcoToastComponent, WcoToastService };
+export { ContractsComponent, DatepickerComponent, MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, SubTabsComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent, WcoToastComponent, WcoToastService };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map