@momentum-design/components 0.62.1 → 0.62.3

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.
@@ -492,6 +492,67 @@
492
492
  }
493
493
  ]
494
494
  },
495
+ {
496
+ "kind": "javascript-module",
497
+ "path": "components/appheader/appheader.component.js",
498
+ "declarations": [
499
+ {
500
+ "kind": "class",
501
+ "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
502
+ "name": "Appheader",
503
+ "cssParts": [
504
+ {
505
+ "description": "The main container for styling the header.",
506
+ "name": "container"
507
+ },
508
+ {
509
+ "description": "The leading section of the header.",
510
+ "name": "leading-section"
511
+ },
512
+ {
513
+ "description": "The center section of the header.",
514
+ "name": "center-section"
515
+ },
516
+ {
517
+ "description": "The trailing section of the header.",
518
+ "name": "trailing-section"
519
+ }
520
+ ],
521
+ "slots": [
522
+ {
523
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
524
+ "name": "leading"
525
+ },
526
+ {
527
+ "description": "Slot for the center section (e.g., search bar, icons).",
528
+ "name": "center"
529
+ },
530
+ {
531
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
532
+ "name": "trailing"
533
+ }
534
+ ],
535
+ "members": [],
536
+ "superclass": {
537
+ "name": "Component",
538
+ "module": "/src/models"
539
+ },
540
+ "tagName": "mdc-appheader",
541
+ "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
542
+ "customElement": true
543
+ }
544
+ ],
545
+ "exports": [
546
+ {
547
+ "kind": "js",
548
+ "name": "default",
549
+ "declaration": {
550
+ "name": "Appheader",
551
+ "module": "components/appheader/appheader.component.js"
552
+ }
553
+ }
554
+ ]
555
+ },
495
556
  {
496
557
  "kind": "javascript-module",
497
558
  "path": "components/avatar/avatar.component.js",
@@ -736,67 +797,6 @@
736
797
  }
737
798
  ]
738
799
  },
739
- {
740
- "kind": "javascript-module",
741
- "path": "components/appheader/appheader.component.js",
742
- "declarations": [
743
- {
744
- "kind": "class",
745
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
746
- "name": "Appheader",
747
- "cssParts": [
748
- {
749
- "description": "The main container for styling the header.",
750
- "name": "container"
751
- },
752
- {
753
- "description": "The leading section of the header.",
754
- "name": "leading-section"
755
- },
756
- {
757
- "description": "The center section of the header.",
758
- "name": "center-section"
759
- },
760
- {
761
- "description": "The trailing section of the header.",
762
- "name": "trailing-section"
763
- }
764
- ],
765
- "slots": [
766
- {
767
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
768
- "name": "leading"
769
- },
770
- {
771
- "description": "Slot for the center section (e.g., search bar, icons).",
772
- "name": "center"
773
- },
774
- {
775
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
776
- "name": "trailing"
777
- }
778
- ],
779
- "members": [],
780
- "superclass": {
781
- "name": "Component",
782
- "module": "/src/models"
783
- },
784
- "tagName": "mdc-appheader",
785
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
786
- "customElement": true
787
- }
788
- ],
789
- "exports": [
790
- {
791
- "kind": "js",
792
- "name": "default",
793
- "declaration": {
794
- "name": "Appheader",
795
- "module": "components/appheader/appheader.component.js"
796
- }
797
- }
798
- ]
799
- },
800
800
  {
801
801
  "kind": "javascript-module",
802
802
  "path": "components/avatarbutton/avatarbutton.component.js",
@@ -7951,141 +7951,337 @@
7951
7951
  },
