tuix-webcomponents 0.0.28 → 0.0.30

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 (3) hide show
  1. package/README.md +13 -16
  2. package/custom-elements.json +862 -862
  3. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -427,95 +427,270 @@
427
427
  },
428
428
  {
429
429
  "kind": "javascript-module",
430
- "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
430
+ "path": "src/tuix-button/TuixBaseButton.ts",
431
+ "declarations": [
432
+ {
433
+ "kind": "class",
434
+ "description": "",
435
+ "name": "TuixBaseButton",
436
+ "members": [
437
+ {
438
+ "kind": "field",
439
+ "name": "variant",
440
+ "attribute": "variant",
441
+ "reflects": true
442
+ },
443
+ {
444
+ "kind": "field",
445
+ "name": "disabled",
446
+ "type": {
447
+ "text": "boolean"
448
+ },
449
+ "default": "false",
450
+ "attribute": "disabled",
451
+ "reflects": true
452
+ },
453
+ {
454
+ "kind": "field",
455
+ "name": "dark",
456
+ "type": {
457
+ "text": "boolean"
458
+ },
459
+ "default": "false",
460
+ "attribute": "dark",
461
+ "reflects": true
462
+ },
463
+ {
464
+ "kind": "field",
465
+ "name": "iconColor",
466
+ "type": {
467
+ "text": "string"
468
+ },
469
+ "privacy": "protected",
470
+ "default": "''"
471
+ },
472
+ {
473
+ "kind": "method",
474
+ "name": "_getTextColor",
475
+ "privacy": "protected"
476
+ },
477
+ {
478
+ "kind": "method",
479
+ "name": "_updateIconColor",
480
+ "privacy": "protected",
481
+ "return": {
482
+ "type": {
483
+ "text": "void"
484
+ }
485
+ }
486
+ },
487
+ {
488
+ "kind": "method",
489
+ "name": "_handleClick",
490
+ "privacy": "protected"
491
+ },
492
+ {
493
+ "kind": "method",
494
+ "name": "_iconTemplate",
495
+ "privacy": "protected",
496
+ "return": {
497
+ "type": {
498
+ "text": "TemplateResult"
499
+ }
500
+ },
501
+ "parameters": [
502
+ {
503
+ "name": "iconName",
504
+ "type": {
505
+ "text": "IconName"
506
+ }
507
+ },
508
+ {
509
+ "name": "iconSize",
510
+ "type": {
511
+ "text": "IconSizeVariant"
512
+ }
513
+ }
514
+ ]
515
+ },
516
+ {
517
+ "kind": "method",
518
+ "name": "_buttonContent",
519
+ "privacy": "protected",
520
+ "return": {
521
+ "type": {
522
+ "text": "TemplateResult"
523
+ }
524
+ }
525
+ }
526
+ ],
527
+ "events": [
528
+ {
529
+ "name": "customClick",
530
+ "type": {
531
+ "text": "CustomEvent"
532
+ }
533
+ }
534
+ ],
535
+ "attributes": [
536
+ {
537
+ "name": "variant",
538
+ "fieldName": "variant"
539
+ },
540
+ {
541
+ "name": "disabled",
542
+ "type": {
543
+ "text": "boolean"
544
+ },
545
+ "default": "false",
546
+ "fieldName": "disabled"
547
+ },
548
+ {
549
+ "name": "dark",
550
+ "type": {
551
+ "text": "boolean"
552
+ },
553
+ "default": "false",
554
+ "fieldName": "dark"
555
+ }
556
+ ],
557
+ "superclass": {
558
+ "name": "LitElement",
559
+ "package": "lit"
560
+ },
561
+ "customElement": true
562
+ }
563
+ ],
564
+ "exports": [
565
+ {
566
+ "kind": "js",
567
+ "name": "TuixBaseButton",
568
+ "declaration": {
569
+ "name": "TuixBaseButton",
570
+ "module": "src/tuix-button/TuixBaseButton.ts"
571
+ }
572
+ }
573
+ ]
574
+ },
575
+ {
576
+ "kind": "javascript-module",
577
+ "path": "src/tuix-button/TuixButton.styles.ts",
431
578
  "declarations": [
432
579
  {
433
580
  "kind": "variable",
434
- "name": "dropdownHostStyles",
435
- "default": "css`\n ${hostStyles}\n :host {\n --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n }\n\n :host .t-input-dropdown {\n --t-field-font-weight: 300;\n --t-field-font-size: 1rem;\n --t-field-padding-x: 1rem;\n --t-field-title-left-position: 1rem;\n }\n\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.938rem;\n --t-field-line-height: 1.125rem;\n }\n }\n\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n }\n }\n\n :host([dark]) {\n --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n }\n`"
581
+ "name": "hostButtonStyles",
582
+ "default": "css`\n :host {\n --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n }\n :host([dark]) {\n --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n }\n`"
436
583
  },
437
584
  {
438
585
  "kind": "variable",
439
- "name": "dropdownMainContainerStyles",
440
- "default": "css`\n .t-dropdown-full-container {\n position: relative;\n font-family: 'Rubik', sans-serif;\n }\n .t-dropdown-container .t-input-dropdown {\n --t-field-input-cursor: pointer;\n }\n`"
586
+ "name": "buttonSizeStyles",
587
+ "default": "css`\n ${unsafeCSS(`\n ${slottedClassName(TextSize.Button)} {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.938rem;\n font-weight: 400;\n line-height: 1.125rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n }\n`)}\n`"
441
588
  },
442
589
  {
443
590
  "kind": "variable",
444
- "name": "dropdownOptionStyles",
445
- "default": "css`\n .t-options-container {\n width: 100%;\n position: absolute;\n top: calc(100% + 2px);\n left: 0;\n border: none;\n border-radius: 0 0 5px 5px;\n background-color: var(--t-field-color-option);\n visibility: collapse;\n overflow-y: auto;\n max-height: 250px;\n color: var(--t-field-color-text);\n box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n z-index: 9999;\n }\n .t-options-container::-webkit-scrollbar {\n width: 0.75rem;\n }\n .t-options-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n .t-options-container::-webkit-scrollbar-thumb {\n background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n border-radius: 0.25rem;\n border: 0.188rem solid transparent;\n background-clip: content-box;\n }\n .t-options-container.show {\n visibility: visible;\n }\n .t-options-container.show.t-with-description {\n top: calc(100% + 2px - 1.5rem);\n }\n @media only screen and (max-height: 500px) {\n .t-options-container {\n max-height: 50vh;\n }\n }\n .t-dropdown-option {\n padding: var(--t-field-padding-y) 1rem;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 300;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-dropdown-option.t-option-hover {\n background-color: var(--t-field-color-form);\n }\n .t-dropdown-option.t-option-selected {\n color: var(--t-field-color-main);\n }\n .t-dropdown-option.t-option-filtered {\n display: none;\n }\n .t-dropdown-option:focus {\n outline: none;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-dropdown-option {\n font-size: 0.938rem;\n line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-dropdown-option {\n font-size: 0.813rem;\n line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`"
591
+ "name": "buttonColorStyles",
592
+ "default": "css`\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n background-color: var(--t-button-primary-color);\n outline: none;\n color: var(--t-button-text-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n background-color: var(--t-button-hover-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n background-color: var(--t-button-hover-primary-color);\n outline: 2px solid var(--t-button-accent-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n background-color: var(--t-button-active-primary-color);\n outline: none;\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n background-color: var(--t-button-secondary-color);\n outline: 1px solid var(--t-button-hover-primary-color);\n color: var(--t-button-text-secondary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n background-color: var(--t-button-hover-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n background-color: var(--t-button-hover-secondary-color);\n outline: 2px solid var(--t-button-accent-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n background-color: var(--t-button-active-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n outline: 1px solid var(--t-button-text-muted-color);\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n background-color: var(--t-button-disabled-bg-color);\n color: var(--t-button-text-muted-color);\n cursor: not-allowed;\n }\n`"
446
593
  }
447
594
  ],
448
595
  "exports": [
449
596
  {
450
597
  "kind": "js",
451
- "name": "dropdownHostStyles",
598
+ "name": "hostButtonStyles",
452
599
  "declaration": {
453
- "name": "dropdownHostStyles",
454
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
600
+ "name": "hostButtonStyles",
601
+ "module": "src/tuix-button/TuixButton.styles.ts"
455
602
  }
456
603
  },
457
604
  {
458
605
  "kind": "js",
459
- "name": "dropdownMainContainerStyles",
606
+ "name": "buttonSizeStyles",
460
607
  "declaration": {
461
- "name": "dropdownMainContainerStyles",
462
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
608
+ "name": "buttonSizeStyles",
609
+ "module": "src/tuix-button/TuixButton.styles.ts"
463
610
  }
464
611
  },
465
612
  {
466
613
  "kind": "js",
467
- "name": "dropdownOptionStyles",
614
+ "name": "buttonColorStyles",
468
615
  "declaration": {
469
- "name": "dropdownOptionStyles",
470
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
616
+ "name": "buttonColorStyles",
617
+ "module": "src/tuix-button/TuixButton.styles.ts"
471
618
  }
472
619
  }
473
620
  ]
474
621
  },
