@momentum-design/components 0.91.0 → 0.91.1

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.
@@ -530,6 +530,67 @@
530
530
  }
531
531
  ]
532
532
  },
533
+ {
534
+ "kind": "javascript-module",
535
+ "path": "components/appheader/appheader.component.js",
536
+ "declarations": [
537
+ {
538
+ "kind": "class",
539
+ "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**.",
540
+ "name": "Appheader",
541
+ "cssParts": [
542
+ {
543
+ "description": "The main container for styling the header.",
544
+ "name": "container"
545
+ },
546
+ {
547
+ "description": "The leading section of the header.",
548
+ "name": "leading-section"
549
+ },
550
+ {
551
+ "description": "The center section of the header.",
552
+ "name": "center-section"
553
+ },
554
+ {
555
+ "description": "The trailing section of the header.",
556
+ "name": "trailing-section"
557
+ }
558
+ ],
559
+ "slots": [
560
+ {
561
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
562
+ "name": "leading"
563
+ },
564
+ {
565
+ "description": "Slot for the center section (e.g., search bar, icons).",
566
+ "name": "center"
567
+ },
568
+ {
569
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
570
+ "name": "trailing"
571
+ }
572
+ ],
573
+ "members": [],
574
+ "superclass": {
575
+ "name": "Component",
576
+ "module": "/src/models"
577
+ },
578
+ "tagName": "mdc-appheader",
579
+ "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 */",
580
+ "customElement": true
581
+ }
582
+ ],
583
+ "exports": [
584
+ {
585
+ "kind": "js",
586
+ "name": "default",
587
+ "declaration": {
588
+ "name": "Appheader",
589
+ "module": "components/appheader/appheader.component.js"
590
+ }
591
+ }
592
+ ]
593
+ },
533
594
  {
534
595
  "kind": "javascript-module",
535
596
  "path": "components/animation/animation.component.js",
@@ -742,67 +803,6 @@
742
803
  }
743
804
  ]
744
805
  },
745
- {
746
- "kind": "javascript-module",
747
- "path": "components/appheader/appheader.component.js",
748
- "declarations": [
749
- {
750
- "kind": "class",
751
- "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**.",
752
- "name": "Appheader",
753
- "cssParts": [
754
- {
755
- "description": "The main container for styling the header.",
756
- "name": "container"
757
- },
758
- {
759
- "description": "The leading section of the header.",
760
- "name": "leading-section"
761
- },
762
- {
763
- "description": "The center section of the header.",
764
- "name": "center-section"
765
- },
766
- {
767
- "description": "The trailing section of the header.",
768
- "name": "trailing-section"
769
- }
770
- ],
771
- "slots": [
772
- {
773
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
774
- "name": "leading"
775
- },
776
- {
777
- "description": "Slot for the center section (e.g., search bar, icons).",
778
- "name": "center"
779
- },
780
- {
781
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
782
- "name": "trailing"
783
- }
784
- ],
785
- "members": [],
786
- "superclass": {
787
- "name": "Component",
788
- "module": "/src/models"
789
- },
790
- "tagName": "mdc-appheader",
791
- "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 */",
792
- "customElement": true
793
- }
794
- ],
795
- "exports": [
796
- {
797
- "kind": "js",
798
- "name": "default",
799
- "declaration": {
800
- "name": "Appheader",
801
- "module": "components/appheader/appheader.component.js"
802
- }
803
- }
804
- ]
805
- },
806
806
  {
807
807
  "kind": "javascript-module",
808
808
  "path": "components/avatar/avatar.component.js",
@@ -15664,15 +15664,15 @@
15664
15664
  },
