@universal-material/web 3.0.84 → 3.0.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/custom-elements.json +246 -237
  2. package/package.json +1 -1
  3. package/shared/selection-control/selection-control.d.ts +2 -0
  4. package/shared/selection-control/selection-control.d.ts.map +1 -1
  5. package/shared/selection-control/selection-control.js +4 -1
  6. package/shared/selection-control/selection-control.js.map +1 -1
  7. package/tab-bar/tab-bar.d.ts.map +1 -1
  8. package/tab-bar/tab-bar.js +5 -4
  9. package/tab-bar/tab-bar.js.map +1 -1
package/custom-elements.json CHANGED
@@ -8838,243 +8838,6 @@
8838
8838
  }
8839
8839
  ]
8840
8840
  },
8841
- {
8842
- "kind": "javascript-module",
8843
- "path": "src/progress/circular-progress.styles.ts",
8844
- "declarations": [
8845
- {
8846
- "kind": "variable",
8847
- "name": "styles",
8848
- "default": "css `\n :host {\n position: relative;\n display: inline-block;\n width: var(--_size);\n height: var(--_size);\n margin-inline: auto;\n --_size: var(--u-circular-progress-size, 3rem);\n }\n\n .circular {\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n transform-origin: center;\n }\n .circular.indeterminate {\n position: relative;\n animation: rotate 2s linear infinite;\n }\n .circular:not(.indeterminate) .path {\n transition: stroke-dashoffset 200ms linear;\n }\n\n .path {\n stroke-linecap: round;\n stroke: var(--u-circular-progress-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .track {\n position: absolute;\n inset: 0;\n }\n .track .path {\n stroke: var(--u-circular-progress-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n\n .indeterminate .path {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: dash 1.5s ease-in-out infinite;\n }\n\n .on-going {\n transform: rotate(-80deg);\n }\n .on-going.track {\n transform: rotate(-100deg);\n }\n\n @keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124;\n }\n }\n`"
8849
- }
8850
- ],
8851
- "exports": [
8852
- {
8853
- "kind": "js",
8854
- "name": "styles",
8855
- "declaration": {
8856
- "name": "styles",
8857
- "module": "src/progress/circular-progress.styles.ts"
8858
- }
8859
- }
8860
- ]
8861
- },
8862
- {
8863
- "kind": "javascript-module",
8864
- "path": "src/progress/circular-progress.ts",
8865
- "declarations": [
8866
- {
8867
- "kind": "class",
8868
- "description": "",
8869
- "name": "UmCircularProgress",
8870
- "members": [
8871
- {
8872
- "kind": "field",
8873
- "name": "value",
8874
- "type": {
8875
- "text": "number | undefined"
8876
- },
8877
- "attribute": "value"
8878
- },
8879
- {
8880
- "kind": "field",
8881
- "name": "max",
8882
- "type": {
8883
- "text": "number"
8884
- },
8885
- "default": "1",
8886
- "attribute": "max"
8887
- },
8888
- {
8889
- "kind": "method",
8890
- "name": "#renderCircle",
8891
- "return": {
8892
- "type": {
8893
- "text": "TemplateResult"
8894
- }
8895
- },
8896
- "parameters": [
8897
- {
8898
- "name": "className",
8899
- "type": {
8900
- "text": "string"
8901
- }
8902
- }
8903
- ]
8904
- },
8905
- {
8906
- "kind": "method",
8907
- "name": "#renderIndeterminate",
8908
- "return": {
8909
- "type": {
8910
- "text": "TemplateResult"
8911
- }
8912
- }
8913
- },
8914
- {
8915
- "kind": "method",
8916
- "name": "#renderDeterminate",
8917
- "return": {
8918
- "type": {
8919
- "text": "TemplateResult"
8920
- }
8921
- }
8922
- }
8923
- ],
8924
- "attributes": [
8925
- {
8926
- "name": "value",
8927
- "type": {
8928
- "text": "number | undefined"
8929
- },
8930
- "fieldName": "value"
8931
- },
8932
- {
8933
- "name": "max",
8934
- "type": {
8935
- "text": "number"
8936
- },
8937
- "default": "1",
8938
- "fieldName": "max"
8939
- }
8940
- ],
8941
- "superclass": {
8942
- "name": "LitElement",
8943
- "package": "lit"
8944
- },
8945
- "tagName": "u-circular-progress",
8946
- "customElement": true
8947
- }
8948
- ],
8949
- "exports": [
8950
- {
8951
- "kind": "js",
8952
- "name": "UmCircularProgress",
8953
- "declaration": {
8954
- "name": "UmCircularProgress",
8955
- "module": "src/progress/circular-progress.ts"
8956
- }
8957
- },
8958
- {
8959
- "kind": "custom-element-definition",
8960
- "name": "u-circular-progress",
8961
- "declaration": {
8962
- "name": "UmCircularProgress",
8963
- "module": "src/progress/circular-progress.ts"
8964
- }
8965
- }
8966
- ]
8967
- },
8968
- {
8969
- "kind": "javascript-module",
8970
- "path": "src/progress/progress-bar.styles.ts",
8971
- "declarations": [
8972
- {
8973
- "kind": "variable",
8974
- "name": "styles",
8975
- "default": "css `\n :host {\n --_border-radius: var(--u-progress-bar-border-radius, var(--u-shape-corner-full, 9999px));\n --_height: var(--u-progress-bar-height, 4px);\n }\n\n :host,\n .determinate,\n .indeterminate {\n overflow: hidden;\n border-radius: var(--_border-radius);\n }\n\n .determinate,\n .indeterminate {\n display: flex;\n gap: 4px;\n }\n\n .indeterminate {\n flex: 1;\n margin-inline: -8px;\n border-radius: var(--_border-radius);\n }\n\n .determinate {\n margin-inline-end: -4px;\n }\n .determinate .bar {\n transition: flex-basis 200ms linear;\n }\n\n .last {\n flex-shrink: 1;\n flex-basis: 100%;\n animation: last 2.1s infinite linear;\n }\n\n .slow {\n animation: slow 2.1s infinite linear;\n }\n\n .middle {\n animation: middle 2.1s infinite linear;\n }\n\n .fast {\n animation: fast 2.1s infinite linear;\n }\n\n .first {\n animation: first 2.1s infinite linear;\n }\n\n .bar {\n height: var(--_height);\n border-radius: var(--_border-radius);\n background: var(--u-progress-bar-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .track {\n background: var(--u-progress-bar-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n flex-shrink: 1;\n }\n\n @keyframes slow {\n 0% {\n flex-basis: 0;\n }\n 10% {\n flex-basis: 50%;\n }\n 20% {\n flex-basis: 100%;\n }\n 30% {\n flex-basis: 0;\n }\n }\n @keyframes last {\n 0% {\n flex-basis: 100%;\n }\n 10% {\n flex-basis: 50%;\n }\n 20% {\n flex-basis: 0;\n }\n 100% {\n flex-basis: 0;\n }\n }\n @keyframes middle {\n 10% {\n flex-basis: 0;\n }\n 20% {\n flex-basis: 100%;\n }\n 35% {\n flex-basis: 100%;\n }\n 45% {\n flex-basis: 0;\n }\n }\n @keyframes fast {\n 0% {\n flex-basis: 0;\n }\n 25% {\n flex-basis: 0;\n }\n 35% {\n flex-basis: 100%;\n }\n 45% {\n flex-basis: 100%;\n }\n 55% {\n flex-basis: 0;\n }\n }\n @keyframes first {\n 35% {\n flex-basis: 0;\n }\n 45% {\n flex-basis: 100%;\n }\n 100% {\n flex-basis: 100%;\n }\n }\n @keyframes fast-bar-pre {\n 0% {\n flex-basis: 0;\n }\n 60% {\n flex-basis: 0;\n }\n 90% {\n flex-basis: 100%;\n }\n 100% {\n flex-basis: 100%;\n }\n }\n`"
8976
- }
8977
- ],
8978
- "exports": [
8979
- {
8980
- "kind": "js",
8981
- "name": "styles",
8982
- "declaration": {
8983
- "name": "styles",
8984
- "module": "src/progress/progress-bar.styles.ts"
8985
- }
8986
- }
8987
- ]
8988
- },
8989
- {
8990
- "kind": "javascript-module",
8991
- "path": "src/progress/progress-bar.ts",
8992
- "declarations": [
8993
- {
8994
- "kind": "class",
8995
- "description": "",
8996
- "name": "UmProgressBar",
8997
- "members": [
8998
- {
8999
- "kind": "field",
9000
- "name": "value",
9001
- "type": {
9002
- "text": "number | undefined"
9003
- },
9004
- "attribute": "value"
9005
- },
9006
- {
9007
- "kind": "field",
9008
- "name": "max",
9009
- "type": {
9010
- "text": "number"
9011
- },
9012
- "default": "1",
9013
- "attribute": "max"
9014
- },
9015
- {
9016
- "kind": "method",
9017
- "name": "#renderIndeterminate",
9018
- "return": {
9019
- "type": {
9020
- "text": "TemplateResult"
9021
- }
9022
- }
9023
- },
9024
- {
9025
- "kind": "method",
9026
- "name": "#renderDeterminate",
9027
- "return": {
9028
- "type": {
9029
- "text": "TemplateResult"
9030
- }
9031
- }
9032
- }
9033
- ],
9034
- "attributes": [
9035
- {
9036
- "name": "value",
9037
- "type": {
9038
- "text": "number | undefined"
9039
- },
9040
- "fieldName": "value"
9041
- },
9042
- {
9043
- "name": "max",
9044
- "type": {
9045
- "text": "number"
9046
- },
9047
- "default": "1",
9048
- "fieldName": "max"
9049
- }
9050
- ],
9051
- "superclass": {
9052
- "name": "LitElement",
9053
- "package": "lit"
9054
- },
9055
- "tagName": "u-progress-bar",
9056
- "customElement": true
9057
- }
9058
- ],
9059
- "exports": [
9060
- {
9061
- "kind": "js",
9062
- "name": "UmProgressBar",
9063
- "declaration": {
9064
- "name": "UmProgressBar",
9065
- "module": "src/progress/progress-bar.ts"
9066
- }
9067
- },
9068
- {
9069
- "kind": "custom-element-definition",
9070
- "name": "u-progress-bar",
9071
- "declaration": {
9072
- "name": "UmProgressBar",
9073
- "module": "src/progress/progress-bar.ts"
9074
- }
9075
- }
9076
- ]
9077
- },
9078
8841
  {
9079
8842
  "kind": "javascript-module",
9080
8843
  "path": "src/radio/radio-list-item.ts",
@@ -9828,6 +9591,243 @@
9828
9591
  }