7952
7952
  {
7953
7953
  "kind": "javascript-module",
7954
- "path": "components/input/input.component.js",
7954
+ "path": "components/iconprovider/iconprovider.component.js",
7955
7955
  "declarations": [
7956
7956
  {
7957
7957
  "kind": "class",
7958
- "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
7959
- "name": "Input",
7960
- "cssProperties": [
7961
- {
7962
- "description": "Border color for the input container when disabled",
7963
- "name": "--mdc-input-disabled-border-color"
7964
- },
7965
- {
7966
- "description": "Text color for the input field when disabled",
7967
- "name": "--mdc-input-disabled-text-color"
7968
- },
7969
- {
7970
- "description": "Background color for the input field when disabled",
7971
- "name": "--mdc-input-disabled-background-color"
7972
- },
7973
- {
7974
- "description": "Border color for the input container",
7975
- "name": "--mdc-input-border-color"
7976
- },
7977
- {
7978
- "description": "Text color for the input field",
7979
- "name": "--mdc-input-text-color"
7980
- },
7981
- {
7982
- "description": "Background color for the input field",
7983
- "name": "--mdc-input-background-color"
7984
- },
7985
- {
7986
- "description": "Background color for the selected text",
7987
- "name": "--mdc-input-selection-background-color"
7988
- },
7989
- {
7990
- "description": "Text color for the selected text",
7991
- "name": "--mdc-input-selection-text-color"
7992
- },
7993
- {
7994
- "description": "Text color for the help text",
7995
- "name": "--mdc-input-support-text-color"
7996
- },
7997
- {
7998
- "description": "Background color for the input field when hovered",
7999
- "name": "--mdc-input-hover-background-color"
8000
- },
8001
- {
8002
- "description": "Background color for the input field when focused",
8003
- "name": "--mdc-input-focused-background-color"
8004
- },
8005
- {
8006
- "description": "Border color for the input container when focused",
8007
- "name": "--mdc-input-focused-border-color"
8008
- },
8009
- {
8010
- "description": "Border color for the input container when error",
8011
- "name": "--mdc-input-error-border-color"
8012
- },
8013
- {
8014
- "description": "Border color for the input container when warning",
8015
- "name": "--mdc-input-warning-border-color"
8016
- },
8017
- {
8018
- "description": "Border color for the input container when success",
8019
- "name": "--mdc-input-success-border-color"
8020
- },
7958
+ "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in 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).",
7959
+ "name": "IconProvider",
7960
+ "slots": [
8021
7961
  {
8022
- "description": "Border color for the input container when primary",
8023
- "name": "--mdc-input-primary-border-color"
7962
+ "description": "children",
7963
+ "name": ""
8024
7964
  }
8025
7965
  ],
8026
7966
  "members": [
8027
7967
  {
8028
7968
  "kind": "field",
8029
- "name": "placeholder",
8030
- "type": {
8031
- "text": "string"
8032
- },
8033
- "default": "''",
8034
- "description": "The placeholder text that is displayed when the input field is empty.",
8035
- "attribute": "placeholder"
7969
+ "name": "Context",
7970
+ "privacy": "public",
7971
+ "static": true,
7972
+ "description": "Context object of the IconProvider, to be consumed by child components",
7973
+ "readonly": true
8036
7974
  },
8037
7975
  {
8038
7976
  "kind": "field",
8039
- "name": "readonly",
7977
+ "name": "iconSet",
8040
7978
  "type": {
8041
- "text": "boolean"
7979
+ "text": "IconSet | undefined"
8042
7980
  },
8043
- "default": "false",
8044
- "description": "readonly attribute of the input field. If true, the input field is read-only.",
8045
- "attribute": "readonly"
7981
+ "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
7982
+ "default": "momentum-icons",
7983
+ "attribute": "icon-set",
7984
+ "reflects": true
8046
7985
  },
8047
7986
  {
8048
7987
  "kind": "field",
8049
- "name": "prefixText",
7988
+ "name": "url",
8050
7989
  "type": {
8051
7990
  "text": "string | undefined"
8052
7991
  },
8053
- "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
8054
- "attribute": "prefix-text"
7992
+ "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
7993
+ "attribute": "url"
8055
7994
  },
8056
7995
  {
8057
7996
  "kind": "field",
8058
- "name": "leadingIcon",
7997
+ "name": "fileExtension",
8059
7998
  "type": {
8060
- "text": "IconNames | undefined"
7999
+ "text": "string | undefined"
8061
8000
  },
8062
- "description": "The leading icon that is displayed before the input field.",
8063
- "attribute": "leading-icon"
8001
+ "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
8002
+ "default": "svg",
8003
+ "attribute": "file-extension",
8004
+ "reflects": true
8064
8005
  },
8065
8006
  {
8066
8007
  "kind": "field",
8067
- "name": "trailingButton",
8008
+ "name": "lengthUnit",
8068
8009
  "type": {
8069
- "text": "boolean"
8010
+ "text": "string"
8070
8011
  },
8071
- "default": "false",
8072
- "description": "The trailing button when set to true, shows a clear button that clears the input field.",
8073
- "attribute": "trailing-button"
8012
+ "description": "Length unit used for sizing of icons",
8013
+ "default": "em",
8014
+ "attribute": "length-unit",
8015
+ "reflects": true
8074
8016
  },
8075
8017
  {
8076
8018
  "kind": "field",
8077
- "name": "maxlength",
8019
+ "name": "size",
8078
8020
  "type": {
8079
8021
  "text": "number | undefined"
8080
8022
  },
8081
- "description": "The maximum number of characters that the input field can accept.",
8082
- "attribute": "maxlength"
8023
+ "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
8024
+ "default": "1",
8025
+ "attribute": "size",
8026
+ "reflects": true
8083
8027
  },
8084
8028
  {
8085
8029
  "kind": "field",
8086
- "name": "minlength",
8030
+ "name": "cacheStrategy",
8087
8031
  "type": {
8088
- "text": "number | undefined"
8032
+ "text": "CacheStrategy | undefined"
8033
+ },
8034
+ "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\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.",
8035
+ "default": "undefined",
8036
+ "attribute": "cache-strategy"
8037
+ },
8038
+ {
8039
+ "kind": "field",
8040
+ "name": "cacheName",
8041
+ "type": {
8042
+ "text": "string | undefined"
8043
+ },
8044
+ "description": "Icons Cache Name to use (cache strategy must be provided)\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.",
8045
+ "default": "undefined",
8046
+ "attribute": "cache-name"
8047
+ },
8048
+ {
8049
+ "kind": "method",
8050
+ "name": "updateValuesInContext",
8051
+ "privacy": "private"
8052
+ },
8053
+ {
8054
+ "kind": "method",
8055
+ "name": "updateContext",
8056
+ "privacy": "protected",
8057
+ "return": {
8058
+ "type": {
8059
+ "text": "void"
8060
+ }
8061
+ }
8062
+ }
8063
+ ],
8064
+ "attributes": [
8065
+ {
8066
+ "name": "icon-set",
8067
+ "type": {
8068
+ "text": "IconSet | undefined"
8069
+ },
8070
+ "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
8071
+ "default": "momentum-icons",
8072
+ "fieldName": "iconSet"
8073
+ },
8074
+ {
8075
+ "name": "url",
8076
+ "type": {
8077
+ "text": "string | undefined"
8078
+ },
8079
+ "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
8080
+ "fieldName": "url"
8081
+ },
8082
+ {
8083
+ "name": "file-extension",
8084
+ "type": {
8085
+ "text": "string | undefined"
8086
+ },
8087
+ "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
8088
+ "default": "svg",
8089
+ "fieldName": "fileExtension"
8090
+ },
8091
+ {
8092
+ "name": "length-unit",
8093
+ "type": {
8094
+ "text": "string"
8095
+ },
8096
+ "description": "Length unit used for sizing of icons",
8097
+ "default": "em",
8098
+ "fieldName": "lengthUnit"
8099
+ },
8100
+ {
8101
+ "name": "size",
8102
+ "type": {
8103
+ "text": "number | undefined"
8104
+ },
8105
+ "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
8106
+ "default": "1",
8107
+ "fieldName": "size"
8108
+ },
8109
+ {
8110
+ "name": "cache-strategy",
8111
+ "type": {
8112
+ "text": "CacheStrategy | undefined"
8113
+ },
8114
+ "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\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.",
8115
+ "default": "undefined",
8116
+ "fieldName": "cacheStrategy"
8117
+ },
8118
+ {
8119
+ "name": "cache-name",
8120
+ "type": {
8121
+ "text": "string | undefined"
8122
+ },
8123
+ "description": "Icons Cache Name to use (cache strategy must be provided)\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.",
8124
+ "default": "undefined",
8125
+ "fieldName": "cacheName"
8126
+ }
8127
+ ],
8128
+ "superclass": {
8129
+ "name": "Provider",
8130
+ "module": "/src/models"
8131
+ },
8132
+ "tagName": "mdc-iconprovider",
8133
+ "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons 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 */",
8134
+ "customElement": true
8135
+ }
8136
+ ],
8137
+ "exports": [
8138
+ {
8139
+ "kind": "js",
8140
+ "name": "default",
8141
+ "declaration": {
8142
+ "name": "IconProvider",
8143
+ "module": "components/iconprovider/iconprovider.component.js"
8144
+ }
8145
+ }
8146
+ ]
8147
+ },
8148
+ {
8149
+ "kind": "javascript-module",
8150
+ "path": "components/input/input.component.js",
8151
+ "declarations": [
8152
+ {
8153
+ "kind": "class",
8154
+ "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
8155
+ "name": "Input",
8156
+ "cssProperties": [
8157
+ {
8158
+ "description": "Border color for the input container when disabled",
8159
+ "name": "--mdc-input-disabled-border-color"
8160
+ },
8161
+ {
8162
+ "description": "Text color for the input field when disabled",
8163
+ "name": "--mdc-input-disabled-text-color"
8164
+ },
8165
+ {
8166
+ "description": "Background color for the input field when disabled",
8167
+ "name": "--mdc-input-disabled-background-color"
8168
+ },
8169
+ {
8170
+ "description": "Border color for the input container",
8171
+ "name": "--mdc-input-border-color"
8172
+ },
8173
+ {
8174
+ "description": "Text color for the input field",
8175
+ "name": "--mdc-input-text-color"
8176
+ },
8177
+ {
8178
+ "description": "Background color for the input field",
8179
+ "name": "--mdc-input-background-color"
8180
+ },
8181
+ {
8182
+ "description": "Background color for the selected text",
8183
+ "name": "--mdc-input-selection-background-color"
8184
+ },
8185
+ {
8186
+ "description": "Text color for the selected text",
8187
+ "name": "--mdc-input-selection-text-color"
8188
+ },
8189
+ {
8190
+ "description": "Text color for the help text",
8191
+ "name": "--mdc-input-support-text-color"
8192
+ },
8193
+ {
8194
+ "description": "Background color for the input field when hovered",
8195
+ "name": "--mdc-input-hover-background-color"
8196
+ },
8197
+ {
8198
+ "description": "Background color for the input field when focused",
8199
+ "name": "--mdc-input-focused-background-color"
8200
+ },
8201
+ {
8202
+ "description": "Border color for the input container when focused",
8203
+ "name": "--mdc-input-focused-border-color"
8204
+ },
8205
+ {
8206
+ "description": "Border color for the input container when error",
8207
+ "name": "--mdc-input-error-border-color"
8208
+ },
8209
+ {
8210
+ "description": "Border color for the input container when warning",
8211
+ "name": "--mdc-input-warning-border-color"
8212
+ },
8213
+ {
8214
+ "description": "Border color for the input container when success",
8215
+ "name": "--mdc-input-success-border-color"
8216
+ },
8217
+ {
8218
+ "description": "Border color for the input container when primary",
8219
+ "name": "--mdc-input-primary-border-color"
8220
+ }
8221
+ ],
8222
+ "members": [
8223
+ {
8224
+ "kind": "field",
8225
+ "name": "placeholder",
8226
+ "type": {
8227
+ "text": "string"
8228
+ },
8229
+ "default": "''",
8230
+ "description": "The placeholder text that is displayed when the input field is empty.",
8231
+ "attribute": "placeholder"
8232
+ },
8233
+ {
8234
+ "kind": "field",
8235
+ "name": "readonly",
8236
+ "type": {
8237
+ "text": "boolean"
8238
+ },
8239
+ "default": "false",
8240
+ "description": "readonly attribute of the input field. If true, the input field is read-only.",
8241
+ "attribute": "readonly"
8242
+ },
8243
+ {
8244
+ "kind": "field",
8245
+ "name": "prefixText",
8246
+ "type": {
8247
+ "text": "string | undefined"
8248
+ },
8249
+ "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
8250
+ "attribute": "prefix-text"
8251
+ },
8252
+ {
8253
+ "kind": "field",
8254
+ "name": "leadingIcon",
8255
+ "type": {
8256
+ "text": "IconNames | undefined"
8257
+ },
8258
+ "description": "The leading icon that is displayed before the input field.",
8259
+ "attribute": "leading-icon"
8260
+ },
8261
+ {
8262
+ "kind": "field",
8263
+ "name": "trailingButton",
8264
+ "type": {
8265
+ "text": "boolean"
8266
+ },
8267
+ "default": "false",
8268
+ "description": "The trailing button when set to true, shows a clear button that clears the input field.",
8269
+ "attribute": "trailing-button"
8270
+ },
8271
+ {
8272
+ "kind": "field",
8273
+ "name": "maxlength",
8274
+ "type": {
8275
+ "text": "number | undefined"
8276
+ },
8277
+ "description": "The maximum number of characters that the input field can accept.",
8278
+ "attribute": "maxlength"
8279
+ },
8280
+ {
8281
+ "kind": "field",
8282
+ "name": "minlength",
8283
+ "type": {
8284
+ "text": "number | undefined"
8089
8285
  },
8090
8286
  "description": "The minimum number of characters that the input field can accept.",
8091
8287
  "attribute": "minlength"
@@ -8900,187 +9096,419 @@
8900
9096
  },
8901
9097
  {
8902
9098
  "kind": "javascript-module",
8903
- "path": "components/iconprovider/iconprovider.component.js",
9099
+ "path": "components/link/link.component.js",
8904
9100
  "declarations": [
8905
9101
  {
8906
9102
  "kind": "class",
8907
- "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in 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).",
8908
- "name": "IconProvider",
8909
- "slots": [
8910
- {
8911
- "description": "children",
8912
- "name": ""
8913
- }
8914
- ],
9103
+ "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be the text content.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
9104
+ "name": "Link",
8915
9105
  "members": [
8916
9106
  {
8917
9107
  "kind": "field",
8918
- "name": "Context",
8919
- "privacy": "public",
8920
- "static": true,
8921
- "description": "Context object of the IconProvider, to be consumed by child components",
8922
- "readonly": true
9108
+ "name": "size",
9109
+ "type": {
9110
+ "text": "LinkSize"
9111
+ },
9112
+ "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
9113
+ "default": "large",
9114
+ "attribute": "size",
9115
+ "reflects": true
9116
+ },
9117
+ {
9118
+ "kind": "method",
9119
+ "name": "getIconSize",
9120
+ "privacy": "private",
9121
+ "return": {
9122
+ "type": {
9123
+ "text": ""
9124
+ }
9125
+ },
9126
+ "description": "Method to get the size of the trailing icon based on the link size."
8923
9127
  },
8924
9128
  {
8925
9129
  "kind": "field",
8926
- "name": "iconSet",
9130
+ "name": "iconName",
8927
9131
  "type": {
8928
- "text": "IconSet | undefined"
9132
+ "text": "IconNames | undefined"
8929
9133
  },
8930
- "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
8931
- "default": "momentum-icons",
8932
- "attribute": "icon-set",
8933
- "reflects": true
9134
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
9135
+ "attribute": "icon-name",
9136
+ "inheritedFrom": {
9137
+ "name": "IconNameMixin",
9138
+ "module": "utils/mixins/IconNameMixin.js"
9139
+ }
8934
9140
  },
8935
9141
  {
8936
9142
  "kind": "field",
8937
- "name": "url",
9143
+ "name": "disabled",
8938
9144
  "type": {
8939
- "text": "string | undefined"
9145
+ "text": "boolean | undefined"
8940
9146
  },
8941
- "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
8942
- "attribute": "url"
9147
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9148
+ "default": "undefined",
9149
+ "attribute": "disabled",
9150
+ "reflects": true,
9151
+ "inheritedFrom": {
9152
+ "name": "DisabledMixin",
9153
+ "module": "utils/mixins/DisabledMixin.js"
9154
+ }
8943
9155
  },
8944
9156
  {
8945
9157
  "kind": "field",
8946
- "name": "fileExtension",
9158
+ "name": "tabIndex",
8947
9159
  "type": {
8948
- "text": "string | undefined"
9160
+ "text": "number"
8949
9161
  },
8950
- "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
8951
- "default": "svg",
8952
- "attribute": "file-extension",
8953
- "reflects": true
9162
+ "default": "0",
9163
+ "description": "This property specifies the tab order of the element.",
9164
+ "attribute": "tabIndex",
9165
+ "reflects": true,
9166
+ "inheritedFrom": {
9167
+ "name": "TabIndexMixin",
9168
+ "module": "utils/mixins/TabIndexMixin.js"
9169
+ }
8954
9170
  },
8955
9171
  {
8956
9172
  "kind": "field",
8957
- "name": "lengthUnit",
9173
+ "name": "inline",
8958
9174
  "type": {
8959
- "text": "string"
9175
+ "text": "boolean"
8960
9176
  },
8961
- "description": "Length unit used for sizing of icons",
8962
- "default": "em",
8963
- "attribute": "length-unit",
8964
- "reflects": true
9177
+ "description": "The link can be inline or standalone.",
9178
+ "default": "false",
9179
+ "attribute": "inline",
9180
+ "reflects": true,
9181
+ "inheritedFrom": {
9182
+ "name": "Linksimple",
9183
+ "module": "components/linksimple/linksimple.component.js"
9184
+ }
8965
9185
  },
8966
9186
  {
8967
9187
  "kind": "field",
8968
- "name": "size",
9188
+ "name": "inverted",
8969
9189
  "type": {
8970
- "text": "number | undefined"
9190
+ "text": "boolean"
8971
9191
  },
8972
- "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
8973
- "default": "1",
8974
- "attribute": "size",
8975
- "reflects": true
9192
+ "description": "The link color can be inverted by setting the inverted attribute to true.",
9193
+ "default": "false",
9194
+ "attribute": "inverted",
9195
+ "reflects": true,
9196
+ "inheritedFrom": {
9197
+ "name": "Linksimple",
9198
+ "module": "components/linksimple/linksimple.component.js"
9199
+ }
8976
9200
  },
8977
9201
  {
8978
9202
  "kind": "field",
8979
- "name": "cacheStrategy",
9203
+ "name": "href",
8980
9204
  "type": {
8981
- "text": "CacheStrategy | undefined"
9205
+ "text": "string"
8982
9206
  },
8983
- "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\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.",
8984
- "default": "undefined",
8985
- "attribute": "cache-strategy"
9207
+ "default": "'#'",
9208
+ "description": "Href for navigation. The URL that the hyperlink points to",
9209
+ "attribute": "href",
9210
+ "reflects": true,
9211
+ "inheritedFrom": {
9212
+ "name": "Linksimple",
9213
+ "module": "components/linksimple/linksimple.component.js"
9214
+ }
8986
9215
  },
8987
9216
  {
8988
9217
  "kind": "field",
8989
- "name": "cacheName",
9218
+ "name": "target",
9219
+ "type": {
9220
+ "text": "string"
9221
+ },
9222
+ "default": "'_self'",
9223
+ "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9224
+ "attribute": "target",
9225
+ "reflects": true,
9226
+ "inheritedFrom": {
9227
+ "name": "Linksimple",
9228
+ "module": "components/linksimple/linksimple.component.js"
9229
+ }
9230
+ },
9231
+ {
9232
+ "kind": "field",
9233
+ "name": "rel",
8990
9234
  "type": {
8991
9235
  "text": "string | undefined"
8992
9236
  },
8993
- "description": "Icons Cache Name to use (cache strategy must be provided)\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.",
8994
- "default": "undefined",
8995
- "attribute": "cache-name"
9237
+ "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9238
+ "attribute": "rel",
9239
+ "reflects": true,
9240
+ "inheritedFrom": {
9241
+ "name": "Linksimple",
9242
+ "module": "components/linksimple/linksimple.component.js"
9243
+ }
8996
9244
  },
8997
9245
  {
8998
- "kind": "method",
8999
- "name": "updateValuesInContext",
9000
- "privacy": "private"
9246
+ "kind": "field",
9247
+ "name": "handleNavigation",
9248
+ "privacy": "private",
9249
+ "inheritedFrom": {
9250
+ "name": "Linksimple",
9251
+ "module": "components/linksimple/linksimple.component.js"
9252
+ }
9001
9253
  },
9002
9254
  {
9003
9255
  "kind": "method",
9004
- "name": "updateContext",
9005
- "privacy": "protected",
9006
- "return": {
9007
- "type": {
9008
- "text": "void"
9256
+ "name": "setDisabled",
9257
+ "privacy": "private",
9258
+ "parameters": [
9259
+ {
9260
+ "name": "disabled",
9261
+ "type": {
9262
+ "text": "boolean"
9263
+ },
9264
+ "description": "Whether the element should be disabled"
9009
9265
  }
9266
+ ],
9267
+ "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
9268
+ "inheritedFrom": {
9269
+ "name": "Linksimple",
9270
+ "module": "components/linksimple/linksimple.component.js"
9271
+ }
9272
+ }
9273
+ ],
9274
+ "events": [
9275
+ {
9276
+ "description": "(React: onClick) Fired when the user activates the Link using a mouse or assistive technology.",
9277
+ "name": "click",
9278
+ "reactName": "onClick",
9279
+ "inheritedFrom": {
9280
+ "name": "Linksimple",
9281
+ "module": "src/components/linksimple/linksimple.component.ts"
9282
+ }
9283
+ },
9284
+ {
9285
+ "description": "(React: onKeyDown) Fired when the user presses a key while the Link has focus.",
9286
+ "name": "keydown",
9287
+ "reactName": "onKeyDown",
9288
+ "inheritedFrom": {
9289
+ "name": "Linksimple",
9290
+ "module": "src/components/linksimple/linksimple.component.ts"
9291
+ }
9292
+ },
9293
+ {
9294
+ "description": "(React: onFocus) Fired when the Link receives keyboard or mouse focus.",
9295
+ "name": "focus",
9296
+ "reactName": "onFocus",
9297
+ "inheritedFrom": {
9298
+ "name": "Linksimple",
9299
+ "module": "src/components/linksimple/linksimple.component.ts"
9300
+ }
9301
+ },
9302
+ {
9303
+ "description": "(React: onBlur) Fired when the Link loses keyboard or mouse focus.",
9304
+ "name": "blur",
9305
+ "reactName": "onBlur",
9306
+ "inheritedFrom": {
9307
+ "name": "Linksimple",
9308
+ "module": "src/components/linksimple/linksimple.component.ts"
9010
9309
  }
9011
9310
  }
9012
9311
  ],
9013
9312
  "attributes": [
9014
9313
  {
9015
- "name": "icon-set",
9314
+ "name": "size",
9016
9315
  "type": {
9017
- "text": "IconSet | undefined"
9316
+ "text": "LinkSize"
9018
9317
  },
9019
- "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
9020
- "default": "momentum-icons",
9021
- "fieldName": "iconSet"
9318
+ "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
9319
+ "default": "large",
9320
+ "fieldName": "size"
9022
9321
  },
9023
9322
  {
9024
- "name": "url",
9323
+ "name": "icon-name",
9025
9324
  "type": {
9026
- "text": "string | undefined"
9325
+ "text": "IconNames | undefined"
9027
9326
  },
9028
- "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
9029
- "fieldName": "url"
9327
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
9328
+ "fieldName": "iconName",
9329
+ "inheritedFrom": {
9330
+ "name": "IconNameMixin",
9331
+ "module": "src/utils/mixins/IconNameMixin.ts"
9332
+ }
9030
9333
  },
9031
9334
  {
9032
- "name": "file-extension",
9335
+ "name": "disabled",
9033
9336
  "type": {
9034
- "text": "string | undefined"
9337
+ "text": "boolean | undefined"
9035
9338
  },
9036
- "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
9037
- "default": "svg",
9038
- "fieldName": "fileExtension"
9339
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9340
+ "default": "undefined",
9341
+ "fieldName": "disabled",
9342
+ "inheritedFrom": {
9343
+ "name": "DisabledMixin",
9344
+ "module": "src/utils/mixins/DisabledMixin.ts"
9345
+ }
9039
9346
  },
9040
9347
  {
9041
- "name": "length-unit",
9348
+ "name": "tabIndex",
9349
+ "type": {
9350
+ "text": "number"
9351
+ },
9352
+ "default": "0",
9353
+ "description": "This property specifies the tab order of the element.",
9354
+ "fieldName": "tabIndex",
9355
+ "inheritedFrom": {
9356
+ "name": "TabIndexMixin",
9357
+ "module": "src/utils/mixins/TabIndexMixin.ts"
9358
+ }
9359
+ },
9360
+ {
9361
+ "name": "inline",
9362
+ "type": {
9363
+ "text": "boolean"
9364
+ },
9365
+ "description": "The link can be inline or standalone.",
9366
+ "default": "false",
9367
+ "fieldName": "inline",
9368
+ "inheritedFrom": {
9369
+ "name": "Linksimple",
9370
+ "module": "src/components/linksimple/linksimple.component.ts"
9371
+ }
9372
+ },
9373
+ {
9374
+ "name": "inverted",
9375
+ "type": {
9376
+ "text": "boolean"
9377
+ },
9378
+ "description": "The link color can be inverted by setting the inverted attribute to true.",
9379
+ "default": "false",
9380
+ "fieldName": "inverted",
9381
+ "inheritedFrom": {
9382
+ "name": "Linksimple",
9383
+ "module": "src/components/linksimple/linksimple.component.ts"
9384
+ }
9385
+ },
9386
+ {
9387
+ "name": "href",
9042
9388
  "type": {
9043
9389
  "text": "string"
9044
9390
  },
9045
- "description": "Length unit used for sizing of icons",
9046
- "default": "em",
9047
- "fieldName": "lengthUnit"
9391
+ "default": "'#'",
9392
+ "description": "Href for navigation. The URL that the hyperlink points to",
9393
+ "fieldName": "href",
9394
+ "inheritedFrom": {
9395
+ "name": "Linksimple",
9396
+ "module": "src/components/linksimple/linksimple.component.ts"
9397
+ }
9048
9398
  },
9049
9399
  {
9050
- "name": "size",
9400
+ "name": "target",
9051
9401
  "type": {
9052
- "text": "number | undefined"
9402
+ "text": "string"
9053
9403
  },
9054
- "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
9055
- "default": "1",
9056
- "fieldName": "size"
9404
+ "default": "'_self'",
9405
+ "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9406
+ "fieldName": "target",
9407
+ "inheritedFrom": {
9408
+ "name": "Linksimple",
9409
+ "module": "src/components/linksimple/linksimple.component.ts"
9410
+ }
9411
+ },
9412
+ {
9413
+ "name": "rel",
9414
+ "type": {
9415
+ "text": "string | undefined"
9416
+ },
9417
+ "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9418
+ "fieldName": "rel",
9419
+ "inheritedFrom": {
9420
+ "name": "Linksimple",
9421
+ "module": "src/components/linksimple/linksimple.component.ts"
9422
+ }
9423
+ }
9424
+ ],
9425
+ "mixins": [
9426
+ {
9427
+ "name": "IconNameMixin",
9428
+ "module": "/src/utils/mixins/IconNameMixin"
9429
+ }
9430
+ ],
9431
+ "superclass": {
9432
+ "name": "Linksimple",
9433
+ "module": "/src/components/linksimple/linksimple.component"
9434
+ },
9435
+ "tagName": "mdc-link",
9436
+ "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n */",
9437
+ "customElement": true,
9438
+ "cssProperties": [
9439
+ {
9440
+ "description": "Border radius of the link.",
9441
+ "name": "--mdc-link-border-radius",
9442
+ "inheritedFrom": {
9443
+ "name": "Linksimple",
9444
+ "module": "src/components/linksimple/linksimple.component.ts"
9445
+ }
9446
+ },
9447
+ {
9448
+ "description": "Color of the link’s child content in the active state.",
9449
+ "name": "--mdc-link-color-active",
9450
+ "inheritedFrom": {
9451
+ "name": "Linksimple",
9452
+ "module": "src/components/linksimple/linksimple.component.ts"
9453
+ }
9454
+ },
9455
+ {
9456
+ "description": "Color of the link’s child content in the disabled state.",
9457
+ "name": "--mdc-link-color-disabled",
9458
+ "inheritedFrom": {
9459
+ "name": "Linksimple",
9460
+ "module": "src/components/linksimple/linksimple.component.ts"
9461
+ }
9462
+ },
9463
+ {
9464
+ "description": "Color of the link’s child content in the hover state.",
9465
+ "name": "--mdc-link-color-hover",
9466
+ "inheritedFrom": {
9467
+ "name": "Linksimple",
9468
+ "module": "src/components/linksimple/linksimple.component.ts"
9469
+ }
9470
+ },
9471
+ {
9472
+ "description": "Color of the link’s child content in the normal state.",
9473
+ "name": "--mdc-link-color-normal",
9474
+ "inheritedFrom": {
9475
+ "name": "Linksimple",
9476
+ "module": "src/components/linksimple/linksimple.component.ts"
9477
+ }
9478
+ },
9479
+ {
9480
+ "description": "Color of the inverted link’s child content in the active state.",
9481
+ "name": "--mdc-link-inverted-color-active",
9482
+ "inheritedFrom": {
9483
+ "name": "Linksimple",
9484
+ "module": "src/components/linksimple/linksimple.component.ts"
9485
+ }
9057
9486
  },
9058
9487
  {
9059
- "name": "cache-strategy",
9060
- "type": {
9061
- "text": "CacheStrategy | undefined"
9062
- },
9063
- "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\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.",
9064
- "default": "undefined",
9065
- "fieldName": "cacheStrategy"
9488
+ "description": "Color of the inverted link’s child content in the disabled state.",
9489
+ "name": "--mdc-link-inverted-color-disabled",
9490
+ "inheritedFrom": {
9491
+ "name": "Linksimple",
9492
+ "module": "src/components/linksimple/linksimple.component.ts"
9493
+ }
9066
9494
  },
9067
9495
  {
9068
- "name": "cache-name",
9069
- "type": {
9070
- "text": "string | undefined"
9071
- },
9072
- "description": "Icons Cache Name to use (cache strategy must be provided)\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.",
9073
- "default": "undefined",
9074
- "fieldName": "cacheName"
9496
+ "description": "Color of the inverted link’s child content in the hover state.",
9497
+ "name": "--mdc-link-inverted-color-hover",
9498
+ "inheritedFrom": {
9499
+ "name": "Linksimple",
9500
+ "module": "src/components/linksimple/linksimple.component.ts"
9501
+ }
9502
+ },
9503
+ {
9504
+ "description": "Color of the inverted link’s child content in the normal state.",
9505
+ "name": "--mdc-link-inverted-color-normal",
9506
+ "inheritedFrom": {
9507
+ "name": "Linksimple",
9508
+ "module": "src/components/linksimple/linksimple.component.ts"
9509
+ }
9075
9510
  }
9076
- ],
9077
- "superclass": {
9078
- "name": "Provider",
9079
- "module": "/src/models"
9080
- },
9081
- "tagName": "mdc-iconprovider",
9082
- "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons 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 */",
9083
- "customElement": true
9511
+ ]
9084
9512
  }
9085
9513
  ],
9086
9514
  "exports": [
@@ -9088,8 +9516,8 @@
9088
9516
  "kind": "js",
9089
9517
  "name": "default",
9090
9518
  "declaration": {
9091
- "name": "IconProvider",
9092
- "module": "components/iconprovider/iconprovider.component.js"
9519
+ "name": "Link",
9520
+ "module": "components/link/link.component.js"
9093
9521
  }
9094
9522
  }
9095
9523
  ]
@@ -9295,78 +9723,51 @@
9295
9723
  },
9296
9724
  {
9297
9725
  "kind": "javascript-module",
9298
- "path": "components/link/link.component.js",
9726
+ "path": "components/linksimple/linksimple.component.js",
9299
9727
  "declarations": [
9300
9728
  {
9301
9729
  "kind": "class",
9302
- "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be the text content.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
9303
- "name": "Link",
9304
- "members": [
9730
+ "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
9731
+ "name": "Linksimple",
9732
+ "cssProperties": [
9305
9733
  {
9306
- "kind": "field",
9307
- "name": "size",
9308
- "type": {
9309
- "text": "LinkSize"
9310
- },
9311
- "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
9312
- "default": "large",
9313
- "attribute": "size",
9314
- "reflects": true
9734
+ "description": "Border radius of the link.",
9735
+ "name": "--mdc-link-border-radius"
9315
9736
  },
9316
9737
  {
9317
- "kind": "method",
9318
- "name": "getIconSize",
9319
- "privacy": "private",
9320
- "return": {
9321
- "type": {
9322
- "text": ""
9323
- }
9324
- },
9325
- "description": "Method to get the size of the trailing icon based on the link size."
9738
+ "description": "Color of the link’s child content in the active state.",
9739
+ "name": "--mdc-link-color-active"
9326
9740
  },
9327
9741
  {
9328
- "kind": "field",
9329
- "name": "iconName",
9330
- "type": {
9331
- "text": "IconNames | undefined"
9332
- },
9333
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
9334
- "attribute": "icon-name",
9335
- "inheritedFrom": {
9336
- "name": "IconNameMixin",
9337
- "module": "utils/mixins/IconNameMixin.js"
9338
- }
9742
+ "description": "Color of the link’s child content in the disabled state.",
9743
+ "name": "--mdc-link-color-disabled"
9339
9744
  },
9340
9745
  {
9341
- "kind": "field",
9342
- "name": "disabled",
9343
- "type": {
9344
- "text": "boolean | undefined"
9345
- },
9346
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9347
- "default": "undefined",
9348
- "attribute": "disabled",
9349
- "reflects": true,
9350
- "inheritedFrom": {
9351
- "name": "DisabledMixin",
9352
- "module": "utils/mixins/DisabledMixin.js"
9353
- }
9746
+ "description": "Color of the link’s child content in the hover state.",
9747
+ "name": "--mdc-link-color-hover"
9354
9748
  },
9355
9749
  {
9356
- "kind": "field",
9357
- "name": "tabIndex",
9358
- "type": {
9359
- "text": "number"
9360
- },
9361
- "default": "0",
9362
- "description": "This property specifies the tab order of the element.",
9363
- "attribute": "tabIndex",
9364
- "reflects": true,
9365
- "inheritedFrom": {
9366
- "name": "TabIndexMixin",
9367
- "module": "utils/mixins/TabIndexMixin.js"
9368
- }
9750
+ "description": "Color of the link’s child content in the normal state.",
9751
+ "name": "--mdc-link-color-normal"
9752
+ },
9753
+ {
9754
+ "description": "Color of the inverted link’s child content in the active state.",
9755
+ "name": "--mdc-link-inverted-color-active"
9756
+ },
9757
+ {
9758
+ "description": "Color of the inverted link’s child content in the disabled state.",
9759
+ "name": "--mdc-link-inverted-color-disabled"
9760
+ },
9761
+ {
9762
+ "description": "Color of the inverted link’s child content in the hover state.",
9763
+ "name": "--mdc-link-inverted-color-hover"
9369
9764
  },
9765
+ {
9766
+ "description": "Color of the inverted link’s child content in the normal state.",
9767
+ "name": "--mdc-link-inverted-color-normal"
9768
+ }
9769
+ ],
9770
+ "members": [
9370
9771
  {
9371
9772
  "kind": "field",
9372
9773
  "name": "inline",
@@ -9376,11 +9777,7 @@
9376
9777
  "description": "The link can be inline or standalone.",
9377
9778
  "default": "false",
9378
9779
  "attribute": "inline",
9379
- "reflects": true,
9380
- "inheritedFrom": {
9381
- "name": "Linksimple",
9382
- "module": "components/linksimple/linksimple.component.js"
9383
- }
9780
+ "reflects": true
9384
9781
  },
9385
9782
  {
9386
9783
  "kind": "field",
@@ -9391,11 +9788,7 @@
9391
9788
  "description": "The link color can be inverted by setting the inverted attribute to true.",
9392
9789
  "default": "false",
9393
9790
  "attribute": "inverted",
9394
- "reflects": true,
9395
- "inheritedFrom": {
9396
- "name": "Linksimple",
9397
- "module": "components/linksimple/linksimple.component.js"
9398
- }
9791
+ "reflects": true
9399
9792
  },
9400
9793
  {
9401
9794
  "kind": "field",
@@ -9406,11 +9799,7 @@
9406
9799
  "default": "'#'",
9407
9800
  "description": "Href for navigation. The URL that the hyperlink points to",
9408
9801
  "attribute": "href",
9409
- "reflects": true,
9410
- "inheritedFrom": {
9411
- "name": "Linksimple",
9412
- "module": "components/linksimple/linksimple.component.js"
9413
- }
9802
+ "reflects": true
9414
9803
  },
9415
9804
  {
9416
9805
  "kind": "field",
@@ -9421,11 +9810,7 @@
9421
9810
  "default": "'_self'",
9422
9811
  "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9423
9812
  "attribute": "target",
9424
- "reflects": true,
9425
- "inheritedFrom": {
9426
- "name": "Linksimple",
9427
- "module": "components/linksimple/linksimple.component.js"
9428
- }
9813
+ "reflects": true
9429
9814
  },
9430
9815
  {
9431
9816
  "kind": "field",
@@ -9435,127 +9820,82 @@
9435
9820
  },
9436
9821
  "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9437
9822
  "attribute": "rel",
9438
- "reflects": true,
9439
- "inheritedFrom": {
9440
- "name": "Linksimple",
9441
- "module": "components/linksimple/linksimple.component.js"
9442
- }
9823
+ "reflects": true
9443
9824
  },
9444
9825
  {
9445
9826
  "kind": "field",
9446
9827
  "name": "handleNavigation",
9447
- "privacy": "private",
9448
- "inheritedFrom": {
9449
- "name": "Linksimple",
9450
- "module": "components/linksimple/linksimple.component.js"
9451
- }
9452
- },
9453
- {
9454
- "kind": "method",
9455
- "name": "setDisabled",
9456
- "privacy": "private",
9457
- "parameters": [
9458
- {
9459
- "name": "disabled",
9460
- "type": {
9461
- "text": "boolean"
9462
- },
9463
- "description": "Whether the element should be disabled"
9464
- }
9465
- ],
9466
- "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
9467
- "inheritedFrom": {
9468
- "name": "Linksimple",
9469
- "module": "components/linksimple/linksimple.component.js"
9470
- }
9471
- }
9472
- ],
9473
- "events": [
9474
- {
9475
- "description": "(React: onClick) Fired when the user activates the Link using a mouse or assistive technology.",
9476
- "name": "click",
9477
- "reactName": "onClick",
9478
- "inheritedFrom": {
9479
- "name": "Linksimple",
9480
- "module": "src/components/linksimple/linksimple.component.ts"
9481
- }
9482
- },
9483
- {
9484
- "description": "(React: onKeyDown) Fired when the user presses a key while the Link has focus.",
9485
- "name": "keydown",
9486
- "reactName": "onKeyDown",
9487
- "inheritedFrom": {
9488
- "name": "Linksimple",
9489
- "module": "src/components/linksimple/linksimple.component.ts"
9490
- }
9491
- },
9492
- {
9493
- "description": "(React: onFocus) Fired when the Link receives keyboard or mouse focus.",
9494
- "name": "focus",
9495
- "reactName": "onFocus",
9496
- "inheritedFrom": {
9497
- "name": "Linksimple",
9498
- "module": "src/components/linksimple/linksimple.component.ts"
9499
- }
9500
- },
9501
- {
9502
- "description": "(React: onBlur) Fired when the Link loses keyboard or mouse focus.",
9503
- "name": "blur",
9504
- "reactName": "onBlur",
9505
- "inheritedFrom": {
9506
- "name": "Linksimple",
9507
- "module": "src/components/linksimple/linksimple.component.ts"
9508
- }
9509
- }
9510
- ],
9511
- "attributes": [
9512
- {
9513
- "name": "size",
9514
- "type": {
9515
- "text": "LinkSize"
9516
- },
9517
- "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
9518
- "default": "large",
9519
- "fieldName": "size"
9520
- },
9521
- {
9522
- "name": "icon-name",
9523
- "type": {
9524
- "text": "IconNames | undefined"
9525
- },
9526
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
9527
- "fieldName": "iconName",
9528
- "inheritedFrom": {
9529
- "name": "IconNameMixin",
9530
- "module": "src/utils/mixins/IconNameMixin.ts"
9531
- }
9828
+ "privacy": "private"
9829
+ },
9830
+ {
9831
+ "kind": "method",
9832
+ "name": "setDisabled",
9833
+ "privacy": "private",
9834
+ "parameters": [
9835
+ {
9836
+ "name": "disabled",
9837
+ "type": {
9838
+ "text": "boolean"
9839
+ },
9840
+ "description": "Whether the element should be disabled"
9841
+ }
9842
+ ],
9843
+ "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
9532
9844
  },
9533
9845
  {
9846
+ "kind": "field",
9534
9847
  "name": "disabled",
9535
9848
  "type": {
9536
9849
  "text": "boolean | undefined"
9537
9850
  },
9538
9851
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9539
9852
  "default": "undefined",
9540
- "fieldName": "disabled",
9853
+ "attribute": "disabled",
9854
+ "reflects": true,
9541
9855
  "inheritedFrom": {
9542
9856
  "name": "DisabledMixin",
9543
- "module": "src/utils/mixins/DisabledMixin.ts"
9857
+ "module": "utils/mixins/DisabledMixin.js"
9544
9858
  }
9545
9859
  },
9546
9860
  {
9861
+ "kind": "field",
9547
9862
  "name": "tabIndex",
9548
9863
  "type": {
9549
9864
  "text": "number"
9550
9865
  },
9551
9866
  "default": "0",
9552
9867
  "description": "This property specifies the tab order of the element.",
9553
- "fieldName": "tabIndex",
9868
+ "attribute": "tabIndex",
9869
+ "reflects": true,
9554
9870
  "inheritedFrom": {
9555
9871
  "name": "TabIndexMixin",
9556
- "module": "src/utils/mixins/TabIndexMixin.ts"
9872
+ "module": "utils/mixins/TabIndexMixin.js"
9557
9873
  }
9874
+ }
9875
+ ],
9876
+ "events": [
9877
+ {
9878
+ "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
9879
+ "name": "click",
9880
+ "reactName": "onClick"
9881
+ },
9882
+ {
9883
+ "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
9884
+ "name": "keydown",
9885
+ "reactName": "onKeyDown"
9558
9886
  },
9887
+ {
9888
+ "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
9889
+ "name": "focus",
9890
+ "reactName": "onFocus"
9891
+ },
9892
+ {
9893
+ "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
9894
+ "name": "blur",
9895
+ "reactName": "onBlur"
9896
+ }
9897
+ ],
9898
+ "attributes": [
9559
9899
  {
9560
9900
  "name": "inline",
9561
9901
  "type": {
@@ -9563,11 +9903,7 @@
9563
9903
  },
9564
9904
  "description": "The link can be inline or standalone.",
9565
9905
  "default": "false",
9566
- "fieldName": "inline",
9567
- "inheritedFrom": {
9568
- "name": "Linksimple",
9569
- "module": "src/components/linksimple/linksimple.component.ts"
9570
- }
9906
+ "fieldName": "inline"
9571
9907
  },
9572
9908
  {
9573
9909
  "name": "inverted",
@@ -9576,11 +9912,7 @@
9576
9912
  },
9577
9913
  "description": "The link color can be inverted by setting the inverted attribute to true.",
9578
9914
  "default": "false",
9579
- "fieldName": "inverted",
9580
- "inheritedFrom": {
9581
- "name": "Linksimple",
9582
- "module": "src/components/linksimple/linksimple.component.ts"
9583
- }
9915
+ "fieldName": "inverted"
9584
9916
  },
9585
9917
  {
9586
9918
  "name": "href",
@@ -9589,11 +9921,7 @@
9589
9921
  },
9590
9922
  "default": "'#'",
9591
9923
  "description": "Href for navigation. The URL that the hyperlink points to",
9592
- "fieldName": "href",
9593
- "inheritedFrom": {
9594
- "name": "Linksimple",
9595
- "module": "src/components/linksimple/linksimple.component.ts"
9596
- }
9924
+ "fieldName": "href"
9597
9925
  },
9598
9926
  {
9599
9927
  "name": "target",
@@ -9602,11 +9930,7 @@
9602
9930
  },
9603
9931
  "default": "'_self'",
9604
9932
  "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9605
- "fieldName": "target",
9606
- "inheritedFrom": {
9607
- "name": "Linksimple",
9608
- "module": "src/components/linksimple/linksimple.component.ts"
9609
- }
9933
+ "fieldName": "target"
9610
9934
  },
9611
9935
  {
9612
9936
  "name": "rel",
@@ -9614,100 +9938,258 @@
9614
9938
  "text": "string | undefined"
9615
9939
  },
9616
9940
  "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9617
- "fieldName": "rel",
9941
+ "fieldName": "rel"
9942
+ },
9943
+ {
9944
+ "name": "disabled",
9945
+ "type": {
9946
+ "text": "boolean | undefined"
9947
+ },
9948
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
9949
+ "default": "undefined",
9950
+ "fieldName": "disabled",
9618
9951
  "inheritedFrom": {
9619
- "name": "Linksimple",
9620
- "module": "src/components/linksimple/linksimple.component.ts"
9952
+ "name": "DisabledMixin",
9953
+ "module": "src/utils/mixins/DisabledMixin.ts"
9954
+ }
9955
+ },
9956
+ {
9957
+ "name": "tabIndex",
9958
+ "type": {
9959
+ "text": "number"
9960
+ },
9961
+ "default": "0",
9962
+ "description": "This property specifies the tab order of the element.",
9963
+ "fieldName": "tabIndex",
9964
+ "inheritedFrom": {
9965
+ "name": "TabIndexMixin",
9966
+ "module": "src/utils/mixins/TabIndexMixin.ts"
9621
9967
  }
9622
9968
  }
9623
9969
  ],
9624
9970
  "mixins": [
9625
9971
  {
9626
- "name": "IconNameMixin",
9627
- "module": "/src/utils/mixins/IconNameMixin"
9972
+ "name": "DisabledMixin",
9973
+ "module": "/src/utils/mixins/DisabledMixin"
9974
+ },
9975
+ {
9976
+ "name": "TabIndexMixin",
9977
+ "module": "/src/utils/mixins/TabIndexMixin"
9628
9978
  }
9629
9979
  ],
9630
9980
  "superclass": {
9631
- "name": "Linksimple",
9632
- "module": "/src/components/linksimple/linksimple.component"
9981
+ "name": "Component",
9982
+ "module": "/src/models"
9633
9983
  },
9634
- "tagName": "mdc-link",
9635
- "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n */",
9636
- "customElement": true,
9637
- "cssProperties": [
9984
+ "tagName": "mdc-linksimple",
9985
+ "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
9986
+ "customElement": true
9987
+ }
9988
+ ],
9989
+ "exports": [
9990
+ {
9991
+ "kind": "js",
9992
+ "name": "default",
9993
+ "declaration": {
9994
+ "name": "Linksimple",
9995
+ "module": "components/linksimple/linksimple.component.js"
9996
+ }
9997
+ }
9998
+ ]
9999
+ },
10000
+ {
10001
+ "kind": "javascript-module",
10002
+ "path": "components/list/list.component.js",
10003
+ "declarations": [
10004
+ {
10005
+ "kind": "class",
10006
+ "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.",
10007
+ "name": "List",
10008
+ "slots": [
9638
10009
  {
9639
- "description": "Border radius of the link.",
9640
- "name": "--mdc-link-border-radius",
9641
- "inheritedFrom": {
9642
- "name": "Linksimple",
9643
- "module": "src/components/linksimple/linksimple.component.ts"
10010
+ "description": "This is a default/unnamed slot",
10011
+ "name": "default"
10012
+ }
10013
+ ],
10014
+ "members": [
10015
+ {
10016
+ "kind": "field",
10017
+ "name": "listItems",
10018
+ "type": {
10019
+ "text": "Array<HTMLElement>"
9644
10020
  }
9645
10021
  },
9646
10022
  {
9647
- "description": "Color of the link’s child content in the active state.",
9648
- "name": "--mdc-link-color-active",
9649
- "inheritedFrom": {
9650
- "name": "Linksimple",
9651
- "module": "src/components/linksimple/linksimple.component.ts"
9652
- }
10023
+ "kind": "field",
10024
+ "name": "headerText",
10025
+ "type": {
10026
+ "text": "string | undefined"
10027
+ },
10028
+ "description": "The header text of the list.",
10029
+ "attribute": "header-text",
10030
+ "reflects": true
9653
10031
  },
9654
10032
  {
9655
- "description": "Color of the link’s child content in the disabled state.",
9656
- "name": "--mdc-link-color-disabled",
9657
- "inheritedFrom": {
9658
- "name": "Linksimple",
9659
- "module": "src/components/linksimple/linksimple.component.ts"
9660
- }
10033
+ "kind": "method",
10034
+ "name": "handleKeyDown",
10035
+ "privacy": "private",
10036
+ "return": {
10037
+ "type": {
10038
+ "text": "void"
10039
+ }
10040
+ },
10041
+ "parameters": [
10042
+ {
10043
+ "name": "event",
10044
+ "type": {
10045
+ "text": "KeyboardEvent"
10046
+ },
10047
+ "description": "The keyboard event."
10048
+ }
10049
+ ],
10050
+ "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
9661
10051
  },
9662
10052
  {
9663
- "description": "Color of the link’s child content in the hover state.",
9664
- "name": "--mdc-link-color-hover",
9665
- "inheritedFrom": {
9666
- "name": "Linksimple",
9667
- "module": "src/components/linksimple/linksimple.component.ts"
9668
- }
10053
+ "kind": "method",
10054
+ "name": "getCurrentIndex",
10055
+ "privacy": "private",
10056
+ "return": {
10057
+ "type": {
10058
+ "text": ""
10059
+ }
10060
+ },
10061
+ "parameters": [
10062
+ {
10063
+ "name": "target",
10064
+ "type": {
10065
+ "text": "EventTarget | null"
10066
+ },
10067
+ "description": "The target element to find the index of."
10068
+ }
10069
+ ],
10070
+ "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
10071
+ },
10072
+ {
10073
+ "kind": "method",
10074
+ "name": "getNewIndexBasedOnKey",
10075
+ "privacy": "private",
10076
+ "return": {
10077
+ "type": {
10078
+ "text": ""
10079
+ }
10080
+ },
10081
+ "parameters": [
10082
+ {
10083
+ "name": "key",
10084
+ "type": {
10085
+ "text": "string"
10086
+ },
10087
+ "description": "The key that was pressed."
10088
+ },
10089
+ {
10090
+ "name": "currentIndex",
10091
+ "type": {
10092
+ "text": "number"
10093
+ },
10094
+ "description": "The current index of the focused list item."
10095
+ },
10096
+ {
10097
+ "name": "wrappedDivsCount",
10098
+ "type": {
10099
+ "text": "number"
10100
+ },
10101
+ "description": "The total number of list items."
10102
+ }
10103
+ ],
10104
+ "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
9669
10105
  },
9670
10106
  {
9671
- "description": "Color of the link’s child content in the normal state.",
9672
- "name": "--mdc-link-color-normal",
9673
- "inheritedFrom": {
9674
- "name": "Linksimple",
9675
- "module": "src/components/linksimple/linksimple.component.ts"
9676
- }
10107
+ "kind": "method",
10108
+ "name": "handleMouseClick",
10109
+ "privacy": "private",
10110
+ "return": {
10111
+ "type": {
10112
+ "text": "void"
10113
+ }
10114
+ },
10115
+ "parameters": [
10116
+ {
10117
+ "name": "event",
10118
+ "type": {
10119
+ "text": "MouseEvent"
10120
+ },
10121
+ "description": "The mouse event."
10122
+ }
10123
+ ],
10124
+ "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
9677
10125
  },
9678
10126
  {
9679
- "description": "Color of the inverted link’s child content in the active state.",
9680
- "name": "--mdc-link-inverted-color-active",
9681
- "inheritedFrom": {
9682
- "name": "Linksimple",
9683
- "module": "src/components/linksimple/linksimple.component.ts"
9684
- }
10127
+ "kind": "method",
10128
+ "name": "resetTabIndexAndSetActiveTabIndex",
10129
+ "privacy": "private",
10130
+ "parameters": [
10131
+ {
10132
+ "name": "newIndex",
10133
+ "type": {
10134
+ "text": "number"
10135
+ },
10136
+ "description": "The index of the new active element in the list."
10137
+ }
10138
+ ],
10139
+ "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
9685
10140
  },
9686
10141
  {
9687
- "description": "Color of the inverted link’s child content in the disabled state.",
9688
- "name": "--mdc-link-inverted-color-disabled",
10142
+ "kind": "field",
10143
+ "name": "dataAriaLabel",
10144
+ "type": {
10145
+ "text": "string | null"
10146
+ },
10147
+ "default": "null",
10148
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10149
+ "attribute": "data-aria-label",
10150
+ "reflects": true,
9689
10151
  "inheritedFrom": {
9690
- "name": "Linksimple",
9691
- "module": "src/components/linksimple/linksimple.component.ts"
10152
+ "name": "DataAriaLabelMixin",
10153
+ "module": "utils/mixins/DataAriaLabelMixin.js"
9692
10154
  }
9693
- },
10155
+ }
10156
+ ],
10157
+ "attributes": [
9694
10158
  {
9695
- "description": "Color of the inverted link’s child content in the hover state.",
9696
- "name": "--mdc-link-inverted-color-hover",
9697
- "inheritedFrom": {
9698
- "name": "Linksimple",
9699
- "module": "src/components/linksimple/linksimple.component.ts"
9700
- }
10159
+ "name": "header-text",
10160
+ "type": {
10161
+ "text": "string | undefined"
10162
+ },
10163
+ "description": "The header text of the list.",
10164
+ "fieldName": "headerText"
9701
10165
  },
9702
10166
  {
9703
- "description": "Color of the inverted link’s child content in the normal state.",
9704
- "name": "--mdc-link-inverted-color-normal",
10167
+ "name": "data-aria-label",
10168
+ "type": {
10169
+ "text": "string | null"
10170
+ },
10171
+ "default": "null",
10172
+ "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10173
+ "fieldName": "dataAriaLabel",
9705
10174
  "inheritedFrom": {
9706
- "name": "Linksimple",
9707
- "module": "src/components/linksimple/linksimple.component.ts"
10175
+ "name": "DataAriaLabelMixin",
10176
+ "module": "src/utils/mixins/DataAriaLabelMixin.ts"
9708
10177
  }
9709
10178
  }
9710
- ]
10179
+ ],
10180
+ "mixins": [
10181
+ {
10182
+ "name": "DataAriaLabelMixin",
10183
+ "module": "/src/utils/mixins/DataAriaLabelMixin"
10184
+ }
10185
+ ],
10186
+ "superclass": {
10187
+ "name": "Component",
10188
+ "module": "/src/models"
10189
+ },
10190
+ "tagName": "mdc-list",
10191
+ "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * @tagname mdc-list\n *\n * @dependency mdc-text\n *\n * @slot default - This is a default/unnamed slot\n */",
10192
+ "customElement": true
9711
10193
  }
9712
10194
  ],
9713
10195
  "exports": [
@@ -9715,132 +10197,196 @@
9715
10197
  "kind": "js",
9716
10198
  "name": "default",
9717
10199
  "declaration": {
9718
- "name": "Link",
9719
- "module": "components/link/link.component.js"
10200
+ "name": "List",
10201
+ "module": "components/list/list.component.js"
9720
10202
  }
9721
10203
  }
9722
10204
  ]
9723
10205
  },
