@wizishop/angular-components 0.0.207 → 0.0.209
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/angular-components.scss +208 -205
- package/bundles/wizishop-angular-components.umd.js +4 -2
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +1 -1
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/inputs/input/input.component.js +2 -2
- package/esm2015/lib/components/text-area/text-area.component.js +4 -2
- package/fesm2015/wizishop-angular-components.js +4 -2
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/text-area/text-area.component.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.209.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.207.tgz +0 -0
package/angular-components.scss
CHANGED
|
@@ -1942,174 +1942,72 @@ $wac-subtitle-color: #7A87A1!default;
|
|
|
1942
1942
|
}
|
|
1943
1943
|
|
|
1944
1944
|
}
|
|
1945
|
-
.wac-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1945
|
+
.wac-confirm-delete {
|
|
1946
|
+
position: absolute;
|
|
1947
|
+
right: 0;
|
|
1948
|
+
top: 0;
|
|
1949
|
+
height: 100%;
|
|
1950
|
+
z-index: 999;
|
|
1951
|
+
width: auto;
|
|
1952
|
+
display: flex;
|
|
1953
|
+
flex-wrap: nowrap;
|
|
1954
|
+
align-items: stretch;
|
|
1955
|
+
background-color: $wac-white;
|
|
1956
|
+
opacity: 0;
|
|
1957
|
+
visibility: hidden;
|
|
1958
|
+
transform: translateX(100%);
|
|
1959
|
+
max-width: 100%;
|
|
1960
|
+
transition: 0s visibility .35s, opacity .3s ease 0s, transform .3s ease 0s;
|
|
1961
|
+
&.hide-text {
|
|
1962
|
+
> div {
|
|
1963
|
+
&:first-child {
|
|
1964
|
+
span {
|
|
1965
|
+
display: none;
|
|
1959
1966
|
}
|
|
1960
1967
|
}
|
|
1961
1968
|
}
|
|
1962
1969
|
}
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1970
|
+
&.is-open {
|
|
1971
|
+
opacity: 1;
|
|
1972
|
+
visibility: visible;
|
|
1973
|
+
transform: translateX(0);
|
|
1974
|
+
transition: 0s visibility, opacity .3s ease .05s, transform .3s ease .05s;
|
|
1967
1975
|
}
|
|
1968
|
-
|
|
1969
|
-
display: inline-block;
|
|
1976
|
+
> div {
|
|
1970
1977
|
width: auto;
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
}
|
|
1979
|
-
}
|
|
1980
|
-
}
|
|
1981
|
-
|
|
1982
|
-
input[type='text'] {
|
|
1983
|
-
height: 40px;
|
|
1984
|
-
max-height: 40px;
|
|
1985
|
-
padding: 0 20px;
|
|
1986
|
-
line-height: 40px;
|
|
1987
|
-
border: 1px solid $wac-border-form;
|
|
1988
|
-
border-radius: 3px;
|
|
1989
|
-
margin: 15px 0 10px !important;
|
|
1990
|
-
font-size: rem(14) !important;
|
|
1991
|
-
color: $wac-main-text;
|
|
1992
|
-
&:focus {
|
|
1993
|
-
border-color: $wac-wizishop-blue !important;
|
|
1994
|
-
box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
|
|
1995
|
-
&::-webkit-input-placeholder {
|
|
1996
|
-
/* Chrome/Opera/Safari */
|
|
1997
|
-
opacity: 0;
|
|
1998
|
-
}
|
|
1999
|
-
&::-moz-placeholder {
|
|
2000
|
-
/* Firefox 19+ */
|
|
2001
|
-
opacity: 0;
|
|
2002
|
-
}
|
|
2003
|
-
&:-ms-input-placeholder {
|
|
2004
|
-
/* IE 10+ */
|
|
2005
|
-
opacity: 0;
|
|
2006
|
-
}
|
|
2007
|
-
&:-moz-placeholder {
|
|
2008
|
-
/* Firefox 18- */
|
|
2009
|
-
opacity: 0;
|
|
2010
|
-
}
|
|
2011
|
-
}
|
|
2012
|
-
}
|
|
2013
|
-
&.alone {
|
|
2014
|
-
.is-checkradio[type='checkbox'] {
|
|
2015
|
-
& + label {
|
|
2016
|
-
padding-left: 9px;
|
|
2017
|
-
margin-right: 0px;
|
|
2018
|
-
|
|
2019
|
-
&:before {
|
|
2020
|
-
border-width: 1px;
|
|
2021
|
-
width: 16px;
|
|
2022
|
-
height: 16px;
|
|
2023
|
-
border-radius: 2px;
|
|
2024
|
-
}
|
|
2025
|
-
}
|
|
2026
|
-
&:checked + label {
|
|
2027
|
-
&:after {
|
|
2028
|
-
top: 7px;
|
|
2029
|
-
transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
|
|
2030
|
-
}
|
|
2031
|
-
}
|
|
2032
|
-
}
|
|
2033
|
-
}
|
|
2034
|
-
|
|
2035
|
-
.is-checkradio[type='checkbox'] {
|
|
2036
|
-
outline: 0 !important;
|
|
2037
|
-
top: 0;
|
|
2038
|
-
& + label {
|
|
2039
|
-
font-size: rem(14);
|
|
2040
|
-
line-height: 0;
|
|
2041
|
-
color: $wac-input-radio-color-label;
|
|
2042
|
-
white-space: nowrap;
|
|
2043
|
-
padding: 0 8px;
|
|
2044
|
-
margin-right: 0;
|
|
2045
|
-
outline: 0 !important;
|
|
1978
|
+
display: flex;
|
|
1979
|
+
align-items: center;
|
|
1980
|
+
margin: 0!important;
|
|
1981
|
+
&:first-child {
|
|
1982
|
+
position: relative;
|
|
1983
|
+
margin: 0 20px 0 0;
|
|
1984
|
+
padding: 0 30px;
|
|
2046
1985
|
&:before {
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
1986
|
+
content: '';
|
|
1987
|
+
display: block;
|
|
1988
|
+
position: absolute;
|
|
2050
1989
|
top: 0;
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
left: 3px !important;
|
|
2056
|
-
width: 10px;
|
|
2057
|
-
height: 12px;
|
|
2058
|
-
border: none !important;
|
|
2059
|
-
background: transparent
|
|
2060
|
-
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
|
|
2061
|
-
center center / 8px 8px no-repeat;
|
|
2062
|
-
transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
|
|
2063
|
-
transition: all 0.3s ease-in-out;
|
|
1990
|
+
left: 10px;
|
|
1991
|
+
width: 1px;
|
|
1992
|
+
height: 100%;
|
|
1993
|
+
background-color: $wac-border-form;
|
|
2064
1994
|
}
|
|
2065
1995
|
span {
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
&:focus {
|
|
2071
|
-
&:before {
|
|
2072
|
-
border-color: $wac-input-active-color !important;
|
|
2073
|
-
}
|
|
2074
|
-
}
|
|
2075
|
-
&:before,
|
|
2076
|
-
&:after {
|
|
2077
|
-
outline: 0 !important;
|
|
1996
|
+
font-size: rem(16);
|
|
1997
|
+
line-height: 1.4;
|
|
1998
|
+
color: $wac-second-color;
|
|
1999
|
+
white-space: nowrap;
|
|
2078
2000
|
}
|
|
2079
2001
|
}
|
|
2080
|
-
&:
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
&:
|
|
2084
|
-
|
|
2085
|
-
}
|
|
2086
|
-
&:after {
|
|
2087
|
-
border-color: $wac-white !important;
|
|
2088
|
-
}
|
|
2089
|
-
}
|
|
2090
|
-
&:not([disabled]) {
|
|
2091
|
-
& + label {
|
|
2092
|
-
&:before {
|
|
2093
|
-
border-color: $wac-input-active-color !important;
|
|
2094
|
-
}
|
|
2002
|
+
&:last-child {
|
|
2003
|
+
> div {
|
|
2004
|
+
width: auto;
|
|
2005
|
+
&:first-child {
|
|
2006
|
+
margin: 0 10px 0 0;
|
|
2095
2007
|
}
|
|
2096
2008
|
}
|
|
2097
2009
|
}
|
|
2098
|
-
&:checked + label {
|
|
2099
|
-
color: $wac-input-radio-color-active-label;
|
|
2100
|
-
&:before {
|
|
2101
|
-
border: 1px solid $wac-input-active-color;
|
|
2102
|
-
background-color: $wac-input-active-color;
|
|
2103
|
-
transition: all 0.3s ease-in-out;
|
|
2104
|
-
}
|
|
2105
|
-
&:after {
|
|
2106
|
-
left: 7px;
|
|
2107
|
-
top: 8px;
|
|
2108
|
-
transition: all 0.3s ease-in-out;
|
|
2109
|
-
}
|
|
2110
|
-
}
|
|
2111
2010
|
}
|
|
2112
|
-
|
|
2113
2011
|
}
|
|
2114
2012
|
.wac-state {
|
|
2115
2013
|
width: 12px;
|
|
@@ -3325,10 +3223,13 @@ $wac-subtitle-color: #7A87A1!default;
|
|
|
3325
3223
|
|
|
3326
3224
|
&__size {
|
|
3327
3225
|
font-size: rem(12);
|
|
3328
|
-
color: $wac-
|
|
3226
|
+
color: $wac-main-text;
|
|
3329
3227
|
position: absolute;
|
|
3330
|
-
|
|
3228
|
+
top: -28px;
|
|
3331
3229
|
right: 0;
|
|
3230
|
+
strong {
|
|
3231
|
+
font-weight: 600;
|
|
3232
|
+
}
|
|
3332
3233
|
}
|
|
3333
3234
|
|
|
3334
3235
|
.icon.is-small.is-right {
|
|
@@ -5359,72 +5260,174 @@ span.wac-tooltip {
|
|
|
5359
5260
|
}
|
|
5360
5261
|
}
|
|
5361
5262
|
}
|
|
5362
|
-
.wac-
|
|
5363
|
-
|
|
5364
|
-
|
|
5365
|
-
|
|
5366
|
-
|
|
5367
|
-
|
|
5368
|
-
|
|
5369
|
-
|
|
5370
|
-
|
|
5371
|
-
|
|
5372
|
-
|
|
5373
|
-
|
|
5374
|
-
|
|
5375
|
-
|
|
5376
|
-
max-width: 100%;
|
|
5377
|
-
transition: 0s visibility .35s, opacity .3s ease 0s, transform .3s ease 0s;
|
|
5378
|
-
&.hide-text {
|
|
5379
|
-
> div {
|
|
5380
|
-
&:first-child {
|
|
5381
|
-
span {
|
|
5382
|
-
display: none;
|
|
5263
|
+
.wac-field-checkbox {
|
|
5264
|
+
&.disable-wt {
|
|
5265
|
+
.wac-field-checkbox__row {
|
|
5266
|
+
display: flex;
|
|
5267
|
+
width: 100%;
|
|
5268
|
+
}
|
|
5269
|
+
.is-checkradio[type='checkbox'] {
|
|
5270
|
+
& + label {
|
|
5271
|
+
white-space: normal;
|
|
5272
|
+
line-height: 1.4;
|
|
5273
|
+
padding: 0;
|
|
5274
|
+
> span {
|
|
5275
|
+
margin: 0 0 0 30px;
|
|
5276
|
+
transform: translateY(-4px);
|
|
5383
5277
|
}
|
|
5384
5278
|
}
|
|
5385
5279
|
}
|
|
5386
5280
|
}
|
|
5387
|
-
|
|
5388
|
-
|
|
5389
|
-
|
|
5390
|
-
|
|
5391
|
-
transition: 0s visibility, opacity .3s ease .05s, transform .3s ease .05s;
|
|
5281
|
+
&__row {
|
|
5282
|
+
position: relative;
|
|
5283
|
+
min-width: 100%;
|
|
5284
|
+
margin: 0;
|
|
5392
5285
|
}
|
|
5393
|
-
|
|
5286
|
+
&--nowrap {
|
|
5287
|
+
display: inline-block;
|
|
5394
5288
|
width: auto;
|
|
5395
|
-
|
|
5396
|
-
|
|
5397
|
-
|
|
5398
|
-
|
|
5399
|
-
|
|
5400
|
-
|
|
5401
|
-
|
|
5289
|
+
min-width: 0;
|
|
5290
|
+
margin: 0 10px 10px 0;
|
|
5291
|
+
.field {
|
|
5292
|
+
&__row {
|
|
5293
|
+
width: auto;
|
|
5294
|
+
display: inline-block;
|
|
5295
|
+
margin: 0;
|
|
5296
|
+
}
|
|
5297
|
+
}
|
|
5298
|
+
}
|
|
5299
|
+
|
|
5300
|
+
input[type='text'] {
|
|
5301
|
+
height: 40px;
|
|
5302
|
+
max-height: 40px;
|
|
5303
|
+
padding: 0 20px;
|
|
5304
|
+
line-height: 40px;
|
|
5305
|
+
border: 1px solid $wac-border-form;
|
|
5306
|
+
border-radius: 3px;
|
|
5307
|
+
margin: 15px 0 10px !important;
|
|
5308
|
+
font-size: rem(14) !important;
|
|
5309
|
+
color: $wac-main-text;
|
|
5310
|
+
&:focus {
|
|
5311
|
+
border-color: $wac-wizishop-blue !important;
|
|
5312
|
+
box-shadow: 0px 0px 4px $wac-checkbox-shadow !important;
|
|
5313
|
+
&::-webkit-input-placeholder {
|
|
5314
|
+
/* Chrome/Opera/Safari */
|
|
5315
|
+
opacity: 0;
|
|
5316
|
+
}
|
|
5317
|
+
&::-moz-placeholder {
|
|
5318
|
+
/* Firefox 19+ */
|
|
5319
|
+
opacity: 0;
|
|
5320
|
+
}
|
|
5321
|
+
&:-ms-input-placeholder {
|
|
5322
|
+
/* IE 10+ */
|
|
5323
|
+
opacity: 0;
|
|
5324
|
+
}
|
|
5325
|
+
&:-moz-placeholder {
|
|
5326
|
+
/* Firefox 18- */
|
|
5327
|
+
opacity: 0;
|
|
5328
|
+
}
|
|
5329
|
+
}
|
|
5330
|
+
}
|
|
5331
|
+
&.alone {
|
|
5332
|
+
.is-checkradio[type='checkbox'] {
|
|
5333
|
+
& + label {
|
|
5334
|
+
padding-left: 9px;
|
|
5335
|
+
margin-right: 0px;
|
|
5336
|
+
|
|
5337
|
+
&:before {
|
|
5338
|
+
border-width: 1px;
|
|
5339
|
+
width: 16px;
|
|
5340
|
+
height: 16px;
|
|
5341
|
+
border-radius: 2px;
|
|
5342
|
+
}
|
|
5343
|
+
}
|
|
5344
|
+
&:checked + label {
|
|
5345
|
+
&:after {
|
|
5346
|
+
top: 7px;
|
|
5347
|
+
transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
|
|
5348
|
+
}
|
|
5349
|
+
}
|
|
5350
|
+
}
|
|
5351
|
+
}
|
|
5352
|
+
|
|
5353
|
+
.is-checkradio[type='checkbox'] {
|
|
5354
|
+
outline: 0 !important;
|
|
5355
|
+
top: 0;
|
|
5356
|
+
& + label {
|
|
5357
|
+
font-size: rem(14);
|
|
5358
|
+
line-height: 0;
|
|
5359
|
+
color: $wac-input-radio-color-label;
|
|
5360
|
+
white-space: nowrap;
|
|
5361
|
+
padding: 0 8px;
|
|
5362
|
+
margin-right: 0;
|
|
5363
|
+
outline: 0 !important;
|
|
5402
5364
|
&:before {
|
|
5403
|
-
|
|
5404
|
-
|
|
5405
|
-
|
|
5365
|
+
width: 16px;
|
|
5366
|
+
height: 16px;
|
|
5367
|
+
border: 1px solid $wac-border-color;
|
|
5406
5368
|
top: 0;
|
|
5407
|
-
|
|
5408
|
-
|
|
5409
|
-
|
|
5410
|
-
|
|
5369
|
+
transition: all 0.3s ease-in-out;
|
|
5370
|
+
}
|
|
5371
|
+
&:after {
|
|
5372
|
+
top: 2.3px !important;
|
|
5373
|
+
left: 3px !important;
|
|
5374
|
+
width: 10px;
|
|
5375
|
+
height: 12px;
|
|
5376
|
+
border: none !important;
|
|
5377
|
+
background: transparent
|
|
5378
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
|
|
5379
|
+
center center / 8px 8px no-repeat;
|
|
5380
|
+
transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
|
|
5381
|
+
transition: all 0.3s ease-in-out;
|
|
5411
5382
|
}
|
|
5412
5383
|
span {
|
|
5413
|
-
|
|
5414
|
-
|
|
5415
|
-
|
|
5416
|
-
|
|
5384
|
+
margin: 0 0 0 rem(16);
|
|
5385
|
+
display: inline-block;
|
|
5386
|
+
}
|
|
5387
|
+
&:hover,
|
|
5388
|
+
&:focus {
|
|
5389
|
+
&:before {
|
|
5390
|
+
border-color: $wac-input-active-color !important;
|
|
5391
|
+
}
|
|
5392
|
+
}
|
|
5393
|
+
&:before,
|
|
5394
|
+
&:after {
|
|
5395
|
+
outline: 0 !important;
|
|
5417
5396
|
}
|
|
5418
5397
|
}
|
|
5419
|
-
&:
|
|
5420
|
-
|
|
5421
|
-
|
|
5422
|
-
&:
|
|
5423
|
-
|
|
5398
|
+
&:hover {
|
|
5399
|
+
& + label {
|
|
5400
|
+
color: $wac-input-radio-color-active-label;
|
|
5401
|
+
&:before {
|
|
5402
|
+
border-color: $wac-input-active-color !important;
|
|
5403
|
+
}
|
|
5404
|
+
&:after {
|
|
5405
|
+
border-color: $wac-white !important;
|
|
5406
|
+
}
|
|
5407
|
+
}
|
|
5408
|
+
&:not([disabled]) {
|
|
5409
|
+
& + label {
|
|
5410
|
+
&:before {
|
|
5411
|
+
border-color: $wac-input-active-color !important;
|
|
5412
|
+
}
|
|
5424
5413
|
}
|
|
5425
5414
|
}
|
|
5426
5415
|
}
|
|
5416
|
+
&:checked + label {
|
|
5417
|
+
color: $wac-input-radio-color-active-label;
|
|
5418
|
+
&:before {
|
|
5419
|
+
border: 1px solid $wac-input-active-color;
|
|
5420
|
+
background-color: $wac-input-active-color;
|
|
5421
|
+
transition: all 0.3s ease-in-out;
|
|
5422
|
+
}
|
|
5423
|
+
&:after {
|
|
5424
|
+
left: 7px;
|
|
5425
|
+
top: 8px;
|
|
5426
|
+
transition: all 0.3s ease-in-out;
|
|
5427
|
+
}
|
|
5428
|
+
}
|
|
5427
5429
|
}
|
|
5430
|
+
|
|
5428
5431
|
}
|
|
5429
5432
|
.wac-wrapper-multiple-block {
|
|
5430
5433
|
width: 100%;
|
|
@@ -7186,7 +7189,7 @@ div.wac-field-input-search {
|
|
|
7186
7189
|
top: 0;
|
|
7187
7190
|
right: rem(-24);
|
|
7188
7191
|
strong {
|
|
7189
|
-
font-weight:
|
|
7192
|
+
font-weight: 600;
|
|
7190
7193
|
color: $wac-main-text;
|
|
7191
7194
|
}
|
|
7192
7195
|
}
|
|
@@ -1998,6 +1998,7 @@
|
|
|
1998
1998
|
this.textInfo = '';
|
|
1999
1999
|
this.textError = '';
|
|
2000
2000
|
this.error = '';
|
|
2001
|
+
this.success = '';
|
|
2001
2002
|
this.size = null;
|
|
2002
2003
|
this.min = null;
|
|
2003
2004
|
this.max = null;
|
|
@@ -2037,7 +2038,7 @@
|
|
|
2037
2038
|
TextAreaComponent.decorators = [
|
|
2038
2039
|
{ type: i0.Component, args: [{
|
|
2039
2040
|
selector: 'wac-text-area',
|
|
2040
|
-
template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n <div class=\"field-label is-normal has-text-left\">\n <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError || error }\">\n <textarea\n class=\"textarea\"\n [id]=\"id\"\n [ngClass]=\"{ 'is-danger': textError || error, 'has-help-text': textInfo != '' || size }\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [autosize]=\"dynamicSize\"\n [onlyGrow]=\"true\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n ></textarea>\n
|
|
2041
|
+
template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n <div class=\"field-label is-normal has-text-left\">\n <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError || error || success }\">\n <textarea\n class=\"textarea\"\n [id]=\"id\"\n [ngClass]=\"{ 'is-danger': textError || error, 'is-success': success, 'has-help-text': textInfo != '' || size }\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [autosize]=\"dynamicSize\"\n [onlyGrow]=\"true\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n ></textarea>\n <!-- Icon error -->\n <span *ngIf=\"textError || error\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n <!-- Icon success -->\n <span *ngIf=\"success\" class=\"icon is-small is-right\">\n <i class=\"fas fa-check has-text-success\"></i>\n </span>\n <span\n *ngIf=\"textInfo && (textError === null || textError === '')\"\n class=\"is-size-7 wac-text-area__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n <span\n *ngIf=\"size && !progressBar\"\n class=\"is-size-7 wac-text-area__size\"\n [ngClass]=\"value.length > size ? 'has-text-danger' : ''\"\n ><strong>{{ value ? value.length : 0 }}</strong> / {{ size }}</span\n >\n </p>\n <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2041
2042
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }]
|
|
2042
2043
|
},] }
|
|
2043
2044
|
];
|
|
@@ -2048,6 +2049,7 @@
|
|
|
2048
2049
|
textInfo: [{ type: i0.Input }],
|
|
2049
2050
|
textError: [{ type: i0.Input }],
|
|
2050
2051
|
error: [{ type: i0.Input }],
|
|
2052
|
+
success: [{ type: i0.Input }],
|
|
2051
2053
|
size: [{ type: i0.Input }],
|
|
2052
2054
|
min: [{ type: i0.Input }],
|
|
2053
2055
|
max: [{ type: i0.Input }],
|
|
@@ -2223,7 +2225,7 @@
|
|
|
2223
2225
|
InputComponent.decorators = [
|
|
2224
2226
|
{ type: i0.Component, args: [{
|
|
2225
2227
|
selector: 'wac-input',
|
|
2226
|
-
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"size && !progressBar
|
|
2228
|
+
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n <strong>{{ value.toString().length }}</strong> / {{ size }}\n </span>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p\n class=\"control\"\n [ngClass]=\"{ 'has-icons-right': textError || success || error, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n >\n <!-- Text Prepend -->\n <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n </span>\n\n <!-- Input -->\n <input\n [class]=\"'input ' + extraClasses\"\n [id]=\"id\"\n [ngClass]=\"{\n 'is-danger': textError || error,\n 'is-large': big,\n 'is-number': isNumber,\n 'remove-margin': disableMargin,\n 'text-append': textAppend\n }\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n (focusout)=\"onFocusOut()\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n (keypress)=\"keyPress($event)\"\n />\n\n <!-- Indication at the end of the input -->\n <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n <span [innerHTML]=\"indication\"></span>\n </span>\n\n <!-- Text Append -->\n <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n <!-- error if text append not empty -->\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n </span>\n\n <!-- Icon Left -->\n <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n\n <!-- Icon error if textAppend empty -->\n <span *ngIf=\"(textError || error) && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n\n <!-- Icon success -->\n <span *ngIf=\"success\" class=\"icon is-small is-right\">\n <i class=\"fas fa-check has-text-success\"></i>\n </span>\n\n <!-- Text Info -->\n <span\n *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n class=\"is-size-7 wac-input__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n\n <!-- Text Error -->\n <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n </p>\n\n <!-- Progress Bar -->\n <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2227
2229
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
|
|
2228
2230
|
},] }
|
|
2229
2231
|
];
|