{"version":3,"file":"static/js/3463.dc8e9443.chunk.js","mappings":"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","sources":["../node_modules/@patentstyret/designsystem/dist/esm-es5/src/utils/parse-helper.ts","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/utils/spacing-helpers.ts","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/box/box.tsx","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/box/flex-classes-utils.ts","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/utils/spacing-utils.ts","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/box/box.styles.scss?tag=ps-box","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/button/button.styles.scss?tag=ps-button","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/button/button.tsx","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/container/container.styles.scss?tag=ps-container","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/container/container.tsx","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/text/text.styles.scss?tag=ps-text","../node_modules/@patentstyret/designsystem/dist/esm-es5/src/components/text/text.tsx"],"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 { SpacingValue } from '../types/entities';\r\n\r\n/**\r\n * Basert på Material UI spacing hvor 1 unit = 8px\r\n */\r\nconst SPACING_FACTOR = 8;\r\n\r\nconst getSpacing = (value: SpacingValue) => {\r\n if (value === 'auto') {\r\n return 'auto';\r\n }\r\n return `${SPACING_FACTOR * value}px`;\r\n};\r\n\r\ntype MarginType = 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my';\r\n\r\nexport const getMargin = (type: MarginType, value: SpacingValue) => {\r\n switch (type) {\r\n case 'm':\r\n return { margin: getSpacing(value) };\r\n case 'mt':\r\n return { marginTop: getSpacing(value) };\r\n case 'mr':\r\n return { marginRight: getSpacing(value) };\r\n case 'mb':\r\n return { marginBottom: getSpacing(value) };\r\n case 'ml':\r\n return { marginLeft: getSpacing(value) };\r\n case 'mx':\r\n return { marginLeft: getSpacing(value), marginRight: getSpacing(value) };\r\n case 'my':\r\n return { marginTop: getSpacing(value), marginBottom: getSpacing(value) };\r\n }\r\n};\r\n\r\ntype PaddingType = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py';\r\n\r\nexport const getPadding = (type: PaddingType, value: SpacingValue) => {\r\n switch (type) {\r\n case 'p':\r\n return { padding: getSpacing(value) };\r\n case 'pt':\r\n return { paddingTop: getSpacing(value) };\r\n case 'pr':\r\n return { paddingRight: getSpacing(value) };\r\n case 'pb':\r\n return { paddingBottom: getSpacing(value) };\r\n case 'pl':\r\n return { paddingLeft: getSpacing(value) };\r\n case 'px':\r\n return { paddingLeft: getSpacing(value), paddingRight: getSpacing(value) };\r\n case 'py':\r\n return { paddingTop: getSpacing(value), paddingBottom: getSpacing(value) };\r\n }\r\n};\r\n","import { h, Component, Prop } from '@stencil/core';\r\n\r\nimport { AlignItems, FlexDirection, FlexWrap, JustifyContent, Root, Severity } from '../../types/entities';\r\n\r\nimport { getSpacingStyles } from '../../utils/spacing-utils';\r\nimport { parseRootProps } from '../../utils/parse-helper';\r\nimport { getFlexClassNames } from './flex-classes-utils';\r\n\r\n@Component({\r\n tag: 'ps-box',\r\n styleUrl: 'box.styles.scss',\r\n})\r\nexport class Box {\r\n @Prop() color: 'primary' | 'secondary';\r\n @Prop() severity: Severity;\r\n @Prop() special: boolean = false;\r\n @Prop() gutter: boolean = false;\r\n @Prop() border: boolean = false;\r\n @Prop() boxShadow: boolean = false;\r\n @Prop() inline: boolean = false;\r\n @Prop() flex: boolean = false;\r\n\r\n // mobile viewport defaults\r\n @Prop() flexDirectionMobile?: FlexDirection;\r\n @Prop() justifyContentMobile?: JustifyContent;\r\n @Prop() alignItemsMobile?: AlignItems;\r\n @Prop() flexWrapMobile?: FlexWrap;\r\n\r\n // desktop viewport defaults\r\n @Prop() flexDirection: FlexDirection = 'row';\r\n @Prop() justifyContent: JustifyContent = 'flex-start';\r\n @Prop() alignItems: AlignItems = 'stretch';\r\n @Prop() flexWrap: FlexWrap = 'nowrap';\r\n\r\n @Prop() m?: number | 'auto';\r\n @Prop() mt?: number | 'auto';\r\n @Prop() mr?: number | 'auto';\r\n @Prop() mb?: number | 'auto';\r\n @Prop() ml?: number | 'auto';\r\n @Prop() mx?: number | 'auto';\r\n @Prop() my?: number | 'auto';\r\n\r\n @Prop() p?: number | 'auto';\r\n @Prop() pt?: number | 'auto';\r\n @Prop() pr?: number | 'auto';\r\n @Prop() pb?: number | 'auto';\r\n @Prop() pl?: number | 'auto';\r\n @Prop() px?: number | 'auto';\r\n @Prop() py?: number | 'auto';\r\n\r\n @Prop() root?: Root;\r\n\r\n getClassNames = (rootClass: string) => {\r\n let classes = ['ds-box'];\r\n if (this.color) {\r\n classes.push(`ds-box__${this.color}`);\r\n }\r\n if (this.severity) {\r\n classes.push(`ds-box--${this.severity}`);\r\n }\r\n if (this.special) {\r\n classes.push(`ds-special`);\r\n }\r\n if (this.gutter) {\r\n classes.push(`ds-box--gutter`);\r\n }\r\n if (this.inline) {\r\n classes.push(`ds-box--inline`);\r\n }\r\n if (this.border) {\r\n classes.push(`ds-box--border`);\r\n }\r\n if (this.boxShadow) {\r\n // todo: fix box-shadow, see sx-prop\r\n }\r\n\r\n const flexClasses = getFlexClassNames(this);\r\n classes = [...classes, ...flexClasses];\r\n\r\n if (rootClass) {\r\n classes.push(rootClass);\r\n }\r\n return classes.join(' ');\r\n };\r\n\r\n render() {\r\n const { rootClass, attr } = parseRootProps(this.root);\r\n const classNames = this.getClassNames(rootClass);\r\n const styles = {\r\n //...getFlexStyles(this),\r\n ...getSpacingStyles(this),\r\n };\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import { Box } from './box';\r\n\r\nexport const getFlexClassNames = (args: Box) => {\r\n if (!args.flex) {\r\n return '';\r\n }\r\n\r\n const classes = ['ds-box__flex'];\r\n if (args.flexDirection) {\r\n switch (args.flexDirection) {\r\n case 'row':\r\n classes.push('ds-box__flex--dir-row');\r\n break;\r\n case 'row-reverse':\r\n classes.push('ds-box__flex--dir-row-reverse');\r\n break;\r\n case 'column':\r\n classes.push('ds-box__flex--dir-col');\r\n break;\r\n case 'column-reverse':\r\n classes.push('ds-box__flex--dir-col-reverse');\r\n break;\r\n }\r\n }\r\n if (args.justifyContent) {\r\n switch (args.justifyContent) {\r\n case 'flex-start':\r\n classes.push('ds-box__flex--justify-start');\r\n break;\r\n case 'flex-end':\r\n classes.push('ds-box__flex--justify-end');\r\n break;\r\n case 'center':\r\n classes.push('ds-box__flex--justify-center');\r\n break;\r\n case 'space-between':\r\n classes.push('ds-box__flex--justify-space-between');\r\n break;\r\n case 'space-around':\r\n classes.push('ds-box__flex--justify-space-around');\r\n break;\r\n case 'space-evenly':\r\n classes.push('ds-box__flex--justify-space-evenly');\r\n break;\r\n }\r\n }\r\n if (args.alignItems) {\r\n switch (args.alignItems) {\r\n case 'stretch':\r\n classes.push('ds-box__flex--align-stretch');\r\n break;\r\n case 'flex-start':\r\n classes.push('ds-box__flex--align-start');\r\n break;\r\n case 'flex-end':\r\n classes.push('ds-box__flex--align-end');\r\n break;\r\n case 'center':\r\n classes.push('ds-box__flex--align-center');\r\n break;\r\n case 'baseline':\r\n classes.push('ds-box__flex--align-baseline');\r\n break;\r\n }\r\n }\r\n if (args.flexWrap) {\r\n switch (args.flexWrap) {\r\n case 'wrap':\r\n classes.push('ds-box__flex--wrap');\r\n break;\r\n case 'wrap':\r\n classes.push('ds-box__flex--nowrap');\r\n break;\r\n case 'wrap-reverse':\r\n classes.push('ds-box__flex--wrap-reverse');\r\n break;\r\n }\r\n }\r\n\r\n if (args.flexDirectionMobile) {\r\n switch (args.flexDirectionMobile) {\r\n case 'row':\r\n classes.push('ds-box__flex-m--dir-row');\r\n break;\r\n case 'row-reverse':\r\n classes.push('ds-box__flex-m--dir-row-reverse');\r\n break;\r\n case 'column':\r\n classes.push('ds-box__flex-m--dir-col');\r\n break;\r\n case 'column-reverse':\r\n classes.push('ds-box__flex-m--dir-col-reverse');\r\n break;\r\n }\r\n }\r\n if (args.justifyContentMobile) {\r\n switch (args.justifyContentMobile) {\r\n case 'flex-start':\r\n classes.push('ds-box__flex-m--justify-start');\r\n break;\r\n case 'flex-end':\r\n classes.push('ds-box__flex-m--justify-end');\r\n break;\r\n case 'center':\r\n classes.push('ds-box__flex-m--justify-center');\r\n break;\r\n case 'space-between':\r\n classes.push('ds-box__flex-m--justify-space-between');\r\n break;\r\n case 'space-around':\r\n classes.push('ds-box__flex-m--justify-space-around');\r\n break;\r\n case 'space-evenly':\r\n classes.push('ds-box__flex-m--justify-space-evenly');\r\n break;\r\n }\r\n }\r\n if (args.alignItemsMobile) {\r\n switch (args.alignItemsMobile) {\r\n case 'stretch':\r\n classes.push('ds-box__flex-m--align-stretch');\r\n break;\r\n case 'flex-start':\r\n classes.push('ds-box__flex-m--align-start');\r\n break;\r\n case 'flex-end':\r\n classes.push('ds-box__flex-m--align-end');\r\n break;\r\n case 'center':\r\n classes.push('ds-box__flex-m--align-center');\r\n break;\r\n case 'baseline':\r\n classes.push('ds-box__flex-m--align-baseline');\r\n break;\r\n }\r\n }\r\n if (args.flexWrapMobile) {\r\n switch (args.flexWrapMobile) {\r\n case 'wrap':\r\n classes.push('ds-box__flex-m--wrap');\r\n break;\r\n case 'wrap':\r\n classes.push('ds-box__flex-m--nowrap');\r\n break;\r\n case 'wrap-reverse':\r\n classes.push('ds-box__flex-m--wrap-reverse');\r\n break;\r\n }\r\n }\r\n\r\n return classes;\r\n};\r\n","import { SpacingArgs } from '../types/entities';\r\nimport { getMargin, getPadding } from './spacing-helpers';\r\n\r\nexport const getSpacingStyles = (args: SpacingArgs | undefined) => {\r\n let styles = {};\r\n if (!args) {\r\n return styles;\r\n }\r\n\r\n if (args.m) {\r\n styles = {\r\n ...getMargin('m', args.m),\r\n };\r\n }\r\n if (args.mt) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('mt', args.mt),\r\n };\r\n }\r\n if (args.mr) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('mr', args.mr),\r\n };\r\n }\r\n if (args.mb) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('mb', args.mb),\r\n };\r\n }\r\n if (args.ml) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('ml', args.ml),\r\n };\r\n }\r\n if (args.mx) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('mx', args.mx),\r\n };\r\n }\r\n if (args.my) {\r\n styles = {\r\n ...styles,\r\n ...getMargin('my', args.my),\r\n };\r\n }\r\n if (args.p) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('p', args.p),\r\n };\r\n }\r\n if (args.pt) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('pt', args.pt),\r\n };\r\n }\r\n if (args.pr) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('pr', args.pr),\r\n };\r\n }\r\n if (args.pb) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('pb', args.pb),\r\n };\r\n }\r\n if (args.pl) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('pl', args.pl),\r\n };\r\n }\r\n if (args.px) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('px', args.px),\r\n };\r\n }\r\n if (args.py) {\r\n styles = {\r\n ...styles,\r\n ...getPadding('py', args.py),\r\n };\r\n }\r\n return styles;\r\n};\r\n",".ds-box {\r\n font-family: 'Roboto';\r\n\r\n border-width: 0;\r\n border-style: solid;\r\n box-sizing: border-box;\r\n\r\n background-color: inherit;\r\n\r\n &--border {\r\n border-width: 2px;\r\n }\r\n\r\n &--inline {\r\n display: inline-block;\r\n }\r\n\r\n &--gutter {\r\n @media (max-width: breakpoint(md)) {\r\n padding-left: 0.5rem;\r\n padding-right: 0.5rem;\r\n }\r\n }\r\n}\r\n\r\n.ds-box__flex {\r\n display: flex;\r\n}\r\n\r\n/************ FLEX: MOBILE **************/\r\n\r\n.ds-box__flex.ds-box__flex-m {\r\n @media (max-width: breakpoint(md)) {\r\n &--dir-row {\r\n flex-direction: row;\r\n }\r\n &--dir-row-reverse {\r\n flex-direction: row-reverse;\r\n }\r\n &--dir-col {\r\n flex-direction: column;\r\n }\r\n &--dir-col-reverse {\r\n flex-direction: column-reverse;\r\n }\r\n\r\n &--justify-start {\r\n justify-content: flex-start;\r\n }\r\n &--justify-end {\r\n justify-content: flex-end;\r\n }\r\n &--justify-center {\r\n justify-content: center;\r\n }\r\n &--justify-space-between {\r\n justify-content: space-between;\r\n }\r\n &--justify-space-around {\r\n justify-content: space-around;\r\n }\r\n &--justify-space-evenly {\r\n justify-content: space-evenly;\r\n }\r\n\r\n &--align-stretch {\r\n align-items: stretch;\r\n }\r\n &--align-start {\r\n align-items: flex-start;\r\n }\r\n &--align-end {\r\n align-items: flex-end;\r\n }\r\n &--align-center {\r\n align-items: center;\r\n }\r\n &--align-baseline {\r\n align-items: baseline;\r\n }\r\n\r\n &--no-wrap {\r\n flex-wrap: nowrap;\r\n }\r\n &--wrap {\r\n flex-wrap: wrap;\r\n }\r\n &--wrap-reverse {\r\n flex-wrap: wrap-reverse;\r\n }\r\n }\r\n}\r\n\r\n/************ FLEX: DESKTOP **************/\r\n\r\n.ds-box__flex {\r\n &--dir-row {\r\n flex-direction: row;\r\n }\r\n &--dir-row-reverse {\r\n flex-direction: row-reverse;\r\n }\r\n &--dir-col {\r\n flex-direction: column;\r\n }\r\n &--dir-col-reverse {\r\n flex-direction: column-reverse;\r\n }\r\n\r\n &--justify-start {\r\n justify-content: flex-start;\r\n }\r\n &--justify-end {\r\n justify-content: flex-end;\r\n }\r\n &--justify-center {\r\n justify-content: center;\r\n }\r\n &--justify-space-between {\r\n justify-content: space-between;\r\n }\r\n &--justify-space-around {\r\n justify-content: space-around;\r\n }\r\n &--justify-space-evenly {\r\n justify-content: space-evenly;\r\n }\r\n\r\n &--align-stretch {\r\n align-items: stretch;\r\n }\r\n &--align-start {\r\n align-items: flex-start;\r\n }\r\n &--align-end {\r\n align-items: flex-end;\r\n }\r\n &--align-center {\r\n align-items: center;\r\n }\r\n &--align-baseline {\r\n align-items: baseline;\r\n }\r\n\r\n &--no-wrap {\r\n flex-wrap: nowrap;\r\n }\r\n &--wrap {\r\n flex-wrap: wrap;\r\n }\r\n &--wrap-reverse {\r\n flex-wrap: wrap-reverse;\r\n }\r\n}\r\n\r\n/************ PRIMARY:START ************/\r\n\r\n.ds-box__primary {\r\n color: $ds-color-black;\r\n background-color: $ds-color-bg-light;\r\n border-color: $ds-color-black;\r\n}\r\n\r\n.ds-box__primary.ds-box {\r\n &--info {\r\n background-color: $ds-color-lys-blaa;\r\n border-color: $ds-color-blaa;\r\n }\r\n &--success {\r\n background-color: $ds-color-lys-svalgroenn;\r\n border-color: $ds-color-svalgroenn;\r\n }\r\n &--warning {\r\n background-color: $ds-color-lys-rust;\r\n border-color: $ds-color-rust;\r\n }\r\n &--danger {\r\n color: $ds-color-white;\r\n background-color: $ds-color-moerk-rust;\r\n border-color: $ds-color-moerk-rust;\r\n }\r\n}\r\n\r\n/************ SECONDARY:START ************/\r\n\r\n.ds-box__secondary {\r\n color: $ds-color-white;\r\n background-color: $ds-color-mosegroenn;\r\n border-color: $ds-color-white;\r\n}\r\n\r\n.ds-special.ds-box__secondary {\r\n color: $ds-color-spiregroenn;\r\n border-color: $ds-color-spiregroenn;\r\n}\r\n\r\n.ds-box__secondary.ds-box {\r\n &--info {\r\n color: $ds-color-black;\r\n background-color: $ds-color-lys-blaa;\r\n border-color: $ds-color-blaa;\r\n }\r\n &--success {\r\n color: $ds-color-black;\r\n background-color: $ds-color-lys-svalgroenn;\r\n border-color: $ds-color-svalgroenn;\r\n }\r\n &--warning {\r\n color: $ds-color-black;\r\n background-color: $ds-color-lys-rust;\r\n border-color: $ds-color-rust;\r\n }\r\n &--danger {\r\n background-color: $ds-color-moerk-rust;\r\n border-color: $ds-color-rust;\r\n }\r\n}\r\n","@mixin setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor) {\r\n color: $foreColor;\r\n background-color: $bgColor;\r\n border: 2px solid $borderColor;\r\n outline: 0 solid transparent;\r\n\r\n &:disabled {\r\n color: $ds-color-neutral-05;\r\n background-color: $ds-color-neutral-20;\r\n border-color: $ds-color-neutral-20;\r\n }\r\n\r\n &:hover {\r\n background-color: $hoverBgColor;\r\n }\r\n &:hover:disabled {\r\n background-color: $ds-color-neutral-20;\r\n }\r\n\r\n /* make the border grow to 3px in total without taking more space */\r\n &:active {\r\n border-color: $activeBorderColor;\r\n outline: 1px solid $activeBorderColor;\r\n }\r\n &:active:disabled {\r\n border-color: $ds-color-neutral-20;\r\n outline: none;\r\n }\r\n}\r\n\r\n@mixin setFocusOutlined($innerColor, $outerColor, $outerColorHover: $outerColor) {\r\n &:focus {\r\n box-shadow: \r\n 0 0 0 2px $innerColor,\r\n 0 0 0 4px $outerColor;\r\n }\r\n &:focus:hover {\r\n box-shadow: \r\n 0 0 0 2px $innerColor,\r\n 0 0 0 4px $outerColorHover;\r\n }\r\n &:focus:active {\r\n box-shadow: none;\r\n }\r\n}\r\n\r\nps-button {\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n \r\n button {\r\n cursor: pointer;\r\n }\r\n\r\n button:disabled {\r\n cursor: not-allowed;\r\n }\r\n}\r\n\r\n\r\n.ds-btn {\r\n border-style: solid;\r\n border-width: 2px;\r\n border-radius: 2.5rem;\r\n box-sizing: border-box;\r\n\r\n padding: 0.5rem 3rem;\r\n\r\n font-family: 'Roboto';\r\n font-weight: fontWeightValue(regular);\r\n text-align: center;\r\n line-height: 150%;\r\n\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 &--fluid {\r\n width: 100%;\r\n }\r\n\r\n &--icon-only {\r\n padding: 0.5rem 1rem;\r\n }\r\n}\r\n\r\n\r\n/************ PRIMARY:START ************/\r\n\r\n.ds-btn {\r\n &__primary {\r\n $foreColor: $ds-color-white;\r\n $bgColor: $ds-color-mosegroenn;\r\n $hoverBgColor: $ds-color-moerk-svalgroenn;\r\n $borderColor: $ds-color-mosegroenn;\r\n $activeBorderColor: $ds-color-mosegroenn;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $bgColor, $hoverBgColor);\r\n }\r\n\r\n &__primary-o {\r\n $foreColor: $ds-color-mosegroenn;\r\n $bgColor: $ds-color-bg-light;\r\n $hoverBgColor: rgba(0, 52, 46, 0.05);\r\n $borderColor: $ds-color-mosegroenn;\r\n $activeBorderColor: $ds-color-moerk-svalgroenn;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $borderColor, $borderColor);\r\n }\r\n}\r\n\r\n.ds-btn__primary.ds-btn {\r\n &--info {\r\n $foreColor: $ds-color-moerk-blaa;\r\n $borderColor: $ds-color-moerk-blaa;\r\n $bgColor: $ds-color-lys-blaa;\r\n $hoverBgColor: $ds-color-blaa;\r\n $activeBorderColor: $ds-color-moerk-blaa;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $borderColor);\r\n }\r\n\r\n &--success {\r\n $foreColor: $ds-color-moerk-svalgroenn;\r\n $borderColor: $ds-color-moerk-svalgroenn;\r\n $bgColor: $ds-color-lys-svalgroenn;\r\n $hoverBgColor: $ds-color-svalgroenn;\r\n $activeBorderColor: $ds-color-moerk-svalgroenn;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $borderColor);\r\n }\r\n\r\n &--warning {\r\n $foreColor: $ds-color-moerk-rust;\r\n $borderColor: $ds-color-moerk-rust;\r\n $bgColor: $ds-color-lys-rust;\r\n $hoverBgColor: $ds-color-rust;\r\n $activeBorderColor: $ds-color-moerk-rust;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $borderColor);\r\n }\r\n\r\n &--danger {\r\n $foreColor: $ds-color-white;\r\n $borderColor: $ds-color-moerk-rust;\r\n $bgColor: $ds-color-moerk-rust;\r\n $hoverBgColor: $ds-color-rust;\r\n $activeBorderColor: $ds-color-moerk-rust;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-bg-light, $borderColor);\r\n }\r\n}\r\n\r\n.ds-special.ds-btn {\r\n\r\n &__primary {\r\n color: $ds-color-spiregroenn;\r\n }\r\n\r\n &__primary-o {\r\n &:hover {\r\n background-color: $ds-color-spiregroenn;\r\n }\r\n &:focus {\r\n background-color: $ds-color-spiregroenn;\r\n }\r\n }\r\n}\r\n\r\n\r\n/************ PRIMARY:END ************/\r\n\r\n\r\n\r\n/************ SECONDARY:START ************/\r\n\r\n.ds-btn {\r\n\r\n &__secondary {\r\n $foreColor: $ds-color-mosegroenn;\r\n $bgColor: $ds-color-spiregroenn;\r\n $hoverBgColor: #e4f8a8; /* ligher shade of spire */\r\n $borderColor: transparent;\r\n $activeBorderColor: #e4f8a8;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $bgColor, $hoverBgColor);\r\n }\r\n\r\n &__secondary-o {\r\n $foreColor: $ds-color-spiregroenn;\r\n $bgColor: $ds-color-mosegroenn;\r\n $hoverBgColor: $ds-color-moerk-svalgroenn;\r\n $borderColor: $ds-color-spiregroenn;\r\n $activeBorderColor: $ds-color-spiregroenn;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $ds-color-spiregroenn, $ds-color-spiregroenn);\r\n }\r\n}\r\n\r\n.ds-btn__secondary.ds-btn {\r\n &--info {\r\n $foreColor: $ds-color-moerk-blaa;\r\n $borderColor: $ds-color-lys-blaa; //$ds-color-moerk-blaa;\r\n $bgColor: $ds-color-lys-blaa;\r\n $hoverBgColor: $ds-color-blaa;\r\n $activeBorderColor: $ds-color-lys-blaa; //$ds-color-moerk-blaa;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $borderColor);\r\n }\r\n\r\n &--success {\r\n $foreColor: $ds-color-moerk-svalgroenn;\r\n $borderColor: $ds-color-lys-svalgroenn;\r\n $bgColor: $ds-color-lys-svalgroenn;\r\n $hoverBgColor: $ds-color-svalgroenn;\r\n $activeBorderColor: $ds-color-lys-svalgroenn;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $borderColor);\r\n }\r\n\r\n &--warning {\r\n $foreColor: $ds-color-moerk-rust;\r\n $borderColor: $ds-color-lys-rust;\r\n $bgColor: $ds-color-lys-rust;\r\n $hoverBgColor: $ds-color-rust;\r\n $activeBorderColor: $ds-color-lys-rust;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $borderColor);\r\n }\r\n\r\n &--danger {\r\n $foreColor: $ds-color-white;\r\n $borderColor: $ds-color-rust;\r\n $bgColor: $ds-color-moerk-rust;\r\n $hoverBgColor: $ds-color-rust;\r\n $activeBorderColor: $ds-color-rust;\r\n @include setButtonColor($foreColor, $bgColor, $hoverBgColor, $borderColor, $activeBorderColor);\r\n @include setFocusOutlined($ds-color-mosegroenn, $borderColor);\r\n }\r\n}\r\n\r\n/************ SECONDARY:END ************/\r\n","import { h, Component, Prop } from '@stencil/core';\r\nimport { Root } from '../../types/entities';\r\nimport { parseRootProps } from '../../utils/parse-helper';\r\n\r\n@Component({\r\n tag: 'ps-button',\r\n styleUrl: 'button.styles.scss',\r\n})\r\nexport class Button {\r\n @Prop() color: 'primary' | 'primary-o' | 'secondary' | 'secondary-o' = 'primary';\r\n @Prop() special: boolean = false;\r\n @Prop() severity: 'info' | 'success' | 'warning' | 'danger';\r\n @Prop() fluid: boolean = false;\r\n @Prop() iconOnly: boolean = false;\r\n @Prop() htmlMarkup: 'a' | 'button' = 'button';\r\n @Prop() type: 'submit' | 'button' = 'button';\r\n @Prop() target?: '_self' | '_blank';\r\n @Prop() href?: string;\r\n @Prop() disabled: boolean = false;\r\n @Prop() root?: Root;\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-btn', `ds-btn__${this.color}`];\r\n if (this.severity) {\r\n classes.push(`ds-btn--${this.severity}`);\r\n }\r\n if (this.special) {\r\n classes.push(`ds-special`);\r\n }\r\n if (this.fluid) {\r\n classes.push(`ds-btn--fluid`);\r\n }\r\n if (this.iconOnly) {\r\n classes.push('ds-btn--icon-only');\r\n }\r\n if (rootClass) {\r\n classes.push(rootClass);\r\n }\r\n return classes.join(' ');\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 if (this.htmlMarkup === 'button') {\r\n if (this.disabled) {\r\n return (\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n );\r\n }\r\n } else if (this.htmlMarkup === 'a') {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n}\r\n",".ds-container {\r\n font-family: 'Roboto';\r\n\r\n margin-left: auto;\r\n margin-right: auto;\r\n\r\n @media (min-width: breakpoint(sm)) {\r\n width: containerMaxWidth(sm);\r\n }\r\n @media (min-width: breakpoint(md)) {\r\n width: containerMaxWidth(md);\r\n }\r\n @media (min-width: breakpoint(lg)) {\r\n width: containerMaxWidth(lg);\r\n }\r\n @media (min-width: breakpoint(xl)) {\r\n width: containerMaxWidth(xl);\r\n }\r\n @media (min-width: breakpoint(xxl)) {\r\n width: containerMaxWidth(xxl);\r\n }\r\n\r\n &__primary {\r\n color: $ds-color-black;\r\n background-color: $ds-color-bg-light;\r\n }\r\n\r\n &__secondary {\r\n color: $ds-color-white;\r\n background-color: $ds-color-mosegroenn;\r\n }\r\n\r\n &--fluid {\r\n width: 100%;\r\n }\r\n\r\n &--vfluid {\r\n height: 100vh;\r\n }\r\n\r\n &--pfluid {\r\n height: 100%;\r\n }\r\n\r\n &--bg-img {\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &__frame {\r\n position: relative;\r\n }\r\n\r\n &__frame-top {\r\n position: absolute;\r\n width: 40%;\r\n height: 5%;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n &__frame-bottom {\r\n position: absolute;\r\n width: 60%;\r\n height: 5%;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n}\r\n\r\n.ds-container__primary {\r\n .ds-container__frame-top {\r\n background-color: $ds-color-bg-light;\r\n }\r\n .ds-container__frame-bottom {\r\n background-color: $ds-color-bg-light;\r\n }\r\n}\r\n\r\n.ds-container__secondary {\r\n .ds-container__frame-top {\r\n background-color: $ds-color-mosegroenn;\r\n }\r\n .ds-container__frame-bottom {\r\n background-color: $ds-color-mosegroenn;\r\n }\r\n}\r\n\r\n.ds-container.ds-special {\r\n color: $ds-color-spiregroenn;\r\n}\r\n","import { h, Component, Prop } from '@stencil/core';\r\n\r\nimport { Root } from '../../types/entities';\r\nimport { parseRootProps } from '../../utils/parse-helper';\r\n\r\n@Component({\r\n tag: 'ps-container',\r\n styleUrl: 'container.styles.scss',\r\n assetsDirs: ['../assets'],\r\n})\r\nexport class Container {\r\n @Prop() color?: 'primary' | 'secondary';\r\n @Prop() htmlMarkup: 'main' | 'div' = 'div';\r\n @Prop() bgImgUrl?: string;\r\n @Prop() bgImgFrame?: boolean = false;\r\n @Prop() special: boolean = false;\r\n @Prop() fluid: boolean = false;\r\n @Prop() vFluid: boolean = false;\r\n @Prop() pFluid: boolean = false;\r\n @Prop() root?: Root;\r\n\r\n getClassNames = (rootClass?: string) => {\r\n const classes = ['ds-container'];\r\n if (this.color) {\r\n classes.push(`ds-container__${this.color}`);\r\n }\r\n if (this.special) {\r\n classes.push('ds-special');\r\n }\r\n if (this.bgImgUrl) {\r\n classes.push('ds-container--bg-img');\r\n }\r\n if (this.fluid) {\r\n classes.push(`ds-container--fluid`);\r\n }\r\n if (this.vFluid) {\r\n classes.push(`ds-container--vfluid`);\r\n }\r\n if (this.pFluid) {\r\n classes.push(`ds-container--pfluid`);\r\n }\r\n if (rootClass) {\r\n classes.push(rootClass);\r\n }\r\n return classes.join(' ');\r\n };\r\n\r\n render() {\r\n const { rootClass, attr } = parseRootProps(this.root);\r\n const classNames = this.getClassNames(rootClass);\r\n let styles: { [key: string]: string } | undefined;\r\n if (this.bgImgUrl) {\r\n styles = { backgroundImage: `url('${this.bgImgUrl}')` };\r\n }\r\n\r\n let content: JSX.Element | undefined;\r\n if (this.bgImgUrl && this.bgImgFrame) {\r\n content = (\r\n
\r\n
\r\n \r\n
\r\n
\r\n );\r\n } else {\r\n content = ;\r\n }\r\n\r\n const containerStyles = this.bgImgUrl && this.bgImgFrame ? {} : styles;\r\n\r\n if (this.htmlMarkup === 'main') {\r\n return (\r\n
\r\n {content}\r\n
\r\n );\r\n } else {\r\n return (\r\n
\r\n {content}\r\n
\r\n );\r\n }\r\n }\r\n}\r\n","\r\n.ds-text {\r\n font-family: 'Roboto';\r\n letter-spacing: 0;\r\n}\r\n\r\n\r\n/************ COLORS ************/\r\n\r\n.ds-text {\r\n\r\n color: inherit;\r\n\r\n &__black {\r\n color: $ds-color-black;\r\n }\r\n\r\n &__white {\r\n color: $ds-color-white;\r\n }\r\n\r\n &__gray {\r\n color: $ds-color-neutral-60;\r\n }\r\n\r\n &__light-gray {\r\n color: $ds-color-neutral-20;\r\n }\r\n}\r\n\r\n\r\n\r\n/************ TYPES ************/\r\n\r\n.ds-text {\r\n\r\n &__hero {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 2.75rem; // 44px\r\n line-height: 120%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(light);\r\n font-size: 3.75rem; // 60px\r\n line-height: 120%;\r\n }\r\n }\r\n\r\n // h1\r\n &__title1 {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 2.25rem; // 36px\r\n line-height: 120%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 3rem; // 48px\r\n line-height: 120%;\r\n }\r\n }\r\n\r\n // h2\r\n &__title2 {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.75rem; // 28px\r\n line-height: 120%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 2.375rem; // 38px\r\n line-height: 120%;\r\n }\r\n }\r\n\r\n // h3\r\n &__title3 {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.375rem; // 22px\r\n line-height: 130%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.875rem; // 30px\r\n line-height: 130%;\r\n }\r\n }\r\n\r\n // h4\r\n &__title4 {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.25rem; // 20px\r\n line-height: 130%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.5rem; // 24px\r\n line-height: 130%;\r\n }\r\n }\r\n\r\n // h5\r\n &__title5 {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.125rem; // 18px\r\n line-height: 140%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.375rem; // 22px\r\n line-height: 140%;\r\n }\r\n }\r\n\r\n // h6\r\n &__title6 {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1rem; // 16px\r\n line-height: 150%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.25rem; // 20px\r\n line-height: 150%;\r\n }\r\n }\r\n\r\n &__p {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.25rem; // 20px\r\n line-height: 150%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.5rem; // 24px\r\n line-height: 150%;\r\n }\r\n }\r\n\r\n &__body {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1rem; // 16px\r\n line-height: 150%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1.25rem; // 20px\r\n line-height: 150%;\r\n }\r\n }\r\n\r\n &__bold {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1rem; // 16px\r\n line-height: 150%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(medium);\r\n font-size: 1.25rem; // 20px\r\n line-height: 150%;\r\n }\r\n }\r\n\r\n &__small {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 0.875rem; // 14px\r\n line-height: 150%;\r\n\r\n @media (min-width: breakpoint(md)) {\r\n font-weight: fontWeightValue(regular);\r\n font-size: 1rem; // 16px\r\n line-height: 150%;\r\n }\r\n }\r\n}\r\n\r\n\r\n","import { h, Component, Prop } from '@stencil/core';\r\nimport { Root } from '../../types/entities';\r\nimport { parseRootProps } from '../../utils/parse-helper';\r\n\r\nexport type TextType = 'hero' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6' | 'p' | 'body' | 'bold' | 'small';\r\nexport type TextHtmlMarkup = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\r\n\r\n@Component({\r\n tag: 'ps-text',\r\n styleUrl: 'text.styles.scss',\r\n})\r\nexport class Text {\r\n @Prop() type: TextType = 'body';\r\n @Prop() htmlMarkup?: TextHtmlMarkup;\r\n @Prop() color?: 'black' | 'white' | 'gray' | 'light-gray';\r\n @Prop() root?: Root;\r\n\r\n mapHtmlMarkup = (appearance: TextType): TextHtmlMarkup => {\r\n switch (appearance) {\r\n case 'hero':\r\n case 'title1':\r\n return 'h1';\r\n case 'title2':\r\n return 'h2';\r\n case 'title3':\r\n return 'h3';\r\n case 'title4':\r\n return 'h4';\r\n case 'title5':\r\n return 'h5';\r\n case 'title6':\r\n return 'h6';\r\n case 'p':\r\n return 'p';\r\n case 'body':\r\n case 'bold':\r\n case 'small':\r\n return 'span';\r\n }\r\n };\r\n\r\n getClassNames = (rootClass: string) => {\r\n const classes = ['ds-text', `ds-text__${this.type}`];\r\n if (this.color) {\r\n classes.push(`ds-text__${this.color}`);\r\n }\r\n if (rootClass) {\r\n classes.push(rootClass);\r\n }\r\n return classes.join(' ');\r\n };\r\n\r\n render() {\r\n const { rootClass, attr } = parseRootProps(this.root);\r\n const classNames = this.getClassNames(rootClass);\r\n const markup = this.htmlMarkup || this.mapHtmlMarkup(this.type);\r\n switch (markup) {\r\n case 'h1':\r\n return (\r\n

\r\n \r\n

\r\n );\r\n case 'h2':\r\n return (\r\n

\r\n \r\n

\r\n );\r\n case 'h3':\r\n return (\r\n

\r\n \r\n

\r\n );\r\n case 'h4':\r\n return (\r\n

\r\n \r\n

\r\n );\r\n case 'h5':\r\n return (\r\n
\r\n \r\n
\r\n );\r\n case 'h6':\r\n return (\r\n
\r\n \r\n
\r\n );\r\n case 'p':\r\n return (\r\n

\r\n \r\n

\r\n );\r\n case 'span':\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n }\r\n}\r\n"],"names":["parseRootProps","r","attr","s","t","JSON","parse","Object","assign","class","rootClass","getSpacing","o","concat","getMargin","margin","marginTop","marginRight","marginBottom","marginLeft","getPadding","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","Box","getClassNames","f","color","push","severity","special","gutter","inline","border","n","flex","flexDirection","justifyContent","alignItems","flexWrap","flexDirectionMobile","justifyContentMobile","alignItemsMobile","flexWrapMobile","getFlexClassNames","__spreadArray","join","prototype","render","this","root","m","mt","mr","mb","ml","mx","my","p","pt","pr","pb","pl","px","py","getSpacingStyles","h","style","Button","fluid","iconOnly","htmlMarkup","disabled","type","tabindex","href","target","Container","bgImgUrl","vFluid","pFluid","a","backgroundImage","bgImgFrame","Text","mapHtmlMarkup"],"sourceRoot":""}