@momentum-design/components 0.25.2 → 0.25.4

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.
@@ -2000,236 +2000,6 @@
2000
2000
  }
2001
2001
  ]
2002
2002
  },
2003
- {
2004
- "kind": "javascript-module",
2005
- "path": "components/divider/divider.component.js",
2006
- "declarations": [
2007
- {
2008
- "kind": "class",
2009
- "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
2010
- "name": "Divider",
2011
- "cssProperties": [
2012
- {
2013
- "description": "background color of the divider",
2014
- "name": "--mdc-divider-background-color"
2015
- },
2016
- {
2017
- "description": "width of the divider",
2018
- "name": "--mdc-divider-width"
2019
- },
2020
- {
2021
- "description": "gradient of the horizontal divider",
2022
- "name": "--mdc-divider-horizontal-gradient"
2023
- },
2024
- {
2025
- "description": "gradient of the vertical divider",
2026
- "name": "--mdc-divider-vertical-gradient"
2027
- },
2028
- {
2029
- "description": "font size of label in the text divider",
2030
- "name": "--mdc-divider-text-size"
2031
- },
2032
- {
2033
- "description": "font color of label in the text divider",
2034
- "name": "--mdc-divider-text-color"
2035
- },
2036
- {
2037
- "description": "left and right margin of label in the text divider",
2038
- "name": "--mdc-divider-text-margin"
2039
- },
2040
- {
2041
- "description": "line height of label in the text divider",
2042
- "name": "--mdc-divider-text-line-height"
2043
- },
2044
- {
2045
- "description": "border radius of the grabber button",
2046
- "name": "--mdc-divider-grabber-button-border-radius"
2047
- }
2048
- ],
2049
- "members": [
2050
- {
2051
- "kind": "field",
2052
- "name": "orientation",
2053
- "type": {
2054
- "text": "DividerOrientation"
2055
- },
2056
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2057
- "default": "horizontal",
2058
- "attribute": "orientation",
2059
- "reflects": true
2060
- },
2061
- {
2062
- "kind": "field",
2063
- "name": "variant",
2064
- "type": {
2065
- "text": "DividerVariant"
2066
- },
2067
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2068
- "default": "solid",
2069
- "attribute": "variant",
2070
- "reflects": true
2071
- },
2072
- {
2073
- "kind": "field",
2074
- "name": "arrowDirection",
2075
- "type": {
2076
- "text": "Directions"
2077
- },
2078
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2079
- "default": "'negative'",
2080
- "attribute": "arrow-direction",
2081
- "reflects": true
2082
- },
2083
- {
2084
- "kind": "field",
2085
- "name": "buttonPosition",
2086
- "type": {
2087
- "text": "Directions"
2088
- },
2089
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2090
- "default": "'negative'",
2091
- "attribute": "button-position",
2092
- "reflects": true
2093
- },
2094
- {
2095
- "kind": "method",
2096
- "name": "setVariant",
2097
- "privacy": "private",
2098
- "parameters": [
2099
- {
2100
- "name": "variant",
2101
- "type": {
2102
- "text": "DividerVariant"
2103
- },
2104
- "description": "The variant to set."
2105
- }
2106
- ],
2107
- "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
2108
- },
2109
- {
2110
- "kind": "method",
2111
- "name": "setOrientation",
2112
- "privacy": "private",
2113
- "parameters": [
2114
- {
2115
- "name": "orientation",
2116
- "type": {
2117
- "text": "DividerOrientation"
2118
- },
2119
- "description": "The orientation to set."
2120
- }
2121
- ],
2122
- "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
2123
- },
2124
- {
2125
- "kind": "method",
2126
- "name": "ensureValidDirections",
2127
- "privacy": "private",
2128
- "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
2129
- "parameters": [
2130
- {
2131
- "description": "The buttonPosition to set.",
2132
- "name": "buttonPosition"
2133
- },
2134
- {
2135
- "description": "The arrowDirection to set.",
2136
- "name": "arrowDirection"
2137
- }
2138
- ]
2139
- },
2140
- {
2141
- "kind": "method",
2142
- "name": "setGrabberButton",
2143
- "privacy": "private",
2144
- "return": {
2145
- "type": {
2146
- "text": "void"
2147
- }
2148
- },
2149
- "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
2150
- },
2151
- {
2152
- "kind": "method",
2153
- "name": "getArrowIcon",
2154
- "privacy": "private",
2155
- "return": {
2156
- "type": {
2157
- "text": ""
2158
- }
2159
- },
2160
- "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
2161
- },
2162
- {
2163
- "kind": "method",
2164
- "name": "inferDividerType",
2165
- "privacy": "private",
2166
- "description": "Infers the type of divider based on the kind of slot present.",
2167
- "parameters": [
2168
- {
2169
- "description": "default slot of divider",
2170
- "name": "slot"
2171
- }
2172
- ]
2173
- }
2174
- ],
2175
- "attributes": [
2176
- {
2177
- "name": "orientation",
2178
- "type": {
2179
- "text": "DividerOrientation"
2180
- },
2181
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2182
- "default": "horizontal",
2183
- "fieldName": "orientation"
2184
- },
2185
- {
2186
- "name": "variant",
2187
- "type": {
2188
- "text": "DividerVariant"
2189
- },
2190
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2191
- "default": "solid",
2192
- "fieldName": "variant"
2193
- },
2194
- {
2195
- "name": "arrow-direction",
2196
- "type": {
2197
- "text": "Directions"
2198
- },
2199
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2200
- "default": "'negative'",
2201
- "fieldName": "arrowDirection"
2202
- },
2203
- {
2204
- "name": "button-position",
2205
- "type": {
2206
- "text": "Directions"
2207
- },
2208
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2209
- "default": "'negative'",
2210
- "fieldName": "buttonPosition"
2211
- }
2212
- ],
2213
- "superclass": {
2214
- "name": "Component",
2215
- "module": "/src/models"
2216
- },
2217
- "tagName": "mdc-divider",
2218
- "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
2219
- "customElement": true
2220
- }
2221
- ],
2222
- "exports": [
2223
- {
2224
- "kind": "js",
2225
- "name": "default",
2226
- "declaration": {
2227
- "name": "Divider",
2228
- "module": "components/divider/divider.component.js"
2229
- }
2230
- }
2231
- ]
2232
- },
2233
2003
  {
2234
2004
  "kind": "javascript-module",
2235
2005
  "path": "components/checkbox/checkbox.component.js",
@@ -2769,6 +2539,252 @@
2769
2539
  }