475
622
  {
476
623
  "kind": "javascript-module",
477
- "path": "src/tuix-dropdown/TuixDropdown.ts",
624
+ "path": "src/tuix-button/TuixButton.ts",
478
625
  "declarations": [
479
626
  {
480
627
  "kind": "class",
481
628
  "description": "",
482
- "name": "TuixDropdown",
629
+ "name": "TuixButton",
483
630
  "members": [
484
631
  {
485
632
  "kind": "field",
486
- "name": "value",
633
+ "name": "full",
487
634
  "type": {
488
- "text": "TuixDropdownOption | undefined"
635
+ "text": "boolean"
489
636
  },
490
- "default": "undefined",
491
- "attribute": "value"
637
+ "default": "false",
638
+ "attribute": "full",
639
+ "reflects": true
492
640
  },
493
641
  {
494
642
  "kind": "field",
495
- "name": "options",
643
+ "name": "iconRight",
496
644
  "type": {
497
- "text": "TuixDropdownOption[]"
645
+ "text": "IconName | undefined"
498
646
  },
499
- "default": "[]",
500
- "attribute": "options"
647
+ "attribute": "iconRight"
501
648
  },
502
649
  {
503
650
  "kind": "field",
504
- "name": "placeholder",
651
+ "name": "iconLeft",
505
652
  "type": {
506
- "text": "string"
653
+ "text": "IconName | undefined"
507
654
  },
508
- "default": "''",
509
- "attribute": "placeholder"
655
+ "attribute": "iconLeft"
510
656
  },
511
657
  {
512
- "kind": "field",
513
- "name": "title",
514
- "type": {
515
- "text": "string"
658
+ "kind": "method",
659
+ "name": "_updateIconColor",
660
+ "privacy": "protected",
661
+ "return": {
662
+ "type": {
663
+ "text": "void"
664
+ }
516
665
  },
517
- "default": "''",
518
- "attribute": "title"
666
+ "inheritedFrom": {
667
+ "name": "TuixBaseButton",
668
+ "module": "src/tuix-button/TuixBaseButton.ts"
669
+ }
670
+ },
671
+ {
672
+ "kind": "method",
673
+ "name": "_buttonContent",
674
+ "privacy": "protected",
675
+ "return": {
676
+ "type": {
677
+ "text": "TemplateResult"
678
+ }
679
+ },
680
+ "inheritedFrom": {
681
+ "name": "TuixBaseButton",
682
+ "module": "src/tuix-button/TuixBaseButton.ts"
683
+ }
684
+ },
685
+ {
686
+ "kind": "field",
687
+ "name": "variant",
688
+ "attribute": "variant",
689
+ "reflects": true,
690
+ "inheritedFrom": {
691
+ "name": "TuixBaseButton",
692
+ "module": "src/tuix-button/TuixBaseButton.ts"
693
+ }
519
694
  },
520
695
  {
521
696
  "kind": "field",
@@ -525,7 +700,11 @@
525
700
  },
526
701
  "default": "false",
527
702
  "attribute": "disabled",
528
- "reflects": true
703
+ "reflects": true,
704
+ "inheritedFrom": {
705
+ "name": "TuixBaseButton",
706
+ "module": "src/tuix-button/TuixBaseButton.ts"
707
+ }
529
708
  },
530
709
  {
531
710
  "kind": "field",
@@ -535,412 +714,102 @@
535
714
  },
536
715
  "default": "false",
537
716
  "attribute": "dark",
538
- "reflects": true
539
- },
540
- {
541
- "kind": "field",
542
- "name": "description",
543
- "type": {
544
- "text": "string | undefined"
545
- },
546
- "attribute": "description"
547
- },
548
- {
549
- "kind": "field",
550
- "name": "descriptionType",
551
- "attribute": "descriptionType"
552
- },
553
- {
554
- "kind": "field",
555
- "name": "type",
556
- "attribute": "type"
717
+ "reflects": true,
718
+ "inheritedFrom": {
719
+ "name": "TuixBaseButton",
720
+ "module": "src/tuix-button/TuixBaseButton.ts"
721
+ }
557
722
  },
558
723
  {
559
724
  "kind": "field",
560
- "name": "_value",
725
+ "name": "iconColor",
561
726
  "type": {
562
727
  "text": "string"
563
728
  },
564
- "privacy": "private",
565
- "default": "''"
566
- },
567
- {
568
- "kind": "field",
569
- "name": "_isOptionsVisible",
570
- "type": {
571
- "text": "boolean"
572
- },
573
- "privacy": "private",
574
- "default": "false"
575
- },
576
- {
577
- "kind": "field",
578
- "name": "_searchingOption",
579
- "type": {
580
- "text": "boolean"
581
- },
582
- "privacy": "private",
583
- "default": "false"
584
- },
585
- {
586
- "kind": "field",
587
- "name": "_extendedOptions",
588
- "type": {
589
- "text": "TuixDropdownExtendedOption[]"
590
- },
591
- "default": "[]"
592
- },
593
- {
594
- "kind": "field",
595
- "name": "_optionsContainer",
596
- "type": {
597
- "text": "HTMLElement | undefined"
598
- },
599
- "privacy": "private"
600
- },
601
- {
602
- "kind": "field",
603
- "name": "_inputDropdown",
604
- "type": {
605
- "text": "HTMLElement | undefined"
606
- },
607
- "privacy": "private"
608
- },
609
- {
610
- "kind": "field",
611
- "name": "_previousSelectedOption",
612
- "type": {
613
- "text": "HTMLElement | null"
614
- },
615
- "privacy": "private",
616
- "default": "null"
617
- },
618
- {
619
- "kind": "field",
620
- "name": "_previousFocusedOption",
621
- "type": {
622
- "text": "HTMLElement | null"
623
- },
624
- "privacy": "private",
625
- "default": "null"
626
- },
627
- {
628
- "kind": "method",
629
- "name": "_onEnterPress",
630
- "privacy": "private",
631
- "parameters": [
632
- {
633
- "name": "event",
634
- "type": {
635
- "text": "KeyboardEvent"
636
- }
637
- }
638
- ]
639
- },
640
- {
641
- "kind": "method",
642
- "name": "_onKeyDownOption",
643
- "privacy": "private",
644
- "parameters": [
645
- {
646
- "name": "event",
647
- "type": {
648
- "text": "KeyboardEvent"
649
- }
650
- }
651
- ]
652
- },
653
- {
654
- "kind": "method",
655
- "name": "_onKeyPressOption",
656
- "privacy": "private",
657
- "parameters": [
658
- {
659
- "name": "event",
660
- "type": {
661
- "text": "KeyboardEvent"
662
- }
663
- }
664
- ]
665
- },
666
- {
667
- "kind": "method",
668
- "name": "_onMouseOverOption",
669
- "privacy": "private",
670
- "parameters": [
671
- {
672
- "name": "event",
673
- "type": {
674
- "text": "MouseEvent"
675
- }
676
- }
677
- ]
678
- },
679
- {
680
- "kind": "method",
681
- "name": "_onClickOption",
682
- "privacy": "private",
683
- "parameters": [
684
- {
685
- "name": "event",
686
- "type": {
687
- "text": "MouseEvent | KeyboardEvent"
688
- }
689
- }
690
- ]
691
- },
692
- {
693
- "kind": "method",
694
- "name": "_onInputSingle",
695
729
  "privacy": "protected",
696
- "parameters": [
697
- {
698
- "name": "e",
699
- "type": {
700
- "text": "CustomEvent"
701
- }
702
- }
703
- ]
730
+ "default": "''",
731
+ "inheritedFrom": {
732
+ "name": "TuixBaseButton",
733
+ "module": "src/tuix-button/TuixBaseButton.ts"
734
+ }
704
735
  },
705
736
  {
706
737
  "kind": "method",
707
- "name": "_handleSelectEvent",
738
+ "name": "_getTextColor",
708
739
  "privacy": "protected",
709
- "parameters": [
710
- {
711
- "name": "event",
712
- "type": {
713
- "text": "MouseEvent | KeyboardEvent"
714
- }
715
- }
716
- ]
717
- },
718
- {
719
- "kind": "method",
720
- "name": "_handleBlur",
721
- "privacy": "private"
722
- },
723
- {
724
- "kind": "method",
725
- "name": "_getOptionName",
726
- "privacy": "private",
727
- "return": {
728
- "type": {
729
- "text": "string"
730
- }
731
- },
732
- "parameters": [
733
- {
734
- "name": "option",
735
- "type": {
736
- "text": "TuixDropdownOption"
737
- }
738
- }
739
- ]
740
+ "inheritedFrom": {
741
+ "name": "TuixBaseButton",
742
+ "module": "src/tuix-button/TuixBaseButton.ts"
743
+ }
740
744
  },
741
745
  {
742
746
  "kind": "method",
743
- "name": "_getOptionValue",
744
- "privacy": "private",
745
- "return": {
746
- "type": {
747
- "text": "TuixDropdownPlainOption"
748
- }
749
- },
750
- "parameters": [
751
- {
752
- "name": "option",
753
- "type": {
754
- "text": "TuixDropdownOption"
755
- }
756
- }
757
- ]
747
+ "name": "_handleClick",
748
+ "privacy": "protected",
749
+ "inheritedFrom": {
750
+ "name": "TuixBaseButton",
751
+ "module": "src/tuix-button/TuixBaseButton.ts"
752
+ }
758
753
  },
759
754
  {
760
755
  "kind": "method",
761
- "name": "_findIndex",
762
- "privacy": "private",
756
+ "name": "_iconTemplate",
757
+ "privacy": "protected",
763
758
  "return": {
764
759
  "type": {
765
- "text": "number"
760
+ "text": "TemplateResult"
766
761
  }
767
762
  },
768
763
  "parameters": [
769
764
  {
770
- "name": "option",
771
- "type": {
772
- "text": "TuixDropdownOption"
773
- }
774
- }
775
- ]
776
- },
777
- {
778
- "kind": "method",
779
- "name": "_handleInputBase",
780
- "privacy": "private",
781
- "parameters": [
782
- {
783
- "name": "e",
765
+ "name": "iconName",
784
766
  "type": {
785
- "text": "CustomEvent"
767
+ "text": "IconName"
786
768
  }
787
769
  },
788
770
  {
789
- "name": "eventName",
790
- "type": {
791
- "text": "string"
792
- }
793
- }
794
- ]
795
- },
796
- {
797
- "kind": "method",
798
- "name": "_extendOptionsList",
799
- "privacy": "private",
800
- "parameters": [
801
- {
802
- "name": "value",
803
- "default": "''"
804
- }
805
- ]
806
- },
807
- {
808
- "kind": "method",
809
- "name": "_handleArrowDown",
810
- "privacy": "private"
811
- },
812
- {
813
- "kind": "method",
814
- "name": "_handleArrowUp",
815
- "privacy": "private"
816
- },
817
- {
818
- "kind": "field",
819
- "name": "_handleClickOutside",
820
- "privacy": "private"
821
- },
822
- {
823
- "kind": "method",
824
- "name": "_focusTargetOption",
825
- "privacy": "private",
826
- "parameters": [
827
- {
828
- "name": "targetOption",
771
+ "name": "iconSize",
829
772
  "type": {
830
- "text": "HTMLElement"
773
+ "text": "IconSizeVariant"
831
774
  }
832
- },
833
- {
834
- "name": "extrict",
835
- "default": "true"
836
- }
837
- ]
838
- },
839
- {
840
- "kind": "method",
841
- "name": "_toggleOptions",
842
- "privacy": "private"
843
- },
844
- {
845
- "kind": "method",
846
- "name": "_focusOptionsContainer",
847
- "privacy": "private"
848
- },
849
- {
850
- "kind": "method",
851
- "name": "_unselectPreviousOption",
852
- "privacy": "private"
853
- },
854
- {
855
- "kind": "method",
856
- "name": "_hasCompleteDescription",
857
- "privacy": "private",
858
- "return": {
859
- "type": {
860
- "text": "boolean"
861
- }
862
- }
863
- },
864
- {
865
- "kind": "method",
866
- "name": "_getOptionsContainerClasses",
867
- "privacy": "private",
868
- "return": {
869
- "type": {
870
- "text": "ClassInfo"
871
- }
872
- }
873
- },
874
- {
875
- "kind": "method",
876
- "name": "_triggerUpdateByExternalValueChange",
877
- "privacy": "private"
878
- },
879
- {
880
- "kind": "method",
881
- "name": "_resetPreviousSelection",
882
- "privacy": "private"
883
- },
884
- {
885
- "kind": "method",
886
- "name": "_getOptionsTemplate",
887
- "privacy": "private",
888
- "return": {
889
- "type": {
890
- "text": "TemplateResult[]"
891
775
  }
892
- }
893
- }
894
- ],
895
- "events": [
896
- {
897
- "name": "select",
898
- "type": {
899
- "text": "CustomEvent"
900
- }
901
- },
902
- {
903
- "name": "eventName",
904
- "type": {
905
- "text": "CustomEvent"
776
+ ],
777
+ "inheritedFrom": {
778
+ "name": "TuixBaseButton",
779
+ "module": "src/tuix-button/TuixBaseButton.ts"
906
780
  }
907
781
  }
908
782
  ],
909
783
  "attributes": [
910
784
  {
911
- "name": "value",
785
+ "name": "full",
912
786
  "type": {
913
- "text": "TuixDropdownOption | undefined"
914
- },
915
- "default": "undefined",
916
- "resolveInitializer": {
917
- "module": "src/tuix-dropdown/TuixDropdown.ts"
787
+ "text": "boolean"
918
788
  },
919
- "fieldName": "value"
789
+ "default": "false",
790
+ "fieldName": "full"
920
791
  },
921
792
  {
922
- "name": "options",
793
+ "name": "iconRight",
923
794
  "type": {
924
- "text": "TuixDropdownOption[]"
795
+ "text": "IconName | undefined"
925
796
  },
926
- "default": "[]",
927
- "fieldName": "options"
797
+ "fieldName": "iconRight"
928
798
  },
929
799
  {
930
- "name": "placeholder",
800
+ "name": "iconLeft",
931
801
  "type": {
932
- "text": "string"
802
+ "text": "IconName | undefined"
933
803
  },
934
- "default": "''",
935
- "fieldName": "placeholder"
804
+ "fieldName": "iconLeft"
936
805
  },
937
806
  {
938
- "name": "title",
939
- "type": {
940
- "text": "string"
941
- },
942
- "default": "''",
943
- "fieldName": "title"
807
+ "name": "variant",
808
+ "fieldName": "variant",
809
+ "inheritedFrom": {
810
+ "name": "TuixBaseButton",
811
+ "module": "src/tuix-button/TuixBaseButton.ts"
812
+ }
944
813
  },
945
814
  {
946
815
  "name": "disabled",
@@ -948,7 +817,11 @@
948
817
  "text": "boolean"
949
818
  },
950
819
  "default": "false",
951
- "fieldName": "disabled"
820
+ "fieldName": "disabled",
821
+ "inheritedFrom": {
822
+ "name": "TuixBaseButton",
823
+ "module": "src/tuix-button/TuixBaseButton.ts"
824
+ }
952
825
  },
953
826
  {
954
827
  "name": "dark",
@@ -956,47 +829,48 @@
956
829
  "text": "boolean"
957
830
  },
958
831
  "default": "false",
959
- "fieldName": "dark"
960
- },
832
+ "fieldName": "dark",
833
+ "inheritedFrom": {
834
+ "name": "TuixBaseButton",
835
+ "module": "src/tuix-button/TuixBaseButton.ts"
836
+ }
837
+ }
838
+ ],
839
+ "superclass": {
840
+ "name": "TuixBaseButton",
841
+ "module": "/src/tuix-button/TuixBaseButton"
842
+ },
843
+ "tagName": "tuix-button",
844
+ "customElement": true,
845
+ "events": [
961
846
  {
962
- "name": "description",
847
+ "name": "customClick",
963
848
  "type": {
964
- "text": "string | undefined"
849
+ "text": "CustomEvent"
965
850
  },
966
- "fieldName": "description"
967
- },
968
- {
969
- "name": "descriptionType",
970
- "fieldName": "descriptionType"
971
- },
972
- {
973
- "name": "type",
974
- "fieldName": "type"
851
+ "inheritedFrom": {
852
+ "name": "TuixBaseButton",
853
+ "module": "src/tuix-button/TuixBaseButton.ts"
854
+ }
975
855
  }
976
- ],
977
- "superclass": {
978
- "name": "LitElement",
979
- "package": "lit"
980
- },
981
- "tagName": "tuix-dropdown",
982
- "customElement": true
856
+ ]
983
857
  }
