@nordhealth/components 1.1.2 → 1.2.0
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.
- package/custom-elements.json +235 -247
- package/lib/Dropdown.js +1 -1
- package/lib/Popout.js +1 -1
- package/lib/Popout.js.map +1 -1
- package/lib/Stack.js.map +1 -1
- package/lib/bundle.js +8 -8
- package/lib/bundle.js.map +1 -1
- package/lib/src/popout/Popout.d.ts +5 -2
- package/lib/src/stack/Stack.d.ts +2 -3
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -422,6 +422,74 @@
|
|
|
422
422
|
],
|
|
423
423
|
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
|
|
424
424
|
},
|
|
425
|
+
{
|
|
426
|
+
"kind": "javascript-module",
|
|
427
|
+
"path": "src/badge/Badge.ts",
|
|
428
|
+
"declarations": [
|
|
429
|
+
{
|
|
430
|
+
"kind": "class",
|
|
431
|
+
"description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
|
|
432
|
+
"name": "Badge",
|
|
433
|
+
"slots": [
|
|
434
|
+
{
|
|
435
|
+
"description": "The badge content.",
|
|
436
|
+
"name": ""
|
|
437
|
+
}
|
|
438
|
+
],
|
|
439
|
+
"members": [
|
|
440
|
+
{
|
|
441
|
+
"kind": "field",
|
|
442
|
+
"name": "type",
|
|
443
|
+
"type": {
|
|
444
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
|
|
445
|
+
},
|
|
446
|
+
"default": "\"info\"",
|
|
447
|
+
"description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
|
|
448
|
+
"attribute": "type",
|
|
449
|
+
"reflects": true
|
|
450
|
+
}
|
|
451
|
+
],
|
|
452
|
+
"attributes": [
|
|
453
|
+
{
|
|
454
|
+
"name": "type",
|
|
455
|
+
"type": {
|
|
456
|
+
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
|
|
457
|
+
},
|
|
458
|
+
"default": "\"info\"",
|
|
459
|
+
"description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
|
|
460
|
+
"fieldName": "type"
|
|
461
|
+
}
|
|
462
|
+
],
|
|
463
|
+
"superclass": {
|
|
464
|
+
"name": "LitElement",
|
|
465
|
+
"package": "lit"
|
|
466
|
+
},
|
|
467
|
+
"status": "ready",
|
|
468
|
+
"category": "text",
|
|
469
|
+
"tagName": "nord-badge",
|
|
470
|
+
"customElement": true
|
|
471
|
+
}
|
|
472
|
+
],
|
|
473
|
+
"exports": [
|
|
474
|
+
{
|
|
475
|
+
"kind": "js",
|
|
476
|
+
"name": "default",
|
|
477
|
+
"declaration": {
|
|
478
|
+
"name": "Badge",
|
|
479
|
+
"module": "src/badge/Badge.ts"
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"kind": "custom-element-definition",
|
|
484
|
+
"name": "nord-badge",
|
|
485
|
+
"declaration": {
|
|
486
|
+
"name": "Badge",
|
|
487
|
+
"module": "src/badge/Badge.ts"
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
],
|
|
491
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info` | The default variant. Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n"
|
|
492
|
+
},
|
|
425
493
|
{
|
|
426
494
|
"kind": "javascript-module",
|
|
427
495
|
"path": "src/button/Button.ts",
|
|
@@ -860,162 +928,6 @@
|
|
|
860
928
|
],
|
|
861
929
|
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. |\n| `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. |\n| `dashed` | Dashed style should be used for actions that trigger filtering. |\n| `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. |\n| `plain` | Used for less important or less common actions. Can be also used for linking to other pages. |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
|
|
862
930
|
},
|
|
863
|
-
{
|
|
864
|
-
"kind": "javascript-module",
|
|
865
|
-
"path": "src/badge/Badge.ts",
|
|
866
|
-
"declarations": [
|
|
867
|
-
{
|
|
868
|
-
"kind": "class",
|
|
869
|
-
"description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
|
|
870
|
-
"name": "Badge",
|
|
871
|
-
"slots": [
|
|
872
|
-
{
|
|
873
|
-
"description": "The badge content.",
|
|
874
|
-
"name": ""
|
|
875
|
-
}
|
|
876
|
-
],
|
|
877
|
-
"members": [
|
|
878
|
-
{
|
|
879
|
-
"kind": "field",
|
|
880
|
-
"name": "type",
|
|
881
|
-
"type": {
|
|
882
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
|
|
883
|
-
},
|
|
884
|
-
"default": "\"info\"",
|
|
885
|
-
"description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
|
|
886
|
-
"attribute": "type",
|
|
887
|
-
"reflects": true
|
|
888
|
-
}
|
|
889
|
-
],
|
|
890
|
-
"attributes": [
|
|
891
|
-
{
|
|
892
|
-
"name": "type",
|
|
893
|
-
"type": {
|
|
894
|
-
"text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
|
|
895
|
-
},
|
|
896
|
-
"default": "\"info\"",
|
|
897
|
-
"description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
|
|
898
|
-
"fieldName": "type"
|
|
899
|
-
}
|
|
900
|
-
],
|
|
901
|
-
"superclass": {
|
|
902
|
-
"name": "LitElement",
|
|
903
|
-
"package": "lit"
|
|
904
|
-
},
|
|
905
|
-
"status": "ready",
|
|
906
|
-
"category": "text",
|
|
907
|
-
"tagName": "nord-badge",
|
|
908
|
-
"customElement": true
|
|
909
|
-
}
|
|
910
|
-
],
|
|
911
|
-
"exports": [
|
|
912
|
-
{
|
|
913
|
-
"kind": "js",
|
|
914
|
-
"name": "default",
|
|
915
|
-
"declaration": {
|
|
916
|
-
"name": "Badge",
|
|
917
|
-
"module": "src/badge/Badge.ts"
|
|
918
|
-
}
|
|
919
|
-
},
|
|
920
|
-
{
|
|
921
|
-
"kind": "custom-element-definition",
|
|
922
|
-
"name": "nord-badge",
|
|
923
|
-
"declaration": {
|
|
924
|
-
"name": "Badge",
|
|
925
|
-
"module": "src/badge/Badge.ts"
|
|
926
|
-
}
|
|
927
|
-
}
|
|
928
|
-
],
|
|
929
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info` | The default variant. Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n"
|
|
930
|
-
},
|
|
931
|
-
{
|
|
932
|
-
"kind": "javascript-module",
|
|
933
|
-
"path": "src/card/Card.ts",
|
|
934
|
-
"declarations": [
|
|
935
|
-
{
|
|
936
|
-
"kind": "class",
|
|
937
|
-
"description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
|
|
938
|
-
"name": "Card",
|
|
939
|
-
"slots": [
|
|
940
|
-
{
|
|
941
|
-
"description": "The card content.",
|
|
942
|
-
"name": ""
|
|
943
|
-
},
|
|
944
|
-
{
|
|
945
|
-
"description": "Optional slot that holds a header for the card.",
|
|
946
|
-
"name": "header"
|
|
947
|
-
},
|
|
948
|
-
{
|
|
949
|
-
"description": "Optional slot that holds footer content for the card.",
|
|
950
|
-
"name": "footer"
|
|
951
|
-
}
|
|
952
|
-
],
|
|
953
|
-
"members": [
|
|
954
|
-
{
|
|
955
|
-
"kind": "field",
|
|
956
|
-
"name": "headerSlot",
|
|
957
|
-
"privacy": "private",
|
|
958
|
-
"default": "new SlotController(this, \"header\")"
|
|
959
|
-
},
|
|
960
|
-
{
|
|
961
|
-
"kind": "field",
|
|
962
|
-
"name": "footerSlot",
|
|
963
|
-
"privacy": "private",
|
|
964
|
-
"default": "new SlotController(this, \"footer\")"
|
|
965
|
-
},
|
|
966
|
-
{
|
|
967
|
-
"kind": "field",
|
|
968
|
-
"name": "padding",
|
|
969
|
-
"type": {
|
|
970
|
-
"text": "\"m\" | \"l\" | \"none\""
|
|
971
|
-
},
|
|
972
|
-
"default": "\"m\"",
|
|
973
|
-
"description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
974
|
-
"attribute": "padding",
|
|
975
|
-
"reflects": true
|
|
976
|
-
}
|
|
977
|
-
],
|
|
978
|
-
"attributes": [
|
|
979
|
-
{
|
|
980
|
-
"name": "padding",
|
|
981
|
-
"type": {
|
|
982
|
-
"text": "\"m\" | \"l\" | \"none\""
|
|
983
|
-
},
|
|
984
|
-
"default": "\"m\"",
|
|
985
|
-
"description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
986
|
-
"fieldName": "padding"
|
|
987
|
-
}
|
|
988
|
-
],
|
|
989
|
-
"superclass": {
|
|
990
|
-
"name": "LitElement",
|
|
991
|
-
"package": "lit"
|
|
992
|
-
},
|
|
993
|
-
"status": "ready",
|
|
994
|
-
"category": "structure",
|
|
995
|
-
"tagName": "nord-card",
|
|
996
|
-
"customElement": true
|
|
997
|
-
}
|
|
998
|
-
],
|
|
999
|
-
"exports": [
|
|
1000
|
-
{
|
|
1001
|
-
"kind": "js",
|
|
1002
|
-
"name": "default",
|
|
1003
|
-
"declaration": {
|
|
1004
|
-
"name": "Card",
|
|
1005
|
-
"module": "src/card/Card.ts"
|
|
1006
|
-
}
|
|
1007
|
-
},
|
|
1008
|
-
{
|
|
1009
|
-
"kind": "custom-element-definition",
|
|
1010
|
-
"name": "nord-card",
|
|
1011
|
-
"declaration": {
|
|
1012
|
-
"name": "Card",
|
|
1013
|
-
"module": "src/card/Card.ts"
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
|
-
],
|
|
1017
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
|
|
1018
|
-
},
|
|
1019
931
|
{
|
|
1020
932
|
"kind": "javascript-module",
|
|
1021
933
|
"path": "src/calendar/Calendar.ts",
|
|
@@ -1534,6 +1446,162 @@
|
|
|
1534
1446
|
],
|
|
1535
1447
|
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
1536
1448
|
},
|
|
1449
|
+
{
|
|
1450
|
+
"kind": "javascript-module",
|
|
1451
|
+
"path": "src/card/Card.ts",
|
|
1452
|
+
"declarations": [
|
|
1453
|
+
{
|
|
1454
|
+
"kind": "class",
|
|
1455
|
+
"description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
|
|
1456
|
+
"name": "Card",
|
|
1457
|
+
"slots": [
|
|
1458
|
+
{
|
|
1459
|
+
"description": "The card content.",
|
|
1460
|
+
"name": ""
|
|
1461
|
+
},
|
|
1462
|
+
{
|
|
1463
|
+
"description": "Optional slot that holds a header for the card.",
|
|
1464
|
+
"name": "header"
|
|
1465
|
+
},
|
|
1466
|
+
{
|
|
1467
|
+
"description": "Optional slot that holds footer content for the card.",
|
|
1468
|
+
"name": "footer"
|
|
1469
|
+
}
|
|
1470
|
+
],
|
|
1471
|
+
"members": [
|
|
1472
|
+
{
|
|
1473
|
+
"kind": "field",
|
|
1474
|
+
"name": "headerSlot",
|
|
1475
|
+
"privacy": "private",
|
|
1476
|
+
"default": "new SlotController(this, \"header\")"
|
|
1477
|
+
},
|
|
1478
|
+
{
|
|
1479
|
+
"kind": "field",
|
|
1480
|
+
"name": "footerSlot",
|
|
1481
|
+
"privacy": "private",
|
|
1482
|
+
"default": "new SlotController(this, \"footer\")"
|
|
1483
|
+
},
|
|
1484
|
+
{
|
|
1485
|
+
"kind": "field",
|
|
1486
|
+
"name": "padding",
|
|
1487
|
+
"type": {
|
|
1488
|
+
"text": "\"m\" | \"l\" | \"none\""
|
|
1489
|
+
},
|
|
1490
|
+
"default": "\"m\"",
|
|
1491
|
+
"description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
1492
|
+
"attribute": "padding",
|
|
1493
|
+
"reflects": true
|
|
1494
|
+
}
|
|
1495
|
+
],
|
|
1496
|
+
"attributes": [
|
|
1497
|
+
{
|
|
1498
|
+
"name": "padding",
|
|
1499
|
+
"type": {
|
|
1500
|
+
"text": "\"m\" | \"l\" | \"none\""
|
|
1501
|
+
},
|
|
1502
|
+
"default": "\"m\"",
|
|
1503
|
+
"description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
|
|
1504
|
+
"fieldName": "padding"
|
|
1505
|
+
}
|
|
1506
|
+
],
|
|
1507
|
+
"superclass": {
|
|
1508
|
+
"name": "LitElement",
|
|
1509
|
+
"package": "lit"
|
|
1510
|
+
},
|
|
1511
|
+
"status": "ready",
|
|
1512
|
+
"category": "structure",
|
|
1513
|
+
"tagName": "nord-card",
|
|
1514
|
+
"customElement": true
|
|
1515
|
+
}
|
|
1516
|
+
],
|
|
1517
|
+
"exports": [
|
|
1518
|
+
{
|
|
1519
|
+
"kind": "js",
|
|
1520
|
+
"name": "default",
|
|
1521
|
+
"declaration": {
|
|
1522
|
+
"name": "Card",
|
|
1523
|
+
"module": "src/card/Card.ts"
|
|
1524
|
+
}
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
"kind": "custom-element-definition",
|
|
1528
|
+
"name": "nord-card",
|
|
1529
|
+
"declaration": {
|
|
1530
|
+
"name": "Card",
|
|
1531
|
+
"module": "src/card/Card.ts"
|
|
1532
|
+
}
|
|
1533
|
+
}
|
|
1534
|
+
],
|
|
1535
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"kind": "javascript-module",
|
|
1539
|
+
"path": "src/banner/Banner.ts",
|
|
1540
|
+
"declarations": [
|
|
1541
|
+
{
|
|
1542
|
+
"kind": "class",
|
|
1543
|
+
"description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
|
|
1544
|
+
"name": "Banner",
|
|
1545
|
+
"slots": [
|
|
1546
|
+
{
|
|
1547
|
+
"description": "default slot",
|
|
1548
|
+
"name": ""
|
|
1549
|
+
}
|
|
1550
|
+
],
|
|
1551
|
+
"members": [
|
|
1552
|
+
{
|
|
1553
|
+
"kind": "field",
|
|
1554
|
+
"name": "variant",
|
|
1555
|
+
"type": {
|
|
1556
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1557
|
+
},
|
|
1558
|
+
"default": "\"info\"",
|
|
1559
|
+
"description": "The style variant of the banner.",
|
|
1560
|
+
"attribute": "variant",
|
|
1561
|
+
"reflects": true
|
|
1562
|
+
}
|
|
1563
|
+
],
|
|
1564
|
+
"attributes": [
|
|
1565
|
+
{
|
|
1566
|
+
"name": "variant",
|
|
1567
|
+
"type": {
|
|
1568
|
+
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
1569
|
+
},
|
|
1570
|
+
"default": "\"info\"",
|
|
1571
|
+
"description": "The style variant of the banner.",
|
|
1572
|
+
"fieldName": "variant"
|
|
1573
|
+
}
|
|
1574
|
+
],
|
|
1575
|
+
"superclass": {
|
|
1576
|
+
"name": "LitElement",
|
|
1577
|
+
"package": "lit"
|
|
1578
|
+
},
|
|
1579
|
+
"status": "new",
|
|
1580
|
+
"category": "feedback",
|
|
1581
|
+
"tagName": "nord-banner",
|
|
1582
|
+
"customElement": true
|
|
1583
|
+
}
|
|
1584
|
+
],
|
|
1585
|
+
"exports": [
|
|
1586
|
+
{
|
|
1587
|
+
"kind": "js",
|
|
1588
|
+
"name": "default",
|
|
1589
|
+
"declaration": {
|
|
1590
|
+
"name": "Banner",
|
|
1591
|
+
"module": "src/banner/Banner.ts"
|
|
1592
|
+
}
|
|
1593
|
+
},
|
|
1594
|
+
{
|
|
1595
|
+
"kind": "custom-element-definition",
|
|
1596
|
+
"name": "nord-banner",
|
|
1597
|
+
"declaration": {
|
|
1598
|
+
"name": "Banner",
|
|
1599
|
+
"module": "src/banner/Banner.ts"
|
|
1600
|
+
}
|
|
1601
|
+
}
|
|
1602
|
+
],
|
|
1603
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
|
|
1604
|
+
},
|
|
1537
1605
|
{
|
|
1538
1606
|
"kind": "javascript-module",
|
|
1539
1607
|
"path": "src/checkbox/Checkbox.ts",
|
|
@@ -2148,74 +2216,6 @@
|
|
|
2148
2216
|
],
|
|
2149
2217
|
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing checkbox labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
|
|
2150
2218
|
},
|
|
2151
|
-
{
|
|
2152
|
-
"kind": "javascript-module",
|
|
2153
|
-
"path": "src/banner/Banner.ts",
|
|
2154
|
-
"declarations": [
|
|
2155
|
-
{
|
|
2156
|
-
"kind": "class",
|
|
2157
|
-
"description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
|
|
2158
|
-
"name": "Banner",
|
|
2159
|
-
"slots": [
|
|
2160
|
-
{
|
|
2161
|
-
"description": "default slot",
|
|
2162
|
-
"name": ""
|
|
2163
|
-
}
|
|
2164
|
-
],
|
|
2165
|
-
"members": [
|
|
2166
|
-
{
|
|
2167
|
-
"kind": "field",
|
|
2168
|
-
"name": "variant",
|
|
2169
|
-
"type": {
|
|
2170
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
2171
|
-
},
|
|
2172
|
-
"default": "\"info\"",
|
|
2173
|
-
"description": "The style variant of the banner.",
|
|
2174
|
-
"attribute": "variant",
|
|
2175
|
-
"reflects": true
|
|
2176
|
-
}
|
|
2177
|
-
],
|
|
2178
|
-
"attributes": [
|
|
2179
|
-
{
|
|
2180
|
-
"name": "variant",
|
|
2181
|
-
"type": {
|
|
2182
|
-
"text": "\"info\" | \"danger\" | \"success\" | \"warning\""
|
|
2183
|
-
},
|
|
2184
|
-
"default": "\"info\"",
|
|
2185
|
-
"description": "The style variant of the banner.",
|
|
2186
|
-
"fieldName": "variant"
|
|
2187
|
-
}
|
|
2188
|
-
],
|
|
2189
|
-
"superclass": {
|
|
2190
|
-
"name": "LitElement",
|
|
2191
|
-
"package": "lit"
|
|
2192
|
-
},
|
|
2193
|
-
"status": "new",
|
|
2194
|
-
"category": "feedback",
|
|
2195
|
-
"tagName": "nord-banner",
|
|
2196
|
-
"customElement": true
|
|
2197
|
-
}
|
|
2198
|
-
],
|
|
2199
|
-
"exports": [
|
|
2200
|
-
{
|
|
2201
|
-
"kind": "js",
|
|
2202
|
-
"name": "default",
|
|
2203
|
-
"declaration": {
|
|
2204
|
-
"name": "Banner",
|
|
2205
|
-
"module": "src/banner/Banner.ts"
|
|
2206
|
-
}
|
|
2207
|
-
},
|
|
2208
|
-
{
|
|
2209
|
-
"kind": "custom-element-definition",
|
|
2210
|
-
"name": "nord-banner",
|
|
2211
|
-
"declaration": {
|
|
2212
|
-
"name": "Banner",
|
|
2213
|
-
"module": "src/banner/Banner.ts"
|
|
2214
|
-
}
|
|
2215
|
-
}
|
|
2216
|
-
],
|
|
2217
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n"
|
|
2218
|
-
},
|
|
2219
2219
|
{
|
|
2220
2220
|
"kind": "javascript-module",
|
|
2221
2221
|
"path": "src/command-menu/CommandMenu.ts",
|
|
@@ -7031,21 +7031,6 @@
|
|
|
7031
7031
|
},
|
|
7032
7032
|
"privacy": "private"
|
|
7033
7033
|
},
|
|
7034
|
-
{
|
|
7035
|
-
"kind": "field",
|
|
7036
|
-
"name": "breakpoint",
|
|
7037
|
-
"type": {
|
|
7038
|
-
"text": "string"
|
|
7039
|
-
},
|
|
7040
|
-
"privacy": "private",
|
|
7041
|
-
"default": "\"35.9375em\""
|
|
7042
|
-
},
|
|
7043
|
-
{
|
|
7044
|
-
"kind": "field",
|
|
7045
|
-
"name": "viewportObserver",
|
|
7046
|
-
"privacy": "private",
|
|
7047
|
-
"default": "new ResizeObserver(entries => {\n entries.forEach(() => {\n // Update the viewport state\n this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n // Ensure autoUpdate is ready when going from small to large viewports\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n })\n })"
|
|
7048
|
-
},
|
|
7049
7034
|
{
|
|
7050
7035
|
"kind": "field",
|
|
7051
7036
|
"name": "dismiss",
|
|
@@ -7079,11 +7064,7 @@
|
|
|
7079
7064
|
{
|
|
7080
7065
|
"kind": "field",
|
|
7081
7066
|
"name": "smallViewport",
|
|
7082
|
-
"
|
|
7083
|
-
"text": "boolean"
|
|
7084
|
-
},
|
|
7085
|
-
"privacy": "private",
|
|
7086
|
-
"default": "false"
|
|
7067
|
+
"privacy": "private"
|
|
7087
7068
|
},
|
|
7088
7069
|
{
|
|
7089
7070
|
"kind": "field",
|
|
@@ -7164,6 +7145,12 @@
|
|
|
7164
7145
|
"kind": "method",
|
|
7165
7146
|
"name": "getToggle",
|
|
7166
7147
|
"privacy": "private"
|
|
7148
|
+
},
|
|
7149
|
+
{
|
|
7150
|
+
"kind": "field",
|
|
7151
|
+
"name": "handleMediaQueryChange",
|
|
7152
|
+
"privacy": "private",
|
|
7153
|
+
"description": "Update the smallViewport flag to switch between \"sheet\" and \"floating\".\nautoUpdate is needed when a viewport gets larger and the popout is open."
|
|
7167
7154
|
}
|
|
7168
7155
|
],
|
|
7169
7156
|
"events": [
|
|
@@ -8832,9 +8819,10 @@
|
|
|
8832
8819
|
"text": "boolean"
|
|
8833
8820
|
},
|
|
8834
8821
|
"default": "false",
|
|
8835
|
-
"description": "
|
|
8822
|
+
"description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
|
|
8836
8823
|
"attribute": "responsive",
|
|
8837
|
-
"reflects": true
|
|
8824
|
+
"reflects": true,
|
|
8825
|
+
"deprecated": true
|
|
8838
8826
|
},
|
|
8839
8827
|
{
|
|
8840
8828
|
"kind": "field",
|
|
@@ -8892,7 +8880,7 @@
|
|
|
8892
8880
|
"text": "boolean"
|
|
8893
8881
|
},
|
|
8894
8882
|
"default": "false",
|
|
8895
|
-
"description": "
|
|
8883
|
+
"description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
|
|
8896
8884
|
"fieldName": "responsive"
|
|
8897
8885
|
},
|
|
8898
8886
|
{
|
package/lib/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as r}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-4d1db15c.js";import{s as a}from"./Component-fa316972.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;overflow:
|
|
1
|
+
import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as r}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-4d1db15c.js";import{s as a}from"./Component-fa316972.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;overflow-y:auto}}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends n{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]')||void 0;null==o||o.setAttribute("aria-haspopup","true")}render(){return r`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[a,i],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([d("nord-popout",!0)],l.prototype,"popout",void 0),o([s({reflect:!0})],l.prototype,"align",void 0),o([s({reflect:!0})],l.prototype,"position",void 0),o([s({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
package/lib/Popout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{a,
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as d,s as h,h as m,a as c}from"./positioning-763efb3a.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as g}from"./Component-fa316972.js";import{D as v}from"./DirectionController-8b298382.js";import{o as y}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const b=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--n-popout-position-x);top:var(--n-popout-position-y);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,w=matchMedia("(max-width: 35.9375em)");let x=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new v(this),this.open=!1,this.smallViewport=w.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),d(),h({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--n-popout-position-x",`${e}px`),this.style.setProperty("--n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=w.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen),w.addEventListener("change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen),w.removeEventListener("change",this.handleMediaQueryChange)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};x.styles=[g,b],t([r()],x.prototype,"open",void 0),t([r()],x.prototype,"computedPosition",void 0),t([r()],x.prototype,"smallViewport",void 0),t([n({reflect:!0})],x.prototype,"align",void 0),t([n({reflect:!0})],x.prototype,"position",void 0),t([n({reflect:!0})],x.prototype,"id",void 0),t([y("id")],x.prototype,"handleIdChange",null),t([y("open")],x.prototype,"handleOpenChange",null),x=t([e("nord-popout")],x);var E=x;export{E as default};
|
|
2
2
|
//# sourceMappingURL=Popout.js.map
|