@equinor/amplify-component-lib 9.15.2-beta.0 → 9.15.3-beta.0

package/dist/organisms/Status/index.d.ts

@@ -0,0 +1,16 @@
+import { Action } from "./Action.js";
+import { Description } from "./Description.js";
+import { MissingAccesses } from "./MissingAccesses.js";
+import { Status } from "./Status.js";
+import { Title } from "./Title.js";
+
+//#region src/organisms/Status/index.d.ts
+type StatusType = typeof Status & {
+  Title: typeof Title;
+  Description: typeof Description;
+  Action: typeof Action;
+  MissingAccesses: typeof MissingAccesses;
+};
+declare const Status$1: StatusType;
+//#endregion
+export { Status$1 as Status };

package/dist/organisms/Status/index.js

@@ -0,0 +1 @@
+import{Action as e}from"./Action.js";import{Description as t}from"./Description.js";import{MissingAccesses as n}from"./MissingAccesses.js";import{Status as r}from"./Status.js";import{Title as i}from"./Title.js";const a=r;a.Title=i,a.Description=t,a.Action=e,a.MissingAccesses=n;export{a as Status};

package/dist/organisms/TableOfContents/TableOfContents.constants.js

@@ -0,0 +1 @@
+import{spacings as e}from"../../atoms/style/spacings.js";const t={buttons:`39px`,border:`34px`,borderHorizontal:`34px`},n={buttons:e.x_small,border:`0`,borderHorizontal:`0`};export{n as GAP,t as HEIGHT};

package/dist/organisms/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,12 @@
+import { TableOfContentsVariants } from "./TableOfContents.types.js";
+import { FC } from "react";
+
+//#region src/organisms/TableOfContents/TableOfContents.d.ts
+interface TableOfContentsProps {
+  variant?: TableOfContentsVariants;
+  onlyShowSelectedChildren?: boolean;
+  isLink?: boolean;
+}
+declare const TableOfContents: FC<TableOfContentsProps>;
+//#endregion
+export { TableOfContents, TableOfContentsProps };

package/dist/organisms/TableOfContents/TableOfContents.js

@@ -0,0 +1 @@
+import{getValues as e}from"../../providers/TableOfContentsProvider.utils.js";import{useTableOfContents as t}from"../../providers/TableOfContentsProvider.js";import{BorderItemsContainer as n,BorderItemsHorizontalContainer as r,TableOfContentsContainer as i}from"./TableOfContents.styles.js";import{TableOfContentsItem as a}from"./TableOfContentsItem.js";import{useMemo as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=({variant:c=`buttons`,onlyShowSelectedChildren:l=!0,isLink:u=!1})=>{let{items:d,selected:f}=t(),p=o(()=>{for(let[t,n]of d.entries()){let r=e([],n);if(n.value===f||f&&r.includes(f))return t}return-1},[d,f]);return c===`border`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(n,{"data-testid":`border-items-container-${e.value}`,$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,onlyShowSelectedChildren:l,isLink:u,...e})},e.value))}):c===`borderHorizontal`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(r,{$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u})},e.value))}):s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,children:d.map(e=>s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u},e.value))})};export{c as TableOfContents};

package/dist/organisms/TableOfContents/TableOfContents.styles.js

