@i-cell/ids-styles 0.0.63 → 0.0.66

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 +158 -26
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +138 -16
  4. package/dist/components.css +165 -26
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +143 -16
  7. package/dist/form-elements/form-field/form-field.css +7 -0
  8. package/dist/form-elements/form-field/form-field.min.css +1 -1
  9. package/dist/form-elements/form-field/form-field.plugin.js +5 -0
  10. package/package.json +2 -2
package/dist/components.plugin.js CHANGED
@@ -327,6 +327,8 @@ module.exports = function ComponentsPlugin() {
327
327
  borderStyle: 'none',
328
328
  borderColor: 'rgba(0,0,0,0)',
329
329
  lineHeight: 1.5,
330
+ position: 'absolute',
331
+ right: '0',
330
332
  },
331
333
  '.ids-autocomplete::before,.ids-autocomplete::after,.ids-autocomplete *,.ids-autocomplete ::before,.ids-autocomplete ::after': {
332
334
  boxSizing: 'border-box',
@@ -334,11 +336,10 @@ module.exports = function ComponentsPlugin() {
334
336
  borderStyle: 'none',
335
337
  borderColor: 'rgba(0,0,0,0)',
336
338
  },
337
- '.ids-autocomplete-panel': { overflow: 'auto', width: '100%', padding: '8px', scrollbarWidth: 'thin' },
339
+ '.ids-autocomplete-panel': { display: 'grid', overflow: 'auto', width: '100%', scrollbarWidth: 'thin' },
338
340
  '.ids-autocomplete-overlay-panel': { width: '100%' },
339
341
  '.ids-autocomplete-suffix': { display: 'flex', alignItems: 'center' },
340
- '.ids-autocomplete-chip-list': { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '4px' },
341
- '.ids-autocomplete-chip-list:not(:has(button:first-child))': { display: 'none' },
342
+ '.ids-autocomplete-chip-list': { display: 'contents' },
342
343
  '.ids-autocomplete-chip-list button[idsChip].ids-chip': { borderStyle: 'solid !important' },
343
344
  '.ids-autocomplete-chip-list button[idsChip].ids-chip>div.ids-chip__label': {
344
345
  textAlign: 'left',
@@ -349,32 +350,153 @@ module.exports = function ComponentsPlugin() {
349
350
  WebkitBoxOrient: 'vertical',
350
351
  WebkitLineClamp: '1',
351
352
  },
352
- '.ids-autocomplete-hint__wrapper': { padding: '8px 12px' },
353
353
  '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-compact)' },
354
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button': {
355
+ height: 'var(--ids-comp-forms-input-icon-button-width-compact)',
356
+ width: 'var(--ids-comp-forms-input-icon-button-width-compact)',
357
+ },
358
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
359
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-compact)',
360
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-compact)',
361
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-compact)',
362
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-compact)',
363
+ },
364
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix>.ids-icon': {
365
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-compact)',
366
+ height: 'var(--ids-comp-forms-input-icon-width-compact)',
367
+ width: 'var(--ids-comp-forms-input-icon-width-compact)',
368
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-compact)',
369
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-compact)',
370
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-compact)',
371
+ },
372
+ '.ids-autocomplete.ids-autocomplete-compact>.ids-autocomplete-suffix .ids-spinner': {
373
+ width: 'var(--ids-comp-forms-input-size-spinner-compact)',
374
+ height: 'var(--ids-comp-forms-input-size-spinner-compact)',
375
+ },
376
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel': {
377
+ gap: 'var(--ids-comp-forms-list-item-size-gap-compact)',
378
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
379
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
380
+ },
381
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-compact .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
382
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-compact)',
383
+ },
354
384
  '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix': {
355
385
  gap: 'var(--ids-comp-forms-input-size-icons-gap-comfortable)',
356
386
  },