9724
10206
  {
9725
10207
  "kind": "javascript-module",
9726
- "path": "components/linksimple/linksimple.component.js",
10208
+ "path": "components/listitem/listitem.component.js",
9727
10209
  "declarations": [
9728
10210
  {
9729
10211
  "kind": "class",
9730
- "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
9731
- "name": "Linksimple",
10212
+ "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
10213
+ "name": "ListItem",
9732
10214
  "cssProperties": [
9733
10215
  {
9734
- "description": "Border radius of the link.",
9735
- "name": "--mdc-link-border-radius"
10216
+ "description": "Allows customization of the default background color.",
10217
+ "name": "--mdc-listitem-default-background-color"
9736
10218
  },
9737
10219
  {
9738
- "description": "Color of the link’s child content in the active state.",
9739
- "name": "--mdc-link-color-active"
10220
+ "description": "Allows customization of the background color on hover.",
10221
+ "name": "--mdc-listitem-background-color-hover"
9740
10222
  },
9741
10223
  {
9742
- "description": "Color of the link’s child content in the disabled state.",
9743
- "name": "--mdc-link-color-disabled"
10224
+ "description": "Allows customization of the background color when pressed.",
10225
+ "name": "--mdc-listitem-background-color-active"
9744
10226
  },
9745
10227
  {
9746
- "description": "Color of the link’s child content in the hover state.",
9747
- "name": "--mdc-link-color-hover"
10228
+ "description": "Allows customization of the primary label, side header and subline text slot color.",
10229
+ "name": "--mdc-listitem-primary-label-color"
9748
10230
  },
9749
10231
  {
9750
- "description": "Color of the link’s child content in the normal state.",
9751
- "name": "--mdc-link-color-normal"
10232
+ "description": "Allows customization of the secondary and tertiary label text slot color.",
10233
+ "name": "--mdc-listitem-secondary-label-color"
9752
10234
  },
9753
10235
  {
9754
- "description": "Color of the inverted link’s child content in the active state.",
9755
- "name": "--mdc-link-inverted-color-active"
10236
+ "description": "Allows customization of the disabled color.",
10237
+ "name": "--mdc-listitem-disabled-color"
9756
10238
  },
9757
10239
  {
9758
- "description": "Color of the inverted link’s child content in the disabled state.",
9759
- "name": "--mdc-link-inverted-color-disabled"
10240
+ "description": "Allows customization of column gap.",
10241
+ "name": "--mdc-listitem-column-gap"
10242
+ }
10243
+ ],
10244
+ "slots": [
10245
+ {
10246
+ "description": "slot for list item controls to appear of leading end.",
10247
+ "name": "leading-controls"
9760
10248
  },
9761
10249
  {
9762
- "description": "Color of the inverted link’s child content in the hover state.",
9763
- "name": "--mdc-link-inverted-color-hover"
10250
+ "description": "slot for list item primary label.",
10251
+ "name": "leading-text-primary-label"
9764
10252
  },
9765
10253
  {
9766
- "description": "Color of the inverted link’s child content in the normal state.",
9767
- "name": "--mdc-link-inverted-color-normal"
10254
+ "description": "slot for list item secondary label.",
10255
+ "name": "leading-text-secondary-label"
10256
+ },
10257
+ {
10258
+ "description": "slot for list item tertiary label.",
10259
+ "name": "leading-text-tertiary-label"
10260
+ },
10261
+ {
10262
+ "description": "slot for list item side header text.",
10263
+ "name": "trailing-text-side-header"
10264
+ },
10265
+ {
10266
+ "description": "slot for list item subline text.",
10267
+ "name": "trailing-text-subline"
10268
+ },
10269
+ {
10270
+ "description": "slot for list item controls to appear of trailing end.",
10271
+ "name": "trailing-controls"
9768
10272
  }
9769
10273
  ],
9770
10274
  "members": [
9771
10275
  {
9772
10276
  "kind": "field",
9773
- "name": "inline",
10277
+ "name": "variant",
9774
10278
  "type": {
9775
- "text": "boolean"
10279
+ "text": "ListItemVariants"
9776
10280
  },
9777
- "description": "The link can be inline or standalone.",
9778
- "default": "false",
9779
- "attribute": "inline",
10281
+ "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
10282
+ "default": "'full-width'",
10283
+ "attribute": "variant",
9780
10284
  "reflects": true
9781
10285
  },
9782
10286
  {
9783
10287
  "kind": "field",
9784
- "name": "inverted",
10288
+ "name": "label",
9785
10289
  "type": {
9786
- "text": "boolean"
10290
+ "text": "string | undefined"
9787
10291
  },
9788
- "description": "The link color can be inverted by setting the inverted attribute to true.",
9789
- "default": "false",
9790
- "attribute": "inverted",
10292
+ "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
10293
+ "attribute": "label",
9791
10294
  "reflects": true
9792
10295
  },
9793
10296
  {
9794
10297
  "kind": "field",
9795
- "name": "href",
10298
+ "name": "secondaryLabel",
9796
10299
  "type": {
9797
- "text": "string"
10300
+ "text": "string | undefined"
9798
10301
  },
9799
- "default": "'#'",
9800
- "description": "Href for navigation. The URL that the hyperlink points to",
9801
- "attribute": "href",
10302
+ "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
10303
+ "attribute": "secondary-label",
9802
10304
  "reflects": true
9803
10305
  },
9804
10306
  {
9805
10307
  "kind": "field",
9806
- "name": "target",
10308
+ "name": "tertiaryLabel",
9807
10309
  "type": {
9808
- "text": "string"
10310
+ "text": "string | undefined"
9809
10311
  },
9810
- "default": "'_self'",
9811
- "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9812
- "attribute": "target",
10312
+ "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
10313
+ "attribute": "tertiary-label",
9813
10314
  "reflects": true
9814
10315
  },
9815
10316
  {
9816
10317
  "kind": "field",
9817
- "name": "rel",
10318
+ "name": "sideHeaderText",
9818
10319
  "type": {
9819
10320
  "text": "string | undefined"
9820
10321
  },
9821
- "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9822
- "attribute": "rel",
10322
+ "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
10323
+ "attribute": "side-header-text",
9823
10324
  "reflects": true
9824
10325
  },
9825
10326
  {
9826
10327
  "kind": "field",
9827
- "name": "handleNavigation",
9828
- "privacy": "private"
10328
+ "name": "sublineText",
10329
+ "type": {
10330
+ "text": "string | undefined"
10331
+ },
10332
+ "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
10333
+ "attribute": "subline-text",
10334
+ "reflects": true
10335
+ },
10336
+ {
10337
+ "kind": "method",
10338
+ "name": "getText",
10339
+ "privacy": "protected",
10340
+ "return": {
10341
+ "type": {
10342
+ "text": ""
10343
+ }
10344
+ },
10345
+ "parameters": [
10346
+ {
10347
+ "name": "slotName",
10348
+ "type": {
10349
+ "text": "string"
10350
+ },
10351
+ "description": "The name of the slot to be used."
10352
+ },
10353
+ {
10354
+ "name": "type",
10355
+ "type": {
10356
+ "text": "TextType"
10357
+ },
10358
+ "description": "The type of the text element."
10359
+ },
10360
+ {
10361
+ "name": "content",
10362
+ "optional": true,
10363
+ "type": {
10364
+ "text": "string"
10365
+ },
10366
+ "description": "The text content to be displayed within the slot."
10367
+ }
10368
+ ],
10369
+ "description": "Generates a template for a text slot with the specified content."
9829
10370
  },
9830
10371
  {
9831
10372
  "kind": "method",
9832
- "name": "setDisabled",
10373
+ "name": "disableSlottedChildren",
9833
10374
  "privacy": "private",
10375
+ "return": {
10376
+ "type": {
10377
+ "text": "void"
10378
+ }
10379
+ },
9834
10380
  "parameters": [
9835
10381
  {
9836
10382
  "name": "disabled",
9837
10383
  "type": {
9838
10384
  "text": "boolean"
9839
10385
  },
9840
- "description": "Whether the element should be disabled"
10386
+ "description": "Whether to disable or enable the controls."
9841
10387
  }
9842
10388
  ],
9843
- "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
10389
+ "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
9844
10390
  },
9845
10391
  {
9846
10392
  "kind": "field",
@@ -9875,70 +10421,75 @@
9875
10421
  ],
9876
10422
  "events": [
9877
10423
  {
9878
- "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
10424
+ "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
9879
10425
  "name": "click",
9880
10426
  "reactName": "onClick"
9881
10427
  },
9882
10428
  {
9883
- "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
10429
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
9884
10430
  "name": "keydown",
9885
10431
  "reactName": "onKeyDown"
9886
10432
  },
9887
10433
  {
9888
- "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
9889
- "name": "focus",
9890
- "reactName": "onFocus"
10434
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
10435
+ "name": "keyup",
10436
+ "reactName": "onKeyUp"
9891
10437
  },
9892
10438
  {
9893
- "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
9894
- "name": "blur",
9895
- "reactName": "onBlur"
10439
+ "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
10440
+ "name": "focus",
10441
+ "reactName": "onFocus"
9896
10442
  }
9897
10443
  ],
9898
10444
  "attributes": [
9899
10445
  {
9900
- "name": "inline",
10446
+ "name": "variant",
9901
10447
  "type": {
9902
- "text": "boolean"
10448
+ "text": "ListItemVariants"
9903
10449
  },
9904
- "description": "The link can be inline or standalone.",
9905
- "default": "false",
9906
- "fieldName": "inline"
10450
+ "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
10451
+ "default": "'full-width'",
10452
+ "fieldName": "variant"
9907
10453
  },
9908
10454
  {
9909
- "name": "inverted",
10455
+ "name": "label",
9910
10456
  "type": {
9911
- "text": "boolean"
10457
+ "text": "string | undefined"
9912
10458
  },
9913
- "description": "The link color can be inverted by setting the inverted attribute to true.",
9914
- "default": "false",
9915
- "fieldName": "inverted"
10459
+ "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
10460
+ "fieldName": "label"
9916
10461
  },
9917
10462
  {
9918
- "name": "href",
10463
+ "name": "secondary-label",
9919
10464
  "type": {
9920
- "text": "string"
10465
+ "text": "string | undefined"
9921
10466
  },
9922
- "default": "'#'",
9923
- "description": "Href for navigation. The URL that the hyperlink points to",
9924
- "fieldName": "href"
10467
+ "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
10468
+ "fieldName": "secondaryLabel"
9925
10469
  },
9926
10470
  {
9927
- "name": "target",
10471
+ "name": "tertiary-label",
9928
10472
  "type": {
9929
- "text": "string"
10473
+ "text": "string | undefined"
9930
10474
  },
9931
- "default": "'_self'",
9932
- "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
9933
- "fieldName": "target"
10475
+ "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
10476
+ "fieldName": "tertiaryLabel"
9934
10477
  },
9935
10478
  {
9936
- "name": "rel",
10479
+ "name": "side-header-text",
9937
10480
  "type": {
9938
10481
  "text": "string | undefined"
9939
10482
  },
9940
- "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
9941
- "fieldName": "rel"
10483
+ "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
10484
+ "fieldName": "sideHeaderText"
10485
+ },
10486
+ {
10487
+ "name": "subline-text",
10488
+ "type": {
10489
+ "text": "string | undefined"
10490
+ },
10491
+ "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
10492
+ "fieldName": "sublineText"
9942
10493
  },
9943
10494
  {
9944
10495
  "name": "disabled",
@@ -9981,8 +10532,8 @@
9981
10532
  "name": "Component",
9982
10533
  "module": "/src/models"
9983
10534
  },
9984
- "tagName": "mdc-linksimple",
9985
- "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
10535
+ "tagName": "mdc-listitem",
10536
+ "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
9986
10537
  "customElement": true
9987
10538
  }
9988
10539
  ],
@@ -9991,204 +10542,69 @@
9991
10542
  "kind": "js",
9992
10543
  "name": "default",
9993
10544
  "declaration": {
9994
- "name": "Linksimple",
9995
- "module": "components/linksimple/linksimple.component.js"
10545
+ "name": "ListItem",
10546
+ "module": "components/listitem/listitem.component.js"
9996
10547
  }
9997
10548
  }
9998
10549
  ]
9999
10550
  },