@@ -0,0 +1,192 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{animation as t}from"../../atoms/style/animation.js";import{spacings as n}from"../../atoms/style/spacings.js";import{HEIGHT as r}from"./TableOfContents.constants.js";import i,{css as a}from"styled-components";import{motion as o}from"framer-motion";import{Link as s}from"@tanstack/react-router";const{colors:c,shape:l}=e,u=i.button`
+  &:hover {
+    background: ${c.interactive.primary__hover_alt.rgba};
+  }
+  ${({$active:e})=>e?``:a`
+      &:focus:not(:hover) {
+        outline: 2px dashed ${c.interactive.focus.rgba};
+        outline-offset: -4px;
+      }
+    `}
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: ${n.small};
+  color: ${c.text.static_icons__default.rgba};
+  cursor: pointer;
+  padding: 0 ${n.medium};
+  height: ${({$variant:e})=>r[e]};
+  transition: background 200ms;
+  > span {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    text-align: left;
+    font-family: 'Equinor', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
+          border-radius: ${l.corners.borderRadius};
+          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
+        `;case`border`:return a`
+          > span {
+            font-weight: ${t?700:500};
+            &:after {
+              height: 0;
+              display: block;
+              content: attr(title);
+              font-weight: 700;
+              font-size: 14px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        `}}}
+  ${({$active:e})=>!e&&a`
+      &:disabled {
+        color: ${c.interactive.disabled__text.rgba};
+        cursor: not-allowed;
+      }
+    `}
+`,d=i(s)`
+  text-decoration: none;
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration: none;
+    color: ${c.text.static_icons__default.rgba};
+  }
+  &:hover {
+    background: ${c.interactive.primary__hover_alt.rgba};
+  }
+  &:focus-visible {
+    color: ${c.text.static_icons__default.rgba};
+    outline: 2px dashed ${c.interactive.focus.rgba};
+    outline-offset: -4px;
+  }
+
+  ${({$disabled:e,$active:t})=>e&&!t&&a`
+      color: ${c.interactive.disabled__text.rgba} !important;
+      &:hover {
+        cursor: not-allowed;
+      }
+    `};
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: ${n.small};
+  color: ${c.text.static_icons__default.rgba};
+  cursor: pointer;
+  padding: 0 ${n.medium};
+  height: ${({$variant:e})=>r[e]};
+  transition: background 200ms;
+
+  > span {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    text-align: left;
+    font-family: 'Equinor', sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
+          border-radius: ${l.corners.borderRadius};
+          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
+        `;case`border`:return a`
+          > span {
+            font-weight: ${t?700:500};
+            &:after {
+              height: 0;
+              display: block;
+              content: attr(title);
+              font-weight: 700;
+              font-size: 14px;
+              overflow: hidden;
+              visibility: hidden;
+            }
+          }
+        `}}}
+`,f=i.div`
+  display: flex;
+  position: relative;
+  &:after {
+    position: absolute;
+    left: 0;
+    bottom: ${({$activeIndex:e,$index:t})=>`${(e-t)*100}%`};
+    content: '';
+    width: 100%;
+    height: 2px;
+    background: ${c.interactive.primary__resting.rgba};
+    z-index: 100;
+  }
+`,p=i.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  &:after {
+    position: absolute;
+    left: 0;
+    top: ${({$activeIndex:e,$index:t})=>`${(e-t)*100}%`};
+    content: '';
+    width: 2px;
+    height: 100%;
+    background: ${c.interactive.primary__resting.rgba};
+    z-index: 100;
+    transition: top ${t.transitionMS};
+  }
+`,m=i(o.div)`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  ${({$variant:e})=>a`
+    min-height: ${r[e]};
+    ${e===`buttons`&&`gap: ${n.x_small};`}
+  `}
+`,h=i(o.div)`
+  display: flex;
+  flex-direction: ${({$variant:e})=>e===`borderHorizontal`?`row`:`column`};
+  height: fit-content;
+  overflow: hidden;
+  ${({$variant:e})=>{switch(e){case`buttons`:return`gap: ${n.small};`;case`border`:return a`
+          &:after {
+            position: absolute;
+            left: 0;
+            content: '';
+            width: 2px;
+            height: 100%;
+            background: ${c.ui.background__medium.rgba};
+          }
+        `;case`borderHorizontal`:return a`
+          &:after {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            content: '';
+            width: 100%;
+            height: 2px;
+            background: ${c.ui.background__medium.rgba};
+          }
+        `}}}
+`,g=i(o.div)`
+  display: flex;
+  flex-direction: column;
+  ${({$shouldShowChildren:e})=>e?null:a`
+          visibility: hidden;
+          height: 0 !important;
+        `}
+  > div > button, a {
+    ${({$variant:e})=>{switch(e){case`buttons`:return a`
+            margin-left: ${n.medium};
+          `;case`border`:return a`
+            padding-left: ${n.x_large};
+          `}}}
+  }
+
+  ${({$variant:e})=>e===`buttons`&&`gap:${n.x_small};`}
+`;export{p as BorderItemsContainer,f as BorderItemsHorizontalContainer,u as Button,g as ChildContainer,d as Link,h as TableOfContentsContainer,m as TableOfContentsItemContainer};

package/dist/organisms/TableOfContents/TableOfContents.types.d.ts

@@ -0,0 +1,4 @@
+//#region src/organisms/TableOfContents/TableOfContents.types.d.ts
+type TableOfContentsVariants = 'buttons' | 'border' | 'borderHorizontal';
+//#endregion
+export { TableOfContentsVariants };

package/dist/organisms/TableOfContents/TableOfContentsItem.js

@@ -0,0 +1,5 @@
+import{useTableOfContents as e}from"../../providers/TableOfContentsProvider.js";import{Badge as t}from"../../molecules/Badge/Badge.js";import{GAP as n,HEIGHT as r}from"./TableOfContents.constants.js";import{Button as i,ChildContainer as a,Link as o,TableOfContentsItemContainer as s}from"./TableOfContents.styles.js";import{useEffect as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({label:m,value:h,count:g,disabled:_=!1,children:v,variant:y,onlyShowSelectedChildren:b,isLink:x=!1})=>{let{isActive:S,selected:C,setSelected:w}=e(),T=u(void 0);c(()=>{T.current===void 0&&(T.current=0)},[]);let E=l(()=>S({label:m,value:h,children:v})&&!_,[v,_,S,m,h]),D=e=>{_&&e&&e.preventDefault(),!_&&C!==h&&w(h)},O=b&&E||!b;return f(s,{$variant:y,layoutScroll:!0,layoutRoot:!0,children:[x?f(o,{$active:C===h,$variant:y,onClick:e=>D(e),to:_?``:`#${h}`,$disabled:_,tabIndex:_?-1:0,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}):f(i,{$active:C===h,$variant:y,onClick:()=>D(),disabled:_,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}),v&&d(a,{$shouldShowChildren:O,$variant:y,initial:{height:T.current},animate:{height:`
+                  calc(
+                    (${O?r[y]:`0`} * ${v.length})
+                    ${y===`buttons`?`+ (${n.buttons} * ${v.length-1})`:``}
+                  )`},transition:{duration:.4},children:v.map(e=>d(p,{onlyShowSelectedChildren:b,variant:y,...e,isLink:x},e.value))})]})};export{p as TableOfContentsItem};

package/dist/organisms/Template/Template.d.ts

@@ -0,0 +1,21 @@
+import * as react5 from "react";
+import * as styled_components0 from "styled-components";
+import { IStyledComponent } from "styled-components";
+import * as styled_components_dist_types0 from "styled-components/dist/types";
+
+//#region src/organisms/Template/Template.d.ts
+interface ContentProps {
+  $open: boolean;
+}
+declare const Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<react5.DetailedHTMLProps<react5.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentProps>> & string;
+declare const GlobalStyles: react5.NamedExoticComponent<styled_components0.ExecutionProps & object>;
+type TemplateType = IStyledComponent<'web', any> & {
+  Container: IStyledComponent<'web', any>;
+  Content: typeof Content;
+  GlobalStyles: typeof GlobalStyles;
+  FullWidth: string;
+  WithoutScrollGutter: string;
+};
+declare const Template: TemplateType;
+//#endregion
+export { type ContentProps, Template, type TemplateType };

package/dist/organisms/Template/Template.js

@@ -0,0 +1,75 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import{darkTokens as n}from"../../atoms/style/darkTokens.js";import{lightTokens as r}from"../../atoms/style/lightTokens.js";import{spacingTokens as i}from"../../atoms/style/spacingTokens.js";import a,{createGlobalStyle as o}from"styled-components";const{colors:s}=e,c=a.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 100vw;
+  background: ${s.ui.background__light.rgba};
+`,l=a.div`
+  display: flex;
+`,u=`fullwidth`,d=`fullwidth-without-scroll`,f=a.div`
+  position: relative;
+  display: flex;
+  /* 64px is height of TopBar */
+  min-height: calc(100vh - 64px);
+  max-height: calc(100vh - 64px);
+  overflow: auto;
+  /* 231px and 64px is width of Sidebar when open/closed */
+  min-width: calc(100% - ${e=>e.$open?`231px`:`64px`});
+  &:not(:has(.${u})) {
+    padding: 0
+      max(${t.xxx_large}, calc(50% - ${t.xxx_large} - 1280px / 2));
+    margin: 0 auto;
+  }
+`,p=o`
+  ${n}
+  ${r}
+  ${i}
+  
+  * {
+      box-sizing: border-box;
+  }
+
+  body, #content:not(:has(.select-field), :has(.${d})) {
+      scrollbar-gutter: stable;
+  }
+
+  dialog {
+    background: ${s.ui.background__default.rgba};
+  }
+
+  button {
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  hr {
+    margin: 0;
+    border: none;
+    background: ${s.ui.background__medium.rgba};
+  }
+
+  body {
+    margin: 0;
+    font-family: 'Equinor', sans-serif;
+    color: ${s.text.static_icons__default.rgba};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: 'Equinor Mono', source-code-pro, Menlo, Monaco,
+    monospace;
+  }
+
+  div:focus-within:has(input[role=combobox]),
+  div:focus-within:has(input[type=text]),
+  div:focus-within:has(input[type=date]),
+  div:focus-within:has(textarea){
+    outline: none;
+    > input {
+      box-shadow: inset 0 -2px 0 0 ${s.interactive.primary__resting.rgba};
+    }
+  }
+
+`,m=c;m.Container=l,m.Content=f,m.GlobalStyles=p,m.FullWidth=u,m.WithoutScrollGutter=d;export{m as Template};

package/dist/organisms/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,7 @@
+import { ToggleGroup } from "./ToggleGroup.types.js";
+import * as react116 from "react";
+
+//#region src/organisms/ToggleGroup/ToggleGroup.d.ts
+declare const ToggleGroup$1: react116.ForwardRefExoticComponent<ToggleGroup & react116.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

package/dist/organisms/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,29 @@
+import{colors as e}from"../../atoms/style/colors.js";import{shape as t}from"../../atoms/style/index.js";import{ToggleGroupOption as n}from"./ToggleGroupOption.js";import{Children as r,forwardRef as i}from"react";import a,{css as o}from"styled-components";import{jsx as s}from"react/jsx-runtime";const c=a.div`
+  display: flex;
+  ${({$variant:n})=>{if(n===`filled`)return o`
+        border-radius: ${t.button.borderRadius};
+        background: ${e.ui.background__default.rgba};
+      `;if(n===`outlined`)return o`
+        gap: 1px; // Space for the outline
+        > button {
+          outline: 1px solid ${e.text.static_icons__tertiary.rgba};
+          &:hover {
+            outline-color: ${e.text.static_icons__secondary.rgba};
+          }
+          &[aria-checked='true'] {
+            outline-color: ${e.interactive.primary__resting.rgba};
+            &:hover {
+              outline-color: ${e.interactive.primary__hover.rgba};
+            }
+          }
+          &:disabled {
+            background: none;
+            outline-color: ${e.interactive.disabled__text.rgba};
+          }
+        }
+      `}}
+
+  ${({$matchParentHeight:e})=>e?o`
+        height: 100%;
+      `:``}
+`,l=i(({variant:e=`filled`,matchParentHeight:t=!1,children:i},a)=>s(c,{ref:a,$variant:e,$matchParentHeight:t,children:r.map(i,e=>{if(e.type!=n)throw`Expected child to be ToggleGroupOption!`;return e})}));l.displayName=`ToggleGroup`;export{l as ToggleGroup};

package/dist/organisms/ToggleGroup/ToggleGroup.types.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+import { IconData } from "@equinor/eds-icons";
+
+//#region src/organisms/ToggleGroup/ToggleGroup.types.d.ts
+interface ToggleGroupOptionWithLabel {
+  label: string;
+  icon?: IconData;
+}
+interface ToggleGroupOptionOnlyIcon {
+  icon: IconData;
+}
+type ToggleGroupOption = {
+  onToggle: (newValue: boolean) => void;
+  checked: boolean;
+  disabled?: boolean;
+} & (ToggleGroupOptionWithLabel | ToggleGroupOptionOnlyIcon);
+/**
+ * @param variant - Defaults to 'filled'
+ */
+interface ToggleGroup {
+  variant?: 'filled' | 'outlined' | 'ghost';
+  matchParentHeight?: boolean;
+  children: ReactElement<ToggleGroupOption>[];
+}
+//#endregion
+export { ToggleGroup, ToggleGroupOption };

package/dist/organisms/ToggleGroup/ToggleGroupOption.d.ts

@@ -0,0 +1,9 @@
+import { ToggleGroupOption } from "./ToggleGroup.types.js";
+import * as react118 from "react";
+import { HTMLAttributes } from "react";
+
+//#region src/organisms/ToggleGroup/ToggleGroupOption.d.ts
+type ToggleGroupOptionProps = ToggleGroupOption & Omit<HTMLAttributes<HTMLButtonElement>, 'onToggle' | 'disabled'>;
+declare const ToggleGroupOption$1: react118.ForwardRefExoticComponent<ToggleGroupOptionProps & react118.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ToggleGroupOption$1 as ToggleGroupOption };