15665
15665
  {
15666
15666
  "kind": "javascript-module",
15667
- "path": "components/menuitem/menuitem.component.js",
15667
+ "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
15668
15668
  "declarations": [
15669
15669
  {
15670
15670
  "kind": "class",
15671
- "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 element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
15672
- "name": "MenuItem",
15671
+ "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
15672
+ "name": "MenuItemCheckbox",
15673
15673
  "slots": [
15674
15674
  {
15675
- "description": "slot for menu item controls to appear of leading end.",
15675
+ "description": "slot for menu item checkbox controls to appear of leading end.",
15676
15676
  "name": "leading-controls",
15677
15677
  "inheritedFrom": {
15678
15678
  "name": "ListItem",
@@ -15680,7 +15680,7 @@
15680
15680
  }
15681
15681
  },
15682
15682
  {
15683
- "description": "slot for menu item primary label.",
15683
+ "description": "slot for menu item checkbox primary label.",
15684
15684
  "name": "leading-text-primary-label",
15685
15685
  "inheritedFrom": {
15686
15686
  "name": "ListItem",
@@ -15688,7 +15688,7 @@
15688
15688
  }
15689
15689
  },
15690
15690
  {
15691
- "description": "slot for menu item secondary label.",
15691
+ "description": "slot for menu item checkbox secondary label.",
15692
15692
  "name": "leading-text-secondary-label",
15693
15693
  "inheritedFrom": {
15694
15694
  "name": "ListItem",
@@ -15696,7 +15696,7 @@
15696
15696
  }
15697
15697
  },
15698
15698
  {
15699
- "description": "slot for menu item tertiary label.",
15699
+ "description": "slot for menu item checkbox tertiary label.",
15700
15700
  "name": "leading-text-tertiary-label",
15701
15701
  "inheritedFrom": {
15702
15702
  "name": "ListItem",
@@ -15704,7 +15704,7 @@
15704
15704
  }
15705
15705
  },
15706
15706
  {
15707
- "description": "slot for menu item side header text.",
15707
+ "description": "slot for menu item checkbox side header text.",
15708
15708
  "name": "trailing-text-side-header",
15709
15709
  "inheritedFrom": {
15710
15710
  "name": "ListItem",
@@ -15712,7 +15712,7 @@
15712
15712
  }
15713
15713
  },
15714
15714
  {
15715
- "description": "slot for menu item subline text.",
15715
+ "description": "slot for menu item checkbox subline text.",
15716
15716
  "name": "trailing-text-subline",
15717
15717
  "inheritedFrom": {
15718
15718
  "name": "ListItem",
@@ -15720,7 +15720,7 @@
15720
15720
  }
15721
15721
  },
15722
15722
  {
15723
- "description": "slot for menu item controls to appear of trailing end.",
15723
+ "description": "slot for menu item checkbox controls to appear of trailing end.",
15724
15724
  "name": "trailing-controls",
15725
15725
  "inheritedFrom": {
15726
15726
  "name": "ListItem",
@@ -15729,6 +15729,67 @@
15729
15729
  }
15730
15730
  ],
15731
15731
  "members": [
15732
+ {
15733
+ "kind": "field",
15734
+ "name": "checked",
15735
+ "type": {
15736
+ "text": "boolean"
15737
+ },
15738
+ "default": "false",
15739
+ "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
15740
+ "attribute": "checked",
15741
+ "reflects": true
15742
+ },
15743
+ {
15744
+ "kind": "field",
15745
+ "name": "indicator",
15746
+ "type": {
15747
+ "text": "Indicator"
15748
+ },
15749
+ "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
15750
+ "default": "'checkbox'",
15751
+ "attribute": "indicator",
15752
+ "reflects": true
15753
+ },
15754
+ {
15755
+ "kind": "field",
15756
+ "name": "handleMouseClick",
15757
+ "privacy": "private",
15758
+ "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
15759
+ },
15760
+ {
15761
+ "kind": "method",
15762
+ "name": "staticCheckbox",
15763
+ "privacy": "private",
15764
+ "return": {
15765
+ "type": {
15766
+ "text": ""
15767
+ }
15768
+ },
15769
+ "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
15770
+ },
15771
+ {
15772
+ "kind": "method",
15773
+ "name": "staticToggle",
15774
+ "privacy": "private",
15775
+ "return": {
15776
+ "type": {
15777
+ "text": ""
15778
+ }
15779
+ },
15780
+ "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
15781
+ },
15782
+ {
15783
+ "kind": "method",
15784
+ "name": "getCheckmarkIcon",
15785
+ "privacy": "private",
15786
+ "return": {
15787
+ "type": {
15788
+ "text": ""
15789
+ }
15790
+ },
15791
+ "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
15792
+ },
15732
15793
  {
15733
15794
  "kind": "field",
15734
15795
  "name": "arrowPosition",
@@ -15737,7 +15798,11 @@
15737
15798
  },
15738
15799
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
15739
15800
  "attribute": "arrow-position",
15740
- "reflects": true
15801
+ "reflects": true,
15802
+ "inheritedFrom": {
15803
+ "name": "MenuItem",
15804
+ "module": "components/menuitem/menuitem.component.js"
15805
+ }
15741
15806
  },
15742
15807
  {
15743
15808
  "kind": "field",
@@ -15747,7 +15812,11 @@
15747
15812
  },
15748
15813
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
15749
15814
  "attribute": "arrow-direction",
15750
- "reflects": true
15815
+ "reflects": true,
15816
+ "inheritedFrom": {
15817
+ "name": "MenuItem",
15818
+ "module": "components/menuitem/menuitem.component.js"
15819
+ }
15751
15820
  },
15752
15821
  {
15753
15822
  "kind": "field",
@@ -15758,7 +15827,11 @@
15758
15827
  "default": "undefined",
15759
15828
  "description": "The name attribute is used to identify the menu item when it is selected.",
15760
15829
  "attribute": "name",
15761
- "reflects": true
15830
+ "reflects": true,
15831
+ "inheritedFrom": {
15832
+ "name": "MenuItem",
15833
+ "module": "components/menuitem/menuitem.component.js"
15834
+ }
15762
15835
  },
15763
15836
  {
15764
15837
  "kind": "field",
@@ -15769,7 +15842,11 @@
15769
15842
  "default": "undefined",
15770
15843
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
15771
15844
  "attribute": "value",
15772
- "reflects": true
15845
+ "reflects": true,
15846
+ "inheritedFrom": {
15847
+ "name": "MenuItem",
15848
+ "module": "components/menuitem/menuitem.component.js"
15849
+ }
15773
15850
  },
15774
15851
  {
15775
15852
  "kind": "method",
@@ -15813,7 +15890,11 @@
15813
15890
  "description": "The keyboard event that triggered the action."
15814
15891
  }
15815
15892
  ],
15816
- "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
15893
+ "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
15894
+ "inheritedFrom": {
15895
+ "name": "MenuItem",
15896
+ "module": "components/menuitem/menuitem.component.js"
15897
+ }
15817
15898
  },
15818
15899
  {
15819
15900
  "kind": "method",
@@ -16150,7 +16231,12 @@
16150
16231
  ],
16151
16232
  "events": [
16152
16233
  {
16153
- "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
16234
+ "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
16235
+ "name": "change",
16236
+ "reactName": "onChange"
16237
+ },
16238
+ {
16239
+ "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
16154
16240
  "name": "click",
16155
16241
  "reactName": "onClick",
16156
16242
  "inheritedFrom": {
@@ -16159,27 +16245,27 @@
16159
16245
  }
16160
16246
  },
16161
16247
  {
16162
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
16163
- "name": "keydown",
16164
- "reactName": "onKeyDown",
16248
+ "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
16249
+ "name": "focus",
16250
+ "reactName": "onFocus",
16165
16251
  "inheritedFrom": {
16166
16252
  "name": "ListItem",
16167
16253
  "module": "src/components/listitem/listitem.component.ts"
16168
16254
  }
16169
16255
  },
16170
16256
  {
16171
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
16172
- "name": "keyup",
16173
- "reactName": "onKeyUp",
16257
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
16258
+ "name": "keydown",
16259
+ "reactName": "onKeyDown",
16174
16260
  "inheritedFrom": {
16175
16261
  "name": "ListItem",
16176
16262
  "module": "src/components/listitem/listitem.component.ts"
16177
16263
  }
16178
16264
  },
16179
16265
  {
16180
- "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
16181
- "name": "focus",
16182
- "reactName": "onFocus",
16266
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
16267
+ "name": "keyup",
16268
+ "reactName": "onKeyUp",
16183
16269
  "inheritedFrom": {
16184
16270
  "name": "ListItem",
16185
16271
  "module": "src/components/listitem/listitem.component.ts"
@@ -16187,13 +16273,35 @@
16187
16273
  }
16188
16274
  ],
16189
16275
  "attributes": [
16276
+ {
16277
+ "name": "checked",
16278
+ "type": {
16279
+ "text": "boolean"
16280
+ },
16281
+ "default": "false",
16282
+ "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
16283
+ "fieldName": "checked"
16284
+ },
16285
+ {
16286
+ "name": "indicator",
16287
+ "type": {
16288
+ "text": "Indicator"
16289
+ },
16290
+ "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
16291
+ "default": "'checkbox'",
16292
+ "fieldName": "indicator"
16293
+ },
16190
16294
  {
16191
16295
  "name": "arrow-position",
16192
16296
  "type": {
16193
16297
  "text": "ArrowPositions | undefined"
16194
16298
  },
16195
16299
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
16196
- "fieldName": "arrowPosition"
16300
+ "fieldName": "arrowPosition",
16301
+ "inheritedFrom": {
16302
+ "name": "MenuItem",
16303
+ "module": "src/components/menuitem/menuitem.component.ts"
16304
+ }
16197
16305
  },
16198
16306
  {
16199
16307
  "name": "arrow-direction",
@@ -16201,7 +16309,11 @@
16201
16309
  "text": "ArrowDirections | undefined"
16202
16310
  },
16203
16311
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
16204
- "fieldName": "arrowDirection"
16312
+ "fieldName": "arrowDirection",
16313
+ "inheritedFrom": {
16314
+ "name": "MenuItem",
16315
+ "module": "src/components/menuitem/menuitem.component.ts"
16316
+ }
16205
16317
  },
16206
16318
  {
16207
16319
  "name": "name",
@@ -16210,7 +16322,11 @@
16210
16322
  },
16211
16323
  "default": "undefined",
16212
16324
  "description": "The name attribute is used to identify the menu item when it is selected.",
16213
- "fieldName": "name"
16325
+ "fieldName": "name",
16326
+ "inheritedFrom": {
16327
+ "name": "MenuItem",
16328
+ "module": "src/components/menuitem/menuitem.component.ts"
16329
+ }
16214
16330
  },
16215
16331
  {
16216
16332
  "name": "value",
@@ -16219,7 +16335,11 @@
16219
16335
  },
16220
16336
  "default": "undefined",
16221
16337
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
16222
- "fieldName": "value"
16338
+ "fieldName": "value",
16339
+ "inheritedFrom": {
16340
+ "name": "MenuItem",
16341
+ "module": "src/components/menuitem/menuitem.component.ts"
16342
+ }
16223
16343
  },