10000
10551
  {
10001
10552
  "kind": "javascript-module",
10002
- "path": "components/list/list.component.js",
10553
+ "path": "components/marker/marker.component.js",
10003
10554
  "declarations": [
10004
10555
  {
10005
10556
  "kind": "class",
10006
- "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.",
10007
- "name": "List",
10008
- "slots": [
10009
- {
10010
- "description": "This is a default/unnamed slot",
10011
- "name": "default"
10012
- }
10013
- ],
10014
- "members": [
10015
- {
10016
- "kind": "field",
10017
- "name": "listItems",
10018
- "type": {
10019
- "text": "Array<HTMLElement>"
10020
- }
10021
- },
10022
- {
10023
- "kind": "field",
10024
- "name": "headerText",
10025
- "type": {
10026
- "text": "string | undefined"
10027
- },
10028
- "description": "The header text of the list.",
10029
- "attribute": "header-text",
10030
- "reflects": true
10031
- },
10032
- {
10033
- "kind": "method",
10034
- "name": "handleKeyDown",
10035
- "privacy": "private",
10036
- "return": {
10037
- "type": {
10038
- "text": "void"
10039
- }
10040
- },
10041
- "parameters": [
10042
- {
10043
- "name": "event",
10044
- "type": {
10045
- "text": "KeyboardEvent"
10046
- },
10047
- "description": "The keyboard event."
10048
- }
10049
- ],
10050
- "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
10051
- },
10052
- {
10053
- "kind": "method",
10054
- "name": "getCurrentIndex",
10055
- "privacy": "private",
10056
- "return": {
10057
- "type": {
10058
- "text": ""
10059
- }
10060
- },
10061
- "parameters": [
10062
- {
10063
- "name": "target",
10064
- "type": {
10065
- "text": "EventTarget | null"
10066
- },
10067
- "description": "The target element to find the index of."
10068
- }
10069
- ],
10070
- "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
10071
- },
10557
+ "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10558
+ "name": "Marker",
10559
+ "cssProperties": [
10072
10560
  {
10073
- "kind": "method",
10074
- "name": "getNewIndexBasedOnKey",
10075
- "privacy": "private",
10076
- "return": {
10077
- "type": {
10078
- "text": ""
10079
- }
10080
- },
10081
- "parameters": [
10082
- {
10083
- "name": "key",
10084
- "type": {
10085
- "text": "string"
10086
- },
10087
- "description": "The key that was pressed."
10088
- },
10089
- {
10090
- "name": "currentIndex",
10091
- "type": {
10092
- "text": "number"
10093
- },
10094
- "description": "The current index of the focused list item."
10095
- },
10096
- {
10097
- "name": "wrappedDivsCount",
10098
- "type": {
10099
- "text": "number"
10100
- },
10101
- "description": "The total number of list items."
10102
- }
10103
- ],
10104
- "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
10561
+ "description": "Allows customization of the default background color in solid variant.",
10562
+ "name": "--mdc-marker-solid-background-color"
10105
10563
  },
10106
10564
  {
10107
- "kind": "method",
10108
- "name": "handleMouseClick",
10109
- "privacy": "private",
10110
- "return": {
10111
- "type": {
10112
- "text": "void"
10113
- }
10114
- },
10115
- "parameters": [
10116
- {
10117
- "name": "event",
10118
- "type": {
10119
- "text": "MouseEvent"
10120
- },
10121
- "description": "The mouse event."
10122
- }
10123
- ],
10124
- "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
10565
+ "description": "Allows customization of the default stripes in striped variant.",
10566
+ "name": "--mdc-marker-striped-color"
10125
10567
  },
10126
10568
  {
10127
- "kind": "method",
10128
- "name": "resetTabIndexAndSetActiveTabIndex",
10129
- "privacy": "private",
10130
- "parameters": [
10131
- {
10132
- "name": "newIndex",
10133
- "type": {
10134
- "text": "number"
10135
- },
10136
- "description": "The index of the new active element in the list."
10137
- }
10138
- ],
10139
- "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
10569
+ "description": "Allows customization of the default background color in striped variant.",
10570
+ "name": "--mdc-marker-striped-background-color"
10140
10571
  },
10141
10572
  {
10142
- "kind": "field",
10143
- "name": "dataAriaLabel",
10144
- "type": {
10145
- "text": "string | null"
10146
- },
10147
- "default": "null",
10148
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10149
- "attribute": "data-aria-label",
10150
- "reflects": true,
10151
- "inheritedFrom": {
10152
- "name": "DataAriaLabelMixin",
10153
- "module": "utils/mixins/DataAriaLabelMixin.js"
10154
- }
10573
+ "description": "Allows customization of the default width.",
10574
+ "name": "--mdc-marker-width"
10155
10575
  }
10156
10576
  ],
10157
- "attributes": [
10158
- {
10159
- "name": "header-text",
10160
- "type": {
10161
- "text": "string | undefined"
10162
- },
10163
- "description": "The header text of the list.",
10164
- "fieldName": "headerText"
10165
- },
10577
+ "members": [
10166
10578
  {
10167
- "name": "data-aria-label",
10579
+ "kind": "field",
10580
+ "name": "variant",
10168
10581
  "type": {
10169
- "text": "string | null"
10582
+ "text": "MarkerVariants"
10170
10583
  },
10171
- "default": "null",
10172
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10173
- "fieldName": "dataAriaLabel",
10174
- "inheritedFrom": {
10175
- "name": "DataAriaLabelMixin",
10176
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
10177
- }
10584
+ "privacy": "public",
10585
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10586
+ "default": "solid",
10587
+ "attribute": "variant",
10588
+ "reflects": true
10178
10589
  }
10179
10590
  ],
10180
- "mixins": [
10591
+ "attributes": [
10181
10592
  {
10182
- "name": "DataAriaLabelMixin",
10183
- "module": "/src/utils/mixins/DataAriaLabelMixin"
10593
+ "name": "variant",
10594
+ "type": {
10595
+ "text": "MarkerVariants"
10596
+ },
10597
+ "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10598
+ "default": "solid",
10599
+ "fieldName": "variant"
10184
10600
  }
10185
10601
  ],
10186
10602
  "superclass": {
10187
10603
  "name": "Component",
10188
10604
  "module": "/src/models"
10189
10605
  },
10190
- "tagName": "mdc-list",
10191
- "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * @tagname mdc-list\n *\n * @dependency mdc-text\n *\n * @slot default - This is a default/unnamed slot\n */",
10606
+ "tagName": "mdc-marker",
10607
+ "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
10192
10608
  "customElement": true
10193
10609
  }
10194
10610
  ],
@@ -10197,81 +10613,51 @@
10197
10613
  "kind": "js",
10198
10614
  "name": "default",
10199
10615
  "declaration": {
10200
- "name": "List",
10201
- "module": "components/list/list.component.js"
10616
+ "name": "Marker",
10617
+ "module": "components/marker/marker.component.js"
10202
10618
  }
10203
10619
  }
10204
10620
  ]
10205
10621
  },
10206
10622
  {
10207
10623
  "kind": "javascript-module",
10208
- "path": "components/listitem/listitem.component.js",
10624
+ "path": "components/menuitem/menuitem.component.js",
10209
10625
  "declarations": [
10210
10626
  {
10211
10627
  "kind": "class",
10212
- "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
10213
- "name": "ListItem",
10214
- "cssProperties": [
10215
- {
10216
- "description": "Allows customization of the default background color.",
10217
- "name": "--mdc-listitem-default-background-color"
10218
- },
10219
- {
10220
- "description": "Allows customization of the background color on hover.",
10221
- "name": "--mdc-listitem-background-color-hover"
10222
- },
10223
- {
10224
- "description": "Allows customization of the background color when pressed.",
10225
- "name": "--mdc-listitem-background-color-active"
10226
- },
10227
- {
10228
- "description": "Allows customization of the primary label, side header and subline text slot color.",
10229
- "name": "--mdc-listitem-primary-label-color"
10230
- },
10231
- {
10232
- "description": "Allows customization of the secondary and tertiary label text slot color.",
10233
- "name": "--mdc-listitem-secondary-label-color"
10234
- },
10235
- {
10236
- "description": "Allows customization of the disabled color.",
10237
- "name": "--mdc-listitem-disabled-color"
10238
- },
10239
- {
10240
- "description": "Allows customization of column gap.",
10241
- "name": "--mdc-listitem-column-gap"
10242
- }
10243
- ],
10244
- "slots": [
10245
- {
10246
- "description": "slot for list item controls to appear of leading end.",
10247
- "name": "leading-controls"
10248
- },
10249
- {
10250
- "description": "slot for list item primary label.",
10251
- "name": "leading-text-primary-label"
10252
- },
10253
- {
10254
- "description": "slot for list item secondary label.",
10255
- "name": "leading-text-secondary-label"
10256
- },
10257
- {
10258
- "description": "slot for list item tertiary label.",
10259
- "name": "leading-text-tertiary-label"
10260
- },
10628
+ "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use mdc-menu as a parent element even when there is only menuitem for a11y purpose.",
10629
+ "name": "MenuItem",
10630
+ "members": [
10261
10631
  {
10262
- "description": "slot for list item side header text.",
10263
- "name": "trailing-text-side-header"
10632
+ "kind": "field",
10633
+ "name": "disabled",
10634
+ "type": {
10635
+ "text": "boolean | undefined"
10636
+ },
10637
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
10638
+ "default": "undefined",
10639
+ "attribute": "disabled",
10640
+ "reflects": true,
10641
+ "inheritedFrom": {
10642
+ "name": "ListItem",
10643
+ "module": "components/listitem/listitem.component.js"
10644
+ }
10264
10645
  },
10265
10646
  {
10266
- "description": "slot for list item subline text.",
10267
- "name": "trailing-text-subline"
10647
+ "kind": "field",
10648
+ "name": "tabIndex",
10649
+ "type": {
10650
+ "text": "number"
10651
+ },
10652
+ "default": "0",
10653
+ "description": "This property specifies the tab order of the element.",
10654
+ "attribute": "tabIndex",
10655
+ "reflects": true,
10656
+ "inheritedFrom": {
10657
+ "name": "ListItem",
10658
+ "module": "components/listitem/listitem.component.js"
10659
+ }
10268
10660
  },
10269
- {
10270
- "description": "slot for list item controls to appear of trailing end.",
10271
- "name": "trailing-controls"
10272
- }
10273
- ],
10274
- "members": [
10275
10661
  {
10276
10662
  "kind": "field",
10277
10663
  "name": "variant",
@@ -10281,7 +10667,11 @@
10281
10667
  "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
10282
10668
  "default": "'full-width'",
10283
10669
  "attribute": "variant",
10284
- "reflects": true
10670
+ "reflects": true,
10671
+ "inheritedFrom": {
10672
+ "name": "ListItem",
10673
+ "module": "components/listitem/listitem.component.js"
10674
+ }
10285
10675
  },
10286
10676
  {
10287
10677
  "kind": "field",
@@ -10291,7 +10681,11 @@
10291
10681
  },
10292
10682
  "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
10293
10683
  "attribute": "label",
10294
- "reflects": true
10684
+ "reflects": true,
10685
+ "inheritedFrom": {
10686
+ "name": "ListItem",
10687
+ "module": "components/listitem/listitem.component.js"
10688
+ }
10295
10689
  },
10296
10690
  {
10297
10691
  "kind": "field",
@@ -10301,7 +10695,11 @@
10301
10695
  },
10302
10696
  "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
10303
10697
  "attribute": "secondary-label",
10304
- "reflects": true
10698
+ "reflects": true,
10699
+ "inheritedFrom": {
10700
+ "name": "ListItem",
10701
+ "module": "components/listitem/listitem.component.js"
10702
+ }
10305
10703
  },
10306
10704
  {
10307
10705
  "kind": "field",
@@ -10311,7 +10709,11 @@
10311
10709
  },
10312
10710
  "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
10313
10711
  "attribute": "tertiary-label",
10314
- "reflects": true
10712
+ "reflects": true,
10713
+ "inheritedFrom": {
10714
+ "name": "ListItem",
10715
+ "module": "components/listitem/listitem.component.js"
10716
+ }
10315
10717
  },
10316
10718
  {
10317
10719
  "kind": "field",
@@ -10321,7 +10723,11 @@
10321
10723
  },
10322
10724
  "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
10323
10725
  "attribute": "side-header-text",
10324
- "reflects": true
10726
+ "reflects": true,
10727
+ "inheritedFrom": {
10728
+ "name": "ListItem",
10729
+ "module": "components/listitem/listitem.component.js"
10730
+ }
10325
10731
  },
10326
10732
  {
10327
10733
  "kind": "field",
@@ -10331,7 +10737,11 @@
10331
10737
  },
10332
10738
  "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
10333
10739
  "attribute": "subline-text",
10334
- "reflects": true
10740
+ "reflects": true,
10741
+ "inheritedFrom": {
10742
+ "name": "ListItem",
10743
+ "module": "components/listitem/listitem.component.js"
10744
+ }
10335
10745
  },
10336
10746
  {
10337
10747
  "kind": "method",
@@ -10366,7 +10776,11 @@
10366
10776
  "description": "The text content to be displayed within the slot."
10367
10777
  }
10368
10778
  ],