package/dist/organisms/ToggleGroup/ToggleGroupOption.js

@@ -0,0 +1,58 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{shape as n}from"../../atoms/style/index.js";import{forwardRef as r}from"react";import{Icon as i,Typography as a}from"@equinor/eds-core-react";import o from"styled-components";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=o.button`
+  display: flex;
+  align-items: center;
+  padding: calc(${t.medium_small} / 2); // 6px in comfortable
+  > span {
+    color: ${e.text.static_icons__tertiary.rgba};
+    padding: ${t.x_small} calc(${t.medium_small} / 2);
+  }
+  > svg {
+    fill: ${e.text.static_icons__tertiary.rgba};
+  }
+  &:first-child {
+    border-radius: ${n.button.borderRadius} 0 0 ${n.button.borderRadius};
+  }
+
+  &:last-child {
+    border-radius: 0 ${n.button.borderRadius} ${n.button.borderRadius} 0;
+  }
+  &:hover {
+    background: ${e.interactive.table__cell__fill_hover.rgba};
+    > span {
+      color: ${e.text.static_icons__secondary.rgba};
+    }
+    > svg {
+      fill: ${e.text.static_icons__secondary.rgba};
+    }
+  }
+
+  &[aria-checked='true'] {
+    background: ${e.interactive.primary__selected_highlight.rgba};
+    > span {
+      color: ${e.interactive.primary__resting.rgba};
+    }
+    > svg {
+      fill: ${e.interactive.primary__resting.rgba};
+    }
+    &:hover {
+      background: ${e.interactive.primary__selected_hover.rgba};
+      > span {
+        color: ${e.interactive.primary__hover.rgba};
+      }
+      > svg {
+        fill: ${e.interactive.primary__hover.rgba};
+      }
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${e.interactive.disabled__fill.rgba};
+    > span {
+      color: ${e.interactive.disabled__text.rgba};
+    }
+    > svg {
+      fill: ${e.interactive.disabled__text.rgba};
+    }
+  }
+`,u=r(({checked:e,onToggle:t,icon:n,disabled:r,...o},u)=>{let d=()=>{t(!e)};return c(l,{ref:u,"aria-checked":e,onClick:d,disabled:r,...o,children:[n?s(i,{data:n,size:24}):null,`label`in o?s(a,{as:`span`,variant:`button`,group:`navigation`,children:o.label}):null]})});u.displayName=`ToggleGroupOption`;export{u as ToggleGroupOption};