984
858
  ],
985
859
  "exports": [
986
860
  {
987
861
  "kind": "js",
988
- "name": "TuixDropdown",
862
+ "name": "TuixButton",
989
863
  "declaration": {
990
- "name": "TuixDropdown",
991
- "module": "src/tuix-dropdown/TuixDropdown.ts"
864
+ "name": "TuixButton",
865
+ "module": "src/tuix-button/TuixButton.ts"
992
866
  }
993
867
  },
994
868
  {
995
869
  "kind": "custom-element-definition",
996
- "name": "tuix-dropdown",
870
+ "name": "tuix-button",
997
871
  "declaration": {
998
- "name": "TuixDropdown",
999
- "module": "src/tuix-dropdown/TuixDropdown.ts"
872
+ "name": "TuixButton",
873
+ "module": "src/tuix-button/TuixButton.ts"
1000
874
  }
1001
875
  }
1002
876
  ]
@@ -1241,18 +1115,95 @@
1241
1115
  },
1242
1116
  {
1243
1117
  "kind": "javascript-module",
1244
- "path": "src/tuix-button/TuixBaseButton.ts",
1118
+ "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
1119
+ "declarations": [
1120
+ {
1121
+ "kind": "variable",
1122
+ "name": "dropdownHostStyles",
1123
+ "default": "css`\n ${hostStyles}\n :host {\n --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n }\n\n :host .t-input-dropdown {\n --t-field-font-weight: 300;\n --t-field-font-size: 1rem;\n --t-field-padding-x: 1rem;\n --t-field-title-left-position: 1rem;\n }\n\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.938rem;\n --t-field-line-height: 1.125rem;\n }\n }\n\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n }\n }\n\n :host([dark]) {\n --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n }\n`"
1124
+ },
1125
+ {
1126
+ "kind": "variable",
1127
+ "name": "dropdownMainContainerStyles",
1128
+ "default": "css`\n .t-dropdown-full-container {\n position: relative;\n font-family: 'Rubik', sans-serif;\n }\n .t-dropdown-container .t-input-dropdown {\n --t-field-input-cursor: pointer;\n }\n`"
1129
+ },
1130
+ {
1131
+ "kind": "variable",
1132
+ "name": "dropdownOptionStyles",
1133
+ "default": "css`\n .t-options-container {\n width: 100%;\n position: absolute;\n top: calc(100% + 2px);\n left: 0;\n border: none;\n border-radius: 0 0 5px 5px;\n background-color: var(--t-field-color-option);\n visibility: collapse;\n overflow-y: auto;\n max-height: 250px;\n color: var(--t-field-color-text);\n box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n z-index: 9999;\n }\n .t-options-container::-webkit-scrollbar {\n width: 0.75rem;\n }\n .t-options-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n .t-options-container::-webkit-scrollbar-thumb {\n background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n border-radius: 0.25rem;\n border: 0.188rem solid transparent;\n background-clip: content-box;\n }\n .t-options-container.show {\n visibility: visible;\n }\n .t-options-container.show.t-with-description {\n top: calc(100% + 2px - 1.5rem);\n }\n @media only screen and (max-height: 500px) {\n .t-options-container {\n max-height: 50vh;\n }\n }\n .t-dropdown-option {\n padding: var(--t-field-padding-y) 1rem;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 300;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-dropdown-option.t-option-hover {\n background-color: var(--t-field-color-form);\n }\n .t-dropdown-option.t-option-selected {\n color: var(--t-field-color-main);\n }\n .t-dropdown-option.t-option-filtered {\n display: none;\n }\n .t-dropdown-option:focus {\n outline: none;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-dropdown-option {\n font-size: 0.938rem;\n line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-dropdown-option {\n font-size: 0.813rem;\n line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`"
1134
+ }
1135
+ ],
1136
+ "exports": [
1137
+ {
1138
+ "kind": "js",
1139
+ "name": "dropdownHostStyles",
1140
+ "declaration": {
1141
+ "name": "dropdownHostStyles",
1142
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1143
+ }
1144
+ },
1145
+ {
1146
+ "kind": "js",
1147
+ "name": "dropdownMainContainerStyles",
1148
+ "declaration": {
1149
+ "name": "dropdownMainContainerStyles",
1150
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1151
+ }
1152
+ },
1153
+ {
1154
+ "kind": "js",
1155
+ "name": "dropdownOptionStyles",
1156
+ "declaration": {
1157
+ "name": "dropdownOptionStyles",
1158
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1159
+ }
1160
+ }
1161
+ ]
1162
+ },
1163
+ {
1164
+ "kind": "javascript-module",
1165
+ "path": "src/tuix-dropdown/TuixDropdown.ts",
1245
1166
  "declarations": [
1246
1167
  {
1247
1168
  "kind": "class",
1248
1169
  "description": "",
1249
- "name": "TuixBaseButton",
1170
+ "name": "TuixDropdown",
1250
1171
  "members": [
1251
1172
  {
1252
1173
  "kind": "field",
1253
- "name": "variant",
1254
- "attribute": "variant",
1255
- "reflects": true
1174
+ "name": "value",
1175
+ "type": {
1176
+ "text": "TuixDropdownOption | undefined"
1177
+ },
1178
+ "default": "undefined",
1179
+ "attribute": "value"
1180
+ },
1181
+ {
1182
+ "kind": "field",
1183
+ "name": "options",
1184
+ "type": {
1185
+ "text": "TuixDropdownOption[]"
1186
+ },
1187
+ "default": "[]",
1188
+ "attribute": "options"
1189
+ },
1190
+ {
1191
+ "kind": "field",
1192
+ "name": "placeholder",
1193
+ "type": {
1194
+ "text": "string"
1195
+ },
1196
+ "default": "''",
1197
+ "attribute": "placeholder"
1198
+ },
1199
+ {
1200
+ "kind": "field",
1201
+ "name": "title",
1202
+ "type": {
1203
+ "text": "string"
1204
+ },
1205
+ "default": "''",
1206
+ "attribute": "title"
1256
1207
  },
1257
1208
  {
1258
1209
  "kind": "field",
@@ -1275,355 +1226,409 @@
1275
1226
  "reflects": true
1276
1227
  },
1277
1228
  {
1278
- "kind": "field",
1279
- "name": "iconColor",
1280
- "type": {
1281
- "text": "string"
1282
- },
1229
+ "kind": "field",
1230
+ "name": "description",
1231
+ "type": {
1232
+ "text": "string | undefined"
1233
+ },
1234
+ "attribute": "description"
1235
+ },
1236
+ {
1237
+ "kind": "field",
1238
+ "name": "descriptionType",
1239
+ "attribute": "descriptionType"
1240
+ },
1241
+ {
1242
+ "kind": "field",
1243
+ "name": "type",
1244
+ "attribute": "type"
1245
+ },
1246
+ {
1247
+ "kind": "field",
1248
+ "name": "_value",
1249
+ "type": {
1250
+ "text": "string"
1251
+ },
1252
+ "privacy": "private",
1253
+ "default": "''"
1254
+ },
1255
+ {
1256
+ "kind": "field",
1257
+ "name": "_isOptionsVisible",
1258
+ "type": {
1259
+ "text": "boolean"
1260
+ },
1261
+ "privacy": "private",
1262
+ "default": "false"
1263
+ },
1264
+ {
1265
+ "kind": "field",
1266
+ "name": "_searchingOption",
1267
+ "type": {
1268
+ "text": "boolean"
1269
+ },
1270
+ "privacy": "private",
1271
+ "default": "false"
1272
+ },
1273
+ {
1274
+ "kind": "field",
1275
+ "name": "_extendedOptions",
1276
+ "type": {
1277
+ "text": "TuixDropdownExtendedOption[]"
1278
+ },
1279
+ "default": "[]"
1280
+ },
1281
+ {
1282
+ "kind": "field",
1283
+ "name": "_optionsContainer",
1284
+ "type": {
1285
+ "text": "HTMLElement | undefined"
1286
+ },
1287
+ "privacy": "private"
1288
+ },
1289
+ {
1290
+ "kind": "field",
1291
+ "name": "_inputDropdown",
1292
+ "type": {
1293
+ "text": "HTMLElement | undefined"
1294
+ },
1295
+ "privacy": "private"
1296
+ },
1297
+ {
1298
+ "kind": "field",
1299
+ "name": "_previousSelectedOption",
1300
+ "type": {
1301
+ "text": "HTMLElement | null"
1302
+ },
1303
+ "privacy": "private",
1304
+ "default": "null"
1305
+ },
1306
+ {
1307
+ "kind": "field",
1308
+ "name": "_previousFocusedOption",
1309
+ "type": {
1310
+ "text": "HTMLElement | null"
1311
+ },
1312
+ "privacy": "private",
1313
+ "default": "null"
1314
+ },
1315
+ {
1316
+ "kind": "method",
1317
+ "name": "_onEnterPress",
1318
+ "privacy": "private",
1319
+ "parameters": [
1320
+ {
1321
+ "name": "event",
1322
+ "type": {
1323
+ "text": "KeyboardEvent"
1324
+ }
1325
+ }
1326
+ ]
1327
+ },
1328
+ {
1329
+ "kind": "method",
1330
+ "name": "_onKeyDownOption",
1331
+ "privacy": "private",
1332
+ "parameters": [
1333
+ {
1334
+ "name": "event",
1335
+ "type": {
1336
+ "text": "KeyboardEvent"
1337
+ }
1338
+ }
1339
+ ]
1340
+ },
1341
+ {
1342
+ "kind": "method",
1343
+ "name": "_onKeyPressOption",
1344
+ "privacy": "private",
1345
+ "parameters": [
1346
+ {
1347
+ "name": "event",
1348
+ "type": {
1349
+ "text": "KeyboardEvent"
1350
+ }
1351
+ }
1352
+ ]
1353
+ },
1354
+ {
1355
+ "kind": "method",
1356
+ "name": "_onMouseOverOption",
1357
+ "privacy": "private",
1358
+ "parameters": [
1359
+ {
1360
+ "name": "event",
1361
+ "type": {
1362
+ "text": "MouseEvent"
1363
+ }
1364
+ }
1365
+ ]
1366
+ },
1367
+ {
1368
+ "kind": "method",
1369
+ "name": "_onClickOption",
1370
+ "privacy": "private",
1371
+ "parameters": [
1372
+ {
1373
+ "name": "event",
1374
+ "type": {
1375
+ "text": "MouseEvent | KeyboardEvent"
1376
+ }
1377
+ }
1378
+ ]
1379
+ },
1380
+ {
1381
+ "kind": "method",
1382
+ "name": "_onInputSingle",
1283
1383
  "privacy": "protected",
1284
- "default": "''"
1384
+ "parameters": [
1385
+ {
1386
+ "name": "e",
1387
+ "type": {
1388
+ "text": "CustomEvent"
1389
+ }
1390
+ }
1391
+ ]
1285
1392
  },
1286
1393
  {
1287
1394
  "kind": "method",
1288
- "name": "_getTextColor",
1289
- "privacy": "protected"
1395
+ "name": "_handleSelectEvent",
1396
+ "privacy": "protected",
1397
+ "parameters": [
1398
+ {
1399
+ "name": "event",
1400
+ "type": {
1401
+ "text": "MouseEvent | KeyboardEvent"
1402
+ }
1403
+ }
1404
+ ]
1290
1405
  },
1291
1406
  {
1292
1407
  "kind": "method",
1293
- "name": "_updateIconColor",
1294
- "privacy": "protected",
1408
+ "name": "_handleBlur",
1409
+ "privacy": "private"
1410
+ },
1411
+ {
1412
+ "kind": "method",
1413
+ "name": "_getOptionName",
1414
+ "privacy": "private",
1295
1415
  "return": {
1296
1416
  "type": {
1297
- "text": "void"
1417
+ "text": "string"
1298
1418
  }
1299
- }
1419
+ },
1420
+ "parameters": [
1421
+ {
1422
+ "name": "option",
1423
+ "type": {
1424
+ "text": "TuixDropdownOption"
1425
+ }
1426
+ }
1427
+ ]
1300
1428
  },
1301
1429
  {
1302
1430
  "kind": "method",
1303
- "name": "_handleClick",
1304
- "privacy": "protected"
1431
+ "name": "_getOptionValue",
1432
+ "privacy": "private",
1433
+ "return": {
1434
+ "type": {
1435
+ "text": "TuixDropdownPlainOption"
1436
+ }
1437
+ },
1438
+ "parameters": [
1439
+ {
1440
+ "name": "option",
1441
+ "type": {
1442
+ "text": "TuixDropdownOption"
1443
+ }
1444
+ }
1445
+ ]
1305
1446
  },
1306
1447
  {
1307
1448
  "kind": "method",
1308
- "name": "_iconTemplate",
1309
- "privacy": "protected",
1449
+ "name": "_findIndex",
1450
+ "privacy": "private",
1310
1451
  "return": {
1311
1452
  "type": {
1312
- "text": "TemplateResult"
1453
+ "text": "number"
1313
1454
  }
1314
1455
  },
1315
1456
  "parameters": [
1316
1457
  {
1317
- "name": "iconName",
1458
+ "name": "option",
1318
1459
  "type": {
1319
- "text": "IconName"
1460
+ "text": "TuixDropdownOption"
1461
+ }
1462
+ }
1463
+ ]
1464
+ },
1465
+ {
1466
+ "kind": "method",
1467
+ "name": "_handleInputBase",
1468
+ "privacy": "private",
1469
+ "parameters": [
1470
+ {
1471
+ "name": "e",
1472
+ "type": {
1473
+ "text": "CustomEvent"
1320
1474
  }
1321
1475
  },
1322
1476
  {
1323
- "name": "iconSize",
1477
+ "name": "eventName",
1324
1478
  "type": {
1325
- "text": "IconSizeVariant"
1479
+ "text": "string"
1326
1480
  }
1327
1481
  }
1328
1482
  ]
1329
1483
  },
1330
1484
  {
1331
1485
  "kind": "method",
1332
- "name": "_buttonContent",
1333
- "privacy": "protected",
1334
- "return": {
1335
- "type": {
1336
- "text": "TemplateResult"
1486
+ "name": "_extendOptionsList",
1487
+ "privacy": "private",
1488
+ "parameters": [
1489
+ {
1490
+ "name": "value",
1491
+ "default": "''"
1337
1492
  }
1338
- }
1339
- }
1340
- ],
1341
- "events": [
1493
+ ]
1494
+ },
1342
1495
  {
1343
- "name": "customClick",
1344
- "type": {
1345
- "text": "CustomEvent"
1346
- }
1347
- }
1348
- ],
1349
- "attributes": [
1496
+ "kind": "method",
1497
+ "name": "_handleArrowDown",
1498
+ "privacy": "private"
1499
+ },
1350
1500
  {
1351
- "name": "variant",
1352
- "fieldName": "variant"
1501
+ "kind": "method",
1502
+ "name": "_handleArrowUp",
1503
+ "privacy": "private"
1353
1504
  },
1354
1505
  {
1355
- "name": "disabled",
1356
- "type": {
1357
- "text": "boolean"
1358
- },
1359
- "default": "false",
1360
- "fieldName": "disabled"
1506
+ "kind": "field",
1507
+ "name": "_handleClickOutside",
1508
+ "privacy": "private"
1361
1509
  },
1362
1510
  {
1363
- "name": "dark",
1364
- "type": {
1365
- "text": "boolean"
1366
- },
1367
- "default": "false",
1368
- "fieldName": "dark"
1369
- }
1370
- ],
1371
- "superclass": {
1372
- "name": "LitElement",
1373
- "package": "lit"
1374
- },
1375
- "customElement": true
1376
- }
1377
- ],
1378
- "exports": [
1379
- {
1380
- "kind": "js",
1381
- "name": "TuixBaseButton",
1382
- "declaration": {
1383
- "name": "TuixBaseButton",
1384
- "module": "src/tuix-button/TuixBaseButton.ts"
1385
- }
1386
- }
1387
- ]
1388
- },
1389
- {
1390
- "kind": "javascript-module",
1391
- "path": "src/tuix-button/TuixButton.styles.ts",
1392
- "declarations": [
1393
- {
1394
- "kind": "variable",
1395
- "name": "hostButtonStyles",
1396
- "default": "css`\n :host {\n --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n }\n :host([dark]) {\n --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n }\n`"
1397
- },
1398
- {
1399
- "kind": "variable",
1400
- "name": "buttonSizeStyles",
1401
- "default": "css`\n ${unsafeCSS(`\n ${slottedClassName(TextSize.Button)} {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.938rem;\n font-weight: 400;\n line-height: 1.125rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n }\n`)}\n`"
1402
- },
1403
- {
1404
- "kind": "variable",
1405
- "name": "buttonColorStyles",
1406
- "default": "css`\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n background-color: var(--t-button-primary-color);\n outline: none;\n color: var(--t-button-text-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n background-color: var(--t-button-hover-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n background-color: var(--t-button-hover-primary-color);\n outline: 2px solid var(--t-button-accent-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n background-color: var(--t-button-active-primary-color);\n outline: none;\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n background-color: var(--t-button-secondary-color);\n outline: 1px solid var(--t-button-hover-primary-color);\n color: var(--t-button-text-secondary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n background-color: var(--t-button-hover-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n background-color: var(--t-button-hover-secondary-color);\n outline: 2px solid var(--t-button-accent-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n background-color: var(--t-button-active-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n outline: 1px solid var(--t-button-text-muted-color);\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n background-color: var(--t-button-disabled-bg-color);\n color: var(--t-button-text-muted-color);\n cursor: not-allowed;\n }\n`"
1407
- }
1408
- ],
1409
- "exports": [
1410
- {
1411
- "kind": "js",
1412
- "name": "hostButtonStyles",
1413
- "declaration": {
1414
- "name": "hostButtonStyles",
1415
- "module": "src/tuix-button/TuixButton.styles.ts"
1416
- }
1417
- },
1418
- {
1419
- "kind": "js",
1420
- "name": "buttonSizeStyles",
1421
- "declaration": {
1422
- "name": "buttonSizeStyles",
1423
- "module": "src/tuix-button/TuixButton.styles.ts"
1424
- }
1425
- },
1426
- {
1427
- "kind": "js",
1428
- "name": "buttonColorStyles",
1429
- "declaration": {
1430
- "name": "buttonColorStyles",
1431
- "module": "src/tuix-button/TuixButton.styles.ts"
1432
- }
1433
- }
1434
- ]
1435
- },
1436
- {
1437
- "kind": "javascript-module",
1438
- "path": "src/tuix-button/TuixButton.ts",
1439
- "declarations": [
1440
- {
1441
- "kind": "class",
1442
- "description": "",
1443
- "name": "TuixButton",
1444
- "members": [
1511
+ "kind": "method",
1512
+ "name": "_focusTargetOption",
1513
+ "privacy": "private",
1514
+ "parameters": [
1515
+ {
1516
+ "name": "targetOption",
1517
+ "type": {
1518
+ "text": "HTMLElement"
1519
+ }
1520
+ },
1521
+ {
1522
+ "name": "extrict",
1523
+ "default": "true"
1524
+ }
1525
+ ]
1526
+ },
1445
1527
  {
1446
- "kind": "field",
1447
- "name": "full",
1448
- "type": {
1449
- "text": "boolean"
1450
- },
1451
- "default": "false",
1452
- "attribute": "full",
1453
- "reflects": true
1528
+ "kind": "method",
1529
+ "name": "_toggleOptions",
1530
+ "privacy": "private"
1454
1531
  },
1455
1532
  {
1456
- "kind": "field",
1457
- "name": "iconRight",
1458
- "type": {
1459
- "text": "IconName | undefined"
1460
- },
1461
- "attribute": "iconRight"
1533
+ "kind": "method",
1534
+ "name": "_focusOptionsContainer",
1535
+ "privacy": "private"
1462
1536
  },
1463
1537
  {
1464
- "kind": "field",
1465
- "name": "iconLeft",
1466
- "type": {
1467
- "text": "IconName | undefined"
1468
- },
1469
- "attribute": "iconLeft"
1538
+ "kind": "method",
1539
+ "name": "_unselectPreviousOption",
1540
+ "privacy": "private"
1470
1541
  },
1471
1542
  {
1472
1543
  "kind": "method",
1473
- "name": "_updateIconColor",
1474
- "privacy": "protected",
1544
+ "name": "_hasCompleteDescription",
1545
+ "privacy": "private",
1475
1546
  "return": {
1476
1547
  "type": {
1477
- "text": "void"
1548
+ "text": "boolean"
1478
1549
  }
1479
- },
1480
- "inheritedFrom": {
1481
- "name": "TuixBaseButton",
1482
- "module": "src/tuix-button/TuixBaseButton.ts"
1483
1550
  }
1484
1551
  },
1485
1552
  {
1486
1553
  "kind": "method",
1487
- "name": "_buttonContent",
1488
- "privacy": "protected",
1554
+ "name": "_getOptionsContainerClasses",
1555
+ "privacy": "private",
1489
1556
  "return": {
1490
1557
  "type": {
1491
- "text": "TemplateResult"
1558
+ "text": "ClassInfo"
1492
1559
  }
1493
- },
1494
- "inheritedFrom": {
1495
- "name": "TuixBaseButton",
1496
- "module": "src/tuix-button/TuixBaseButton.ts"
1497
- }
1498
- },
1499
- {
1500
- "kind": "field",
1501
- "name": "variant",
1502
- "attribute": "variant",
1503
- "reflects": true,
1504
- "inheritedFrom": {
1505
- "name": "TuixBaseButton",
1506
- "module": "src/tuix-button/TuixBaseButton.ts"
1507
- }
1508
- },
1509
- {
1510
- "kind": "field",
1511
- "name": "disabled",
1512
- "type": {
1513
- "text": "boolean"
1514
- },
1515
- "default": "false",
1516
- "attribute": "disabled",
1517
- "reflects": true,
1518
- "inheritedFrom": {
1519
- "name": "TuixBaseButton",
1520
- "module": "src/tuix-button/TuixBaseButton.ts"
1521
- }
1522
- },
1523
- {
1524
- "kind": "field",
1525
- "name": "dark",
1526
- "type": {
1527
- "text": "boolean"
1528
- },
1529
- "default": "false",
1530
- "attribute": "dark",
1531
- "reflects": true,
1532
- "inheritedFrom": {
1533
- "name": "TuixBaseButton",
1534
- "module": "src/tuix-button/TuixBaseButton.ts"
1535
- }
1536
- },
1537
- {
1538
- "kind": "field",
1539
- "name": "iconColor",
1540
- "type": {
1541
- "text": "string"
1542
- },
1543
- "privacy": "protected",
1544
- "default": "''",
1545
- "inheritedFrom": {
1546
- "name": "TuixBaseButton",
1547
- "module": "src/tuix-button/TuixBaseButton.ts"
1548
1560
  }
1549
1561
  },
1550
1562
  {
1551
1563
  "kind": "method",
1552
- "name": "_getTextColor",
1553
- "privacy": "protected",
1554
- "inheritedFrom": {
1555
- "name": "TuixBaseButton",
1556
- "module": "src/tuix-button/TuixBaseButton.ts"
1557
- }
1564
+ "name": "_triggerUpdateByExternalValueChange",
1565
+ "privacy": "private"
1558
1566
  },
1559
1567
  {
1560
1568
  "kind": "method",
1561
- "name": "_handleClick",
1562
- "privacy": "protected",
1563
- "inheritedFrom": {
1564
- "name": "TuixBaseButton",
1565
- "module": "src/tuix-button/TuixBaseButton.ts"
1566
- }
1569
+ "name": "_resetPreviousSelection",
1570
+ "privacy": "private"
1567
1571
  },
1568
1572
  {
1569
1573
  "kind": "method",
1570
- "name": "_iconTemplate",
1571
- "privacy": "protected",
1574
+ "name": "_getOptionsTemplate",
1575
+ "privacy": "private",
1572
1576
  "return": {
1573
1577
  "type": {
1574
- "text": "TemplateResult"
1575
- }
1576
- },
1577
- "parameters": [
1578
- {
1579
- "name": "iconName",
1580
- "type": {
1581
- "text": "IconName"
1582
- }
1583
- },
1584
- {
1585
- "name": "iconSize",
1586
- "type": {
1587
- "text": "IconSizeVariant"
1588
- }
1578
+ "text": "TemplateResult[]"
1589
1579
  }
1590
- ],
1591
- "inheritedFrom": {
1592
- "name": "TuixBaseButton",
1593
- "module": "src/tuix-button/TuixBaseButton.ts"
1580
+ }
1581
+ }
1582
+ ],
1583
+ "events": [
1584
+ {
1585
+ "name": "select",
1586
+ "type": {
1587
+ "text": "CustomEvent"
1588
+ }
1589
+ },
1590
+ {
1591
+ "name": "eventName",
1592
+ "type": {
1593
+ "text": "CustomEvent"
1594
1594
  }
1595
1595
  }
1596
1596
  ],
1597
1597
  "attributes": [
1598
1598
  {
1599
- "name": "full",
1599
+ "name": "value",
1600
1600
  "type": {
1601
- "text": "boolean"
1601
+ "text": "TuixDropdownOption | undefined"
1602
1602
  },
1603
- "default": "false",
1604
- "fieldName": "full"
1603
+ "default": "undefined",
1604
+ "resolveInitializer": {
1605
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
1606
+ },
1607
+ "fieldName": "value"
1605
1608
  },
1606
1609
  {
1607
- "name": "iconRight",
1610
+ "name": "options",
1608
1611
  "type": {
1609
- "text": "IconName | undefined"
1612
+ "text": "TuixDropdownOption[]"
1610
1613
  },
1611
- "fieldName": "iconRight"
1614
+ "default": "[]",
1615
+ "fieldName": "options"
1612
1616
  },
1613
1617
  {
1614
- "name": "iconLeft",
1618
+ "name": "placeholder",
1615
1619
  "type": {
1616
- "text": "IconName | undefined"
1620
+ "text": "string"
1617
1621
  },
1618
- "fieldName": "iconLeft"
1622
+ "default": "''",
1623
+ "fieldName": "placeholder"
1619
1624
  },
1620
1625
  {
1621
- "name": "variant",
1622
- "fieldName": "variant",
1623
- "inheritedFrom": {
1624
- "name": "TuixBaseButton",
1625
- "module": "src/tuix-button/TuixBaseButton.ts"
1626
- }
1626
+ "name": "title",
1627
+ "type": {
1628
+ "text": "string"
1629
+ },
1630
+ "default": "''",
1631
+ "fieldName": "title"
1627
1632
  },
1628
1633
  {
1629
1634
  "name": "disabled",
@@ -1631,11 +1636,7 @@
1631
1636
  "text": "boolean"
1632
1637
  },
1633
1638
  "default": "false",
1634
- "fieldName": "disabled",
1635
- "inheritedFrom": {
1636
- "name": "TuixBaseButton",
1637
- "module": "src/tuix-button/TuixBaseButton.ts"
1638
- }
1639
+ "fieldName": "disabled"
1639
1640
  },
1640
1641
  {
1641
1642
  "name": "dark",
@@ -1643,48 +1644,47 @@
1643
1644
  "text": "boolean"
1644
1645
  },
1645
1646
  "default": "false",
1646
- "fieldName": "dark",
1647
- "inheritedFrom": {
1648
- "name": "TuixBaseButton",
1649
- "module": "src/tuix-button/TuixBaseButton.ts"
1650
- }
1651
- }
1652
- ],
1653
- "superclass": {
1654
- "name": "TuixBaseButton",
1655
- "module": "/src/tuix-button/TuixBaseButton"
1656
- },
1657
- "tagName": "tuix-button",
1658
- "customElement": true,
1659
- "events": [
1647
+ "fieldName": "dark"
1648
+ },
1660
1649
  {
1661
- "name": "customClick",
1650
+ "name": "description",
1662
1651
  "type": {
1663
- "text": "CustomEvent"
1652
+ "text": "string | undefined"
1664
1653
  },
1665
- "inheritedFrom": {
1666
- "name": "TuixBaseButton",
1667
- "module": "src/tuix-button/TuixBaseButton.ts"
1668
- }
1654
+ "fieldName": "description"
1655
+ },
1656
+ {
1657
+ "name": "descriptionType",
1658
+ "fieldName": "descriptionType"
1659
+ },
1660
+ {
1661
+ "name": "type",
1662
+ "fieldName": "type"
1669
1663
  }