16224
16344
  {
16225
16345
  "name": "disabled",
@@ -16360,11 +16480,11 @@
16360
16480
  }
16361
16481
  ],
16362
16482
  "superclass": {
16363
- "name": "ListItem",
16364
- "module": "/src/components/listitem/listitem.component"
16483
+ "name": "MenuItem",
16484
+ "module": "/src/components/menuitem/menuitem.component"
16365
16485
  },
16366
- "tagName": "mdc-menuitem",
16367
- "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 element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\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 */",
16486
+ "tagName": "mdc-menuitemcheckbox",
16487
+ "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
16368
16488
  "customElement": true,
16369
16489
  "cssProperties": [
16370
16490
  {
@@ -16439,23 +16559,23 @@
16439
16559
  "kind": "js",
16440
16560
  "name": "default",
16441
16561
  "declaration": {
16442
- "name": "MenuItem",
16443
- "module": "components/menuitem/menuitem.component.js"
16562
+ "name": "MenuItemCheckbox",
16563
+ "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
16444
16564
  }
16445
16565
  }
16446
16566
  ]
16447
16567
  },
16448
16568
  {
16449
16569
  "kind": "javascript-module",
16450
- "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
16570
+ "path": "components/menuitem/menuitem.component.js",
16451
16571
  "declarations": [
16452
16572
  {
16453
16573
  "kind": "class",
16454
- "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
16455
- "name": "MenuItemCheckbox",
16574
+ "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 element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
16575
+ "name": "MenuItem",
16456
16576
  "slots": [
16457
16577
  {
16458
- "description": "slot for menu item checkbox controls to appear of leading end.",
16578
+ "description": "slot for menu item controls to appear of leading end.",
16459
16579
  "name": "leading-controls",
16460
16580
  "inheritedFrom": {
16461
16581
  "name": "ListItem",
@@ -16463,7 +16583,7 @@
16463
16583
  }
16464
16584
  },
16465
16585
  {
16466
- "description": "slot for menu item checkbox primary label.",
16586
+ "description": "slot for menu item primary label.",
16467
16587
  "name": "leading-text-primary-label",
16468
16588
  "inheritedFrom": {
16469
16589
  "name": "ListItem",
@@ -16471,7 +16591,7 @@
16471
16591
  }
16472
16592
  },
16473
16593
  {
16474
- "description": "slot for menu item checkbox secondary label.",
16594
+ "description": "slot for menu item secondary label.",
16475
16595
  "name": "leading-text-secondary-label",
16476
16596
  "inheritedFrom": {
16477
16597
  "name": "ListItem",
@@ -16479,7 +16599,7 @@
16479
16599
  }
16480
16600
  },
16481
16601
  {
16482
- "description": "slot for menu item checkbox tertiary label.",
16602
+ "description": "slot for menu item tertiary label.",
16483
16603
  "name": "leading-text-tertiary-label",
16484
16604
  "inheritedFrom": {
16485
16605
  "name": "ListItem",
@@ -16487,7 +16607,7 @@
16487
16607
  }
16488
16608
  },
16489
16609
  {
16490
- "description": "slot for menu item checkbox side header text.",
16610
+ "description": "slot for menu item side header text.",
16491
16611
  "name": "trailing-text-side-header",
16492
16612
  "inheritedFrom": {
16493
16613
  "name": "ListItem",
@@ -16495,7 +16615,7 @@
16495
16615
  }
16496
16616
  },
16497
16617
  {
16498
- "description": "slot for menu item checkbox subline text.",
16618
+ "description": "slot for menu item subline text.",
16499
16619
  "name": "trailing-text-subline",
16500
16620
  "inheritedFrom": {
16501
16621
  "name": "ListItem",
@@ -16503,7 +16623,7 @@
16503
16623
  }
16504
16624
  },
16505
16625
  {
16506
- "description": "slot for menu item checkbox controls to appear of trailing end.",
16626
+ "description": "slot for menu item controls to appear of trailing end.",
16507
16627
  "name": "trailing-controls",
16508
16628
  "inheritedFrom": {
16509
16629
  "name": "ListItem",
@@ -16512,67 +16632,6 @@
16512
16632
  }
16513
16633
  ],
16514
16634
  "members": [
16515
- {
16516
- "kind": "field",
16517
- "name": "checked",
16518
- "type": {
16519
- "text": "boolean"
16520
- },
16521
- "default": "false",
16522
- "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
16523
- "attribute": "checked",
16524
- "reflects": true
16525
- },
16526
- {
16527
- "kind": "field",
16528
- "name": "indicator",
16529
- "type": {
16530
- "text": "Indicator"
16531
- },
16532
- "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
16533
- "default": "'checkbox'",
16534
- "attribute": "indicator",
16535
- "reflects": true
16536
- },
16537
- {
16538
- "kind": "field",
16539
- "name": "handleMouseClick",
16540
- "privacy": "private",
16541
- "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
16542
- },
16543
- {
16544
- "kind": "method",
16545
- "name": "staticCheckbox",
16546
- "privacy": "private",
16547
- "return": {
16548
- "type": {
16549
- "text": ""
16550
- }
16551
- },
16552
- "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
16553
- },
16554
- {
16555
- "kind": "method",
16556
- "name": "staticToggle",
16557
- "privacy": "private",
16558
- "return": {
16559
- "type": {
16560
- "text": ""
16561
- }
16562
- },
16563
- "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
16564
- },
16565
- {
16566
- "kind": "method",
16567
- "name": "getCheckmarkIcon",
16568
- "privacy": "private",
16569
- "return": {
16570
- "type": {
16571
- "text": ""
16572
- }
16573
- },
16574
- "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
16575
- },
16576
16635
  {
16577
16636
  "kind": "field",
16578
16637
  "name": "arrowPosition",
@@ -16581,11 +16640,7 @@
16581
16640
  },
16582
16641
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
16583
16642
  "attribute": "arrow-position",
16584
- "reflects": true,
16585
- "inheritedFrom": {
16586
- "name": "MenuItem",
16587
- "module": "components/menuitem/menuitem.component.js"
16588
- }
16643
+ "reflects": true
16589
16644
  },
16590
16645
  {
16591
16646
  "kind": "field",
@@ -16595,11 +16650,7 @@
16595
16650
  },
16596
16651
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
16597
16652
  "attribute": "arrow-direction",
16598
- "reflects": true,
16599
- "inheritedFrom": {
16600
- "name": "MenuItem",
16601
- "module": "components/menuitem/menuitem.component.js"
16602
- }
16653
+ "reflects": true
16603
16654
  },
16604
16655
  {
16605
16656
  "kind": "field",
@@ -16610,11 +16661,7 @@
16610
16661
  "default": "undefined",
16611
16662
  "description": "The name attribute is used to identify the menu item when it is selected.",
16612
16663
  "attribute": "name",
16613
- "reflects": true,
16614
- "inheritedFrom": {
16615
- "name": "MenuItem",
16616
- "module": "components/menuitem/menuitem.component.js"
16617
- }
16664
+ "reflects": true
16618
16665
  },
16619
16666
  {
16620
16667
  "kind": "field",
@@ -16625,11 +16672,7 @@
16625
16672
  "default": "undefined",
16626
16673
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
16627
16674
  "attribute": "value",
16628
- "reflects": true,
16629
- "inheritedFrom": {
16630
- "name": "MenuItem",
16631
- "module": "components/menuitem/menuitem.component.js"
16632
- }
16675
+ "reflects": true
16633
16676
  },
16634
16677
  {
16635
16678
  "kind": "method",
@@ -16673,11 +16716,7 @@
16673
16716
  "description": "The keyboard event that triggered the action."
16674
16717
  }
16675
16718
  ],
16676
- "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
16677
- "inheritedFrom": {
16678
- "name": "MenuItem",
16679
- "module": "components/menuitem/menuitem.component.js"
16680
- }
16719
+ "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
16681
16720
  },
16682
16721
  {
16683
16722
  "kind": "method",
@@ -17014,12 +17053,7 @@
17014
17053
  ],
17015
17054
  "events": [
17016
17055
  {
17017
- "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
17018
- "name": "change",
17019
- "reactName": "onChange"
17020
- },
17021
- {
17022
- "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
17056
+ "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
17023
17057
  "name": "click",
17024
17058
  "reactName": "onClick",
17025
17059
  "inheritedFrom": {
@@ -17027,15 +17061,6 @@
17027
17061
  "module": "src/components/listitem/listitem.component.ts"
17028
17062
  }
17029
17063
  },
17030
- {
17031
- "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
17032
- "name": "focus",
17033
- "reactName": "onFocus",
17034
- "inheritedFrom": {
17035
- "name": "ListItem",
17036
- "module": "src/components/listitem/listitem.component.ts"
17037
- }
17038
- },
17039
17064
  {
17040
17065
  "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
17041
17066
  "name": "keydown",
@@ -17053,38 +17078,25 @@
17053
17078
  "name": "ListItem",
17054
17079
  "module": "src/components/listitem/listitem.component.ts"
17055
17080
  }
17081
+ },
17082
+ {
17083
+ "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
17084
+ "name": "focus",
17085
+ "reactName": "onFocus",
17086
+ "inheritedFrom": {
17087
+ "name": "ListItem",
17088
+ "module": "src/components/listitem/listitem.component.ts"
17089
+ }
17056
17090
  }
17057
17091
  ],
