@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/types/utils/utils.d.ts

@@ -1,169 +1,169 @@
 import { FunctionalComponent } from "../stencil-public-runtime";
 export type ButtonVariants = "primary" | "secondary";
 export declare enum ButtonStates {
-  enabled = "enabled",
-  disabled = "disabled"
+    enabled = "enabled",
+    disabled = "disabled"
 }
 export type FetchPriorityRange = "low" | "high" | "auto";
 export type ProcessFlowBoxStepStates = "first" | "default";
 export type IconName = {
-  [key: string]: (props: any) => FunctionalComponent;
+    [key: string]: (props: any) => FunctionalComponent;
 };
 export declare enum FooterLinkVariants {
-  default = "base",
-  base = "base",
-  campus = "base",
-  group = "group"
+    default = "base",
+    base = "base",
+    campus = "base",
+    group = "group"
 }
 export declare enum AccordionVariants {
-  default = "default",
-  mini = "mini"
+    default = "default",
+    mini = "mini"
 }
 export declare enum BreadcrumbVariants {
-  default = "default",
-  landingLarge = "large"
+    default = "default",
+    landingLarge = "large"
 }
 export declare enum HeadingVarians {
-  default = "h1",
-  h2 = "h2",
-  h3 = "h3",
-  h4 = "h4",
-  h5 = "h5",
-  h6 = "h6"
+    default = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4",
+    h5 = "h5",
+    h6 = "h6"
 }
 export declare enum HeadingSectionVariants {
-  default = "default",
-  hero = "hero",
-  subSection = "subsection",
-  introduction = "introduction",
-  landingPageHeader = "landingsection",
-  contentPageHeader = "contentsection",
-  frontPage = "frontpage",
-  landingMajor = "landing_major",
-  landingMinor = "landing_minor",
-  course = "courses",
-  groupFooterInfo = "group_footer_info",
-  defaultFooterInfo = "footer_info"
+    default = "default",
+    hero = "hero",
+    subSection = "subsection",
+    introduction = "introduction",
+    landingPageHeader = "landingsection",
+    contentPageHeader = "contentsection",
+    frontPage = "frontpage",
+    landingMajor = "landing_major",
+    landingMinor = "landing_minor",
+    course = "courses",
+    groupFooterInfo = "group_footer_info",
+    defaultFooterInfo = "footer_info"
 }
 export declare enum LinkVariants {
-  default = "default",
-  paragraph = "within-paragraph"
+    default = "default",
+    paragraph = "within-paragraph"
 }
 export declare enum CtaLinkVariants {
-  default = "default",
-  linkList = "link-list"
+    default = "default",
+    linkList = "link-list"
 }
 export declare enum CtaLinkButtonVariants {
-  default = "default",
-  onBlueBkgd = "blue-background",
-  onWhiteBkgd = "white-background",
-  onBlackBkgd = "black-background",
-  onTransparentBkgd = "transparent-background",
-  heroWhite = "hero-white",
-  heroBlue = "hero-blue",
-  heroBlack = "hero-black",
-  darkBlue = "dark-blue-background"
+    default = "default",
+    onBlueBkgd = "blue-background",
+    onWhiteBkgd = "white-background",
+    onBlackBkgd = "black-background",
+    onTransparentBkgd = "transparent-background",
+    heroWhite = "hero-white",
+    heroBlue = "hero-blue",
+    heroBlack = "hero-black",
+    darkBlue = "dark-blue-background"
 }
 export declare enum ProcessFlowBoxVariants {
-  default = "big",
-  small = "small"
+    default = "big",
+    small = "small"
 }
 export declare enum KeyHighlightVariants {
-  default = "big",
-  small = "small"
+    default = "big",
+    small = "small"
 }
 export declare enum LinkBoxVariants {
-  default = "content",
-  landingPage = "landing"
+    default = "content",
+    landingPage = "landing"
 }
 export declare enum CourseVariants {
-  default = "row",
-  row = "row",
-  grid = "grid"
+    default = "row",
+    row = "row",
+    grid = "grid"
 }
 export declare enum CourseStateVariants {
-  default = "current",
-  pastCourses = "past-courses"
+    default = "current",
+    pastCourses = "past-courses"
 }
 export declare enum PersonCardVariants {
-  default = "results",
-  searchPanel = "search-panel",
-  extended = "extended"
+    default = "results",
+    searchPanel = "search-panel",
+    extended = "extended"
 }
 export declare enum ListStyleVariants {
-  default = "grid",
-  grid = "grid",
-  list = "list"
+    default = "grid",
+    grid = "grid",
+    list = "list"
 }
 export declare enum ListItemVariants {
-  default = "default",
-  degreeProgramme = "degree",
-  position = "position"
+    default = "default",
+    degreeProgramme = "degree",
+    position = "position"
 }
 export declare enum PaginationItemVariants {
-  default = "default",
-  current = "current",
-  previous = "previous",
-  next = "next",
-  ellipsis = "ellipsis"
+    default = "default",
+    current = "current",
+    previous = "previous",
+    next = "next",
+    ellipsis = "ellipsis"
 }
 export declare enum MenuType {
-  desktop = "desktop",
-  mobile = "mobile",
-  tablet = "tablet",
-  default = "desktop"
+    desktop = "desktop",
+    mobile = "mobile",
+    tablet = "tablet",
+    default = "desktop"
 }
 export declare enum SiteLogoSize {
-  small = 32,
-  big = 64,
-  large = 80
+    small = 32,
+    big = 64,
+    large = 80
 }
 export declare enum FooterVariant {
-  header = "header",
-  footer = "footer"
+    header = "header",
+    footer = "footer"
 }
 export declare enum ColorVariant {
-  black = "var(--brand-main-nearly-black)",
-  white = "var(--grayscale-white)",
-  grey_dark = "var(--grayscale-dark)"
+    black = "var(--brand-main-nearly-black)",
+    white = "var(--grayscale-white)",
+    grey_dark = "var(--grayscale-dark)"
 }
 export type IntroductionBgColors = "white";
 export declare enum HeroColorVariant {
-  blue = "blue",
-  black = "black",
-  white = "white",
-  fp_white = "fp_white"
+    blue = "blue",
+    black = "black",
+    white = "white",
+    fp_white = "fp_white"
 }
 export declare enum HeroSizeVariant {
-  large = "large",
-  small = "small",
-  fullImage = "full-image"
+    large = "large",
+    small = "small",
+    fullImage = "full-image"
 }
 export declare enum HeroTypeVariant {
-  landing = "landing",
-  group_landing = "group_landing",
-  minor_landing = "minor_landing",
-  front_page = "front_page"
+    landing = "landing",
+    group_landing = "group_landing",
+    minor_landing = "minor_landing",
+    front_page = "front_page"
 }
 export declare enum HeroGroupTypeVariant {
-  default = "no_group",
-  research = "research_group"
+    default = "no_group",
+    research = "research_group"
 }
 export declare enum HeroTextColor {
-  dark_text_light_bg = "dark_text_light_bg",
-  light_text_dark_bg = "light_text_dark_bg",
-  dark_text_no_bg = "dark_text_no_bg",
-  light_text_no_bg = "light_text_no_bg"
+    dark_text_light_bg = "dark_text_light_bg",
+    light_text_dark_bg = "light_text_dark_bg",
+    dark_text_no_bg = "dark_text_no_bg",
+    light_text_no_bg = "light_text_no_bg"
 }
 export declare enum FooterLinkItemColor {
-  black = "black",
-  white = "white"
+    black = "black",
+    white = "white"
 }
 export declare enum CheckboxVariants {
-  default = "default",
-  button = "button"
+    default = "default",
+    button = "button"
 }
 export declare enum GeneralListTypes {
-  list = "list",
-  grid = "grid"
+    list = "list",
+    grid = "grid"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.73",
+  "version": "0.8.75",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -26,39 +26,39 @@
     "build.watch": "stencil build --docs --watch --serve"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^8.4.0",
-    "@rollup/plugin-virtual": "^2.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-virtual": "^3.0.2",
     "@stencil-community/postcss": "^2.1.0",
-    "@stencil/react-output-target": "^0.5.0",
+    "@stencil/react-output-target": "^0.7.1",
     "@stencil/sass": "^3.0.0",
-    "@types/jest": "25.2.3",
+    "@types/jest": "29.5.12",
     "@types/jest-axe": "^3.5.1",
-    "@types/puppeteer": "3.0.0",
-    "fs-extra": "^9.0.1",
-    "husky": "^4.3.8",
-    "jest": "26.0.1",
-    "jest-axe": "^3.5.0",
-    "jest-cli": "26.0.1",
-    "prettier": "2.0.5",
-    "pretty-quick": "2.0.1",
-    "puppeteer": "19.4.0",
-    "rollup": "^2.26.4",
+    "@types/puppeteer": "7.0.4",
+    "fs-extra": "^11.2.0",
+    "husky": "^9.1.5",
+    "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
+    "jest-cli": "^29.7.0",
+    "prettier": "3.3.3",
+    "pretty-quick": "4.0.0",
+    "puppeteer": "^23.3.0",
+    "rollup": "^4.21.2",
     "sass": "^1.60.0",
-    "stylelint-config-recommended": "^11.0.0"
+    "stylelint-config-recommended": "^14.0.1"
   },
   "license": "MIT",
   "dependencies": {
-    "@stencil/core": "^3.2.0",
+    "@stencil/core": "^4.21.0",
     "autoprefixer": "^10.3.1",
-    "breakpoint-sass": "^2.7.1",
-    "concurrently": "^5.3.0",
-    "emotion": "^10.0.27",
+    "breakpoint-sass": "^3.0.0",
+    "concurrently": "^9.0.0",
+    "emotion": "^9.0.0",
     "minimist": "^1.2.0",
     "postcss": "^8.1.0",
-    "postcss-import": "^12.0.1",
-    "resize-observer-polyfill": "1.0.0",
-    "stylelint": "^15.3.0",
-    "swiper": "^9.2.4"
+    "postcss-import": "^16.1.0",
+    "resize-observer-polyfill": "1.5.1",
+    "stylelint": "^16.9.0",
+    "swiper": "^11.1.12"
   },
   "browserslist": [
     "last 2 versions"
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "2dfd04a237c480a5956e8e558c41a3e5aec914d5"
+  "gitHead": "7f8063235550dee9ff06e1924fd4ecf0e53541cb"
 }

package/components/accordion-container.js.map

@@ -1 +0,0 @@
-{"file":"accordion-container.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,wtCAAwtC;;MCOzuC,kBAAkB;;;;;;;;;;;;;;EAY7B,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC;IACtE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC9D,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,yBAAsB,MAAM,uBAAmB,MAAM,IAChG,eAAa,CACT,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-accordion-container/accordion-container.scss?tag=hy-accordion-container","./src/components/hy-accordion-container/accordion-container.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-accordion-container {\n  width: 100%;\n}\n","import {Component, Prop, h, Host} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-accordion-container\",\n  styleUrl: \"accordion-container.scss\",\n  shadow: false,\n})\nexport class AccordionContainer {\n  @Prop() accordionid?: string;\n\n  /*\n  * data-allow-toggle\n    Allow for each toggle to both open and close individually\n\n  data-allow-multiple\n    Allow for multiple accordion sections to be expanded at the same time.\n    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions\n  */\n\n  render() {\n    const classAttributes = [\"hy-accordion-container\", \"js-hy-accordion\"];\n    const id = this.accordionid.toLowerCase().replace(/\\W/g, \"-\");\n    return (\n      <Host>\n        <div id={id} class={classAttributes.join(\" \")} data-allow-multiple=\"true\" data-allow-toggle=\"true\">\n          <slot></slot>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/accordion-item.js.map

@@ -1 +0,0 @@
-{"file":"accordion-item.js","mappings":"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","names":[],"sources":["./src/components/hy-accordion-item/accordion-item.scss?tag=hy-accordion-item","./src/components/hy-accordion-item/accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-accordion__item {\n  margin-bottom: 12px;\n\n  &__is-open {\n    border: 1px solid var(--grayscale-dark);\n\n    .hy-accordion--heading {\n      margin: 0 auto;\n\n      .hy-accordion--heading__icon {\n        transform: rotateX(180deg);\n      }\n    }\n  }\n}\n\n.hy-accordion__item.mini {\n  margin-bottom: 1rem;\n  margin-top: 1rem;\n}\n.hy-accordion__item__is-open.mini {\n  margin-bottom: 0;\n  margin-top: 0;\n\n  .hy-accordion__item--container {\n    border-bottom: 1px solid var(--grayscale-medium-dark);\n    border-top: 1px solid var(--grayscale-medium-dark);\n    padding-top: 16px;\n    padding-bottom: 32px;\n    margin-top: -1px;\n    transition: padding 0.5s ease-in-out;\n\n    @include breakpoint($narrow) {\n      padding-top: 28px;\n      padding-bottom: 30px;\n    }\n    @include breakpoint($wide) {\n      padding-top: 32px;\n      padding-bottom: 40px;\n    }\n  }\n}\n\n.hy-accordion__item.hy-accordion__item__is-open.mini {\n  background-color: var(--grayscale-white);\n  border: none;\n  box-shadow: 0 -10px 10px -10px rgba(0, 49, 70, 0.05);\n}\n\n.hy-accordion--heading {\n  justify-content: flex-start;\n  letter-spacing: -0.69px;\n  line-height: 28px;\n  margin: 0 auto;\n  transition: all 0.25s ease-in-out;\n  width: 100%;\n\n  .hy-accordion__link {\n    text-decoration: none;\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  .hy-accordion__button {\n    @include font-size(18px, 22px);\n    @include font-weight($bold);\n    align-items: flex-start;\n    background-color: var(--grayscale-background-box);\n    border: none;\n    color: var(--brand-main-nearly-black);\n    display: flex;\n    flex-direction: row;\n    font-family: var(--main-font-family);\n    height: 100%;\n    justify-content: flex-start;\n    letter-spacing: -0.45px;\n    padding: 13px 20px 13px 16px;\n    transition: all 0.35s ease-in;\n    width: 100%;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    @include breakpoint($narrow) {\n      padding: 1rem 2rem 1rem 1.25rem;\n    }\n\n    @include breakpoint($xlarge) {\n      @include font-size(20px, 24px);\n      letter-spacing: -0.5px;\n    }\n\n    &--large {\n      @include breakpoint($extrawide) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n\n      .hy-accordion--heading__icon svg {\n        @include breakpoint($extrawide) {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    span {\n      text-align: left;\n    }\n\n    // When accordion item is open.\n    &[aria-expanded=\"true\"] {\n      background: none;\n      position: relative;\n\n      &:after {\n        background-color: var(--grayscale-medium-dark);\n        bottom: 0;\n        content: \"\";\n        height: 1px;\n        left: 16px;\n        position: absolute;\n        right: 20px;\n      }\n    }\n\n    * {\n      pointer-events: none;\n    }\n  }\n\n  .hy-accordion--heading__icon {\n    align-items: center;\n    display: inline-flex;\n    height: 22px; // Same as text line-height.\n    margin-right: 8px;\n    z-index: 0;\n\n    svg {\n      fill: var(--brand-main);\n\n      @include breakpoint($narrow) {\n        height: 18px;\n        width: 18px;\n      }\n\n      @include breakpoint($xlarge) {\n        height: 20px;\n        width: 20px;\n      }\n    }\n  }\n}\n\n.hy-accordion--heading.mini {\n  // accordion clickable header\n  .hy-accordion__button {\n    @include font-size(18px, 22px);\n    background-color: var(--grayscale-white);\n    color: var(--link-blue);\n    letter-spacing: -0.56px;\n    padding: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(22px, 28px);\n      letter-spacing: -0.69px;\n      padding: 0;\n    }\n\n    &[aria-expanded=\"true\"] {\n      color: var(--grayscale-black);\n      margin-bottom: 20px;\n\n      @include breakpoint($narrow) {\n        margin-bottom: 28px;\n      }\n\n      @include breakpoint($wide) {\n        margin-bottom: 32px;\n      }\n    }\n  }\n\n  //accordion arrow\n  .hy-accordion--heading__icon {\n    margin-right: 0.5rem;\n    z-index: 0;\n\n    @include breakpoint($narrow) {\n      margin-right: 10px;\n    }\n\n    svg {\n      fill: var(--brand-main-light);\n      height: 14px;\n      width: 14px;\n      @include breakpoint($narrow) {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n}\n\n.hy-accordion__content {\n  display: block;\n  height: 0;\n  padding: 0;\n  overflow: hidden;\n  transition: all 0.25s ease-in-out;\n\n  &--inner-wrapper {\n    display: block;\n    padding: 16px 12px;\n\n    @include breakpoint($narrow) {\n      padding: 15px 16px;\n    }\n\n    @include breakpoint($wide) {\n      padding: 16px;\n    }\n\n    @include breakpoint($extrawide) {\n      // without sidebar\n      &--large {\n        padding: 24px 20px;\n      }\n    }\n\n    @include breakpoint($xlarge) {\n      padding: 24px 20px;\n    }\n\n    &--mini {\n      padding: 0;\n      .course-heading {\n        h4 {\n          padding-top: 0 !important;\n        }\n      }\n    }\n  }\n}\n","import {Component, Listen, Prop, State, Element, h} from \"@stencil/core\";\nimport {AccordionVariants} from \"../../utils/utils\";\n\nlet keys = {\n  enter: \"Enter\", //13\n  tab: \"Tab\", //9\n  pageUp: \"PageUp\", //33\n  pageDown: \"PageDown\", //34\n  arrowUp: \"ArrowUp\", // 38\n  arrowDown: \"ArrowDown\", //40\n  home: \"Home\", //36\n  end: \"End\", //35\n};\n\n@Component({\n  tag: \"hy-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: false,\n})\nexport class AccordionItem {\n  @Element() el: HTMLElement;\n  @Prop() accordiontitle?: string;\n  @Prop() variant: AccordionVariants = AccordionVariants.default;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() showOpen: boolean = false;\n  @State() ready: boolean = false;\n\n  componentDidLoad() {\n    this.ready = true;\n\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (window.location.hash) {\n      this.expandPanelByAnchor(window.location.hash);\n    }\n\n    document.querySelectorAll(\".hy-accordion__content\").forEach(function (accordion) {\n      let showOpen = accordion.classList.contains(\"open\");\n      let element = accordion as HTMLElement;\n      if (showOpen) {\n        element.style.display = \"block\";\n        element.style.height = element.scrollHeight + \"px\";\n      } else {\n        element.style.height = 0 + \"px\";\n        element.style.display = \"none\";\n      }\n    });\n  }\n\n  @Listen(\"hashchange\", {target: \"window\"})\n  onHashChange() {\n    if (window.location.hash) {\n      this.expandPanelByAnchor(window.location.hash);\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent) {\n    const containerId = this.el.parentElement.id;\n    let accordion = document.querySelectorAll(`#${containerId}`)[0];\n\n    const triggers = Array.prototype.slice.call(accordion.querySelectorAll(\".hy-accordion__button\"));\n    let target = event.target as HTMLButtonElement;\n    const key = event.code;\n\n    const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);\n\n    if (target.classList.contains(\"hy-accordion__button\")) {\n      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations\n      if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {\n        const index = triggers.indexOf(target);\n        const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;\n        const length = triggers.length;\n        const newIndex = (index + length + direction) % length;\n        triggers[newIndex].focus();\n\n        event.preventDefault();\n      } else if ([keys.home, keys.end].includes(key)) {\n        switch (key) {\n          // Go to first accordion\n          case keys.home:\n            triggers[0].focus();\n            break;\n          // Go to last accordion\n          case keys.end:\n            triggers[triggers.length - 1].focus();\n            break;\n        }\n        event.preventDefault();\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  handleClick(event) {\n    const target = event.target as HTMLTextAreaElement;\n    const accordionContainer = this.el.parentElement;\n    const allowMultiple = accordionContainer.hasAttribute(\"data-allow-multiple\");\n    const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute(\"data-allow-toggle\");\n\n    if (target && target.tagName.toLowerCase() === \"button\") {\n      let targetParent = target.closest(\".hy-accordion__item\");\n      let targetContent = targetParent.getElementsByClassName(\"hy-accordion__content\")[0];\n      const isExpanded = target.getAttribute(\"aria-expanded\") === \"true\";\n      const activeButtonElement = accordionContainer.querySelector('[aria-expanded=\"true\"]');\n\n      if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {\n        activeButtonElement.setAttribute(\"aria-expanded\", \"false\");\n        this.collapseSection(targetContent);\n        if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n          targetParent.classList.remove(\"hy-accordion__item__is-open\");\n        }\n\n        accordionContainer\n          .querySelector(`#${activeButtonElement.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"true\");\n\n        if (!allowToggle) {\n          activeButtonElement.removeAttribute(\"aria-disabled\");\n        }\n      }\n\n      if (!isExpanded) {\n        this.expandSection(targetContent);\n        target.setAttribute(\"aria-expanded\", \"true\");\n        targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n        accordionContainer\n          .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"false\");\n\n        if (!allowToggle) {\n          target.setAttribute(\"aria-disabled\", \"true\");\n        }\n      } else if (allowToggle && isExpanded) {\n        target.setAttribute(\"aria-expanded\", \"false\");\n\n        this.collapseSection(targetContent);\n\n        if (targetParent.classList.contains(\"hy-accordion__item__is-open\")) {\n          targetParent.classList.remove(\"hy-accordion__item__is-open\");\n        }\n\n        accordionContainer\n          .querySelector(`#${target.getAttribute(\"aria-controls\")}`)\n          .setAttribute(\"aria-hidden\", \"true\");\n      }\n\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  expandPanelByAnchor(anchor) {\n    setTimeout(() => {\n      if (anchor.length > 0) {\n        anchor = anchor.substr(1);\n        let target = document.querySelectorAll(`[id=${anchor}]`)[0];\n        if (target && target.classList.contains(\"hy-accordion__button\")) {\n          let targetParent = target.closest(\".hy-accordion__item\");\n\n          let targetContent = targetParent.querySelectorAll(\".hy-accordion__content\")[0];\n\n          this.expandSection(targetContent);\n          target.setAttribute(\"aria-expanded\", \"true\");\n          targetParent.classList.add(\"hy-accordion__item__is-open\");\n\n          const targetElementRect = target.getBoundingClientRect();\n          window.scrollTo({top: window.scrollY + targetElementRect.top - 200, behavior: \"smooth\"});\n\n          const containerId = targetParent.parentElement.parentElement.id;\n\n          if (containerId.length > 0) {\n            let accordion = document.querySelectorAll(`#${containerId}`)[0];\n            accordion.querySelector(`#${target.getAttribute(\"aria-controls\")}`).setAttribute(\"aria-hidden\", \"false\");\n          }\n        }\n      }\n    }, 200);\n  }\n\n  collapseSection(element) {\n    element.style.height = 0 + \"px\";\n    element.setAttribute(\"data-collapsed\", \"true\");\n    setTimeout(() => {\n      element.style.display = \"none\";\n    }, 250);\n  }\n\n  expandSection(element) {\n    element.style.display = \"block\";\n    element.style.height = element.scrollHeight + \"px\";\n    element.setAttribute(\"data-collapsed\", \"false\");\n  }\n\n  render() {\n    const containerId = this.el.parentElement.id;\n\n    if (this.ready && containerId.length > 0) {\n      document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {\n        if (accordion) {\n          accordion.querySelectorAll(\".hy-accordion__button\").forEach(function (trigger) {\n            trigger.addEventListener(\"focus\", function () {\n              trigger.classList.add(\"focus\");\n            });\n            trigger.addEventListener(\"blur\", function () {\n              trigger.classList.remove(\"focus\");\n            });\n          });\n        }\n      });\n    }\n\n    const classIsOpen = this.showOpen ? \"hy-accordion__item__is-open\" : \"\";\n    const classContentIsOpen = this.showOpen ? \"open\" : \"\";\n    const classAttributes = [\"hy-accordion__item\", this.variant, classIsOpen].join(\" \");\n    const classInnerWrapper = [\"hy-accordion__item--container\", this.variant].join(\" \");\n    const classHeadingAttributes = [\"hy-accordion--heading\", this.variant].join(\" \");\n    const classContentAttributes = [\n      \"hy-accordion__content\",\n      `hy-accordion__content--${this.variant}`,\n      this.variant,\n      classContentIsOpen,\n    ].join(\" \");\n    const classContentInnerWrapper = [\n      \"hy-accordion__content--inner-wrapper\",\n      `hy-accordion__content--inner-wrapper--${this.headerstyle}`,\n      `hy-accordion__content--inner-wrapper--${this.variant}`,\n    ].join(\" \");\n\n    const titleAsId = this.accordiontitle.toLowerCase().replace(/\\W/g, \"-\");\n    const accordionItemHref = \"#\" + titleAsId + \"--title\";\n\n    const ariaExpanded = this.showOpen ? \"true\" : \"false\";\n    const ariaHidden = this.showOpen ? \"false\" : \"true\";\n    const dataCollapsed = this.showOpen ? \"false\" : \"true\";\n\n    return (\n      <div class={classAttributes}>\n        <div class={classInnerWrapper}>\n          <h3 class={classHeadingAttributes}>\n            <a href={accordionItemHref} class=\"hy-accordion__link\" tabindex=\"-1\">\n              <button\n                aria-expanded={ariaExpanded}\n                aria-controls={`${titleAsId}--content`}\n                class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}\n                id={`${titleAsId}--title`}\n              >\n                <span class=\"hy-accordion--heading__icon\">\n                  <hy-icon icon={\"hy-icon-caret-down\"} size={16} />\n                </span>\n                <span>{this.accordiontitle}</span>\n              </button>\n            </a>\n          </h3>\n          <div\n            aria-labelledBy={`${titleAsId}--title`}\n            class={classContentAttributes}\n            id={`${titleAsId}--content`}\n            role=\"region\"\n            aria-hidden={ariaHidden}\n            data-collapsed={dataCollapsed}\n            style={{display: \"none\"}}\n          >\n            <div class={classContentInnerWrapper}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/cta-button.js.map

@@ -1 +0,0 @@
-{"file":"cta-button.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,spPAAspP;;MCQ9pP,SAAS;;;;mBACqB,qBAAqB,CAAC,UAAU;uBAC3C,EAAE;sBACF,KAAK;;;sBAGL,KAAK;uBACL,QAAQ;;EAGtC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpF,MAAM,wBAAwB,GAAG,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEvE,MAAM,mBAAmB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,YAAM,KAAK,EAAE,wBAAwB,IAClC,CAAC,IAAI,CAAC,UAAU,IACf,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IACjF,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACL,KAEJ,4BAAoB,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,IACtD,YAAM,KAAK,EAAE,mBAAmB,IAAG,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,eAAQ,GAAG,IAAI,CAAC,WAAW,CAAQ,EACtG,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACA,CACV,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-cta-button/cta-button.scss?tag=hy-cta-button","./src/components/hy-cta-button/cta-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-cta-button-container {\n  display: flex;\n}\n\n.hy-cta-button {\n  cursor: pointer;\n  font-family: var(--main-font-family);\n  font-weight: 700;\n  position: relative;\n  text-decoration: none;\n\n  &.transparent-background,\n  &.black-background,\n  &.blue-background,\n  &.white-background,\n  &.hero-white,\n  &.hero-blue,\n  &.hero-black,\n  &.dark-blue-background {\n    align-items: center;\n    box-sizing: border-box;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    max-width: 328px;\n    padding: 13px 16px;\n\n    .text {\n      @include font-size(16px, 18px);\n      letter-spacing: -0.3px;\n    }\n\n    .link-icon {\n      margin-left: 8px;\n\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  &.dark-blue-background {\n    background-color: var(--brand-main-dark);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-dark);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n  }\n\n  &.transparent-background {\n    background-color: var(--grayscale-white);\n    border: 4px solid var(--grayscale-black);\n    color: var(--grayscale-black);\n\n    .link-icon svg {\n      background-color: var(--grayscale-white);\n      fill: var(--grayscale-black);\n    }\n\n    .text {\n      color: var(--grayscale-black);\n    }\n  }\n\n  &.black-background {\n    background-color: var(--grayscale-black);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--grayscale-black);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main);\n\n      .link-icon svg {\n        background-color: var(--brand-main);\n      }\n    }\n  }\n\n  &.blue-background {\n    background-color: var(--brand-main-light);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-light);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main);\n\n      .link-icon svg {\n        background-color: var(--brand-main);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.white-background {\n    background-color: var(--grayscale-white);\n    border: 4px solid var(--brand-main-light);\n    color: var(--brand-main-light);\n\n    .link-icon svg {\n      background-color: var(--grayscale-white);\n      fill: var(--brand-main-light);\n    }\n\n    .text {\n      color: var(--brand-main-light);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-active);\n\n      .text {\n        color: var(--brand-main-active);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-active);\n\n      .text {\n        color: var(--brand-main-active);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.hero-white {\n    background-color: var(--brand-main-light);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main-light);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n\n    &:focus {\n      background-color: var(--brand-main-active);\n\n      .link-icon svg {\n        background-color: var(--brand-main-active);\n      }\n    }\n  }\n\n  &.hero-black {\n    background-color: var(--grayscale-black);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--grayscale-black);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n  }\n\n  &.hero-blue {\n    background-color: var(--brand-main);\n    border: 4px solid var(--grayscale-white);\n    color: var(--grayscale-white);\n\n    .link-icon svg {\n      background-color: var(--brand-main);\n      fill: var(--grayscale-white);\n    }\n\n    .text {\n      color: var(--grayscale-white);\n    }\n\n    &:hover {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n\n    &:focus {\n      border-color: var(--brand-main-soft);\n\n      .text {\n        color: var(--brand-main-soft);\n      }\n\n      .link-icon svg {\n        fill: var(--brand-main-soft);\n      }\n    }\n  }\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-cta-button\",\n  styleUrl: \"cta-button.scss\",\n  shadow: false,\n})\nexport class CtaButton implements ComponentInterface {\n  @Prop() variant: CtaLinkButtonVariants = CtaLinkButtonVariants.onBlueBkgd;\n  @Prop() linkContent: string = \"\";\n  @Prop() typeButton: boolean = false;\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  @Prop() headerstyle: string = \"common\";\n  @Element() el: HTMLElement;\n\n  render() {\n    const classAttributes = [\"hy-cta-button\", this.variant, this.headerstyle].join(\" \");\n\n    const containerClassAttributes = [\"hy-cta-button-container\"].join(\" \");\n\n    const textClassAttributes = [\"text\"].join(\" \");\n    const iconClassAttributes = [\"link-icon\"].join(\" \");\n\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <span class={containerClassAttributes}>\n        {!this.typeButton ? (\n          <a aria-label={this.scLabel} class={classAttributes} href={this.url} target={target}>\n            <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n            <span class={iconClassAttributes}>\n              <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n            </span>\n          </a>\n        ) : (\n          <button aria-label={this.scLabel} class={classAttributes}>\n            <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>\n            <span class={iconClassAttributes}>\n              <hy-icon icon={\"hy-icon-arrow-right\"} size={48} />\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/components/cta-link.js.map

@@ -1 +0,0 @@
-{"file":"cta-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,qkEAAqkE;;MCQ3kE,OAAO;;;;mBAEiB,eAAe,CAAC,OAAO;uBAC5B,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,UAAU,IAAI,6BAA6B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9G,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,uBAAe,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,4BAA4B,IAAI,CAAC,OAAO,EAAE,IAC3G,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ,KACvC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,EACD,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAC9B,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KACtC,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,wBAAwB,EAAE,IAAI,EAAE,EAAE,GAAI,CAChD,CACR,CACC,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-cta-link/cta-link.scss?tag=hy-cta-link","./src/components/hy-cta-link/cta-link.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-cta-link {\n  @include font-weight($semibold);\n  @include font-size(16px, 24px);\n  align-items: center;\n  color: var(--brand-main);\n  display: inline-grid;\n  font-family: var(--main-font-family);\n  gap: 16px;\n  grid-auto-flow: column;\n  letter-spacing: -0.5px;\n  overflow: hidden;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    text-decoration: underline;\n\n    .hy-cta-link__icon {\n      background-color: var(--brand-main-active);\n    }\n  }\n}\n\n.hy-cta-link__icon {\n  align-items: center;\n  background-color: var(--brand-main-light);\n  display: inline-flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  svg {\n    fill: var(--grayscale-white);\n  }\n\n  &--external {\n    svg {\n      transform: rotate(-45deg);\n    }\n  }\n}\n","import {Component, ComponentInterface, Prop, h, Element} from \"@stencil/core\";\nimport {CtaLinkVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-cta-link\",\n  styleUrl: \"cta-link.scss\",\n  shadow: false,\n})\nexport class CtaLink implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() variant: CtaLinkVariants = CtaLinkVariants.default;\n  @Prop() linkContent: string = \"\";\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n\n  render() {\n    const iconClassAttributes = [\"hy-cta-link__icon\", this.isExternal && \"hy-cta-link__icon--external\"].join(\" \");\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <a aria-label={this.scLabel} href={this.url} target={target} class={`hy-cta-link hy-cta-link--${this.variant}`}>\n        {this.variant == CtaLinkVariants.linkList && (\n          <span class={iconClassAttributes}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        )}\n        <span>{this.linkContent}</span>\n        {this.variant == CtaLinkVariants.default && (\n          <span class={iconClassAttributes}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        )}\n      </a>\n    );\n  }\n}\n"],"version":3}