orbiq-neural-ui-kit 1.0.11 → 1.0.13
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.
|
@@ -290,9 +290,13 @@ class NeuralBadgeComponent {
|
|
|
290
290
|
},
|
|
291
291
|
};
|
|
292
292
|
const sizeClasses = {
|
|
293
|
+
xs: 'h-3 px-1 text-[10px]',
|
|
293
294
|
sm: 'h-4 px-1.5 text-xs',
|
|
294
295
|
md: 'h-5 px-1.5 text-xs',
|
|
295
296
|
lg: 'h-6 px-2 text-[13px] tracking-[0.02em]',
|
|
297
|
+
xl: 'h-7 px-2.5 text-sm',
|
|
298
|
+
'2xl': 'h-8 px-3 text-base',
|
|
299
|
+
'3xl': 'h-10 px-4 text-lg',
|
|
296
300
|
};
|
|
297
301
|
return [
|
|
298
302
|
themeClasses[this.theme()][this.variant()],
|
|
@@ -300,7 +304,18 @@ class NeuralBadgeComponent {
|
|
|
300
304
|
].join(' ');
|
|
301
305
|
}, /* @ts-ignore */
|
|
302
306
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
303
|
-
iconSize = computed(() =>
|
|
307
|
+
iconSize = computed(() => {
|
|
308
|
+
switch (this.size()) {
|
|
309
|
+
case 'xs': return 'size-2';
|
|
310
|
+
case 'sm': return 'size-2.5';
|
|
311
|
+
case 'md': return 'size-2.5';
|
|
312
|
+
case 'lg': return 'size-3';
|
|
313
|
+
case 'xl': return 'size-3.5';
|
|
314
|
+
case '2xl': return 'size-4';
|
|
315
|
+
case '3xl': return 'size-5';
|
|
316
|
+
default: return 'size-2.5';
|
|
317
|
+
}
|
|
318
|
+
}, /* @ts-ignore */
|
|
304
319
|
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
305
320
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
306
321
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralBadgeComponent, isStandalone: true, selector: "neural-badge", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hasPrefixSlot: { classPropertyName: "hasPrefixSlot", publicName: "hasPrefixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasSuffixSlot: { classPropertyName: "hasSuffixSlot", publicName: "hasSuffixSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
@@ -447,10 +462,13 @@ class NeuralButtonComponent {
|
|
|
447
462
|
}
|
|
448
463
|
spinnerClasses = computed(() => {
|
|
449
464
|
return {
|
|
450
|
-
'xs': 'size-3.5',
|
|
451
|
-
'sm': 'size-4',
|
|
452
|
-
'md': 'size-
|
|
453
|
-
'lg': 'size-
|
|
465
|
+
'xs': 'size-3.5', // 14px
|
|
466
|
+
'sm': 'size-4', // 16px
|
|
467
|
+
'md': 'size-5', // 20px
|
|
468
|
+
'lg': 'size-6', // 24px
|
|
469
|
+
'xl': 'size-7', // 28px
|
|
470
|
+
'2xl': 'size-8', // 32px
|
|
471
|
+
'3xl': 'size-10', // 40px
|
|
454
472
|
}[this.size()];
|
|
455
473
|
}, /* @ts-ignore */
|
|
456
474
|
...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -522,15 +540,21 @@ class NeuralButtonComponent {
|
|
|
522
540
|
const sizeClasses = this.iconOnly()
|
|
523
541
|
? {
|
|
524
542
|
xs: 'h-6 w-6 rounded-3',
|
|
525
|
-
sm: 'h-
|
|
526
|
-
md: 'h-
|
|
527
|
-
lg: 'h-
|
|
543
|
+
sm: 'h-8 w-8 rounded-4',
|
|
544
|
+
md: 'h-10 w-10 rounded-4',
|
|
545
|
+
lg: 'h-12 w-12 rounded-5',
|
|
546
|
+
xl: 'h-14 w-14 rounded-5',
|
|
547
|
+
'2xl': 'h-16 w-16 rounded-6',
|
|
548
|
+
'3xl': 'h-20 w-20 rounded-7',
|
|
528
549
|
}[s]
|
|
529
550
|
: {
|
|
530
551
|
xs: 'h-6 text-xs px-1.5 rounded-3',
|
|
531
|
-
sm: 'h-
|
|
532
|
-
md: 'h-
|
|
533
|
-
lg: 'h-
|
|
552
|
+
sm: 'h-8 text-sm px-2 rounded-4',
|
|
553
|
+
md: 'h-10 text-base-medium px-2.5 rounded-4',
|
|
554
|
+
lg: 'h-12 text-lg-medium px-3 rounded-5',
|
|
555
|
+
xl: 'h-14 text-xl px-4 rounded-5',
|
|
556
|
+
'2xl': 'h-16 text-2xl px-5 rounded-6',
|
|
557
|
+
'3xl': 'h-20 text-3xl px-6 rounded-7',
|
|
534
558
|
}[s];
|
|
535
559
|
return [
|
|
536
560
|
'inline-flex items-center justify-center gap-2 transition-colors shrink-0',
|
|
@@ -1005,9 +1029,19 @@ class NeuralCheckboxComponent {
|
|
|
1005
1029
|
return 'inline-flex';
|
|
1006
1030
|
const hasDetail = this.rendersDescription() || this.hasError();
|
|
1007
1031
|
const sizeVal = this.size();
|
|
1008
|
-
const
|
|
1009
|
-
|
|
1010
|
-
|
|
1032
|
+
const getContainerSize = () => {
|
|
1033
|
+
switch (sizeVal) {
|
|
1034
|
+
case 'xs': return hasDetail ? 'px-1 py-1' : 'h-5 px-1';
|
|
1035
|
+
case 'sm': return hasDetail ? 'px-1.5 py-1.5' : 'h-7 px-1.5';
|
|
1036
|
+
case 'md': return hasDetail ? 'px-2 py-2' : 'h-8 px-2';
|
|
1037
|
+
case 'lg': return hasDetail ? 'px-3 py-3' : 'h-10 px-3';
|
|
1038
|
+
case 'xl': return hasDetail ? 'px-4 py-4' : 'h-12 px-4';
|
|
1039
|
+
case '2xl': return hasDetail ? 'px-5 py-5' : 'h-14 px-5';
|
|
1040
|
+
case '3xl': return hasDetail ? 'px-6 py-6' : 'h-16 px-6';
|
|
1041
|
+
default: return hasDetail ? 'px-1.5 py-1.5' : 'h-7 px-1.5';
|
|
1042
|
+
}
|
|
1043
|
+
};
|
|
1044
|
+
const sizeClass = getContainerSize();
|
|
1011
1045
|
const classes = ['flex group rounded-4 transition-colors', sizeClass];
|
|
1012
1046
|
if (!hasDetail)
|
|
1013
1047
|
classes.push('justify-center');
|
|
@@ -1029,11 +1063,16 @@ class NeuralCheckboxComponent {
|
|
|
1029
1063
|
}
|
|
1030
1064
|
inputClasses = computed(() => {
|
|
1031
1065
|
const sizeVal = this.size();
|
|
1032
|
-
const
|
|
1033
|
-
|
|
1034
|
-
:
|
|
1035
|
-
|
|
1036
|
-
|
|
1066
|
+
const sizeMap = {
|
|
1067
|
+
xs: 'w-3 h-3',
|
|
1068
|
+
sm: 'w-3.5 h-3.5',
|
|
1069
|
+
md: 'w-4 h-4',
|
|
1070
|
+
lg: 'w-5 h-5',
|
|
1071
|
+
xl: 'w-6 h-6',
|
|
1072
|
+
'2xl': 'w-7 h-7',
|
|
1073
|
+
'3xl': 'w-8 h-8'
|
|
1074
|
+
};
|
|
1075
|
+
const sizeClasses = sizeMap[sizeVal] || sizeMap['sm'];
|
|
1037
1076
|
if (this.disabled()) {
|
|
1038
1077
|
return [
|
|
1039
1078
|
sizeClasses,
|
|
@@ -1389,28 +1428,58 @@ class NeuralTextInputComponent {
|
|
|
1389
1428
|
}, /* @ts-ignore */
|
|
1390
1429
|
...(ngDevMode ? [{ debugName: "suffixClassesCombined" }] : /* istanbul ignore next */ []));
|
|
1391
1430
|
prefixClasses = computed(() => {
|
|
1392
|
-
const
|
|
1393
|
-
|
|
1431
|
+
const sizeMap = {
|
|
1432
|
+
xs: 'ps-1.5',
|
|
1433
|
+
sm: 'ps-2',
|
|
1434
|
+
md: 'ps-3',
|
|
1435
|
+
lg: 'ps-4',
|
|
1436
|
+
xl: 'ps-5',
|
|
1437
|
+
'2xl': 'ps-6',
|
|
1438
|
+
'3xl': 'ps-8'
|
|
1439
|
+
};
|
|
1440
|
+
return sizeMap[this.size()] || 'ps-2';
|
|
1394
1441
|
}, /* @ts-ignore */
|
|
1395
1442
|
...(ngDevMode ? [{ debugName: "prefixClasses" }] : /* istanbul ignore next */ []));
|
|
1396
1443
|
suffixClasses = computed(() => {
|
|
1397
|
-
const
|
|
1398
|
-
|
|
1444
|
+
const sizeMap = {
|
|
1445
|
+
xs: 'pe-1.5',
|
|
1446
|
+
sm: 'pe-2',
|
|
1447
|
+
md: 'pe-3',
|
|
1448
|
+
lg: 'pe-4',
|
|
1449
|
+
xl: 'pe-5',
|
|
1450
|
+
'2xl': 'pe-6',
|
|
1451
|
+
'3xl': 'pe-8'
|
|
1452
|
+
};
|
|
1453
|
+
return sizeMap[this.size()] || 'pe-2';
|
|
1399
1454
|
}, /* @ts-ignore */
|
|
1400
1455
|
...(ngDevMode ? [{ debugName: "suffixClasses" }] : /* istanbul ignore next */ []));
|
|
1401
1456
|
inputClasses = computed(() => {
|
|
1402
1457
|
const sizeVal = this.size();
|
|
1403
|
-
const
|
|
1404
|
-
:
|
|
1405
|
-
|
|
1406
|
-
|
|
1458
|
+
const sizeMap = {
|
|
1459
|
+
xs: 'text-xs rounded-3 h-6',
|
|
1460
|
+
sm: 'text-sm rounded-4 h-8',
|
|
1461
|
+
md: 'text-base rounded-4 h-10',
|
|
1462
|
+
lg: 'text-lg rounded-5 h-12',
|
|
1463
|
+
xl: 'text-xl rounded-5 h-14',
|
|
1464
|
+
'2xl': 'text-2xl rounded-6 h-16',
|
|
1465
|
+
'3xl': 'text-3xl rounded-7 h-20'
|
|
1466
|
+
};
|
|
1467
|
+
const sizeClass = sizeMap[sizeVal] || sizeMap['sm'];
|
|
1407
1468
|
const hasPrefix = this.hasPrefixSlot();
|
|
1408
1469
|
const hasSuffix = this.hasSuffixSlot();
|
|
1409
|
-
const
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
: `py-
|
|
1470
|
+
const getPadding = () => {
|
|
1471
|
+
switch (sizeVal) {
|
|
1472
|
+
case 'xs': return `py-1 ${hasPrefix ? 'ps-6' : 'ps-1.5'} ${hasSuffix ? 'pe-6' : 'pe-1.5'}`;
|
|
1473
|
+
case 'sm': return `py-1.5 ${hasPrefix ? 'ps-8' : 'ps-2'} ${hasSuffix ? 'pe-8' : 'pe-2'}`;
|
|
1474
|
+
case 'md': return `py-2 ${hasPrefix ? 'ps-10' : 'ps-3'} ${hasSuffix ? 'pe-10' : 'pe-3'}`;
|
|
1475
|
+
case 'lg': return `py-2.5 ${hasPrefix ? 'ps-12' : 'ps-4'} ${hasSuffix ? 'pe-12' : 'pe-4'}`;
|
|
1476
|
+
case 'xl': return `py-3 ${hasPrefix ? 'ps-14' : 'ps-5'} ${hasSuffix ? 'pe-14' : 'pe-5'}`;
|
|
1477
|
+
case '2xl': return `py-4 ${hasPrefix ? 'ps-16' : 'ps-6'} ${hasSuffix ? 'pe-16' : 'pe-6'}`;
|
|
1478
|
+
case '3xl': return `py-5 ${hasPrefix ? 'ps-20' : 'ps-8'} ${hasSuffix ? 'pe-20' : 'pe-8'}`;
|
|
1479
|
+
default: return `py-1.5 ${hasPrefix ? 'ps-8' : 'ps-2'} ${hasSuffix ? 'pe-8' : 'pe-2'}`;
|
|
1480
|
+
}
|
|
1481
|
+
};
|
|
1482
|
+
const paddingClass = getPadding();
|
|
1414
1483
|
const variantVal = this.disabled() ? 'disabled' : this.variant();
|
|
1415
1484
|
let variantClass = '';
|
|
1416
1485
|
if (variantVal === 'subtle') {
|
|
@@ -1921,8 +1990,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1921
1990
|
class NeuralFooterComponent {
|
|
1922
1991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1923
1992
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralFooterComponent, isStandalone: true, selector: "neural-footer", ngImport: i0, template: `
|
|
1924
|
-
<footer class="
|
|
1925
|
-
|
|
1993
|
+
<footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
|
|
1994
|
+
|
|
1995
|
+
<!-- Zona Izquierda: Estados e Indicadores -->
|
|
1996
|
+
<div class="flex items-center gap-3">
|
|
1997
|
+
<ng-content select="[left]"></ng-content>
|
|
1998
|
+
</div>
|
|
1999
|
+
<!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
|
|
2000
|
+
<div class="flex items-center justify-center">
|
|
2001
|
+
<ng-content></ng-content>
|
|
2002
|
+
</div>
|
|
2003
|
+
<!-- Zona Derecha: Acciones y Herramientas Operativas -->
|
|
2004
|
+
<div class="flex items-center gap-2">
|
|
2005
|
+
<ng-content select="[right]"></ng-content>
|
|
2006
|
+
</div>
|
|
1926
2007
|
</footer>
|
|
1927
2008
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1928
2009
|
}
|
|
@@ -1933,8 +2014,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1933
2014
|
standalone: true,
|
|
1934
2015
|
imports: [CommonModule],
|
|
1935
2016
|
template: `
|
|
1936
|
-
<footer class="
|
|
1937
|
-
|
|
2017
|
+
<footer class="flex items-center justify-between w-full h-10 px-4 bg-white border-t border-outline-gray-2 text-ink-gray-5 text-xs">
|
|
2018
|
+
|
|
2019
|
+
<!-- Zona Izquierda: Estados e Indicadores -->
|
|
2020
|
+
<div class="flex items-center gap-3">
|
|
2021
|
+
<ng-content select="[left]"></ng-content>
|
|
2022
|
+
</div>
|
|
2023
|
+
<!-- Zona Central: Copyright o Mensajes (Fallback o contenido por defecto) -->
|
|
2024
|
+
<div class="flex items-center justify-center">
|
|
2025
|
+
<ng-content></ng-content>
|
|
2026
|
+
</div>
|
|
2027
|
+
<!-- Zona Derecha: Acciones y Herramientas Operativas -->
|
|
2028
|
+
<div class="flex items-center gap-2">
|
|
2029
|
+
<ng-content select="[right]"></ng-content>
|
|
2030
|
+
</div>
|
|
1938
2031
|
</footer>
|
|
1939
2032
|
`
|
|
1940
2033
|
}]
|
|
@@ -1952,7 +2045,16 @@ class NeuralFormLabelComponent {
|
|
|
1952
2045
|
size = input('sm', /* @ts-ignore */
|
|
1953
2046
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1954
2047
|
labelClasses = computed(() => {
|
|
1955
|
-
|
|
2048
|
+
const sizeMap = {
|
|
2049
|
+
xs: 'text-xs',
|
|
2050
|
+
sm: 'text-sm',
|
|
2051
|
+
md: 'text-base',
|
|
2052
|
+
lg: 'text-lg',
|
|
2053
|
+
xl: 'text-xl',
|
|
2054
|
+
'2xl': 'text-2xl',
|
|
2055
|
+
'3xl': 'text-3xl'
|
|
2056
|
+
};
|
|
2057
|
+
return sizeMap[this.size()] || 'text-sm';
|
|
1956
2058
|
}, /* @ts-ignore */
|
|
1957
2059
|
...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
|
|
1958
2060
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2000,6 +2102,9 @@ class NeuralSpinnerComponent {
|
|
|
2000
2102
|
sm: { px: 14, thickness: 2, inset: 1.05 },
|
|
2001
2103
|
md: { px: 16, thickness: 2, inset: 1.2 },
|
|
2002
2104
|
lg: { px: 20, thickness: 2, inset: 1.5 },
|
|
2105
|
+
xl: { px: 24, thickness: 2.5, inset: 1.8 },
|
|
2106
|
+
'2xl': { px: 32, thickness: 3, inset: 2.4 },
|
|
2107
|
+
'3xl': { px: 40, thickness: 4, inset: 3 },
|
|
2003
2108
|
};
|
|
2004
2109
|
colorClass = computed(() => {
|
|
2005
2110
|
const themeVal = this.theme();
|
|
@@ -2115,10 +2220,13 @@ class NeuralProgressComponent {
|
|
|
2115
2220
|
...(ngDevMode ? [{ debugName: "hasHintSlot" }] : /* istanbul ignore next */ []));
|
|
2116
2221
|
indicatorContainerClasses = computed(() => {
|
|
2117
2222
|
const heightClass = {
|
|
2223
|
+
xs: 'h-[1px]',
|
|
2118
2224
|
sm: 'h-[2px]',
|
|
2119
2225
|
md: 'h-1',
|
|
2120
2226
|
lg: 'h-2',
|
|
2121
2227
|
xl: 'h-3',
|
|
2228
|
+
'2xl': 'h-4',
|
|
2229
|
+
'3xl': 'h-6',
|
|
2122
2230
|
}[this.size()] || 'h-[2px]';
|
|
2123
2231
|
const layoutClasses = this.intervals() ? 'flex space-x-1' : 'bg-surface-gray-2';
|
|
2124
2232
|
return [heightClass, layoutClasses].join(' ');
|
|
@@ -2468,18 +2576,34 @@ class NeuralRadioComponent {
|
|
|
2468
2576
|
if (!this.padded())
|
|
2469
2577
|
return classes.join(' ');
|
|
2470
2578
|
if (this.hasDescription()) {
|
|
2471
|
-
|
|
2579
|
+
const getContainerSize = () => {
|
|
2580
|
+
switch (this.size()) {
|
|
2581
|
+
case 'xs': return 'px-1 py-1';
|
|
2582
|
+
case 'sm': return 'px-1.5 py-1.5';
|
|
2583
|
+
case 'md': return 'px-2 py-2';
|
|
2584
|
+
case 'lg': return 'px-3 py-3';
|
|
2585
|
+
case 'xl': return 'px-4 py-4';
|
|
2586
|
+
case '2xl': return 'px-5 py-5';
|
|
2587
|
+
case '3xl': return 'px-6 py-6';
|
|
2588
|
+
default: return 'px-1.5 py-1.5';
|
|
2589
|
+
}
|
|
2590
|
+
};
|
|
2591
|
+
classes.push(getContainerSize());
|
|
2472
2592
|
}
|
|
2473
2593
|
else {
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2594
|
+
const getContainerSize = () => {
|
|
2595
|
+
switch (this.size()) {
|
|
2596
|
+
case 'xs': return 'h-5 items-center px-1';
|
|
2597
|
+
case 'sm': return 'h-7 items-center px-1.5';
|
|
2598
|
+
case 'md': return 'h-8 items-center px-2';
|
|
2599
|
+
case 'lg': return 'h-10 items-center px-3';
|
|
2600
|
+
case 'xl': return 'h-12 items-center px-4';
|
|
2601
|
+
case '2xl': return 'h-14 items-center px-5';
|
|
2602
|
+
case '3xl': return 'h-16 items-center px-6';
|
|
2603
|
+
default: return 'h-7 items-center px-1.5';
|
|
2604
|
+
}
|
|
2605
|
+
};
|
|
2606
|
+
classes.push(getContainerSize());
|
|
2483
2607
|
}
|
|
2484
2608
|
if (!this.isDisabled()) {
|
|
2485
2609
|
classes.push('hover:bg-surface-gray-3 active:bg-surface-gray-4');
|
|
@@ -2490,17 +2614,38 @@ class NeuralRadioComponent {
|
|
|
2490
2614
|
circleClasses = computed(() => {
|
|
2491
2615
|
let control = '';
|
|
2492
2616
|
let offset = '';
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2617
|
+
switch (this.size()) {
|
|
2618
|
+
case 'xs':
|
|
2619
|
+
control = 'size-[13px] group-has-[:checked]:border-[3.7px]';
|
|
2620
|
+
offset = 'mt-[2px]';
|
|
2621
|
+
break;
|
|
2622
|
+
case 'sm':
|
|
2623
|
+
control = 'size-3.5 group-has-[:checked]:border-4';
|
|
2624
|
+
offset = 'mt-[3.5px]';
|
|
2625
|
+
break;
|
|
2626
|
+
case 'md':
|
|
2627
|
+
control = 'size-4 group-has-[:checked]:border-[4.5px]';
|
|
2628
|
+
offset = 'mt-[2.5px]';
|
|
2629
|
+
break;
|
|
2630
|
+
case 'lg':
|
|
2631
|
+
control = 'size-5 group-has-[:checked]:border-[5px]';
|
|
2632
|
+
offset = 'mt-1';
|
|
2633
|
+
break;
|
|
2634
|
+
case 'xl':
|
|
2635
|
+
control = 'size-6 group-has-[:checked]:border-[6px]';
|
|
2636
|
+
offset = 'mt-1';
|
|
2637
|
+
break;
|
|
2638
|
+
case '2xl':
|
|
2639
|
+
control = 'size-7 group-has-[:checked]:border-[7px]';
|
|
2640
|
+
offset = 'mt-0.5';
|
|
2641
|
+
break;
|
|
2642
|
+
case '3xl':
|
|
2643
|
+
control = 'size-8 group-has-[:checked]:border-[8px]';
|
|
2644
|
+
offset = 'mt-0.5';
|
|
2645
|
+
break;
|
|
2646
|
+
default:
|
|
2647
|
+
control = 'size-3.5 group-has-[:checked]:border-4';
|
|
2648
|
+
offset = 'mt-[3.5px]';
|
|
2504
2649
|
}
|
|
2505
2650
|
const classes = [
|
|
2506
2651
|
'box-border shrink-0 rounded-full border bg-surface-base transition-colors',
|
|
@@ -2701,6 +2846,19 @@ class NeuralSliderComponent {
|
|
|
2701
2846
|
return ((val - this.min()) / range) * 100;
|
|
2702
2847
|
}, /* @ts-ignore */
|
|
2703
2848
|
...(ngDevMode ? [{ debugName: "fillPercentage" }] : /* istanbul ignore next */ []));
|
|
2849
|
+
containerHeightClass = computed(() => {
|
|
2850
|
+
switch (this.size()) {
|
|
2851
|
+
case 'xs': return 'h-3';
|
|
2852
|
+
case 'sm': return 'h-4';
|
|
2853
|
+
case 'md': return 'h-5';
|
|
2854
|
+
case 'lg': return 'h-6';
|
|
2855
|
+
case 'xl': return 'h-8';
|
|
2856
|
+
case '2xl': return 'h-10';
|
|
2857
|
+
case '3xl': return 'h-12';
|
|
2858
|
+
default: return 'h-4';
|
|
2859
|
+
}
|
|
2860
|
+
}, /* @ts-ignore */
|
|
2861
|
+
...(ngDevMode ? [{ debugName: "containerHeightClass" }] : /* istanbul ignore next */ []));
|
|
2704
2862
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2705
2863
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralSliderComponent, isStandalone: true, selector: "neural-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasLabelSlot: { classPropertyName: "hasLabelSlot", publicName: "hasLabelSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDescriptionSlot: { classPropertyName: "hasDescriptionSlot", publicName: "hasDescriptionSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
|
|
2706
2864
|
<neural-labeling-wrapper [enabled]="hasLabeling()">
|
|
@@ -2717,7 +2875,7 @@ class NeuralSliderComponent {
|
|
|
2717
2875
|
</neural-input-label>
|
|
2718
2876
|
}
|
|
2719
2877
|
|
|
2720
|
-
<div class="relative flex select-none touch-none items-center w-full" [class]="
|
|
2878
|
+
<div class="relative flex select-none touch-none items-center w-full" [class]="containerHeightClass()">
|
|
2721
2879
|
<!-- We use a native range input styled to look like the custom slider -->
|
|
2722
2880
|
<input
|
|
2723
2881
|
type="range"
|
|
@@ -2765,7 +2923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
2765
2923
|
</neural-input-label>
|
|
2766
2924
|
}
|
|
2767
2925
|
|
|
2768
|
-
<div class="relative flex select-none touch-none items-center w-full" [class]="
|
|
2926
|
+
<div class="relative flex select-none touch-none items-center w-full" [class]="containerHeightClass()">
|
|
2769
2927
|
<!-- We use a native range input styled to look like the custom slider -->
|
|
2770
2928
|
<input
|
|
2771
2929
|
type="range"
|
|
@@ -2849,6 +3007,18 @@ class NeuralSwitchComponent {
|
|
|
2849
3007
|
rendersDescription = this.labeling.rendersDescription;
|
|
2850
3008
|
iconClasses = 'me-2 size-4 flex-shrink-0 text-ink-gray-6';
|
|
2851
3009
|
switchClasses = computed(() => {
|
|
3010
|
+
const getSizeClass = () => {
|
|
3011
|
+
switch (this.size()) {
|
|
3012
|
+
case 'xs': return 'h-3.5 w-[24px] border-2';
|
|
3013
|
+
case 'sm': return 'h-4 w-[26px] border-2';
|
|
3014
|
+
case 'md': return 'h-5 w-8 border-[3px]';
|
|
3015
|
+
case 'lg': return 'h-6 w-10 border-[3px]';
|
|
3016
|
+
case 'xl': return 'h-7 w-12 border-4';
|
|
3017
|
+
case '2xl': return 'h-8 w-14 border-4';
|
|
3018
|
+
case '3xl': return 'h-10 w-16 border-[5px]';
|
|
3019
|
+
default: return 'h-4 w-[26px] border-2';
|
|
3020
|
+
}
|
|
3021
|
+
};
|
|
2852
3022
|
return [
|
|
2853
3023
|
'relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-transparent transition-colors duration-100 ease-in-out items-center',
|
|
2854
3024
|
this.padded() ? 'focus:outline-none focus:ring-0' : '',
|
|
@@ -2856,27 +3026,41 @@ class NeuralSwitchComponent {
|
|
|
2856
3026
|
this.valueModel()
|
|
2857
3027
|
? 'bg-surface-gray-10 enabled:hover:bg-surface-gray-9 active:bg-surface-gray-8 group-hover:enabled:bg-surface-gray-9'
|
|
2858
3028
|
: 'bg-surface-gray-4 enabled:hover:bg-surface-gray-5 active:bg-surface-gray-6 group-hover:enabled:bg-surface-gray-5',
|
|
2859
|
-
|
|
2860
|
-
? 'h-5 w-8 border-[3px]'
|
|
2861
|
-
: this.size() === 'sm'
|
|
2862
|
-
? 'h-4 w-[26px] border-2'
|
|
2863
|
-
: 'h-3.5 w-[24px] border-2',
|
|
3029
|
+
getSizeClass(),
|
|
2864
3030
|
].join(' ');
|
|
2865
3031
|
}, /* @ts-ignore */
|
|
2866
3032
|
...(ngDevMode ? [{ debugName: "switchClasses" }] : /* istanbul ignore next */ []));
|
|
2867
3033
|
switchCircleClasses = computed(() => {
|
|
3034
|
+
const getCircleSize = () => {
|
|
3035
|
+
switch (this.size()) {
|
|
3036
|
+
case 'xs': return 'h-2.5 w-2.5';
|
|
3037
|
+
case 'sm': return 'h-3 w-3';
|
|
3038
|
+
case 'md': return 'h-3.5 w-3.5';
|
|
3039
|
+
case 'lg': return 'h-4 w-4';
|
|
3040
|
+
case 'xl': return 'h-5 w-5';
|
|
3041
|
+
case '2xl': return 'h-6 w-6';
|
|
3042
|
+
case '3xl': return 'h-7 w-7';
|
|
3043
|
+
default: return 'h-3 w-3';
|
|
3044
|
+
}
|
|
3045
|
+
};
|
|
3046
|
+
const getTranslate = () => {
|
|
3047
|
+
if (!this.valueModel())
|
|
3048
|
+
return 'translate-x-0';
|
|
3049
|
+
switch (this.size()) {
|
|
3050
|
+
case 'xs': return 'translate-x-2.5 rtl:-translate-x-2.5';
|
|
3051
|
+
case 'sm': return 'translate-x-2.5 rtl:-translate-x-2.5';
|
|
3052
|
+
case 'md': return 'translate-x-3 rtl:-translate-x-3';
|
|
3053
|
+
case 'lg': return 'translate-x-4 rtl:-translate-x-4';
|
|
3054
|
+
case 'xl': return 'translate-x-5 rtl:-translate-x-5';
|
|
3055
|
+
case '2xl': return 'translate-x-6 rtl:-translate-x-6';
|
|
3056
|
+
case '3xl': return 'translate-x-7 rtl:-translate-x-7';
|
|
3057
|
+
default: return 'translate-x-2.5 rtl:-translate-x-2.5';
|
|
3058
|
+
}
|
|
3059
|
+
};
|
|
2868
3060
|
return [
|
|
2869
3061
|
'pointer-events-none inline-block transform rounded-full bg-surface-base shadow ring-0 transition duration-100 ease-in-out',
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
: this.size() === 'sm'
|
|
2873
|
-
? 'h-3 w-3'
|
|
2874
|
-
: 'h-2.5 w-2.5',
|
|
2875
|
-
this.size() === 'md'
|
|
2876
|
-
? this.valueModel() ? 'translate-x-3 rtl:-translate-x-3' : 'translate-x-0'
|
|
2877
|
-
: this.size() === 'sm'
|
|
2878
|
-
? this.valueModel() ? 'translate-x-2.5 rtl:-translate-x-2.5' : 'translate-x-0'
|
|
2879
|
-
: this.valueModel() ? 'translate-x-2.5 rtl:-translate-x-2.5' : 'translate-x-0',
|
|
3062
|
+
getCircleSize(),
|
|
3063
|
+
getTranslate(),
|
|
2880
3064
|
].join(' ');
|
|
2881
3065
|
}, /* @ts-ignore */
|
|
2882
3066
|
...(ngDevMode ? [{ debugName: "switchCircleClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -2917,11 +3101,16 @@ class NeuralSwitchComponent {
|
|
|
2917
3101
|
errorIndentClasses = computed(() => {
|
|
2918
3102
|
if (this.controlPosition() !== 'start')
|
|
2919
3103
|
return undefined;
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
:
|
|
2923
|
-
|
|
2924
|
-
|
|
3104
|
+
switch (this.size()) {
|
|
3105
|
+
case 'xs': return 'ps-8';
|
|
3106
|
+
case 'sm': return 'ps-9';
|
|
3107
|
+
case 'md': return 'ps-[42px]';
|
|
3108
|
+
case 'lg': return 'ps-12';
|
|
3109
|
+
case 'xl': return 'ps-14';
|
|
3110
|
+
case '2xl': return 'ps-16';
|
|
3111
|
+
case '3xl': return 'ps-20';
|
|
3112
|
+
default: return 'ps-9';
|
|
3113
|
+
}
|
|
2925
3114
|
}, /* @ts-ignore */
|
|
2926
3115
|
...(ngDevMode ? [{ debugName: "errorIndentClasses" }] : /* istanbul ignore next */ []));
|
|
2927
3116
|
errorSpacingClass = computed(() => {
|
|
@@ -2935,17 +3124,20 @@ class NeuralSwitchComponent {
|
|
|
2935
3124
|
if (!this.padded())
|
|
2936
3125
|
return '';
|
|
2937
3126
|
const hasDetail = this.rendersDescription() || this.hasError();
|
|
2938
|
-
const
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
:
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
? 'h-
|
|
2946
|
-
:
|
|
2947
|
-
|
|
2948
|
-
|
|
3127
|
+
const sizeVal = this.size();
|
|
3128
|
+
const getSizeClass = () => {
|
|
3129
|
+
switch (sizeVal) {
|
|
3130
|
+
case 'xs': return hasDetail ? 'px-1.5 py-1.5' : 'h-6 px-1.5';
|
|
3131
|
+
case 'sm': return hasDetail ? 'px-2 py-1.5' : 'h-7 px-2';
|
|
3132
|
+
case 'md': return hasDetail ? 'px-3 py-2' : 'h-8 px-3';
|
|
3133
|
+
case 'lg': return hasDetail ? 'px-4 py-2.5' : 'h-10 px-4';
|
|
3134
|
+
case 'xl': return hasDetail ? 'px-5 py-3' : 'h-12 px-5';
|
|
3135
|
+
case '2xl': return hasDetail ? 'px-6 py-4' : 'h-14 px-6';
|
|
3136
|
+
case '3xl': return hasDetail ? 'px-8 py-5' : 'h-16 px-8';
|
|
3137
|
+
default: return hasDetail ? 'px-2 py-1.5' : 'h-7 px-2';
|
|
3138
|
+
}
|
|
3139
|
+
};
|
|
3140
|
+
const sizeClass = getSizeClass();
|
|
2949
3141
|
const classes = ['group rounded-4 transition-colors', sizeClass];
|
|
2950
3142
|
if (!hasDetail)
|
|
2951
3143
|
classes.push('justify-center');
|
|
@@ -3198,13 +3390,29 @@ class NeuralTextareaComponent {
|
|
|
3198
3390
|
dataAttrs = this.labeling.dataAttrs;
|
|
3199
3391
|
inputClasses = computed(() => {
|
|
3200
3392
|
const sizeVal = this.size();
|
|
3201
|
-
const
|
|
3202
|
-
:
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
:
|
|
3207
|
-
|
|
3393
|
+
const sizeMap = {
|
|
3394
|
+
xs: 'text-xs rounded-3 min-h-8',
|
|
3395
|
+
sm: 'text-sm rounded-4 min-h-9',
|
|
3396
|
+
md: 'text-base rounded-4 min-h-10',
|
|
3397
|
+
lg: 'text-lg rounded-5 min-h-11',
|
|
3398
|
+
xl: 'text-xl rounded-5 min-h-12',
|
|
3399
|
+
'2xl': 'text-2xl rounded-6 min-h-14',
|
|
3400
|
+
'3xl': 'text-3xl rounded-7 min-h-16'
|
|
3401
|
+
};
|
|
3402
|
+
const sizeClass = sizeMap[sizeVal] || sizeMap['sm'];
|
|
3403
|
+
const getPadding = () => {
|
|
3404
|
+
switch (sizeVal) {
|
|
3405
|
+
case 'xs': return 'py-1 px-1.5';
|
|
3406
|
+
case 'sm': return 'py-1.5 px-2';
|
|
3407
|
+
case 'md': return 'py-2 px-3';
|
|
3408
|
+
case 'lg': return 'py-2.5 px-4';
|
|
3409
|
+
case 'xl': return 'py-3 px-5';
|
|
3410
|
+
case '2xl': return 'py-4 px-6';
|
|
3411
|
+
case '3xl': return 'py-5 px-8';
|
|
3412
|
+
default: return 'py-1.5 px-2';
|
|
3413
|
+
}
|
|
3414
|
+
};
|
|
3415
|
+
const paddingClass = getPadding();
|
|
3208
3416
|
const variantVal = this.disabled() ? 'disabled' : this.variant();
|
|
3209
3417
|
let variantClass = '';
|
|
3210
3418
|
if (variantVal === 'subtle') {
|
|
@@ -4784,16 +4992,18 @@ class NeuralComboboxComponent {
|
|
|
4784
4992
|
triggerClasses = computed(() => {
|
|
4785
4993
|
const s = this.size();
|
|
4786
4994
|
const v = this.variant();
|
|
4787
|
-
let base = '
|
|
4995
|
+
let base = 'text-left';
|
|
4788
4996
|
// Size
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4997
|
+
const sizeMap = {
|
|
4998
|
+
xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
|
|
4999
|
+
sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
|
|
5000
|
+
md: 'h-10 px-3 py-2 text-base rounded-4',
|
|
5001
|
+
lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
|
|
5002
|
+
xl: 'h-14 px-5 py-3 text-xl rounded-5',
|
|
5003
|
+
'2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
|
|
5004
|
+
'3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
|
|
5005
|
+
};
|
|
5006
|
+
base += ' ' + (sizeMap[s] || sizeMap['sm']);
|
|
4797
5007
|
// Variant
|
|
4798
5008
|
if (v === 'outline') {
|
|
4799
5009
|
base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
|
|
@@ -5538,10 +5748,13 @@ class NeuralItemListRowComponent {
|
|
|
5538
5748
|
...(ngDevMode ? [{ debugName: "isEmphasized" }] : /* istanbul ignore next */ []));
|
|
5539
5749
|
sizeClasses = computed(() => {
|
|
5540
5750
|
switch (this.size()) {
|
|
5751
|
+
case 'xs': return 'min-h-6 px-1.5 py-1 text-sm';
|
|
5541
5752
|
case 'sm': return 'min-h-7 px-2 py-1.5 text-base';
|
|
5542
5753
|
case 'md': return 'min-h-8 px-2.5 py-1.5 text-base';
|
|
5543
5754
|
case 'lg': return 'min-h-10 px-3 py-2 text-lg';
|
|
5544
|
-
case 'xl': return 'min-h-
|
|
5755
|
+
case 'xl': return 'min-h-12 px-3.5 py-2.5 text-xl';
|
|
5756
|
+
case '2xl': return 'min-h-14 px-4 py-3 text-2xl';
|
|
5757
|
+
case '3xl': return 'min-h-16 px-5 py-4 text-3xl';
|
|
5545
5758
|
default: return 'min-h-7 px-2 py-1.5 text-base';
|
|
5546
5759
|
}
|
|
5547
5760
|
}, /* @ts-ignore */
|
|
@@ -6237,16 +6450,18 @@ class NeuralMultiSelectComponent {
|
|
|
6237
6450
|
triggerClasses = computed(() => {
|
|
6238
6451
|
const s = this.size();
|
|
6239
6452
|
const v = this.variant();
|
|
6240
|
-
let base = '
|
|
6453
|
+
let base = 'text-left';
|
|
6241
6454
|
// Size
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
|
|
6249
|
-
|
|
6455
|
+
const sizeMap = {
|
|
6456
|
+
xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
|
|
6457
|
+
sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
|
|
6458
|
+
md: 'h-10 px-3 py-2 text-base rounded-4',
|
|
6459
|
+
lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
|
|
6460
|
+
xl: 'h-14 px-5 py-3 text-xl rounded-5',
|
|
6461
|
+
'2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
|
|
6462
|
+
'3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
|
|
6463
|
+
};
|
|
6464
|
+
base += ' ' + (sizeMap[s] || sizeMap['sm']);
|
|
6250
6465
|
// Variant
|
|
6251
6466
|
if (v === 'outline') {
|
|
6252
6467
|
base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
|
|
@@ -6663,6 +6878,19 @@ class NeuralPasswordComponent {
|
|
|
6663
6878
|
show = signal(false, /* @ts-ignore */
|
|
6664
6879
|
...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
|
|
6665
6880
|
textInputRef;
|
|
6881
|
+
iconClasses = computed(() => {
|
|
6882
|
+
const sizeMap = {
|
|
6883
|
+
xs: 'size-3.5',
|
|
6884
|
+
sm: 'size-4',
|
|
6885
|
+
md: 'size-5',
|
|
6886
|
+
lg: 'size-6',
|
|
6887
|
+
xl: 'size-7',
|
|
6888
|
+
'2xl': 'size-8',
|
|
6889
|
+
'3xl': 'size-10'
|
|
6890
|
+
};
|
|
6891
|
+
return sizeMap[this.size()] || 'size-4';
|
|
6892
|
+
}, /* @ts-ignore */
|
|
6893
|
+
...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
|
|
6666
6894
|
toggleShow() {
|
|
6667
6895
|
this.show.set(!this.show());
|
|
6668
6896
|
}
|
|
@@ -6708,8 +6936,8 @@ class NeuralPasswordComponent {
|
|
|
6708
6936
|
<div suffix class="flex items-center">
|
|
6709
6937
|
<neural-tooltip [text]="show() ? 'Hide Password' : 'Show Password'" placement="top">
|
|
6710
6938
|
<span
|
|
6711
|
-
[class]="show() ? 'lucide-eye-off' : 'lucide-eye'"
|
|
6712
|
-
class="
|
|
6939
|
+
[class]="(show() ? 'lucide-eye-off ' : 'lucide-eye ') + iconClasses()"
|
|
6940
|
+
class="cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
|
|
6713
6941
|
(click)="toggleShow()"
|
|
6714
6942
|
></span>
|
|
6715
6943
|
</neural-tooltip>
|
|
@@ -6755,8 +6983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
6755
6983
|
<div suffix class="flex items-center">
|
|
6756
6984
|
<neural-tooltip [text]="show() ? 'Hide Password' : 'Show Password'" placement="top">
|
|
6757
6985
|
<span
|
|
6758
|
-
[class]="show() ? 'lucide-eye-off' : 'lucide-eye'"
|
|
6759
|
-
class="
|
|
6986
|
+
[class]="(show() ? 'lucide-eye-off ' : 'lucide-eye ') + iconClasses()"
|
|
6987
|
+
class="cursor-pointer text-ink-gray-5 hover:text-ink-gray-7 transition-colors"
|
|
6760
6988
|
(click)="toggleShow()"
|
|
6761
6989
|
></span>
|
|
6762
6990
|
</neural-tooltip>
|
|
@@ -6818,10 +7046,13 @@ class NeuralRatingComponent {
|
|
|
6818
7046
|
...(ngDevMode ? [{ debugName: "starArray" }] : /* istanbul ignore next */ []));
|
|
6819
7047
|
sizeClass = computed(() => {
|
|
6820
7048
|
return {
|
|
7049
|
+
xs: 'size-3',
|
|
6821
7050
|
sm: 'size-4',
|
|
6822
7051
|
md: 'size-5',
|
|
6823
7052
|
lg: 'size-6',
|
|
6824
7053
|
xl: 'size-7',
|
|
7054
|
+
'2xl': 'size-8',
|
|
7055
|
+
'3xl': 'size-10',
|
|
6825
7056
|
}[this.size()] || 'size-5';
|
|
6826
7057
|
}, /* @ts-ignore */
|
|
6827
7058
|
...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
|
|
@@ -7195,16 +7426,18 @@ class NeuralSelectComponent {
|
|
|
7195
7426
|
triggerClasses = computed(() => {
|
|
7196
7427
|
const s = this.size();
|
|
7197
7428
|
const v = this.variant();
|
|
7198
|
-
let base = '
|
|
7429
|
+
let base = 'text-left';
|
|
7199
7430
|
// Size
|
|
7200
|
-
|
|
7201
|
-
|
|
7202
|
-
|
|
7203
|
-
|
|
7204
|
-
|
|
7205
|
-
|
|
7206
|
-
|
|
7207
|
-
|
|
7431
|
+
const sizeMap = {
|
|
7432
|
+
xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
|
|
7433
|
+
sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
|
|
7434
|
+
md: 'h-10 px-3 py-2 text-base rounded-4',
|
|
7435
|
+
lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
|
|
7436
|
+
xl: 'h-14 px-5 py-3 text-xl rounded-5',
|
|
7437
|
+
'2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
|
|
7438
|
+
'3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
|
|
7439
|
+
};
|
|
7440
|
+
base += ' ' + (sizeMap[s] || sizeMap['sm']);
|
|
7208
7441
|
// Variant
|
|
7209
7442
|
if (v === 'outline') {
|
|
7210
7443
|
base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1';
|
|
@@ -7532,15 +7765,25 @@ class NeuralTabComponent {
|
|
|
7532
7765
|
const disabled = this.disabled();
|
|
7533
7766
|
const variant = this.root?.variant() || 'underline';
|
|
7534
7767
|
let base = 'relative flex items-center justify-center whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4';
|
|
7768
|
+
const sizeMap = {
|
|
7769
|
+
xs: 'px-2 py-1 text-xs',
|
|
7770
|
+
sm: 'px-3 py-1.5 text-sm',
|
|
7771
|
+
md: 'px-4 py-2 text-base',
|
|
7772
|
+
lg: 'px-5 py-2.5 text-lg',
|
|
7773
|
+
xl: 'px-6 py-3 text-xl',
|
|
7774
|
+
'2xl': 'px-8 py-4 text-2xl',
|
|
7775
|
+
'3xl': 'px-10 py-5 text-3xl',
|
|
7776
|
+
};
|
|
7777
|
+
const sizeClasses = sizeMap[this.root?.size() || 'sm'] || sizeMap['sm'];
|
|
7535
7778
|
if (variant === 'underline') {
|
|
7536
|
-
base += '
|
|
7779
|
+
base += ' font-medium ' + sizeClasses;
|
|
7537
7780
|
if (active)
|
|
7538
7781
|
base += ' text-ink-gray-9 border-b-2 border-outline-gray-8';
|
|
7539
7782
|
else
|
|
7540
7783
|
base += ' text-ink-gray-5 hover:text-ink-gray-8 border-b-2 border-transparent hover:border-outline-gray-3';
|
|
7541
7784
|
}
|
|
7542
7785
|
else if (variant === 'subtle') {
|
|
7543
|
-
base += '
|
|
7786
|
+
base += ' font-medium rounded-4 ' + sizeClasses;
|
|
7544
7787
|
if (active)
|
|
7545
7788
|
base += ' text-ink-gray-9 bg-surface-gray-2 shadow-sm';
|
|
7546
7789
|
else
|
|
@@ -10008,10 +10251,13 @@ class NeuralCodeEditorComponent {
|
|
|
10008
10251
|
if (!this.cmView)
|
|
10009
10252
|
return [];
|
|
10010
10253
|
const sizes = {
|
|
10254
|
+
xs: { fontSize: '11px', minHeight: '3rem' },
|
|
10011
10255
|
sm: { fontSize: '12px', minHeight: '3.5rem' },
|
|
10012
10256
|
md: { fontSize: '13px', minHeight: '4.5rem' },
|
|
10013
10257
|
lg: { fontSize: '14px', minHeight: '6rem' },
|
|
10014
10258
|
xl: { fontSize: '16px', minHeight: '7.5rem' },
|
|
10259
|
+
'2xl': { fontSize: '18px', minHeight: '9rem' },
|
|
10260
|
+
'3xl': { fontSize: '20px', minHeight: '11rem' },
|
|
10015
10261
|
};
|
|
10016
10262
|
const cfg = sizes[s ?? 'md'] ?? sizes['md'];
|
|
10017
10263
|
return [this.cmView.EditorView.theme({
|
|
@@ -11035,16 +11281,18 @@ class NeuralDatePickerComponent {
|
|
|
11035
11281
|
inputClasses = computed(() => {
|
|
11036
11282
|
const s = this.size();
|
|
11037
11283
|
const v = this.variant();
|
|
11038
|
-
let base = '
|
|
11284
|
+
let base = 'text-left';
|
|
11039
11285
|
// Size
|
|
11040
|
-
|
|
11041
|
-
|
|
11042
|
-
|
|
11043
|
-
|
|
11044
|
-
|
|
11045
|
-
|
|
11046
|
-
|
|
11047
|
-
|
|
11286
|
+
const sizeMap = {
|
|
11287
|
+
xs: 'h-6 px-1.5 py-1 text-xs rounded-3',
|
|
11288
|
+
sm: 'h-8 px-2 py-1.5 text-sm rounded-4',
|
|
11289
|
+
md: 'h-10 px-3 py-2 text-base rounded-4',
|
|
11290
|
+
lg: 'h-12 px-4 py-2.5 text-lg rounded-5',
|
|
11291
|
+
xl: 'h-14 px-5 py-3 text-xl rounded-5',
|
|
11292
|
+
'2xl': 'h-16 px-6 py-4 text-2xl rounded-6',
|
|
11293
|
+
'3xl': 'h-20 px-8 py-5 text-3xl rounded-7',
|
|
11294
|
+
};
|
|
11295
|
+
base += ' ' + (sizeMap[s] || sizeMap['sm']);
|
|
11048
11296
|
// Variant
|
|
11049
11297
|
if (v === 'outline') {
|
|
11050
11298
|
base += ' border border-outline-gray-2 bg-surface-base hover:bg-surface-gray-1 focus-visible:bg-surface-base';
|
|
@@ -12283,6 +12531,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
12283
12531
|
}]
|
|
12284
12532
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
|
|
12285
12533
|
|
|
12534
|
+
class NeuralNotificationCenterComponent {
|
|
12535
|
+
open = input(false, /* @ts-ignore */
|
|
12536
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
12537
|
+
onClose = new EventEmitter();
|
|
12538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NeuralNotificationCenterComponent, isStandalone: true, selector: "neural-notification-center", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
|
|
12540
|
+
<div
|
|
12541
|
+
class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
|
|
12542
|
+
[class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
|
|
12543
|
+
>
|
|
12544
|
+
<div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
|
|
12545
|
+
<ng-content select="[header-tabs]"></ng-content>
|
|
12546
|
+
<div class="flex items-center gap-2 pb-2">
|
|
12547
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12548
|
+
<button
|
|
12549
|
+
(click)="onClose.emit()"
|
|
12550
|
+
class="flex items-center justify-center rounded-4 p-1 text-ink-gray-5 hover:bg-surface-gray-2 hover:text-ink-gray-7 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
|
|
12551
|
+
>
|
|
12552
|
+
<i class="lucide-x size-4.5"></i>
|
|
12553
|
+
</button>
|
|
12554
|
+
</div>
|
|
12555
|
+
</div>
|
|
12556
|
+
|
|
12557
|
+
<div class="flex-1 overflow-y-auto bg-surface-base p-4">
|
|
12558
|
+
<h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
|
|
12559
|
+
<ng-content></ng-content>
|
|
12560
|
+
</div>
|
|
12561
|
+
</div>
|
|
12562
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
12563
|
+
}
|
|
12564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralNotificationCenterComponent, decorators: [{
|
|
12565
|
+
type: Component,
|
|
12566
|
+
args: [{
|
|
12567
|
+
selector: 'neural-notification-center',
|
|
12568
|
+
standalone: true,
|
|
12569
|
+
imports: [CommonModule],
|
|
12570
|
+
template: `
|
|
12571
|
+
<div
|
|
12572
|
+
class="absolute top-0 left-full z-50 flex h-full w-[380px] flex-col bg-surface-base border-r border-outline-gray-2 shadow-[4px_0_24px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out"
|
|
12573
|
+
[class]="open() ? 'translate-x-0' : '-translate-x-full opacity-0 pointer-events-none'"
|
|
12574
|
+
>
|
|
12575
|
+
<div class="flex items-center justify-between border-b border-outline-gray-2 px-4 pt-3 pb-0">
|
|
12576
|
+
<ng-content select="[header-tabs]"></ng-content>
|
|
12577
|
+
<div class="flex items-center gap-2 pb-2">
|
|
12578
|
+
<ng-content select="[header-actions]"></ng-content>
|
|
12579
|
+
<button
|
|
12580
|
+
(click)="onClose.emit()"
|
|
12581
|
+
class="flex items-center justify-center rounded-4 p-1 text-ink-gray-5 hover:bg-surface-gray-2 hover:text-ink-gray-7 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-4"
|
|
12582
|
+
>
|
|
12583
|
+
<i class="lucide-x size-4.5"></i>
|
|
12584
|
+
</button>
|
|
12585
|
+
</div>
|
|
12586
|
+
</div>
|
|
12587
|
+
|
|
12588
|
+
<div class="flex-1 overflow-y-auto bg-surface-base p-4">
|
|
12589
|
+
<h3 class="text-[13px] font-medium text-ink-gray-5 mb-4 uppercase tracking-wider">Qué hay de nuevo</h3>
|
|
12590
|
+
<ng-content></ng-content>
|
|
12591
|
+
</div>
|
|
12592
|
+
</div>
|
|
12593
|
+
`
|
|
12594
|
+
}]
|
|
12595
|
+
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], onClose: [{
|
|
12596
|
+
type: Output
|
|
12597
|
+
}] } });
|
|
12598
|
+
|
|
12286
12599
|
class NeuralRailComponent {
|
|
12287
12600
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12288
12601
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: NeuralRailComponent, isStandalone: true, selector: "neural-rail", ngImport: i0, template: `
|
|
@@ -13766,5 +14079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
13766
14079
|
* Generated bundle index. Do not edit.
|
|
13767
14080
|
*/
|
|
13768
14081
|
|
|
13769
|
-
export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
|
|
14082
|
+
export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
|
|
13770
14083
|
//# sourceMappingURL=orbiq-neural-ui-kit.mjs.map
|