2770
2540
  ]
2771
2541
  },
2542
+ {
2543
+ "kind": "javascript-module",
2544
+ "path": "components/divider/divider.component.js",
2545
+ "declarations": [
2546
+ {
2547
+ "kind": "class",
2548
+ "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
2549
+ "name": "Divider",
2550
+ "cssProperties": [
2551
+ {
2552
+ "description": "background color of the divider",
2553
+ "name": "--mdc-divider-background-color"
2554
+ },
2555
+ {
2556
+ "description": "width of the divider",
2557
+ "name": "--mdc-divider-width"
2558
+ },
2559
+ {
2560
+ "description": "gradient of the horizontal divider",
2561
+ "name": "--mdc-divider-horizontal-gradient"
2562
+ },
2563
+ {
2564
+ "description": "gradient of the vertical divider",
2565
+ "name": "--mdc-divider-vertical-gradient"
2566
+ },
2567
+ {
2568
+ "description": "font size of label in the text divider",
2569
+ "name": "--mdc-divider-text-size"
2570
+ },
2571
+ {
2572
+ "description": "font color of label in the text divider",
2573
+ "name": "--mdc-divider-text-color"
2574
+ },
2575
+ {
2576
+ "description": "left and right margin of label in the text divider",
2577
+ "name": "--mdc-divider-text-margin"
2578
+ },
2579
+ {
2580
+ "description": "line height of label in the text divider",
2581
+ "name": "--mdc-divider-text-line-height"
2582
+ },
2583
+ {
2584
+ "description": "background color of the grabber button in rest state",
2585
+ "name": "--mdc-divider-grabber-button-background-color-normal"
2586
+ },
2587
+ {
2588
+ "description": "background color of the grabber button in hover state",
2589
+ "name": "--mdc-divider-grabber-button-background-color-hover"
2590
+ },
2591
+ {
2592
+ "description": "background color of the grabber button in pressed state",
2593
+ "name": "--mdc-divider-grabber-button-background-color-pressed"
2594
+ },
2595
+ {
2596
+ "description": "border color of the grabber button",
2597
+ "name": "--mdc-divider-grabber-button-border-color"
2598
+ },
2599
+ {
2600
+ "description": "border radius of the grabber button",
2601
+ "name": "--mdc-divider-grabber-button-border-radius"
2602
+ }
2603
+ ],
2604
+ "members": [
2605
+ {
2606
+ "kind": "field",
2607
+ "name": "orientation",
2608
+ "type": {
2609
+ "text": "DividerOrientation"
2610
+ },
2611
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2612
+ "default": "horizontal",
2613
+ "attribute": "orientation",
2614
+ "reflects": true
2615
+ },
2616
+ {
2617
+ "kind": "field",
2618
+ "name": "variant",
2619
+ "type": {
2620
+ "text": "DividerVariant"
2621
+ },
2622
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2623
+ "default": "solid",
2624
+ "attribute": "variant",
2625
+ "reflects": true
2626
+ },
2627
+ {
2628
+ "kind": "field",
2629
+ "name": "arrowDirection",
2630
+ "type": {
2631
+ "text": "Directions"
2632
+ },
2633
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2634
+ "default": "'negative'",
2635
+ "attribute": "arrow-direction",
2636
+ "reflects": true
2637
+ },
2638
+ {
2639
+ "kind": "field",
2640
+ "name": "buttonPosition",
2641
+ "type": {
2642
+ "text": "Directions"
2643
+ },
2644
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2645
+ "default": "'negative'",
2646
+ "attribute": "button-position",
2647
+ "reflects": true
2648
+ },
2649
+ {
2650
+ "kind": "method",
2651
+ "name": "setVariant",
2652
+ "privacy": "private",
2653
+ "parameters": [
2654
+ {
2655
+ "name": "variant",
2656
+ "type": {
2657
+ "text": "DividerVariant"
2658
+ },
2659
+ "description": "The variant to set."
2660
+ }
2661
+ ],
2662
+ "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
2663
+ },
2664
+ {
2665
+ "kind": "method",
2666
+ "name": "setOrientation",
2667
+ "privacy": "private",
2668
+ "parameters": [
2669
+ {
2670
+ "name": "orientation",
2671
+ "type": {
2672
+ "text": "DividerOrientation"
2673
+ },
2674
+ "description": "The orientation to set."
2675
+ }
2676
+ ],
2677
+ "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
2678
+ },
2679
+ {
2680
+ "kind": "method",
2681
+ "name": "ensureValidDirections",
2682
+ "privacy": "private",
2683
+ "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
2684
+ "parameters": [
2685
+ {
2686
+ "description": "The buttonPosition to set.",
2687
+ "name": "buttonPosition"
2688
+ },
2689
+ {
2690
+ "description": "The arrowDirection to set.",
2691
+ "name": "arrowDirection"
2692
+ }
2693
+ ]
2694
+ },
2695
+ {
2696
+ "kind": "method",
2697
+ "name": "setGrabberButton",
2698
+ "privacy": "private",
2699
+ "return": {
2700
+ "type": {
2701
+ "text": "void"
2702
+ }
2703
+ },
2704
+ "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
2705
+ },
2706
+ {
2707
+ "kind": "method",
2708
+ "name": "getArrowIcon",
2709
+ "privacy": "private",
2710
+ "return": {
2711
+ "type": {
2712
+ "text": ""
2713
+ }
2714
+ },
2715
+ "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
2716
+ },
2717
+ {
2718
+ "kind": "method",
2719
+ "name": "inferDividerType",
2720
+ "privacy": "private",
2721
+ "description": "Infers the type of divider based on the kind of slot present.",
2722
+ "parameters": [
2723
+ {
2724
+ "description": "default slot of divider",
2725
+ "name": "slot"
2726
+ }
2727
+ ]
2728
+ }
2729
+ ],
2730
+ "attributes": [
2731
+ {
2732
+ "name": "orientation",
2733
+ "type": {
2734
+ "text": "DividerOrientation"
2735
+ },
2736
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
2737
+ "default": "horizontal",
2738
+ "fieldName": "orientation"
2739
+ },
2740
+ {
2741
+ "name": "variant",
2742
+ "type": {
2743
+ "text": "DividerVariant"
2744
+ },
2745
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
2746
+ "default": "solid",
2747
+ "fieldName": "variant"
2748
+ },
2749
+ {
2750
+ "name": "arrow-direction",
2751
+ "type": {
2752
+ "text": "Directions"
2753
+ },
2754
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2755
+ "default": "'negative'",
2756
+ "fieldName": "arrowDirection"
2757
+ },
2758
+ {
2759
+ "name": "button-position",
2760
+ "type": {
2761
+ "text": "Directions"
2762
+ },
2763
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
2764
+ "default": "'negative'",
2765
+ "fieldName": "buttonPosition"
2766
+ }
2767
+ ],
2768
+ "superclass": {
2769
+ "name": "Component",
2770
+ "module": "/src/models"
2771
+ },
2772
+ "tagName": "mdc-divider",
2773
+ "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
2774
+ "customElement": true
2775
+ }
2776
+ ],
2777
+ "exports": [
2778
+ {
2779
+ "kind": "js",
2780
+ "name": "default",
2781
+ "declaration": {
2782
+ "name": "Divider",
2783
+ "module": "components/divider/divider.component.js"
2784
+ }
2785
+ }
2786
+ ]
2787
+ },
2772
2788
  {
2773
2789
  "kind": "javascript-module",
2774
2790
  "path": "components/formfieldgroup/formfieldgroup.component.js",
@@ -3533,7 +3549,7 @@
3533
3549
  "declarations": [
3534
3550
  {
3535
3551
  "kind": "class",
3536
- "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `shouldCache` is set to true, the IconProvider will cache the icons\nin a Map to avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nKeep in mind that this cache is not persisted and will be lost when the\nIconProvider is removed from the DOM.",
3552
+ "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `cacheStrategy` is provided, the IconProvider will cache the icons\nin the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
3537
3553
  "name": "IconProvider",
3538
3554
  "slots": [
3539
3555
  {
@@ -3594,14 +3610,23 @@
3594
3610
  },
3595
3611
  {
3596
3612
  "kind": "field",
3597
- "name": "shouldCache",
3613
+ "name": "cacheStrategy",
3598
3614
  "type": {
3599
- "text": "boolean | undefined"
3615
+ "text": "'in-memory-cache' | 'web-cache-api' | undefined"
3600
3616
  },
3601
- "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
3602
- "default": "false",
3603
- "attribute": "should-cache",
3604
- "reflects": true
3617
+ "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
3618
+ "default": "undefined",
3619
+ "attribute": "cache-strategy"
3620
+ },
3621
+ {
3622
+ "kind": "field",
3623
+ "name": "cacheName",
3624
+ "type": {
3625
+ "text": "string | undefined"
3626
+ },
3627
+ "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
3628
+ "default": "undefined",
3629
+ "attribute": "cache-name"
3605
3630
  },
3606
3631
  {
3607
3632
  "kind": "method",
@@ -3656,13 +3681,22 @@
3656
3681
  "fieldName": "size"
3657
3682
  },
3658
3683
  {
3659
- "name": "should-cache",
3684
+ "name": "cache-strategy",
3660
3685
  "type": {
3661
- "text": "boolean | undefined"
3686
+ "text": "'in-memory-cache' | 'web-cache-api' | undefined"
3662
3687
  },
3663
- "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
3664
- "default": "false",
3665
- "fieldName": "shouldCache"
3688
+ "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
3689
+ "default": "undefined",
3690
+ "fieldName": "cacheStrategy"
3691
+ },
3692
+ {
3693
+ "name": "cache-name",
3694
+ "type": {
3695
+ "text": "string | undefined"
3696
+ },
3697
+ "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
3698
+ "default": "undefined",
3699
+ "fieldName": "cacheName"
3666
3700
  }
3667
3701
  ],
3668
3702
  "superclass": {
@@ -3670,7 +3704,7 @@
3670
3704
  "module": "/src/models"
3671
3705
  },
3672
3706
  "tagName": "mdc-iconprovider",
3673
- "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `shouldCache` is set to true, the IconProvider will cache the icons\n * in a Map to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * Keep in mind that this cache is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
3707
+ "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `cacheStrategy` is provided, the IconProvider will cache the icons\n * in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
3674
3708
  "customElement": true
3675
3709
  }
3676
3710
  ],
package/dist/index.d.ts CHANGED
@@ -18,6 +18,8 @@ import Radio from './components/radio';
18
18
  import VirtualizedList from './components/virtualizedlist';
19
19
  import Tab from './components/tab';
20
20
  import FormfieldGroup from './components/formfieldgroup';
21
+ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
21
22
  import type { TextType } from './components/text/text.types';
22
23
  export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
23
24
  export type { TextType, };
25
+ export { inMemoryCache, webAPIIconsCache };
package/dist/index.js CHANGED
@@ -18,4 +18,6 @@ import Radio from './components/radio';
18
18
  import VirtualizedList from './components/virtualizedlist';
19
19
  import Tab from './components/tab';
20
20
  import FormfieldGroup from './components/formfieldgroup';
21
+ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
21
22
  export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
23
+ export { inMemoryCache, webAPIIconsCache };
@@ -37,6 +37,13 @@ import Component from '../../components/divider';
37
37
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
38
38
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
39
39
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
40
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
41
+ * in rest state
42
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
43
+ * in hover state
44
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
45
+ * in pressed state
46
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
40
47
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
41
48
  */
42
49
  declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
@@ -40,6 +40,13 @@ import { TAG_NAME } from '../../components/divider/divider.constants';
40
40
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
41
41
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
42
42
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
43
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
44
+ * in rest state
45
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
46
+ * in hover state
47
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
48
+ * in pressed state
49
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
43
50
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
44
51
  */
45
52
  const reactWrapper = createComponent({
@@ -7,11 +7,15 @@ import Component from '../../components/iconprovider';
7
7
  * that only a url has to be passed in from which the icons will be
8
8
  * fetched.
9
9
  *
10
- * If `shouldCache` is set to true, the IconProvider will cache the icons
11
- * in a Map to avoid fetching the same icon multiple times over the network.
10
+ * If `cacheStrategy` is provided, the IconProvider will cache the icons
11
+ * in the selected cache (either web-api-cache or in-memory-cache),
12
+ * to avoid fetching the same icon multiple times over the network.
12
13
  * This is useful when the same icon is used multiple times in the application.
13
- * Keep in mind that this cache is not persisted and will be lost when the
14
+ * To consider:
15
+ * - The `in-memory-cache` is not persisted and will be lost when the
14
16
  * IconProvider is removed from the DOM.
17
+ * - The `web-api-cache` is persisted, but only works in https environments
18
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
15
19
  *
16
20
  * @tagname mdc-iconprovider
17
21
  *