@woosmap/ui 3.92.0 → 3.95.0

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.92.0",
3
+ "version": "3.95.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -8,7 +8,8 @@
8
8
  width 100%
9
9
  zoom .9
10
10
  padding 2rem
11
- background-color #d5eaff
11
+ background #31436C
12
+ background radial-gradient(circle, #31436C 0%, #262D3E 100%)
12
13
  &__mobilewrapper
13
14
  trans()
14
15
  position relative
@@ -25,6 +26,7 @@
25
26
  font-size 1.2rem
26
27
  font-weight 700
27
28
  margin 0 0 1rem 0
29
+ color $light
28
30
  &__mobile
29
31
  br(1)
30
32
  font-size 1.3rem
@@ -68,9 +70,8 @@
68
70
  .merchant__mobile--details--dirty &
69
71
  opacity 1
70
72
  &__button
71
- sq(3)
72
73
  position absolute
73
- background-color transparent
74
+ background-color transparent !important
74
75
  left -.6rem
75
76
  padding 0
76
77
  display flex
@@ -78,7 +79,7 @@
78
79
  justify-content center
79
80
  flex-shrink 0
80
81
  &:hover
81
- background-color $dark30
82
+ background-color $dark30 !important
82
83
 
83
84
  &__section
84
85
  padding 1.4rem 2rem
@@ -20,6 +20,9 @@
20
20
  position relative
21
21
  // box-shadow 0 0 3rem rgba($logo2, .15)
22
22
  box-shadow 0 .3rem 1rem rgba($secondary, .15)
23
+ .demo--merchant &
24
+ border .1rem solid $light
25
+
23
26
  &__showcase
24
27
  &__data
25
28
  display flex
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
2
2
  import cl from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
5
+ import { ReactComponent as AutocompleteCheck } from '../../icons/autocomplete-check.svg';
5
6
  import { ReactComponent as Buildings } from '../../icons/buildings.svg';
6
7
  import { ReactComponent as Battery } from '../../icons/battery.svg';
7
8
  import { ReactComponent as Care } from '../../icons/care.svg';
@@ -57,10 +58,11 @@ import { ReactComponent as Refresh } from '../../icons/refresh.svg';
57
58
  import { ReactComponent as Responsive } from '../../icons/responsive.svg';
58
59
  import { ReactComponent as SaveTime } from '../../icons/save-time.svg';
59
60
  import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
61
+ import { ReactComponent as Schedule } from '../../icons/schedule.svg';
60
62
  import { ReactComponent as SecuritPositionZone } from '../../icons/security-position-zone.svg';
61
63
  import { ReactComponent as Security } from '../../icons/security.svg';
62
64
  import { ReactComponent as SecurityZone } from '../../icons/security-zone.svg';
63
- import { ReactComponent as Schedule } from '../../icons/schedule.svg';
65
+ import { ReactComponent as ServiceMarker } from '../../icons/service-marker.svg';
64
66
  import { ReactComponent as ShakeHand } from '../../icons/shake-hand.svg';
65
67
  import { ReactComponent as Shipping } from '../../icons/shipping.svg';
66
68
  import { ReactComponent as Speed } from '../../icons/speed.svg';
@@ -69,7 +71,9 @@ import { ReactComponent as StarFilledBig } from '../../icons/star-filled-big.svg
69
71
  import { ReactComponent as SupportTime } from '../../icons/support-time.svg';
70
72
  import { ReactComponent as Synchronization } from '../../icons/synchronization.svg';
71
73
  import { ReactComponent as Tools } from '../../icons/tools.svg';
74
+ import { ReactComponent as Travel } from '../../icons/travel.svg';
72
75
  import { ReactComponent as TshirtMarker } from '../../icons/tshirt-marker.svg';
76
+ import { ReactComponent as UserProfile } from '../../icons/user-profile.svg';
73
77
  import { ReactComponent as Wheelchair } from '../../icons/wheelchair.svg';
74
78
  import { ReactComponent as World } from '../../icons/world.svg';
75
79
  import { ReactComponent as WorldLocation } from '../../icons/world-location.svg';
@@ -208,6 +212,7 @@ import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg'
208
212
 
209
213
  const WebsiteIcons = {
210
214
  autocomplete: Autocomplete,
215
+ 'autocomplete-check': AutocompleteCheck,
211
216
  battery: Battery,
212
217
  buildings: Buildings,
213
218
  care: Care,
@@ -267,6 +272,7 @@ const WebsiteIcons = {
267
272
  security: Security,
268
273
  'security-osition-zone': SecuritPositionZone,
269
274
  'security-zone': SecurityZone,
275
+ 'service-marker': ServiceMarker,
270
276
  'shake-hand': ShakeHand,
271
277
  shipping: Shipping,
272
278
  speed: Speed,
@@ -275,7 +281,9 @@ const WebsiteIcons = {
275
281
  'support-time': SupportTime,
276
282
  synchronization: Synchronization,
277
283
  tools: Tools,
284
+ travel: Travel,
278
285
  'tshirt-marker': TshirtMarker,
286
+ 'user-profile': UserProfile,
279
287
  whellchair: Wheelchair,
280
288
  world: World,
281
289
  'world-location': WorldLocation,
@@ -9,6 +9,7 @@ export default class Input extends Component {
9
9
  super(props);
10
10
  this.inputId = uniqueId();
11
11
  this.inputRef = React.createRef();
12
+ this.state = { showPassword: false };
12
13
  }
13
14
 
14
15
  componentDidMount() {
@@ -42,8 +43,11 @@ export default class Input extends Component {
42
43
  onBlur,
43
44
  onFocus,
44
45
  icon,
46
+ enableTogglePassword,
45
47
  } = this.props;
46
48
 
49
+ const { showPassword } = this.state;
50
+
47
51
  let iconSize = size;
48
52
 
49
53
  switch (iconSize) {
@@ -68,6 +72,7 @@ export default class Input extends Component {
68
72
  }),
69
73
  id: this.inputId,
70
74
  ref: this.inputRef,
75
+ 'data-testid': 'input',
71
76
  name,
72
77
  checked,
73
78
  autoComplete: autocomplete ? '' : 'off',
@@ -75,12 +80,26 @@ export default class Input extends Component {
75
80
  onBlur,
76
81
  onFocus,
77
82
  onKeyDown: this.onKeyDown,
78
- type,
83
+ type: type === 'password' && showPassword ? 'text' : type,
79
84
  value,
80
85
  size: length,
81
86
  disabled,
82
87
  onChange,
83
88
  })}
89
+ {type === 'password' && enableTogglePassword && (
90
+ <span
91
+ onKeyDown={() => ({})}
92
+ role="button"
93
+ tabIndex={0}
94
+ onClick={() => this.setState({ showPassword: !showPassword })}
95
+ >
96
+ <Icon
97
+ icon={showPassword ? 'eye-crossed-out' : 'eye'}
98
+ size={iconSize}
99
+ className={cl('icon--password-toggle', { showed: showPassword })}
100
+ />
101
+ </span>
102
+ )}
84
103
  </div>
85
104
  );
86
105
  };
@@ -97,6 +116,7 @@ export default class Input extends Component {
97
116
  isFilter && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--filter' : null,
98
117
  isNoBorder && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--noborder' : null,
99
118
  { 'input--iconed': icon },
119
+ { 'input--password-toggle': type === 'password' },
100
120
  `input--${size}`,
101
121
  type === 'checkbox' || type === 'radio' ? `input--${type}` : null,
102
122
  disabled ? 'input--disabled' : null,
@@ -123,6 +143,7 @@ export default class Input extends Component {
123
143
  );
124
144
  }
125
145
  }
146
+
126
147
  Input.propTypes = {
127
148
  value: PropTypes.string,
128
149
  size: PropTypes.oneOf(['large', 'normal', 'small', 'mini']),
@@ -145,6 +166,7 @@ Input.propTypes = {
145
166
  onBlur: PropTypes.func,
146
167
  onFocus: PropTypes.func,
147
168
  onPressEnter: PropTypes.func,
169
+ enableTogglePassword: PropTypes.bool,
148
170
  };
149
171
 
150
172
  Input.defaultProps = {
@@ -169,4 +191,5 @@ Input.defaultProps = {
169
191
  length: undefined,
170
192
  onBlur: null,
171
193
  onFocus: null,
194
+ enableTogglePassword: false,
172
195
  };
@@ -0,0 +1,69 @@
1
+ import React from 'react';
2
+ import { render, fireEvent } from '@testing-library/react';
3
+ import '@testing-library/jest-dom/extend-expect';
4
+
5
+ import Input from './Input';
6
+
7
+ it('renders an input password component ', () => {
8
+ const { getByTestId } = render(<Input type="password" />);
9
+ const input = getByTestId('input');
10
+
11
+ expect(input).toHaveAttribute('type', 'password');
12
+ });
13
+
14
+ it('renders an input password component with icon ', () => {
15
+ const { getByTestId } = render(<Input type="password" icon="woosmap" />);
16
+ const comp = getByTestId('icon-woosmap');
17
+
18
+ expect(comp).toBeInTheDocument();
19
+ });
20
+
21
+ it('renders an input password component with toggle ', () => {
22
+ const { getByTestId } = render(<Input type="password" enableTogglePassword />);
23
+ const comp = getByTestId('icon-eye');
24
+
25
+ expect(comp).toBeInTheDocument();
26
+ });
27
+
28
+ it('renders an input password component with icon and toggle ', () => {
29
+ const { getByTestId } = render(<Input type="password" icon="woosmap" enableTogglePassword />);
30
+ const icon = getByTestId('icon-woosmap');
31
+ const toggle = getByTestId('icon-eye');
32
+
33
+ expect(icon).toBeInTheDocument();
34
+ expect(toggle).toBeInTheDocument();
35
+ });
36
+
37
+ it('input password component toggle change toggle icon ', () => {
38
+ const { getByTestId } = render(<Input type="password" enableTogglePassword />);
39
+
40
+ const start = getByTestId('icon-eye');
41
+ expect(start).toBeInTheDocument();
42
+
43
+ fireEvent.click(start);
44
+
45
+ const middle = getByTestId('icon-eye-crossed-out');
46
+ expect(middle).toBeInTheDocument();
47
+
48
+ fireEvent.click(middle);
49
+
50
+ const end = getByTestId('icon-eye');
51
+ expect(end).toBeInTheDocument();
52
+ });
53
+
54
+ it('input password component toggle change input type ', () => {
55
+ const { getByTestId } = render(<Input type="password" enableTogglePassword />);
56
+
57
+ const input = getByTestId('input');
58
+ expect(input).toHaveAttribute('type', 'password');
59
+
60
+ let toggle = getByTestId('icon-eye');
61
+ fireEvent.click(toggle);
62
+
63
+ expect(input).toHaveAttribute('type', 'text');
64
+
65
+ toggle = getByTestId('icon-eye-crossed-out');
66
+ fireEvent.click(toggle);
67
+
68
+ expect(input).toHaveAttribute('type', 'password');
69
+ });
@@ -15,7 +15,6 @@ const Template = (args) => {
15
15
  <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" isFilter isNoBorder />
16
16
  <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="large" isFilter isNoBorder />
17
17
  <Input placeholder={placeholder} hideLabel={hideLabel} icon="search" size="small" isFilter isNoBorder />
18
-
19
18
  <Input placeholder={placeholder} label={label} hideLabel={hideLabel} size="large" />
20
19
  <Input
21
20
  placeholder={placeholder}
@@ -60,9 +59,31 @@ const Template = (args) => {
60
59
  hideLabel={hideLabel}
61
60
  error="This is an error"
62
61
  />
63
-
64
62
  <Input placeholder={placeholder} label={label} type="textarea" />
65
63
  <Input placeholder="Type numbers" label="Please type numbers" type="number" />
64
+ <Input placeholder="Type password" type="password" label="Password" hideLabel={hideLabel} />
65
+ <Input
66
+ placeholder="Type password"
67
+ type="password"
68
+ label="Password with icon"
69
+ hideLabel={hideLabel}
70
+ icon="woosmap"
71
+ />
72
+ <Input
73
+ placeholder="Type password"
74
+ type="password"
75
+ label="Password with toggle"
76
+ hideLabel={hideLabel}
77
+ enableTogglePassword
78
+ />
79
+ <Input
80
+ icon="woosmap"
81
+ placeholder="Type password"
82
+ type="password"
83
+ label="Password with icon and toggle"
84
+ hideLabel={hideLabel}
85
+ enableTogglePassword
86
+ />
66
87
  </div>
67
88
  );
68
89
  };
@@ -86,7 +86,45 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
86
86
 
87
87
  export const createWoosmapMap = (node) => {
88
88
  try {
89
- return new window.woosmap.map.Map(node);
89
+ return new window.woosmap.map.Map(node, {
90
+ styles: [
91
+ {
92
+ featureType: 'administrative',
93
+ elementType: 'all',
94
+ stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
95
+ },
96
+ {
97
+ featureType: 'road',
98
+ elementType: 'all',
99
+ stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
100
+ },
101
+ {
102
+ featureType: 'water',
103
+ elementType: 'all',
104
+ stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
105
+ },
106
+ {
107
+ featureType: 'landscape.man_made',
108
+ elementType: 'all',
109
+ stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
110
+ },
111
+ {
112
+ featureType: 'landscape.natural',
113
+ elementType: 'all',
114
+ stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
115
+ },
116
+ {
117
+ featureType: 'poi',
118
+ elementType: 'all',
119
+ stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
120
+ },
121
+ {
122
+ featureType: 'transit',
123
+ elementType: 'all',
124
+ stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
125
+ },
126
+ ],
127
+ });
90
128
  } catch (e) {
91
129
  console.error('Cound not instantiate a Map');
92
130
  console.error(e);
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M77.773 31.603H22.227c-5.76 0-10.445-4.686-10.445-10.444s4.686-10.445 10.445-10.445h55.547c5.76 0 10.445 4.686 10.445 10.445s-4.686 10.444-10.445 10.444Zm-55.546-17.89c-4.105 0-7.445 3.34-7.445 7.445s3.34 7.444 7.445 7.444h55.547c4.105 0 7.445-3.34 7.445-7.444s-3.34-7.445-7.445-7.445H22.227ZM78.537 89.287H21.463c-5.339 0-9.682-4.343-9.682-9.682V47.753c0-5.338 4.343-9.681 9.682-9.681h57.074c5.339 0 9.682 4.343 9.682 9.681v31.852c0 5.339-4.343 9.682-9.682 9.682ZM21.463 41.073a6.689 6.689 0 0 0-6.682 6.681v31.852a6.689 6.689 0 0 0 6.682 6.682h57.074a6.689 6.689 0 0 0 6.682-6.682V47.754a6.689 6.689 0 0 0-6.682-6.681H21.463Z"/><path d="M21.307 19.953h21.571v3H21.307zM21.307 49.504h35.755v3H21.307zM21.307 61.18h54.179v3H21.307zM21.307 72.932H50v3H21.307zM69.37 56.865l-5.982-5.982 2.121-2.121 3.861 3.861 6.913-6.913 2.121 2.121-9.034 9.034z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 37.486c3.248 0 6.546-1.2 8.401-3.057a1.501 1.501 0 0 0-2.122-2.121c-1.301 1.302-3.824 2.177-6.278 2.177s-4.978-.875-6.278-2.177a1.5 1.5 0 1 0-2.122 2.121c1.855 1.857 5.153 3.057 8.401 3.057Z" /><path d="M64.111 37.855c2.279-2.987 3.649-6.702 3.649-10.741a17.64 17.64 0 0 0-1.154-6.252c.238-.244.45-.516.594-.839a2.894 2.894 0 0 0-.245-2.809l-.724-1.073 1.565-4.669a2.93 2.93 0 0 0-.343-2.577 2.929 2.929 0 0 0-2.248-1.306L50.104 6.523a1.486 1.486 0 0 0-.211 0L34.792 7.589a2.932 2.932 0 0 0-2.248 1.306 2.928 2.928 0 0 0-.343 2.576l1.565 4.67-.724 1.073a2.894 2.894 0 0 0-.245 2.809c.144.323.356.595.594.839a17.64 17.64 0 0 0-1.154 6.252c0 4.038 1.37 7.754 3.649 10.741-9.402 1.748-16.514 10.121-16.514 19.855v32.243a3.533 3.533 0 0 0 3.529 3.529h8.783a5.193 5.193 0 0 0 4.963-3.684H64.13a5.195 5.195 0 0 0 4.963 3.684h7.999a3.533 3.533 0 0 0 3.529-3.529V57.71c0-9.734-7.112-18.107-16.514-19.855ZM35.615 18.771l.609-.904h27.574l.634.898L50 20.804l-14.386-2.032Zm14.389-9.249 14.95.996-1.458 4.349H36.502l-1.453-4.289 14.955-1.056ZM36.212 21.885l13.579 1.918a1.473 1.473 0 0 0 .42 0l13.579-1.918c.636 1.672.971 3.428.971 5.23 0 8.139-6.621 14.76-14.76 14.76s-14.76-6.621-14.76-14.76c0-1.802.335-3.557.971-5.23Zm12.541 28.734c.12-.806.825-1.414 1.641-1.414s1.521.608 1.632 1.345l1.718 16.84a1.967 1.967 0 0 1-.39 1.489l-2.129 2.748a1.033 1.033 0 0 1-.832.408c-.192 0-.557-.053-.831-.408l-2.129-2.748c-.325-.42-.468-.963-.381-1.558l1.701-16.702Zm3.068-5.745-1.264 1.263a.234.234 0 0 1-.138.07l-.026-.002c-.009 0-.018.003-.028.003a.24.24 0 0 1-.138-.071l-1.263-1.263h2.856Zm25.805 45.079a.53.53 0 0 1-.529.529h-7.999a2.187 2.187 0 0 1-2.184-2.184V60.882a1.5 1.5 0 1 0-3 0v25.916H36.873V60.882a1.5 1.5 0 1 0-3 0v27.416c0 1.204-.98 2.184-2.185 2.184h-8.783a.53.53 0 0 1-.529-.529V57.71c0-8.843 6.892-16.366 15.688-17.126.112-.01.218-.033.321-.066a17.707 17.707 0 0 0 6.789 3.672 2.41 2.41 0 0 0 .695 1.831l1.409 1.409a4.744 4.744 0 0 0-1.502 2.815l-1.701 16.703a4.987 4.987 0 0 0 .985 3.769l2.129 2.748c.772.998 1.94 1.57 3.202 1.57s2.431-.572 3.203-1.57l2.129-2.748c.825-1.065 1.185-2.439.994-3.7l-1.718-16.84a4.64 4.64 0 0 0-1.489-2.751l1.404-1.404a2.405 2.405 0 0 0 .673-2.062 17.737 17.737 0 0 0 6.027-3.442c.103.032.209.056.321.066 8.797.761 15.688 8.284 15.688 17.126v32.243Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 37.486c3.248 0 6.546-1.2 8.401-3.057a1.501 1.501 0 0 0-2.122-2.121c-1.301 1.302-3.824 2.177-6.278 2.177s-4.978-.875-6.278-2.177a1.5 1.5 0 1 0-2.122 2.121c1.855 1.857 5.153 3.057 8.401 3.057Z"/><path d="M64.111 37.855c2.279-2.987 3.649-6.702 3.649-10.741a17.64 17.64 0 0 0-1.154-6.252c.238-.244.45-.516.594-.839a2.894 2.894 0 0 0-.245-2.809l-.724-1.073 1.565-4.669a2.93 2.93 0 0 0-.343-2.577 2.929 2.929 0 0 0-2.248-1.306L50.104 6.523a1.486 1.486 0 0 0-.211 0L34.792 7.589a2.932 2.932 0 0 0-2.248 1.306 2.928 2.928 0 0 0-.343 2.576l1.565 4.67-.724 1.073a2.894 2.894 0 0 0-.245 2.809c.144.323.356.595.594.839a17.64 17.64 0 0 0-1.154 6.252c0 4.038 1.37 7.754 3.649 10.741-9.402 1.748-16.514 10.121-16.514 19.855v32.243a3.533 3.533 0 0 0 3.529 3.529h8.783a5.193 5.193 0 0 0 4.963-3.684H64.13a5.195 5.195 0 0 0 4.963 3.684h7.999a3.533 3.533 0 0 0 3.529-3.529V57.71c0-9.734-7.112-18.107-16.514-19.855ZM35.615 18.771l.609-.904h27.574l.634.898L50 20.804l-14.386-2.032Zm14.389-9.249 14.95.996-1.458 4.349H36.502l-1.453-4.289 14.955-1.056ZM36.212 21.885l13.579 1.918a1.473 1.473 0 0 0 .42 0l13.579-1.918c.636 1.672.971 3.428.971 5.23 0 8.139-6.621 14.76-14.76 14.76s-14.76-6.621-14.76-14.76c0-1.802.335-3.557.971-5.23Zm12.541 28.734c.12-.806.825-1.414 1.641-1.414s1.521.608 1.632 1.345l1.718 16.84a1.967 1.967 0 0 1-.39 1.489l-2.129 2.748a1.033 1.033 0 0 1-.832.408c-.192 0-.557-.053-.831-.408l-2.129-2.748c-.325-.42-.468-.963-.381-1.558l1.701-16.702Zm3.068-5.745-1.264 1.263a.234.234 0 0 1-.138.07l-.026-.002c-.009 0-.018.003-.028.003a.24.24 0 0 1-.138-.071l-1.263-1.263h2.856Zm25.805 45.079a.53.53 0 0 1-.529.529h-7.999a2.187 2.187 0 0 1-2.184-2.184V60.882a1.5 1.5 0 1 0-3 0v25.916H36.873V60.882a1.5 1.5 0 1 0-3 0v27.416c0 1.204-.98 2.184-2.185 2.184h-8.783a.53.53 0 0 1-.529-.529V57.71c0-8.843 6.892-16.366 15.688-17.126.112-.01.218-.033.321-.066a17.707 17.707 0 0 0 6.789 3.672 2.41 2.41 0 0 0 .695 1.831l1.409 1.409a4.744 4.744 0 0 0-1.502 2.815l-1.701 16.703a4.987 4.987 0 0 0 .985 3.769l2.129 2.748c.772.998 1.94 1.57 3.202 1.57s2.431-.572 3.203-1.57l2.129-2.748c.825-1.065 1.185-2.439.994-3.7l-1.718-16.84a4.64 4.64 0 0 0-1.489-2.751l1.404-1.404a2.405 2.405 0 0 0 .673-2.062 17.737 17.737 0 0 0 6.027-3.442c.103.032.209.056.321.066 8.797.761 15.688 8.284 15.688 17.126v32.243Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.5 79.2"><path d="M22.5 65.8c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.3 2.8 6.3 6.2-2.8 6.2-6.3 6.2Zm0-9.4c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2 3.3-1.4 3.3-3.2-1.5-3.2-3.3-3.2ZM49.1 79.2c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2Zm0-9.4c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2 3.2-1.4 3.2-3.2-1.4-3.2-3.2-3.2ZM70 61.1H34.3c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H70c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5ZM10.7 61.1H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h9.2c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5ZM37.3 74.5H1.6C.8 74.5.1 73.8.1 73s.7-1.5 1.5-1.5h35.7c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5ZM70 74.5h-9.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H70c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5ZM62.1 48.1H9.5c-5.2 0-9.5-4.2-9.5-9.5V9.5C0 4.3 4.2 0 9.5 0H62c5.2 0 9.5 4.2 9.5 9.5v29.1c0 5.2-4.2 9.5-9.4 9.5ZM9.5 3C5.9 3 3 5.9 3 9.5v29.1c0 3.6 2.9 6.5 6.5 6.5H62c3.6 0 6.5-2.9 6.5-6.5V9.5C68.5 5.9 65.6 3 62 3H9.5Z"/><path d="M26.8 35.7c-.9 0-1.8-.3-2.6-.8-1.4-.9-2.2-2.4-2.2-4V16.4c0-1.6.8-3.1 2.2-4s3.1-1 4.6-.3l16 7.3c1.7.8 2.8 2.4 2.8 4.3s-1.1 3.6-2.8 4.3l-16 7.3c-.7.3-1.3.4-2 .4Zm0-21.1c-.3 0-.7.1-1 .3-.5.3-.8.9-.8 1.5V31c0 .6.3 1.2.8 1.5s1.1.4 1.7.1l16-7.3c.6-.3 1-.9 1-1.6s-.4-1.3-1-1.6l-16-7.3c-.2-.1-.5-.2-.7-.2Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.5 79.2"><path d="M22.5 65.8c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.3 2.8 6.3 6.2-2.8 6.2-6.3 6.2Zm0-9.4c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2 3.3-1.4 3.3-3.2-1.5-3.2-3.3-3.2Zm26.6 22.8c-3.4 0-6.2-2.8-6.2-6.2s2.8-6.2 6.2-6.2 6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2Zm0-9.4c-1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2 3.2-1.4 3.2-3.2-1.4-3.2-3.2-3.2ZM70 61.1H34.3c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H70c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5Zm-59.3 0H1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h9.2c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5Zm26.6 13.4H1.6C.8 74.5.1 73.8.1 73s.7-1.5 1.5-1.5h35.7c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5Zm32.7 0h-9.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H70c.8 0 1.5.7 1.5 1.5s-.6 1.5-1.5 1.5Zm-7.9-26.4H9.5c-5.2 0-9.5-4.2-9.5-9.5V9.5C0 4.3 4.2 0 9.5 0H62c5.2 0 9.5 4.2 9.5 9.5v29.1c0 5.2-4.2 9.5-9.4 9.5ZM9.5 3C5.9 3 3 5.9 3 9.5v29.1c0 3.6 2.9 6.5 6.5 6.5H62c3.6 0 6.5-2.9 6.5-6.5V9.5C68.5 5.9 65.6 3 62 3H9.5Z"/><path d="M26.8 35.7c-.9 0-1.8-.3-2.6-.8-1.4-.9-2.2-2.4-2.2-4V16.4c0-1.6.8-3.1 2.2-4s3.1-1 4.6-.3l16 7.3c1.7.8 2.8 2.4 2.8 4.3s-1.1 3.6-2.8 4.3l-16 7.3c-.7.3-1.3.4-2 .4Zm0-21.1c-.3 0-.7.1-1 .3-.5.3-.8.9-.8 1.5V31c0 .6.3 1.2.8 1.5s1.1.4 1.7.1l16-7.3c.6-.3 1-.9 1-1.6s-.4-1.3-1-1.6l-16-7.3c-.2-.1-.5-.2-.7-.2Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M75.253 7.773H24.747c-7.156 0-12.978 5.822-12.978 12.978v50.506c0 7.156 5.821 12.978 12.978 12.978H35a1.5 1.5 0 1 0 0-3H24.747c-5.502 0-9.978-4.476-9.978-9.978V20.751c0-5.502 4.476-9.978 9.978-9.978h50.506c5.502 0 9.978 4.476 9.978 9.978v50.506c0 5.502-4.476 9.978-9.978 9.978H65a1.5 1.5 0 1 0 0 3h10.253c7.156 0 12.978-5.822 12.978-12.978V20.751c0-7.156-5.821-12.978-12.978-12.978Z"/><path d="M50 44.504c-9.51 0-17.246 7.736-17.246 17.246 0 6.331 3.927 10.963 7.724 15.443 3.365 3.971 6.545 7.722 6.545 12.244 0 1.591 1.28 2.79 2.978 2.79s2.978-1.199 2.978-2.79c0-4.521 3.18-8.272 6.545-12.244 3.797-4.48 7.724-9.113 7.724-15.443 0-9.51-7.736-17.246-17.246-17.246Zm7.234 30.75C53.828 79.272 50.312 83.421 50 88.68c-.313-5.259-3.828-9.408-7.234-13.426-3.605-4.254-7.012-8.273-7.012-13.503 0-7.855 6.391-14.246 14.246-14.246s14.246 6.391 14.246 14.246c0 5.23-3.406 9.249-7.012 13.503Z"/><path d="M50 54.218c-4.313 0-7.823 3.51-7.823 7.824s3.51 7.824 7.823 7.824 7.823-3.51 7.823-7.824-3.51-7.824-7.823-7.824Zm0 12.647c-2.659 0-4.823-2.164-4.823-4.824s2.164-4.824 4.823-4.824 4.823 2.164 4.823 4.824-2.164 4.824-4.823 4.824ZM31.981 39.196a4.133 4.133 0 0 0 4.133-4.133h-8.265a4.133 4.133 0 0 0 4.133 4.133ZM32.309 17.409a6.777 6.777 0 0 0-7.104 6.769v5.287h-1.464a1.487 1.487 0 0 0 0 2.974h16.481a1.487 1.487 0 0 0 0-2.974h-1.464V24.37c0-3.649-2.804-6.789-6.449-6.96ZM50 24.466h27.746a1.5 1.5 0 1 0 0-3H50a1.5 1.5 0 1 0 0 3ZM50 32.799h18.816a1.5 1.5 0 1 0 0-3H50a1.5 1.5 0 1 0 0 3Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M75.253 7.773H24.747c-7.156 0-12.978 5.822-12.978 12.978v50.506c0 7.156 5.821 12.978 12.978 12.978H35a1.5 1.5 0 1 0 0-3H24.747c-5.502 0-9.978-4.476-9.978-9.978V20.751c0-5.502 4.476-9.978 9.978-9.978h50.506c5.502 0 9.978 4.476 9.978 9.978v50.506c0 5.502-4.476 9.978-9.978 9.978H65a1.5 1.5 0 1 0 0 3h10.253c7.156 0 12.978-5.822 12.978-12.978V20.751c0-7.156-5.821-12.978-12.978-12.978Z"/><path d="M50 44.504c-9.51 0-17.246 7.736-17.246 17.246 0 6.331 3.927 10.963 7.724 15.443 3.365 3.971 6.545 7.722 6.545 12.244 0 1.591 1.28 2.79 2.978 2.79s2.978-1.199 2.978-2.79c0-4.521 3.18-8.272 6.545-12.244 3.797-4.48 7.724-9.113 7.724-15.443 0-9.51-7.736-17.246-17.246-17.246Zm7.234 30.75C53.828 79.272 50.312 83.421 50 88.68c-.313-5.259-3.828-9.408-7.234-13.426-3.605-4.254-7.012-8.273-7.012-13.503 0-7.855 6.391-14.246 14.246-14.246s14.246 6.391 14.246 14.246c0 5.23-3.406 9.249-7.012 13.503Z"/><path d="M50 54.218c-4.313 0-7.823 3.51-7.823 7.824s3.51 7.824 7.823 7.824 7.823-3.51 7.823-7.824-3.51-7.824-7.823-7.824Zm0 12.647c-2.659 0-4.823-2.164-4.823-4.824s2.164-4.824 4.823-4.824 4.823 2.164 4.823 4.824-2.164 4.824-4.823 4.824ZM31.981 39.196a4.133 4.133 0 0 0 4.133-4.133h-8.265a4.133 4.133 0 0 0 4.133 4.133Zm.328-21.787a6.777 6.777 0 0 0-7.104 6.769v5.287h-1.464a1.487 1.487 0 0 0 0 2.974h16.481a1.487 1.487 0 0 0 0-2.974h-1.464V24.37c0-3.649-2.804-6.789-6.449-6.96ZM50 24.466h27.746a1.5 1.5 0 1 0 0-3H50a1.5 1.5 0 1 0 0 3Zm0 8.333h18.816a1.5 1.5 0 1 0 0-3H50a1.5 1.5 0 1 0 0 3Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path style="fill:none" d="M0 0h100v100H0z"/><path d="M47.176 48.245c0 1.514 1.214 2.655 2.824 2.655s2.824-1.142 2.824-2.655c0-3.993 2.83-7.332 5.825-10.867 3.42-4.035 6.955-8.207 6.955-13.935 0-8.604-7-15.605-15.604-15.605s-15.605 7-15.605 15.605c0 5.728 3.536 9.9 6.955 13.935 2.996 3.535 5.826 6.874 5.826 10.867ZM50 10.838c6.95 0 12.604 5.655 12.604 12.605 0 4.628-3.032 8.207-6.243 11.995-2.776 3.276-5.635 6.648-6.361 10.79-.727-4.141-3.584-7.514-6.361-10.79-3.211-3.788-6.244-7.367-6.244-11.995 0-6.95 5.655-12.605 12.605-12.605Z"/><path d="M50 30.869c3.951 0 7.165-3.214 7.165-7.165S53.951 16.539 50 16.539s-7.165 3.214-7.165 7.165 3.214 7.165 7.165 7.165Zm0-11.329c2.297 0 4.165 1.868 4.165 4.165S52.297 27.87 50 27.87s-4.165-1.868-4.165-4.165S47.703 19.54 50 19.54ZM84.921 53.341c-2.699-2.699-7.09-2.698-9.787 0l-8.932 8.932c-.48-3.351-3.361-5.938-6.842-5.938H41.908a13.65 13.65 0 0 0-8.929 3.327l-6.876 5.951-1.961-3.153-11.655 7.249 14.317 23.02 11.654-7.249-1.461-2.349h19.094a21.168 21.168 0 0 0 15.068-6.242l13.762-13.761c2.697-2.699 2.697-7.089 0-9.787ZM27.767 88.596 16.619 70.671l6.56-4.08 11.148 17.925-6.56 4.08ZM82.8 61.006 69.038 74.767a18.19 18.19 0 0 1-12.947 5.363h-20.96l-7.425-11.939 7.235-6.261a10.646 10.646 0 0 1 6.966-2.596h17.452c2.161 0 3.92 1.758 3.92 3.92s-1.759 3.92-3.92 3.92H48.484v3h10.875c.308 0 .608-.027.905-.066v.066a5.532 5.532 0 0 0 3.887-1.61l13.104-13.103a3.927 3.927 0 0 1 5.545 0 3.926 3.926 0 0 1 0 5.544Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M72.476 56.019a1.493 1.493 0 0 0-1.824 1.083 28.646 28.646 0 0 1-2.624 6.672l-7.304-6.431a5.464 5.464 0 0 0-5.121-1.162l-2.48.701a5.51 5.51 0 0 0-3.992 5.28 2.49 2.49 0 0 1-.825 1.849l-6.595 5.926a5.468 5.468 0 0 0-1.64 5.478l.836 3.178c-10.677-.727-19.763-7.322-24.054-16.581 8.183-.31 21.15-3.402 41.698-12.199a1.5 1.5 0 1 0-1.18-2.758C35.465 56.434 22.9 59.061 15.693 59.094a28.535 28.535 0 0 1-1.487-9.093c0-4.459 1.024-8.684 2.849-12.452l6.769 3.483a4.537 4.537 0 0 1 2.434 3.687l.082 1.153a7.478 7.478 0 0 0 3.159 5.598 7.482 7.482 0 0 0 6.333 1.102 7.526 7.526 0 0 0 5.482-6.66l.365-4.756a4.531 4.531 0 0 1 1.156-2.683l2.383-2.628a7.544 7.544 0 0 0 1.927-5.597l-.641-8.678a28.59 28.59 0 0 1 10.707 3.603 1.5 1.5 0 0 0 1.503-2.597 31.658 31.658 0 0 0-15.84-4.241c-11.895 0-22.274 6.596-27.686 16.319-.043.059-.086.118-.12.185-.013.024-.018.05-.029.075a31.46 31.46 0 0 0-3.1 8.339c-7.918 5.59-8.872 9.789-8.901 11.355-.028 1.508.774 3.679 3.111 5.251 1.578 1.062 3.935 1.892 7.418 2.118 4.732 11.539 16.083 19.691 29.307 19.691h.001c14.494 0 27.112-9.797 30.687-23.824a1.498 1.498 0 0 0-1.083-1.823ZM42.872 21.334c.202 0 .404.016.606.02l.674 9.113a4.522 4.522 0 0 1-1.157 3.36l-2.384 2.629a7.547 7.547 0 0 0-1.924 4.469l-.365 4.756a4.517 4.517 0 0 1-3.291 3.998c-1.307.364-2.693.122-3.802-.661s-1.8-2.008-1.897-3.361l-.082-1.153a7.554 7.554 0 0 0-4.053-6.141l-6.69-3.443c5.061-8.148 14.088-13.587 24.366-13.587ZM7.821 57.368c-1.764-1.187-1.79-2.554-1.787-2.706.006-.332.234-3.013 5.28-7.176A31.69 31.69 0 0 0 11.205 50c0 3.094.454 6.082 1.285 8.91-2.242-.294-3.714-.899-4.669-1.542Zm36.194 21.25-1.043-3.967a2.477 2.477 0 0 1 .743-2.482l6.595-5.926a5.493 5.493 0 0 0 1.82-4.082c0-1.106.744-2.091 1.809-2.393l2.48-.701a2.468 2.468 0 0 1 2.321.526l7.674 6.757a28.624 28.624 0 0 1-22.398 12.268Z"/><path d="M96.644 24.18a2.015 2.015 0 0 0-1.492-.918l-1.156-.122a8.164 8.164 0 0 0-5.245 1.249l-6.21 3.998-13.948-8.332a5.187 5.187 0 0 0-4.693-.309l-.5.216a2.077 2.077 0 0 0-.637 3.387l8.297 8.164 1.773 3.123-6.148 3.958-5.253-1.401a2.735 2.735 0 0 0-2.187.343l-1.023.659c-.62.399-.979 1.077-.962 1.814s.408 1.397 1.045 1.767l3.933 2.282-.257.53a1.863 1.863 0 0 0 .11 1.837c.358.556.979.882 1.625.86l.589-.015.449 4.524a2.088 2.088 0 0 0 1.174 1.684c.663.32 1.43.275 2.051-.125l1.024-.659a2.744 2.744 0 0 0 1.217-1.846l.9-5.363 6.148-3.958 2.108 2.907 3.995 10.934a2.074 2.074 0 0 0 1.952 1.364c.509 0 1.006-.188 1.393-.539l.406-.368a5.18 5.18 0 0 0 1.662-4.399L86.976 35.28l6.21-3.998a8.165 8.165 0 0 0 3.309-4.258l.368-1.102a2.015 2.015 0 0 0-.217-1.738Zm-5.083 4.576-6.993 4.501a1.502 1.502 0 0 0-.679 1.428l1.911 17.07c.042.374-.016.748-.159 1.086l-3.521-9.636a1.512 1.512 0 0 0-.194-.366l-3.063-4.225a1.499 1.499 0 0 0-2.026-.381l-7.899 5.084a1.5 1.5 0 0 0-.667 1.013l-.781 4.654-.331-3.34c-.078-.781-.789-1.421-1.596-1.409l-.08.002.027-.056c.354-.708.071-1.655-.614-2.053l-2.902-1.684 4.559 1.216c.408.11.844.041 1.199-.188l7.899-5.084a1.5 1.5 0 0 0 .492-2.002l-2.577-4.538a1.49 1.49 0 0 0-.252-.329l-7.313-7.195c.367.01.731.112 1.054.305l14.746 8.809a1.501 1.501 0 0 0 1.581-.026l6.993-4.501a5.136 5.136 0 0 1 3.257-.792 5.14 5.14 0 0 1-2.07 2.637Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M79.546 23.072h-4.552a1.5 1.5 0 1 0 0 3h4.552a3.375 3.375 0 0 1 3.371 3.37v55.611a3.375 3.375 0 0 1-3.371 3.371H20.454a3.376 3.376 0 0 1-3.371-3.371V29.442a3.374 3.374 0 0 1 3.371-3.37h4.552a1.5 1.5 0 1 0 0-3h-4.552a6.377 6.377 0 0 0-6.371 6.37v55.611a6.378 6.378 0 0 0 6.371 6.371h59.092a6.378 6.378 0 0 0 6.371-6.371V29.442a6.377 6.377 0 0 0-6.371-6.37Z"/><path d="M27.71 69.049h44.58a1.5 1.5 0 1 0 0-3H27.71a1.5 1.5 0 1 0 0 3ZM39.576 75.018a1.5 1.5 0 1 0 0 3h20.849a1.5 1.5 0 1 0 0-3H39.576ZM34.949 57.079a1.5 1.5 0 1 0 0 3h30.103a1.5 1.5 0 1 0 0-3H34.949ZM35.428 42.939c3.691 3.819 8.854 6.207 14.572 6.207 5.932 0 11.261-2.576 14.974-6.649.142-.109.258-.24.351-.386 3.081-3.559 4.96-8.185 4.96-13.25 0-11.186-9.1-20.285-20.285-20.285s-20.285 9.1-20.285 20.285c0 5.277 2.042 10.075 5.357 13.687.094.148.211.282.356.392ZM50 46.146c-4.573 0-8.726-1.798-11.82-4.708 2.681-4.829 7.244-7.786 12.128-7.786 4.804 0 9.193 2.753 11.918 7.417a17.23 17.23 0 0 1-12.225 5.078Zm-5.2-21.371c0-2.867 2.333-5.2 5.2-5.2s5.2 2.333 5.2 5.2-2.333 5.199-5.2 5.199-5.2-2.332-5.2-5.199ZM50 11.576c9.531 0 17.285 7.754 17.285 17.285 0 3.629-1.129 6.996-3.047 9.78-2.355-3.561-5.669-6.117-9.371-7.281 2.018-1.495 3.334-3.886 3.334-6.584 0-4.521-3.678-8.2-8.2-8.2s-8.2 3.679-8.2 8.2a8.19 8.19 0 0 0 3.523 6.725c-3.689 1.269-6.947 3.92-9.229 7.582-2.113-2.867-3.378-6.395-3.378-10.222 0-9.531 7.754-17.285 17.285-17.285Z"/></svg>
@@ -17,31 +17,55 @@
17
17
  display block
18
18
  margin .5rem 0 .5rem 0
19
19
  &--iconed
20
+ &--password-toggle
20
21
  .icon
21
22
  fill $inputDemoBorderColor
22
23
  position absolute
23
24
  left 1rem
24
25
  top .7rem
26
+ &--password-toggle
27
+ trans()
28
+ left unset
29
+ right 1rem
30
+ cursor pointer
31
+ &:hover
32
+ &.showed
33
+ fill $dark60
25
34
  &.input--large
26
35
  .icon
27
36
  left 1.2rem
28
37
  top 1rem
38
+ &--password-toggle
39
+ left unset
40
+ right 1.2rem
29
41
  &.input--filter
30
42
  .icon
31
43
  left -.4rem
32
44
  top .7rem
45
+ &--password-toggle
46
+ left unset
47
+ right -.4rem
33
48
  &.input--large
34
49
  .icon
35
50
  left -.4rem
36
51
  top 1.1rem
52
+ &--password-toggle
53
+ left unset
54
+ right -.4rem
37
55
  &.input--small
38
56
  .icon
39
57
  left -.4rem
40
58
  top .3rem
59
+ &--password-toggle
60
+ left unset
61
+ right -.4rem
41
62
  &.input--small
42
63
  .icon
43
64
  left .8rem
44
65
  top .4rem
66
+ &--password-toggle
67
+ left unset
68
+ right .8rem
45
69
  &--checkbox
46
70
  &--radio
47
71
  position relative
@@ -95,11 +119,15 @@
95
119
  border-color $secondary
96
120
  .input--iconed &
97
121
  padding-left 4rem
122
+ .input--password-toggle &
123
+ padding-right 4rem
98
124
  .input--large &
99
125
  font-size $inputFontSizeLarge
100
126
  line-height $inputLineHeightLarge
101
127
  .input--iconed.input--large &
102
128
  padding-left 4.6rem
129
+ .input--password-toggle.input--large &
130
+ padding-right 4.6rem
103
131
  .input--filter.input--iconed &
104
132
  padding-left 2.6rem
105
133
  padding-bottom 0