{"version":3,"file":"static/js/9189.463ab2d5.chunk.js","mappings":"gLAWaA,EAAiB,SAACC,GAC7B,IAAKA,EACH,MAAO,CAAEC,KAAM,CAAC,GAGlB,IAAIC,EASEC,GAPJD,EADkB,kBAATF,EACFI,KAAKC,MAAML,GAEdM,OAAAC,OAAA,GACCP,IAIgBQ,MAEvB,cADON,EAAKM,MACL,CAAEC,UAASN,EAAEF,KAAIC,EAC1B,C,sGClBaQ,EAAY,W,yCAoBvB,KAAAC,cAAgB,SAACC,GACf,IAAMT,EAAU,CAAC,oBAIjB,OAHIS,GACFT,EAAQU,KAAKD,GAERT,EAAQW,KAAK,I,EAGtB,KAAAC,cAAgB,WACd,IAAMH,EAAwB,WAAhBT,EAAKa,OAAsB,aAAe,OACxD,OAAOC,EAAAA,EAAAA,GAAA,oBAAkBC,OAAQN,EAAOO,KAAK,Y,cA7BV,Q,iCAEA,I,+DASrCP,EAAAQ,UAAAC,kBAAA,WACEC,KAAKC,cAAgBD,KAAKE,YAAYC,cAAc,gB,EAoBtDb,EAAAQ,UAAAM,OAAA,WACQ,IAeFC,EAKAC,EApBEhB,GAAsBb,EAAAA,EAAAA,GAAeuB,KAAKO,MAAxC1B,EAASS,EAAAH,UAAEqB,EAAIlB,EAAAX,KACjB8B,EAAaT,KAAKX,cAAcR,GAEhCD,GACJe,EAAAA,EAAAA,GAAA,OAAKT,MAAM,0BACTS,EAAAA,EAAAA,GAAA,OAAKT,MAAM,0CAA0Cc,KAAKP,kBAC1DE,EAAAA,EAAAA,GAAA,OAAKT,MAAM,uBAAuBc,KAAKU,OACtCV,KAAKC,cACJN,EAAAA,EAAAA,GAAA,OAAKT,MAAM,uBACTS,EAAAA,EAAAA,GAAA,QAAMgB,KAAK,WA4BnB,OArBIX,KAAKY,WACPP,GAAkBV,EAAAA,EAAAA,GAAA,OAAKT,MAAM,2BAA2Bc,KAAKY,WAK7DN,EADsB,MAApBN,KAAKa,YAELlB,EAAAA,EAAAA,GAAA,KAAGmB,UAAW,EAAGC,KAAMf,KAAKe,KAAMrB,OAAQM,KAAKN,QAC5Cd,EACAyB,IAKHV,EAAAA,EAAAA,GAAA,UAAQmB,UAAW,EAAGE,KAAK,UACxBpC,EACAyB,IAMLV,EAAAA,EAAAA,GAAA,KAAAX,OAAAC,OAAA,CAAI6B,SAAU,GAAON,EAAI,CAAEtB,MAAOuB,IAC/BH,E,yHAzEgB,G,QCVC,o10B","sources":["../node_modules/@patentstyret/designsystem/dist/esm-es5/src/utils/parse-helper.ts","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/link-list/link-list-item.tsx","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/link-list/link-list.styles.scss?tag=ps-link-list-item"],"sourcesContent":["import { RootProps } from '../types/entities';\r\n\r\n/**\r\n *\r\n * @param args\r\n * Vanilla web components are restricted to string attributes,\r\n * while React and Angular can use object literals as arguments\r\n * \r\n * @returns rootClass: for overwriting the default styles of the component\r\n * @returns attr: attributes which are added to the root element\r\n */\r\nexport const parseRootProps = (args?: RootProps | string): { rootClass?: string; attr: RootProps } => {\r\n if (!args) {\r\n return { attr: {} };\r\n }\r\n\r\n let attr: RootProps;\r\n if (typeof args === 'string') {\r\n attr = JSON.parse(args) as RootProps;\r\n } else {\r\n attr = {\r\n ...args, // immutable\r\n };\r\n }\r\n\r\n const rootClass = attr.class;\r\n delete attr.class;\r\n return { rootClass, attr };\r\n};\r\n","import { h, Component, Prop, Element } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\n\r\nimport { Root } from '../../types/entities';\r\nimport { parseRootProps } from '../../utils/parse-helper';\r\n\r\n@Component({\r\n tag: 'ps-link-list-item',\r\n styleUrl: 'link-list.styles.scss',\r\n})\r\nexport class LinkListItem {\r\n @Prop() target: '_self' | '_blank' = '_self';\r\n @Prop() href?: string;\r\n @Prop() htmlMarkup: 'a' | 'button' = 'a';\r\n @Prop() label: string;\r\n @Prop() subLabel: string;\r\n @Prop() root?: Root;\r\n\r\n @Element() hostElement: HTMLStencilElement;\r\n\r\n hasIconSlot: boolean;\r\n\r\n componentWillLoad() {\r\n this.hasIconSlot = !!this.hostElement.querySelector('[slot=\"icon\"]');\r\n }\r\n\r\n // click is a standard DOM event\r\n // event-definintion is only needed for custom events\r\n // @Event() click: EventEmitter;\r\n\r\n getClassNames = (rootClass: string) => {\r\n const classes = ['ds-link-list__li'];\r\n if (rootClass) {\r\n classes.push(rootClass);\r\n }\r\n return classes.join(' ');\r\n };\r\n\r\n getTargetIcon = () => {\r\n const arrow = this.target === '_blank' ? 'north_east' : 'east';\r\n return ;\r\n };\r\n\r\n render() {\r\n const { rootClass, attr } = parseRootProps(this.root);\r\n const classNames = this.getClassNames(rootClass);\r\n\r\n const content = (\r\n
\r\n
{this.getTargetIcon()}
\r\n
{this.label}
\r\n {this.hasIconSlot && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n );\r\n\r\n let subTitleContent: JSX.Element | undefined;\r\n if (this.subLabel) {\r\n subTitleContent =
{this.subLabel}
;\r\n }\r\n\r\n let htmlElement: JSX.Element | undefined;\r\n if (this.htmlMarkup === 'a') {\r\n htmlElement = (\r\n \r\n {content}\r\n {subTitleContent}\r\n \r\n );\r\n } else {\r\n htmlElement = (\r\n \r\n );\r\n }\r\n\r\n return (\r\n
  • \r\n {htmlElement}\r\n
    • \r\n );\r\n }\r\n}\r\n","$icon-col-width: 2.5rem;\r\n\r\nps-link-list-item {\r\n a {\r\n width: 100%;\r\n color: inherit;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n text-align: left;\r\n background-color: inherit;\r\n color: inherit;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n outline: 0;\r\n &:focus {\r\n outline: 0;\r\n }\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.ds-link-list {\r\n margin: 0;\r\n padding: 0;\r\n list-style-type: none;\r\n\r\n font-family: 'Roboto';\r\n font-weight: fontWeightValue(regular);\r\n\r\n &__li {\r\n outline: none;\r\n border-width: 2px 0;\r\n border-style: solid;\r\n padding: 1rem 0.25rem;\r\n margin-top: -2px; /* border-collapse */\r\n line-height: 200%;\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n &__wrapper {\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n }\r\n\r\n &__icon {\r\n flex-shrink: 0;\r\n width: $icon-col-width;\r\n text-align: center;\r\n }\r\n\r\n &__title {\r\n padding: 0 0.25rem;\r\n flex-grow: 1;\r\n font-size: 1.25rem; // 20px\r\n @media (min-width: breakpoint(md)) {\r\n font-size: 1.5rem; // 24px\r\n }\r\n }\r\n\r\n &__sub-title {\r\n padding: 0 0.25rem;\r\n margin-left: $icon-col-width;\r\n padding-top: 0.5rem;\r\n font-size: 1rem; // 16px\r\n @media (min-width: breakpoint(md)) {\r\n font-size: 1.25rem; // 20px\r\n }\r\n }\r\n}\r\n\r\n.ds-link-list__primary {\r\n .ds-link-list {\r\n &__li {\r\n background-color: $ds-color-bg-light;\r\n border-color: $ds-color-svalgroenn;\r\n color: $ds-color-black;\r\n &:focus,\r\n &:hover {\r\n cursor: pointer;\r\n background-color: rgba(0, 52, 46, 0.05);\r\n }\r\n }\r\n\r\n &__arrow {\r\n color: $ds-color-svalgroenn;\r\n }\r\n }\r\n}\r\n\r\n.ds-link-list__secondary {\r\n .ds-link-list {\r\n &__li {\r\n background-color: $ds-color-moerk-svalgroenn;\r\n border-color: $ds-color-spiregroenn;\r\n color: $ds-color-white;\r\n &:focus,\r\n &:hover {\r\n cursor: pointer;\r\n background-color: $ds-color-mosegroenn;\r\n }\r\n }\r\n\r\n &__arrow {\r\n color: $ds-color-spiregroenn;\r\n }\r\n }\r\n}\r\n"],"names":["parseRootProps","r","attr","s","t","JSON","parse","Object","assign","class","rootClass","LinkListItem","getClassNames","o","push","join","getTargetIcon","target","h","symbol","size","prototype","componentWillLoad","this","hasIconSlot","hostElement","querySelector","render","a","i","root","f","n","label","name","subLabel","htmlMarkup","tabIndex","href","type"],"sourceRoot":""}