10369
- "description": "Generates a template for a text slot with the specified content."
10779
+ "description": "Generates a template for a text slot with the specified content.",
10780
+ "inheritedFrom": {
10781
+ "name": "ListItem",
10782
+ "module": "components/listitem/listitem.component.js"
10783
+ }
10370
10784
  },
10371
10785
  {
10372
10786
  "kind": "method",
@@ -10386,77 +10800,85 @@
10386
10800
  "description": "Whether to disable or enable the controls."
10387
10801
  }
10388
10802
  ],
10389
- "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
10803
+ "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls.",
10804
+ "inheritedFrom": {
10805
+ "name": "ListItem",
10806
+ "module": "components/listitem/listitem.component.js"
10807
+ }
10808
+ }
10809
+ ],
10810
+ "events": [
10811
+ {
10812
+ "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
10813
+ "name": "click",
10814
+ "reactName": "onClick",
10815
+ "inheritedFrom": {
10816
+ "name": "ListItem",
10817
+ "module": "src/components/listitem/listitem.component.ts"
10818
+ }
10390
10819
  },
10391
10820
  {
10392
- "kind": "field",
10393
- "name": "dataAriaLabel",
10394
- "type": {
10395
- "text": "string | null"
10396
- },
10397
- "default": "null",
10398
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10399
- "attribute": "data-aria-label",
10400
- "reflects": true,
10821
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
10822
+ "name": "keydown",
10823
+ "reactName": "onKeyDown",
10401
10824
  "inheritedFrom": {
10402
- "name": "DataAriaLabelMixin",
10403
- "module": "utils/mixins/DataAriaLabelMixin.js"
10825
+ "name": "ListItem",
10826
+ "module": "src/components/listitem/listitem.component.ts"
10404
10827
  }
10405
10828
  },
10406
10829
  {
10407
- "kind": "field",
10830
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
10831
+ "name": "keyup",
10832
+ "reactName": "onKeyUp",
10833
+ "inheritedFrom": {
10834
+ "name": "ListItem",
10835
+ "module": "src/components/listitem/listitem.component.ts"
10836
+ }
10837
+ },
10838
+ {
10839
+ "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
10840
+ "name": "focus",
10841
+ "reactName": "onFocus",
10842
+ "inheritedFrom": {
10843
+ "name": "ListItem",
10844
+ "module": "src/components/listitem/listitem.component.ts"
10845
+ }
10846
+ }
10847
+ ],
10848
+ "superclass": {
10849
+ "name": "ListItem",
10850
+ "module": "/src/components/listitem/listitem.component"
10851
+ },
10852
+ "tagName": "mdc-menuitem",
10853
+ "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-menuitem\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
10854
+ "customElement": true,
10855
+ "attributes": [
10856
+ {
10408
10857
  "name": "disabled",
10409
10858
  "type": {
10410
10859
  "text": "boolean | undefined"
10411
10860
  },
10412
10861
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
10413
10862
  "default": "undefined",
10414
- "attribute": "disabled",
10415
- "reflects": true,
10863
+ "fieldName": "disabled",
10416
10864
  "inheritedFrom": {
10417
- "name": "DisabledMixin",
10418
- "module": "utils/mixins/DisabledMixin.js"
10865
+ "name": "ListItem",
10866
+ "module": "src/components/listitem/listitem.component.ts"
10419
10867
  }
10420
10868
  },
10421
10869
  {
10422
- "kind": "field",
10423
10870
  "name": "tabIndex",
10424
10871
  "type": {
10425
10872
  "text": "number"
10426
10873
  },
10427
10874
  "default": "0",
10428
10875
  "description": "This property specifies the tab order of the element.",
10429
- "attribute": "tabIndex",
10430
- "reflects": true,
10876
+ "fieldName": "tabIndex",
10431
10877
  "inheritedFrom": {
10432
- "name": "TabIndexMixin",
10433
- "module": "utils/mixins/TabIndexMixin.js"
10878
+ "name": "ListItem",
10879
+ "module": "src/components/listitem/listitem.component.ts"
10434
10880
  }
10435
- }
10436
- ],
10437
- "events": [
10438
- {
10439
- "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
10440
- "name": "click",
10441
- "reactName": "onClick"
10442
- },
10443
- {
10444
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
10445
- "name": "keydown",
10446
- "reactName": "onKeyDown"
10447
- },
10448
- {
10449
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
10450
- "name": "keyup",
10451
- "reactName": "onKeyUp"
10452
10881
  },
10453
- {
10454
- "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
10455
- "name": "focus",
10456
- "reactName": "onFocus"
10457
- }
10458
- ],
10459
- "attributes": [
10460
10882
  {
10461
10883
  "name": "variant",
10462
10884
  "type": {
@@ -10464,7 +10886,11 @@
10464
10886
  },
10465
10887
  "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
10466
10888
  "default": "'full-width'",
10467
- "fieldName": "variant"
10889
+ "fieldName": "variant",
10890
+ "inheritedFrom": {
10891
+ "name": "ListItem",
10892
+ "module": "src/components/listitem/listitem.component.ts"
10893
+ }
10468
10894
  },
10469
10895
  {
10470
10896
  "name": "label",
@@ -10472,7 +10898,11 @@
10472
10898
  "text": "string | undefined"
10473
10899
  },
10474
10900
  "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
10475
- "fieldName": "label"
10901
+ "fieldName": "label",
10902
+ "inheritedFrom": {
10903
+ "name": "ListItem",
10904
+ "module": "src/components/listitem/listitem.component.ts"
10905
+ }
10476
10906
  },
