@i-cell/ids-styles 0.0.53 → 0.0.56

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 (10) hide show
  1. package/dist/autocomplete/autocomplete.css +47 -0
  2. package/dist/autocomplete/autocomplete.min.css +1 -0
  3. package/dist/autocomplete/autocomplete.plugin.js +45 -0
  4. package/dist/components.css +51 -3
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +39 -3
  7. package/dist/form-elements/message/message.css +3 -3
  8. package/dist/form-elements/message/message.min.css +1 -1
  9. package/dist/form-elements/message/message.plugin.js +3 -3
  10. package/package.json +3 -2
package/dist/autocomplete/autocomplete.css ADDED
@@ -0,0 +1,47 @@
1
+ .ids-autocomplete {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
7
+ display: inline-flex;
8
+ align-items: center;
9
+ }
10
+ .ids-autocomplete::before, .ids-autocomplete::after, .ids-autocomplete *, .ids-autocomplete ::before, .ids-autocomplete ::after {
11
+ box-sizing: border-box;
12
+ border-width: 0;
13
+ border-style: none;
14
+ border-color: transparent;
15
+ }
16
+ .ids-autocomplete > input {
17
+ text-overflow: ellipsis;
18
+ }
19
+ .ids-autocomplete > ids-overlay-panel {
20
+ display: none;
21
+ }
22
+ .ids-autocomplete.ids-autocomplete-compact {
23
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
24
+ }
25
+ .ids-autocomplete.ids-autocomplete-comfortable {
26
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
27
+ }
28
+ .ids-autocomplete.ids-autocomplete-spacious {
29
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
30
+ }
31
+ .ids-autocomplete.ids-autocomplete-dense {
32
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
33
+ }
34
+
35
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(.ids-autocomplete) {
36
+ overflow-x: visible;
37
+ }
38
+
39
+ .ids-overlay-panel__autocomplete-panel {
40
+ width: 100%;
41
+ }
42
+ .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option {
43
+ width: 100%;
44
+ }
45
+ .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option:is([disabled]) {
46
+ outline-style: none;
47
+ }
package/dist/autocomplete/autocomplete.min.css ADDED
@@ -0,0 +1 @@
1
+ .ids-autocomplete{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:inline-flex;align-items:center}.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-autocomplete>input{text-overflow:ellipsis}.ids-autocomplete>ids-overlay-panel{display:none}.ids-autocomplete.ids-autocomplete-compact{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact)}.ids-autocomplete.ids-autocomplete-comfortable{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable)}.ids-autocomplete.ids-autocomplete-spacious{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious)}.ids-autocomplete.ids-autocomplete-dense{gap:var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense)}.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(.ids-autocomplete){overflow-x:visible}.ids-overlay-panel__autocomplete-panel{width:100%}.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option{width:100%}.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option:is([disabled]){outline-style:none}
package/dist/autocomplete/autocomplete.plugin.js ADDED
@@ -0,0 +1,45 @@
1
+ // Tailwind CSS plugin for the autocomplete component in the i-Cell Design System
2
+ module.exports = function AutocompletePlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-autocomplete': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: '0',
8
+ borderStyle: 'none',
9
+ borderColor: 'rgba(0,0,0,0)',
10
+ lineHeight: 1.5,
11
+ display: 'inline-flex',
12
+ alignItems: 'center',
13
+ },
14
+ '.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after': {
15
+ boxSizing: 'border-box',
16
+ borderWidth: '0',
17
+ borderStyle: 'none',
18
+ borderColor: 'rgba(0,0,0,0)',
19
+ },
20
+ '.ids-autocomplete>input': { textOverflow: 'ellipsis' },
21
+ '.ids-autocomplete>ids-overlay-panel': { display: 'none' },
22
+ '.ids-autocomplete.ids-autocomplete-compact': {
23
+ gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact)',
24
+ },
25
+ '.ids-autocomplete.ids-autocomplete-comfortable': {
26
+ gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable)',
27
+ },
28
+ '.ids-autocomplete.ids-autocomplete-spacious': {
29
+ gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious)',
30
+ },
31
+ '.ids-autocomplete.ids-autocomplete-dense': {
32
+ gap: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense)',
33
+ },
34
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(.ids-autocomplete)':
35
+ { overflowX: 'visible' },
36
+ '.ids-overlay-panel__autocomplete-panel': { width: '100%' },
37
+ '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option': { width: '100%' },
38
+ '.ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message>.ids-option:is([disabled])': {
39
+ outlineStyle: 'none',
40
+ },
41
+ };
42
+
43
+ addComponents(cssObj);
44
+ };
45
+ };
package/dist/components.css CHANGED
@@ -318,6 +318,54 @@
318
318
  color: var(--ids-comp-accordion-summary-filled-color-fg-icon-disabled);
