@neural-ui/core 1.7.5 → 1.7.6
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/fesm2022/neural-ui-core-card.mjs +2 -2
- package/fesm2022/neural-ui-core-card.mjs.map +1 -1
- package/fesm2022/neural-ui-core-input-mask.mjs +2 -2
- package/fesm2022/neural-ui-core-input-mask.mjs.map +1 -1
- package/fesm2022/neural-ui-core-password.mjs +42 -6
- package/fesm2022/neural-ui-core-password.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@ class NeuCardComponent {
|
|
|
42
42
|
<ng-content select="[neu-card-footer]" />
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
45
|
-
`, isInline: true, styles: [".neu-card{display:block;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);overflow:visible;transition:box-shadow var(--neu-transition),border-color var(--neu-transition)}.neu-card--hoverable{cursor:pointer}.neu-card--hoverable:hover{box-shadow:var(--neu-shadow-lg);border-color:var(--neu-border-hover)}.neu-card--bordered{border-color:var(--neu-primary)}.neu-card--flat{box-shadow:none;border-color:var(--neu-border)}.neu-card--flat:hover{box-shadow:none}.neu-card__header{padding:var(--neu-space-4) var(--neu-space-5);border-bottom:1px solid var(--neu-border);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-card__header:empty,.neu-card__header:not(:has(*)){display:none}.neu-card__body--none{padding:0}.neu-card__body--sm{padding:var(--neu-space-3) var(--neu-space-4)}.neu-card__body--md{padding:var(--neu-space-5)}.neu-card__body--lg{padding:var(--neu-space-6) var(--neu-space-8)}.neu-card__footer{padding:var(--neu-space-4) var(--neu-space-5);border-top:1px solid var(--neu-border);background:var(--neu-surface-2);display:flex;align-items:center;gap:var(--neu-space-3)}.neu-card__footer:empty,.neu-card__footer:not(:has(*)){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
45
|
+
`, isInline: true, styles: [".neu-card{display:block;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);overflow:visible;transition:box-shadow var(--neu-transition),border-color var(--neu-transition)}.neu-card--hoverable{cursor:pointer}.neu-card--hoverable:hover{box-shadow:var(--neu-shadow-lg);border-color:var(--neu-border-hover)}.neu-card--bordered{border-color:var(--neu-primary)}.neu-card--flat{box-shadow:none;border-color:var(--neu-border)}.neu-card--flat:hover{box-shadow:none}.neu-card__inner{border-radius:inherit;overflow:hidden}.neu-card__header{padding:var(--neu-space-4) var(--neu-space-5);border-bottom:1px solid var(--neu-border);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-card__header:empty,.neu-card__header:not(:has(*)){display:none}.neu-card__body--none{padding:0}.neu-card__body--sm{padding:var(--neu-space-3) var(--neu-space-4)}.neu-card__body--md{padding:var(--neu-space-5)}.neu-card__body--lg{padding:var(--neu-space-6) var(--neu-space-8)}.neu-card__footer{padding:var(--neu-space-4) var(--neu-space-5);border-top:1px solid var(--neu-border);background:var(--neu-surface-2);display:flex;align-items:center;gap:var(--neu-space-3)}.neu-card__footer:empty,.neu-card__footer:not(:has(*)){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuCardComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
@@ -58,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
58
58
|
<ng-content select="[neu-card-footer]" />
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
61
|
-
`, styles: [".neu-card{display:block;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);overflow:visible;transition:box-shadow var(--neu-transition),border-color var(--neu-transition)}.neu-card--hoverable{cursor:pointer}.neu-card--hoverable:hover{box-shadow:var(--neu-shadow-lg);border-color:var(--neu-border-hover)}.neu-card--bordered{border-color:var(--neu-primary)}.neu-card--flat{box-shadow:none;border-color:var(--neu-border)}.neu-card--flat:hover{box-shadow:none}.neu-card__header{padding:var(--neu-space-4) var(--neu-space-5);border-bottom:1px solid var(--neu-border);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-card__header:empty,.neu-card__header:not(:has(*)){display:none}.neu-card__body--none{padding:0}.neu-card__body--sm{padding:var(--neu-space-3) var(--neu-space-4)}.neu-card__body--md{padding:var(--neu-space-5)}.neu-card__body--lg{padding:var(--neu-space-6) var(--neu-space-8)}.neu-card__footer{padding:var(--neu-space-4) var(--neu-space-5);border-top:1px solid var(--neu-border);background:var(--neu-surface-2);display:flex;align-items:center;gap:var(--neu-space-3)}.neu-card__footer:empty,.neu-card__footer:not(:has(*)){display:none}\n"] }]
|
|
61
|
+
`, styles: [".neu-card{display:block;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);box-shadow:var(--neu-shadow-sm);overflow:visible;transition:box-shadow var(--neu-transition),border-color var(--neu-transition)}.neu-card--hoverable{cursor:pointer}.neu-card--hoverable:hover{box-shadow:var(--neu-shadow-lg);border-color:var(--neu-border-hover)}.neu-card--bordered{border-color:var(--neu-primary)}.neu-card--flat{box-shadow:none;border-color:var(--neu-border)}.neu-card--flat:hover{box-shadow:none}.neu-card__inner{border-radius:inherit;overflow:hidden}.neu-card__header{padding:var(--neu-space-4) var(--neu-space-5);border-bottom:1px solid var(--neu-border);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-card__header:empty,.neu-card__header:not(:has(*)){display:none}.neu-card__body--none{padding:0}.neu-card__body--sm{padding:var(--neu-space-3) var(--neu-space-4)}.neu-card__body--md{padding:var(--neu-space-5)}.neu-card__body--lg{padding:var(--neu-space-6) var(--neu-space-8)}.neu-card__footer{padding:var(--neu-space-4) var(--neu-space-5);border-top:1px solid var(--neu-border);background:var(--neu-surface-2);display:flex;align-items:center;gap:var(--neu-space-3)}.neu-card__footer:empty,.neu-card__footer:not(:has(*)){display:none}\n"] }]
|
|
62
62
|
}], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }] } });
|
|
63
63
|
|
|
64
64
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-card.mjs","sources":["../../../../projects/ui-core/card/neu-card.component.ts","../../../../projects/ui-core/card/neural-ui-core-card.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuCardPadding = 'none' | 'sm' | 'md' | 'lg';\n\n/**\n * NeuralUI Card Component\n *\n * Contenedor con sombras y bordes Neural. Soporta header, body y footer\n * via content projection.\n *\n * Uso:\n * <neu-card>\n * <div neu-card-header>Título</div>\n * <p>Contenido</p>\n * <div neu-card-footer>Acciones</div>\n * </neu-card>\n */\n@Component({\n selector: 'neu-card',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses()' },\n template: `\n <div class=\"neu-card__inner\">\n <div class=\"neu-card__header\">\n <ng-content select=\"[neu-card-header]\" />\n </div>\n <div class=\"neu-card__body\" [class]=\"'neu-card__body--' + padding()\">\n <ng-content />\n </div>\n <div class=\"neu-card__footer\">\n <ng-content select=\"[neu-card-footer]\" />\n </div>\n </div>\n `,\n styleUrl: './neu-card.component.scss',\n})\nexport class NeuCardComponent {\n /** Espaciado interior del cuerpo / Inner body padding */\n padding = input<NeuCardPadding>('md');\n\n /** Efecto hover con elevación de sombra / Hover effect with shadow elevation */\n hoverable = input<boolean>(false);\n\n /** Borde con acento de color primario / Border with primary color accent */\n bordered = input<boolean>(false);\n\n /** Card compacta sin bordes ni sombras / Compact card without borders or shadows */\n flat = input<boolean>(false);\n\n readonly hostClasses = computed(() => ({\n 'neu-card': true,\n 'neu-card--hoverable': this.hoverable(),\n 'neu-card--bordered': this.bordered(),\n 'neu-card--flat': this.flat(),\n }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;AAYG;MAsBU,gBAAgB,CAAA;;AAE3B,IAAA,OAAO,GAAG,KAAK,CAAiB,IAAI,8EAAC;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;;AAGjC,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAGhC,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,2EAAC;AAEnB,IAAA,WAAW,GAAG,QAAQ,CAAC,OAAO;AACrC,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,qBAAqB,EAAE,IAAI,CAAC,SAAS,EAAE;AACvC,QAAA,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE;AACrC,QAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE;AAC9B,KAAA,CAAC,kFAAC;wGAlBQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfjB;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"neural-ui-core-card.mjs","sources":["../../../../projects/ui-core/card/neu-card.component.ts","../../../../projects/ui-core/card/neural-ui-core-card.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuCardPadding = 'none' | 'sm' | 'md' | 'lg';\n\n/**\n * NeuralUI Card Component\n *\n * Contenedor con sombras y bordes Neural. Soporta header, body y footer\n * via content projection.\n *\n * Uso:\n * <neu-card>\n * <div neu-card-header>Título</div>\n * <p>Contenido</p>\n * <div neu-card-footer>Acciones</div>\n * </neu-card>\n */\n@Component({\n selector: 'neu-card',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses()' },\n template: `\n <div class=\"neu-card__inner\">\n <div class=\"neu-card__header\">\n <ng-content select=\"[neu-card-header]\" />\n </div>\n <div class=\"neu-card__body\" [class]=\"'neu-card__body--' + padding()\">\n <ng-content />\n </div>\n <div class=\"neu-card__footer\">\n <ng-content select=\"[neu-card-footer]\" />\n </div>\n </div>\n `,\n styleUrl: './neu-card.component.scss',\n})\nexport class NeuCardComponent {\n /** Espaciado interior del cuerpo / Inner body padding */\n padding = input<NeuCardPadding>('md');\n\n /** Efecto hover con elevación de sombra / Hover effect with shadow elevation */\n hoverable = input<boolean>(false);\n\n /** Borde con acento de color primario / Border with primary color accent */\n bordered = input<boolean>(false);\n\n /** Card compacta sin bordes ni sombras / Compact card without borders or shadows */\n flat = input<boolean>(false);\n\n readonly hostClasses = computed(() => ({\n 'neu-card': true,\n 'neu-card--hoverable': this.hoverable(),\n 'neu-card--bordered': this.bordered(),\n 'neu-card--flat': this.flat(),\n }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;AAYG;MAsBU,gBAAgB,CAAA;;AAE3B,IAAA,OAAO,GAAG,KAAK,CAAiB,IAAI,8EAAC;;AAGrC,IAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;;AAGjC,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAGhC,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,2EAAC;AAEnB,IAAA,WAAW,GAAG,QAAQ,CAAC,OAAO;AACrC,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,qBAAqB,EAAE,IAAI,CAAC,SAAS,EAAE;AACvC,QAAA,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE;AACrC,QAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE;AAC9B,KAAA,CAAC,kFAAC;wGAlBQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfjB;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0xCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAGU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBArB5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,WACX,EAAE,EAAA,aAAA,EACI,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,QACzC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAA,QAAA,EAC1B;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0xCAAA,CAAA,EAAA;;;ACzCH;;AAEG;;;;"}
|
|
@@ -79,7 +79,7 @@ class NeuInputMaskComponent {
|
|
|
79
79
|
@if (hint()) {
|
|
80
80
|
<p class="neu-input-mask__hint">{{ hint() }}</p>
|
|
81
81
|
}
|
|
82
|
-
`, isInline: true, styles: [".neu-input-mask{display:grid;gap:.375rem}.neu-input-mask__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-input-mask__control{min-height:2.5rem;border:
|
|
82
|
+
`, isInline: true, styles: [".neu-input-mask{display:grid;gap:.375rem}.neu-input-mask__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-input-mask__control{min-height:2.5rem;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, .625rem);background:var(--neu-surface, #fff);color:var(--neu-text, #111827);padding:0 .75rem;outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-input-mask__control:focus{border-color:var(--neu-primary, #2563eb);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15))}.neu-input-mask__control:focus-visible{outline:none}.neu-input-mask__hint{color:var(--neu-text-muted, #6b7280);font-size:.8125rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuInputMaskComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
@@ -99,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
99
99
|
@if (hint()) {
|
|
100
100
|
<p class="neu-input-mask__hint">{{ hint() }}</p>
|
|
101
101
|
}
|
|
102
|
-
`, styles: [".neu-input-mask{display:grid;gap:.375rem}.neu-input-mask__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-input-mask__control{min-height:2.5rem;border:
|
|
102
|
+
`, styles: [".neu-input-mask{display:grid;gap:.375rem}.neu-input-mask__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-input-mask__control{min-height:2.5rem;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, .625rem);background:var(--neu-surface, #fff);color:var(--neu-text, #111827);padding:0 .75rem;outline:none;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-input-mask__control:focus{border-color:var(--neu-primary, #2563eb);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15))}.neu-input-mask__control:focus-visible{outline:none}.neu-input-mask__hint{color:var(--neu-text-muted, #6b7280);font-size:.8125rem}\n"] }]
|
|
103
103
|
}], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
104
104
|
|
|
105
105
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-input-mask.mjs","sources":["../../../../projects/ui-core/input-mask/neu-input-mask.component.ts","../../../../projects/ui-core/input-mask/neural-ui-core-input-mask.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'neu-input-mask',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuInputMaskComponent), multi: true }],\n host: { class: 'neu-input-mask' },\n template: `\n @if (label()) {\n <label class=\"neu-input-mask__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <input\n class=\"neu-input-mask__control\"\n [id]=\"inputId\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() || cvaDisabled()\"\n (input)=\"onInput($any($event.target).value)\"\n (blur)=\"onTouched()\"\n />\n @if (hint()) {\n <p class=\"neu-input-mask__hint\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-input-mask.component.scss',\n})\nexport class NeuInputMaskComponent implements ControlValueAccessor {\n readonly mask = input('');\n readonly label = input('');\n readonly placeholder = input('');\n readonly hint = input('');\n readonly disabled = input(false);\n readonly valueChange = output<string>();\n readonly inputId = `neu-input-mask-${Math.random().toString(36).slice(2)}`;\n readonly value = signal('');\n readonly cvaDisabled = signal(false);\n private onChange: (value: string) => void = () => {};\n onTouched: () => void = () => {};\n\n writeValue(value: string | null): void {\n this.value.set(value ?? '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled.set(isDisabled);\n }\n\n onInput(raw: string): void {\n const masked = this.applyMask(raw);\n this.value.set(masked);\n this.onChange(masked);\n this.valueChange.emit(masked);\n }\n\n private applyMask(raw: string): string {\n const mask = this.mask();\n if (!mask) {\n return raw;\n }\n const chars = raw.replace(/\\W/g, '').split('');\n let result = '';\n for (const token of mask) {\n const char = chars[0];\n if (!char) {\n break;\n }\n if (token === '9' && /\\d/.test(char)) {\n result += chars.shift();\n } else if (token === 'A' && /[a-z]/i.test(char)) {\n result += chars.shift();\n } else if (token === '*' && /[a-z0-9]/i.test(char)) {\n result += chars.shift();\n } else if (!['9', 'A', '*'].includes(token)) {\n result += token;\n } else {\n chars.shift();\n }\n }\n return result;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"neural-ui-core-input-mask.mjs","sources":["../../../../projects/ui-core/input-mask/neu-input-mask.component.ts","../../../../projects/ui-core/input-mask/neural-ui-core-input-mask.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'neu-input-mask',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuInputMaskComponent), multi: true }],\n host: { class: 'neu-input-mask' },\n template: `\n @if (label()) {\n <label class=\"neu-input-mask__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <input\n class=\"neu-input-mask__control\"\n [id]=\"inputId\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() || cvaDisabled()\"\n (input)=\"onInput($any($event.target).value)\"\n (blur)=\"onTouched()\"\n />\n @if (hint()) {\n <p class=\"neu-input-mask__hint\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-input-mask.component.scss',\n})\nexport class NeuInputMaskComponent implements ControlValueAccessor {\n readonly mask = input('');\n readonly label = input('');\n readonly placeholder = input('');\n readonly hint = input('');\n readonly disabled = input(false);\n readonly valueChange = output<string>();\n readonly inputId = `neu-input-mask-${Math.random().toString(36).slice(2)}`;\n readonly value = signal('');\n readonly cvaDisabled = signal(false);\n private onChange: (value: string) => void = () => {};\n onTouched: () => void = () => {};\n\n writeValue(value: string | null): void {\n this.value.set(value ?? '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled.set(isDisabled);\n }\n\n onInput(raw: string): void {\n const masked = this.applyMask(raw);\n this.value.set(masked);\n this.onChange(masked);\n this.valueChange.emit(masked);\n }\n\n private applyMask(raw: string): string {\n const mask = this.mask();\n if (!mask) {\n return raw;\n }\n const chars = raw.replace(/\\W/g, '').split('');\n let result = '';\n for (const token of mask) {\n const char = chars[0];\n if (!char) {\n break;\n }\n if (token === '9' && /\\d/.test(char)) {\n result += chars.shift();\n } else if (token === 'A' && /[a-z]/i.test(char)) {\n result += chars.shift();\n } else if (token === '*' && /[a-z0-9]/i.test(char)) {\n result += chars.shift();\n } else if (!['9', 'A', '*'].includes(token)) {\n result += token;\n } else {\n chars.shift();\n }\n }\n return result;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -55,8 +55,26 @@ class NeuPasswordComponent {
|
|
|
55
55
|
(blur)="onTouched()"
|
|
56
56
|
/>
|
|
57
57
|
@if (toggleable()) {
|
|
58
|
-
<button
|
|
59
|
-
|
|
58
|
+
<button
|
|
59
|
+
type="button"
|
|
60
|
+
class="neu-password__toggle"
|
|
61
|
+
[disabled]="disabled() || cvaDisabled()"
|
|
62
|
+
[attr.aria-label]="visible() ? hideLabel() : showLabel()"
|
|
63
|
+
(click)="visible.set(!visible())"
|
|
64
|
+
>
|
|
65
|
+
@if (visible()) {
|
|
66
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
67
|
+
<path d="M3 3l18 18" />
|
|
68
|
+
<path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" />
|
|
69
|
+
<path d="M9.9 4.2A10.7 10.7 0 0 1 12 4c5.3 0 8.8 4.3 9.8 6.1a1.8 1.8 0 0 1 0 1.8 18.6 18.6 0 0 1-3.1 3.8" />
|
|
70
|
+
<path d="M6.6 6.6A18.3 18.3 0 0 0 2.2 10a1.8 1.8 0 0 0 0 1.9C3.2 13.7 6.7 18 12 18c1.1 0 2.1-.2 3-.6" />
|
|
71
|
+
</svg>
|
|
72
|
+
} @else {
|
|
73
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
74
|
+
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
|
|
75
|
+
<circle cx="12" cy="12" r="3" />
|
|
76
|
+
</svg>
|
|
77
|
+
}
|
|
60
78
|
</button>
|
|
61
79
|
}
|
|
62
80
|
</div>
|
|
@@ -65,7 +83,7 @@ class NeuPasswordComponent {
|
|
|
65
83
|
<span></span><span></span><span></span><span></span>
|
|
66
84
|
</div>
|
|
67
85
|
}
|
|
68
|
-
`, isInline: true, styles: [".neu-password{display:grid;gap:.375rem}.neu-password__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-password__wrap{display:flex;border:
|
|
86
|
+
`, isInline: true, styles: [".neu-password{display:grid;gap:.375rem}.neu-password__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-password__wrap{display:flex;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, .625rem);background:var(--neu-surface, #fff);overflow:hidden;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-password__wrap:focus-within{border-color:var(--neu-primary, #2563eb);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15))}.neu-password__control{flex:1;min-width:0;min-height:2.5rem;border:0;background:var(--neu-surface, #fff);color:var(--neu-text, #111827);padding:0 .75rem;outline:none}.neu-password__control:focus-visible{outline:none}.neu-password__toggle{border:0;border-left:1px solid var(--neu-border, #d1d5db);background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text, #111827);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;flex:0 0 2.75rem;padding:0;cursor:pointer}.neu-password__toggle svg{width:1.25rem;height:1.25rem}.neu-password__toggle:hover:not(:disabled){background:var(--neu-surface-3, #e5e7eb)}.neu-password__toggle:focus-visible{outline:none}.neu-password__toggle:disabled{cursor:not-allowed;color:var(--neu-text-disabled, #6b7280)}.neu-password__strength{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}.neu-password__strength span{height:.25rem;border-radius:999px;background:var(--neu-border, #e5e7eb)}.neu-password__strength[data-score=\"1\"] span:nth-child(-n+1),.neu-password__strength[data-score=\"2\"] span:nth-child(-n+2),.neu-password__strength[data-score=\"3\"] span:nth-child(-n+3),.neu-password__strength[data-score=\"4\"] span:nth-child(-n+4){background:var(--neu-primary, #2563eb)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
69
87
|
}
|
|
70
88
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuPasswordComponent, decorators: [{
|
|
71
89
|
type: Component,
|
|
@@ -85,8 +103,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
85
103
|
(blur)="onTouched()"
|
|
86
104
|
/>
|
|
87
105
|
@if (toggleable()) {
|
|
88
|
-
<button
|
|
89
|
-
|
|
106
|
+
<button
|
|
107
|
+
type="button"
|
|
108
|
+
class="neu-password__toggle"
|
|
109
|
+
[disabled]="disabled() || cvaDisabled()"
|
|
110
|
+
[attr.aria-label]="visible() ? hideLabel() : showLabel()"
|
|
111
|
+
(click)="visible.set(!visible())"
|
|
112
|
+
>
|
|
113
|
+
@if (visible()) {
|
|
114
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
115
|
+
<path d="M3 3l18 18" />
|
|
116
|
+
<path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" />
|
|
117
|
+
<path d="M9.9 4.2A10.7 10.7 0 0 1 12 4c5.3 0 8.8 4.3 9.8 6.1a1.8 1.8 0 0 1 0 1.8 18.6 18.6 0 0 1-3.1 3.8" />
|
|
118
|
+
<path d="M6.6 6.6A18.3 18.3 0 0 0 2.2 10a1.8 1.8 0 0 0 0 1.9C3.2 13.7 6.7 18 12 18c1.1 0 2.1-.2 3-.6" />
|
|
119
|
+
</svg>
|
|
120
|
+
} @else {
|
|
121
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
122
|
+
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
|
|
123
|
+
<circle cx="12" cy="12" r="3" />
|
|
124
|
+
</svg>
|
|
125
|
+
}
|
|
90
126
|
</button>
|
|
91
127
|
}
|
|
92
128
|
</div>
|
|
@@ -95,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
95
131
|
<span></span><span></span><span></span><span></span>
|
|
96
132
|
</div>
|
|
97
133
|
}
|
|
98
|
-
`, styles: [".neu-password{display:grid;gap:.375rem}.neu-password__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-password__wrap{display:flex;border:
|
|
134
|
+
`, styles: [".neu-password{display:grid;gap:.375rem}.neu-password__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-password__wrap{display:flex;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, .625rem);background:var(--neu-surface, #fff);overflow:hidden;transition:border-color var(--neu-transition),box-shadow var(--neu-transition)}.neu-password__wrap:focus-within{border-color:var(--neu-primary, #2563eb);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15))}.neu-password__control{flex:1;min-width:0;min-height:2.5rem;border:0;background:var(--neu-surface, #fff);color:var(--neu-text, #111827);padding:0 .75rem;outline:none}.neu-password__control:focus-visible{outline:none}.neu-password__toggle{border:0;border-left:1px solid var(--neu-border, #d1d5db);background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text, #111827);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;flex:0 0 2.75rem;padding:0;cursor:pointer}.neu-password__toggle svg{width:1.25rem;height:1.25rem}.neu-password__toggle:hover:not(:disabled){background:var(--neu-surface-3, #e5e7eb)}.neu-password__toggle:focus-visible{outline:none}.neu-password__toggle:disabled{cursor:not-allowed;color:var(--neu-text-disabled, #6b7280)}.neu-password__strength{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}.neu-password__strength span{height:.25rem;border-radius:999px;background:var(--neu-border, #e5e7eb)}.neu-password__strength[data-score=\"1\"] span:nth-child(-n+1),.neu-password__strength[data-score=\"2\"] span:nth-child(-n+2),.neu-password__strength[data-score=\"3\"] span:nth-child(-n+3),.neu-password__strength[data-score=\"4\"] span:nth-child(-n+4){background:var(--neu-primary, #2563eb)}\n"] }]
|
|
99
135
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], showStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStrength", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
100
136
|
|
|
101
137
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-password.mjs","sources":["../../../../projects/ui-core/password/neu-password.component.ts","../../../../projects/ui-core/password/neural-ui-core-password.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'neu-password',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuPasswordComponent), multi: true }],\n host: { class: 'neu-password' },\n template: `\n @if (label()) {\n <label class=\"neu-password__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"neu-password__wrap\">\n <input\n class=\"neu-password__control\"\n [id]=\"inputId\"\n [type]=\"visible() ? 'text' : 'password'\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() || cvaDisabled()\"\n (input)=\"setValue($any($event.target).value)\"\n (blur)=\"onTouched()\"\n />\n @if (toggleable()) {\n <button
|
|
1
|
+
{"version":3,"file":"neural-ui-core-password.mjs","sources":["../../../../projects/ui-core/password/neu-password.component.ts","../../../../projects/ui-core/password/neural-ui-core-password.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'neu-password',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuPasswordComponent), multi: true }],\n host: { class: 'neu-password' },\n template: `\n @if (label()) {\n <label class=\"neu-password__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"neu-password__wrap\">\n <input\n class=\"neu-password__control\"\n [id]=\"inputId\"\n [type]=\"visible() ? 'text' : 'password'\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled() || cvaDisabled()\"\n (input)=\"setValue($any($event.target).value)\"\n (blur)=\"onTouched()\"\n />\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"neu-password__toggle\"\n [disabled]=\"disabled() || cvaDisabled()\"\n [attr.aria-label]=\"visible() ? hideLabel() : showLabel()\"\n (click)=\"visible.set(!visible())\"\n >\n @if (visible()) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 3l18 18\" />\n <path d=\"M10.6 10.6a2 2 0 0 0 2.8 2.8\" />\n <path d=\"M9.9 4.2A10.7 10.7 0 0 1 12 4c5.3 0 8.8 4.3 9.8 6.1a1.8 1.8 0 0 1 0 1.8 18.6 18.6 0 0 1-3.1 3.8\" />\n <path d=\"M6.6 6.6A18.3 18.3 0 0 0 2.2 10a1.8 1.8 0 0 0 0 1.9C3.2 13.7 6.7 18 12 18c1.1 0 2.1-.2 3-.6\" />\n </svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n }\n </button>\n }\n </div>\n @if (showStrength()) {\n <div class=\"neu-password__strength\" [attr.data-score]=\"strength()\">\n <span></span><span></span><span></span><span></span>\n </div>\n }\n `,\n styleUrl: './neu-password.component.scss',\n})\nexport class NeuPasswordComponent implements ControlValueAccessor {\n readonly label = input('');\n readonly placeholder = input('');\n readonly disabled = input(false);\n readonly toggleable = input(true);\n readonly showStrength = input(false);\n readonly showLabel = input('Show');\n readonly hideLabel = input('Hide');\n readonly valueChange = output<string>();\n readonly inputId = `neu-password-${Math.random().toString(36).slice(2)}`;\n readonly value = signal('');\n readonly visible = signal(false);\n readonly cvaDisabled = signal(false);\n readonly strength = computed(() => {\n const value = this.value();\n return [value.length >= 8, /[A-Z]/.test(value), /\\d/.test(value), /\\W/.test(value)].filter(Boolean).length;\n });\n private onChange: (value: string) => void = () => {};\n onTouched: () => void = () => {};\n\n writeValue(value: string | null): void {\n this.value.set(value ?? '');\n }\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled.set(isDisabled);\n }\n setValue(value: string): void {\n this.value.set(value);\n this.onChange(value);\n this.valueChange.emit(value);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED