@neovici/cosmoz-input 5.7.0 → 5.7.1

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.
Files changed (9) hide show
  1. package/dist/cosmoz-input.js +5 -11
  2. package/dist/cosmoz-toggle.js +17 -24
  3. package/dist/render.d.ts +1 -5
  4. package/dist/render.js +14 -22
  5. package/dist/styles.d.ts +1 -0
  6. package/dist/styles.js +168 -159
  7. package/dist/util.d.ts +4 -1
  8. package/dist/util.js +3 -2
  9. package/package.json +3 -13
package/dist/cosmoz-input.js CHANGED
@@ -7,13 +7,9 @@ import { attributes, render } from './render';
7
7
  import { styles } from './styles';
8
8
  import { useAllowedPattern } from './use-allowed-pattern';
9
9
  import { useInput } from './use-input';
10
- import { getPlaceholder } from './util';
10
+ import { defaultMax, getPlaceholder } from './util';
11
11
  const observedAttributes = [
12
12
  'type',
13
- 'variant',
14
- 'hint',
15
- 'compact',
16
- 'required',
17
13
  'pattern',
18
14
  'allowed-pattern',
19
15
  'min',
@@ -25,9 +21,8 @@ const observedAttributes = [
25
21
  ...attributes,
26
22
  ];
27
23
  export const Input = (host) => {
28
- const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, required, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
24
+ const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
29
25
  const onBeforeInput = useAllowedPattern(allowedPattern);
30
- host.toggleAttribute('has-value', !!value);
31
26
  return render(html `
32
27
  <input
33
28
  ${ref(onRef)}
@@ -37,11 +32,10 @@ export const Input = (host) => {
37
32
  type=${type}
38
33
  pattern=${ifDefined(pattern)}
39
34
  autocomplete=${ifDefined(autocomplete)}
40
- placeholder=${getPlaceholder({ placeholder: host.placeholder })}
35
+ placeholder=${getPlaceholder(host)}
41
36
  ?readonly=${readonly}
42
- aria-disabled=${disabled ? 'true' : 'false'}
37
+ ?aria-disabled=${disabled}
43
38
  ?disabled=${disabled}
44
- ?required=${required}
45
39
  .value=${live(value ?? '')}
46
40
  maxlength=${ifDefined(maxlength)}
47
41
  @beforeinput=${onBeforeInput}
@@ -50,7 +44,7 @@ export const Input = (host) => {
50
44
  @focus=${onFocus}
51
45
  @blur=${onFocus}
52
46
  min=${ifDefined(min)}
53
- max=${ifDefined(max)}
47
+ max=${ifDefined(defaultMax(type, max))}
54
48
  step=${ifDefined(step)}
55
49
  />
56
50
  `, host);
package/dist/cosmoz-toggle.js CHANGED
@@ -22,16 +22,16 @@ const CosmozToggle = (host) => {
22
22
  export const toggleStyles = css `
23
23
  .toggle {
24
24
  appearance: none;
25
- width: calc(var(--cz-spacing) * 9);
26
- height: calc(var(--cz-spacing) * 4.5);
25
+ width: 35px;
26
+ height: 18px;
27
27
  display: inline-block;
28
28
  position: relative;
29
- border-radius: var(--cz-radius-3xl);
29
+ border-radius: 18px;
30
30
  overflow: hidden;
31
31
  outline: none;
32
32
  border: none;
33
33
  cursor: pointer;
34
- background: var(--cz-color-bg-quaternary);
34
+ background: var(--cz-toggle-color, #101010);
35
35
  transition: background-color ease 0.25s;
36
36
  margin: 0;
37
37
  }
@@ -40,34 +40,27 @@ export const toggleStyles = css `
40
40
  display: block;
41
41
  position: absolute;
42
42
  z-index: 2;
43
- width: calc(var(--cz-spacing) * 3.5);
44
- height: calc(var(--cz-spacing) * 3.5);
45
- background: var(--cz-color-brand-25);
46
- left: calc(var(--cz-spacing) * 0.5);
47
- top: calc(var(--cz-spacing) * 0.5);
48
- border-radius: var(--cz-radius-full);
43
+ width: 14px;
44
+ height: 14px;
45
+ background: var(--cz-toggle-thumb-color, #15b0d3);
46
+ left: 2px;
47
+ top: 2px;
48
+ border-radius: 50%;
49
49
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.25s;
50
50
  }
51
51
  .toggle:checked {
52
- background: var(--cz-color-bg-brand-solid);
52
+ background: var(--cz-toggle-checked-color, #66d7f0);
53
53
  }
54
54
  .toggle:checked::before {
55
- left: calc(var(--cz-spacing) * 5);
55
+ left: 19px;
56
56
  }
57
- label {
58
- padding-left: calc(var(--cz-spacing) * 4);
59
- font-size: var(--cz-text-sm);
60
- line-height: var(--cz-text-sm-line-height);
61
- color: var(--cz-color-text-secondary);
57
+ .toggle + label {
58
+ padding-left: 16px;
59
+ font-size: 14px;
60
+ line-height: 18px;
62
61
  cursor: pointer;
63
62
  user-select: none;
64
63
  }
65
-
66
- .failure {
67
- font-size: var(--cz-text-sm);
68
- line-height: var(--cz-text-sm-line-height);
69
- color: var(--cz-color-text-secondary);
70
- }
71
64
  .toggle[disabled] {
72
65
  opacity: 0.6;
73
66
  }
@@ -83,7 +76,7 @@ const style = css `
83
76
  }
84
77
 
85
78
  ::slotted(*) {
86
- margin-left: calc(var(--cz-spacing) * 1);
79
+ margin-left: 5px;
87
80
  }
88
81
  `;
89
82
  customElements.define('cosmoz-toggle', component(CosmozToggle, {
package/dist/render.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import '@neovici/cosmoz-tooltip';
2
1
  export type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
3
2
  [K in T extends ReadonlyArray<infer U> ? U : never]: V;
4
3
  };
@@ -6,8 +5,5 @@ export interface Render {
6
5
  label?: string;
7
6
  invalid?: boolean;
8
7
  errorMessage?: string;
9
- hint?: string;
10
- compact?: boolean;
11
- required?: boolean;
12
8
  }
13
- export declare const render: <T>(control: T, { hint, label, invalid, errorMessage, compact, required }: Render) => import("lit-html").TemplateResult<1>, attributes: string[];
9
+ export declare const render: <T>(control: T, { label, invalid, errorMessage }: Render) => import("lit-html").TemplateResult<1>, attributes: string[];
package/dist/render.js CHANGED
@@ -1,32 +1,24 @@
1
- import { infoCircleIcon } from '@neovici/cosmoz-icons/untitled';
2
- import '@neovici/cosmoz-tooltip';
3
1
  import { html } from 'lit-html';
4
2
  import { when } from 'lit-html/directives/when.js';
5
- export const render = (control, { hint, label, invalid, errorMessage, compact, required }) => html `
6
- <!-- label: hidden in compact mode -->
7
- ${when(!compact && label, () => html `<label for="input" part="label"
8
- >${label}
9
- ${when(required, () => html `<span class="required">*</span>`)}
10
- </label>`)}
3
+ export const render = (control, { label, invalid, errorMessage }) => html `
4
+ <div class="float" part="float">&nbsp;</div>
11
5
  <div class="wrap" part="wrap">
12
6
  <slot name="prefix"></slot>
13
7
  <div class="control" part="control">
14
8
  <slot name="control"></slot>
15
9
  ${control}
10
+ ${when(label, () => html `<label for="input" part="label">${label}</label>`)}
16
11
  </div>
17
- <!-- compact: tooltip always visible, red icon when invalid -->
18
- ${when(invalid, () => html `<cosmoz-tooltip
19
- placement="top"
20
- description=${invalid ? errorMessage : label}
21
- delay="300"
22
- >
23
- ${infoCircleIcon({ width: '16px', height: '16px' })}
24
- </cosmoz-tooltip>`)}
25
-
26
12
  <slot name="suffix"></slot>
27
13
  </div>
28
- <!-- hint: visible when valid, hidden when invalid or compact -->
29
- ${when(!compact && hint && !invalid, () => html `<span class="hint" part="hint">${hint}</span>`)}
30
- <!-- error: replaces hint when invalid, hidden in compact -->
31
- ${when(!compact && invalid && errorMessage, () => html `<span class="error" part="error">${errorMessage}</span>`)}
32
- `, attributes = ['autocomplete', 'readonly', 'disabled', 'maxlength', 'invalid'];
14
+ <div class="line" part="line"></div>
15
+ ${when(invalid && errorMessage, () => html `<div class="error" part="error">${errorMessage}</div>`)}
16
+ `, attributes = [
17
+ 'autocomplete',
18
+ 'readonly',
19
+ 'disabled',
20
+ 'maxlength',
21
+ 'invalid',
22
+ 'no-label-float',
23
+ 'always-float-label',
24
+ ];
package/dist/styles.d.ts CHANGED
@@ -1 +1,2 @@
1
+ export declare const focusedStyle: string;
1
2
  export declare const styles: string;
package/dist/styles.js CHANGED
@@ -1,62 +1,96 @@
1
1
  import { tagged as css } from '@neovici/cosmoz-utils';
2
- export const styles = css `
3
- /* === Host === */
4
-
5
- :host {
6
- display: flex;
7
- flex-direction: column;
8
- gap: calc(var(--cz-spacing) * 1.5);
9
- position: relative;
10
- font-size: var(--cz-text-base);
11
- line-height: var(--cz-text-base-line-height);
12
- font-family: var(--cz-font-body);
2
+ export const focusedStyle = css `
3
+ .wrap {
4
+ --contour-color: var(--focused-color);
5
+ background: var(--focused-bg);
13
6
  }
14
7
 
15
- :host(:focus-within) {
16
- caret-color: var(--cz-color-text-primary);
8
+ #input::placeholder,
9
+ label {
10
+ color: var(--focused-color);
11
+ opacity: 1;
17
12
  }
18
13
 
19
- :host([disabled]) .wrap {
20
- color: var(--cz-color-text-disabled);
21
- opacity: 0.5;
22
- cursor: not-allowed;
14
+ .line {
15
+ border-bottom-color: var(--focused-color);
23
16
  }
24
17
 
25
- :host([disabled]) #input {
26
- cursor: not-allowed;
18
+ .line::before {
19
+ transform: none;
20
+ transition: 0.25s transform ease;
27
21
  }
22
+ `;
23
+ export const styles = css `
24
+ :host {
25
+ --font-family: var(
26
+ --cosmoz-input-font-family,
27
+ var(--paper-font-subhead_-_font-family, inherit)
28
+ );
29
+ --font-size: var(
30
+ --cosmoz-input-font-size,
31
+ var(--paper-font-subhead_-_font-size, 16px)
32
+ );
33
+ --line-height: var(
34
+ --cosmoz-input-line-height,
35
+ var(--paper-font-subhead_-_line-height, 24px)
36
+ );
37
+ --label-scale: var(--cosmoz-input-label-scale, 0.75);
38
+ --disabled-opacity: var(
39
+ --cosmoz-input-disabled-opacity,
40
+ var(--paper-input-container-disabled_-_opacity, 0.33)
41
+ );
42
+ --disabled-line-opacity: var(
43
+ --cosmoz-input-disabled-line-opacity,
44
+ var(--paper-input-container-underline-disabled_-_opacity, 1)
45
+ );
46
+ --invalid-color: var(
47
+ --cosmoz-input-invalid-color,
48
+ var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
49
+ );
50
+ --bg: var(--cosmoz-input-background);
51
+ --focused-bg: var(--cosmoz-input-focused-background, var(--bg));
52
+ --color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
53
+ --line-color: var(--cosmoz-input-line-color, var(--color));
54
+ --focused-color: var(
55
+ --cosmoz-input-focused-color,
56
+ var(--primary-color, #3f51b5)
57
+ );
58
+ --float-display: var(--cosmoz-input-float-display, block);
59
+ --contour-color: var(--line-color);
60
+ --contour-size: var(--cosmoz-input-contour-size);
61
+ --label-translate-y: var(--cosmoz-input-label-translate-y, 0%);
62
+ --focused: var(--cosmoz-input-focused, none);
28
63
 
29
- :host([invalid]) {
30
- caret-color: var(--cz-color-text-error);
64
+ display: block;
65
+ padding: var(--cosmoz-input-padding, 8px 0);
66
+ position: relative;
67
+ max-height: var(--cosmoz-input-max-height);
68
+ font-size: var(--font-size);
69
+ line-height: var(--line-height);
70
+ font-family: var(--font-family);
71
+ caret-color: var(--focused-color);
72
+ cursor: text;
31
73
  }
32
74
 
33
- :host([invalid]) .required,
34
- .error {
35
- color: var(--cz-color-text-error);
75
+ :host([disabled]) {
76
+ opacity: var(--disabled-opacity);
36
77
  }
37
78
 
38
- /* === Layout === */
79
+ .float {
80
+ line-height: calc(var(--line-height) * var(--label-scale));
81
+ background-color: var(--cosmoz-input-float-bg-color, none);
82
+ display: var(--float-display);
83
+ }
39
84
 
40
85
  .wrap {
86
+ padding: var(--cosmoz-input-wrap-padding, 0px);
41
87
  display: flex;
42
88
  align-items: center;
43
89
  position: relative;
44
- width: 100%;
45
- border-radius: var(--cz-radius-md);
46
- box-shadow: 0 0 0 1px var(--cz-color-border-primary);
47
- overflow: hidden;
48
- }
49
-
50
- .wrap:has(#input:focus) {
51
- box-shadow: 0 0 0 2px var(--cz-color-border-brand);
52
- }
53
-
54
- :host([invalid]) .wrap {
55
- box-shadow: 0 0 0 1px var(--cz-color-border-error);
56
- }
57
-
58
- :host([invalid]) .wrap:has(#input:focus) {
59
- box-shadow: 0 0 0 2px var(--cz-color-border-error);
90
+ background: var(--bg);
91
+ opacity: var(--cosmoz-input-opacity);
92
+ border-radius: var(--cosmoz-input-border-radius);
93
+ box-shadow: 0 0 0 var(--contour-size) var(--contour-color);
60
94
  }
61
95
 
62
96
  .control {
@@ -64,160 +98,135 @@ export const styles = css `
64
98
  position: relative;
65
99
  }
66
100
 
67
- /* === Input === */
68
-
69
101
  #input {
70
- box-sizing: border-box;
102
+ padding: 0;
71
103
  margin: 0;
72
104
  outline: none;
73
105
  border: none;
74
106
  width: 100%;
107
+ max-width: 100%;
75
108
  display: block;
76
109
  background: transparent;
77
110
  line-height: inherit;
78
111
  font-size: inherit;
79
112
  font-family: inherit;
80
113
  resize: none;
81
- color: var(--cz-color-text-primary);
82
- padding-block: calc(var(--cz-spacing) * 2);
83
- padding-inline: calc(var(--cz-spacing) * 3);
84
- }
85
-
86
- #input::placeholder {
87
- color: var(--cz-color-text-placeholder);
88
- }
89
-
90
- #input::-webkit-inner-spin-button {
91
- z-index: 1;
92
114
  }
93
115
 
94
- /* === Label === */
95
-
96
116
  label {
97
- position: relative;
98
- font-size: var(--cz-text-sm);
99
- color: var(--cz-color-text-secondary);
100
- }
101
-
102
- /* === Hint & Error === */
103
-
104
- .hint {
105
- font-size: var(--cz-text-xs);
106
- color: var(--cz-color-text-tertiary);
107
- }
108
-
109
- .error {
110
- font-size: var(--cz-text-xs);
117
+ position: absolute;
118
+ top: 0;
119
+ left: 0;
120
+ width: var(--cosmoz-input-label-width, 100%);
121
+ transition:
122
+ transform 0.25s,
123
+ width 0.25s;
124
+ transform-origin: left top;
125
+ color: var(--color);
126
+ white-space: nowrap;
127
+ overflow: hidden;
128
+ text-overflow: ellipsis;
129
+ text-transform: var(--cosmoz-input-label-text-transform);
130
+ font-weight: var(--cosmoz-input-label-font-weight);
131
+ user-select: none;
132
+ cursor: text;
111
133
  }
112
134
 
113
- /* === Tooltip (fluid error indicator) === */
114
-
115
- cosmoz-tooltip {
116
- display: flex;
117
- align-items: center;
118
- margin-right: calc(var(--cz-spacing) * 2);
135
+ .wrap:has(#input:not(:placeholder-shown)) {
136
+ slot[name='suffix']::slotted(*),
137
+ slot[name='prefix']::slotted(*) {
138
+ transform: translateY(var(--label-translate-y));
139
+ }
119
140
  }
120
141
 
121
- :host([invalid]) cosmoz-tooltip {
122
- color: var(--cz-color-text-error);
142
+ :host([always-float-label]) label,
143
+ #input:not(:placeholder-shown) + label {
144
+ transform: translateY(
145
+ calc(var(--label-scale) * -100% + var(--label-translate-y))
146
+ )
147
+ scale(var(--label-scale));
148
+ background-color: var(--cosmoz-input-floating-label-bg, var(--bg));
123
149
  }
124
150
 
125
- :host([variant='inline']) cosmoz-tooltip {
126
- display: none;
151
+ :host([always-float-label]) input,
152
+ #input:not(:placeholder-shown) {
153
+ transform: translateY(var(--label-translate-y));
127
154
  }
128
155
 
129
- /* === Slots === */
130
-
131
- .wrap:has(#input:not(:placeholder-shown)) {
156
+ :host([always-float-label]) {
132
157
  slot[name='suffix']::slotted(*),
133
158
  slot[name='prefix']::slotted(*) {
134
159
  transform: translateY(var(--label-translate-y));
135
160
  }
136
161
  }
137
162
 
138
- /* === Variant: inline === */
139
- :host([variant='inline']) .wrap {
140
- margin-top: calc(var(--cz-spacing) * 2.5);
141
- }
142
-
143
- :host([variant='inline']) #input {
144
- padding-inline: 0;
145
- }
163
+ :host([no-label-float]) {
164
+ .float,
165
+ label {
166
+ display: none;
167
+ }
146
168
 
147
- :host([variant='inline']) #input::placeholder {
148
- color: transparent;
149
- }
169
+ #input:not(:placeholder-shown) {
170
+ transform: translateY(0%);
171
+ }
150
172
 
151
- :host([variant='inline']) .wrap {
152
- border-radius: 0;
153
- box-shadow: none;
154
- padding-inline: 0;
173
+ .wrap:has(#input:not(:placeholder-shown)) slot[name='suffix']::slotted(*),
174
+ .wrap:has(#input:not(:placeholder-shown)) slot[name='prefix']::slotted(*) {
175
+ transform: translateY(0%);
176
+ }
155
177
  }
156
178
 
157
- :host([variant='inline']) .wrap:has(#input:focus) {
158
- box-shadow: none;
179
+ .line {
180
+ padding-top: 1px;
181
+ border-bottom: 1px solid var(--line-color);
182
+ position: relative;
183
+ display: var(--cosmoz-input-line-display, block);
159
184
  }
160
185
 
161
- :host([variant='inline']) .hint,
162
- :host([variant='inline']) .error {
163
- display: none;
164
- }
165
- :host([variant='inline'][disabled]) label {
166
- color: var(--cz-color-text-disabled);
167
- opacity: 0.5;
168
- cursor: not-allowed;
169
- }
170
- :host([variant='inline']) label {
186
+ .line::before {
187
+ content: '';
171
188
  position: absolute;
172
- top: 25%;
189
+ border-bottom: 2px solid transparent;
190
+ border-bottom-color: inherit;
173
191
  left: 0;
174
- width: 100%;
175
- transform-origin: left;
176
- transition:
177
- transform 0.25s,
178
- width 0.25s;
179
- white-space: nowrap;
180
- overflow: hidden;
181
- text-overflow: ellipsis;
192
+ right: 0;
193
+ top: 0;
194
+ transform: scaleX(0);
195
+ transform-origin: center center;
182
196
  z-index: 1;
183
197
  }
184
198
 
185
- :host([variant='inline']:focus-within) label,
186
- :host([variant='inline'][has-value]) label {
187
- transform: translateY(-75%) scale(0.85);
199
+ :host([disabled]) .line {
200
+ border-bottom-style: dashed;
201
+ opacity: var(--disabled-line-opacity);
188
202
  }
189
203
 
190
- :host([variant='inline']) {
191
- slot[name='suffix']::slotted(*),
192
- slot[name='prefix']::slotted(*) {
193
- transform: translateY(0);
194
- }
204
+ .error {
205
+ font-size: 12px;
206
+ line-height: 20px;
207
+ overflow: hidden;
208
+ text-overflow: clip;
209
+ position: absolute;
210
+ max-width: 100%;
195
211
  }
196
212
 
197
- /* === Variant: cell === */
198
-
199
- :host([variant='cell']) .wrap {
200
- border: 0.5px solid var(--cz-color-bg-quaternary);
201
- border-radius: 0;
202
- box-shadow: none;
203
- }
204
- :host([variant='cell'][invalid]) .wrap {
205
- border-color: var(--cz-color-border-error);
213
+ :host([invalid]) {
214
+ --contour-color: var(--invalid-color);
215
+ caret-color: var(--invalid-color);
206
216
  }
207
- :host([variant='cell'][invalid]) .wrap:has(#input:focus) {
208
- background: var(--cz-color-bg-error);
209
- border: 0.5px solid transparent;
217
+
218
+ :host([invalid]) label,
219
+ .error {
220
+ color: var(--invalid-color);
210
221
  }
211
- :host([variant='cell']) .wrap:has(#input:focus) {
212
- background: var(--cz-color-bg-quaternary);
222
+ :host([invalid]) .line {
223
+ border-bottom-color: var(--invalid-color);
213
224
  }
214
225
 
215
- :host([variant='cell']) label {
216
- display: none;
226
+ #input::-webkit-inner-spin-button {
227
+ z-index: 1;
217
228
  }
218
229
 
219
- /* === No spinner === */
220
-
221
230
  :host([no-spinner]) #input::-webkit-inner-spin-button {
222
231
  display: none;
223
232
  }
@@ -226,15 +235,12 @@ export const styles = css `
226
235
  appearance: textfield;
227
236
  }
228
237
 
229
- /* === Autosize === */
230
-
231
238
  :host([autosize]) {
232
239
  width: min-content;
233
240
  }
234
241
  :host([autosize]) #input {
235
- --_pad: calc(var(--cz-spacing) * 12);
236
- min-width: calc(2ch + var(--_pad));
237
- width: calc(var(--chars) + var(--_pad));
242
+ min-width: 2ch;
243
+ width: var(--chars);
238
244
  }
239
245
  :host([autosize]) .control {
240
246
  max-width: 100%;
@@ -244,18 +250,21 @@ export const styles = css `
244
250
  --width: calc(var(--chars) + 0.25em);
245
251
  }
246
252
  :host([autosize][type='number']:not([no-spinner])) #input {
247
- width: calc(var(--width) + 15px + var(--_pad));
248
- min-width: calc(2ch + 0.25em + 15px + var(--_pad));
253
+ width: calc(var(--width) + 15px);
254
+ min-width: calc(2ch + 0.25em + 15px);
249
255
  }
250
256
  :host([autosize][type='number'][no-spinner]) #input {
251
- width: calc(var(--width) + var(--_pad));
252
- min-width: calc(2ch + 0.25em + var(--_pad));
257
+ width: var(--width);
258
+ min-width: calc(2ch + 0.25em);
253
259
  }
254
- slot[name='prefix']::slotted(*) {
255
- padding-inline-start: calc(var(--cz-spacing) * 2);
260
+ :host([type='color']) .line {
261
+ display: none;
256
262
  }
257
263
 
258
- slot[name='suffix']::slotted(*) {
259
- padding-inline-end: calc(var(--cz-spacing) * 2);
264
+ :host(:focus-within) {
265
+ ${focusedStyle}
266
+ }
267
+ @container style(--focused: focused) {
268
+ ${focusedStyle}
260
269
  }
261
270
  `;
package/dist/util.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  interface Props {
2
+ label?: string;
3
+ noLabelFloat?: boolean;
2
4
  placeholder?: string;
3
5
  }
4
- export declare const getPlaceholder: ({ placeholder }: Props) => string;
6
+ export declare const getPlaceholder: ({ placeholder, noLabelFloat, label }: Props) => string;
7
+ export declare const defaultMax: (type: string, max?: string) => string | undefined;
5
8
  export {};
package/dist/util.js CHANGED
@@ -1,3 +1,4 @@
1
- export const getPlaceholder = ({ placeholder }) => {
2
- return placeholder || ' ';
1
+ export const getPlaceholder = ({ placeholder, noLabelFloat, label }) => {
2
+ return (noLabelFloat ? label : undefined) || placeholder || ' ';
3
3
  };
4
+ export const defaultMax = (type, max) => max ?? (type === 'date' ? '9999-12-31' : undefined);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-input",
3
- "version": "5.7.0",
3
+ "version": "5.7.1",
4
4
  "description": "A input web component",
5
5
  "keywords": [
6
6
  "lit-html",
@@ -43,10 +43,7 @@
43
43
  "@semantic-release/npm",
44
44
  "@semantic-release/git"
45
45
  ],
46
- "branches": [
47
- "master",
48
- "next"
49
- ],
46
+ "branch": "master",
50
47
  "preset": "conventionalcommits"
51
48
  },
52
49
  "publishConfig": {
@@ -72,9 +69,6 @@
72
69
  "./toggle": "./dist/cosmoz-toggle.js"
73
70
  },
74
71
  "dependencies": {
75
- "@neovici/cosmoz-icons": "^1.6.0",
76
- "@neovici/cosmoz-tokens": "^3.3.2",
77
- "@neovici/cosmoz-tooltip": "^1.2.1",
78
72
  "@neovici/cosmoz-utils": "^6.0.0",
79
73
  "@pionjs/pion": "^2.0.0",
80
74
  "lit-html": "^2.0.0 || ^3.0.0"
@@ -87,7 +81,6 @@
87
81
  "@playwright/test": "^1.58.1",
88
82
  "@semantic-release/changelog": "^6.0.0",
89
83
  "@semantic-release/git": "^10.0.0",
90
- "@storybook/addon-a11y": "^10.3.3",
91
84
  "@storybook/addon-docs": "^10.0.0",
92
85
  "@storybook/addon-vitest": "^10.2.4",
93
86
  "@storybook/web-components-vite": "^10.2.4",
@@ -102,9 +95,6 @@
102
95
  "shadow-dom-testing-library": "^1.13.1",
103
96
  "sinon": "^21.0.0",
104
97
  "storybook": "^10.1.9",
105
- "vitest": "^4.0.18",
106
- "@types/mocha": "^10.0.3",
107
- "@vitest/coverage-v8": "^4.1.2",
108
- "playwright": "^1.58.2"
98
+ "vitest": "^4.0.18"
109
99
  }
110
100
  }