package/dist/organisms/ToggleGroup/index.d.ts

@@ -0,0 +1,10 @@
+import { ToggleGroup } from "./ToggleGroup.js";
+import { ToggleGroupOption } from "./ToggleGroupOption.js";
+
+//#region src/organisms/ToggleGroup/index.d.ts
+type ToggleGroupType = typeof ToggleGroup & {
+  Option: typeof ToggleGroupOption;
+};
+declare const ToggleGroup$1: ToggleGroupType;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

package/dist/organisms/ToggleGroup/index.js

@@ -0,0 +1 @@
+import{ToggleGroupOption as e}from"./ToggleGroupOption.js";import{ToggleGroup as t}from"./ToggleGroup.js";const n=t;n.Option=e;export{n as ToggleGroup};

package/dist/organisms/TopBar/Account/Account.d.ts

@@ -0,0 +1,15 @@
+import { Field } from "../../../atoms/types/Field.js";
+import { FC, ReactElement, ReactNode, RefObject } from "react";
+
+//#region src/organisms/TopBar/Account/Account.d.ts
+interface AccountProps {
+  renderCustomButton?: (buttonRef: RefObject<HTMLButtonElement | null>, handleToggle: () => void) => ReactElement;
+  hideRoles?: boolean;
+  useDisplayNameForRole?: boolean;
+  children?: ReactNode;
+  availableFields?: Field[];
+  availableWells?: string[];
+}
+declare const Account: FC<AccountProps>;
+//#endregion
+export { Account };