1670
- ]
1664
+ ],
1665
+ "superclass": {
1666
+ "name": "LitElement",
1667
+ "package": "lit"
1668
+ },
1669
+ "tagName": "tuix-dropdown",
1670
+ "customElement": true
1671
1671
  }
1672
1672
  ],
1673
1673
  "exports": [
1674
1674
  {
1675
1675
  "kind": "js",
1676
- "name": "TuixButton",
1676
+ "name": "TuixDropdown",
1677
1677
  "declaration": {
1678
- "name": "TuixButton",
1679
- "module": "src/tuix-button/TuixButton.ts"
1678
+ "name": "TuixDropdown",
1679
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
1680
1680
  }
1681
1681
  },
1682
1682
  {
1683
1683
  "kind": "custom-element-definition",
1684
- "name": "tuix-button",
1684
+ "name": "tuix-dropdown",
1685
1685
  "declaration": {
1686
- "name": "TuixButton",
1687
- "module": "src/tuix-button/TuixButton.ts"
1686
+ "name": "TuixDropdown",
1687
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
1688
1688
  }
1689
1689
  }
1690
1690
  ]
@@ -4438,59 +4438,31 @@
4438
4438
  },
4439
4439
  {
4440
4440
  "kind": "javascript-module",
4441
- "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
4442
- "declarations": [],
4443
- "exports": []
4444
- },
4445
- {
4446
- "kind": "javascript-module",
4447
- "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
4448
- "declarations": [],
4449
- "exports": []
4450
- },
4451
- {
4452
- "kind": "javascript-module",
4453
- "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
4441
+ "path": "src/tuix-button/enums/tuix-button.enums.ts",
4454
4442
  "declarations": [
4455
4443
  {
4456
4444
  "kind": "variable",
4457
- "name": "meta",
4458
- "type": {
4459
- "text": "object"
4460
- },
4461
- "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: {\n control: 'object',\n },\n options: {\n control: 'object',\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4462
- },
4463
- {
4464
- "kind": "variable",
4465
- "name": "tuixDropdownObjectList",
4445
+ "name": "buttonTextColor",
4466
4446
  "type": {
4467
- "text": "Story"
4447
+ "text": "Record<MainVariant, string>"
4468
4448
  },
4469
- "default": "{\n args: {\n value: '458ac6ca-9a57-48c5-8abf-768460397607',\n // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n ],\n type: DropdownType.SEARCH,\n },\n}"
4449
+ "default": "{\n [MainVariant.PRIMARY]: Palette.WHITE,\n [MainVariant.SECONDARY]: Palette.MAIN,\n}"
4470
4450
  }
4471
4451
  ],
4472
4452
  "exports": [
4473
4453
  {
4474
4454
  "kind": "js",
4475
- "name": "default",
4476
- "declaration": {
4477
- "name": "meta",
4478
- "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4479
- }
4480
- },
4481
- {
4482
- "kind": "js",
4483
- "name": "tuixDropdownObjectList",
4455
+ "name": "buttonTextColor",
4484
4456
  "declaration": {
4485
- "name": "tuixDropdownObjectList",
4486
- "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4457
+ "name": "buttonTextColor",
4458
+ "module": "src/tuix-button/enums/tuix-button.enums.ts"
4487
4459
  }
4488
4460
  }
4489
4461
  ]
4490
4462
  },