9829
9592
  ]
9830
9593
  },
9594
+ {
9595
+ "kind": "javascript-module",
9596
+ "path": "src/progress/circular-progress.styles.ts",
9597
+ "declarations": [
9598
+ {
9599
+ "kind": "variable",
9600
+ "name": "styles",
9601
+ "default": "css `\n :host {\n position: relative;\n display: inline-block;\n width: var(--_size);\n height: var(--_size);\n margin-inline: auto;\n --_size: var(--u-circular-progress-size, 3rem);\n }\n\n .circular {\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n transform-origin: center;\n }\n .circular.indeterminate {\n position: relative;\n animation: rotate 2s linear infinite;\n }\n .circular:not(.indeterminate) .path {\n transition: stroke-dashoffset 200ms linear;\n }\n\n .path {\n stroke-linecap: round;\n stroke: var(--u-circular-progress-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .track {\n position: absolute;\n inset: 0;\n }\n .track .path {\n stroke: var(--u-circular-progress-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n\n .indeterminate .path {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n animation: dash 1.5s ease-in-out infinite;\n }\n\n .on-going {\n transform: rotate(-80deg);\n }\n .on-going.track {\n transform: rotate(-100deg);\n }\n\n @keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124;\n }\n }\n`"
9602
+ }
9603
+ ],
9604
+ "exports": [
9605
+ {
9606
+ "kind": "js",
9607
+ "name": "styles",
9608
+ "declaration": {
9609
+ "name": "styles",
9610
+ "module": "src/progress/circular-progress.styles.ts"
9611
+ }
9612
+ }
9613
+ ]
9614
+ },
9615
+ {
9616
+ "kind": "javascript-module",
9617
+ "path": "src/progress/circular-progress.ts",
9618
+ "declarations": [
9619
+ {
9620
+ "kind": "class",
9621
+ "description": "",
9622
+ "name": "UmCircularProgress",
9623
+ "members": [
9624
+ {
9625
+ "kind": "field",
9626
+ "name": "value",
9627
+ "type": {
9628
+ "text": "number | undefined"
9629
+ },
9630
+ "attribute": "value"
9631
+ },
9632
+ {
9633
+ "kind": "field",
9634
+ "name": "max",
9635
+ "type": {
9636
+ "text": "number"
9637
+ },
9638
+ "default": "1",
9639
+ "attribute": "max"
9640
+ },
9641
+ {
9642
+ "kind": "method",
9643
+ "name": "#renderCircle",
9644
+ "return": {
9645
+ "type": {
9646
+ "text": "TemplateResult"
9647
+ }
9648
+ },
9649
+ "parameters": [
9650
+ {
9651
+ "name": "className",
9652
+ "type": {
9653
+ "text": "string"
9654
+ }
9655
+ }
9656
+ ]
9657
+ },
9658
+ {
9659
+ "kind": "method",
9660
+ "name": "#renderIndeterminate",
9661
+ "return": {
9662
+ "type": {
9663
+ "text": "TemplateResult"
9664
+ }
9665
+ }
9666
+ },
9667
+ {
9668
+ "kind": "method",
9669
+ "name": "#renderDeterminate",
9670
+ "return": {
9671
+ "type": {
9672
+ "text": "TemplateResult"
9673
+ }
9674
+ }
9675
+ }
9676
+ ],
9677
+ "attributes": [
9678
+ {
9679
+ "name": "value",
9680
+ "type": {
9681
+ "text": "number | undefined"
9682
+ },
9683
+ "fieldName": "value"
9684
+ },
9685
+ {
9686
+ "name": "max",
9687
+ "type": {
9688
+ "text": "number"
9689
+ },
9690
+ "default": "1",
9691
+ "fieldName": "max"
9692
+ }
9693
+ ],
9694
+ "superclass": {
9695
+ "name": "LitElement",
9696
+ "package": "lit"
9697
+ },
9698
+ "tagName": "u-circular-progress",
9699
+ "customElement": true
9700
+ }
9701
+ ],
9702
+ "exports": [
9703
+ {
9704
+ "kind": "js",
9705
+ "name": "UmCircularProgress",
9706
+ "declaration": {
9707
+ "name": "UmCircularProgress",
9708
+ "module": "src/progress/circular-progress.ts"
9709
+ }
9710
+ },
9711
+ {
9712
+ "kind": "custom-element-definition",
9713
+ "name": "u-circular-progress",
9714
+ "declaration": {
9715
+ "name": "UmCircularProgress",
9716
+ "module": "src/progress/circular-progress.ts"
9717
+ }
9718
+ }
9719
+ ]
9720
+ },
9721
+ {
9722
+ "kind": "javascript-module",
9723
+ "path": "src/progress/progress-bar.styles.ts",
9724
+ "declarations": [
9725
+ {
9726
+ "kind": "variable",
9727
+ "name": "styles",
9728
+ "default": "css `\n :host {\n --_border-radius: var(--u-progress-bar-border-radius, var(--u-shape-corner-full, 9999px));\n --_height: var(--u-progress-bar-height, 4px);\n }\n\n :host,\n .determinate,\n .indeterminate {\n overflow: hidden;\n border-radius: var(--_border-radius);\n }\n\n .determinate,\n .indeterminate {\n display: flex;\n gap: 4px;\n }\n\n .indeterminate {\n flex: 1;\n margin-inline: -8px;\n border-radius: var(--_border-radius);\n }\n\n .determinate {\n margin-inline-end: -4px;\n }\n .determinate .bar {\n transition: flex-basis 200ms linear;\n }\n\n .last {\n flex-shrink: 1;\n flex-basis: 100%;\n animation: last 2.1s infinite linear;\n }\n\n .slow {\n animation: slow 2.1s infinite linear;\n }\n\n .middle {\n animation: middle 2.1s infinite linear;\n }\n\n .fast {\n animation: fast 2.1s infinite linear;\n }\n\n .first {\n animation: first 2.1s infinite linear;\n }\n\n .bar {\n height: var(--_height);\n border-radius: var(--_border-radius);\n background: var(--u-progress-bar-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .track {\n background: var(--u-progress-bar-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n flex-shrink: 1;\n }\n\n @keyframes slow {\n 0% {\n flex-basis: 0;\n }\n 10% {\n flex-basis: 50%;\n }\n 20% {\n flex-basis: 100%;\n }\n 30% {\n flex-basis: 0;\n }\n }\n @keyframes last {\n 0% {\n flex-basis: 100%;\n }\n 10% {\n flex-basis: 50%;\n }\n 20% {\n flex-basis: 0;\n }\n 100% {\n flex-basis: 0;\n }\n }\n @keyframes middle {\n 10% {\n flex-basis: 0;\n }\n 20% {\n flex-basis: 100%;\n }\n 35% {\n flex-basis: 100%;\n }\n 45% {\n flex-basis: 0;\n }\n }\n @keyframes fast {\n 0% {\n flex-basis: 0;\n }\n 25% {\n flex-basis: 0;\n }\n 35% {\n flex-basis: 100%;\n }\n 45% {\n flex-basis: 100%;\n }\n 55% {\n flex-basis: 0;\n }\n }\n @keyframes first {\n 35% {\n flex-basis: 0;\n }\n 45% {\n flex-basis: 100%;\n }\n 100% {\n flex-basis: 100%;\n }\n }\n @keyframes fast-bar-pre {\n 0% {\n flex-basis: 0;\n }\n 60% {\n flex-basis: 0;\n }\n 90% {\n flex-basis: 100%;\n }\n 100% {\n flex-basis: 100%;\n }\n }\n`"
9729
+ }
9730
+ ],
9731
+ "exports": [
9732
+ {
9733
+ "kind": "js",
9734
+ "name": "styles",
9735
+ "declaration": {
9736
+ "name": "styles",
9737
+ "module": "src/progress/progress-bar.styles.ts"
9738
+ }
9739
+ }
9740
+ ]
9741
+ },
9742
+ {
9743
+ "kind": "javascript-module",
9744
+ "path": "src/progress/progress-bar.ts",
9745
+ "declarations": [
9746
+ {
9747
+ "kind": "class",
9748
+ "description": "",
9749
+ "name": "UmProgressBar",
9750
+ "members": [
9751
+ {
9752
+ "kind": "field",
9753
+ "name": "value",
9754
+ "type": {
9755
+ "text": "number | undefined"
9756
+ },
9757
+ "attribute": "value"
9758
+ },
9759
+ {
9760
+ "kind": "field",
9761
+ "name": "max",
9762
+ "type": {
9763
+ "text": "number"
9764
+ },
9765
+ "default": "1",
9766
+ "attribute": "max"
9767
+ },
9768
+ {
9769
+ "kind": "method",
9770
+ "name": "#renderIndeterminate",
9771
+ "return": {
9772
+ "type": {
9773
+ "text": "TemplateResult"
9774
+ }
9775
+ }
9776
+ },
9777
+ {
9778
+ "kind": "method",
9779
+ "name": "#renderDeterminate",
9780
+ "return": {
9781
+ "type": {
9782
+ "text": "TemplateResult"
9783
+ }
9784
+ }
9785
+ }
9786
+ ],
9787
+ "attributes": [
9788
+ {
9789
+ "name": "value",
9790
+ "type": {
9791
+ "text": "number | undefined"
9792
+ },
9793
+ "fieldName": "value"
9794
+ },
9795
+ {
9796
+ "name": "max",
9797
+ "type": {
9798
+ "text": "number"
9799
+ },
9800
+ "default": "1",
9801
+ "fieldName": "max"
9802
+ }
9803
+ ],
9804
+ "superclass": {
9805
+ "name": "LitElement",
9806
+ "package": "lit"
9807
+ },
9808
+ "tagName": "u-progress-bar",
9809
+ "customElement": true
9810
+ }
9811
+ ],
9812
+ "exports": [
9813
+ {
9814
+ "kind": "js",
9815
+ "name": "UmProgressBar",
9816
+ "declaration": {
9817
+ "name": "UmProgressBar",
9818
+ "module": "src/progress/progress-bar.ts"
9819
+ }
9820
+ },
9821
+ {
9822
+ "kind": "custom-element-definition",
9823
+ "name": "u-progress-bar",
9824
+ "declaration": {
9825
+ "name": "UmProgressBar",
9826
+ "module": "src/progress/progress-bar.ts"
9827
+ }
9828
+ }
9829
+ ]
9830
+ },
9831
9831
  {
9832
9832
  "kind": "javascript-module",
9833
9833
  "path": "src/ripple/ripple.styles.ts",
@@ -13247,6 +13247,15 @@
13247
13247
  {
13248
13248
  "kind": "method",
13249
13249
  "name": "_setScrollIndicatorsActive"
13250
+ },
13251
+ {
13252
+ "kind": "method",
13253
+ "name": "#attach",
13254
+ "return": {
13255
+ "type": {
13256
+ "text": "Promise<void>"
13257
+ }
13258
+ }
13250
13259
  }
13251
13260
  ],
