@po-ui/ng-components 18.20.0 → 18.21.0

package/fesm2022/po-ui-ng-components.mjs

@@ -14427,15 +14427,28 @@ function requiredFailed(required, disabled, value) {
         (typeof value === 'boolean' && value);
     return required && !disabled && !valid;
 }
-function maxlengpoailed(maxlength, value) {
-    const validMaxlength = maxlength || maxlength === 0;
-    const validValue = (value || value === 0) && value.toString();
-    return validMaxlength && validValue && validValue.length > Number(maxlength);
+function maxlengpoailed(maxlength, value, maskNoLengthValidation = false) {
+    return validateLength(maxlength, value, 'max', maskNoLengthValidation);
+}
+function minlengpoailed(minlength, value, maskNoLengthValidation = false) {
+    return validateLength(minlength, value, 'min', maskNoLengthValidation);
 }
-function minlengpoailed(minlength, value) {
-    const validMinlength = minlength || minlength === 0;
+function validateLength(limit, value, comparison, maskNoLengthValidation = false) {
+    if (!limit && limit !== 0) {
+        return false;
+    }
     const validValue = (value || value === 0) && value.toString();
-    return validMinlength && validValue && validValue.length < Number(minlength);
+    if (!validValue) {
+        return false;
+    }
+    const processedValue = maskNoLengthValidation ? validValue.replace(/[^\w]/g, '') : validValue;
+    if (comparison === 'max') {
+        return processedValue.length > Number(limit);
+    }
+    else if (comparison === 'min') {
+        return processedValue.length < Number(limit);
+    }
+    return false;
 }
 function patternFailed(pattern, value) {
     let reg;
@@ -31244,6 +31257,37 @@ class PoInputBaseComponent {
      *
      */
     upperCase = false;
+    _maskNoLengthValidation = false;
+    /**
+     * @description
+     *
+     * Define se os caracteres especiais da máscara devem ser ignorados ao validar os comprimentos mínimo (`minLength`) e máximo (`maxLength`) do campo.
+     *
+     * - Quando `true`, apenas os caracteres alfanuméricos serão contabilizados para a validação dos comprimentos.
+     * - Quando `false`, todos os caracteres, incluindo os especiais da máscara, serão considerados na validação.
+     *
+     * > Será ignorado essa propriedade , caso esteja utilizando junto com a propriedade `p-mask-format-model`.
+     *
+     * Exemplo:
+     * ```
+     * <po-input
+     *   p-mask="999-999"
+     *   p-maxlength="6"
+     *   p-minlength="4"
+     *   p-mask-no-length-validation="true"
+     * ></po-input>
+     * ```
+     * - Entrada: `123-456` → Validação será aplicada somente aos números, ignorando o caractere especial `-`.
+     *
+     * @default `false`
+     */
+    set maskNoLengthValidation(value) {
+        this._maskNoLengthValidation = convertToBoolean(value);
+        this.validateModel();
+    }
+    get maskNoLengthValidation() {
+        return this._maskNoLengthValidation;
+    }
     /**
      * @optional
      *
@@ -31515,7 +31559,7 @@ class PoInputBaseComponent {
                 }
             };
         }
-        if (maxlengpoailed(this.maxlength, this.getScreenValue())) {
+        if (maxlengpoailed(this.maxlength, this.getScreenValue(), this.maskFormatModel ? false : this.maskNoLengthValidation)) {
             this.isInvalid = true;
             return {
                 maxlength: {
@@ -31523,7 +31567,7 @@ class PoInputBaseComponent {
                 }
             };
         }
-        if (minlengpoailed(this.minlength, this.getScreenValue())) {
+        if (minlengpoailed(this.minlength, this.getScreenValue(), this.maskFormatModel ? false : this.maskNoLengthValidation)) {
             this.isInvalid = true;
             return {
                 minlength: {
@@ -31574,7 +31618,7 @@ class PoInputBaseComponent {
         }
     }
     static ɵfac = function PoInputBaseComponent_Factory(t) { return new (t || PoInputBaseComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoInputBaseComponent, inputs: { autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], icon: [0, "p-icon", "icon"], emitAllChanges: [2, "p-emit-all-changes", "emitAllChanges", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", errorAsyncProperties: [0, "p-error-async-properties", "errorAsyncProperties"], errorPattern: [0, "p-error-pattern", "errorPattern"], optional: [0, "p-optional", "optional"], showErrorMessageRequired: [0, "p-required-field-error-message", "showErrorMessageRequired"], upperCase: [2, "p-upper-case", "upperCase", convertToBoolean], noAutocomplete: [0, "p-no-autocomplete", "noAutocomplete"], placeholder: [0, "p-placeholder", "placeholder"], setDisabled: [0, "p-disabled", "setDisabled"], setReadonly: [0, "p-readonly", "setReadonly"], setRequired: [0, "p-required", "setRequired"], showRequired: [0, "p-show-required", "showRequired"], setClean: [0, "p-clean", "setClean"], setPattern: [0, "p-pattern", "setPattern"], maxlength: [0, "p-maxlength", "maxlength"], minlength: [0, "p-minlength", "minlength"], setMask: [0, "p-mask", "setMask"], setMaskFormatModel: [0, "p-mask-format-model", "setMaskFormatModel"] }, outputs: { blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model" }, features: [i0.ɵɵInputTransformsFeature] });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoInputBaseComponent, inputs: { autoFocus: [2, "p-auto-focus", "autoFocus", convertToBoolean], icon: [0, "p-icon", "icon"], emitAllChanges: [2, "p-emit-all-changes", "emitAllChanges", convertToBoolean], label: [0, "p-label", "label"], help: [0, "p-help", "help"], name: "name", errorAsyncProperties: [0, "p-error-async-properties", "errorAsyncProperties"], errorPattern: [0, "p-error-pattern", "errorPattern"], optional: [0, "p-optional", "optional"], showErrorMessageRequired: [0, "p-required-field-error-message", "showErrorMessageRequired"], upperCase: [2, "p-upper-case", "upperCase", convertToBoolean], maskNoLengthValidation: [0, "p-mask-no-length-validation", "maskNoLengthValidation"], noAutocomplete: [0, "p-no-autocomplete", "noAutocomplete"], placeholder: [0, "p-placeholder", "placeholder"], setDisabled: [0, "p-disabled", "setDisabled"], setReadonly: [0, "p-readonly", "setReadonly"], setRequired: [0, "p-required", "setRequired"], showRequired: [0, "p-show-required", "showRequired"], setClean: [0, "p-clean", "setClean"], setPattern: [0, "p-pattern", "setPattern"], maxlength: [0, "p-maxlength", "maxlength"], minlength: [0, "p-minlength", "minlength"], setMask: [0, "p-mask", "setMask"], setMaskFormatModel: [0, "p-mask-format-model", "setMaskFormatModel"] }, outputs: { blur: "p-blur", enter: "p-enter", change: "p-change", changeModel: "p-change-model" }, features: [i0.ɵɵInputTransformsFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoInputBaseComponent, [{
         type: Directive
@@ -31611,6 +31655,9 @@ class PoInputBaseComponent {
         }], upperCase: [{
             type: Input,
             args: [{ alias: 'p-upper-case', transform: convertToBoolean }]
+        }], maskNoLengthValidation: [{
+            type: Input,
+            args: ['p-mask-no-length-validation']
         }], blur: [{
             type: Output,
             args: ['p-blur']
@@ -54990,6 +55037,16 @@ class PoStepperBaseComponent {
      * @default `po-icon-edit`
      */
     iconActive;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Desabilita o clique nos steps.
+     *
+     * @default `false`
+     */
+    disabledClick = false;
     initializeSteps() {
         const hasStatus = this._steps.some(step => step.status !== PoStepperStatus.Default);
         if (!hasStatus && this.step === 1) {
@@ -54997,7 +55054,7 @@ class PoStepperBaseComponent {
         }
     }
     static ɵfac = function PoStepperBaseComponent_Factory(t) { return new (t || PoStepperBaseComponent)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoStepperBaseComponent, inputs: { stepIcons: [0, "p-step-icons", "stepIcons"], stepSize: [0, "p-step-size", "stepSize"], alignCenter: [0, "p-align-center", "alignCenter"], orientation: [0, "p-orientation", "orientation"], step: [0, "p-step", "step"], steps: [0, "p-steps", "steps"], sequential: [0, "p-sequential", "sequential"], iconDone: [0, "p-step-icon-done", "iconDone"], iconActive: [0, "p-step-icon-active", "iconActive"] }, outputs: { onChangeStep: "p-change-step" } });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoStepperBaseComponent, inputs: { stepIcons: [0, "p-step-icons", "stepIcons"], stepSize: [0, "p-step-size", "stepSize"], alignCenter: [0, "p-align-center", "alignCenter"], orientation: [0, "p-orientation", "orientation"], step: [0, "p-step", "step"], steps: [0, "p-steps", "steps"], sequential: [0, "p-sequential", "sequential"], iconDone: [0, "p-step-icon-done", "iconDone"], iconActive: [0, "p-step-icon-active", "iconActive"], disabledClick: [0, "p-disable-click", "disabledClick"] }, outputs: { onChangeStep: "p-change-step" } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperBaseComponent, [{
         type: Directive
@@ -55031,6 +55088,9 @@ class PoStepperBaseComponent {
         }], iconActive: [{
             type: Input,
             args: ['p-step-icon-active']
+        }], disabledClick: [{
+            type: Input,
+            args: ['p-disable-click']
         }] }); })();
 
 const _c0$9 = ["labelElement"];
@@ -55053,6 +55113,7 @@ class PoStepperLabelComponent {
     // Informa se a orientação do stepper é vertical.
     isVerticalOrientation;
     labelElement;
+    disabledClick = false;
     displayedContent;
     tooltipContent;
     maxLabelLength = 100;
@@ -55104,14 +55165,14 @@ class PoStepperLabelComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelElement = _t.first);
         } }, hostBindings: function PoStepperLabelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mouseover", function PoStepperLabelComponent_mouseover_HostBindingHandler() { return ctx.onMouseOver(); })("mouseout", function PoStepperLabelComponent_mouseout_HostBindingHandler() { return ctx.onMouseOut(); });