4491
4463
  {
4492
4464
  "kind": "javascript-module",
4493
- "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
4465
+ "path": "src/tuix-button/stories/tuix-button.stories.ts",
4494
4466
  "declarations": [
4495
4467
  {
4496
4468
  "kind": "variable",
@@ -4498,15 +4470,15 @@
4498
4470
  "type": {
4499
4471
  "text": "object"
4500
4472
  },
4501
- "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: { control: 'text' },\n\n options: {\n control: 'select',\n options: ['fruits', 'countries'],\n mapping: {\n fruits: fruits,\n countries: countryPhoneArray,\n },\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: { control: 'text' },\n title: { control: 'text' },\n description: { control: 'text' },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html`<div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4473
+ "default": "{\n title: 'TuixButton',\n component: 'tuix-button',\n argTypes: {\n value: {\n control: 'text',\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n iconLeft: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n iconRight: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n disabled: { control: 'boolean' },\n dark: { control: 'boolean' },\n full: { control: 'boolean' },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"width:100%; height:100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n <tuix-button\n style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n .variant=${args.variant}\n .iconLeft=${args.iconLeft}\n .iconRight=${args.iconRight}\n ?disabled=${args.disabled}\n ?dark=${args.dark}\n ?full=${args.full}\n @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n >\n ${args.value}\n </tuix-button>\n </div>\n </div>\n `,\n}"
4502
4474
  },
4503
4475
  {
4504
4476
  "kind": "variable",
4505
- "name": "tuixDropdownExample",
4477
+ "name": "Button",
4506
4478
  "type": {
4507
4479
  "text": "Story"
4508
4480
  },
4509
- "default": "{\n args: {\n value: 'apple2',\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n 'apple',\n 'orange',\n 'tomato',\n 'apple2',\n 'orange2',\n 'tomato2',\n 'apple3',\n 'orange3',\n 'tomato3',\n ],\n type: DropdownType.SINGLE,\n },\n}"
4481
+ "default": "{\n args: {\n value: 'Click me',\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n full: false,\n iconLeft: null,\n iconRight: null,\n },\n}"
4510
4482
  }
4511
4483
  ],
4512
4484
  "exports": [
@@ -4515,19 +4487,25 @@
4515
4487
  "name": "default",
4516
4488
  "declaration": {
4517
4489
  "name": "meta",
4518
- "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4490
+ "module": "src/tuix-button/stories/tuix-button.stories.ts"
4519
4491
  }
4520
4492
  },
4521
4493
  {
4522
4494
  "kind": "js",
4523
- "name": "tuixDropdownExample",
4495
+ "name": "Button",
4524
4496
  "declaration": {
4525
- "name": "tuixDropdownExample",
4526
- "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4497
+ "name": "Button",
4498
+ "module": "src/tuix-button/stories/tuix-button.stories.ts"
4527
4499
  }
4528
4500
  }
4529
4501
  ]
4530
4502
  },
4503
+ {
4504
+ "kind": "javascript-module",
4505
+ "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
4506
+ "declarations": [],
4507
+ "exports": []
4508
+ },
4531
4509
  {
4532
4510
  "kind": "javascript-module",
4533
4511
  "path": "src/tuix-checkbox/enums/tuix-checkbox.enums.ts",
@@ -4568,12 +4546,6 @@
4568
4546
  }
4569
4547
  ]
4570
4548
  },
4571
- {
4572
- "kind": "javascript-module",
4573
- "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
4574
- "declarations": [],
4575
- "exports": []
4576
- },
4577
4549
  {
4578
4550
  "kind": "javascript-module",
4579
4551
  "path": "src/tuix-checkbox/stories/tuix-checkbox.stories.ts",
@@ -4616,37 +4588,25 @@
4616
4588
  },
4617
4589
  {
4618
4590
  "kind": "javascript-module",
4619
- "path": "src/tuix-button/enums/tuix-button.enums.ts",
4620
- "declarations": [
4621
- {
4622
- "kind": "variable",
4623
- "name": "buttonTextColor",
4624
- "type": {
4625
- "text": "Record<MainVariant, string>"
4626
- },
4627
- "default": "{\n [MainVariant.PRIMARY]: Palette.WHITE,\n [MainVariant.SECONDARY]: Palette.MAIN,\n}"
4628
- }
4629
- ],
4630
- "exports": [
4631
- {
4632
- "kind": "js",
4633
- "name": "buttonTextColor",
4634
- "declaration": {
4635
- "name": "buttonTextColor",
4636
- "module": "src/tuix-button/enums/tuix-button.enums.ts"
4637
- }
4638
- }
4639
- ]
4591
+ "path": "src/tuix-checkbox/interfaces/tuix-checkbox.interface.ts",
4592
+ "declarations": [],
4593
+ "exports": []
4640
4594
  },
4641
4595
  {
4642
4596
  "kind": "javascript-module",
4643
- "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
4597
+ "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
4644
4598
  "declarations": [],
4645
4599
  "exports": []
4646
4600
  },
4647
4601
  {
4648
4602
  "kind": "javascript-module",
4649
- "path": "src/tuix-button/stories/tuix-button.stories.ts",
4603
+ "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
4604
+ "declarations": [],
4605
+ "exports": []
4606
+ },
4607
+ {
4608
+ "kind": "javascript-module",
4609
+ "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
4650
4610
  "declarations": [
4651
4611
  {
4652
4612
  "kind": "variable",
@@ -4654,15 +4614,15 @@
4654
4614
  "type": {
4655
4615
  "text": "object"
4656
4616
  },
4657
- "default": "{\n title: 'TuixButton',\n component: 'tuix-button',\n argTypes: {\n value: {\n control: 'text',\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n iconLeft: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n iconRight: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n disabled: { control: 'boolean' },\n dark: { control: 'boolean' },\n full: { control: 'boolean' },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"width:100%; height:100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n <tuix-button\n style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n .variant=${args.variant}\n .iconLeft=${args.iconLeft}\n .iconRight=${args.iconRight}\n ?disabled=${args.disabled}\n ?dark=${args.dark}\n ?full=${args.full}\n @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n >\n ${args.value}\n </tuix-button>\n </div>\n </div>\n `,\n}"
4617
+ "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: {\n control: 'object',\n },\n options: {\n control: 'object',\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4658
4618
  },
4659
4619
  {
4660
4620
  "kind": "variable",
4661
- "name": "Button",
4621
+ "name": "tuixDropdownObjectList",
4662
4622
  "type": {
4663
4623
  "text": "Story"
4664
4624
  },
4665
- "default": "{\n args: {\n value: 'Click me',\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n full: false,\n iconLeft: null,\n iconRight: null,\n },\n}"
4625
+ "default": "{\n args: {\n value: '458ac6ca-9a57-48c5-8abf-768460397607',\n // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n ],\n type: DropdownType.SEARCH,\n },\n}"
4666
4626
  }
4667
4627
  ],