17058
17092
  "attributes": [
17059
- {
17060
- "name": "checked",
17061
- "type": {
17062
- "text": "boolean"
17063
- },
17064
- "default": "false",
17065
- "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
17066
- "fieldName": "checked"
17067
- },
17068
- {
17069
- "name": "indicator",
17070
- "type": {
17071
- "text": "Indicator"
17072
- },
17073
- "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
17074
- "default": "'checkbox'",
17075
- "fieldName": "indicator"
17076
- },
17077
17093
  {
17078
17094
  "name": "arrow-position",
17079
17095
  "type": {
17080
17096
  "text": "ArrowPositions | undefined"
17081
17097
  },
17082
17098
  "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
17083
- "fieldName": "arrowPosition",
17084
- "inheritedFrom": {
17085
- "name": "MenuItem",
17086
- "module": "src/components/menuitem/menuitem.component.ts"
17087
- }
17099
+ "fieldName": "arrowPosition"
17088
17100
  },
17089
17101
  {
17090
17102
  "name": "arrow-direction",
@@ -17092,11 +17104,7 @@
17092
17104
  "text": "ArrowDirections | undefined"
17093
17105
  },
17094
17106
  "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
17095
- "fieldName": "arrowDirection",
17096
- "inheritedFrom": {
17097
- "name": "MenuItem",
17098
- "module": "src/components/menuitem/menuitem.component.ts"
17099
- }
17107
+ "fieldName": "arrowDirection"
17100
17108
  },