387
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button': {
388
+ height: 'var(--ids-comp-forms-input-icon-button-width-comfortable)',
389
+ width: 'var(--ids-comp-forms-input-icon-button-width-comfortable)',
390
+ },
391
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
392
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-comfortable)',
393
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-comfortable)',
394
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-comfortable)',
395
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-comfortable)',
396
+ },
397
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix>.ids-icon': {
398
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-comfortable)',
399
+ height: 'var(--ids-comp-forms-input-icon-width-comfortable)',
400
+ width: 'var(--ids-comp-forms-input-icon-width-comfortable)',
401
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-comfortable)',
402
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-comfortable)',
403
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-comfortable)',
404
+ },
405
+ '.ids-autocomplete.ids-autocomplete-comfortable>.ids-autocomplete-suffix .ids-spinner': {
406
+ width: 'var(--ids-comp-forms-input-size-spinner-comfortable)',
407
+ height: 'var(--ids-comp-forms-input-size-spinner-comfortable)',
408
+ },
409
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel': {
410
+ gap: 'var(--ids-comp-forms-list-item-size-gap-comfortable)',
411
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
412
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
413
+ },
414
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-comfortable .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
415
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-comfortable)',
416
+ },
357
417
  '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix': {
358
418
  gap: 'var(--ids-comp-forms-input-size-icons-gap-spacious)',
359
419
  },
420
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button': {
421
+ height: 'var(--ids-comp-forms-input-icon-button-width-spacious)',
422
+ width: 'var(--ids-comp-forms-input-icon-button-width-spacious)',
423
+ },
424
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
425
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-spacious)',
426
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-spacious)',
427
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-spacious)',
428
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-spacious)',
429
+ },
430
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix>.ids-icon': {
431
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-spacious)',
432
+ height: 'var(--ids-comp-forms-input-icon-width-spacious)',
433
+ width: 'var(--ids-comp-forms-input-icon-width-spacious)',
434
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-spacious)',
435
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-spacious)',
436
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-spacious)',
437
+ },
438
+ '.ids-autocomplete.ids-autocomplete-spacious>.ids-autocomplete-suffix .ids-spinner': {
439
+ width: 'var(--ids-comp-forms-input-size-spinner-spacious)',
440
+ height: 'var(--ids-comp-forms-input-size-spinner-spacious)',
441
+ },
442
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel': {
443
+ gap: 'var(--ids-comp-forms-list-item-size-gap-spacious)',
444
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
445
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
446
+ },
447
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-spacious .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
448
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-spacious)',
449
+ },
360
450
  '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix': { gap: 'var(--ids-comp-forms-input-size-icons-gap-dense)' },
