@wawjs/ngx-prime 22.0.1 → 22.0.2

package/fesm2022/wawjs-ngx-prime-icon.mjs

@@ -0,0 +1,107 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+/**
+ * A PrimeIcons icon paired with an optional label — either as a router link
+ * or a clickable action, with a router-active underline indicator. Fills
+ * the gap left by no ngx-prime component wrapping "icon + label + nav
+ * behavior" into one tag (unlike e.g. `p-button`).
+ *
+ * @group Components
+ */
+class Icon {
+    /** PrimeIcons suffix, e.g. `'cog'` renders `pi pi-cog`. */
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Visible label; when empty, renders icon-only (uses `ariaLabel` for accessibility instead). */
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Used when `name` is empty (icon-only). */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** If empty, renders as a clickable action and emits `action` instead of navigating. */
+    routerLink = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    action = output();
+    hasRouterLink = computed(() => this.routerLink().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRouterLink" }] : /* istanbul ignore next */ []));
+    onAction() {
+        this.action.emit();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onAction();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Icon, isStandalone: true, selector: "p-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
+        @if (hasRouterLink()) {
+            <a routerLinkActive="p-icon-active" [class.p-icon-icon-only]="!name()" [attr.aria-label]="!name() ? ariaLabel() || icon() : null" [routerLink]="routerLink()" class="p-icon">
+                <span class="p-icon-wrap">
+                    <i class="pi pi-{{ icon() }} p-icon-glyph"></i>
+                </span>
+
+                @if (name()) {
+                    <span class="p-icon-name">{{ name() }}</span>
+                }
+            </a>
+        } @else {
+            <span [class.p-icon-icon-only]="!name()" class="p-icon" role="button" tabindex="0" [attr.aria-label]="!name() ? ariaLabel() || icon() : null" (click)="onAction()" (keydown)="onKeydown($event)">
+                <span class="p-icon-wrap">
+                    <i class="pi pi-{{ icon() }} p-icon-glyph"></i>
+                </span>
+
+                @if (name()) {
+                    <span class="p-icon-name">{{ name() }}</span>
+                }
+            </span>
+        }
+    `, isInline: true, styles: [".p-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;gap:var(--p-icon-gap, .5rem);padding:var(--p-icon-padding, .5rem .75rem);border-radius:var(--p-content-border-radius, 6px);text-decoration:none;color:var(--p-text-muted-color);transition:color .2s}.p-icon:focus-visible{outline:none;box-shadow:var(--p-focus-ring-shadow, 0 0 0 2px var(--p-primary-color, #3b82f6))}.p-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:1}.p-icon-glyph{font-size:var(--p-icon-size, 1.375rem);line-height:1}.p-icon-name{font-size:.9rem;color:var(--p-text-color);line-height:1}.p-icon:hover,.p-icon:hover .p-icon-glyph,.p-icon:hover .p-icon-name{color:var(--p-primary-color)}.p-icon-active:after{content:\"\";position:absolute;left:50%;bottom:0;width:100%;height:2px;background:var(--p-primary-color);border-radius:999px;transform:translate(-50%)}.p-icon-icon-only{gap:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{ selector: 'p-icon', standalone: true, imports: [RouterLink, RouterLinkActive], template: `
+        @if (hasRouterLink()) {
+            <a routerLinkActive="p-icon-active" [class.p-icon-icon-only]="!name()" [attr.aria-label]="!name() ? ariaLabel() || icon() : null" [routerLink]="routerLink()" class="p-icon">
+                <span class="p-icon-wrap">
+                    <i class="pi pi-{{ icon() }} p-icon-glyph"></i>
+                </span>
+
+                @if (name()) {
+                    <span class="p-icon-name">{{ name() }}</span>
+                }
+            </a>
+        } @else {
+            <span [class.p-icon-icon-only]="!name()" class="p-icon" role="button" tabindex="0" [attr.aria-label]="!name() ? ariaLabel() || icon() : null" (click)="onAction()" (keydown)="onKeydown($event)">
+                <span class="p-icon-wrap">
+                    <i class="pi pi-{{ icon() }} p-icon-glyph"></i>
+                </span>
+
+                @if (name()) {
+                    <span class="p-icon-name">{{ name() }}</span>
+                }
+            </span>
+        }
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;gap:var(--p-icon-gap, .5rem);padding:var(--p-icon-padding, .5rem .75rem);border-radius:var(--p-content-border-radius, 6px);text-decoration:none;color:var(--p-text-muted-color);transition:color .2s}.p-icon:focus-visible{outline:none;box-shadow:var(--p-focus-ring-shadow, 0 0 0 2px var(--p-primary-color, #3b82f6))}.p-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:1}.p-icon-glyph{font-size:var(--p-icon-size, 1.375rem);line-height:1}.p-icon-name{font-size:.9rem;color:var(--p-text-color);line-height:1}.p-icon:hover,.p-icon:hover .p-icon-glyph,.p-icon:hover .p-icon-name{color:var(--p-primary-color)}.p-icon-active:after{content:\"\";position:absolute;left:50%;bottom:0;width:100%;height:2px;background:var(--p-primary-color);border-radius:999px;transform:translate(-50%)}.p-icon-icon-only{gap:0}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+class IconModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: IconModule, imports: [Icon], exports: [Icon] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: IconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Icon],
+                    exports: [Icon]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Icon, IconModule };
+//# sourceMappingURL=wawjs-ngx-prime-icon.mjs.map

package/fesm2022/wawjs-ngx-prime-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wawjs-ngx-prime-icon.mjs","sources":["../../src/icon/icon.ts","../../src/icon/wawjs-ngx-prime-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation, computed, input, output } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n/**\n * A PrimeIcons icon paired with an optional label — either as a router link\n * or a clickable action, with a router-active underline indicator. Fills\n * the gap left by no ngx-prime component wrapping \"icon + label + nav\n * behavior\" into one tag (unlike e.g. `p-button`).\n *\n * @group Components\n */\n@Component({\n    selector: 'p-icon',\n    standalone: true,\n    imports: [RouterLink, RouterLinkActive],\n    template: `\n        @if (hasRouterLink()) {\n            <a routerLinkActive=\"p-icon-active\" [class.p-icon-icon-only]=\"!name()\" [attr.aria-label]=\"!name() ? ariaLabel() || icon() : null\" [routerLink]=\"routerLink()\" class=\"p-icon\">\n                <span class=\"p-icon-wrap\">\n                    <i class=\"pi pi-{{ icon() }} p-icon-glyph\"></i>\n                </span>\n\n                @if (name()) {\n                    <span class=\"p-icon-name\">{{ name() }}</span>\n                }\n            </a>\n        } @else {\n            <span [class.p-icon-icon-only]=\"!name()\" class=\"p-icon\" role=\"button\" tabindex=\"0\" [attr.aria-label]=\"!name() ? ariaLabel() || icon() : null\" (click)=\"onAction()\" (keydown)=\"onKeydown($event)\">\n                <span class=\"p-icon-wrap\">\n                    <i class=\"pi pi-{{ icon() }} p-icon-glyph\"></i>\n                </span>\n\n                @if (name()) {\n                    <span class=\"p-icon-name\">{{ name() }}</span>\n                }\n            </span>\n        }\n    `,\n    styles: `\n        .p-icon {\n            position: relative;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n            white-space: nowrap;\n            cursor: pointer;\n            gap: var(--p-icon-gap, 0.5rem);\n            padding: var(--p-icon-padding, 0.5rem 0.75rem);\n            border-radius: var(--p-content-border-radius, 6px);\n            text-decoration: none;\n            color: var(--p-text-muted-color);\n            transition: color 0.2s;\n        }\n\n        .p-icon:focus-visible {\n            outline: none;\n            box-shadow: var(--p-focus-ring-shadow, 0 0 0 2px var(--p-primary-color, #3b82f6));\n        }\n\n        .p-icon-wrap {\n            position: relative;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            line-height: 1;\n        }\n\n        .p-icon-glyph {\n            font-size: var(--p-icon-size, 1.375rem);\n            line-height: 1;\n        }\n\n        .p-icon-name {\n            font-size: 0.9rem;\n            color: var(--p-text-color);\n            line-height: 1;\n        }\n\n        .p-icon:hover,\n        .p-icon:hover .p-icon-glyph,\n        .p-icon:hover .p-icon-name {\n            color: var(--p-primary-color);\n        }\n\n        .p-icon-active::after {\n            content: '';\n            position: absolute;\n            left: 50%;\n            bottom: 0;\n            width: 100%;\n            height: 2px;\n            background: var(--p-primary-color);\n            border-radius: 999px;\n            transform: translate(-50%);\n        }\n\n        .p-icon-icon-only {\n            gap: 0;\n        }\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class Icon {\n    /** PrimeIcons suffix, e.g. `'cog'` renders `pi pi-cog`. */\n    icon = input.required<string>();\n    /** Visible label; when empty, renders icon-only (uses `ariaLabel` for accessibility instead). */\n    name = input('');\n    /** Used when `name` is empty (icon-only). */\n    ariaLabel = input('');\n    /** If empty, renders as a clickable action and emits `action` instead of navigating. */\n    routerLink = input('');\n\n    action = output<void>();\n\n    hasRouterLink = computed(() => this.routerLink().trim().length > 0);\n\n    onAction(): void {\n        this.action.emit();\n    }\n\n    onKeydown(event: KeyboardEvent): void {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.onAction();\n        }\n    }\n}\n\n@NgModule({\n    imports: [Icon],\n    exports: [Icon]\n})\nexport class IconModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/wawjs-ngx-prime-inputmask.mjs

@@ -2,7 +2,7 @@ export * from '@wawjs/ngx-prime/types/inputmask';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, booleanAttribute, output, effect, Directive, forwardRef, computed, contentChildren, ViewChild, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, output, effect, Directive, forwardRef, computed, contentChildren, isDevMode, ViewChild, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { getUserAgent, isClient } from '@wawjs/css-prime-utils';
 import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
@@ -887,6 +887,10 @@ class InputMask extends BaseInput {
     focused;
     constructor() {
         super();
+        if (isDevMode()) {
+            // eslint-disable-next-line no-console
+            console.warn('`<p-inputmask>` is deprecated and will be removed in a future major version. ' + 'Use a native `<input pInputMask>` instead.');
+        }
         effect(() => {
             const maskValue = this.mask();
             if (maskValue) {