@vialiq/web-components 0.9.0 → 0.10.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.
Files changed (16) hide show
  1. package/base/validity-mixin.d.ts +41 -190
  2. package/base/validity-mixin.d.ts.map +1 -1
  3. package/checkbox/vi-checkbox.d.ts +1 -3
  4. package/checkbox/vi-checkbox.d.ts.map +1 -1
  5. package/checkbox/vi-checkbox.js +2 -4
  6. package/index.d.ts +3 -0
  7. package/index.js +1490 -67
  8. package/input/vi-input.d.ts +1 -3
  9. package/input/vi-input.d.ts.map +1 -1
  10. package/input/vi-input.js +2 -4
  11. package/package.json +2 -2
  12. package/radio/vi-radio-group.d.ts +1 -3
  13. package/radio/vi-radio-group.d.ts.map +1 -1
  14. package/radio/vi-radio-group.js +2 -4
  15. package/validity-mixin-H4aOFJEr.js +635 -0
  16. package/validity-mixin-BjmXwgWk.js +0 -216
package/index.js CHANGED
@@ -12,11 +12,13 @@ export { ViTextarea } from './textarea/vi-textarea.js';
12
12
  export { ViAccordion } from './accordion/vi-accordion.js';
13
13
  export { ViAccordionItem } from './accordion/vi-accordion-item.js';
14
14
  import { unsafeCSS, css, html } from 'lit';
15
- import { customElement, property, state } from 'lit/decorators.js';
15
+ import { customElement, property, state, queryAssignedElements } from 'lit/decorators.js';
16
+ import { F as FocusableMixin } from './focusable-mixin-CmxOyPX5.js';
17
+ import { V as ValidityMixin } from './validity-mixin-H4aOFJEr.js';
16
18
 