package/dist/organisms/TopBar/Account/Account.js

@@ -0,0 +1 @@
+import{EnvironmentType as e}from"../../../atoms/enums/Environment.js";import{environment as t}from"../../../atoms/utils/auth_environment.js";import{useAuth as n}from"../../../providers/AuthProvider/AuthProvider.js";import{Button as r}from"../../../molecules/Button/Button.js";import{TopBarMenu as i}from"../TopBarMenu.js";import{useActiveImpersonationUser as a}from"./ImpersonateMenu/hooks/useActiveImpersonationUser.js";import{useCanImpersonate as o}from"./ImpersonateMenu/hooks/useCanImpersonate.js";import{useMappedRoles as s}from"./ImpersonateMenu/hooks/useMappedRoles.js";import{useStopImpersonation as c}from"./ImpersonateMenu/hooks/useStopImpersonation.js";import{ButtonWrapper as l,Container as u,TextContent as d}from"./Account.styles.js";import{impersonateUserDtoToFullName as f}from"./ImpersonateMenu/Impersonate.utils.js";import{ImpersonateMenu as p}from"./ImpersonateMenu/ImpersonateMenu.js";import{AccountAvatar as m}from"./AccountAvatar.js";import{AccountButton as h}from"./AccountButton.js";import{ActiveUserImpersonationButton as g}from"./ActiveUserImpersonationButton.js";import{ImpersonateButton as _}from"./ImpersonateButton.js";import{RoleChips as v}from"./RoleChips.js";import{RoleList as ee}from"./RoleList.js";import{useCallback as te,useEffect as y,useMemo as b,useRef as x,useState as S}from"react";import{Icon as C,Typography as w}from"@equinor/eds-core-react";import{Fragment as T,jsx as E,jsxs as D}from"react/jsx-runtime";import{log_out as O}from"@equinor/eds-icons";const k=({renderCustomButton:k,hideRoles:A=!1,useDisplayNameForRole:j=!1,children:M,availableFields:N,availableWells:ne})=>{let P=t.getEnvironmentName(import.meta.env.VITE_ENVIRONMENT_NAME),F=t.getApiClientId(import.meta.env.VITE_API_CLIENT_ID),I=t.getAppName(import.meta.env.VITE_NAME),{account:L,roles:R,logout:z}=n(),[B,V]=S(!1),[H,U]=S(!1),W=x(null),{data:G=!0}=o(),{data:K}=a(),{mutate:q}=c(),J=s(K?K.roles:R??[],j),Y=K?f(K):L?.name,X=K?K.uniqueName:L?.username,Z=()=>V(!1),Q=te(()=>{V(e=>!e),U(!1)},[]),$=()=>{U(!0),V(!1)},re=()=>U(!1);y(()=>{K&&K.appName!=null&&K.appName.toUpperCase()!=I.toUpperCase()&&q()},[K,I,q]);let ie=b(()=>k?k(W,Q):null,[k,Q]);return D(T,{children:[ie||E(h,{ref:W,onClick:Q}),D(i,{open:B,title:`Account`,onClose:Z,anchorEl:W.current,children:[D(u,{children:[K&&E(g,{onClick:$}),E(m,{}),D(d,{children:[E(w,{variant:`h6`,children:Y}),E(w,{children:X})]}),J&&!A&&E(T,{children:J.length<=3?E(v,{roles:J}):E(ee,{roles:J})}),M,G&&P!==e.PRODUCTION&&F&&E(_,{onOpenImpersonateMenu:$,onClose:Z})]}),E(l,{children:D(r,{variant:`ghost`,onClick:z,children:[E(C,{data:O}),`Log out`]})})]}),E(p,{open:H,onClose:re,anchorEl:W.current,availableFields:N,availableWells:ne})]})};k.displayName=`TopBar.Account`;export{k as Account};