4668
4628
  "exports": [
@@ -4671,22 +4631,22 @@
4671
4631
  "name": "default",
4672
4632
  "declaration": {
4673
4633
  "name": "meta",
4674
- "module": "src/tuix-button/stories/tuix-button.stories.ts"
4634
+ "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4675
4635
  }
4676
4636
  },
4677
4637
  {
4678
4638
  "kind": "js",
4679
- "name": "Button",
4639
+ "name": "tuixDropdownObjectList",
4680
4640
  "declaration": {
4681
- "name": "Button",
4682
- "module": "src/tuix-button/stories/tuix-button.stories.ts"
4641
+ "name": "tuixDropdownObjectList",
4642
+ "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4683
4643
  }
4684
4644
  }
4685
4645
  ]
4686
4646
  },
4687
4647
  {
4688
4648
  "kind": "javascript-module",
4689
- "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
4649
+ "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
4690
4650
  "declarations": [
4691
4651
  {
4692
4652
  "kind": "variable",
@@ -4694,15 +4654,15 @@
4694
4654
  "type": {
4695
4655
  "text": "object"
4696
4656
  },
4697
- "default": "{\n title: 'TuixIcon',\n component: 'tuix-icon',\n argTypes: {\n name: {\n control: 'select',\n options: Object.values(IconName),\n },\n size: {\n control: 'select',\n options: Object.values(IconSizeVariant),\n },\n color: {\n control: 'select',\n options: [...Object.keys(Palette), ...Object.values(TextVariant)],\n },\n fill: {\n control: 'select',\n options: [...Object.keys(Palette), ...Object.values(TextVariant), null],\n },\n dark: {\n control: 'boolean',\n },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-icon\n name=\"${args.name}\"\n size=\"${args.size}\"\n color=\"${args.color}\"\n ?dark=\"${args.dark}\"\n fill=\"${args.fill}\"\n >\n </tuix-icon>\n </div>\n `,\n}"
4657
+ "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: { control: 'text' },\n\n options: {\n control: 'select',\n options: ['fruits', 'countries'],\n mapping: {\n fruits: fruits,\n countries: countryPhoneArray,\n },\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: { control: 'text' },\n title: { control: 'text' },\n description: { control: 'text' },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html`<div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4698
4658
  },
4699
4659
  {
4700
4660
  "kind": "variable",
4701
- "name": "regularIcon",
4661
+ "name": "tuixDropdownExample",
4702
4662
  "type": {
4703
4663
  "text": "Story"
4704
4664
  },
4705
- "default": "{\n args: {\n ...defaultValues,\n },\n}"
4665
+ "default": "{\n args: {\n value: 'apple2',\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n 'apple',\n 'orange',\n 'tomato',\n 'apple2',\n 'orange2',\n 'tomato2',\n 'apple3',\n 'orange3',\n 'tomato3',\n ],\n type: DropdownType.SINGLE,\n },\n}"
4706
4666
  }
4707
4667
  ],
4708
4668
  "exports": [
@@ -4711,15 +4671,15 @@
4711
4671
  "name": "default",
4712
4672
  "declaration": {
4713
4673
  "name": "meta",
4714
- "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
4674
+ "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4715
4675
  }
4716
4676
  },
4717
4677
  {
4718
4678
  "kind": "js",
4719
- "name": "regularIcon",
4679
+ "name": "tuixDropdownExample",
4720
4680
  "declaration": {
4721
- "name": "regularIcon",
4722
- "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
4681
+ "name": "tuixDropdownExample",
4682
+ "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4723
4683
  }
4724
4684
  }
4725
4685
  ]