17101
17109
  {
17102
17110
  "name": "name",
@@ -17105,11 +17113,7 @@
17105
17113
  },
17106
17114
  "default": "undefined",
17107
17115
  "description": "The name attribute is used to identify the menu item when it is selected.",
17108
- "fieldName": "name",
17109
- "inheritedFrom": {
17110
- "name": "MenuItem",
17111
- "module": "src/components/menuitem/menuitem.component.ts"
17112
- }
17116
+ "fieldName": "name"
17113
17117
  },
17114
17118
  {
17115
17119
  "name": "value",
@@ -17118,11 +17122,7 @@
17118
17122
  },
17119
17123
  "default": "undefined",
17120
17124
  "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
17121
- "fieldName": "value",
17122
- "inheritedFrom": {
17123
- "name": "MenuItem",
17124
- "module": "src/components/menuitem/menuitem.component.ts"
17125
- }
17125
+ "fieldName": "value"
17126
17126
  },
17127
17127
  {
17128
17128
  "name": "disabled",
@@ -17263,11 +17263,11 @@
17263
17263
  }
17264
17264
  ],
17265
17265
  "superclass": {
17266
- "name": "MenuItem",
17267
- "module": "/src/components/menuitem/menuitem.component"
17266
+ "name": "ListItem",
17267
+ "module": "/src/components/listitem/listitem.component"
17268
17268
  },
17269
- "tagName": "mdc-menuitemcheckbox",
17270
- "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
17269
+ "tagName": "mdc-menuitem",
17270
+ "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 element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\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 */",
17271
17271
  "customElement": true,
17272
17272
  "cssProperties": [
17273
17273
  {
@@ -17342,8 +17342,8 @@
17342
17342
  "kind": "js",
17343
17343
  "name": "default",
17344
17344
  "declaration": {
17345
- "name": "MenuItemCheckbox",
17346
- "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
17345
+ "name": "MenuItem",
17346
+ "module": "components/menuitem/menuitem.component.js"
17347
17347
  }
17348
17348
  }
17349
17349
  ]