361
- 'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis' },
451
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button': {
452
+ height: 'var(--ids-comp-forms-input-icon-button-width-dense)',
453
+ width: 'var(--ids-comp-forms-input-icon-button-width-dense)',
454
+ },
455
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon-button .ids-icon': {
456
+ fontFamily: 'var(--ids-comp-forms-input-icon-button-typography-font-family-dense)',
457
+ fontSize: 'var(--ids-comp-forms-input-icon-button-typography-font-size-dense)',
458
+ fontWeight: 'var(--ids-comp-forms-input-icon-button-typography-font-weight-dense)',
459
+ lineHeight: 'var(--ids-comp-forms-input-icon-button-typography-line-height-dense)',
460
+ },
461
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix>.ids-icon': {
462
+ fontFamily: 'var(--ids-comp-forms-input-icon-typography-font-family-dense)',
463
+ height: 'var(--ids-comp-forms-input-icon-width-dense)',
464
+ width: 'var(--ids-comp-forms-input-icon-width-dense)',
465
+ fontSize: 'var(--ids-comp-forms-input-icon-typography-font-size-dense)',
466
+ fontWeight: 'var(--ids-comp-forms-input-icon-typography-font-weight-dense)',
467
+ lineHeight: 'var(--ids-comp-forms-input-icon-typography-line-height-dense)',
468
+ },
469
+ '.ids-autocomplete.ids-autocomplete-dense>.ids-autocomplete-suffix .ids-spinner': {
470
+ width: 'var(--ids-comp-forms-input-size-spinner-dense)',
471
+ height: 'var(--ids-comp-forms-input-size-spinner-dense)',
472
+ },
473
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel': {
474
+ gap: 'var(--ids-comp-forms-list-item-size-gap-dense)',
475
+ padding: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
476
+ margin: 'calc(var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)*-1)',
477
+ },
478
+ '.ids-autocomplete-overlay-panel.ids-overlay-panel-dense .ids-autocomplete-panel .ids-autocomplete-hint__wrapper': {
479
+ padding: '0 var(--ids-comp-forms-list-item-hint-text-size-padding-x-dense)',
480
+ },
481
+ 'input[autocomplete]': { width: '100%', textOverflow: 'ellipsis', minWidth: 'var(--ids-comp-forms-input-size-min-width-dense)' },
362
482
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete])':
363
- { width: '100%', display: 'inline-flex', alignItems: 'center' },
364
- '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)':
365
- { display: 'grid', gridTemplateColumns: '1fr auto' },
366
- '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>input[autocomplete]':
367
- { order: 3 },
368
- '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]):has(.ids-autocomplete-chip-list>button:first-child)>.ids-autocomplete':
369
- { order: 2, gridRow: 'span 2/span 1' },
483
+ { width: '100%', display: 'inline-flex', flexWrap: 'wrap', alignItems: 'center', position: 'relative' },
370
484
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-compact)':
371
- { columnGap: 'var(--ids-comp-forms-input-size-gap-compact)' },
485
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-compact)' },
486
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-compact)':
487
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-compact)' },
372
488
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-comfortable)':
373
- { columnGap: 'var(--ids-comp-forms-input-size-gap-comfortable)' },
489
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-comfortable)' },
490
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-comfortable)':
491
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-comfortable)' },
374
492
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-spacious)':
375
- { columnGap: 'var(--ids-comp-forms-input-size-gap-spacious)' },
493
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-spacious)' },
494
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-spacious)':
495
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-spacious)' },
376
496
  '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>input[autocomplete]~.ids-autocomplete-dense)':
377
- { columnGap: 'var(--ids-comp-forms-input-size-gap-dense)' },
497
+ { paddingRight: 'var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-right-dense)' },
498
+ '.ids-form-field>.ids-form-field__field-wrapper>.ids-form-field__field-wrapper__container>.ids-form-field__infix:has(>.ids-autocomplete-chip-list~input[autocomplete]~.ids-autocomplete-dense)':
499
+ { gap: 'var(--ids-comp-forms-input-size-chip-input-gap-dense)' },
378
500
  '.ids-avatar': {
379
501
  boxSizing: 'border-box',
380
502
  borderWidth: '0',
@@ -6119,6 +6241,11 @@ module.exports = function ComponentsPlugin() {
6119
6241
  '.ids-form-field.ids-form-field-dense>.ids-form-field__field-wrapper:has(.ids-form-field-control:focus)': {
6120
6242
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)',
6121
6243
  },
6244
+ '.ids-form-field:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper:has(.ids-input)': { cursor: 'text' },
6245
+ '.ids-form-field.ids-form-field-disabled>.ids-form-field__field-wrapper:has(.ids-input)': {
6246
+ cursor: 'default',
6247
+ pointerEvents: 'none',
6248
+ },
6122
6249
  '.ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled)>.ids-form-field__field-wrapper': {
6123
6250
  borderColor: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default)',
6124
6251
  background: 'var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default)',
package/dist/form-elements/form-field/form-field.css CHANGED
@@ -364,6 +364,13 @@
364
364
  .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper:has(.ids-form-field-control:focus) {
365
365
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
366
366
  }
367
+ .ids-form-field:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(.ids-input) {
368
+ cursor: text;
369
+ }
370
+ .ids-form-field.ids-form-field-disabled > .ids-form-field__field-wrapper:has(.ids-input) {
371
+ cursor: default;
372
+ pointer-events: none;
373
+ }
367
374
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper {
368
375
  border-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-border-surface-default);
369
376
  background: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-bg-surface-default);