@@ -4748,6 +4708,46 @@
4748
4708
  }
4749
4709
  ]
4750
4710
  },
4711
+ {
4712
+ "kind": "javascript-module",
4713
+ "path": "src/tuix-icon/stories/tuix-icon.stories.ts",
4714
+ "declarations": [
4715
+ {
4716
+ "kind": "variable",
4717
+ "name": "meta",
4718
+ "type": {
4719
+ "text": "object"
4720
+ },
4721
+ "default": "{\n title: 'TuixIcon',\n component: 'tuix-icon',\n argTypes: {\n name: {\n control: 'select',\n options: Object.values(IconName),\n },\n size: {\n control: 'select',\n options: Object.values(IconSizeVariant),\n },\n color: {\n control: 'select',\n options: [...Object.keys(Palette), ...Object.values(TextVariant)],\n },\n fill: {\n control: 'select',\n options: [...Object.keys(Palette), ...Object.values(TextVariant), null],\n },\n dark: {\n control: 'boolean',\n },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-icon\n name=\"${args.name}\"\n size=\"${args.size}\"\n color=\"${args.color}\"\n ?dark=\"${args.dark}\"\n fill=\"${args.fill}\"\n >\n </tuix-icon>\n </div>\n `,\n}"
4722
+ },
4723
+ {
4724
+ "kind": "variable",
4725
+ "name": "regularIcon",
4726
+ "type": {
4727
+ "text": "Story"
4728
+ },
4729
+ "default": "{\n args: {\n ...defaultValues,\n },\n}"
4730
+ }
4731
+ ],
4732
+ "exports": [
4733
+ {
4734
+ "kind": "js",
4735
+ "name": "default",
4736
+ "declaration": {
4737
+ "name": "meta",
4738
+ "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
4739
+ }
4740
+ },
4741
+ {
4742
+ "kind": "js",
4743
+ "name": "regularIcon",
4744
+ "declaration": {
4745
+ "name": "regularIcon",
4746
+ "module": "src/tuix-icon/stories/tuix-icon.stories.ts"
4747
+ }
4748
+ }
4749
+ ]
4750
+ },
4751
4751
  {
4752
4752
  "kind": "javascript-module",
4753
4753
  "path": "src/tuix-icon-button/stories/tuix-icon-button.stories.ts",
@@ -4954,6 +4954,46 @@
4954
4954
  }
