@itcenteratunihelsinki/huds-lib 0.5.22 → 0.5.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/cjs/huds-lib.cjs.js +1 -1
  2. package/dist/cjs/hy-accordion-container_5.cjs.entry.js +578 -0
  3. package/dist/cjs/{hy-menu-language_2.cjs.entry.js → hy-menu-language.cjs.entry.js} +0 -19
  4. package/dist/cjs/hy-menu-mobile-breadcrumb.cjs.entry.js +25 -0
  5. package/dist/cjs/hy-menu.cjs.entry.js +2 -2
  6. package/dist/cjs/hy-paragraph-text.cjs.entry.js +1 -1
  7. package/dist/cjs/hy-person-profile.cjs.entry.js +61 -0
  8. package/dist/cjs/hy-site-header_3.cjs.entry.js +4 -3
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/collection-manifest.json +2 -0
  11. package/dist/collection/components/accordion-item/accordion-item.css +5 -4
  12. package/dist/collection/components/accordion-item/accordion-item.js +20 -20
  13. package/dist/collection/components/navigation/menu/menu.js +23 -8
  14. package/dist/collection/components/paragraph-text/paragraph-text.css +9 -7
  15. package/dist/collection/components/person-profile/person-profile-listing/person-profile-listing.css +188 -0
  16. package/dist/collection/components/person-profile/person-profile-listing/person-profile.listing.js +124 -0
  17. package/dist/collection/components/person-profile/person-profile.css +506 -0
  18. package/dist/collection/components/person-profile/person-profile.js +199 -0
  19. package/dist/collection/components/site-header/site-header.css +12 -0
  20. package/dist/collection/components/site-header/site-header.js +21 -2
  21. package/dist/esm/huds-lib.js +1 -1
  22. package/dist/esm/hy-accordion-container_5.entry.js +570 -0
  23. package/dist/esm/{hy-menu-language_2.entry.js → hy-menu-language.entry.js} +1 -19
  24. package/dist/esm/hy-menu-mobile-breadcrumb.entry.js +21 -0
  25. package/dist/esm/hy-menu.entry.js +2 -2
  26. package/dist/esm/hy-paragraph-text.entry.js +1 -1
  27. package/dist/esm/hy-person-profile.entry.js +57 -0
  28. package/dist/esm/hy-site-header_3.entry.js +4 -3
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/huds-lib/huds-lib.esm.js +1 -1
  31. package/dist/huds-lib/p-0b2e3057.entry.js +1 -0
  32. package/dist/huds-lib/p-3d35d226.entry.js +1 -0
  33. package/dist/huds-lib/{p-b526249a.entry.js → p-4252e76e.entry.js} +1 -1
  34. package/dist/huds-lib/p-45c60364.entry.js +1 -0
  35. package/dist/huds-lib/p-4c56d8d7.entry.js +1 -0
  36. package/dist/huds-lib/{p-bf84b857.entry.js → p-557d5e62.entry.js} +1 -1
  37. package/dist/huds-lib/p-ac362729.entry.js +1 -0
  38. package/dist/types/components/navigation/menu/menu.d.ts +2 -1
  39. package/dist/types/components/person-profile/person-profile-listing/person-profile.listing.d.ts +14 -0
  40. package/dist/types/components/person-profile/person-profile.d.ts +12 -0
  41. package/dist/types/components/site-header/site-header.d.ts +1 -0
  42. package/dist/types/components.d.ts +51 -0
  43. package/package.json +1 -1
  44. package/dist/cjs/hy-accordion-container.cjs.entry.js +0 -29
  45. package/dist/cjs/hy-accordion-item.cjs.entry.js +0 -216
  46. package/dist/cjs/hy-tabs-item.cjs.entry.js +0 -20
  47. package/dist/cjs/hy-tabs.cjs.entry.js +0 -308
  48. package/dist/esm/hy-accordion-container.entry.js +0 -25
  49. package/dist/esm/hy-accordion-item.entry.js +0 -212
  50. package/dist/esm/hy-tabs-item.entry.js +0 -16
  51. package/dist/esm/hy-tabs.entry.js +0 -304
  52. package/dist/huds-lib/p-0a3ee940.entry.js +0 -1
  53. package/dist/huds-lib/p-63334950.entry.js +0 -1
  54. package/dist/huds-lib/p-8eb879d5.entry.js +0 -1
  55. package/dist/huds-lib/p-9c2f38a6.entry.js +0 -1
  56. package/dist/huds-lib/p-d4a8d85f.entry.js +0 -1
  57. package/dist/huds-lib/p-df368663.entry.js +0 -1