-        } }, inputs: { alignCenter: [0, "p-align-center", "alignCenter"], content: [0, "p-content", "content"], status: [0, "p-status", "status"], isVerticalOrientation: [0, "p-vertical-orientation", "isVerticalOrientation"] }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 12, consts: [["labelElement", ""], ["aria-hidden", "true", 1, "po-stepper-label", 3, "mouseover", "mouseout", "p-tooltip"]], template: function PoStepperLabelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { alignCenter: [0, "p-align-center", "alignCenter"], content: [0, "p-content", "content"], status: [0, "p-status", "status"], isVerticalOrientation: [0, "p-vertical-orientation", "isVerticalOrientation"], disabledClick: [0, "p-disable-click", "disabledClick"] }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 14, consts: [["labelElement", ""], ["aria-hidden", "true", 1, "po-stepper-label", 3, "mouseover", "mouseout", "p-tooltip"]], template: function PoStepperLabelComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("mouseover", function PoStepperLabelComponent_Template_div_mouseover_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseOver()); })("mouseout", function PoStepperLabelComponent_Template_div_mouseout_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseOut()); });
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵclassProp("po-link", ctx.status !== "disabled")("po-stepper-label-active", ctx.status === "active" || ctx.status === "error")("po-stepper-label-done", ctx.status === "done")("po-stepper-label-vertical", ctx.isVerticalOrientation)("po-stepper-label-center", ctx.alignCenter);
+            i0.ɵɵclassProp("po-link", ctx.status !== "disabled" && !ctx.disabledClick)("po-stepper-disabled-click", ctx.disabledClick)("po-stepper-label-active", ctx.status === "active" || ctx.status === "error")("po-stepper-label-done", ctx.status === "done")("po-stepper-label-vertical", ctx.isVerticalOrientation)("po-stepper-label-center", ctx.alignCenter);
             i0.ɵɵproperty("p-tooltip", ctx.tooltipContent);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", ctx.displayedContent, "\n");