10477
10907
  {
10478
10908
  "name": "secondary-label",
@@ -10480,7 +10910,11 @@
10480
10910
  "text": "string | undefined"
10481
10911
  },
10482
10912
  "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
10483
- "fieldName": "secondaryLabel"
10913
+ "fieldName": "secondaryLabel",
10914
+ "inheritedFrom": {
10915
+ "name": "ListItem",
10916
+ "module": "src/components/listitem/listitem.component.ts"
10917
+ }
10484
10918
  },
10485
10919
  {
10486
10920
  "name": "tertiary-label",
@@ -10488,7 +10922,11 @@
10488
10922
  "text": "string | undefined"
10489
10923
  },
10490
10924
  "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
10491
- "fieldName": "tertiaryLabel"
10925
+ "fieldName": "tertiaryLabel",
10926
+ "inheritedFrom": {
10927
+ "name": "ListItem",
10928
+ "module": "src/components/listitem/listitem.component.ts"
10929
+ }
10492
10930
  },
10493
10931
  {
10494
10932
  "name": "side-header-text",
@@ -10496,7 +10934,11 @@
10496
10934
  "text": "string | undefined"
10497
10935
  },
10498
10936
  "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
10499
- "fieldName": "sideHeaderText"
10937
+ "fieldName": "sideHeaderText",
10938
+ "inheritedFrom": {
10939
+ "name": "ListItem",
10940
+ "module": "src/components/listitem/listitem.component.ts"
10941
+ }
10500
10942
  },