package/dist/organisms/TopBar/Account/Account.styles.js

@@ -0,0 +1,57 @@
+import{animation as e}from"../../../atoms/style/animation.js";import{colors as t}from"../../../atoms/style/colors.js";import{spacings as n}from"../../../atoms/style/spacings.js";import{shape as r}from"../../../atoms/style/index.js";import{Chip as i}from"../../../molecules/Chip/Chip.js";import a from"styled-components";const o=a.button`
+  border-radius: 50%;
+  padding: 0;
+  outline-offset: ${n.x_small};
+  background: none;
+  cursor: pointer;
+`,s=a.div`
+  padding: ${n.medium} ${n.medium} 0 ${n.medium};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${n.small};
+`,c=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,l=a.div`
+  display: grid;
+  margin-top: ${n.x_large};
+  justify-content: center;
+`,u=a.button`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: ${n.medium_small};
+  width: 100%;
+  padding: ${n.small};
+  border-radius: ${r.button.borderRadius};
+  background: ${t.ui.background__light.rgba};
+  transition: background ${e.transitionMS};
+
+  > span {
+    color: ${t.interactive.primary__resting.rgba};
+  }
+
+  > svg {
+    fill: ${t.interactive.primary__resting.rgba};
+  }
+
+  &:hover {
+    background: ${t.interactive.primary__hover_alt.rgba};
+  }
+`,d=a.section`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 350px;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  gap: ${n.small};
+  margin-top: ${n.small};
+`,f=a(i)`
+  background: ${t.ui.background__light.rgba};
+  border: 1px solid ${t.ui.background__medium.rgba};
+  color: ${t.text.static_icons__default.rgba};
+`;export{l as ButtonWrapper,s as Container,u as OpenImpersonationMenuButton,o as ProfileButton,f as RoleChip,d as RolesContainer,c as TextContent};