@@ -55119,7 +55180,7 @@ class PoStepperLabelComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperLabelComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper-label', template: "<div\n  #labelElement\n  class=\"po-stepper-label\"\n  [class.po-link]=\"status !== 'disabled'\"\n  [class.po-stepper-label-active]=\"status === 'active' || status === 'error'\"\n  [class.po-stepper-label-done]=\"status === 'done'\"\n  [class.po-stepper-label-vertical]=\"isVerticalOrientation\"\n  [class.po-stepper-label-center]=\"alignCenter\"\n  [p-tooltip]=\"tooltipContent\"\n  aria-hidden=\"true\"\n  (mouseover)=\"onMouseOver()\"\n  (mouseout)=\"onMouseOut()\"\n>\n  {{ displayedContent }}\n</div>\n" }]
+        args: [{ selector: 'po-stepper-label', template: "<div\n  #labelElement\n  class=\"po-stepper-label\"\n  [class.po-link]=\"status !== 'disabled' && !this.disabledClick\"\n  [class.po-stepper-disabled-click]=\"this.disabledClick\"\n  [class.po-stepper-label-active]=\"status === 'active' || status === 'error'\"\n  [class.po-stepper-label-done]=\"status === 'done'\"\n  [class.po-stepper-label-vertical]=\"isVerticalOrientation\"\n  [class.po-stepper-label-center]=\"alignCenter\"\n  [p-tooltip]=\"tooltipContent\"\n  aria-hidden=\"true\"\n  (mouseover)=\"onMouseOver()\"\n  (mouseout)=\"onMouseOut()\"\n>\n  {{ displayedContent }}\n</div>\n" }]
     }], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], { alignCenter: [{
             type: Input,
             args: ['p-align-center']
@@ -55135,6 +55196,9 @@ class PoStepperLabelComponent {
         }], labelElement: [{
             type: ViewChild,
             args: ['labelElement']
+        }], disabledClick: [{
+            type: Input,
+            args: ['p-disable-click']
         }], onMouseOver: [{
             type: HostListener,
             args: ['mouseover']
@@ -55148,7 +55212,7 @@ function PoStepperStepComponent_po_stepper_label_3_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(0, "po-stepper-label", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-align-center", ctx_r0.alignCenter)("p-content", ctx_r0.label)("p-status", ctx_r0.status)("p-vertical-orientation", ctx_r0.isVerticalOrientation);
+    i0.ɵɵproperty("p-align-center", ctx_r0.alignCenter)("p-content", ctx_r0.label)("p-status", ctx_r0.status)("p-vertical-orientation", ctx_r0.isVerticalOrientation)("p-disable-click", ctx_r0.disabledClick);
     i0.ɵɵattribute("aria-label", ctx_r0.label);
 } }
 const poStepperStepSizeDefault = 24;
@@ -55232,6 +55296,7 @@ class PoStepperStepComponent {
     click = new EventEmitter();
     // Evento que será emitido ao focar no *step* e pressionar a tecla *enter*.
     enter = new EventEmitter();
+    disabledClick = false;
     literals = {
         ...poStepLiteralsDefault[poLocaleDefault],
         ...poStepLiteralsDefault[getShortBrowserLanguage()]
@@ -55279,12 +55344,12 @@ class PoStepperStepComponent {
         }
     }
     onClick() {
-        if (this.status !== PoStepperStatus.Disabled) {
+        if (this.status !== PoStepperStatus.Disabled && !this.disabledClick) {
             this.click.emit();
         }
     }
     onEnter() {
-        if (this.status !== PoStepperStatus.Disabled) {
+        if (this.status !== PoStepperStatus.Disabled && !this.disabledClick) {
             this.enter.emit();
         }
     }
@@ -55301,15 +55366,16 @@ class PoStepperStepComponent {
         }
     }
     static ɵfac = function PoStepperStepComponent_Factory(t) { return new (t || PoStepperStepComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoStepperStepComponent, selectors: [["po-stepper-step"]], inputs: { alignCenter: [0, "p-align-center", "alignCenter"], circleContent: [0, "p-circle-content", "circleContent"], nextStatus: [0, "p-next-status", "nextStatus"], orientation: [0, "p-orientation", "orientation"], label: [0, "p-label", "label"], status: [0, "p-status", "status"], stepIcons: [0, "p-step-icons", "stepIcons"], stepSize: [0, "p-step-size", "stepSize"], iconDefault: [0, "p-icon-default", "iconDefault"], iconDone: [0, "p-step-icon-done", "iconDone"], iconActive: [0, "p-step-icon-active", "iconActive"], isVerticalOrientation: [0, "p-vertical-orientation", "isVerticalOrientation"] }, outputs: { activated: "p-activated", click: "p-click", enter: "p-enter" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 24, consts: [["role", "tab", 1, "po-stepper-step", 3, "click", "keydown.enter", "ngClass", "tabindex"], [1, "po-stepper-step-container"], [3, "p-align-center", "p-content", "p-icons", "p-size", "p-status", "p-icon-default", "p-step-icon-done", "p-step-icon-active"], ["class", "po-stepper-step-label-position", 3, "p-align-center", "p-content", "p-status", "p-vertical-orientation", 4, "ngIf"], [1, "po-stepper-step-label-position", 3, "p-align-center", "p-content", "p-status", "p-vertical-orientation"]], template: function PoStepperStepComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoStepperStepComponent, selectors: [["po-stepper-step"]], inputs: { alignCenter: [0, "p-align-center", "alignCenter"], circleContent: [0, "p-circle-content", "circleContent"], nextStatus: [0, "p-next-status", "nextStatus"], orientation: [0, "p-orientation", "orientation"], label: [0, "p-label", "label"], status: [0, "p-status", "status"], stepIcons: [0, "p-step-icons", "stepIcons"], stepSize: [0, "p-step-size", "stepSize"], iconDefault: [0, "p-icon-default", "iconDefault"], iconDone: [0, "p-step-icon-done", "iconDone"], iconActive: [0, "p-step-icon-active", "iconActive"], isVerticalOrientation: [0, "p-vertical-orientation", "isVerticalOrientation"], disabledClick: [0, "p-disable-click", "disabledClick"] }, outputs: { activated: "p-activated", click: "p-click", enter: "p-enter" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 26, consts: [["role", "tab", 1, "po-stepper-step", 3, "click", "keydown.enter", "ngClass", "tabindex"], [1, "po-stepper-step-container"], [3, "p-align-center", "p-content", "p-icons", "p-size", "p-status", "p-icon-default", "p-step-icon-done", "p-step-icon-active"], ["class", "po-stepper-step-label-position", 3, "p-align-center", "p-content", "p-status", "p-vertical-orientation", "p-disable-click", 4, "ngIf"], [1, "po-stepper-step-label-position", 3, "p-align-center", "p-content", "p-status", "p-vertical-orientation", "p-disable-click"]], template: function PoStepperStepComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function PoStepperStepComponent_Template_div_click_0_listener() { return ctx.onClick(); })("keydown.enter", function PoStepperStepComponent_Template_div_keydown_enter_0_listener() { return ctx.onEnter(); });
             i0.ɵɵelementStart(1, "div", 1);
             i0.ɵɵelement(2, "po-stepper-circle", 2);
-            i0.ɵɵtemplate(3, PoStepperStepComponent_po_stepper_label_3_Template, 1, 5, "po-stepper-label", 3);
+            i0.ɵɵtemplate(3, PoStepperStepComponent_po_stepper_label_3_Template, 1, 6, "po-stepper-label", 3);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.getStatusClass(ctx.status))("tabindex", ctx.status === "disabled" ? -1 : 0);
+            i0.ɵɵclassProp("po-stepper-disabled-click", ctx.disabledClick);
+            i0.ɵɵproperty("ngClass", ctx.getStatusClass(ctx.status))("tabindex", ctx.status === "disabled" || ctx.disabledClick ? -1 : 0);
             i0.ɵɵattribute("aria-selected", ctx.status === "active")("aria-disabled", ctx.status === "disabled")("aria-required", ctx.status === "error");
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("min-width", ctx.minWidthCircle, "px")("min-height", ctx.minHeightCircle, "px");
@@ -55321,7 +55387,7 @@ class PoStepperStepComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperStepComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper-step', template: "<div\n  class=\"po-stepper-step\"\n  [ngClass]=\"getStatusClass(status)\"\n  role=\"tab\"\n  [tabindex]=\"status === 'disabled' ? -1 : 0\"\n  [attr.aria-selected]=\"status === 'active'\"\n  [attr.aria-disabled]=\"status === 'disabled'\"\n  [attr.aria-required]=\"status === 'error'\"\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onEnter()\"\n>\n  <div class=\"po-stepper-step-container\">\n    <po-stepper-circle\n      [p-align-center]=\"alignCenter\"\n      [p-content]=\"circleContent\"\n      [p-icons]=\"stepIcons\"\n      [p-size]=\"stepSize\"\n      [p-status]=\"status\"\n      [p-icon-default]=\"iconDefault\"\n      [p-step-icon-done]=\"iconDone\"\n      [p-step-icon-active]=\"iconActive\"\n      [class.po-stepper-circle-vertical]=\"isVerticalOrientation\"\n      [class.po-stepper-circle-vertical-center]=\"alignCenter\"\n      [class.po-stepper-circle-horizontal]=\"!isVerticalOrientation\"\n      [style.minWidth.px]=\"minWidthCircle\"\n      [style.minHeight.px]=\"minHeightCircle\"\n    >\n    </po-stepper-circle>\n\n    <po-stepper-label\n      *ngIf=\"label\"\n      class=\"po-stepper-step-label-position\"\n      [p-align-center]=\"alignCenter\"\n      [p-content]=\"label\"\n      [p-status]=\"status\"\n      [p-vertical-orientation]=\"isVerticalOrientation\"\n      [attr.aria-label]=\"label\"\n    >\n    </po-stepper-label>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-stepper-step', template: "<div\n  class=\"po-stepper-step\"\n  [ngClass]=\"getStatusClass(status)\"\n  role=\"tab\"\n  [tabindex]=\"status === 'disabled' || disabledClick ? -1 : 0\"\n  [attr.aria-selected]=\"status === 'active'\"\n  [attr.aria-disabled]=\"status === 'disabled'\"\n  [attr.aria-required]=\"status === 'error'\"\n  [class.po-stepper-disabled-click]=\"disabledClick\"\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onEnter()\"\n>\n  <div class=\"po-stepper-step-container\">\n    <po-stepper-circle\n      [p-align-center]=\"alignCenter\"\n      [p-content]=\"circleContent\"\n      [p-icons]=\"stepIcons\"\n      [p-size]=\"stepSize\"\n      [p-status]=\"status\"\n      [p-icon-default]=\"iconDefault\"\n      [p-step-icon-done]=\"iconDone\"\n      [p-step-icon-active]=\"iconActive\"\n      [class.po-stepper-circle-vertical]=\"isVerticalOrientation\"\n      [class.po-stepper-circle-vertical-center]=\"alignCenter\"\n      [class.po-stepper-circle-horizontal]=\"!isVerticalOrientation\"\n      [style.minWidth.px]=\"minWidthCircle\"\n      [style.minHeight.px]=\"minHeightCircle\"\n    >\n    </po-stepper-circle>\n\n    <po-stepper-label\n      *ngIf=\"label\"\n      class=\"po-stepper-step-label-position\"\n      [p-align-center]=\"alignCenter\"\n      [p-content]=\"label\"\n      [p-status]=\"status\"\n      [p-vertical-orientation]=\"isVerticalOrientation\"\n      [attr.aria-label]=\"label\"\n      [p-disable-click]=\"disabledClick\"\n    >\n    </po-stepper-label>\n  </div>\n</div>\n" }]
     }], null, { alignCenter: [{
             type: Input,
             args: ['p-align-center']
@@ -55367,6 +55433,9 @@ class PoStepperStepComponent {
         }], enter: [{
             type: Output,
             args: ['p-enter']
+        }], disabledClick: [{
+            type: Input,
+            args: ['p-disable-click']
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PoStepperStepComponent, { className: "PoStepperStepComponent", filePath: "lib/components/po-stepper/po-stepper-step/po-stepper-step.component.ts", lineNumber: 27 }); })();
 
@@ -55411,7 +55480,7 @@ function PoStepperComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", index_r4 > 0);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("po-stepper-step-position-center", ctx_r4.alignCenter);
-    i0.ɵɵproperty("p-align-center", ctx_r4.alignCenter)("p-circle-content", index_r4 + 1)("p-label", step_r3.label)("p-orientation", ctx_r4.orientation)("p-status", step_r3.status)("p-step-icons", ctx_r4.stepIcons)("p-step-size", ctx_r4.stepSize)("p-next-status", (tmp_12_0 = ctx_r4.poSteps.get(index_r4 + 1)) == null ? null : tmp_12_0.status)("p-icon-default", step_r3.iconDefault)("p-step-icon-active", ctx_r4.iconActive)("p-step-icon-done", ctx_r4.iconDone)("p-vertical-orientation", ctx_r4.isVerticalOrientation);
+    i0.ɵɵproperty("p-align-center", ctx_r4.alignCenter)("p-circle-content", index_r4 + 1)("p-label", step_r3.label)("p-orientation", ctx_r4.orientation)("p-status", step_r3.status)("p-step-icons", ctx_r4.stepIcons)("p-step-size", ctx_r4.stepSize)("p-next-status", (tmp_12_0 = ctx_r4.poSteps.get(index_r4 + 1)) == null ? null : tmp_12_0.status)("p-icon-default", step_r3.iconDefault)("p-step-icon-active", ctx_r4.iconActive)("p-step-icon-done", ctx_r4.iconDone)("p-vertical-orientation", ctx_r4.isVerticalOrientation)("p-disable-click", ctx_r4.disabledClick);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", index_r4 < ctx_r4.stepList.length - 1);
 } }
@@ -55747,10 +55816,10 @@ class PoStepperComponent extends PoStepperBaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poSteps = _t);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$8, decls: 4, vars: 9, consts: [["role", "tablist"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-stepper-content", 4, "ngIf"], [1, "po-stepper-step-wrapper"], [3, "po-stepper-step-bar-top", "po-stepper-step-dashed-border-vertical", "left", 4, "ngIf"], [3, "p-activated", "p-click", "p-enter", "p-align-center", "p-circle-content", "p-label", "p-orientation", "p-status", "p-step-icons", "p-step-size", "p-next-status", "p-icon-default", "p-step-icon-active", "p-step-icon-done", "p-vertical-orientation"], [3, "po-stepper-step-bar-bottom", "po-stepper-step-bar-bottom-center", "po-stepper-step-bar-right", "po-stepper-step-bar-center", "po-stepper-step-dashed-border", "po-stepper-step-dashed-border-vertical", "top", "left", 4, "ngIf"], [1, "po-stepper-content"]], template: function PoStepperComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$8, decls: 4, vars: 9, consts: [["role", "tablist"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-stepper-content", 4, "ngIf"], [1, "po-stepper-step-wrapper"], [3, "po-stepper-step-bar-top", "po-stepper-step-dashed-border-vertical", "left", 4, "ngIf"], [3, "p-activated", "p-click", "p-enter", "p-align-center", "p-circle-content", "p-label", "p-orientation", "p-status", "p-step-icons", "p-step-size", "p-next-status", "p-icon-default", "p-step-icon-active", "p-step-icon-done", "p-vertical-orientation", "p-disable-click"], [3, "po-stepper-step-bar-bottom", "po-stepper-step-bar-bottom-center", "po-stepper-step-bar-right", "po-stepper-step-bar-center", "po-stepper-step-dashed-border", "po-stepper-step-dashed-border-vertical", "top", "left", 4, "ngIf"], [1, "po-stepper-content"]], template: function PoStepperComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div")(1, "div", 0);
-            i0.ɵɵtemplate(2, PoStepperComponent_ng_container_2_Template, 5, 16, "ng-container", 1);
+            i0.ɵɵtemplate(2, PoStepperComponent_ng_container_2_Template, 5, 17, "ng-container", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, PoStepperComponent_div_3_Template, 2, 0, "div", 2);
             i0.ɵɵelementEnd();
@@ -55766,7 +55835,7 @@ class PoStepperComponent extends PoStepperBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper', template: "<div class=\"po-stepper-{{ orientation }}\">\n  <div role=\"tablist\" class=\"po-stepper-container-{{ orientation }}\">\n    <ng-container *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\">\n      <div class=\"po-stepper-step-wrapper\">\n        <div\n          *ngIf=\"index > 0\"\n          [class.po-stepper-step-bar-top]=\"alignCenter && isVerticalOrientation\"\n          [class.po-stepper-step-dashed-border-vertical]=\"\n            alignCenter && isVerticalOrientation && isDashedBorderTop(step, index)\n          \"\n          [style.left.px]=\"\n            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\n          \"\n        ></div>\n\n        <po-stepper-step\n          [class.po-stepper-step-position-center]=\"alignCenter\"\n          [p-align-center]=\"alignCenter\"\n          [p-circle-content]=\"index + 1\"\n          [p-label]=\"step.label\"\n          [p-orientation]=\"orientation\"\n          [p-status]=\"step.status\"\n          [p-step-icons]=\"stepIcons\"\n          [p-step-size]=\"stepSize\"\n          [p-next-status]=\"poSteps.get(index + 1)?.status\"\n          [p-icon-default]=\"step.iconDefault\"\n          [p-step-icon-active]=\"iconActive\"\n          [p-step-icon-done]=\"iconDone\"\n          [p-vertical-orientation]=\"isVerticalOrientation\"\n          (p-activated)=\"onStepActive(step)\"\n          (p-click)=\"changeStep(index, step)\"\n          (p-enter)=\"changeStep(index, step)\"\n        >\n        </po-stepper-step>\n\n        <div\n          *ngIf=\"index < stepList.length - 1\"\n          [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\n          [class.po-stepper-step-bar-bottom-center]=\"alignCenter && isVerticalOrientation\"\n          [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\n          [class.po-stepper-step-bar-center]=\"alignCenter && !isVerticalOrientation\"\n          [class.po-stepper-step-dashed-border]=\"!isVerticalOrientation && isDashedBorder(step, index)\"\n          [class.po-stepper-step-dashed-border-vertical]=\"isVerticalOrientation && isDashedBorder(step, index)\"\n          [style.top.px]=\"!isVerticalOrientation ? (stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\"\n          [style.left.px]=\"\n            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\n          \"\n        ></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-stepper', template: "<div class=\"po-stepper-{{ orientation }}\">\n  <div role=\"tablist\" class=\"po-stepper-container-{{ orientation }}\">\n    <ng-container *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\">\n      <div class=\"po-stepper-step-wrapper\">\n        <div\n          *ngIf=\"index > 0\"\n          [class.po-stepper-step-bar-top]=\"alignCenter && isVerticalOrientation\"\n          [class.po-stepper-step-dashed-border-vertical]=\"\n            alignCenter && isVerticalOrientation && isDashedBorderTop(step, index)\n          \"\n          [style.left.px]=\"\n            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\n          \"\n        ></div>\n\n        <po-stepper-step\n          [class.po-stepper-step-position-center]=\"alignCenter\"\n          [p-align-center]=\"alignCenter\"\n          [p-circle-content]=\"index + 1\"\n          [p-label]=\"step.label\"\n          [p-orientation]=\"orientation\"\n          [p-status]=\"step.status\"\n          [p-step-icons]=\"stepIcons\"\n          [p-step-size]=\"stepSize\"\n          [p-next-status]=\"poSteps.get(index + 1)?.status\"\n          [p-icon-default]=\"step.iconDefault\"\n          [p-step-icon-active]=\"iconActive\"\n          [p-step-icon-done]=\"iconDone\"\n          [p-vertical-orientation]=\"isVerticalOrientation\"\n          [p-disable-click]=\"disabledClick\"\n          (p-activated)=\"onStepActive(step)\"\n          (p-click)=\"changeStep(index, step)\"\n          (p-enter)=\"changeStep(index, step)\"\n        >\n        </po-stepper-step>\n\n        <div\n          *ngIf=\"index < stepList.length - 1\"\n          [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\n          [class.po-stepper-step-bar-bottom-center]=\"alignCenter && isVerticalOrientation\"\n          [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\n          [class.po-stepper-step-bar-center]=\"alignCenter && !isVerticalOrientation\"\n          [class.po-stepper-step-dashed-border]=\"!isVerticalOrientation && isDashedBorder(step, index)\"\n          [class.po-stepper-step-dashed-border-vertical]=\"isVerticalOrientation && isDashedBorder(step, index)\"\n          [style.top.px]=\"!isVerticalOrientation ? (stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\"\n          [style.left.px]=\"\n            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null\n          \"\n        ></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
     }], () => [{ type: i0.ChangeDetectorRef }], { poSteps: [{
             type: ContentChildren,
             args: [PoStepComponent]