10501
10943
  {
10502
10944
  "name": "subline-text",
@@ -10504,140 +10946,129 @@
10504
10946
  "text": "string | undefined"
10505
10947
  },
10506
10948
  "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
10507
- "fieldName": "sublineText"
10949
+ "fieldName": "sublineText",
10950
+ "inheritedFrom": {
10951
+ "name": "ListItem",
10952
+ "module": "src/components/listitem/listitem.component.ts"
10953
+ }
10954
+ }
10955
+ ],
10956
+ "slots": [
10957
+ {
10958
+ "description": "slot for list item controls to appear of leading end.",
10959
+ "name": "leading-controls",
10960
+ "inheritedFrom": {
10961
+ "name": "ListItem",
10962
+ "module": "src/components/listitem/listitem.component.ts"
10963
+ }
10508
10964
  },
10509
10965
  {
10510
- "name": "data-aria-label",
10511
- "type": {
10512
- "text": "string | null"
10513
- },
10514
- "default": "null",
10515
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
10516
- "fieldName": "dataAriaLabel",
10966
+ "description": "slot for list item primary label.",
10967
+ "name": "leading-text-primary-label",
10517
10968
  "inheritedFrom": {
10518
- "name": "DataAriaLabelMixin",
10519
- "module": "src/utils/mixins/DataAriaLabelMixin.ts"
10969
+ "name": "ListItem",
10970
+ "module": "src/components/listitem/listitem.component.ts"
10520
10971
  }
10521
10972
  },
10522
10973
  {
10523
- "name": "disabled",
10524
- "type": {
10525
- "text": "boolean | undefined"
10526
- },
10527
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
10528
- "default": "undefined",
10529
- "fieldName": "disabled",
10974
+ "description": "slot for list item secondary label.",
10975
+ "name": "leading-text-secondary-label",
10530
10976
  "inheritedFrom": {
10531
- "name": "DisabledMixin",
10532
- "module": "src/utils/mixins/DisabledMixin.ts"
10977
+ "name": "ListItem",
10978
+ "module": "src/components/listitem/listitem.component.ts"
10533
10979
  }
10534
10980
  },
10535
10981
  {
10536
- "name": "tabIndex",
10537
- "type": {
10538
- "text": "number"
10539
- },
10540
- "default": "0",
10541
- "description": "This property specifies the tab order of the element.",
10542
- "fieldName": "tabIndex",
10982
+ "description": "slot for list item tertiary label.",
10983
+ "name": "leading-text-tertiary-label",
10543
10984
  "inheritedFrom": {
10544
- "name": "TabIndexMixin",
10545
- "module": "src/utils/mixins/TabIndexMixin.ts"
10985
+ "name": "ListItem",
10986
+ "module": "src/components/listitem/listitem.component.ts"
10546
10987
  }
10547
- }
10548
- ],
10549
- "mixins": [
10988
+ },
10550
10989
  {
10551
- "name": "DataAriaLabelMixin",
10552
- "module": "/src/utils/mixins/DataAriaLabelMixin"
10990
+ "description": "slot for list item side header text.",
10991
+ "name": "trailing-text-side-header",
10992
+ "inheritedFrom": {
10993
+ "name": "ListItem",
10994
+ "module": "src/components/listitem/listitem.component.ts"
10995
+ }
10553
10996
  },