4955
4955
  ]
4956
4956
  },
4957
+ {
4958
+ "kind": "javascript-module",
4959
+ "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
4960
+ "declarations": [
4961
+ {
4962
+ "kind": "variable",
4963
+ "name": "meta",
4964
+ "type": {
4965
+ "text": "object"
4966
+ },
4967
+ "default": "{\n title: 'TuixModal',\n component: 'tuix-modal',\n argTypes: {\n dark: {\n control: 'boolean',\n },\n visible: {\n control: 'boolean',\n },\n onClose: { action: 'on-close' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"height: 100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <tuix-modal\n ?dark=\"${args.dark}\"\n ?visible=\"${args.visible}\"\n @on-close=\"${args.onClose}\"\n >\n <tuix-text\n slot=\"title\"\n color=${TextVariant.PRIMARY}\n ?dark=${args.dark}\n size=\"${TextSize.S}\"\n >\n Title\n </tuix-text>\n <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n dignissim at orci. Augue vivamus arcu massa porta facilisi.\n </tuix-text>\n <div\n slot=\"actions\"\n style=\"display:flex; gap: 10px; justify-content: flex-end;\n width: 100%;\"\n >\n <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n >Cancel</tuix-button\n >\n </div>\n </tuix-modal>\n </div>\n `,\n}"
4968
+ },
4969
+ {
4970
+ "kind": "variable",
4971
+ "name": "modalExample",
4972
+ "type": {
4973
+ "text": "Story"
4974
+ },
4975
+ "default": "{\n args: {\n dark: false,\n visible: true,\n },\n}"
4976
+ }
4977
+ ],
4978
+ "exports": [
4979
+ {
4980
+ "kind": "js",
4981
+ "name": "default",
4982
+ "declaration": {
4983
+ "name": "meta",
4984
+ "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
4985
+ }
4986
+ },
4987
+ {
4988
+ "kind": "js",
4989
+ "name": "modalExample",
4990
+ "declaration": {
4991
+ "name": "modalExample",
4992
+ "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
4993
+ }
4994
+ }
4995
+ ]
4996
+ },
4957
4997
  {
4958
4998
  "kind": "javascript-module",
4959
4999
  "path": "src/tuix-paper/enums/tuix-paper.enum.ts",
@@ -5048,13 +5088,7 @@
5048
5088
  },
5049
5089
  {
5050
5090
  "kind": "javascript-module",
5051
- "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
5052
- "declarations": [],
5053
- "exports": []
5054
- },
5055
- {
5056
- "kind": "javascript-module",
5057
- "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
5091
+ "path": "src/tuix-table/stories/tuix-table.stories.ts",
5058
5092
  "declarations": [
5059
5093
  {
5060
5094
  "kind": "variable",
@@ -5062,15 +5096,15 @@
5062
5096
  "type": {
5063
5097
  "text": "object"
5064
5098
  },
5065
- "default": "{\n title: 'TuixModal',\n component: 'tuix-modal',\n argTypes: {\n dark: {\n control: 'boolean',\n },\n visible: {\n control: 'boolean',\n },\n onClose: { action: 'on-close' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"height: 100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <tuix-modal\n ?dark=\"${args.dark}\"\n ?visible=\"${args.visible}\"\n @on-close=\"${args.onClose}\"\n >\n <tuix-text\n slot=\"title\"\n color=${TextVariant.PRIMARY}\n ?dark=${args.dark}\n size=\"${TextSize.S}\"\n >\n Title\n </tuix-text>\n <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n dignissim at orci. Augue vivamus arcu massa porta facilisi.\n </tuix-text>\n <div\n slot=\"actions\"\n style=\"display:flex; gap: 10px; justify-content: flex-end;\n width: 100%;\"\n >\n <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n >Cancel</tuix-button\n >\n </div>\n </tuix-modal>\n </div>\n `,\n}"
5099
+ "default": "{\n title: 'TuixTable',\n component: 'tuix-table',\n argTypes: {\n headers: { control: 'object' },\n data: { control: 'object' },\n paginated: { control: 'boolean' },\n disableMobileTable: { control: 'boolean' },\n showMobileTableInTablet: { control: 'boolean' },\n pageSizeOptions: { control: 'object' },\n totalItems: { control: 'number' },\n currentPage: { control: 'number' },\n currentSize: { control: 'number' },\n isLoadingData: { control: 'boolean' },\n loader: { control: 'object' },\n onNextPage: { action: 'next-page' },\n onPreviousPage: { action: 'previous-page' },\n onPageSizeChange: { action: 'page-size-change' },\n },\n}"
5066
5100
  },
5067
5101
  {
5068
5102
  "kind": "variable",
5069
- "name": "modalExample",
5103
+ "name": "tuixTableExample",
5070
5104
  "type": {
5071
5105
  "text": "Story"
5072
5106
  },
5073
- "default": "{\n args: {\n dark: false,\n visible: true,\n },\n}"
5107
+ "default": "{\n render: (args: ArgTypes) => Template(args),\n args: {\n headers: defaultHeaderDescriptors,\n data: defaultData,\n paginated: true,\n disableMobileTable: false,\n showMobileTableInTablet: false,\n pageSizeOptions: [5, 10, 20],\n totalItems: 8,\n currentPage: 1,\n currentSize: 5,\n isLoadingData: false,\n loader: {\n size: '30px',\n color: Palette.MAIN,\n visible: true,\n ariaLabel: 'Loading',\n wrapperStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n padding: '48px 0',\n },\n },\n },\n}"
5074
5108
  }
5075
5109
  ],
5076
5110
  "exports": [
@@ -5079,19 +5113,25 @@
5079
5113
  "name": "default",
5080
5114
  "declaration": {
5081
5115
  "name": "meta",
5082
- "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
5116
+ "module": "src/tuix-table/stories/tuix-table.stories.ts"
5083
5117
  }
5084
5118
  },
5085
5119
  {
5086
5120
  "kind": "js",
5087
- "name": "modalExample",
5121
+ "name": "tuixTableExample",
5088
5122
  "declaration": {
5089
- "name": "modalExample",
5090
- "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
5123
+ "name": "tuixTableExample",
5124
+ "module": "src/tuix-table/stories/tuix-table.stories.ts"
5091
5125
  }
5092
5126
  }
5093
5127
  ]
5094
5128
  },
5129
+ {
5130
+ "kind": "javascript-module",
5131
+ "path": "src/tuix-table/interfaces/tuix-table.interface.ts",
5132
+ "declarations": [],
5133
+ "exports": []
5134
+ },
5095
5135
  {
5096
5136
  "kind": "javascript-module",
5097
5137
  "path": "src/tuix-text/enums/tuix-text.enums.ts",
@@ -5132,46 +5172,6 @@
5132
5172
  }
5133
5173
  ]
5134
5174
  },
5135
- {
5136
- "kind": "javascript-module",
5137
- "path": "src/tuix-table/stories/tuix-table.stories.ts",
5138
- "declarations": [
5139
- {
5140
- "kind": "variable",
5141
- "name": "meta",
5142
- "type": {
5143
- "text": "object"
5144
- },
5145
- "default": "{\n title: 'TuixTable',\n component: 'tuix-table',\n argTypes: {\n headers: { control: 'object' },\n data: { control: 'object' },\n paginated: { control: 'boolean' },\n disableMobileTable: { control: 'boolean' },\n showMobileTableInTablet: { control: 'boolean' },\n pageSizeOptions: { control: 'object' },\n totalItems: { control: 'number' },\n currentPage: { control: 'number' },\n currentSize: { control: 'number' },\n isLoadingData: { control: 'boolean' },\n loader: { control: 'object' },\n onNextPage: { action: 'next-page' },\n onPreviousPage: { action: 'previous-page' },\n onPageSizeChange: { action: 'page-size-change' },\n },\n}"
5146
- },
5147
- {
5148
- "kind": "variable",
5149
- "name": "tuixTableExample",
5150
- "type": {
5151
- "text": "Story"
5152
- },
5153
- "default": "{\n render: (args: ArgTypes) => Template(args),\n args: {\n headers: defaultHeaderDescriptors,\n data: defaultData,\n paginated: true,\n disableMobileTable: false,\n showMobileTableInTablet: false,\n pageSizeOptions: [5, 10, 20],\n totalItems: 8,\n currentPage: 1,\n currentSize: 5,\n isLoadingData: false,\n loader: {\n size: '30px',\n color: Palette.MAIN,\n visible: true,\n ariaLabel: 'Loading',\n wrapperStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n padding: '48px 0',\n },\n },\n },\n}"
5154
- }
5155
- ],
5156
- "exports": [
5157
- {
5158
- "kind": "js",
5159
- "name": "default",
5160
- "declaration": {
5161
- "name": "meta",
5162
- "module": "src/tuix-table/stories/tuix-table.stories.ts"
5163
- }
5164
- },
5165
- {
5166
- "kind": "js",
5167
- "name": "tuixTableExample",
5168
- "declaration": {
5169
- "name": "tuixTableExample",
5170
- "module": "src/tuix-table/stories/tuix-table.stories.ts"
5171
- }
5172
- }
5173
- ]
5174
- },
5175
5175
  {
5176
5176
  "kind": "javascript-module",
5177
5177
  "path": "src/tuix-text/stories/tuix-text.stories.ts",