13252
13261
  "attributes": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.84",
3
+ "version": "3.0.85",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
package/shared/selection-control/selection-control.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from '@lit/reactive-element';
1
2
  import { HTMLTemplateResult, LitElement } from 'lit';
2
3
  import '../../ripple/ripple.js';
3
4
  export declare abstract class UmSelectionControl extends LitElement {
@@ -19,6 +20,7 @@ export declare abstract class UmSelectionControl extends LitElement {
19
20
  set checked(checked: boolean);
20
21
  private _checkedAttribute;
21
22
  protected constructor();
23
+ firstUpdated(changedProperties: PropertyValues): void;
22
24
  connectedCallback(): void;
23
25
  disconnectedCallback(): void;
24
26
  protected render(): HTMLTemplateResult;
package/shared/selection-control/selection-control.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGU,OAAO,CAD3B;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAQ3B;IAEgD,OAAO,CAAC,iBAAiB,CAAS;IAEnF,SAAS;IAKA,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAyBhD"}
1
+ {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGU,OAAO,CAD3B;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAQ3B;IAEgD,OAAO,CAAC,iBAAiB,CAAS;IAEnF,SAAS;IAKA,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAyBhD"}
package/shared/selection-control/selection-control.js CHANGED
@@ -37,10 +37,13 @@ export class UmSelectionControl extends LitElement {
37
37
  this._checkedAttribute = false;
38
38
  this.elementInternals = this.attachInternals();
39
39
  }
40
+ firstUpdated(changedProperties) {
41
+ super.firstUpdated(changedProperties);
42
+ this.input.checked = this.#checked;
43
+ }
40
44
  connectedCallback() {
41
45
  super.connectedCallback();
42
46
  this.addEventListener('click', this.#handleClick);
43
- this.updateComplete.then(() => this.input.checked = this.#checked);
44
47
  }
45
48
  disconnectedCallback() {
46
49
  super.disconnectedCallback();
package/shared/selection-control/selection-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n @property() name: string | undefined = '';\n @property({type: Boolean, reflect: true}) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({type: Boolean})\n get checked() {\n return this.input ? this.input.checked : this.#checked;\n }\n set checked(checked: boolean) {\n this.#checked = checked;\n\n if (this.input) {\n this.input.checked = checked;\n }\n\n this.elementInternals.setFormValue(checked ? this.value : null);\n }\n\n @property({type: Boolean, attribute: 'checked'}) private _checkedAttribute = false;\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n this.updateComplete.then(() => this.input.checked = this.#checked);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick)\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n id=\"input\"\n type=${this.inputType}\n class=\"focus-ring\"\n .checked=${this._checkedAttribute}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>`;\n }\n\n #handleClick(e: Event) {\n if (e.defaultPrevented) {\n return;\n }\n\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
1
+ {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n protected readonly elementInternals: ElementInternals;\n\n @property() name: string | undefined = '';\n @property({type: Boolean, reflect: true}) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({type: Boolean})\n get checked() {\n return this.input ? this.input.checked : this.#checked;\n }\n set checked(checked: boolean) {\n this.#checked = checked;\n\n if (this.input) {\n this.input.checked = checked;\n }\n\n this.elementInternals.setFormValue(checked ? this.value : null);\n }\n\n @property({type: Boolean, attribute: 'checked'}) private _checkedAttribute = false;\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.input.checked = this.#checked;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this.#handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick)\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n id=\"input\"\n type=${this.inputType}\n class=\"focus-ring\"\n .checked=${this._checkedAttribute}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>`;\n }\n\n #handleClick(e: Event) {\n if (e.defaultPrevented) {\n return;\n }\n\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n}\n"]}
package/tab-bar/tab-bar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASnB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEjD,OAAO,CAAC,WAAW,CAAe;IACjC,OAAO,CAAC,YAAY,CAAe;IACtC,OAAO,CAAC,UAAU,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAc;IAErB,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAEzE,IAAI,cAAc,IAAI,MAAM,CAM3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IACD,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAmBpC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAM1E,iBAAiB;cASP,MAAM,IAAI,cAAc;;IA4D3C,mBAAmB;IA4BnB,0BAA0B;CAwB3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASnB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEjD,OAAO,CAAC,WAAW,CAAe;IACjC,OAAO,CAAC,YAAY,CAAe;IACtC,OAAO,CAAC,UAAU,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAc;IAErB,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAEzE,IAAI,cAAc,IAAI,MAAM,CAM3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IACD,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAmBpC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IAM1E,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IA4D3C,mBAAmB;IA4BnB,0BAA0B;CA6B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/tab-bar/tab-bar.js CHANGED
@@ -49,10 +49,7 @@ let UmTabBar = class UmTabBar extends LitElement {
49
49
  }
50
50
  connectedCallback() {
51
51
  super.connectedCallback();
52
- this.updateComplete
53
- .then(() => {
54
- this._setScrollIndicatorsActive();
55
- });
52
+ this.#attach();
56
53
  }
57
54
  render() {
58
55
  return html `
@@ -161,6 +158,10 @@ let UmTabBar = class UmTabBar extends LitElement {
161
158
  this._scrollRight.classList.add('active');
162
159
  }
163
160
  }
161
+ async #attach() {
162
+ await this.updateComplete;
163
+ this._setScrollIndicatorsActive();
164
+ }
164
165
  };
165
166
  __decorate([
166
167
  property({ reflect: true })
package/tab-bar/tab-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAE9C,KAAK,CAAe;IACpB,UAAU,CAAsB;IAChC,eAAe,CAGZ;IAWH,IAAI,cAAc;QAChB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC;IACD,IAAI,cAAc,CAAC,KAAa;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,CAAC,SAAuB;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;YACrF,OAAO;QACT,CAAC;QAED,MAAM,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAE5B,mBAAmB,EAAE,aAAa,EAAE,CAAC;QAErC,SAAS,CAAC,cAAc,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACjE,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEQ,wBAAwB,CAAC,IAAY,EAAE,CAAgB,EAAE,EAAiB;QACjF,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,cAAc;aAChB,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACP,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,aAAa;;;;;;;;;;2BAUR,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBACrD,IAAI,CAAC,yBAAyB;4BACvB,IAAI,CAAC,iBAAiB;;;;;iBAKjC,IAAI,CAAC,cAAc;;;;;;;;aAQvB,CAAC;IACZ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QApGV,UAAK,GAAY,EAAE,CAAC;QACpB,eAAU,GAAiB,IAAI,CAAC;QAChC,oBAAe,GAAmB,IAAI,cAAc,CAAC,GAAG,EAAE;YACxD,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEwB,YAAO,GAA4B,SAAS,CAAC;QAiGxE,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAE/B,MAAM,IAAI,GAAoB,CAAC,CAAC,MAAM,CAAC;YACvC,IAAI,CAAC,KAAK,GAAY,IAAI;iBACvB,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iBACjC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC;YAEnC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC7B,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC;gBAC7B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,8BAAyB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC,CAAA;QAsBD,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACzF,CAAC,CAAC;QAEF,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC;QACxF,CAAC,CAAC;QAnDA,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,iBAAiB,CAgBf;IAEF,yBAAyB,CAExB;IAED,mBAAmB;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;YACrC,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS;YACxC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;YACpC,CAAC,CAAC,CAAC,CAAC;QAEN,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,GAAG,OAAO,IAAI,CAAC;QAC3E,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC;IACnF,CAAC;IAED,aAAa,CAEX;IAEF,cAAc,CAEZ;IAEF,0BAA0B;QACxB,MAAM,gBAAgB,GAAG,CAAC,CAAC;QAE3B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;QAE/E,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;QACpE,MAAM,WAAW,GAAG,KAAK;YACvB,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,YAAY;YAC3C,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;QAE/B,IAAI,WAAW,GAAG,gBAAgB,IAAI,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,WAAW,IAAI,YAAY,GAAG,gBAAgB,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;;AA1K0B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAA8C;AAEzC;IAA9B,KAAK,CAAC,cAAc,CAAC;6CAAmC;AACzB;IAA/B,KAAK,CAAC,eAAe,CAAC;8CAAoC;AAC9B;IAA5B,KAAK,CAAC,YAAY,CAAC;4CAAkC;AACrB;IAAhC,KAAK,CAAC,gBAAgB,CAAC;+CAAqC;AAErB;IAAvC,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;kDAAkC;AAjB9D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqLpB","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({reflect: true}) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({flatten: true}) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({block: 'nearest', behavior: 'smooth'});\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(name: string, _: string | null, __: string | null) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.updateComplete\n .then(() => {\n this._setScrollIndicatorsActive();\n });\n }\n\n protected override render(): TemplateResult {\n return html`\n\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${this.variant === 'secondary' ? 'secondary' : ''}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/>\n </svg>\n </slot>\n </div>`;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>slot\n .assignedElements({flatten: true})\n .filter(e => e instanceof UmTab);\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n }\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding = this.variant === 'primary'\n ? parseInt(styles.paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength = this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}
1
+ {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({reflect: true}) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({flatten: true}) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({block: 'nearest', behavior: 'smooth'});\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(name: string, _: string | null, __: string | null) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#attach();\n }\n\n protected override render(): TemplateResult {\n return html`\n\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${this.variant === 'secondary' ? 'secondary' : ''}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/>\n </svg>\n </slot>\n </div>`;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>slot\n .assignedElements({flatten: true})\n .filter(e => e instanceof UmTab);\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n }\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding = this.variant === 'primary'\n ? parseInt(styles.paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength = this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n this._setScrollIndicatorsActive()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}