@@ -32,6 +32,7 @@ import { ComponentLabels } from "./components/site-header/site-header";
32
32
  import { DonateLink, MainMenu } from "./components/navigation/hy-menu-main-group/hy-menu-main-group";
33
33
  import { ShortcutLinks } from "./components/navigation/mobile-menu-shortcuts/mobile-menu-shortcuts";
34
34
  import { items } from "./components/hy-opening-hours-content/hy-opening-hours-content";
35
+ import { personProfileListingItems } from "./components/person-profile/person-profile-listing/person-profile.listing";
35
36
  import { ProcessFlowBoxValue } from "./components/process/process";
36
37
  import { ImageSrcSet as ImageSrcSet6 } from "./components/hy-prominent-image/hy-prominent-image";
37
38
  import { ShortcutLinkValue } from "./components/hy-shortcuts/hy-shortcuts";
@@ -613,6 +614,7 @@ export namespace Components {
613
614
  interface HyMenu {
614
615
  "dataMenuDonate": string;
615
616
  "dataMenuLanguage": string;
617
+ "dataSiteHeaderLabels": string;
616
618
  "isDemo": boolean;
617
619
  "isGroup": boolean;
618
620
  "labelFrontPage": string;
@@ -847,6 +849,20 @@ export namespace Components {
847
849
  "url": string;
848
850
  "variant": PersonCardVariants;
849
851
  }
852
+ interface HyPersonProfile {
853
+ "hideFullAboutText": string;
854
+ "organizationItemsLabelText": string;
855
+ "peopleFinderReturnLink": string;
856
+ "personDataJson": string;
857
+ "showFullAboutText": string;
858
+ }
859
+ interface HyPersonProfileListing {
860
+ "col"?: 'col-1' | 'col-2' | 'col-4';
861
+ "inline"?: boolean;
862
+ "items": personProfileListingItems;
863
+ "textSpacingTight"?: boolean;
864
+ "withoutIcons"?: boolean;
865
+ }
850
866
  interface HyProcess {
851
867
  "dataItems": ProcessFlowBoxValue[] | string;
852
868
  "headerstyle": string;
@@ -907,6 +923,7 @@ export namespace Components {
907
923
  "dataSearchTools": DesktopLinks[] | string;
908
924
  "dataSiteHeaderLabels": string;
909
925
  "dataSiteSearchLabels": string;
926
+ "groupLogoUrl": string;
910
927
  "groupType": string;
911
928
  "isGroup": boolean;
912
929
  "logoLabel"?: string;
@@ -1498,6 +1515,18 @@ declare global {
1498
1515
  prototype: HTMLHyPersonCardElement;
1499
1516
  new (): HTMLHyPersonCardElement;
1500
1517
  };
1518
+ interface HTMLHyPersonProfileElement extends Components.HyPersonProfile, HTMLStencilElement {
1519
+ }
1520
+ var HTMLHyPersonProfileElement: {
1521
+ prototype: HTMLHyPersonProfileElement;
1522
+ new (): HTMLHyPersonProfileElement;
1523
+ };
1524
+ interface HTMLHyPersonProfileListingElement extends Components.HyPersonProfileListing, HTMLStencilElement {
1525
+ }
1526
+ var HTMLHyPersonProfileListingElement: {
1527
+ prototype: HTMLHyPersonProfileListingElement;
1528
+ new (): HTMLHyPersonProfileListingElement;
1529
+ };
1501
1530
  interface HTMLHyProcessElement extends Components.HyProcess, HTMLStencilElement {
1502
1531
  }
1503
1532
  var HTMLHyProcessElement: {
@@ -1696,6 +1725,8 @@ declare global {
1696
1725
  "hy-pager-item": HTMLHyPagerItemElement;
1697
1726
  "hy-paragraph-text": HTMLHyParagraphTextElement;
1698
1727
  "hy-person-card": HTMLHyPersonCardElement;
1728
+ "hy-person-profile": HTMLHyPersonProfileElement;
1729
+ "hy-person-profile-listing": HTMLHyPersonProfileListingElement;
1699
1730
  "hy-process": HTMLHyProcessElement;
1700
1731
  "hy-process-flow-box": HTMLHyProcessFlowBoxElement;
1701
1732
  "hy-prominent-image": HTMLHyProminentImageElement;
@@ -2296,6 +2327,7 @@ declare namespace LocalJSX {
2296
2327
  interface HyMenu {
2297
2328
  "dataMenuDonate"?: string;
2298
2329
  "dataMenuLanguage"?: string;
2330
+ "dataSiteHeaderLabels"?: string;
2299
2331
  "isDemo"?: boolean;
2300
2332
  "isGroup"?: boolean;
2301
2333
  "labelFrontPage"?: string;
@@ -2543,6 +2575,20 @@ declare namespace LocalJSX {
2543
2575
  "url"?: string;
2544
2576
  "variant"?: PersonCardVariants;
2545
2577
  }
2578
+ interface HyPersonProfile {
2579
+ "hideFullAboutText"?: string;
2580
+ "organizationItemsLabelText"?: string;
2581
+ "peopleFinderReturnLink"?: string;
2582
+ "personDataJson"?: string;
2583
+ "showFullAboutText"?: string;
2584
+ }
2585
+ interface HyPersonProfileListing {
2586
+ "col"?: 'col-1' | 'col-2' | 'col-4';
2587
+ "inline"?: boolean;
2588
+ "items"?: personProfileListingItems;
2589
+ "textSpacingTight"?: boolean;
2590
+ "withoutIcons"?: boolean;
2591
+ }
2546
2592
  interface HyProcess {
2547
2593
  "dataItems"?: ProcessFlowBoxValue[] | string;
2548
2594
  "headerstyle"?: string;
@@ -2603,6 +2649,7 @@ declare namespace LocalJSX {
2603
2649
  "dataSearchTools"?: DesktopLinks[] | string;
2604
2650
  "dataSiteHeaderLabels"?: string;
2605
2651
  "dataSiteSearchLabels"?: string;
2652
+ "groupLogoUrl"?: string;
2606
2653
  "groupType"?: string;
2607
2654
  "isGroup"?: boolean;
2608
2655
  "logoLabel"?: string;
@@ -2813,6 +2860,8 @@ declare namespace LocalJSX {
2813
2860
  "hy-pager-item": HyPagerItem;
2814
2861
  "hy-paragraph-text": HyParagraphText;
2815
2862
  "hy-person-card": HyPersonCard;
2863
+ "hy-person-profile": HyPersonProfile;
2864
+ "hy-person-profile-listing": HyPersonProfileListing;
2816
2865
  "hy-process": HyProcess;
2817
2866
  "hy-process-flow-box": HyProcessFlowBox;
2818
2867
  "hy-prominent-image": HyProminentImage;
@@ -2916,6 +2965,8 @@ declare module "@stencil/core" {
2916
2965
  "hy-pager-item": LocalJSX.HyPagerItem & JSXBase.HTMLAttributes<HTMLHyPagerItemElement>;
2917
2966
  "hy-paragraph-text": LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
2918
2967
  "hy-person-card": LocalJSX.HyPersonCard & JSXBase.HTMLAttributes<HTMLHyPersonCardElement>;
2968
+ "hy-person-profile": LocalJSX.HyPersonProfile & JSXBase.HTMLAttributes<HTMLHyPersonProfileElement>;
2969
+ "hy-person-profile-listing": LocalJSX.HyPersonProfileListing & JSXBase.HTMLAttributes<HTMLHyPersonProfileListingElement>;
2919
2970
  "hy-process": LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;
2920
2971
  "hy-process-flow-box": LocalJSX.HyProcessFlowBox & JSXBase.HTMLAttributes<HTMLHyProcessFlowBoxElement>;
2921
2972
  "hy-prominent-image": LocalJSX.HyProminentImage & JSXBase.HTMLAttributes<HTMLHyProminentImageElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcenteratunihelsinki/huds-lib",
3
- "version": "0.5.22",
3
+ "version": "0.5.23",
4
4
  "description": "Helsinki University Design System library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-dd5e5023.js');
6
-
7
- const accordionContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-accordion-container{width:100%}";
8
-
9
- const AccordionContainer = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- /*
14
- * data-allow-toggle
15
- Allow for each toggle to both open and close individually
16
-
17
- data-allow-multiple
18
- Allow for multiple accordion sections to be expanded at the same time.
19
- Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
20
- */
21
- render() {
22
- const classAttributes = ['hy-accordion-container', 'js-hy-accordion'];
23
- const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
24
- return (index.h(index.Host, null, index.h("div", { id: id, class: classAttributes.join(' '), "data-allow-multiple": "true", "data-allow-toggle": "true" }, index.h("slot", null)), index.h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
25
- }
26
- };
27
- AccordionContainer.style = accordionContainerCss;
28
-
29
- exports.hy_accordion_container = AccordionContainer;
@@ -1,216 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-dd5e5023.js');
6
- const utils = require('./utils-3692dcdb.js');
7
-
8
- const accordionItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-accordion__item{margin-bottom:12px}.hy-accordion__item__is-open{border:1px solid var(--grayscale-dark)}.hy-accordion__item__is-open .hy-accordion--heading{margin:0 auto}.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.hy-accordion__item.mini{margin-bottom:1rem;margin-top:1rem}.hy-accordion__item__is-open.mini{margin-bottom:0;margin-top:0}.hy-accordion__item__is-open.mini .hy-accordion__item--container{border-bottom:1px solid var(--grayscale-medium-dark);border-top:1px solid var(--grayscale-medium-dark);padding-top:16px;padding-bottom:32px;margin-top:-1px;-webkit-transition:padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out}@media (min-width: 30rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:28px;padding-bottom:30px}}@media (min-width: 60rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:32px;padding-bottom:40px}}.hy-accordion__item.hy-accordion__item__is-open.mini{background-color:var(--grayscale-white);border:none;-webkit-box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05);box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05)}.hy-accordion--heading{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.69px;line-height:28px;margin:0 auto;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:100%}.hy-accordion--heading .hy-accordion__link{text-decoration:none}.hy-accordion--heading .hy-accordion__link:hover{text-decoration:none}.hy-accordion--heading .hy-accordion__button{font-size:1.125rem;line-height:22px;font-weight:700;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var(--grayscale-background-box);border:none;color:var(--brand-main-nearly-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.45px;padding:13px 20px 13px 16px;-webkit-transition:all 0.35s ease-in;transition:all 0.35s ease-in;width:100%}.hy-accordion--heading .hy-accordion__button:hover{cursor:pointer}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion__button{padding:1rem 2rem 1rem 1.25rem}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion__button{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{background:none}.hy-accordion--heading .hy-accordion__button span{text-align:left}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{position:relative}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]:after{background-color:var(--grayscale-medium-dark);bottom:0;content:\"\";height:1px;left:16px;position:absolute;right:20px}.hy-accordion--heading .hy-accordion--heading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:22px;margin-right:8px;z-index:0}.hy-accordion--heading .hy-accordion--heading__icon svg{fill:var(--brand-main)}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion--heading__icon svg{height:18px;width:18px}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading.mini .hy-accordion__button{font-size:1.125rem;line-height:22px;background-color:var(--grayscale-white);color:var(--link-blue);letter-spacing:-0.56px;padding:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding:0}}.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{color:var(--grayscale-black);margin-bottom:20px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:28px}}@media (min-width: 60rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:32px}}.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:10px}}.hy-accordion--heading.mini .hy-accordion--heading__icon svg{fill:var(--brand-main-light);height:14px;width:14px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon svg{height:16px;width:16px}}.hy-accordion__content{display:block;height:0;padding:0;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.hy-accordion__content--inner-wrapper{display:block;padding:16px 12px}@media (min-width: 30rem){.hy-accordion__content--inner-wrapper{padding:15px 16px}}@media (min-width: 60rem){.hy-accordion__content--inner-wrapper{padding:16px}}@media (min-width: 75.0625rem){.hy-accordion__content--inner-wrapper--large{padding:24px 20px}}@media (min-width: 1601px){.hy-accordion__content--inner-wrapper{padding:24px 20px}}.hy-accordion__content--inner-wrapper--mini{padding:0}.hy-accordion__content--inner-wrapper--mini .course-heading h4{padding-top:0 !important}";
9
-
10
- let keys = {
11
- enter: 'Enter',
12
- tab: 'Tab',
13
- pageUp: 'PageUp',
14
- pageDown: 'PageDown',
15
- arrowUp: 'ArrowUp',
16
- arrowDown: 'ArrowDown',
17
- home: 'Home',
18
- end: 'End', //35
19
- };
20
- const AccordionItem = class {
21
- constructor(hostRef) {
22
- index.registerInstance(this, hostRef);
23
- this.variant = utils.AccordionVariants.default;
24
- this.headerstyle = 'common';
25
- this.showOpen = false;
26
- this.ready = false;
27
- }
28
- componentDidLoad() {
29
- this.ready = true;
30
- let hyMainDiv = this.el.closest('.hy-main');
31
- if (hyMainDiv) {
32
- if (!hyMainDiv.classList.contains('with-sidebar')) {
33
- this.headerstyle = 'large';
34
- }
35
- }
36
- }
37
- componentDidRender() {
38
- if (window.location.hash) {
39
- this.expandPanelByAnchor(window.location.hash);
40
- }
41
- document.querySelectorAll('.hy-accordion__content').forEach(function (accordion) {
42
- let showOpen = accordion.classList.contains('open');
43
- let element = accordion;
44
- if (showOpen) {
45
- element.style.display = 'block';
46
- element.style.height = element.scrollHeight + 'px';
47
- }
48
- else {
49
- element.style.height = 0 + 'px';
50
- element.style.display = 'none';
51
- }
52
- });
53
- }
54
- onHashChange() {
55
- if (window.location.hash) {
56
- this.expandPanelByAnchor(window.location.hash);
57
- }
58
- }
59
- handleKeyDown(event) {
60
- const containerId = this.el.parentElement.id;
61
- let accordion = document.querySelectorAll(`#${containerId}`)[0];
62
- const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
63
- let target = event.target;
64
- const key = event.code;
65
- const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);
66
- if (target.classList.contains('hy-accordion__button')) {
67
- // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
68
- if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {
69
- const index = triggers.indexOf(target);
70
- const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;
71
- const length = triggers.length;
72
- const newIndex = (index + length + direction) % length;
73
- triggers[newIndex].focus();
74
- event.preventDefault();
75
- }
76
- else if ([keys.home, keys.end].includes(key)) {
77
- switch (key) {
78
- // Go to first accordion
79
- case keys.home:
80
- triggers[0].focus();
81
- break;
82
- // Go to last accordion
83
- case keys.end:
84
- triggers[triggers.length - 1].focus();
85
- break;
86
- }
87
- event.preventDefault();
88
- }
89
- }
90
- }
91
- handleClick(event) {
92
- const containerId = this.el.parentElement.id;
93
- let target = event.target;
94
- const targetElement = target.tagName.toLowerCase();
95
- const possibleTags = [targetElement].some((r) => ['svg', 'span', 'path', 'button', 'a'].indexOf(r) >= 0);
96
- let accordion = document.querySelectorAll(`#${containerId}`)[0];
97
- const allowMultiple = accordion.hasAttribute('data-allow-multiple');
98
- const allowToggle = allowMultiple ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
99
- if (target && possibleTags) {
100
- if (targetElement !== 'button') {
101
- target = target.closest('.hy-accordion__button');
102
- }
103
- let targetParent = target.closest('.hy-accordion__item');
104
- let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
105
- const isExpanded = target.getAttribute('aria-expanded') == 'true';
106
- const active = accordion.querySelector('[aria-expanded="true"]');
107
- if (!allowMultiple && active && active !== target) {
108
- active.setAttribute('aria-expanded', 'false');
109
- this.collapseSection(targetContent);
110
- if (targetParent.classList.contains('hy-accordion__item__is-open')) {
111
- targetParent.classList.remove('hy-accordion__item__is-open');
112
- }
113
- accordion.querySelector(`#${active.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
114
- if (!allowToggle) {
115
- active.removeAttribute('aria-disabled');
116
- }
117
- }
118
- if (!isExpanded) {
119
- this.expandSection(targetContent);
120
- target.setAttribute('aria-expanded', 'true');
121
- targetParent.classList.add('hy-accordion__item__is-open');
122
- accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
123
- if (!allowToggle) {
124
- target.setAttribute('aria-disabled', 'true');
125
- }
126
- }
127
- else if (allowToggle && isExpanded) {
128
- target.setAttribute('aria-expanded', 'false');
129
- this.collapseSection(targetContent);
130
- if (targetParent.classList.contains('hy-accordion__item__is-open')) {
131
- targetParent.classList.remove('hy-accordion__item__is-open');
132
- }
133
- accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
134
- }
135
- event.preventDefault();
136
- event.stopImmediatePropagation();
137
- }
138
- }
139
- expandPanelByAnchor(anchor) {
140
- setTimeout(() => {
141
- if (anchor.length > 0) {
142
- anchor = anchor.substr(1);
143
- let target = document.querySelectorAll(`[id=${anchor}]`)[0];
144
- if (target && target.classList.contains('hy-accordion__button')) {
145
- let targetParent = target.closest('.hy-accordion__item');
146
- let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
147
- this.expandSection(targetContent);
148
- target.setAttribute('aria-expanded', 'true');
149
- targetParent.classList.add('hy-accordion__item__is-open');
150
- const targetElementRect = target.getBoundingClientRect();
151
- window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: 'smooth' });
152
- const containerId = targetParent.parentElement.parentElement.id;
153
- if (containerId.length > 0) {
154
- let accordion = document.querySelectorAll(`#${containerId}`)[0];
155
- accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
156
- }
157
- }
158
- }
159
- }, 200);
160
- }
161
- collapseSection(element) {
162
- element.style.height = 0 + 'px';
163
- element.setAttribute('data-collapsed', 'true');
164
- setTimeout(() => {
165
- element.style.display = 'none';
166
- }, 250);
167
- }
168
- expandSection(element) {
169
- element.style.display = 'block';
170
- element.style.height = element.scrollHeight + 'px';
171
- element.setAttribute('data-collapsed', 'false');
172
- }
173
- render() {
174
- const containerId = this.el.parentElement.id;
175
- if (this.ready && containerId.length > 0) {
176
- document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
177
- if (accordion) {
178
- accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
179
- trigger.addEventListener('focus', function () {
180
- trigger.classList.add('focus');
181
- });
182
- trigger.addEventListener('blur', function () {
183
- trigger.classList.remove('focus');
184
- });
185
- });
186
- }
187
- });
188
- }
189
- const classIsOpen = this.showOpen ? 'hy-accordion__item__is-open' : '';
190
- const classContentIsOpen = this.showOpen ? 'open' : '';
191
- const classAttributes = ['hy-accordion__item', this.variant, classIsOpen].join(' ');
192
- const classInnerWrapper = ['hy-accordion__item--container', this.variant].join(' ');
193
- const classHeadingAttributes = ['hy-accordion--heading', this.variant].join(' ');
194
- const classContentAttributes = [
195
- 'hy-accordion__content',
196
- `hy-accordion__content--${this.variant}`,
197
- this.variant,
198
- classContentIsOpen,
199
- ].join(' ');
200
- const classContentInnerWrapper = [
201
- 'hy-accordion__content--inner-wrapper',
202
- `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
203
- `hy-accordion__content--inner-wrapper--${this.variant}`,
204
- ].join(' ');
205
- const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
206
- const accordionItemHref = '#' + titleAsId + '--title';
207
- const ariaExpanded = this.showOpen ? 'true' : 'false';
208
- const ariaHidden = this.showOpen ? 'false' : 'true';
209
- const dataCollapsed = this.showOpen ? 'false' : 'true';
210
- return (index.h("div", { class: classAttributes }, index.h("div", { class: classInnerWrapper }, index.h("div", { class: classHeadingAttributes }, index.h("a", { href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, index.h("button", { "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, index.h("span", { class: "hy-accordion--heading__icon" }, index.h("hy-icon", { icon: 'hy-icon-caret-down', size: 16 })), index.h("span", null, this.accordiontitle)))), index.h("div", { "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: 'none' } }, index.h("div", { class: classContentInnerWrapper }, index.h("slot", null))))));
211
- }
212
- get el() { return index.getElement(this); }
213
- };
214
- AccordionItem.style = accordionItemCss;
215
-
216
- exports.hy_accordion_item = AccordionItem;
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-dd5e5023.js');
6
-
7
- const hyTabsItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}";
8
-
9
- const HyTabsItem = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- render() {
14
- const id = this.tabTitle.toLowerCase().replace(/\W/g, '-');
15
- return (index.h("div", { tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, index.h("slot", null)));
16
- }
17
- };
18
- HyTabsItem.style = hyTabsItemCss;
19
-
20
- exports.hy_tabs_item = HyTabsItem;