package/dist/organisms/TopBar/Account/AccountAvatar.js

@@ -0,0 +1,11 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{useAuth as n}from"../../../providers/AuthProvider/AuthProvider.js";import{Chip as r}from"../../../molecules/Chip/Chip.js";import{ProfileAvatar as i}from"../../../molecules/ProfileAvatar/ProfileAvatar.js";import{useActiveImpersonationUser as a}from"./ImpersonateMenu/hooks/useActiveImpersonationUser.js";import{ImpersonateAvatar as o}from"./ImpersonateAvatar.js";import s from"styled-components";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=s.div`
+  position: relative;
+  margin-bottom: ${t.small};
+`,d=s(r)`
+  position: absolute;
+  bottom: calc(${t.x_small} * -1);
+  left: 50%;
+  transform: translateX(-50%);
+  background: ${e.interactive.warning__resting.rgba};
+  outline-color: ${e.interactive.warning__resting.rgba};
+`,f=()=>{let{account:e,photo:t}=n(),{data:r}=a();return r?l(u,{children:[c(o,{size:64}),c(d,{children:`Impersonating`})]}):c(i,{size:64,name:e?.name,url:t})};export{f as AccountAvatar};

package/dist/organisms/TopBar/Account/AccountButton.js

@@ -0,0 +1,9 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{useAuth as n}from"../../../providers/AuthProvider/AuthProvider.js";import{Chip as r}from"../../../molecules/Chip/Chip.js";import{ProfileAvatar as i}from"../../../molecules/ProfileAvatar/ProfileAvatar.js";import{useActiveImpersonationUser as a}from"./ImpersonateMenu/hooks/useActiveImpersonationUser.js";import{ProfileButton as o}from"./Account.styles.js";import{ImpersonateAvatar as s}from"./ImpersonateAvatar.js";import{forwardRef as c}from"react";import l from"styled-components";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=l.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.xx_small};
+`,p=l(r)`
+  background: ${e.interactive.warning__resting.rgba};
+  outline: none;
+  padding: 0;
+`,m=c(({onClick:e},t)=>{let{account:r,photo:c}=n(),{data:l}=a(),m=l?.roles?.sort()??[];return d(f,{children:[m.at(0)&&u(p,{children:m[0]}),m.length>1&&u(p,{children:`+${m.length-1}`}),u(o,{ref:t,onClick:e,children:l?u(s,{size:36}):u(i,{size:36,name:r?.name,url:c})})]})});m.displayName=`AccountButton`;export{m as AccountButton};

package/dist/organisms/TopBar/Account/ActiveUserImpersonationButton.js

@@ -0,0 +1,11 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{useAuth as n}from"../../../providers/AuthProvider/AuthProvider.js";import{OpenImpersonationMenuButton as r}from"./Account.styles.js";import{Icon as i,Typography as a}from"@equinor/eds-core-react";import o from"styled-components";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{arrow_forward as l,engineering as u}from"@equinor/eds-icons";const d=o.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.x_small};
+  > hr {
+    background: ${e.text.static_icons__tertiary.rgba};
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+  }
+`,f=({onClick:t})=>{let{account:o}=n();return c(r,{onClick:t,children:[s(i,{data:u}),c(d,{children:[s(a,{variant:`breadcrumb`,group:`navigation`,children:o?.name?.split(` `).at(0)}),s(`hr`,{}),s(a,{variant:`breadcrumb`,group:`navigation`,color:e.text.static_icons__tertiary.rgba,children:o?.username})]}),s(i,{data:l})]})};export{f as ActiveUserImpersonationButton};