17
19
  const badgeStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;font-size:var(--vi-badge-font-size, 11px);font-weight:var(--vi-badge-font-weight, var(--vi-font-weight-semibold, 600));padding:var(--vi-badge-padding, 2px 8px);border-radius:var(--vi-badge-border-radius, 9999px);gap:var(--vi-badge-gap, 4px);border:var(--vi-border-width-thin, 1px) solid transparent}.dot{display:inline-block;width:var(--vi-badge-dot-size, 8px);height:var(--vi-badge-dot-size, 8px);border-radius:50%;background-color:currentColor;flex-shrink:0}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}}:host{display:inline-block;vertical-align:middle}:host([hidden]),:host([count=\"0\"]:not([show-zero])){display:none!important}:host([size=sm]){--vi-badge-font-size: 10px;--vi-badge-padding: 0 6px;--vi-badge-gap: 2px;--vi-badge-dot-size: 6px}:host([size=md]){--vi-badge-font-size: 11px;--vi-badge-padding: 2px 8px;--vi-badge-gap: 4px;--vi-badge-dot-size: 8px}:host([size=lg]){--vi-badge-font-size: 13px;--vi-badge-padding: 4px 12px;--vi-badge-gap: 6px;--vi-badge-dot-size: 10px}:host([pill]){--vi-badge-border-radius: 9999px}:host(:not([pill])){--vi-badge-border-radius: var(--vi-border-radius-sm, 2px)}.badge.dot-only{--vi-badge-padding: 4px}:host([variant=neutral]) .badge{background-color:var(--vi-badge-neutral-bg, var(--vi-border-02, #eeeeee));color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563))}:host([variant=primary]) .badge{background-color:var(--vi-badge-primary-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0))}:host([variant=success]) .badge{background-color:var(--vi-badge-success-bg, var(--vi-bg-success, #e6f9f0));color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d))}:host([variant=warning]) .badge{background-color:var(--vi-badge-warning-bg, var(--vi-bg-warning, #fff8e1));color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300))}:host([variant=danger]) .badge{background-color:var(--vi-badge-danger-bg, var(--vi-bg-error, #ffebee));color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b))}:host([variant=info]) .badge{background-color:var(--vi-badge-info-bg, var(--vi-bg-info, #e3f2fd));color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0))}:host([outline][variant=neutral]) .badge{background-color:transparent;color:var(--vi-badge-neutral-color, var(--vi-text-secondary, #4b5563));border-color:var(--vi-badge-neutral-border, var(--vi-border-03, #e0e0e0))}:host([outline][variant=primary]) .badge{background-color:transparent;color:var(--vi-badge-primary-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-primary-border, var(--vi-color-primary, #3676d0))}:host([outline][variant=success]) .badge{background-color:transparent;color:var(--vi-badge-success-color, var(--vi-text-success, #265a3d));border-color:var(--vi-badge-success-border, var(--vi-color-success, #489167))}:host([outline][variant=warning]) .badge{background-color:transparent;color:var(--vi-badge-warning-color, var(--vi-text-warning, #e68300));border-color:var(--vi-badge-warning-border, var(--vi-color-warning, #ffba00))}:host([outline][variant=danger]) .badge{background-color:transparent;color:var(--vi-badge-danger-color, var(--vi-text-error, #db231b));border-color:var(--vi-badge-danger-border, var(--vi-color-error, #ef4444))}:host([outline][variant=info]) .badge{background-color:transparent;color:var(--vi-badge-info-color, var(--vi-text-info, #3676d0));border-color:var(--vi-badge-info-border, var(--vi-color-info, #3676d0))}.icon{display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}";
18
20
 
19
- function applyDecs2203RFactory$1() {
21
+ function applyDecs2203RFactory$3() {
20
22
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
21
23
  return function addInitializer(initializer) {
22
24
  assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -385,110 +387,110 @@ function applyDecs2203RFactory$1() {
385
387
  };
386
388
  };
387
389
  }
388
- function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
389
- return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
390
+ function _apply_decs_2203_r$3(targetClass, memberDecs, classDecs, parentClass) {
391
+ return (_apply_decs_2203_r$3 = applyDecs2203RFactory$3())(targetClass, memberDecs, classDecs, parentClass);
390
392
  }
391
- function _identity$1(x) {
393
+ function _identity$3(x) {
392
394
  return x;
393
395
  }
394
- var _dec$1, _initClass$1, _ViElement$1, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, /** Colour semantic */ _init_variant$1, /** Size */ _init_size, /** Show coloured dot */ _init_dot, /** Fully rounded (pill shape) vs. square */ _init_pill, /** Numeric count to display */ _init_count, /** Show the badge even if the count is zero */ _init_showZero, /** Max count before showing {max}+ */ _init_max, /** Outlined/ghost style */ _init_outline, _init__hasIcon, _init__hasDefaultSlot, _initProto$1;
396
+ var _dec$3, _initClass$3, _ViElement$1, _dec1$3, _dec2$3, _dec3$3, _dec4$3, _dec5$3, _dec6$3, _dec7$3, _dec8$3, _dec9$3, _dec10$3, /** Colour semantic */ _init_variant$2, /** Size */ _init_size$1, /** Show coloured dot */ _init_dot, /** Fully rounded (pill shape) vs. square */ _init_pill, /** Numeric count to display */ _init_count, /** Show the badge even if the count is zero */ _init_showZero, /** Max count before showing {max}+ */ _init_max, /** Outlined/ghost style */ _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$3;
395
397
  let _ViBadge;
396
- _dec$1 = customElement('vi-badge'), _dec1$1 = property({
398
+ _dec$3 = customElement('vi-badge'), _dec1$3 = property({
397
399
  type: String,
398
400
  reflect: true
399
- }), _dec2$1 = property({
401
+ }), _dec2$3 = property({
400
402
  type: String,
401
403
  reflect: true
402
- }), _dec3$1 = property({
404
+ }), _dec3$3 = property({
403
405
  type: Boolean,
404
406
  reflect: true
405
- }), _dec4$1 = property({
407
+ }), _dec4$3 = property({
406
408
  type: Boolean,
407
409
  reflect: true
408
- }), _dec5$1 = property({
410
+ }), _dec5$3 = property({
409
411
  type: Number,
410
412
  reflect: true
411
- }), _dec6$1 = property({
413
+ }), _dec6$3 = property({
412
414
  type: Boolean,
413
415
  reflect: true,
414
416
  attribute: 'show-zero'
415
- }), _dec7$1 = property({
417
+ }), _dec7$3 = property({
416
418
  type: Number
417
- }), _dec8$1 = property({
419
+ }), _dec8$3 = property({
418
420
  type: Boolean,
419
421
  reflect: true
420
- }), _dec9$1 = state(), _dec10$1 = state();
421
- new class extends _identity$1 {
422
+ }), _dec9$3 = state(), _dec10$3 = state();
423
+ new class extends _identity$3 {
422
424
  constructor(){
423
- super(_ViBadge), _initClass$1();
425
+ super(_ViBadge), _initClass$3();
424
426
  }
425
427
  static{
426
428
  class ViBadge extends (_ViElement$1 = ViElement) {
427
429
  static{
428
- ({ e: [_init_variant$1, _init_size, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon, _init__hasDefaultSlot, _initProto$1], c: [_ViBadge, _initClass$1] } = _apply_decs_2203_r$1(this, [
430
+ ({ e: [_init_variant$2, _init_size$1, _init_dot, _init_pill, _init_count, _init_showZero, _init_max, _init_outline, _init__hasIcon$1, _init__hasDefaultSlot, _initProto$3], c: [_ViBadge, _initClass$3] } = _apply_decs_2203_r$3(this, [
429
431
  [
430
- _dec1$1,
432
+ _dec1$3,
431
433
  1,
432
434
  "variant"
433
435
  ],
434
436
  [
435
- _dec2$1,
437
+ _dec2$3,
436
438
  1,
437
439
  "size"
438
440
  ],
439
441
  [
440
- _dec3$1,
442
+ _dec3$3,
441
443
  1,
442
444
  "dot"
443
445
  ],
444
446
  [
445
- _dec4$1,
447
+ _dec4$3,
446
448
  1,
447
449
  "pill"
448
450
  ],
449
451
  [
450
- _dec5$1,
452
+ _dec5$3,
451
453
  1,
452
454
  "count"
453
455
  ],
454
456
  [
455
- _dec6$1,
457
+ _dec6$3,
456
458
  1,
457
459
  "showZero"
458
460
  ],
459
461
  [
460
- _dec7$1,
462
+ _dec7$3,
461
463
  1,
462
464
  "max"
463
465
  ],
464
466
  [
465
- _dec8$1,
467
+ _dec8$3,
466
468
  1,
467
469
  "outline"
468
470
  ],
469
471
  [
470
- _dec9$1,
472
+ _dec9$3,
471
473
  1,
472
474
  "_hasIcon"
473
475
  ],
474
476
  [
475
- _dec10$1,
477
+ _dec10$3,
476
478
  1,
477
479
  "_hasDefaultSlot"
478
480
  ]
479
481
  ], [
480
- _dec$1
482
+ _dec$3
481
483
  ], _ViElement$1));
482
484
  }
483
485
  static styles = css`${unsafeCSS(badgeStyles)}`;
484
- #___private_variant_1 = (_initProto$1(this), _init_variant$1(this, 'neutral'));
486
+ #___private_variant_1 = (_initProto$3(this), _init_variant$2(this, 'neutral'));
485
487
  get variant() {
486
488
  return this.#___private_variant_1;
487
489
  }
488
490
  set variant(_v) {
489
491
  this.#___private_variant_1 = _v;
490
492
  }
491
- #___private_size_2 = _init_size(this, 'md');
493
+ #___private_size_2 = _init_size$1(this, 'md');
492
494
  get size() {
493
495
  return this.#___private_size_2;
494
496
  }
@@ -537,7 +539,7 @@ new class extends _identity$1 {
537
539
  set outline(_v) {
538
540
  this.#___private_outline_8 = _v;
539
541
  }
540
- #___private__hasIcon_9 = _init__hasIcon(this, false);
542
+ #___private__hasIcon_9 = _init__hasIcon$1(this, false);
541
543
  get _hasIcon() {
542
544
  return this.#___private__hasIcon_9;
543
545
  }
@@ -614,7 +616,7 @@ new class extends _identity$1 {
614
616
 
615
617
  const alertStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.alert-root{display:flex;align-items:flex-start;box-sizing:border-box;width:100%;border-radius:var(--vi-alert-border-radius, 6px);padding:var(--vi-alert-padding, 12px 16px);gap:var(--vi-alert-gap, 12px);border-width:var(--vi-alert-border-width, 1px);border-style:solid;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-sm, 14px);line-height:var(--vi-line-height-normal, 1.5)}.alert-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:2px}.alert-content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.alert-title{font-weight:var(--vi-font-weight-semibold, 600);margin-bottom:4px;display:block}.alert-actions{display:flex;align-items:center;gap:var(--vi-spacing-xs, 8px);margin-top:var(--vi-spacing-sm, 16px)}}:host{display:block;width:100%}:host([floating]){position:absolute;top:0;left:0;right:0;z-index:var(--vi-alert-floating-z-index, 10);box-shadow:var(--vi-alert-floating-shadow, 0 4px 12px rgba(0, 0, 0, .12))}:host([hidden]){display:none!important}.alert-root{overflow:hidden}.alert-root[data-variant=neutral]{background-color:var(--vi-alert-neutral-bg, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-alert-neutral-border, var(--vi-border-04, #bdbdbd));color:var(--vi-alert-neutral-text-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-title{color:var(--vi-alert-neutral-title-color, var(--vi-text-primary, #111827))}.alert-root[data-variant=neutral] .alert-icon{color:var(--vi-alert-neutral-icon-color, var(--vi-text-secondary, #4b5563))}.alert-root[data-variant=info]{background-color:var(--vi-alert-info-bg, var(--vi-bg-info, #e3f2fd));border-color:var(--vi-alert-info-border, var(--vi-color-info, #3676d0));color:var(--vi-alert-info-text-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-title{color:var(--vi-alert-info-title-color, var(--vi-text-info, #3676d0))}.alert-root[data-variant=info] .alert-icon{color:var(--vi-alert-info-icon-color, var(--vi-color-info, #3676d0))}.alert-root[data-variant=success]{background-color:var(--vi-alert-success-bg, var(--vi-bg-success, #e6f9f0));border-color:var(--vi-alert-success-border, var(--vi-color-success, #489167));color:var(--vi-alert-success-text-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-title{color:var(--vi-alert-success-title-color, var(--vi-text-success, #265a3d))}.alert-root[data-variant=success] .alert-icon{color:var(--vi-alert-success-icon-color, var(--vi-color-success, #489167))}.alert-root[data-variant=warning]{background-color:var(--vi-alert-warning-bg, var(--vi-bg-warning, #fff8e1));border-color:var(--vi-alert-warning-border, var(--vi-color-warning, #ffba00));color:var(--vi-alert-warning-text-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-title{color:var(--vi-alert-warning-title-color, var(--vi-text-warning, #e68300))}.alert-root[data-variant=warning] .alert-icon{color:var(--vi-alert-warning-icon-color, var(--vi-color-warning, #ffba00))}.alert-root[data-variant=danger]{background-color:var(--vi-alert-danger-bg, var(--vi-bg-error, #ffebee));border-color:var(--vi-alert-danger-border, var(--vi-color-error, #ef4444));color:var(--vi-alert-danger-text-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-title{color:var(--vi-alert-danger-title-color, var(--vi-text-error, #db231b))}.alert-root[data-variant=danger] .alert-icon{color:var(--vi-alert-danger-icon-color, var(--vi-color-error, #ef4444))}vi-icon,::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1.25em;width:1.25em;height:1.25em}vi-button[part=close-btn]{margin-top:-4px;margin-right:-4px;margin-left:4px}";
616
618
 
617
- function applyDecs2203RFactory() {
619
+ function applyDecs2203RFactory$2() {
618
620
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
619
621
  return function addInitializer(initializer) {
620
622
  assertNotFinished(decoratorFinishedRef, "addInitializer");
@@ -983,19 +985,19 @@ function applyDecs2203RFactory() {
983
985
  };
984
986
  };
985
987
  }
986
- function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
987
- return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
988
+ function _apply_decs_2203_r$2(targetClass, memberDecs, classDecs, parentClass) {
989
+ return (_apply_decs_2203_r$2 = applyDecs2203RFactory$2())(targetClass, memberDecs, classDecs, parentClass);
988
990
  }
989
- function _identity(x) {
991
+ function _identity$2(x) {
990
992
  return x;
991
993
  }
992
- var _dec, _initClass, _ViElement, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, /** Colour, icon, ARIA role */ _init_variant, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
994
+ var _dec$2, _initClass$2, _ViElement, _dec1$2, _dec2$2, _dec3$2, _dec4$2, _dec5$2, _dec6$2, _dec7$2, _dec8$2, _dec9$2, _dec10$2, _dec11$1, _dec12, _dec13, /** Colour, icon, ARIA role */ _init_variant$1, /** Bold headline (optional) */ _init_title, /** Show × dismiss button */ _init_dismissible, /** Accessible label for the dismiss button */ _init_dismissLabel, /**
993
995
  * Enables auto-hiding after a duration (default: 5000ms).
994
996
  * Note: Setting a positive `duration` or `auto-hide-duration` also implicitly enables auto-hiding.
995
- */ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
997
+ */ _init_autoHide, /** Auto hide duration in milliseconds (default: 5000ms) */ _init_autoHideDuration, /**
996
998
  * Alias for auto-hide-duration in milliseconds.
997
999
  * Setting a positive duration enables auto-hiding automatically.
998
- */ _init_duration, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto;
1000
+ */ _init_duration, /** Override the default status icon name */ _init_icon, /** Controls whether the alert is displayed */ _init_open, /** Position alert absolutely over parent container without pushing layout */ _init_floating, /** Hide the icon */ _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$2;
999
1001
  const checkCircleIcon = {
1000
1002
  name: 'check-circle',
1001
1003
  data: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`
@@ -1024,99 +1026,99 @@ registerIcons([
1024
1026
  lockIcon
1025
1027
  ]);
1026
1028
  let _ViAlert;
1027
- _dec = customElement('vi-alert'), _dec1 = property({
1029
+ _dec$2 = customElement('vi-alert'), _dec1$2 = property({
1028
1030
  type: String,
1029
1031
  reflect: true
1030
- }), _dec2 = property({
1032
+ }), _dec2$2 = property({
1031
1033
  type: String
1032
- }), _dec3 = property({
1034
+ }), _dec3$2 = property({
1033
1035
  type: Boolean,
1034
1036
  reflect: true
1035
- }), _dec4 = property({
1037
+ }), _dec4$2 = property({
1036
1038
  type: String,
1037
1039
  attribute: 'dismiss-label'
1038
- }), _dec5 = property({
1040
+ }), _dec5$2 = property({
1039
1041
  type: Boolean,
1040
1042
  attribute: 'auto-hide',
1041
1043
  reflect: true
1042
- }), _dec6 = property({
1044
+ }), _dec6$2 = property({
1043
1045
  type: Number,
1044
1046
  attribute: 'auto-hide-duration'
1045
- }), _dec7 = property({
1047
+ }), _dec7$2 = property({
1046
1048
  type: Number
1047
- }), _dec8 = property({
1049
+ }), _dec8$2 = property({
1048
1050
  type: String
1049
- }), _dec9 = property({
1051
+ }), _dec9$2 = property({
1050
1052
  type: Boolean,
1051
1053
  reflect: true
1052
- }), _dec10 = property({
1054
+ }), _dec10$2 = property({
1053
1055
  type: Boolean,
1054
1056
  reflect: true
1055
- }), _dec11 = property({
1057
+ }), _dec11$1 = property({
1056
1058
  type: Boolean,
1057
1059
  attribute: 'no-icon',
1058
1060
  reflect: true
1059
1061
  }), _dec12 = state(), _dec13 = state();
1060
- new class extends _identity {
1062
+ new class extends _identity$2 {
1061
1063
  constructor(){
1062
- super(_ViAlert), _initClass();
1064
+ super(_ViAlert), _initClass$2();
1063
1065
  }
1064
1066
  static{
1065
1067
  class ViAlert extends (_ViElement = ViElement) {
1066
1068
  static{
1067
- ({ e: [_init_variant, _init_title, _init_dismissible, _init_dismissLabel, _init_autoHide, _init_autoHideDuration, _init_duration, _init_icon, _init_open, _init_floating, _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto], c: [_ViAlert, _initClass] } = _apply_decs_2203_r(this, [
1069
+ ({ e: [_init_variant$1, _init_title, _init_dismissible, _init_dismissLabel, _init_autoHide, _init_autoHideDuration, _init_duration, _init_icon, _init_open, _init_floating, _init_noIcon, _init__hasTitleSlot, _init__hasActionsSlot, _initProto$2], c: [_ViAlert, _initClass$2] } = _apply_decs_2203_r$2(this, [
1068
1070
  [
1069
- _dec1,
1071
+ _dec1$2,
1070
1072
  1,
1071
1073
  "variant"
1072
1074
  ],
1073
1075
  [
1074
- _dec2,
1076
+ _dec2$2,
1075
1077
  1,
1076
1078
  "title"
1077
1079
  ],
1078
1080
  [
1079
- _dec3,
1081
+ _dec3$2,
1080
1082
  1,
1081
1083
  "dismissible"
1082
1084
  ],
1083
1085
  [
1084
- _dec4,
1086
+ _dec4$2,
1085
1087
  1,
1086
1088
  "dismissLabel"
1087
1089
  ],
1088
1090
  [
1089
- _dec5,
1091
+ _dec5$2,
1090
1092
  1,
1091
1093
  "autoHide"
1092
1094
  ],
1093
1095
  [
1094
- _dec6,
1096
+ _dec6$2,
1095
1097
  1,
1096
1098
  "autoHideDuration"
1097
1099
  ],
1098
1100
  [
1099
- _dec7,
1101
+ _dec7$2,
1100
1102
  1,
1101
1103
  "duration"
1102
1104
  ],
1103
1105
  [
1104
- _dec8,
1106
+ _dec8$2,
1105
1107
  1,
1106
1108
  "icon"
1107
1109
  ],
1108
1110
  [
1109
- _dec9,
1111
+ _dec9$2,
1110
1112
  1,
1111
1113
  "open"
1112
1114
  ],
1113
1115
  [
1114
- _dec10,
1116
+ _dec10$2,
1115
1117
  1,
1116
1118
  "floating"
1117
1119
  ],
1118
1120
  [
1119
- _dec11,
1121
+ _dec11$1,
1120
1122
  1,
1121
1123
  "noIcon"
1122
1124
  ],
@@ -1131,13 +1133,13 @@ new class extends _identity {
1131
1133
  "_hasActionsSlot"
1132
1134
  ]
1133
1135
  ], [
1134
- _dec
1136
+ _dec$2
1135
1137
  ], _ViElement));
1136
1138
  }
1137
1139
  static styles = css`
1138
1140
  ${unsafeCSS(alertStyles)}
1139
1141
  `;
1140
- #___private_variant_1 = (_initProto(this), _init_variant(this, 'info'));
1142
+ #___private_variant_1 = (_initProto$2(this), _init_variant$1(this, 'info'));
1141
1143
  get variant() {
1142
1144
  return this.#___private_variant_1;
1143
1145
  }
@@ -1464,4 +1466,1425 @@ new class extends _identity {
1464
1466
  }
1465
1467
  }();
1466
1468
 
1467
- export { _ViAlert as ViAlert, _ViBadge as ViBadge, ViElement, registerIcons };
1469
+ const chipStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.chip,button{display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;outline:none;border-style:solid;height:var(--vi-chip-height, var(--vi-chip-height-md, 32px));padding:var(--vi-chip-padding, 0 10px);border-radius:var(--vi-chip-border-radius, 999px);border-width:var(--vi-chip-border-width, 1px);gap:var(--vi-chip-gap, 6px);font-size:var(--vi-chip-font-size, var(--vi-font-size-sm));font-weight:var(--vi-chip-font-weight, var(--vi-font-weight-medium));transition:all var(--vi-chip-transition, .1s ease);background-color:var(--vi-chip-bg-color, var(--vi-layer-02, #f3f4f6));border-color:var(--vi-chip-border-color, var(--vi-border-03, #e0e0e0));color:var(--vi-chip-text-color, var(--vi-color-foreground, #111827))}.chip:focus-visible,button:focus-visible{outline:var(--vi-border-width-base, 2px) solid var(--vi-chip-focus-ring-color, var(--vi-focus, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-chip-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.chip[aria-disabled=true],button[aria-disabled=true]{cursor:not-allowed}.chip-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:calc(100% - 8px);height:calc(100% - 8px);margin-inline-start:-4px}.chip-icon{display:inline-flex;align-items:center}.chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-group{display:flex;align-items:center}}:host{display:inline-block;vertical-align:middle}:host([hidden]){display:none!important}:host([size=sm]) button{--vi-chip-height: var(--vi-chip-height-sm);--vi-chip-font-size: var(--vi-font-size-xs);--vi-chip-padding: 0 8px}:host([size=md]) button{--vi-chip-height: var(--vi-chip-height-md);--vi-chip-font-size: var(--vi-font-size-sm);--vi-chip-padding: 0 10px}:host([size=lg]) button{--vi-chip-height: var(--vi-chip-height-lg);--vi-chip-font-size: var(--vi-font-size-base);--vi-chip-padding: 0 12px}:host([variant=neutral]) button{--vi-chip-bg-color: var(--vi-color-grey-100, #f5f5f5);--vi-chip-border-color: var(--vi-color-grey-300, #e0e0e0);--vi-chip-text-color: var(--vi-color-grey-700, #616161)}:host([variant=neutral]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-border-color: var(--vi-color-grey-400, #bdbdbd);--vi-chip-text-color: var(--vi-color-grey-900, #212121)}:host([variant=neutral][selected]) button{--vi-chip-bg-color: var(--vi-color-primary, #3676d0);--vi-chip-border-color: var(--vi-color-primary, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=neutral][selected]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-800, #2d5fa8);--vi-chip-border-color: var(--vi-color-blue-800, #2d5fa8)}:host([variant=primary]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=primary]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=primary][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=success]) button{--vi-chip-bg-color: var(--vi-bg-success, #e6f9f0);--vi-chip-border-color: var(--vi-bg-success, #e6f9f0);--vi-chip-text-color: var(--vi-text-success, #265a3d)}:host([variant=success]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-green-100, #e6f0eb);--vi-chip-border-color: var(--vi-color-green-200, #c0dbcd)}:host([variant=success][selected]) button{--vi-chip-bg-color: var(--vi-color-success, #489167);--vi-chip-border-color: var(--vi-color-success, #489167);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=warning]) button{--vi-chip-bg-color: var(--vi-bg-warning, #fff8e1);--vi-chip-border-color: var(--vi-bg-warning, #fff8e1);--vi-chip-text-color: var(--vi-text-warning, #e68300)}:host([variant=warning]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-yellow-100, #ffeab1);--vi-chip-border-color: var(--vi-color-yellow-200, #ffde85)}:host([variant=warning][selected]) button{--vi-chip-bg-color: var(--vi-color-warning, #ffba00);--vi-chip-border-color: var(--vi-color-warning, #ffba00);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=danger]) button{--vi-chip-bg-color: var(--vi-bg-error, #ffebee);--vi-chip-border-color: var(--vi-bg-error, #ffebee);--vi-chip-text-color: var(--vi-text-error, #db231b)}:host([variant=danger]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-red-100, #ffccce);--vi-chip-border-color: var(--vi-color-red-200, #f69892)}:host([variant=danger][selected]) button{--vi-chip-bg-color: var(--vi-color-error, #ef4444);--vi-chip-border-color: var(--vi-color-error, #ef4444);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([variant=info]) button{--vi-chip-bg-color: var(--vi-bg-info, #e3f2fd);--vi-chip-border-color: var(--vi-bg-info, #e3f2fd);--vi-chip-text-color: var(--vi-text-info, #3676d0)}:host([variant=info]:not([disabled])) button:hover{--vi-chip-bg-color: var(--vi-color-blue-100, #ebf5ff);--vi-chip-border-color: var(--vi-color-blue-200, #cee6ff)}:host([variant=info][selected]) button{--vi-chip-bg-color: var(--vi-color-info, #3676d0);--vi-chip-border-color: var(--vi-color-info, #3676d0);--vi-chip-text-color: var(--vi-text-primary-inverse, #ffffff)}:host([disabled]) button{--vi-chip-bg-color: var(--vi-color-grey-50, #fafafa);--vi-chip-border-color: var(--vi-color-grey-200, #eeeeee);--vi-chip-text-color: var(--vi-color-grey-300, #e0e0e0)}.chip-avatar[hidden],.chip-icon[hidden],::slotted([slot=trailing-icon][hidden]){display:none!important}vi-button[part=remove-btn]{margin-inline-start:4px;margin-inline-end:-6px;border-radius:50%;color:inherit}";
1470
+
1471
+ function applyDecs2203RFactory$1() {
1472
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
1473
+ return function addInitializer(initializer) {
1474
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
1475
+ assertCallable(initializer, "An initializer");
1476
+ initializers.push(initializer);
1477
+ };
1478
+ }
1479
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
1480
+ var kindStr;
1481
+ switch(kind){
1482
+ case 1:
1483
+ kindStr = "accessor";
1484
+ break;
1485
+ case 2:
1486
+ kindStr = "method";
1487
+ break;
1488
+ case 3:
1489
+ kindStr = "getter";
1490
+ break;
1491
+ case 4:
1492
+ kindStr = "setter";
1493
+ break;
1494
+ default:
1495
+ kindStr = "field";
1496
+ }
1497
+ var ctx = {
1498
+ kind: kindStr,
1499
+ name: isPrivate ? "#" + name : name,
1500
+ static: isStatic,
1501
+ private: isPrivate,
1502
+ metadata: metadata
1503
+ };
1504
+ var decoratorFinishedRef = {
1505
+ v: false
1506
+ };
1507
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
1508
+ var get, set;
1509
+ if (kind === 0) {
1510
+ if (isPrivate) {
1511
+ get = desc.get;
1512
+ set = desc.set;
1513
+ } else {
1514
+ get = function() {
1515
+ return this[name];
1516
+ };
1517
+ set = function(v) {
1518
+ this[name] = v;
1519
+ };
1520
+ }
1521
+ } else if (kind === 2) {
1522
+ get = function() {
1523
+ return desc.value;
1524
+ };
1525
+ } else {
1526
+ if (kind === 1 || kind === 3) {
1527
+ get = function() {
1528
+ return desc.get.call(this);
1529
+ };
1530
+ }
1531
+ if (kind === 1 || kind === 4) {
1532
+ set = function(v) {
1533
+ desc.set.call(this, v);
1534
+ };
1535
+ }
1536
+ }
1537
+ ctx.access = get && set ? {
1538
+ get: get,
1539
+ set: set
1540
+ } : get ? {
1541
+ get: get
1542
+ } : {
1543
+ set: set
1544
+ };
1545
+ try {
1546
+ return dec(value, ctx);
1547
+ } finally{
1548
+ decoratorFinishedRef.v = true;
1549
+ }
1550
+ }
1551
+ function assertNotFinished(decoratorFinishedRef, fnName) {
1552
+ if (decoratorFinishedRef.v) {
1553
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
1554
+ }
1555
+ }
1556
+ function assertCallable(fn, hint) {
1557
+ if (typeof fn !== "function") {
1558
+ throw new TypeError(hint + " must be a function");
1559
+ }
1560
+ }
1561
+ function assertValidReturnValue(kind, value) {
1562
+ var type = typeof value;
1563
+ if (kind === 1) {
1564
+ if (type !== "object" || value === null) {
1565
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
1566
+ }
1567
+ if (value.get !== undefined) {
1568
+ assertCallable(value.get, "accessor.get");
1569
+ }
1570
+ if (value.set !== undefined) {
1571
+ assertCallable(value.set, "accessor.set");
1572
+ }
1573
+ if (value.init !== undefined) {
1574
+ assertCallable(value.init, "accessor.init");
1575
+ }
1576
+ } else if (type !== "function") {
1577
+ var hint;
1578
+ if (kind === 0) {
1579
+ hint = "field";
1580
+ } else if (kind === 10) {
1581
+ hint = "class";
1582
+ } else {
1583
+ hint = "method";
1584
+ }
1585
+ throw new TypeError(hint + " decorators must return a function or void 0");
1586
+ }
1587
+ }
1588
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
1589
+ var decs = decInfo[0];
1590
+ var desc, init, value;
1591
+ if (isPrivate) {
1592
+ if (kind === 0 || kind === 1) {
1593
+ desc = {
1594
+ get: decInfo[3],
1595
+ set: decInfo[4]
1596
+ };
1597
+ } else if (kind === 3) {
1598
+ desc = {
1599
+ get: decInfo[3]
1600
+ };
1601
+ } else if (kind === 4) {
1602
+ desc = {
1603
+ set: decInfo[3]
1604
+ };
1605
+ } else {
1606
+ desc = {
1607
+ value: decInfo[3]
1608
+ };
1609
+ }
1610
+ } else if (kind !== 0) {
1611
+ desc = Object.getOwnPropertyDescriptor(base, name);
1612
+ }
1613
+ if (kind === 1) {
1614
+ value = {
1615
+ get: desc.get,
1616
+ set: desc.set
1617
+ };
1618
+ } else if (kind === 2) {
1619
+ value = desc.value;
1620
+ } else if (kind === 3) {
1621
+ value = desc.get;
1622
+ } else if (kind === 4) {
1623
+ value = desc.set;
1624
+ }
1625
+ var newValue, get, set;
1626
+ if (typeof decs === "function") {
1627
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
1628
+ if (newValue !== void 0) {
1629
+ assertValidReturnValue(kind, newValue);
1630
+ if (kind === 0) {
1631
+ init = newValue;
1632
+ } else if (kind === 1) {
1633
+ init = newValue.init;
1634
+ get = newValue.get || value.get;
1635
+ set = newValue.set || value.set;
1636
+ value = {
1637
+ get: get,
1638
+ set: set
1639
+ };
1640
+ } else {
1641
+ value = newValue;
1642
+ }
1643
+ }
1644
+ } else {
1645
+ for(var i = decs.length - 1; i >= 0; i--){
1646
+ var dec = decs[i];
1647
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
1648
+ if (newValue !== void 0) {
1649
+ assertValidReturnValue(kind, newValue);
1650
+ var newInit;
1651
+ if (kind === 0) {
1652
+ newInit = newValue;
1653
+ } else if (kind === 1) {
1654
+ newInit = newValue.init;
1655
+ get = newValue.get || value.get;
1656
+ set = newValue.set || value.set;
1657
+ value = {
1658
+ get: get,
1659
+ set: set
1660
+ };
1661
+ } else {
1662
+ value = newValue;
1663
+ }
1664
+ if (newInit !== void 0) {
1665
+ if (init === void 0) {
1666
+ init = newInit;
1667
+ } else if (typeof init === "function") {
1668
+ init = [
1669
+ init,
1670
+ newInit
1671
+ ];
1672
+ } else {
1673
+ init.push(newInit);
1674
+ }
1675
+ }
1676
+ }
1677
+ }
1678
+ }
1679
+ if (kind === 0 || kind === 1) {
1680
+ if (init === void 0) {
1681
+ init = function(instance, init) {
1682
+ return init;
1683
+ };
1684
+ } else if (typeof init !== "function") {
1685
+ var ownInitializers = init;
1686
+ init = function(instance, init) {
1687
+ var value = init;
1688
+ for(var i = 0; i < ownInitializers.length; i++){
1689
+ value = ownInitializers[i].call(instance, value);
1690
+ }
1691
+ return value;
1692
+ };
1693
+ } else {
1694
+ var originalInitializer = init;
1695
+ init = function(instance, init) {
1696
+ return originalInitializer.call(instance, init);
1697
+ };
1698
+ }
1699
+ ret.push(init);
1700
+ }
1701
+ if (kind !== 0) {
1702
+ if (kind === 1) {
1703
+ desc.get = value.get;
1704
+ desc.set = value.set;
1705
+ } else if (kind === 2) {
1706
+ desc.value = value;
1707
+ } else if (kind === 3) {
1708
+ desc.get = value;
1709
+ } else if (kind === 4) {
1710
+ desc.set = value;
1711
+ }
1712
+ if (isPrivate) {
1713
+ if (kind === 1) {
1714
+ ret.push(function(instance, args) {
1715
+ return value.get.call(instance, args);
1716
+ });
1717
+ ret.push(function(instance, args) {
1718
+ return value.set.call(instance, args);
1719
+ });
1720
+ } else if (kind === 2) {
1721
+ ret.push(value);
1722
+ } else {
1723
+ ret.push(function(instance, args) {
1724
+ return value.call(instance, args);
1725
+ });
1726
+ }
1727
+ } else {
1728
+ Object.defineProperty(base, name, desc);
1729
+ }
1730
+ }
1731
+ }
1732
+ function applyMemberDecs(Class, decInfos, metadata) {
1733
+ var ret = [];
1734
+ var protoInitializers;
1735
+ var staticInitializers;
1736
+ var existingProtoNonFields = new Map();
1737
+ var existingStaticNonFields = new Map();
1738
+ for(var i = 0; i < decInfos.length; i++){
1739
+ var decInfo = decInfos[i];
1740
+ if (!Array.isArray(decInfo)) continue;
1741
+ var kind = decInfo[1];
1742
+ var name = decInfo[2];
1743
+ var isPrivate = decInfo.length > 3;
1744
+ var isStatic = kind >= 5;
1745
+ var base;
1746
+ var initializers;
1747
+ if (isStatic) {
1748
+ base = Class;
1749
+ kind = kind - 5;
1750
+ staticInitializers = staticInitializers || [];
1751
+ initializers = staticInitializers;
1752
+ } else {
1753
+ base = Class.prototype;
1754
+ protoInitializers = protoInitializers || [];
1755
+ initializers = protoInitializers;
1756
+ }
1757
+ if (kind !== 0 && !isPrivate) {
1758
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
1759
+ var existingKind = existingNonFields.get(name) || 0;
1760
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
1761
+ throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
1762
+ } else if (!existingKind && kind > 2) {
1763
+ existingNonFields.set(name, kind);
1764
+ } else {
1765
+ existingNonFields.set(name, true);
1766
+ }
1767
+ }
1768
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
1769
+ }
1770
+ pushInitializers(ret, protoInitializers);
1771
+ pushInitializers(ret, staticInitializers);
1772
+ return ret;
1773
+ }
1774
+ function pushInitializers(ret, initializers) {
1775
+ if (initializers) {
1776
+ ret.push(function(instance) {
1777
+ for(var i = 0; i < initializers.length; i++){
1778
+ initializers[i].call(instance);
1779
+ }
1780
+ return instance;
1781
+ });
1782
+ }
1783
+ }
1784
+ function applyClassDecs(targetClass, classDecs, metadata) {
1785
+ if (classDecs.length > 0) {
1786
+ var initializers = [];
1787
+ var newClass = targetClass;
1788
+ var name = targetClass.name;
1789
+ for(var i = classDecs.length - 1; i >= 0; i--){
1790
+ var decoratorFinishedRef = {
1791
+ v: false
1792
+ };
1793
+ try {
1794
+ var nextNewClass = classDecs[i](newClass, {
1795
+ kind: "class",
1796
+ name: name,
1797
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
1798
+ metadata
1799
+ });
1800
+ } finally{
1801
+ decoratorFinishedRef.v = true;
1802
+ }
1803
+ if (nextNewClass !== undefined) {
1804
+ assertValidReturnValue(10, nextNewClass);
1805
+ newClass = nextNewClass;
1806
+ }
1807
+ }
1808
+ return [
1809
+ defineMetadata(newClass, metadata),
1810
+ function() {
1811
+ for(var i = 0; i < initializers.length; i++){
1812
+ initializers[i].call(newClass);
1813
+ }
1814
+ }
1815
+ ];
1816
+ }
1817
+ }
1818
+ function defineMetadata(Class, metadata) {
1819
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
1820
+ configurable: true,
1821
+ enumerable: true,
1822
+ value: metadata
1823
+ });
1824
+ }
1825
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
1826
+ if (parentClass !== void 0) {
1827
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
1828
+ }
1829
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
1830
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
1831
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
1832
+ return {
1833
+ e: e,
1834
+ get c () {
1835
+ return applyClassDecs(targetClass, classDecs, metadata);
1836
+ }
1837
+ };
1838
+ };
1839
+ }
1840
+ function _apply_decs_2203_r$1(targetClass, memberDecs, classDecs, parentClass) {
1841
+ return (_apply_decs_2203_r$1 = applyDecs2203RFactory$1())(targetClass, memberDecs, classDecs, parentClass);
1842
+ }
1843
+ function _identity$1(x) {
1844
+ return x;
1845
+ }
1846
+ var _dec$1, _initClass$1, _FocusableMixin, _dec1$1, _dec2$1, _dec3$1, _dec4$1, _dec5$1, _dec6$1, _dec7$1, _dec8$1, _dec9$1, _dec10$1, _dec11, /** Value for group selection tracking. */ _init_value$1, /** Selected / active state. */ _init_selected, /** Disables the chip. */ _init_disabled$1, /** Show × remove button. */ _init_removable, /** Screen reader text for the remove button (default: 'Remove') */ _init_removeAriaLabel, /** Base colour. */ _init_variant, /** Chip size. */ _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$1;
1847
+ let _ViChip;
1848
+ _dec$1 = customElement('vi-chip'), _dec1$1 = property({
1849
+ type: String,
1850
+ reflect: true
1851
+ }), _dec2$1 = property({
1852
+ type: Boolean,
1853
+ reflect: true
1854
+ }), _dec3$1 = property({
1855
+ type: Boolean,
1856
+ reflect: true
1857
+ }), _dec4$1 = property({
1858
+ type: Boolean,
1859
+ reflect: true
1860
+ }), _dec5$1 = property({
1861
+ type: String,
1862
+ attribute: 'remove-aria-label'
1863
+ }), _dec6$1 = property({
1864
+ type: String,
1865
+ reflect: true
1866
+ }), _dec7$1 = property({
1867
+ type: String,
1868
+ reflect: true
1869
+ }), _dec8$1 = state(), _dec9$1 = state(), _dec10$1 = state(), _dec11 = state();
1870
+ new class extends _identity$1 {
1871
+ constructor(){
1872
+ super(_ViChip), _initClass$1();
1873
+ }
1874
+ static{
1875
+ class ViChip extends (_FocusableMixin = FocusableMixin(ViElement)) {
1876
+ static{
1877
+ ({ e: [_init_value$1, _init_selected, _init_disabled$1, _init_removable, _init_removeAriaLabel, _init_variant, _init_size, _init__inGroup, _init__hasAvatar, _init__hasIcon, _init__hasTrailingIcon, _initProto$1], c: [_ViChip, _initClass$1] } = _apply_decs_2203_r$1(this, [
1878
+ [
1879
+ _dec1$1,
1880
+ 1,
1881
+ "value"
1882
+ ],
1883
+ [
1884
+ _dec2$1,
1885
+ 1,
1886
+ "selected"
1887
+ ],
1888
+ [
1889
+ _dec3$1,
1890
+ 1,
1891
+ "disabled"
1892
+ ],
1893
+ [
1894
+ _dec4$1,
1895
+ 1,
1896
+ "removable"
1897
+ ],
1898
+ [
1899
+ _dec5$1,
1900
+ 1,
1901
+ "removeAriaLabel"
1902
+ ],
1903
+ [
1904
+ _dec6$1,
1905
+ 1,
1906
+ "variant"
1907
+ ],
1908
+ [
1909
+ _dec7$1,
1910
+ 1,
1911
+ "size"
1912
+ ],
1913
+ [
1914
+ _dec8$1,
1915
+ 1,
1916
+ "_inGroup"
1917
+ ],
1918
+ [
1919
+ _dec9$1,
1920
+ 1,
1921
+ "_hasAvatar"
1922
+ ],
1923
+ [
1924
+ _dec10$1,
1925
+ 1,
1926
+ "_hasIcon"
1927
+ ],
1928
+ [
1929
+ _dec11,
1930
+ 1,
1931
+ "_hasTrailingIcon"
1932
+ ]
1933
+ ], [
1934
+ _dec$1
1935
+ ], _FocusableMixin));
1936
+ }
1937
+ static styles = css`${unsafeCSS(chipStyles)}`;
1938
+ get _focusableElement() {
1939
+ return this.shadowRoot?.querySelector('button') ?? null;
1940
+ }
1941
+ #___private_value_1 = (_initProto$1(this), _init_value$1(this, ''));
1942
+ get value() {
1943
+ return this.#___private_value_1;
1944
+ }
1945
+ set value(_v) {
1946
+ this.#___private_value_1 = _v;
1947
+ }
1948
+ #___private_selected_2 = _init_selected(this, false);
1949
+ get selected() {
1950
+ return this.#___private_selected_2;
1951
+ }
1952
+ set selected(_v) {
1953
+ this.#___private_selected_2 = _v;
1954
+ }
1955
+ #___private_disabled_3 = _init_disabled$1(this, false);
1956
+ get disabled() {
1957
+ return this.#___private_disabled_3;
1958
+ }
1959
+ set disabled(_v) {
1960
+ this.#___private_disabled_3 = _v;
1961
+ }
1962
+ #___private_removable_4 = _init_removable(this, false);
1963
+ get removable() {
1964
+ return this.#___private_removable_4;
1965
+ }
1966
+ set removable(_v) {
1967
+ this.#___private_removable_4 = _v;
1968
+ }
1969
+ #___private_removeAriaLabel_5 = _init_removeAriaLabel(this, 'Remove');
1970
+ get removeAriaLabel() {
1971
+ return this.#___private_removeAriaLabel_5;
1972
+ }
1973
+ set removeAriaLabel(_v) {
1974
+ this.#___private_removeAriaLabel_5 = _v;
1975
+ }
1976
+ #___private_variant_6 = _init_variant(this, 'neutral');
1977
+ get variant() {
1978
+ return this.#___private_variant_6;
1979
+ }
1980
+ set variant(_v) {
1981
+ this.#___private_variant_6 = _v;
1982
+ }
1983
+ #___private_size_7 = _init_size(this, 'md');
1984
+ get size() {
1985
+ return this.#___private_size_7;
1986
+ }
1987
+ set size(_v) {
1988
+ this.#___private_size_7 = _v;
1989
+ }
1990
+ #___private__inGroup_8 = _init__inGroup(this, false);
1991
+ get _inGroup() {
1992
+ return this.#___private__inGroup_8;
1993
+ }
1994
+ set _inGroup(_v) {
1995
+ this.#___private__inGroup_8 = _v;
1996
+ }
1997
+ #___private__hasAvatar_9 = _init__hasAvatar(this, false);
1998
+ get _hasAvatar() {
1999
+ return this.#___private__hasAvatar_9;
2000
+ }
2001
+ set _hasAvatar(_v) {
2002
+ this.#___private__hasAvatar_9 = _v;
2003
+ }
2004
+ #___private__hasIcon_10 = _init__hasIcon(this, false);
2005
+ get _hasIcon() {
2006
+ return this.#___private__hasIcon_10;
2007
+ }
2008
+ set _hasIcon(_v) {
2009
+ this.#___private__hasIcon_10 = _v;
2010
+ }
2011
+ #___private__hasTrailingIcon_11 = _init__hasTrailingIcon(this, false);
2012
+ get _hasTrailingIcon() {
2013
+ return this.#___private__hasTrailingIcon_11;
2014
+ }
2015
+ set _hasTrailingIcon(_v) {
2016
+ this.#___private__hasTrailingIcon_11 = _v;
2017
+ }
2018
+ connectedCallback() {
2019
+ super.connectedCallback();
2020
+ this._inGroup = this.closest('vi-chip-group') !== null;
2021
+ this._syncSlotsFromLightDom();
2022
+ }
2023
+ firstUpdated(changed) {
2024
+ super.firstUpdated(changed);
2025
+ this._syncSlots();
2026
+ }
2027
+ updated(changed) {
2028
+ super.updated(changed);
2029
+ if (changed.has('disabled')) {
2030
+ if (this.disabled) {
2031
+ this._setHostFocusable(false);
2032
+ } else if (changed.get('disabled') !== undefined) {
2033
+ this._setHostFocusable(true);
2034
+ }
2035
+ }
2036
+ }
2037
+ _syncSlotsFromLightDom() {
2038
+ if (this.querySelector('[slot="avatar"]')) this._hasAvatar = true;
2039
+ if (this.querySelector('[slot="icon"]')) this._hasIcon = true;
2040
+ if (this.querySelector('[slot="trailing-icon"]')) this._hasTrailingIcon = true;
2041
+ }
2042
+ _syncSlots() {
2043
+ const avatarSlot = this.shadowRoot?.querySelector('slot[name="avatar"]');
2044
+ const iconSlot = this.shadowRoot?.querySelector('slot[name="icon"]');
2045
+ const trailingSlot = this.shadowRoot?.querySelector('slot[name="trailing-icon"]');
2046
+ if (avatarSlot) {
2047
+ this._hasAvatar = avatarSlot.assignedElements({
2048
+ flatten: true
2049
+ }).length > 0;
2050
+ }
2051
+ if (iconSlot) {
2052
+ this._hasIcon = iconSlot.assignedElements({
2053
+ flatten: true
2054
+ }).length > 0;
2055
+ }
2056
+ if (trailingSlot) {
2057
+ this._hasTrailingIcon = trailingSlot.assignedElements({
2058
+ flatten: true
2059
+ }).length > 0;
2060
+ }
2061
+ }
2062
+ onAvatarSlotChange(e) {
2063
+ const slot = e.target;
2064
+ this._hasAvatar = slot.assignedElements({
2065
+ flatten: true
2066
+ }).length > 0;
2067
+ }
2068
+ onIconSlotChange(e) {
2069
+ const slot = e.target;
2070
+ this._hasIcon = slot.assignedElements({
2071
+ flatten: true
2072
+ }).length > 0;
2073
+ }
2074
+ onTrailingIconSlotChange(e) {
2075
+ const slot = e.target;
2076
+ this._hasTrailingIcon = slot.assignedElements({
2077
+ flatten: true
2078
+ }).length > 0;
2079
+ }
2080
+ _handleSelect(e) {
2081
+ if (this.disabled) {
2082
+ e.preventDefault();
2083
+ e.stopImmediatePropagation();
2084
+ return;
2085
+ }
2086
+ this.dispatchEvent(new CustomEvent('vialiq-select', {
2087
+ detail: {
2088
+ value: this.value,
2089
+ selected: !this.selected
2090
+ },
2091
+ bubbles: true,
2092
+ composed: true
2093
+ }));
2094
+ }
2095
+ _handleRemove(e) {
2096
+ if (this.disabled) {
2097
+ e.preventDefault();
2098
+ e.stopImmediatePropagation();
2099
+ return;
2100
+ }
2101
+ e.stopPropagation();
2102
+ this.dispatchEvent(new CustomEvent('vialiq-remove', {
2103
+ detail: {
2104
+ value: this.value
2105
+ },
2106
+ bubbles: true,
2107
+ composed: true
2108
+ }));
2109
+ }
2110
+ _handleKeyDown(e) {
2111
+ if (this.disabled) return;
2112
+ if (e.key === 'Enter' || e.key === ' ') {
2113
+ e.preventDefault();
2114
+ this._handleSelect(e);
2115
+ } else if (this.removable && (e.key === 'Backspace' || e.key === 'Delete')) {
2116
+ e.preventDefault();
2117
+ this._handleRemove(e);
2118
+ }
2119
+ }
2120
+ render() {
2121
+ const role = this._inGroup ? 'option' : 'button';
2122
+ const ariaSelected = this._inGroup ? this.selected ? 'true' : 'false' : null;
2123
+ const ariaPressed = !this._inGroup ? this.selected ? 'true' : 'false' : null;
2124
+ return html`
2125
+ <button
2126
+ part="chip"
2127
+ type="button"
2128
+ role=${role}
2129
+ aria-selected=${ariaSelected ?? undefined}
2130
+ aria-pressed=${ariaPressed ?? undefined}
2131
+ aria-disabled=${this.disabled ? 'true' : 'false'}
2132
+ tabindex=${this.disabled ? -1 : 0}
2133
+ @click=${this._handleSelect}
2134
+ @keydown=${this._handleKeyDown}
2135
+ >
2136
+ <slot name="avatar" class="chip-avatar" @slotchange=${this.onAvatarSlotChange} ?hidden=${!this._hasAvatar}></slot>
2137
+ <slot name="icon" class="chip-icon" @slotchange=${this.onIconSlotChange} ?hidden=${this._hasAvatar || !this._hasIcon}></slot>
2138
+
2139
+ ${this.selected ? html`<vi-icon part="check-icon" name="check" size="12"></vi-icon>` : ''}
2140
+
2141
+ <span part="label" class="chip-label">
2142
+ <slot></slot>
2143
+ </span>
2144
+
2145
+ <slot name="trailing-icon" @slotchange=${this.onTrailingIconSlotChange} ?hidden=${!this._hasTrailingIcon}></slot>
2146
+
2147
+ ${this.removable ? html`
2148
+ <vi-button
2149
+ part="remove-btn"
2150
+ variant="ghost"
2151
+ size="xs"
2152
+ icon-only
2153
+ aria-label=${this.removeAriaLabel || 'Remove'}
2154
+ @click=${this._handleRemove}
2155
+ tabindex=${this.disabled ? -1 : 0}
2156
+ >
2157
+ <vi-icon name="x" size="12" slot="icon"></vi-icon>
2158
+ </vi-button>
2159
+ ` : ''}
2160
+ </button>
2161
+ `;
2162
+ }
2163
+ }
2164
+ }
2165
+ }();
2166
+
2167
+ const groupStyles = ":host{display:block}:host([hidden]){display:none!important}[part=group]{display:flex;align-items:center}";
2168
+
2169
+ function applyDecs2203RFactory() {
2170
+ function createAddInitializerMethod(initializers, decoratorFinishedRef) {
2171
+ return function addInitializer(initializer) {
2172
+ assertNotFinished(decoratorFinishedRef, "addInitializer");
2173
+ assertCallable(initializer, "An initializer");
2174
+ initializers.push(initializer);
2175
+ };
2176
+ }
2177
+ function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
2178
+ var kindStr;
2179
+ switch(kind){
2180
+ case 1:
2181
+ kindStr = "accessor";
2182
+ break;
2183
+ case 2:
2184
+ kindStr = "method";
2185
+ break;
2186
+ case 3:
2187
+ kindStr = "getter";
2188
+ break;
2189
+ case 4:
2190
+ kindStr = "setter";
2191
+ break;
2192
+ default:
2193
+ kindStr = "field";
2194
+ }
2195
+ var ctx = {
2196
+ kind: kindStr,
2197
+ name: isPrivate ? "#" + name : name,
2198
+ static: isStatic,
2199
+ private: isPrivate,
2200
+ metadata: metadata
2201
+ };
2202
+ var decoratorFinishedRef = {
2203
+ v: false
2204
+ };
2205
+ ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
2206
+ var get, set;
2207
+ if (kind === 0) {
2208
+ if (isPrivate) {
2209
+ get = desc.get;
2210
+ set = desc.set;
2211
+ } else {
2212
+ get = function() {
2213
+ return this[name];
2214
+ };
2215
+ set = function(v) {
2216
+ this[name] = v;
2217
+ };
2218
+ }
2219
+ } else if (kind === 2) {
2220
+ get = function() {
2221
+ return desc.value;
2222
+ };
2223
+ } else {
2224
+ if (kind === 1 || kind === 3) {
2225
+ get = function() {
2226
+ return desc.get.call(this);
2227
+ };
2228
+ }
2229
+ if (kind === 1 || kind === 4) {
2230
+ set = function(v) {
2231
+ desc.set.call(this, v);
2232
+ };
2233
+ }
2234
+ }
2235
+ ctx.access = get && set ? {
2236
+ get: get,
2237
+ set: set
2238
+ } : get ? {
2239
+ get: get
2240
+ } : {
2241
+ set: set
2242
+ };
2243
+ try {
2244
+ return dec(value, ctx);
2245
+ } finally{
2246
+ decoratorFinishedRef.v = true;
2247
+ }
2248
+ }
2249
+ function assertNotFinished(decoratorFinishedRef, fnName) {
2250
+ if (decoratorFinishedRef.v) {
2251
+ throw new Error("attempted to call " + fnName + " after decoration was finished");
2252
+ }
2253
+ }
2254
+ function assertCallable(fn, hint) {
2255
+ if (typeof fn !== "function") {
2256
+ throw new TypeError(hint + " must be a function");
2257
+ }
2258
+ }
2259
+ function assertValidReturnValue(kind, value) {
2260
+ var type = typeof value;
2261
+ if (kind === 1) {
2262
+ if (type !== "object" || value === null) {
2263
+ throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
2264
+ }
2265
+ if (value.get !== undefined) {
2266
+ assertCallable(value.get, "accessor.get");
2267
+ }
2268
+ if (value.set !== undefined) {
2269
+ assertCallable(value.set, "accessor.set");
2270
+ }
2271
+ if (value.init !== undefined) {
2272
+ assertCallable(value.init, "accessor.init");
2273
+ }
2274
+ } else if (type !== "function") {
2275
+ var hint;
2276
+ if (kind === 0) {
2277
+ hint = "field";
2278
+ } else if (kind === 10) {
2279
+ hint = "class";
2280
+ } else {
2281
+ hint = "method";
2282
+ }
2283
+ throw new TypeError(hint + " decorators must return a function or void 0");
2284
+ }
2285
+ }
2286
+ function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
2287
+ var decs = decInfo[0];
2288
+ var desc, init, value;
2289
+ if (isPrivate) {
2290
+ if (kind === 0 || kind === 1) {
2291
+ desc = {
2292
+ get: decInfo[3],
2293
+ set: decInfo[4]
2294
+ };
2295
+ } else if (kind === 3) {
2296
+ desc = {
2297
+ get: decInfo[3]
2298
+ };
2299
+ } else if (kind === 4) {
2300
+ desc = {
2301
+ set: decInfo[3]
2302
+ };
2303
+ } else {
2304
+ desc = {
2305
+ value: decInfo[3]
2306
+ };
2307
+ }
2308
+ } else if (kind !== 0) {
2309
+ desc = Object.getOwnPropertyDescriptor(base, name);
2310
+ }
2311
+ if (kind === 1) {
2312
+ value = {
2313
+ get: desc.get,
2314
+ set: desc.set
2315
+ };
2316
+ } else if (kind === 2) {
2317
+ value = desc.value;
2318
+ } else if (kind === 3) {
2319
+ value = desc.get;
2320
+ } else if (kind === 4) {
2321
+ value = desc.set;
2322
+ }
2323
+ var newValue, get, set;
2324
+ if (typeof decs === "function") {
2325
+ newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
2326
+ if (newValue !== void 0) {
2327
+ assertValidReturnValue(kind, newValue);
2328
+ if (kind === 0) {
2329
+ init = newValue;
2330
+ } else if (kind === 1) {
2331
+ init = newValue.init;
2332
+ get = newValue.get || value.get;
2333
+ set = newValue.set || value.set;
2334
+ value = {
2335
+ get: get,
2336
+ set: set
2337
+ };
2338
+ } else {
2339
+ value = newValue;
2340
+ }
2341
+ }
2342
+ } else {
2343
+ for(var i = decs.length - 1; i >= 0; i--){
2344
+ var dec = decs[i];
2345
+ newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
2346
+ if (newValue !== void 0) {
2347
+ assertValidReturnValue(kind, newValue);
2348
+ var newInit;
2349
+ if (kind === 0) {
2350
+ newInit = newValue;
2351
+ } else if (kind === 1) {
2352
+ newInit = newValue.init;
2353
+ get = newValue.get || value.get;
2354
+ set = newValue.set || value.set;
2355
+ value = {
2356
+ get: get,
2357
+ set: set
2358
+ };
2359
+ } else {
2360
+ value = newValue;
2361
+ }
2362
+ if (newInit !== void 0) {
2363
+ if (init === void 0) {
2364
+ init = newInit;
2365
+ } else if (typeof init === "function") {
2366
+ init = [
2367
+ init,
2368
+ newInit
2369
+ ];
2370
+ } else {
2371
+ init.push(newInit);
2372
+ }
2373
+ }
2374
+ }
2375
+ }
2376
+ }
2377
+ if (kind === 0 || kind === 1) {
2378
+ if (init === void 0) {
2379
+ init = function(instance, init) {
2380
+ return init;
2381
+ };
2382
+ } else if (typeof init !== "function") {
2383
+ var ownInitializers = init;
2384
+ init = function(instance, init) {
2385
+ var value = init;
2386
+ for(var i = 0; i < ownInitializers.length; i++){
2387
+ value = ownInitializers[i].call(instance, value);
2388
+ }
2389
+ return value;
2390
+ };
2391
+ } else {
2392
+ var originalInitializer = init;
2393
+ init = function(instance, init) {
2394
+ return originalInitializer.call(instance, init);
2395
+ };
2396
+ }
2397
+ ret.push(init);
2398
+ }
2399
+ if (kind !== 0) {
2400
+ if (kind === 1) {
2401
+ desc.get = value.get;
2402
+ desc.set = value.set;
2403
+ } else if (kind === 2) {
2404
+ desc.value = value;
2405
+ } else if (kind === 3) {
2406
+ desc.get = value;
2407
+ } else if (kind === 4) {
2408
+ desc.set = value;
2409
+ }
2410
+ if (isPrivate) {
2411
+ if (kind === 1) {
2412
+ ret.push(function(instance, args) {
2413
+ return value.get.call(instance, args);
2414
+ });
2415
+ ret.push(function(instance, args) {
2416
+ return value.set.call(instance, args);
2417
+ });
2418
+ } else if (kind === 2) {
2419
+ ret.push(value);
2420
+ } else {
2421
+ ret.push(function(instance, args) {
2422
+ return value.call(instance, args);
2423
+ });
2424
+ }
2425
+ } else {
2426
+ Object.defineProperty(base, name, desc);
2427
+ }
2428
+ }
2429
+ }
2430
+ function applyMemberDecs(Class, decInfos, metadata) {
2431
+ var ret = [];
2432
+ var protoInitializers;
2433
+ var staticInitializers;
2434
+ var existingProtoNonFields = new Map();
2435
+ var existingStaticNonFields = new Map();
2436
+ for(var i = 0; i < decInfos.length; i++){
2437
+ var decInfo = decInfos[i];
2438
+ if (!Array.isArray(decInfo)) continue;
2439
+ var kind = decInfo[1];
2440
+ var name = decInfo[2];
2441
+ var isPrivate = decInfo.length > 3;
2442
+ var isStatic = kind >= 5;
2443
+ var base;
2444
+ var initializers;
2445
+ if (isStatic) {
2446
+ base = Class;
2447
+ kind = kind - 5;
2448
+ staticInitializers = staticInitializers || [];
2449
+ initializers = staticInitializers;
2450
+ } else {
2451
+ base = Class.prototype;
2452
+ protoInitializers = protoInitializers || [];
2453
+ initializers = protoInitializers;
2454
+ }
2455
+ if (kind !== 0 && !isPrivate) {
2456
+ var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
2457
+ var existingKind = existingNonFields.get(name) || 0;
2458
+ if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
2459
+ throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
2460
+ } else if (!existingKind && kind > 2) {
2461
+ existingNonFields.set(name, kind);
2462
+ } else {
2463
+ existingNonFields.set(name, true);
2464
+ }
2465
+ }
2466
+ applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
2467
+ }
2468
+ pushInitializers(ret, protoInitializers);
2469
+ pushInitializers(ret, staticInitializers);
2470
+ return ret;
2471
+ }
2472
+ function pushInitializers(ret, initializers) {
2473
+ if (initializers) {
2474
+ ret.push(function(instance) {
2475
+ for(var i = 0; i < initializers.length; i++){
2476
+ initializers[i].call(instance);
2477
+ }
2478
+ return instance;
2479
+ });
2480
+ }
2481
+ }
2482
+ function applyClassDecs(targetClass, classDecs, metadata) {
2483
+ if (classDecs.length > 0) {
2484
+ var initializers = [];
2485
+ var newClass = targetClass;
2486
+ var name = targetClass.name;
2487
+ for(var i = classDecs.length - 1; i >= 0; i--){
2488
+ var decoratorFinishedRef = {
2489
+ v: false
2490
+ };
2491
+ try {
2492
+ var nextNewClass = classDecs[i](newClass, {
2493
+ kind: "class",
2494
+ name: name,
2495
+ addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
2496
+ metadata
2497
+ });
2498
+ } finally{
2499
+ decoratorFinishedRef.v = true;
2500
+ }
2501
+ if (nextNewClass !== undefined) {
2502
+ assertValidReturnValue(10, nextNewClass);
2503
+ newClass = nextNewClass;
2504
+ }
2505
+ }
2506
+ return [
2507
+ defineMetadata(newClass, metadata),
2508
+ function() {
2509
+ for(var i = 0; i < initializers.length; i++){
2510
+ initializers[i].call(newClass);
2511
+ }
2512
+ }
2513
+ ];
2514
+ }
2515
+ }
2516
+ function defineMetadata(Class, metadata) {
2517
+ return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
2518
+ configurable: true,
2519
+ enumerable: true,
2520
+ value: metadata
2521
+ });
2522
+ }
2523
+ return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
2524
+ if (parentClass !== void 0) {
2525
+ var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
2526
+ }
2527
+ var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
2528
+ var e = applyMemberDecs(targetClass, memberDecs, metadata);
2529
+ if (!classDecs.length) defineMetadata(targetClass, metadata);
2530
+ return {
2531
+ e: e,
2532
+ get c () {
2533
+ return applyClassDecs(targetClass, classDecs, metadata);
2534
+ }
2535
+ };
2536
+ };
2537
+ }
2538
+ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
2539
+ return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
2540
+ }
2541
+ function _identity(x) {
2542
+ return x;
2543
+ }
2544
+ var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, /** Currently selected chip values. */ _init_value, /** Allow multiple selections. */ _init_multi, /** Form field name. */ _init_name, /** At least one chip must be selected. */ _init_required, /** Disable all chips. */ _init_disabled, /** Chips wrap to next line. */ _init_wrap, /** Gap between chips. */ _init_gap, // ValidityMixin requirements
2545
+ _init_status, _init_validityMessage, _init__chips, _initProto;
2546
+ let _ViChipGroup;
2547
+ _dec = customElement('vi-chip-group'), _dec1 = property({
2548
+ type: Array
2549
+ }), _dec2 = property({
2550
+ type: Boolean
2551
+ }), _dec3 = property({
2552
+ type: String
2553
+ }), _dec4 = property({
2554
+ type: Boolean,
2555
+ reflect: true
2556
+ }), _dec5 = property({
2557
+ type: Boolean,
2558
+ reflect: true
2559
+ }), _dec6 = property({
2560
+ type: Boolean
2561
+ }), _dec7 = property({
2562
+ type: String
2563
+ }), _dec8 = property({
2564
+ reflect: true
2565
+ }), _dec9 = property(), _dec10 = queryAssignedElements({
2566
+ selector: 'vi-chip'
2567
+ });
2568
+ new class extends _identity {
2569
+ constructor(){
2570
+ super(_ViChipGroup), _initClass();
2571
+ }
2572
+ static{
2573
+ class ViChipGroup extends (_ValidityMixin = ValidityMixin(ViElement)) {
2574
+ static{
2575
+ ({ e: [_init_value, _init_multi, _init_name, _init_required, _init_disabled, _init_wrap, _init_gap, _init_status, _init_validityMessage, _init__chips, _initProto], c: [_ViChipGroup, _initClass] } = _apply_decs_2203_r(this, [
2576
+ [
2577
+ _dec1,
2578
+ 1,
2579
+ "value"
2580
+ ],
2581
+ [
2582
+ _dec2,
2583
+ 1,
2584
+ "multi"
2585
+ ],
2586
+ [
2587
+ _dec3,
2588
+ 1,
2589
+ "name"
2590
+ ],
2591
+ [
2592
+ _dec4,
2593
+ 1,
2594
+ "required"
2595
+ ],
2596
+ [
2597
+ _dec5,
2598
+ 1,
2599
+ "disabled"
2600
+ ],
2601
+ [
2602
+ _dec6,
2603
+ 1,
2604
+ "wrap"
2605
+ ],
2606
+ [
2607
+ _dec7,
2608
+ 1,
2609
+ "gap"
2610
+ ],
2611
+ [
2612
+ _dec8,
2613
+ 1,
2614
+ "status"
2615
+ ],
2616
+ [
2617
+ _dec9,
2618
+ 1,
2619
+ "validityMessage"
2620
+ ],
2621
+ [
2622
+ _dec10,
2623
+ 1,
2624
+ "_chips"
2625
+ ]
2626
+ ], [
2627
+ _dec
2628
+ ], _ValidityMixin));
2629
+ }
2630
+ static styles = css`${unsafeCSS(groupStyles)}`;
2631
+ #___private_value_1 = (_initProto(this), _init_value(this, []));
2632
+ get value() {
2633
+ return this.#___private_value_1;
2634
+ }
2635
+ set value(_v) {
2636
+ this.#___private_value_1 = _v;
2637
+ }
2638
+ #___private_multi_2 = _init_multi(this, true);
2639
+ get multi() {
2640
+ return this.#___private_multi_2;
2641
+ }
2642
+ set multi(_v) {
2643
+ this.#___private_multi_2 = _v;
2644
+ }
2645
+ #___private_name_3 = _init_name(this, '');
2646
+ get name() {
2647
+ return this.#___private_name_3;
2648
+ }
2649
+ set name(_v) {
2650
+ this.#___private_name_3 = _v;
2651
+ }
2652
+ #___private_required_4 = _init_required(this, false);
2653
+ get required() {
2654
+ return this.#___private_required_4;
2655
+ }
2656
+ set required(_v) {
2657
+ this.#___private_required_4 = _v;
2658
+ }
2659
+ #___private_disabled_5 = _init_disabled(this, false);
2660
+ get disabled() {
2661
+ return this.#___private_disabled_5;
2662
+ }
2663
+ set disabled(_v) {
2664
+ this.#___private_disabled_5 = _v;
2665
+ }
2666
+ #___private_wrap_6 = _init_wrap(this, true);
2667
+ get wrap() {
2668
+ return this.#___private_wrap_6;
2669
+ }
2670
+ set wrap(_v) {
2671
+ this.#___private_wrap_6 = _v;
2672
+ }
2673
+ #___private_gap_7 = _init_gap(this, '8px');
2674
+ get gap() {
2675
+ return this.#___private_gap_7;
2676
+ }
2677
+ set gap(_v) {
2678
+ this.#___private_gap_7 = _v;
2679
+ }
2680
+ #___private_status_8 = _init_status(this, 'default');
2681
+ get status() {
2682
+ return this.#___private_status_8;
2683
+ }
2684
+ set status(_v) {
2685
+ this.#___private_status_8 = _v;
2686
+ }
2687
+ #___private_validityMessage_9 = _init_validityMessage(this, '');
2688
+ get validityMessage() {
2689
+ return this.#___private_validityMessage_9;
2690
+ }
2691
+ set validityMessage(_v) {
2692
+ this.#___private_validityMessage_9 = _v;
2693
+ }
2694
+ #___private__chips_10 = _init__chips(this);
2695
+ get _chips() {
2696
+ return this.#___private__chips_10;
2697
+ }
2698
+ set _chips(_v) {
2699
+ this.#___private__chips_10 = _v;
2700
+ }
2701
+ _mutationObserver;
2702
+ constructor(){
2703
+ super();
2704
+ this._mutationObserver = new MutationObserver(()=>this._syncChips());
2705
+ this.addEventListener('vialiq-select', this._handleChipSelect);
2706
+ }
2707
+ connectedCallback() {
2708
+ super.connectedCallback();
2709
+ this._syncInternals();
2710
+ }
2711
+ disconnectedCallback() {
2712
+ super.disconnectedCallback();
2713
+ this._mutationObserver.disconnect();
2714
+ }
2715
+ updated(changed) {
2716
+ super.updated(changed);
2717
+ if (changed.has('value')) {
2718
+ this._syncInternals();
2719
+ this._syncChips();
2720
+ }
2721
+ if (changed.has('disabled')) {
2722
+ this._syncChips();
2723
+ }
2724
+ }
2725
+ formResetCallback() {
2726
+ this.value = [];
2727
+ this.status = 'default';
2728
+ this.validityMessage = '';
2729
+ }
2730
+ formDisabledCallback(disabled) {
2731
+ this.disabled = disabled;
2732
+ }
2733
+ _testValidity() {
2734
+ if (this.required && this.value.length === 0) {
2735
+ return {
2736
+ valueMissing: true
2737
+ };
2738
+ }
2739
+ return {};
2740
+ }
2741
+ /** Selects all available child chips (if multi is true) */ selectAll() {
2742
+ if (!this.multi) return;
2743
+ this.value = this._chips.map((chip)=>chip.value).filter((val)=>val !== undefined);
2744
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2745
+ detail: {
2746
+ value: this.value
2747
+ },
2748
+ bubbles: true,
2749
+ composed: true
2750
+ }));
2751
+ }
2752
+ /** Deselects all child chips */ clearAll() {
2753
+ this.value = [];
2754
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2755
+ detail: {
2756
+ value: this.value
2757
+ },
2758
+ bubbles: true,
2759
+ composed: true
2760
+ }));
2761
+ }
2762
+ _syncInternals() {
2763
+ const formData = new FormData();
2764
+ this.value.forEach((val)=>formData.append(this.name, val));
2765
+ this._internals.setFormValue(formData);
2766
+ }
2767
+ _syncChips() {
2768
+ if (!this._chips) return;
2769
+ let hasFocusable = false;
2770
+ this._chips.forEach((chip)=>{
2771
+ chip.selected = this.value.includes(chip.value);
2772
+ if (this.disabled) {
2773
+ chip.disabled = true;
2774
+ } else {
2775
+ chip.disabled = chip.hasAttribute('disabled');
2776
+ }
2777
+ // Roving tabindex: Only the first selected chip (or the first chip if none selected) is focusable
2778
+ if (!chip.disabled && (chip.selected || !hasFocusable && this.value.length === 0)) {
2779
+ chip.tabIndex = 0;
2780
+ hasFocusable = true;
2781
+ } else {
2782
+ chip.tabIndex = -1;
2783
+ }
2784
+ });
2785
+ // If no chip was focusable yet (e.g. none selected), make the first non-disabled chip focusable
2786
+ if (!hasFocusable && this._chips.length > 0) {
2787
+ const firstEnabled = this._chips.find((c)=>!c.disabled);
2788
+ if (firstEnabled) firstEnabled.tabIndex = 0;
2789
+ }
2790
+ }
2791
+ _handleSlotChange() {
2792
+ this._syncChips();
2793
+ // Disconnect old, connect new observers for child mutations
2794
+ this._mutationObserver.disconnect();
2795
+ this._chips.forEach((chip)=>{
2796
+ this._mutationObserver.observe(chip, {
2797
+ attributes: true,
2798
+ attributeFilter: [
2799
+ 'value',
2800
+ 'disabled'
2801
+ ]
2802
+ });
2803
+ });
2804
+ }
2805
+ _handleChipSelect(e) {
2806
+ e.stopPropagation(); // Stop the inner event
2807
+ const { value, selected } = e.detail;
2808
+ let newValue = [
2809
+ ...this.value
2810
+ ];
2811
+ if (this.multi) {
2812
+ if (selected) {
2813
+ if (!newValue.includes(value)) newValue.push(value);
2814
+ } else {
2815
+ newValue = newValue.filter((v)=>v !== value);
2816
+ }
2817
+ } else {
2818
+ if (selected) {
2819
+ newValue = [
2820
+ value
2821
+ ];
2822
+ } else {
2823
+ // In single select, clicking a selected chip could deselect it depending on requirements.
2824
+ // Assuming it toggles.
2825
+ newValue = [];
2826
+ }
2827
+ }
2828
+ this.value = newValue;
2829
+ this.dispatchEvent(new CustomEvent('vialiq-change', {
2830
+ detail: {
2831
+ value: this.value
2832
+ },
2833
+ bubbles: true,
2834
+ composed: true
2835
+ }));
2836
+ }
2837
+ _handleKeyDown(e) {
2838
+ const focusableChips = this._chips.filter((c)=>!c.disabled);
2839
+ if (focusableChips.length === 0) return;
2840
+ const currentIndex = focusableChips.findIndex((c)=>c === document.activeElement || c.shadowRoot?.activeElement);
2841
+ if (currentIndex === -1) return;
2842
+ let nextIndex = currentIndex;
2843
+ switch(e.key){
2844
+ case 'ArrowRight':
2845
+ case 'ArrowDown':
2846
+ e.preventDefault();
2847
+ nextIndex = (currentIndex + 1) % focusableChips.length;
2848
+ break;
2849
+ case 'ArrowLeft':
2850
+ case 'ArrowUp':
2851
+ e.preventDefault();
2852
+ nextIndex = (currentIndex - 1 + focusableChips.length) % focusableChips.length;
2853
+ break;
2854
+ case 'Home':
2855
+ e.preventDefault();
2856
+ nextIndex = 0;
2857
+ break;
2858
+ case 'End':
2859
+ e.preventDefault();
2860
+ nextIndex = focusableChips.length - 1;
2861
+ break;
2862
+ default:
2863
+ return; // Let other keys do their thing
2864
+ }
2865
+ this._chips.forEach((c)=>c.tabIndex = -1);
2866
+ const nextChip = focusableChips[nextIndex];
2867
+ nextChip.tabIndex = 0;
2868
+ nextChip.focus();
2869
+ }
2870
+ render() {
2871
+ const style = `gap: ${this.gap}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'};`;
2872
+ return html`
2873
+ <div
2874
+ part="group"
2875
+ role="listbox"
2876
+ aria-multiselectable=${this.multi ? 'true' : 'false'}
2877
+ aria-required=${this.required ? 'true' : 'false'}
2878
+ aria-disabled=${this.disabled ? 'true' : 'false'}
2879
+ style=${style}
2880
+ @keydown=${this._handleKeyDown}
2881
+ >
2882
+ <slot @slotchange=${this._handleSlotChange}></slot>
2883
+ </div>
2884
+ `;
2885
+ }
2886
+ }
2887
+ }
2888
+ }();
2889
+
2890
+ export { _ViAlert as ViAlert, _ViBadge as ViBadge, _ViChip as ViChip, _ViChipGroup as ViChipGroup, ViElement, registerIcons };