319
319
  }
320
320
 
321
+ .ids-autocomplete {
322
+ box-sizing: border-box;
323
+ border-width: 0;
324
+ border-style: none;
325
+ border-color: transparent;
326
+ line-height: 1.5;
327
+ display: inline-flex;
328
+ align-items: center;
329
+ }
330
+ .ids-autocomplete::before, .ids-autocomplete::after, .ids-autocomplete *, .ids-autocomplete ::before, .ids-autocomplete ::after {
331
+ box-sizing: border-box;
332
+ border-width: 0;
333
+ border-style: none;
334
+ border-color: transparent;
335
+ }
336
+ .ids-autocomplete > input {
337
+ text-overflow: ellipsis;
338
+ }
339
+ .ids-autocomplete > ids-overlay-panel {
340
+ display: none;
341
+ }
342
+ .ids-autocomplete.ids-autocomplete-compact {
343
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-compact);
344
+ }
345
+ .ids-autocomplete.ids-autocomplete-comfortable {
346
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-comfortable);
347
+ }
348
+ .ids-autocomplete.ids-autocomplete-spacious {
349
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-spacious);
350
+ }
351
+ .ids-autocomplete.ids-autocomplete-dense {
352
+ gap: var(--ids-comp-forms-form-field-standard-field-wrapper-container-size-gap-dense);
353
+ }
354
+
355
+ .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix:has(.ids-autocomplete) {
356
+ overflow-x: visible;
357
+ }
358
+
359
+ .ids-overlay-panel__autocomplete-panel {
360
+ width: 100%;
361
+ }
362
+ .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option {
363
+ width: 100%;
364
+ }
365
+ .ids-overlay-panel__autocomplete-panel .ids-overlay-panel__autocomplete-message > .ids-option:is([disabled]) {
366
+ outline-style: none;
367
+ }
368
+
321
369
  .ids-avatar {
322
370
  box-sizing: border-box;
323
371
  border-width: 0;
@@ -7237,7 +7285,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7237
7285
  .ids-message.ids-message-light .ids-message__suffix {
7238
7286
  color: var(--ids-comp-forms-message-color-fg-text-light-default);
7239
7287
  }
7240
- .ids-message.ids-message-light.ids-message-disabled .ids-message__prefix {
7288
+ .ids-message.ids-message-light.ids-message-disabled .ids-message__prefix .ids-icon {
7241
7289
  color: var(--ids-comp-forms-message-color-fg-icon-light-disabled);
7242
7290
  }
7243
7291
  .ids-message.ids-message-light.ids-message-disabled .ids-message__text,
@@ -7265,7 +7313,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7265
7313
  .ids-message.ids-message-dark .ids-message__suffix {
7266
7314
  color: var(--ids-comp-forms-message-color-fg-text-dark-default);
7267
7315
  }
7268
- .ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix {
7316
+ .ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix .ids-icon {
7269
7317
  color: var(--ids-comp-forms-message-color-fg-icon-dark-disabled);
7270
7318
  }
7271
7319
  .ids-message.ids-message-dark.ids-message-disabled .ids-message__text,
@@ -7293,7 +7341,7 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7293
7341
  .ids-message.ids-message-surface .ids-message__suffix {
7294
7342
  color: var(--ids-comp-forms-message-color-fg-text-surface-default);
7295
7343
  }
7296
- .ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix {
7344
+ .ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix .ids-icon {
7297
7345
  color: var(--ids-comp-forms-message-color-fg-icon-surface-disabled);
7298
7346
  }
7299
7347
  .ids-message.ids-message-surface.ids-message-disabled .ids-message__text,