package/dist/organisms/TopBar/Account/ImpersonateAvatar.js

@@ -0,0 +1,8 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{ProfileAvatar as t}from"../../../molecules/ProfileAvatar/ProfileAvatar.js";import{useActiveImpersonationUser as n}from"./ImpersonateMenu/hooks/useActiveImpersonationUser.js";import r from"styled-components";import{jsx as i}from"react/jsx-runtime";const a=r.div`
+  width: fit-content;
+  border: 2px solid ${e.interactive.warning__resting.rgba};
+  border-radius: 50%;
+  > div:first-child {
+    background: ${e.interactive.warning__text.rgba};
+  }
+`,o=({size:e,fullName:r})=>{let{data:o}=n();return i(a,{children:i(t,{size:e,name:r||o?.firstName})})};export{o as ImpersonateAvatar};

package/dist/organisms/TopBar/Account/ImpersonateButton.js

@@ -0,0 +1,8 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{useActiveImpersonationUser as n}from"./ImpersonateMenu/hooks/useActiveImpersonationUser.js";import{useStopImpersonation as r}from"./ImpersonateMenu/hooks/useStopImpersonation.js";import{OpenImpersonationMenuButton as i}from"./Account.styles.js";import{Button as a,DotProgress as o,Icon as s,Typography as c}from"@equinor/eds-core-react";import l from"styled-components";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{arrow_forward as f,assignment_user as p,do_not_disturb as m}from"@equinor/eds-icons";const h=l(a)`
+  margin-top: ${t.large};
+  width: 100%;
+  height: 48px;
+  svg {
+    fill: ${e.interactive.danger__resting.rgba};
+  }
+`,g=({onOpenImpersonateMenu:e,onClose:t})=>{let{data:a}=n(),{mutateAsync:l,isPending:g}=r(),_=async()=>{await l(),t()};return a&&g?u(h,{variant:`outlined`,color:`danger`,children:u(o,{})}):a?d(h,{variant:`outlined`,color:`danger`,onClick:_,children:[u(s,{data:m}),`End impersonation`]}):d(i,{onClick:e,children:[u(s,{data:p}),u(c,{variant:`button`,group:`navigation`,as:`span`,children:`Impersonate`}),u(s,{data:f})]})};export{g as ImpersonateButton};

package/dist/organisms/TopBar/Account/ImpersonateMenu/Actions.js

@@ -0,0 +1,11 @@
+import{spacings as e}from"../../../../atoms/style/spacings.js";import{useActiveImpersonationUser as t}from"./hooks/useActiveImpersonationUser.js";import{useStartImpersonation as n}from"./hooks/useStartImpersonation.js";import{Button as r,DotProgress as i,Typography as a}from"@equinor/eds-core-react";import o from"styled-components";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${e.medium};
+  padding: ${e.medium};
+  width: 25rem;
+`,u=o.section`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${e.small};
+`,d=({selectedUniqueName:e,onCancel:o})=>{let{data:d}=t(),{mutateAsync:f,isPending:p}=n(),m=async()=>{await f(e),o()};return c(l,{children:[s(a,{variant:`body_short`,children:`By selecting a user to impersonate, you will view the contents of this app as if you would be that user.`}),c(u,{children:[s(r,{variant:`outlined`,onClick:o,children:`Cancel`}),p?s(r,{children:s(i,{})}):s(r,{onClick:m,disabled:e===``||e===d?.uniqueName,children:`Impersonate`})]})]})};export{d as Actions};