tuix-webcomponents 0.0.34 → 0.0.36
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/README.md
CHANGED
|
@@ -12,8 +12,8 @@ npm i tuix-webcomponents
|
|
|
12
12
|
|
|
13
13
|
### Webbundle version
|
|
14
14
|
|
|
15
|
-
Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-
|
|
16
|
-
Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-
|
|
15
|
+
Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-c55bee0@0.95.1.js
|
|
16
|
+
Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-c55bee0@0.95.1.css
|
|
17
17
|
|
|
18
18
|
### React
|
|
19
19
|
|
package/custom-elements.json
CHANGED
|
@@ -1910,6 +1910,223 @@
|
|
|
1910
1910
|
}
|
|
1911
1911
|
]
|
|
1912
1912
|
},
|
|
1913
|
+
{
|
|
1914
|
+
"kind": "javascript-module",
|
|
1915
|
+
"path": "src/tuix-icon-button/TuixIconButton.ts",
|
|
1916
|
+
"declarations": [
|
|
1917
|
+
{
|
|
1918
|
+
"kind": "class",
|
|
1919
|
+
"description": "",
|
|
1920
|
+
"name": "TuixIconButton",
|
|
1921
|
+
"members": [
|
|
1922
|
+
{
|
|
1923
|
+
"kind": "field",
|
|
1924
|
+
"name": "icon",
|
|
1925
|
+
"attribute": "icon"
|
|
1926
|
+
},
|
|
1927
|
+
{
|
|
1928
|
+
"kind": "method",
|
|
1929
|
+
"name": "_updateIconColor",
|
|
1930
|
+
"privacy": "protected",
|
|
1931
|
+
"return": {
|
|
1932
|
+
"type": {
|
|
1933
|
+
"text": "void"
|
|
1934
|
+
}
|
|
1935
|
+
},
|
|
1936
|
+
"inheritedFrom": {
|
|
1937
|
+
"name": "TuixBaseButton",
|
|
1938
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
1939
|
+
}
|
|
1940
|
+
},
|
|
1941
|
+
{
|
|
1942
|
+
"kind": "method",
|
|
1943
|
+
"name": "_buttonContent",
|
|
1944
|
+
"privacy": "protected",
|
|
1945
|
+
"return": {
|
|
1946
|
+
"type": {
|
|
1947
|
+
"text": "TemplateResult"
|
|
1948
|
+
}
|
|
1949
|
+
},
|
|
1950
|
+
"inheritedFrom": {
|
|
1951
|
+
"name": "TuixBaseButton",
|
|
1952
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
1953
|
+
}
|
|
1954
|
+
},
|
|
1955
|
+
{
|
|
1956
|
+
"kind": "field",
|
|
1957
|
+
"name": "variant",
|
|
1958
|
+
"attribute": "variant",
|
|
1959
|
+
"reflects": true,
|
|
1960
|
+
"inheritedFrom": {
|
|
1961
|
+
"name": "TuixBaseButton",
|
|
1962
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
1963
|
+
}
|
|
1964
|
+
},
|
|
1965
|
+
{
|
|
1966
|
+
"kind": "field",
|
|
1967
|
+
"name": "disabled",
|
|
1968
|
+
"type": {
|
|
1969
|
+
"text": "boolean"
|
|
1970
|
+
},
|
|
1971
|
+
"default": "false",
|
|
1972
|
+
"attribute": "disabled",
|
|
1973
|
+
"reflects": true,
|
|
1974
|
+
"inheritedFrom": {
|
|
1975
|
+
"name": "TuixBaseButton",
|
|
1976
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
1977
|
+
}
|
|
1978
|
+
},
|
|
1979
|
+
{
|
|
1980
|
+
"kind": "field",
|
|
1981
|
+
"name": "dark",
|
|
1982
|
+
"type": {
|
|
1983
|
+
"text": "boolean"
|
|
1984
|
+
},
|
|
1985
|
+
"default": "false",
|
|
1986
|
+
"attribute": "dark",
|
|
1987
|
+
"reflects": true,
|
|
1988
|
+
"inheritedFrom": {
|
|
1989
|
+
"name": "TuixBaseButton",
|
|
1990
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
1991
|
+
}
|
|
1992
|
+
},
|
|
1993
|
+
{
|
|
1994
|
+
"kind": "field",
|
|
1995
|
+
"name": "iconColor",
|
|
1996
|
+
"type": {
|
|
1997
|
+
"text": "string"
|
|
1998
|
+
},
|
|
1999
|
+
"privacy": "protected",
|
|
2000
|
+
"default": "''",
|
|
2001
|
+
"inheritedFrom": {
|
|
2002
|
+
"name": "TuixBaseButton",
|
|
2003
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2004
|
+
}
|
|
2005
|
+
},
|
|
2006
|
+
{
|
|
2007
|
+
"kind": "method",
|
|
2008
|
+
"name": "_getTextColor",
|
|
2009
|
+
"privacy": "protected",
|
|
2010
|
+
"inheritedFrom": {
|
|
2011
|
+
"name": "TuixBaseButton",
|
|
2012
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2013
|
+
}
|
|
2014
|
+
},
|
|
2015
|
+
{
|
|
2016
|
+
"kind": "method",
|
|
2017
|
+
"name": "_handleClick",
|
|
2018
|
+
"privacy": "protected",
|
|
2019
|
+
"inheritedFrom": {
|
|
2020
|
+
"name": "TuixBaseButton",
|
|
2021
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2022
|
+
}
|
|
2023
|
+
},
|
|
2024
|
+
{
|
|
2025
|
+
"kind": "method",
|
|
2026
|
+
"name": "_iconTemplate",
|
|
2027
|
+
"privacy": "protected",
|
|
2028
|
+
"return": {
|
|
2029
|
+
"type": {
|
|
2030
|
+
"text": "TemplateResult"
|
|
2031
|
+
}
|
|
2032
|
+
},
|
|
2033
|
+
"parameters": [
|
|
2034
|
+
{
|
|
2035
|
+
"name": "iconName",
|
|
2036
|
+
"type": {
|
|
2037
|
+
"text": "IconName"
|
|
2038
|
+
}
|
|
2039
|
+
},
|
|
2040
|
+
{
|
|
2041
|
+
"name": "iconSize",
|
|
2042
|
+
"type": {
|
|
2043
|
+
"text": "IconSizeVariant"
|
|
2044
|
+
}
|
|
2045
|
+
}
|
|
2046
|
+
],
|
|
2047
|
+
"inheritedFrom": {
|
|
2048
|
+
"name": "TuixBaseButton",
|
|
2049
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2050
|
+
}
|
|
2051
|
+
}
|
|
2052
|
+
],
|
|
2053
|
+
"attributes": [
|
|
2054
|
+
{
|
|
2055
|
+
"name": "icon",
|
|
2056
|
+
"fieldName": "icon"
|
|
2057
|
+
},
|
|
2058
|
+
{
|
|
2059
|
+
"name": "variant",
|
|
2060
|
+
"fieldName": "variant",
|
|
2061
|
+
"inheritedFrom": {
|
|
2062
|
+
"name": "TuixBaseButton",
|
|
2063
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2064
|
+
}
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"name": "disabled",
|
|
2068
|
+
"type": {
|
|
2069
|
+
"text": "boolean"
|
|
2070
|
+
},
|
|
2071
|
+
"default": "false",
|
|
2072
|
+
"fieldName": "disabled",
|
|
2073
|
+
"inheritedFrom": {
|
|
2074
|
+
"name": "TuixBaseButton",
|
|
2075
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2076
|
+
}
|
|
2077
|
+
},
|
|
2078
|
+
{
|
|
2079
|
+
"name": "dark",
|
|
2080
|
+
"type": {
|
|
2081
|
+
"text": "boolean"
|
|
2082
|
+
},
|
|
2083
|
+
"default": "false",
|
|
2084
|
+
"fieldName": "dark",
|
|
2085
|
+
"inheritedFrom": {
|
|
2086
|
+
"name": "TuixBaseButton",
|
|
2087
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2088
|
+
}
|
|
2089
|
+
}
|
|
2090
|
+
],
|
|
2091
|
+
"superclass": {
|
|
2092
|
+
"name": "TuixBaseButton",
|
|
2093
|
+
"module": "/src/tuix-button/TuixBaseButton"
|
|
2094
|
+
},
|
|
2095
|
+
"tagName": "tuix-icon-button",
|
|
2096
|
+
"customElement": true,
|
|
2097
|
+
"events": [
|
|
2098
|
+
{
|
|
2099
|
+
"name": "customClick",
|
|
2100
|
+
"type": {
|
|
2101
|
+
"text": "CustomEvent"
|
|
2102
|
+
},
|
|
2103
|
+
"inheritedFrom": {
|
|
2104
|
+
"name": "TuixBaseButton",
|
|
2105
|
+
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2106
|
+
}
|
|
2107
|
+
}
|
|
2108
|
+
]
|
|
2109
|
+
}
|
|
2110
|
+
],
|
|
2111
|
+
"exports": [
|
|
2112
|
+
{
|
|
2113
|
+
"kind": "js",
|
|
2114
|
+
"name": "TuixIconButton",
|
|
2115
|
+
"declaration": {
|
|
2116
|
+
"name": "TuixIconButton",
|
|
2117
|
+
"module": "src/tuix-icon-button/TuixIconButton.ts"
|
|
2118
|
+
}
|
|
2119
|
+
},
|
|
2120
|
+
{
|
|
2121
|
+
"kind": "custom-element-definition",
|
|
2122
|
+
"name": "tuix-icon-button",
|
|
2123
|
+
"declaration": {
|
|
2124
|
+
"name": "TuixIconButton",
|
|
2125
|
+
"module": "src/tuix-icon-button/TuixIconButton.ts"
|
|
2126
|
+
}
|
|
2127
|
+
}
|
|
2128
|
+
]
|
|
2129
|
+
},
|
|
1913
2130
|
{
|
|
1914
2131
|
"kind": "javascript-module",
|
|
1915
2132
|
"path": "src/tuix-input/TuixInput.styles.ts",
|
|
@@ -1927,7 +2144,7 @@
|
|
|
1927
2144
|
{
|
|
1928
2145
|
"kind": "variable",
|
|
1929
2146
|
"name": "inputFontStyles",
|
|
1930
|
-
"default": "css`\n .t-input::placeholder,\n .t-input,\n .t-title {\n font-size: var(--t-field-font-size);\n font-weight: var(--t-field-font-weight);\n line-height: var(--t-field-line-height);\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`"
|
|
2147
|
+
"default": "css`\n .t-input::placeholder,\n .t-input,\n .t-title {\n font-size: var(--t-field-font-size);\n font-weight: var(--t-field-font-weight);\n line-height: var(--t-field-line-height);\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n /* iOS Safari zooms into any focused field with text under 16px (also readonly ones,\n like the dropdown's), so keep at least 1rem there. Only iOS supports -webkit-touch-callout. */\n @supports (-webkit-touch-callout: none) {\n .t-input::placeholder,\n .t-input {\n font-size: max(1rem, var(--t-field-font-size));\n }\n }\n`"
|
|
1931
2148
|
},
|
|
1932
2149
|
{
|
|
1933
2150
|
"kind": "variable",
|
|
@@ -2435,314 +2652,97 @@
|
|
|
2435
2652
|
{
|
|
2436
2653
|
"name": "value",
|
|
2437
2654
|
"type": {
|
|
2438
|
-
"text": "string"
|
|
2439
|
-
},
|
|
2440
|
-
"default": "''",
|
|
2441
|
-
"fieldName": "value"
|
|
2442
|
-
},
|
|
2443
|
-
{
|
|
2444
|
-
"name": "placeholder",
|
|
2445
|
-
"type": {
|
|
2446
|
-
"text": "string"
|
|
2447
|
-
},
|
|
2448
|
-
"default": "''",
|
|
2449
|
-
"fieldName": "placeholder"
|
|
2450
|
-
},
|
|
2451
|
-
{
|
|
2452
|
-
"name": "title",
|
|
2453
|
-
"type": {
|
|
2454
|
-
"text": "string"
|
|
2455
|
-
},
|
|
2456
|
-
"default": "''",
|
|
2457
|
-
"fieldName": "title"
|
|
2458
|
-
},
|
|
2459
|
-
{
|
|
2460
|
-
"name": "type",
|
|
2461
|
-
"fieldName": "type"
|
|
2462
|
-
},
|
|
2463
|
-
{
|
|
2464
|
-
"name": "maxlength",
|
|
2465
|
-
"type": {
|
|
2466
|
-
"text": "number | undefined"
|
|
2467
|
-
},
|
|
2468
|
-
"fieldName": "maxlength"
|
|
2469
|
-
},
|
|
2470
|
-
{
|
|
2471
|
-
"name": "description",
|
|
2472
|
-
"type": {
|
|
2473
|
-
"text": "string | undefined"
|
|
2474
|
-
},
|
|
2475
|
-
"fieldName": "description"
|
|
2476
|
-
},
|
|
2477
|
-
{
|
|
2478
|
-
"name": "descriptionType",
|
|
2479
|
-
"fieldName": "descriptionType"
|
|
2480
|
-
},
|
|
2481
|
-
{
|
|
2482
|
-
"name": "dark",
|
|
2483
|
-
"type": {
|
|
2484
|
-
"text": "boolean"
|
|
2485
|
-
},
|
|
2486
|
-
"default": "false",
|
|
2487
|
-
"fieldName": "dark"
|
|
2488
|
-
},
|
|
2489
|
-
{
|
|
2490
|
-
"name": "readonly",
|
|
2491
|
-
"type": {
|
|
2492
|
-
"text": "boolean"
|
|
2493
|
-
},
|
|
2494
|
-
"default": "false",
|
|
2495
|
-
"fieldName": "readonly"
|
|
2496
|
-
},
|
|
2497
|
-
{
|
|
2498
|
-
"name": "autofocus",
|
|
2499
|
-
"type": {
|
|
2500
|
-
"text": "boolean"
|
|
2501
|
-
},
|
|
2502
|
-
"default": "false",
|
|
2503
|
-
"fieldName": "autofocus"
|
|
2504
|
-
}
|
|
2505
|
-
],
|
|
2506
|
-
"superclass": {
|
|
2507
|
-
"name": "LitElement",
|
|
2508
|
-
"package": "lit"
|
|
2509
|
-
},
|
|
2510
|
-
"tagName": "tuix-input",
|
|
2511
|
-
"customElement": true
|
|
2512
|
-
}
|
|
2513
|
-
],
|
|
2514
|
-
"exports": [
|
|
2515
|
-
{
|
|
2516
|
-
"kind": "js",
|
|
2517
|
-
"name": "TuixInput",
|
|
2518
|
-
"declaration": {
|
|
2519
|
-
"name": "TuixInput",
|
|
2520
|
-
"module": "src/tuix-input/TuixInput.ts"
|
|
2521
|
-
}
|
|
2522
|
-
},
|
|
2523
|
-
{
|
|
2524
|
-
"kind": "custom-element-definition",
|
|
2525
|
-
"name": "tuix-input",
|
|
2526
|
-
"declaration": {
|
|
2527
|
-
"name": "TuixInput",
|
|
2528
|
-
"module": "src/tuix-input/TuixInput.ts"
|
|
2529
|
-
}
|
|
2530
|
-
}
|
|
2531
|
-
]
|
|
2532
|
-
},
|
|
2533
|
-
{
|
|
2534
|
-
"kind": "javascript-module",
|
|
2535
|
-
"path": "src/tuix-icon-button/TuixIconButton.ts",
|
|
2536
|
-
"declarations": [
|
|
2537
|
-
{
|
|
2538
|
-
"kind": "class",
|
|
2539
|
-
"description": "",
|
|
2540
|
-
"name": "TuixIconButton",
|
|
2541
|
-
"members": [
|
|
2542
|
-
{
|
|
2543
|
-
"kind": "field",
|
|
2544
|
-
"name": "icon",
|
|
2545
|
-
"attribute": "icon"
|
|
2546
|
-
},
|
|
2547
|
-
{
|
|
2548
|
-
"kind": "method",
|
|
2549
|
-
"name": "_updateIconColor",
|
|
2550
|
-
"privacy": "protected",
|
|
2551
|
-
"return": {
|
|
2552
|
-
"type": {
|
|
2553
|
-
"text": "void"
|
|
2554
|
-
}
|
|
2555
|
-
},
|
|
2556
|
-
"inheritedFrom": {
|
|
2557
|
-
"name": "TuixBaseButton",
|
|
2558
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2559
|
-
}
|
|
2560
|
-
},
|
|
2561
|
-
{
|
|
2562
|
-
"kind": "method",
|
|
2563
|
-
"name": "_buttonContent",
|
|
2564
|
-
"privacy": "protected",
|
|
2565
|
-
"return": {
|
|
2566
|
-
"type": {
|
|
2567
|
-
"text": "TemplateResult"
|
|
2568
|
-
}
|
|
2569
|
-
},
|
|
2570
|
-
"inheritedFrom": {
|
|
2571
|
-
"name": "TuixBaseButton",
|
|
2572
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2573
|
-
}
|
|
2574
|
-
},
|
|
2575
|
-
{
|
|
2576
|
-
"kind": "field",
|
|
2577
|
-
"name": "variant",
|
|
2578
|
-
"attribute": "variant",
|
|
2579
|
-
"reflects": true,
|
|
2580
|
-
"inheritedFrom": {
|
|
2581
|
-
"name": "TuixBaseButton",
|
|
2582
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2583
|
-
}
|
|
2584
|
-
},
|
|
2585
|
-
{
|
|
2586
|
-
"kind": "field",
|
|
2587
|
-
"name": "disabled",
|
|
2588
|
-
"type": {
|
|
2589
|
-
"text": "boolean"
|
|
2655
|
+
"text": "string"
|
|
2590
2656
|
},
|
|
2591
|
-
"default": "
|
|
2592
|
-
"
|
|
2593
|
-
"reflects": true,
|
|
2594
|
-
"inheritedFrom": {
|
|
2595
|
-
"name": "TuixBaseButton",
|
|
2596
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2597
|
-
}
|
|
2657
|
+
"default": "''",
|
|
2658
|
+
"fieldName": "value"
|
|
2598
2659
|
},
|
|
2599
2660
|
{
|
|
2600
|
-
"
|
|
2601
|
-
"name": "dark",
|
|
2661
|
+
"name": "placeholder",
|
|
2602
2662
|
"type": {
|
|
2603
|
-
"text": "
|
|
2663
|
+
"text": "string"
|
|
2604
2664
|
},
|
|
2605
|
-
"default": "
|
|
2606
|
-
"
|
|
2607
|
-
"reflects": true,
|
|
2608
|
-
"inheritedFrom": {
|
|
2609
|
-
"name": "TuixBaseButton",
|
|
2610
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2611
|
-
}
|
|
2665
|
+
"default": "''",
|
|
2666
|
+
"fieldName": "placeholder"
|
|
2612
2667
|
},
|
|
2613
2668
|
{
|
|
2614
|
-
"
|
|
2615
|
-
"name": "iconColor",
|
|
2669
|
+
"name": "title",
|
|
2616
2670
|
"type": {
|
|
2617
2671
|
"text": "string"
|
|
2618
2672
|
},
|
|
2619
|
-
"privacy": "protected",
|
|
2620
2673
|
"default": "''",
|
|
2621
|
-
"
|
|
2622
|
-
"name": "TuixBaseButton",
|
|
2623
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2624
|
-
}
|
|
2674
|
+
"fieldName": "title"
|
|
2625
2675
|
},
|
|
2626
2676
|
{
|
|
2627
|
-
"
|
|
2628
|
-
"
|
|
2629
|
-
"privacy": "protected",
|
|
2630
|
-
"inheritedFrom": {
|
|
2631
|
-
"name": "TuixBaseButton",
|
|
2632
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2633
|
-
}
|
|
2677
|
+
"name": "type",
|
|
2678
|
+
"fieldName": "type"
|
|
2634
2679
|
},
|
|
2635
2680
|
{
|
|
2636
|
-
"
|
|
2637
|
-
"
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2642
|
-
}
|
|
2681
|
+
"name": "maxlength",
|
|
2682
|
+
"type": {
|
|
2683
|
+
"text": "number | undefined"
|
|
2684
|
+
},
|
|
2685
|
+
"fieldName": "maxlength"
|
|
2643
2686
|
},
|
|
2644
2687
|
{
|
|
2645
|
-
"
|
|
2646
|
-
"
|
|
2647
|
-
|
|
2648
|
-
"return": {
|
|
2649
|
-
"type": {
|
|
2650
|
-
"text": "TemplateResult"
|
|
2651
|
-
}
|
|
2688
|
+
"name": "description",
|
|
2689
|
+
"type": {
|
|
2690
|
+
"text": "string | undefined"
|
|
2652
2691
|
},
|
|
2653
|
-
"
|
|
2654
|
-
|
|
2655
|
-
"name": "iconName",
|
|
2656
|
-
"type": {
|
|
2657
|
-
"text": "IconName"
|
|
2658
|
-
}
|
|
2659
|
-
},
|
|
2660
|
-
{
|
|
2661
|
-
"name": "iconSize",
|
|
2662
|
-
"type": {
|
|
2663
|
-
"text": "IconSizeVariant"
|
|
2664
|
-
}
|
|
2665
|
-
}
|
|
2666
|
-
],
|
|
2667
|
-
"inheritedFrom": {
|
|
2668
|
-
"name": "TuixBaseButton",
|
|
2669
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2670
|
-
}
|
|
2671
|
-
}
|
|
2672
|
-
],
|
|
2673
|
-
"attributes": [
|
|
2692
|
+
"fieldName": "description"
|
|
2693
|
+
},
|
|
2674
2694
|
{
|
|
2675
|
-
"name": "
|
|
2676
|
-
"fieldName": "
|
|
2695
|
+
"name": "descriptionType",
|
|
2696
|
+
"fieldName": "descriptionType"
|
|
2677
2697
|
},
|
|
2678
2698
|
{
|
|
2679
|
-
"name": "
|
|
2680
|
-
"
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2699
|
+
"name": "dark",
|
|
2700
|
+
"type": {
|
|
2701
|
+
"text": "boolean"
|
|
2702
|
+
},
|
|
2703
|
+
"default": "false",
|
|
2704
|
+
"fieldName": "dark"
|
|
2685
2705
|
},
|
|
2686
2706
|
{
|
|
2687
|
-
"name": "
|
|
2707
|
+
"name": "readonly",
|
|
2688
2708
|
"type": {
|
|
2689
2709
|
"text": "boolean"
|
|
2690
2710
|
},
|
|
2691
2711
|
"default": "false",
|
|
2692
|
-
"fieldName": "
|
|
2693
|
-
"inheritedFrom": {
|
|
2694
|
-
"name": "TuixBaseButton",
|
|
2695
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2696
|
-
}
|
|
2712
|
+
"fieldName": "readonly"
|
|
2697
2713
|
},
|
|
2698
2714
|
{
|
|
2699
|
-
"name": "
|
|
2715
|
+
"name": "autofocus",
|
|
2700
2716
|
"type": {
|
|
2701
2717
|
"text": "boolean"
|
|
2702
2718
|
},
|
|
2703
2719
|
"default": "false",
|
|
2704
|
-
"fieldName": "
|
|
2705
|
-
"inheritedFrom": {
|
|
2706
|
-
"name": "TuixBaseButton",
|
|
2707
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2708
|
-
}
|
|
2720
|
+
"fieldName": "autofocus"
|
|
2709
2721
|
}
|
|
2710
2722
|
],
|
|
2711
2723
|
"superclass": {
|
|
2712
|
-
"name": "
|
|
2713
|
-
"
|
|
2724
|
+
"name": "LitElement",
|
|
2725
|
+
"package": "lit"
|
|
2714
2726
|
},
|
|
2715
|
-
"tagName": "tuix-
|
|
2716
|
-
"customElement": true
|
|
2717
|
-
"events": [
|
|
2718
|
-
{
|
|
2719
|
-
"name": "customClick",
|
|
2720
|
-
"type": {
|
|
2721
|
-
"text": "CustomEvent"
|
|
2722
|
-
},
|
|
2723
|
-
"inheritedFrom": {
|
|
2724
|
-
"name": "TuixBaseButton",
|
|
2725
|
-
"module": "src/tuix-button/TuixBaseButton.ts"
|
|
2726
|
-
}
|
|
2727
|
-
}
|
|
2728
|
-
]
|
|
2727
|
+
"tagName": "tuix-input",
|
|
2728
|
+
"customElement": true
|
|
2729
2729
|
}
|
|
2730
2730
|
],
|
|
2731
2731
|
"exports": [
|
|
2732
2732
|
{
|
|
2733
2733
|
"kind": "js",
|
|
2734
|
-
"name": "
|
|
2734
|
+
"name": "TuixInput",
|
|
2735
2735
|
"declaration": {
|
|
2736
|
-
"name": "
|
|
2737
|
-
"module": "src/tuix-
|
|
2736
|
+
"name": "TuixInput",
|
|
2737
|
+
"module": "src/tuix-input/TuixInput.ts"
|
|
2738
2738
|
}
|
|
2739
2739
|
},
|
|
2740
2740
|
{
|
|
2741
2741
|
"kind": "custom-element-definition",
|
|
2742
|
-
"name": "tuix-
|
|
2742
|
+
"name": "tuix-input",
|
|
2743
2743
|
"declaration": {
|
|
2744
|
-
"name": "
|
|
2745
|
-
"module": "src/tuix-
|
|
2744
|
+
"name": "TuixInput",
|
|
2745
|
+
"module": "src/tuix-input/TuixInput.ts"
|
|
2746
2746
|
}
|
|
2747
2747
|
}
|
|
2748
2748
|
]
|
|
@@ -4726,6 +4726,12 @@
|
|
|
4726
4726
|
}
|
|
4727
4727
|
]
|
|
4728
4728
|
},
|
|
4729
|
+
{
|
|
4730
|
+
"kind": "javascript-module",
|
|
4731
|
+
"path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
|
|
4732
|
+
"declarations": [],
|
|
4733
|
+
"exports": []
|
|
4734
|
+
},
|
|
4729
4735
|
{
|
|
4730
4736
|
"kind": "javascript-module",
|
|
4731
4737
|
"path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
|
|
@@ -4766,12 +4772,6 @@
|
|
|
4766
4772
|
}
|
|
4767
4773
|
]
|
|
4768
4774
|
},
|
|
4769
|
-
{
|
|
4770
|
-
"kind": "javascript-module",
|
|
4771
|
-
"path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
|
|
4772
|
-
"declarations": [],
|
|
4773
|
-
"exports": []
|
|
4774
|
-
},
|
|
4775
4775
|
{
|
|
4776
4776
|
"kind": "javascript-module",
|
|
4777
4777
|
"path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
|
|
@@ -4928,6 +4928,46 @@
|
|
|
4928
4928
|
}
|
|
4929
4929
|
]
|
|
4930
4930
|
},
|
|
4931
|
+
{
|
|
4932
|
+
"kind": "javascript-module",
|
|
4933
|
+
"path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
|
|
4934
|
+
"declarations": [
|
|
4935
|
+
{
|
|
4936
|
+
"kind": "variable",
|
|
4937
|
+
"name": "meta",
|
|
4938
|
+
"type": {
|
|
4939
|
+
"text": "object"
|
|
4940
|
+
},
|
|
4941
|
+
"default": "{\n title: 'TuixIconButton',\n component: 'tuix-icon-button',\n argTypes: {\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n icon: {\n control: 'select',\n options: Object.values(IconName),\n },\n disabled: {\n control: 'boolean',\n },\n dark: {\n control: 'boolean',\n },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-icon-button\n variant=\"${args.variant}\"\n icon=\"${args.icon}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n @customClick=\"${args.onClick}\"\n />\n </div>\n `,\n}"
|
|
4942
|
+
},
|
|
4943
|
+
{
|
|
4944
|
+
"kind": "variable",
|
|
4945
|
+
"name": "iconButton",
|
|
4946
|
+
"type": {
|
|
4947
|
+
"text": "Story"
|
|
4948
|
+
},
|
|
4949
|
+
"default": "{\n args: {\n variant: MainVariant.PRIMARY,\n icon: IconName.ARROW_DOWN,\n disabled: false,\n dark: false,\n },\n}"
|
|
4950
|
+
}
|
|
4951
|
+
],
|
|
4952
|
+
"exports": [
|
|
4953
|
+
{
|
|
4954
|
+
"kind": "js",
|
|
4955
|
+
"name": "default",
|
|
4956
|
+
"declaration": {
|
|
4957
|
+
"name": "meta",
|
|
4958
|
+
"module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
|
|
4959
|
+
}
|
|
4960
|
+
},
|
|
4961
|
+
{
|
|
4962
|
+
"kind": "js",
|
|
4963
|
+
"name": "iconButton",
|
|
4964
|
+
"declaration": {
|
|
4965
|
+
"name": "iconButton",
|
|
4966
|
+
"module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
|
|
4967
|
+
}
|
|
4968
|
+
}
|
|
4969
|
+
]
|
|
4970
|
+
},
|
|
4931
4971
|
{
|
|
4932
4972
|
"kind": "javascript-module",
|
|
4933
4973
|
"path": "src/tuix-input/enums/tuix-input.enums.ts",
|
|
@@ -5048,46 +5088,6 @@
|
|
|
5048
5088
|
}
|
|
5049
5089
|
]
|
|
5050
5090
|
},
|
|
5051
|
-
{
|
|
5052
|
-
"kind": "javascript-module",
|
|
5053
|
-
"path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
|
|
5054
|
-
"declarations": [
|
|
5055
|
-
{
|
|
5056
|
-
"kind": "variable",
|
|
5057
|
-
"name": "meta",
|
|
5058
|
-
"type": {
|
|
5059
|
-
"text": "object"
|
|
5060
|
-
},
|
|
5061
|
-
"default": "{\n title: 'TuixIconButton',\n component: 'tuix-icon-button',\n argTypes: {\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n icon: {\n control: 'select',\n options: Object.values(IconName),\n },\n disabled: {\n control: 'boolean',\n },\n dark: {\n control: 'boolean',\n },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-icon-button\n variant=\"${args.variant}\"\n icon=\"${args.icon}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n @customClick=\"${args.onClick}\"\n />\n </div>\n `,\n}"
|
|
5062
|
-
},
|
|
5063
|
-
{
|
|
5064
|
-
"kind": "variable",
|
|
5065
|
-
"name": "iconButton",
|
|
5066
|
-
"type": {
|
|
5067
|
-
"text": "Story"
|
|
5068
|
-
},
|
|
5069
|
-
"default": "{\n args: {\n variant: MainVariant.PRIMARY,\n icon: IconName.ARROW_DOWN,\n disabled: false,\n dark: false,\n },\n}"
|
|
5070
|
-
}
|
|
5071
|
-
],
|
|
5072
|
-
"exports": [
|
|
5073
|
-
{
|
|
5074
|
-
"kind": "js",
|
|
5075
|
-
"name": "default",
|
|
5076
|
-
"declaration": {
|
|
5077
|
-
"name": "meta",
|
|
5078
|
-
"module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
|
|
5079
|
-
}
|
|
5080
|
-
},
|
|
5081
|
-
{
|
|
5082
|
-
"kind": "js",
|
|
5083
|
-
"name": "iconButton",
|
|
5084
|
-
"declaration": {
|
|
5085
|
-
"name": "iconButton",
|
|
5086
|
-
"module": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts"
|
|
5087
|
-
}
|
|
5088
|
-
}
|
|
5089
|
-
]
|
|
5090
|
-
},
|
|
5091
5091
|
{
|
|
5092
5092
|
"kind": "javascript-module",
|
|
5093
5093
|
"path": "src/tuix-link/enums/linkTarget.enum.ts",
|
|
@@ -5220,12 +5220,6 @@
|
|
|
5220
5220
|
}
|
|
5221
5221
|
]
|
|
5222
5222
|
},
|
|
5223
|
-
{
|
|
5224
|
-
"kind": "javascript-module",
|
|
5225
|
-
"path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
|
|
5226
|
-
"declarations": [],
|
|
5227
|
-
"exports": []
|
|
5228
|
-
},
|
|
5229
5223
|
{
|
|
5230
5224
|
"kind": "javascript-module",
|
|
5231
5225
|
"path": "src/tuix-radio-button/stories/tuix-radio-button.stories.ts",
|
|
@@ -5266,6 +5260,12 @@
|
|
|
5266
5260
|
}
|
|
5267
5261
|
]
|
|
5268
5262
|
},
|
|
5263
|
+
{
|
|
5264
|
+
"kind": "javascript-module",
|
|
5265
|
+
"path": "src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts",
|
|
5266
|
+
"declarations": [],
|
|
5267
|
+
"exports": []
|
|
5268
|
+
},
|
|
5269
5269
|
{
|
|
5270
5270
|
"kind": "javascript-module",
|
|
5271
5271
|
"path": "src/tuix-table/interfaces/tuix-table.interface.ts",
|
|
@@ -132,6 +132,14 @@ export const inputFontStyles = css `
|
|
|
132
132
|
--t-field-padding-top: 1.375rem;
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
|
+
/* iOS Safari zooms into any focused field with text under 16px (also readonly ones,
|
|
136
|
+
like the dropdown's), so keep at least 1rem there. Only iOS supports -webkit-touch-callout. */
|
|
137
|
+
@supports (-webkit-touch-callout: none) {
|
|
138
|
+
.t-input::placeholder,
|
|
139
|
+
.t-input {
|
|
140
|
+
font-size: max(1rem, var(--t-field-font-size));
|
|
141
|
+
}
|
|
142
|
+
}
|
|
135
143
|
`;
|
|
136
144
|
export const inputColorStyles = css `
|
|
137
145
|
.t-input {
|
|
@@ -23,22 +23,18 @@ let TuixLink = class TuixLink extends LitElement {
|
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
_anchorTemplate() {
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
// No whitespace anywhere in the template: the host is inline, so it would render as a space.
|
|
27
|
+
// prettier-ignore
|
|
28
|
+
return html `<a
|
|
28
29
|
target="${this.disabled ? LinkTarget.SELF : this.target}"
|
|
29
30
|
class="${classMap(this._getClassMap())}"
|
|
30
31
|
href="${this.disabled ? 'javascript:void(0)' : this.href}"
|
|
31
|
-
|
|
32
|
-
<slot></slot>
|
|
33
|
-
</a>
|
|
34
|
-
`;
|
|
32
|
+
><slot></slot></a>`;
|
|
35
33
|
}
|
|
36
34
|
_divTemplate() {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</div>
|
|
41
|
-
`;
|
|
35
|
+
// No whitespace anywhere in the template: the host is inline, so it would render as a space.
|
|
36
|
+
// prettier-ignore
|
|
37
|
+
return html `<div class="${classMap(this._getClassMap())}"><slot></slot></div>`;
|
|
42
38
|
}
|
|
43
39
|
render() {
|
|
44
40
|
const isValidAnchor = this.href && !this.disabled;
|
|
@@ -43,12 +43,12 @@ let TuixText = class TuixText extends LitElement {
|
|
|
43
43
|
return colorMap[this.color || TextVariant.PRIMARY];
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
|
|
46
|
+
// No whitespace anywhere in the template: the host is inline, so it would render as a space.
|
|
47
|
+
// prettier-ignore
|
|
48
|
+
return html `<div
|
|
47
49
|
class="${classMap(this._getClassMap())}"
|
|
48
50
|
style="${styleMap(this._getStyleMap())}"
|
|
49
|
-
|
|
50
|
-
<slot></slot>
|
|
51
|
-
</div>`;
|
|
51
|
+
><slot></slot></div>`;
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
__decorate([
|
package/package.json
CHANGED