10554
10997
  {
10555
- "name": "DisabledMixin",
10556
- "module": "/src/utils/mixins/DisabledMixin"
10998
+ "description": "slot for list item subline text.",
10999
+ "name": "trailing-text-subline",
11000
+ "inheritedFrom": {
11001
+ "name": "ListItem",
11002
+ "module": "src/components/listitem/listitem.component.ts"
11003
+ }
10557
11004
  },
10558
11005
  {
10559
- "name": "TabIndexMixin",
10560
- "module": "/src/utils/mixins/TabIndexMixin"
11006
+ "description": "slot for list item controls to appear of trailing end.",
11007
+ "name": "trailing-controls",
11008
+ "inheritedFrom": {
11009
+ "name": "ListItem",
11010
+ "module": "src/components/listitem/listitem.component.ts"
11011
+ }
10561
11012
  }
10562
11013
  ],
10563
- "superclass": {
10564
- "name": "Component",
10565
- "module": "/src/models"
10566
- },
10567
- "tagName": "mdc-listitem",
10568
- "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
10569
- "customElement": true
10570
- }
10571
- ],
10572
- "exports": [
10573
- {
10574
- "kind": "js",
10575
- "name": "default",
10576
- "declaration": {
10577
- "name": "ListItem",
10578
- "module": "components/listitem/listitem.component.js"
10579
- }
10580
- }
10581
- ]
10582
- },
10583
- {
10584
- "kind": "javascript-module",
10585
- "path": "components/marker/marker.component.js",
10586
- "declarations": [
10587
- {
10588
- "kind": "class",
10589
- "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10590
- "name": "Marker",
10591
11014
  "cssProperties": [
10592
11015
  {
10593
- "description": "Allows customization of the default background color in solid variant.",
10594
- "name": "--mdc-marker-solid-background-color"
11016
+ "description": "Allows customization of the default background color.",
11017
+ "name": "--mdc-listitem-default-background-color",
11018
+ "inheritedFrom": {
11019
+ "name": "ListItem",
11020
+ "module": "src/components/listitem/listitem.component.ts"
11021
+ }
10595
11022
  },
10596
11023
  {
10597
- "description": "Allows customization of the default stripes in striped variant.",
10598
- "name": "--mdc-marker-striped-color"
11024
+ "description": "Allows customization of the background color on hover.",
11025
+ "name": "--mdc-listitem-background-color-hover",
11026
+ "inheritedFrom": {
11027
+ "name": "ListItem",
11028
+ "module": "src/components/listitem/listitem.component.ts"
11029
+ }
10599
11030
  },
10600
11031
  {
10601
- "description": "Allows customization of the default background color in striped variant.",
10602
- "name": "--mdc-marker-striped-background-color"
11032
+ "description": "Allows customization of the background color when pressed.",
11033
+ "name": "--mdc-listitem-background-color-active",
11034
+ "inheritedFrom": {
11035
+ "name": "ListItem",
11036
+ "module": "src/components/listitem/listitem.component.ts"
11037
+ }
10603
11038
  },
10604
11039
  {
10605
- "description": "Allows customization of the default width.",
10606
- "name": "--mdc-marker-width"
10607
- }
10608
- ],
10609
- "members": [
11040
+ "description": "Allows customization of the primary label, side header and subline text slot color.",
11041
+ "name": "--mdc-listitem-primary-label-color",
11042
+ "inheritedFrom": {
11043
+ "name": "ListItem",
11044
+ "module": "src/components/listitem/listitem.component.ts"
11045
+ }
11046
+ },
10610
11047
  {
10611
- "kind": "field",
10612
- "name": "variant",
10613
- "type": {
10614
- "text": "MarkerVariants"
10615
- },
10616
- "privacy": "public",
10617
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10618
- "default": "solid",
10619
- "attribute": "variant",
10620
- "reflects": true
10621
- }
10622
- ],
10623
- "attributes": [
11048
+ "description": "Allows customization of the secondary and tertiary label text slot color.",
11049
+ "name": "--mdc-listitem-secondary-label-color",
11050
+ "inheritedFrom": {
11051
+ "name": "ListItem",
11052
+ "module": "src/components/listitem/listitem.component.ts"
11053
+ }
11054
+ },
10624
11055
  {
10625
- "name": "variant",
10626
- "type": {
10627
- "text": "MarkerVariants"
10628
- },
10629
- "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
10630
- "default": "solid",
10631
- "fieldName": "variant"
11056
+ "description": "Allows customization of the disabled color.",
11057
+ "name": "--mdc-listitem-disabled-color",
11058
+ "inheritedFrom": {
11059
+ "name": "ListItem",
11060
+ "module": "src/components/listitem/listitem.component.ts"
11061
+ }
11062
+ },
11063
+ {
11064
+ "description": "Allows customization of column gap.",
11065
+ "name": "--mdc-listitem-column-gap",
11066
+ "inheritedFrom": {
11067
+ "name": "ListItem",
11068
+ "module": "src/components/listitem/listitem.component.ts"
11069
+ }
10632
11070
  }
10633
- ],
10634
- "superclass": {
10635
- "name": "Component",
10636
- "module": "/src/models"
10637
- },
10638
- "tagName": "mdc-marker",
10639
- "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
10640
- "customElement": true
11071
+ ]
10641
11072
  }
10642
11073
  ],
10643
11074
  "exports": [
@@ -10645,8 +11076,8 @@
10645
11076
  "kind": "js",
10646
11077
  "name": "default",
10647
11078
  "declaration": {
10648
- "name": "Marker",
10649
- "module": "components/marker/marker.component.js"
11079
+ "name": "MenuItem",
11080
+ "module": "components/menuitem/menuitem.component.js"
10650
11081
  }
10651
11082
  }
10652
11083
  ]
@@ -11064,21 +11495,6 @@
11064
11495
  "module": "utils/mixins/FormInternalsMixin.js"
11065
11496
  }
11066
11497
  },
11067
- {
11068
- "kind": "field",
11069
- "name": "dataAriaLabel",
11070
- "type": {
11071
- "text": "string | null"
11072
- },
11073
- "default": "null",
11074
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
11075
- "attribute": "data-aria-label",
11076
- "reflects": true,
11077
- "inheritedFrom": {
11078
- "name": "ListItem",
11079
- "module": "components/listitem/listitem.component.js"
11080
- }
11081
- },
11082
11498
  {
11083
11499
  "kind": "field",
11084
11500
  "name": "disabled",
@@ -11361,19 +11777,6 @@
11361
11777
  "module": "src/utils/mixins/FormInternalsMixin.ts"
11362
11778
  }
11363
11779
  },
11364
- {
11365
- "name": "data-aria-label",
11366
- "type": {
11367
- "text": "string | null"
11368
- },
11369
- "default": "null",
11370
- "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
11371
- "fieldName": "dataAriaLabel",
11372
- "inheritedFrom": {
11373
- "name": "ListItem",
11374
- "module": "src/components/listitem/listitem.component.ts"
11375
- }
11376
- },
11377
11780
  {
11378
11781
  "name": "disabled",
11379
11782
  "type": {