@norges-domstoler/dds-components 0.0.29 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -6,13 +6,13 @@ React UI komponenter til bruk i Domstolenes tjenester.
|
|
|
6
6
|
|
|
7
7
|
Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
|
|
8
8
|
|
|
9
|
-
## Installasjon
|
|
9
|
+
## 📦 Installasjon
|
|
10
10
|
|
|
11
11
|
```sh
|
|
12
12
|
npm install @norges-domstoler/dds-components
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
## Bruk
|
|
15
|
+
## 🔨 Bruk
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
18
|
import * as React from 'react';
|
|
@@ -30,7 +30,7 @@ const App = () => (
|
|
|
30
30
|
render(<App />, document.getElementById('root'));
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
## Komponenter
|
|
33
|
+
## 📃 Komponenter
|
|
34
34
|
|
|
35
35
|
Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
|
|
36
36
|
|
|
@@ -59,7 +59,7 @@ Tilgjengelige komponenter:
|
|
|
59
59
|
- TextInput
|
|
60
60
|
- Typography
|
|
61
61
|
|
|
62
|
-
## Release av ny versjon
|
|
62
|
+
## ⏫ Release av ny versjon
|
|
63
63
|
|
|
64
64
|
Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-components` som kjører på publisering av ny github release. Her brukes `npm publish` for å publisere en ny versjon av pakken til npm sitt pakkeregister, hvor det nye versjonsnummeret leses fra `package.json`. For å lage en ny release gjøres følgende:
|
|
65
65
|
|
|
@@ -70,6 +70,6 @@ Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-
|
|
|
70
70
|
|
|
71
71
|
For versjonering brukes [_semantisk versjonering_](https://semver.org/) for å holde ting organisert og for å enkelt kommunisere utviklingsløpet til pakken.
|
|
72
72
|
|
|
73
|
-
## For bidragsytere
|
|
73
|
+
## ⌨️ For bidragsytere
|
|
74
74
|
|
|
75
75
|
Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { InternalHeaderProps } from './InternalHeader.types';
|
|
2
2
|
export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
|
|
3
|
+
declare type BannerProps = {
|
|
4
|
+
hasContextMenu?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, BannerProps, never>;
|
|
4
7
|
export declare const BannerLeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
8
|
export declare const ApplicationNameWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
9
|
export declare const LovisaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -15,4 +18,5 @@ export declare const ContextMenuList: import("styled-components").StyledComponen
|
|
|
15
18
|
export declare const StyledDivider: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
16
19
|
color?: import("../Divider").DividerColor | undefined;
|
|
17
20
|
} & import("react").HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>, any, {}, never>;
|
|
21
|
+
export declare const ContextMenuGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
22
|
export {};
|
|
@@ -11,6 +11,7 @@ export declare const internalHeaderTokens: {
|
|
|
11
11
|
};
|
|
12
12
|
banner: {
|
|
13
13
|
base: CSSObject;
|
|
14
|
+
contextMenuSpacing: string;
|
|
14
15
|
};
|
|
15
16
|
bannerLeft: {
|
|
16
17
|
base: CSSObject;
|
|
@@ -55,4 +56,7 @@ export declare const internalHeaderTokens: {
|
|
|
55
56
|
icon: {
|
|
56
57
|
base: CSSObject;
|
|
57
58
|
};
|
|
59
|
+
contextGroup: {
|
|
60
|
+
base: CSSObject;
|
|
61
|
+
};
|
|
58
62
|
};
|
package/dist/index.es.js
CHANGED
|
@@ -20471,7 +20471,7 @@ var LinkIconWrapper = styled(IconWrapper$1).withConfig({
|
|
|
20471
20471
|
var StyledTypography = styled.p.withConfig({
|
|
20472
20472
|
displayName: "Typography__StyledTypography",
|
|
20473
20473
|
componentId: "sc-1uvxoh6-1"
|
|
20474
|
-
})(templateObject_13$
|
|
20474
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
20475
20475
|
var typographyType = _a.typographyType;
|
|
20476
20476
|
return typographyType && getElementStyling(typographyType);
|
|
20477
20477
|
}, function (_a) {
|
|
@@ -20499,7 +20499,7 @@ var StyledTypography = styled.p.withConfig({
|
|
|
20499
20499
|
return italic && Ae(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typographyTokens.style.italic.base);
|
|
20500
20500
|
}, function (_a) {
|
|
20501
20501
|
var underline = _a.underline;
|
|
20502
|
-
return underline && Ae(templateObject_12$
|
|
20502
|
+
return underline && Ae(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typographyTokens.style.underline.base);
|
|
20503
20503
|
});
|
|
20504
20504
|
var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
20505
20505
|
var _b = _a.typographyType,
|
|
@@ -20528,7 +20528,7 @@ var Typography = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
20528
20528
|
}, void 0) : '']
|
|
20529
20529
|
}), void 0);
|
|
20530
20530
|
});
|
|
20531
|
-
var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$
|
|
20531
|
+
var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3;
|
|
20532
20532
|
|
|
20533
20533
|
var RadioButtonGroupContext = /*#__PURE__*/React__default.createContext(null);
|
|
20534
20534
|
var useRadioButtonGroup = function useRadioButtonGroup() {
|
|
@@ -21142,7 +21142,7 @@ var Input$4 = styled.input.attrs(function (_a) {
|
|
|
21142
21142
|
var Container$8 = styled.label.withConfig({
|
|
21143
21143
|
displayName: "Checkboxstyles__Container",
|
|
21144
21144
|
componentId: "sc-17q1ubf-2"
|
|
21145
|
-
})(templateObject_13$
|
|
21145
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n width: fit-content;\n ", "\n ", "\n\n input ~ ", " {\n transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n }\n\n input:checked ~ ", ":after {\n display: block;\n }\n\n input:checked ~ ", " {\n ", "\n }\n\n &:hover input:enabled ~ ", " {\n ", "\n }\n &:hover input:checked:enabled ~ ", " {\n ", "\n }\n &:focus-within {\n outline: ", " solid\n ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", ":after {\n border: solid ", ";\n ", "\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n width: fit-content;\n ", "\n ", "\n\n input ~ ", " {\n transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n }\n\n input:checked ~ ", ":after {\n display: block;\n }\n\n input:checked ~ ", " {\n ", "\n }\n\n &:hover input:enabled ~ ", " {\n ", "\n }\n &:hover input:checked:enabled ~ ", " {\n ", "\n }\n &:focus-within {\n outline: ", " solid\n ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", ":after {\n border: solid ", ";\n ", "\n }\n"])), checkboxTokens.container.base, function (_a) {
|
|
21146
21146
|
var label = _a.label;
|
|
21147
21147
|
return label ? Ae(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.container.noLabel.base);
|
|
21148
21148
|
}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focusOutline.width, checkboxTokens.container.focusOutline.color, function (_a) {
|
|
@@ -21161,9 +21161,9 @@ var Container$8 = styled.label.withConfig({
|
|
|
21161
21161
|
return readOnly && Ae(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n ", "\n "], ["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n ", "\n "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n input ~ ", " {\n ", "\n }\n "], ["\n input ~ ", " {\n ", "\n }\n "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
|
|
21162
21162
|
}, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
|
|
21163
21163
|
var indeterminate = _a.indeterminate;
|
|
21164
|
-
return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "], ["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$
|
|
21164
|
+
return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "], ["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.checkmark.base);
|
|
21165
21165
|
});
|
|
21166
|
-
var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$
|
|
21166
|
+
var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
21167
21167
|
|
|
21168
21168
|
var CheckboxGroupContext = /*#__PURE__*/React__default.createContext(null);
|
|
21169
21169
|
var useCheckboxGroup = function useCheckboxGroup() {
|
|
@@ -21897,7 +21897,7 @@ var ButtonWrapper$1 = styled.button.withConfig({
|
|
|
21897
21897
|
var StyledIconWrapperSpan = styled.span.withConfig({
|
|
21898
21898
|
displayName: "Buttonstyles__StyledIconWrapperSpan",
|
|
21899
21899
|
componentId: "sc-14dutqk-1"
|
|
21900
|
-
})(templateObject_12$
|
|
21900
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n"])), function (_a) {
|
|
21901
21901
|
var size = _a.size,
|
|
21902
21902
|
iconPosition = _a.iconPosition;
|
|
21903
21903
|
return iconPosition === 'left' ? Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n margin-inline-end: ", ";\n "], ["\n margin-inline-end: ", ";\n "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n margin-inline-start: ", ";\n "], ["\n margin-inline-start: ", ";\n "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), buttonTokens.sizes[size].justIconWrapper.base);
|
|
@@ -21905,8 +21905,8 @@ var StyledIconWrapperSpan = styled.span.withConfig({
|
|
|
21905
21905
|
var Label$2 = styled.span.withConfig({
|
|
21906
21906
|
displayName: "Buttonstyles__Label",
|
|
21907
21907
|
componentId: "sc-14dutqk-2"
|
|
21908
|
-
})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
21909
|
-
var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$
|
|
21908
|
+
})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
|
|
21909
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$2, templateObject_13$1;
|
|
21910
21910
|
|
|
21911
21911
|
var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
21912
21912
|
var label = _a.label,
|
|
@@ -29436,7 +29436,7 @@ var Wrapper$5 = styled.div.withConfig({
|
|
|
29436
29436
|
var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
|
|
29437
29437
|
displayName: "Selectstyles__SelectedIconWrapper",
|
|
29438
29438
|
componentId: "sc-19jkd5s-3"
|
|
29439
|
-
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
|
|
29439
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
|
|
29440
29440
|
var CustomStyles = {
|
|
29441
29441
|
control: function control() {
|
|
29442
29442
|
return __assign({
|
|
@@ -29527,7 +29527,7 @@ var CustomStyles = {
|
|
|
29527
29527
|
return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
|
|
29528
29528
|
}
|
|
29529
29529
|
};
|
|
29530
|
-
var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
|
|
29530
|
+
var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1;
|
|
29531
29531
|
|
|
29532
29532
|
var DdsOption = components.Option,
|
|
29533
29533
|
NoOptionsMessage = components.NoOptionsMessage,
|
|
@@ -31650,12 +31650,12 @@ var filledLightBase = {
|
|
|
31650
31650
|
};
|
|
31651
31651
|
var strokeLightBase = {
|
|
31652
31652
|
backgroundColor: Colors$4.DdsColorNeutralsWhite,
|
|
31653
|
-
borderColor:
|
|
31653
|
+
borderColor: Border$6.BordersDdsBorderStyleLightStroke,
|
|
31654
31654
|
color: textDefault.textColor
|
|
31655
31655
|
};
|
|
31656
31656
|
var strokeDarkBase = {
|
|
31657
31657
|
backgroundColor: Colors$4.DdsColorNeutralsWhite,
|
|
31658
|
-
borderColor:
|
|
31658
|
+
borderColor: Border$6.BordersDdsBorderStyleDarkStroke,
|
|
31659
31659
|
color: textDefault.textColor
|
|
31660
31660
|
};
|
|
31661
31661
|
var cardTokens = {
|
|
@@ -34489,6 +34489,10 @@ var contextMenuDividerBase = {
|
|
|
34489
34489
|
marginRight: Spacing$5.SizesDdsSpacingLocalX15,
|
|
34490
34490
|
marginLeft: Spacing$5.SizesDdsSpacingLocalX15
|
|
34491
34491
|
};
|
|
34492
|
+
var contextGroupBase = {
|
|
34493
|
+
right: Spacing$5.SizesDdsSpacingLocalX075,
|
|
34494
|
+
top: Spacing$5.SizesDdsSpacingLocalX025
|
|
34495
|
+
};
|
|
34492
34496
|
var internalHeaderTokens = {
|
|
34493
34497
|
wrapper: {
|
|
34494
34498
|
base: wrapperBase$3
|
|
@@ -34500,7 +34504,8 @@ var internalHeaderTokens = {
|
|
|
34500
34504
|
base: lovisaWrapperBase
|
|
34501
34505
|
},
|
|
34502
34506
|
banner: {
|
|
34503
|
-
base: bannerBase
|
|
34507
|
+
base: bannerBase,
|
|
34508
|
+
contextMenuSpacing: Spacing$5.SizesDdsSpacingLayoutX4
|
|
34504
34509
|
},
|
|
34505
34510
|
bannerLeft: {
|
|
34506
34511
|
base: bannerLeftBase
|
|
@@ -34544,44 +34549,50 @@ var internalHeaderTokens = {
|
|
|
34544
34549
|
},
|
|
34545
34550
|
icon: {
|
|
34546
34551
|
base: iconBase
|
|
34552
|
+
},
|
|
34553
|
+
contextGroup: {
|
|
34554
|
+
base: contextGroupBase
|
|
34547
34555
|
}
|
|
34548
34556
|
};
|
|
34549
34557
|
|
|
34550
34558
|
var Wrapper$2 = styled.div.withConfig({
|
|
34551
34559
|
displayName: "InternalHeaderstyles__Wrapper",
|
|
34552
34560
|
componentId: "sc-91bnca-0"
|
|
34553
|
-
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n *::selection {\n ", "\n }\n ", "\n"], ["\n *::selection {\n ", "\n }\n ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
|
|
34561
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n *::selection {\n ", "\n }\n ", "\n"], ["\n position: relative;\n *::selection {\n ", "\n }\n ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
|
|
34554
34562
|
var BannerWrapper = styled.div.withConfig({
|
|
34555
34563
|
displayName: "InternalHeaderstyles__BannerWrapper",
|
|
34556
34564
|
componentId: "sc-91bnca-1"
|
|
34557
|
-
})(
|
|
34565
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n ", "\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n ", "\n"])), internalHeaderTokens.banner.base, function (_a) {
|
|
34566
|
+
var hasContextMenu = _a.hasContextMenu;
|
|
34567
|
+
return hasContextMenu && Ae(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n padding-right: ", ";\n "], ["\n padding-right: ", ";\n "])), internalHeaderTokens.banner.contextMenuSpacing);
|
|
34568
|
+
});
|
|
34558
34569
|
var BannerLeftWrapper = styled.div.withConfig({
|
|
34559
34570
|
displayName: "InternalHeaderstyles__BannerLeftWrapper",
|
|
34560
34571
|
componentId: "sc-91bnca-2"
|
|
34561
|
-
})(
|
|
34572
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), internalHeaderTokens.bannerLeft.base);
|
|
34562
34573
|
var ApplicationNameWrapper = styled.div.withConfig({
|
|
34563
34574
|
displayName: "InternalHeaderstyles__ApplicationNameWrapper",
|
|
34564
34575
|
componentId: "sc-91bnca-3"
|
|
34565
|
-
})(
|
|
34576
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n"], ["\n display: flex;\n align-items: center;\n ", "\n"])), internalHeaderTokens.applicationNameWrapper.base);
|
|
34566
34577
|
var LovisaWrapper = styled.div.withConfig({
|
|
34567
34578
|
displayName: "InternalHeaderstyles__LovisaWrapper",
|
|
34568
34579
|
componentId: "sc-91bnca-4"
|
|
34569
|
-
})(
|
|
34580
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.lovisaWrapper.base);
|
|
34570
34581
|
var Navigation = styled.nav.withConfig({
|
|
34571
34582
|
displayName: "InternalHeaderstyles__Navigation",
|
|
34572
34583
|
componentId: "sc-91bnca-5"
|
|
34573
|
-
})(
|
|
34584
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.navigation.base);
|
|
34574
34585
|
var NavigationList = styled.ul.withConfig({
|
|
34575
34586
|
displayName: "InternalHeaderstyles__NavigationList",
|
|
34576
34587
|
componentId: "sc-91bnca-6"
|
|
34577
|
-
})(
|
|
34588
|
+
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n ", "\n list-style-type: none;\n padding: 0;\n margin: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n ", "\n list-style-type: none;\n padding: 0;\n margin: 0;\n"])), function (_a) {
|
|
34578
34589
|
var smallScreen = _a.smallScreen;
|
|
34579
|
-
return smallScreen && Ae(
|
|
34590
|
+
return smallScreen && Ae(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex-direction: column;\n "], ["\n flex-direction: column;\n "])));
|
|
34580
34591
|
});
|
|
34581
34592
|
var ContextMenuWrapper = styled.div.withConfig({
|
|
34582
34593
|
displayName: "InternalHeaderstyles__ContextMenuWrapper",
|
|
34583
34594
|
componentId: "sc-91bnca-7"
|
|
34584
|
-
})(
|
|
34595
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n box-sizing: border-box;\n position: absolute;\n z-index: 3;\n top: 100%;\n right: 0;\n overflow-y: auto;\n min-width: 180px;\n max-width: 300px;\n max-height: calc(100vh - 110px);\n transition: visibility 0.4s, opacity 0.2s;\n visibility: ", ";\n opacity: ", ";\n ", "\n ", "\n"], ["\n box-sizing: border-box;\n position: absolute;\n z-index: 3;\n top: 100%;\n right: 0;\n overflow-y: auto;\n min-width: 180px;\n max-width: 300px;\n max-height: calc(100vh - 110px);\n transition: visibility 0.4s, opacity 0.2s;\n visibility: ", ";\n opacity: ", ";\n ", "\n ", "\n"])), function (_a) {
|
|
34585
34596
|
var closed = _a.closed;
|
|
34586
34597
|
return closed ? 'hidden' : 'visible';
|
|
34587
34598
|
}, function (_a) {
|
|
@@ -34591,12 +34602,16 @@ var ContextMenuWrapper = styled.div.withConfig({
|
|
|
34591
34602
|
var ContextMenuList = styled.ul.withConfig({
|
|
34592
34603
|
displayName: "InternalHeaderstyles__ContextMenuList",
|
|
34593
34604
|
componentId: "sc-91bnca-8"
|
|
34594
|
-
})(
|
|
34605
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n"], ["\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n"])));
|
|
34595
34606
|
var StyledDivider = styled(Divider).withConfig({
|
|
34596
34607
|
displayName: "InternalHeaderstyles__StyledDivider",
|
|
34597
34608
|
componentId: "sc-91bnca-9"
|
|
34598
|
-
})(
|
|
34599
|
-
var
|
|
34609
|
+
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.contextMenuDivider.base);
|
|
34610
|
+
var ContextMenuGroup = styled.div.withConfig({
|
|
34611
|
+
displayName: "InternalHeaderstyles__ContextMenuGroup",
|
|
34612
|
+
componentId: "sc-91bnca-10"
|
|
34613
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n ", "\n"], ["\n position: absolute;\n ", "\n"])), internalHeaderTokens.contextGroup.base);
|
|
34614
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
34600
34615
|
|
|
34601
34616
|
var Link$2 = styled.a.withConfig({
|
|
34602
34617
|
displayName: "NavigationItem__Link",
|
|
@@ -34827,14 +34842,15 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34827
34842
|
'aria-hidden': contextMenuIsClosed,
|
|
34828
34843
|
role: 'menu'
|
|
34829
34844
|
};
|
|
34830
|
-
var
|
|
34845
|
+
var hasContextMenuElementsOrUserProps = hasInteractiveContextMenuElements || !!userProps;
|
|
34846
|
+
var contextMenu = hasContextMenuElementsOrUserProps && !smallScreen ? jsxRuntime.jsxs(ContextMenuWrapper, __assign({}, contextMenuWrapperProps, {
|
|
34831
34847
|
children: [userContextMenuItemNonInteractive, jsxRuntime.jsx(ContextMenuList, {
|
|
34832
34848
|
children: contextMenuContentArray
|
|
34833
34849
|
}, void 0)]
|
|
34834
34850
|
}), void 0) : null;
|
|
34835
34851
|
|
|
34836
34852
|
var contextMenuSmallScreen = function contextMenuSmallScreen() {
|
|
34837
|
-
if (
|
|
34853
|
+
if (hasContextMenuElementsOrUserProps && smallScreen) {
|
|
34838
34854
|
if (hasInteractiveContextMenuElements) {
|
|
34839
34855
|
var userPropsInteractivePos = hasInteractiveUser ? 0 : -1;
|
|
34840
34856
|
var navItemsFirstPos = navigationElements ? userPropsInteractivePos + 1 : -1;
|
|
@@ -34866,9 +34882,12 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34866
34882
|
};
|
|
34867
34883
|
|
|
34868
34884
|
var isSmallScreenAndHasNavElements = smallScreen && navigationElements ? true : false;
|
|
34885
|
+
var hasContextMenu = hasContextMenuElementsOrUserProps || hasNavigationElements && smallScreen;
|
|
34869
34886
|
return jsxRuntime.jsxs(Wrapper$2, __assign({}, rest, {
|
|
34870
|
-
children: [jsxRuntime.
|
|
34871
|
-
|
|
34887
|
+
children: [jsxRuntime.jsx(BannerWrapper, __assign({
|
|
34888
|
+
hasContextMenu: hasContextMenu
|
|
34889
|
+
}, {
|
|
34890
|
+
children: jsxRuntime.jsxs(BannerLeftWrapper, {
|
|
34872
34891
|
children: [jsxRuntime.jsx(LovisaWrapper, {
|
|
34873
34892
|
children: jsxRuntime.jsx(Typography, __assign({
|
|
34874
34893
|
typographyType: "bodySans02",
|
|
@@ -34885,7 +34904,9 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34885
34904
|
children: applicationName
|
|
34886
34905
|
}), void 0)
|
|
34887
34906
|
}, void 0)]
|
|
34888
|
-
}, void 0)
|
|
34907
|
+
}, void 0)
|
|
34908
|
+
}), void 0), !smallScreen && navigation, hasContextMenuElementsOrUserProps && jsxRuntime.jsxs(ContextMenuGroup, {
|
|
34909
|
+
children: [jsxRuntime.jsx(Button, {
|
|
34889
34910
|
ref: buttonRef,
|
|
34890
34911
|
Icon: isSmallScreenAndHasNavElements ? MenuOutlinedIcon : MoreVertOutlinedIcon,
|
|
34891
34912
|
appearance: "borderless",
|
|
@@ -34895,7 +34916,7 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34895
34916
|
"aria-expanded": !contextMenuIsClosed ? true : undefined,
|
|
34896
34917
|
"aria-label": "\xE5pne meny"
|
|
34897
34918
|
}, void 0), smallScreen ? contextMenuSmallScreen() : contextMenu]
|
|
34898
|
-
}, void 0)
|
|
34919
|
+
}, void 0)]
|
|
34899
34920
|
}), void 0);
|
|
34900
34921
|
};
|
|
34901
34922
|
|
package/dist/index.js
CHANGED
|
@@ -20499,7 +20499,7 @@ var LinkIconWrapper = styled(IconWrapper$1).withConfig({
|
|
|
20499
20499
|
var StyledTypography = styled.p.withConfig({
|
|
20500
20500
|
displayName: "Typography__StyledTypography",
|
|
20501
20501
|
componentId: "sc-1uvxoh6-1"
|
|
20502
|
-
})(templateObject_13$
|
|
20502
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n"], ["\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
20503
20503
|
var typographyType = _a.typographyType;
|
|
20504
20504
|
return typographyType && getElementStyling(typographyType);
|
|
20505
20505
|
}, function (_a) {
|
|
@@ -20527,7 +20527,7 @@ var StyledTypography = styled.p.withConfig({
|
|
|
20527
20527
|
return italic && Ae(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typographyTokens.style.italic.base);
|
|
20528
20528
|
}, function (_a) {
|
|
20529
20529
|
var underline = _a.underline;
|
|
20530
|
-
return underline && Ae(templateObject_12$
|
|
20530
|
+
return underline && Ae(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typographyTokens.style.underline.base);
|
|
20531
20531
|
});
|
|
20532
20532
|
var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
20533
20533
|
var _b = _a.typographyType,
|
|
@@ -20556,7 +20556,7 @@ var Typography = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
20556
20556
|
}, void 0) : '']
|
|
20557
20557
|
}), void 0);
|
|
20558
20558
|
});
|
|
20559
|
-
var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$
|
|
20559
|
+
var templateObject_1$M, templateObject_2$z, templateObject_3$p, templateObject_4$l, templateObject_5$f, templateObject_6$e, templateObject_7$a, templateObject_8$7, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3;
|
|
20560
20560
|
|
|
20561
20561
|
var RadioButtonGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
|
|
20562
20562
|
var useRadioButtonGroup = function useRadioButtonGroup() {
|
|
@@ -21170,7 +21170,7 @@ var Input$4 = styled.input.attrs(function (_a) {
|
|
|
21170
21170
|
var Container$8 = styled.label.withConfig({
|
|
21171
21171
|
displayName: "Checkboxstyles__Container",
|
|
21172
21172
|
componentId: "sc-17q1ubf-2"
|
|
21173
|
-
})(templateObject_13$
|
|
21173
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n width: fit-content;\n ", "\n ", "\n\n input ~ ", " {\n transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n }\n\n input:checked ~ ", ":after {\n display: block;\n }\n\n input:checked ~ ", " {\n ", "\n }\n\n &:hover input:enabled ~ ", " {\n ", "\n }\n &:hover input:checked:enabled ~ ", " {\n ", "\n }\n &:focus-within {\n outline: ", " solid\n ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", ":after {\n border: solid ", ";\n ", "\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n width: fit-content;\n ", "\n ", "\n\n input ~ ", " {\n transition: box-shadow 0.2s, background-color 0.2s, border 0.2s;\n }\n\n input:checked ~ ", ":after {\n display: block;\n }\n\n input:checked ~ ", " {\n ", "\n }\n\n &:hover input:enabled ~ ", " {\n ", "\n }\n &:hover input:checked:enabled ~ ", " {\n ", "\n }\n &:focus-within {\n outline: ", " solid\n ", ";\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", ":after {\n border: solid ", ";\n ", "\n }\n"])), checkboxTokens.container.base, function (_a) {
|
|
21174
21174
|
var label = _a.label;
|
|
21175
21175
|
return label ? Ae(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.container.withLabel.base) : Ae(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.container.noLabel.base);
|
|
21176
21176
|
}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focusOutline.width, checkboxTokens.container.focusOutline.color, function (_a) {
|
|
@@ -21189,9 +21189,9 @@ var Container$8 = styled.label.withConfig({
|
|
|
21189
21189
|
return readOnly && Ae(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n ", "\n "], ["\n cursor: default;\n input ~ ", " {\n ", "\n }\n input:checked ~ ", " {\n ", "\n }\n ", "\n "])), CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && Ae(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n input ~ ", " {\n ", "\n }\n "], ["\n input ~ ", " {\n ", "\n }\n "])), CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
|
|
21190
21190
|
}, CustomCheckbox, checkboxTokens.checkmark.color, function (_a) {
|
|
21191
21191
|
var indeterminate = _a.indeterminate;
|
|
21192
|
-
return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "], ["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$
|
|
21192
|
+
return indeterminate ? Ae(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "], ["\n left: 25%;\n top: 50%;\n width: 50%;\n height: 1px;\n ", "\n "])), checkboxTokens.checkmark.indeterminate.base) : Ae(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), checkboxTokens.checkmark.base);
|
|
21193
21193
|
});
|
|
21194
|
-
var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$
|
|
21194
|
+
var templateObject_1$H, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$6, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
21195
21195
|
|
|
21196
21196
|
var CheckboxGroupContext = /*#__PURE__*/React__default['default'].createContext(null);
|
|
21197
21197
|
var useCheckboxGroup = function useCheckboxGroup() {
|
|
@@ -21925,7 +21925,7 @@ var ButtonWrapper$1 = styled.button.withConfig({
|
|
|
21925
21925
|
var StyledIconWrapperSpan = styled.span.withConfig({
|
|
21926
21926
|
displayName: "Buttonstyles__StyledIconWrapperSpan",
|
|
21927
21927
|
componentId: "sc-14dutqk-1"
|
|
21928
|
-
})(templateObject_12$
|
|
21928
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n"])), function (_a) {
|
|
21929
21929
|
var size = _a.size,
|
|
21930
21930
|
iconPosition = _a.iconPosition;
|
|
21931
21931
|
return iconPosition === 'left' ? Ae(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n margin-inline-end: ", ";\n "], ["\n margin-inline-end: ", ";\n "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n margin-inline-start: ", ";\n "], ["\n margin-inline-start: ", ";\n "])), buttonTokens.sizes[size].iconWithTextMargin) : Ae(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), buttonTokens.sizes[size].justIconWrapper.base);
|
|
@@ -21933,8 +21933,8 @@ var StyledIconWrapperSpan = styled.span.withConfig({
|
|
|
21933
21933
|
var Label$2 = styled.span.withConfig({
|
|
21934
21934
|
displayName: "Buttonstyles__Label",
|
|
21935
21935
|
componentId: "sc-14dutqk-2"
|
|
21936
|
-
})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
21937
|
-
var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$
|
|
21936
|
+
})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
|
|
21937
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8, templateObject_8$5, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$2, templateObject_13$1;
|
|
21938
21938
|
|
|
21939
21939
|
var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
21940
21940
|
var label = _a.label,
|
|
@@ -29464,7 +29464,7 @@ var Wrapper$5 = styled.div.withConfig({
|
|
|
29464
29464
|
var SelectedIconWrapper = styled(IconWrapper$1).withConfig({
|
|
29465
29465
|
displayName: "Selectstyles__SelectedIconWrapper",
|
|
29466
29466
|
componentId: "sc-19jkd5s-3"
|
|
29467
|
-
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
|
|
29467
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), selectTokens.option.selected.icon.margin);
|
|
29468
29468
|
var CustomStyles = {
|
|
29469
29469
|
control: function control() {
|
|
29470
29470
|
return __assign({
|
|
@@ -29555,7 +29555,7 @@ var CustomStyles = {
|
|
|
29555
29555
|
return __assign(__assign({}, provided), selectTokens.loadingIndicator.base);
|
|
29556
29556
|
}
|
|
29557
29557
|
};
|
|
29558
|
-
var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12;
|
|
29558
|
+
var templateObject_1$y, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1;
|
|
29559
29559
|
|
|
29560
29560
|
var DdsOption = components.Option,
|
|
29561
29561
|
NoOptionsMessage = components.NoOptionsMessage,
|
|
@@ -31678,12 +31678,12 @@ var filledLightBase = {
|
|
|
31678
31678
|
};
|
|
31679
31679
|
var strokeLightBase = {
|
|
31680
31680
|
backgroundColor: Colors$4.DdsColorNeutralsWhite,
|
|
31681
|
-
borderColor:
|
|
31681
|
+
borderColor: Border$6.BordersDdsBorderStyleLightStroke,
|
|
31682
31682
|
color: textDefault.textColor
|
|
31683
31683
|
};
|
|
31684
31684
|
var strokeDarkBase = {
|
|
31685
31685
|
backgroundColor: Colors$4.DdsColorNeutralsWhite,
|
|
31686
|
-
borderColor:
|
|
31686
|
+
borderColor: Border$6.BordersDdsBorderStyleDarkStroke,
|
|
31687
31687
|
color: textDefault.textColor
|
|
31688
31688
|
};
|
|
31689
31689
|
var cardTokens = {
|
|
@@ -34517,6 +34517,10 @@ var contextMenuDividerBase = {
|
|
|
34517
34517
|
marginRight: Spacing$5.SizesDdsSpacingLocalX15,
|
|
34518
34518
|
marginLeft: Spacing$5.SizesDdsSpacingLocalX15
|
|
34519
34519
|
};
|
|
34520
|
+
var contextGroupBase = {
|
|
34521
|
+
right: Spacing$5.SizesDdsSpacingLocalX075,
|
|
34522
|
+
top: Spacing$5.SizesDdsSpacingLocalX025
|
|
34523
|
+
};
|
|
34520
34524
|
var internalHeaderTokens = {
|
|
34521
34525
|
wrapper: {
|
|
34522
34526
|
base: wrapperBase$3
|
|
@@ -34528,7 +34532,8 @@ var internalHeaderTokens = {
|
|
|
34528
34532
|
base: lovisaWrapperBase
|
|
34529
34533
|
},
|
|
34530
34534
|
banner: {
|
|
34531
|
-
base: bannerBase
|
|
34535
|
+
base: bannerBase,
|
|
34536
|
+
contextMenuSpacing: Spacing$5.SizesDdsSpacingLayoutX4
|
|
34532
34537
|
},
|
|
34533
34538
|
bannerLeft: {
|
|
34534
34539
|
base: bannerLeftBase
|
|
@@ -34572,44 +34577,50 @@ var internalHeaderTokens = {
|
|
|
34572
34577
|
},
|
|
34573
34578
|
icon: {
|
|
34574
34579
|
base: iconBase
|
|
34580
|
+
},
|
|
34581
|
+
contextGroup: {
|
|
34582
|
+
base: contextGroupBase
|
|
34575
34583
|
}
|
|
34576
34584
|
};
|
|
34577
34585
|
|
|
34578
34586
|
var Wrapper$2 = styled.div.withConfig({
|
|
34579
34587
|
displayName: "InternalHeaderstyles__Wrapper",
|
|
34580
34588
|
componentId: "sc-91bnca-0"
|
|
34581
|
-
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n *::selection {\n ", "\n }\n ", "\n"], ["\n *::selection {\n ", "\n }\n ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
|
|
34589
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n *::selection {\n ", "\n }\n ", "\n"], ["\n position: relative;\n *::selection {\n ", "\n }\n ", "\n"])), typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
|
|
34582
34590
|
var BannerWrapper = styled.div.withConfig({
|
|
34583
34591
|
displayName: "InternalHeaderstyles__BannerWrapper",
|
|
34584
34592
|
componentId: "sc-91bnca-1"
|
|
34585
|
-
})(
|
|
34593
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n ", "\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n ", "\n"])), internalHeaderTokens.banner.base, function (_a) {
|
|
34594
|
+
var hasContextMenu = _a.hasContextMenu;
|
|
34595
|
+
return hasContextMenu && Ae(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n padding-right: ", ";\n "], ["\n padding-right: ", ";\n "])), internalHeaderTokens.banner.contextMenuSpacing);
|
|
34596
|
+
});
|
|
34586
34597
|
var BannerLeftWrapper = styled.div.withConfig({
|
|
34587
34598
|
displayName: "InternalHeaderstyles__BannerLeftWrapper",
|
|
34588
34599
|
componentId: "sc-91bnca-2"
|
|
34589
|
-
})(
|
|
34600
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), internalHeaderTokens.bannerLeft.base);
|
|
34590
34601
|
var ApplicationNameWrapper = styled.div.withConfig({
|
|
34591
34602
|
displayName: "InternalHeaderstyles__ApplicationNameWrapper",
|
|
34592
34603
|
componentId: "sc-91bnca-3"
|
|
34593
|
-
})(
|
|
34604
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n"], ["\n display: flex;\n align-items: center;\n ", "\n"])), internalHeaderTokens.applicationNameWrapper.base);
|
|
34594
34605
|
var LovisaWrapper = styled.div.withConfig({
|
|
34595
34606
|
displayName: "InternalHeaderstyles__LovisaWrapper",
|
|
34596
34607
|
componentId: "sc-91bnca-4"
|
|
34597
|
-
})(
|
|
34608
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.lovisaWrapper.base);
|
|
34598
34609
|
var Navigation = styled.nav.withConfig({
|
|
34599
34610
|
displayName: "InternalHeaderstyles__Navigation",
|
|
34600
34611
|
componentId: "sc-91bnca-5"
|
|
34601
|
-
})(
|
|
34612
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.navigation.base);
|
|
34602
34613
|
var NavigationList = styled.ul.withConfig({
|
|
34603
34614
|
displayName: "InternalHeaderstyles__NavigationList",
|
|
34604
34615
|
componentId: "sc-91bnca-6"
|
|
34605
|
-
})(
|
|
34616
|
+
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n ", "\n list-style-type: none;\n padding: 0;\n margin: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n ", "\n list-style-type: none;\n padding: 0;\n margin: 0;\n"])), function (_a) {
|
|
34606
34617
|
var smallScreen = _a.smallScreen;
|
|
34607
|
-
return smallScreen && Ae(
|
|
34618
|
+
return smallScreen && Ae(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex-direction: column;\n "], ["\n flex-direction: column;\n "])));
|
|
34608
34619
|
});
|
|
34609
34620
|
var ContextMenuWrapper = styled.div.withConfig({
|
|
34610
34621
|
displayName: "InternalHeaderstyles__ContextMenuWrapper",
|
|
34611
34622
|
componentId: "sc-91bnca-7"
|
|
34612
|
-
})(
|
|
34623
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n box-sizing: border-box;\n position: absolute;\n z-index: 3;\n top: 100%;\n right: 0;\n overflow-y: auto;\n min-width: 180px;\n max-width: 300px;\n max-height: calc(100vh - 110px);\n transition: visibility 0.4s, opacity 0.2s;\n visibility: ", ";\n opacity: ", ";\n ", "\n ", "\n"], ["\n box-sizing: border-box;\n position: absolute;\n z-index: 3;\n top: 100%;\n right: 0;\n overflow-y: auto;\n min-width: 180px;\n max-width: 300px;\n max-height: calc(100vh - 110px);\n transition: visibility 0.4s, opacity 0.2s;\n visibility: ", ";\n opacity: ", ";\n ", "\n ", "\n"])), function (_a) {
|
|
34613
34624
|
var closed = _a.closed;
|
|
34614
34625
|
return closed ? 'hidden' : 'visible';
|
|
34615
34626
|
}, function (_a) {
|
|
@@ -34619,12 +34630,16 @@ var ContextMenuWrapper = styled.div.withConfig({
|
|
|
34619
34630
|
var ContextMenuList = styled.ul.withConfig({
|
|
34620
34631
|
displayName: "InternalHeaderstyles__ContextMenuList",
|
|
34621
34632
|
componentId: "sc-91bnca-8"
|
|
34622
|
-
})(
|
|
34633
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n"], ["\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n"])));
|
|
34623
34634
|
var StyledDivider = styled(Divider).withConfig({
|
|
34624
34635
|
displayName: "InternalHeaderstyles__StyledDivider",
|
|
34625
34636
|
componentId: "sc-91bnca-9"
|
|
34626
|
-
})(
|
|
34627
|
-
var
|
|
34637
|
+
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), internalHeaderTokens.contextMenuDivider.base);
|
|
34638
|
+
var ContextMenuGroup = styled.div.withConfig({
|
|
34639
|
+
displayName: "InternalHeaderstyles__ContextMenuGroup",
|
|
34640
|
+
componentId: "sc-91bnca-10"
|
|
34641
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n ", "\n"], ["\n position: absolute;\n ", "\n"])), internalHeaderTokens.contextGroup.base);
|
|
34642
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
34628
34643
|
|
|
34629
34644
|
var Link$2 = styled.a.withConfig({
|
|
34630
34645
|
displayName: "NavigationItem__Link",
|
|
@@ -34855,14 +34870,15 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34855
34870
|
'aria-hidden': contextMenuIsClosed,
|
|
34856
34871
|
role: 'menu'
|
|
34857
34872
|
};
|
|
34858
|
-
var
|
|
34873
|
+
var hasContextMenuElementsOrUserProps = hasInteractiveContextMenuElements || !!userProps;
|
|
34874
|
+
var contextMenu = hasContextMenuElementsOrUserProps && !smallScreen ? jsxRuntime.jsxs(ContextMenuWrapper, __assign({}, contextMenuWrapperProps, {
|
|
34859
34875
|
children: [userContextMenuItemNonInteractive, jsxRuntime.jsx(ContextMenuList, {
|
|
34860
34876
|
children: contextMenuContentArray
|
|
34861
34877
|
}, void 0)]
|
|
34862
34878
|
}), void 0) : null;
|
|
34863
34879
|
|
|
34864
34880
|
var contextMenuSmallScreen = function contextMenuSmallScreen() {
|
|
34865
|
-
if (
|
|
34881
|
+
if (hasContextMenuElementsOrUserProps && smallScreen) {
|
|
34866
34882
|
if (hasInteractiveContextMenuElements) {
|
|
34867
34883
|
var userPropsInteractivePos = hasInteractiveUser ? 0 : -1;
|
|
34868
34884
|
var navItemsFirstPos = navigationElements ? userPropsInteractivePos + 1 : -1;
|
|
@@ -34894,9 +34910,12 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34894
34910
|
};
|
|
34895
34911
|
|
|
34896
34912
|
var isSmallScreenAndHasNavElements = smallScreen && navigationElements ? true : false;
|
|
34913
|
+
var hasContextMenu = hasContextMenuElementsOrUserProps || hasNavigationElements && smallScreen;
|
|
34897
34914
|
return jsxRuntime.jsxs(Wrapper$2, __assign({}, rest, {
|
|
34898
|
-
children: [jsxRuntime.
|
|
34899
|
-
|
|
34915
|
+
children: [jsxRuntime.jsx(BannerWrapper, __assign({
|
|
34916
|
+
hasContextMenu: hasContextMenu
|
|
34917
|
+
}, {
|
|
34918
|
+
children: jsxRuntime.jsxs(BannerLeftWrapper, {
|
|
34900
34919
|
children: [jsxRuntime.jsx(LovisaWrapper, {
|
|
34901
34920
|
children: jsxRuntime.jsx(Typography, __assign({
|
|
34902
34921
|
typographyType: "bodySans02",
|
|
@@ -34913,7 +34932,9 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34913
34932
|
children: applicationName
|
|
34914
34933
|
}), void 0)
|
|
34915
34934
|
}, void 0)]
|
|
34916
|
-
}, void 0)
|
|
34935
|
+
}, void 0)
|
|
34936
|
+
}), void 0), !smallScreen && navigation, hasContextMenuElementsOrUserProps && jsxRuntime.jsxs(ContextMenuGroup, {
|
|
34937
|
+
children: [jsxRuntime.jsx(Button, {
|
|
34917
34938
|
ref: buttonRef,
|
|
34918
34939
|
Icon: isSmallScreenAndHasNavElements ? MenuOutlinedIcon : MoreVertOutlinedIcon,
|
|
34919
34940
|
appearance: "borderless",
|
|
@@ -34923,7 +34944,7 @@ var InternalHeader = function InternalHeader(_a) {
|
|
|
34923
34944
|
"aria-expanded": !contextMenuIsClosed ? true : undefined,
|
|
34924
34945
|
"aria-label": "\xE5pne meny"
|
|
34925
34946
|
}, void 0), smallScreen ? contextMenuSmallScreen() : contextMenu]
|
|
34926
|
-
}, void 0)
|
|
34947
|
+
}, void 0)]
|
|
34927
34948
|
}), void 0);
|
|
34928
34949
|
};
|
|
34929
34950
|
|