@helsenorge/designsystem-react 0.0.3-dev.6 → 1.0.0-alpha-nye-spacers

package/components/NotificationPanel/componentdata.json

@@ -0,0 +1,227 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Adds inner child elements.",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visual representation of the notification panel.",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"info\" | \"warn\" | \"alert\" | \"crisis\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"info\""
+          },
+          {
+            "value": "\"warn\""
+          },
+          {
+            "value": "\"alert\""
+          },
+          {
+            "value": "\"crisis\""
+          }
+        ]
+      }
+    },
+    "shadow": {
+      "defaultValue": null,
+      "description": "Adds a shadow effect around the notification panel.",
+      "name": "shadow",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "size": {
+      "defaultValue": null,
+      "description": "Sets a fixed size for the content container.",
+      "name": "size",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"small\" | \"medium\" | \"large\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"small\""
+          },
+          {
+            "value": "\"medium\""
+          },
+          {
+            "value": "\"large\""
+          }
+        ]
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "Used in combination with dismissiable property to close the notification panel.",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((e?: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined"
+      }
+    },
+    "dismissable": {
+      "defaultValue": null,
+      "description": "Toggles the close button in the top right corner.",
+      "name": "dismissable",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "fluid": {
+      "defaultValue": null,
+      "description": "Enables a fluid outer container that spans the entire width of parent.",
+      "name": "fluid",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "Sets a label for the notification panel.",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "ariaLabelCloseBtn": {
+      "defaultValue": null,
+      "description": "Close button aria-label",
+      "name": "ariaLabelCloseBtn",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/NotificationPanel/index.d.ts

@@ -0,0 +1,3 @@
+import NotificationPanel from './NotificationPanel';
+export default NotificationPanel;
+//# sourceMappingURL=index.d.ts.map

package/components/NotificationPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/index.js

@@ -0,0 +1,2 @@
+import{a as e}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import a from"react";import{c as o}from"../../index-9b84fabc.js";import{p as n}from"../../palette-f206f488.js";import{I as t,a as i}from"../../constants-d919236e.js";import{u as l}from"../../useHover-57ad4df9.js";import{a as r,A as c,X as s}from"../../AlertSignFill-64bfef57.js";import m from"./styles.module.scss";import"../../_tslib-51c8a283.js";var f={info:a.createElement(t,{svgIcon:function(e){var o=e.isExtraSmall,n=e.isHovered,t=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 10.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),i=a.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 8.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),l=a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 10.61a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"});return o?n?a.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 8.084a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"}):l:n?i:t},color:n.kiwi900,hoverColor:n.kiwi900}),warn:a.createElement(t,{svgIcon:r,color:"black",hoverColor:"black"}),alert:a.createElement(t,{svgIcon:c,color:n.cherry500,hoverColor:n.cherry500}),alertLabel:a.createElement(t,{svgIcon:r,color:n.cherry500,hoverColor:n.cherry500}),crisis:a.createElement(t,{svgIcon:c,color:n.banana200,hoverColor:n.banana200})},v=a.forwardRef((function(r,c){var v,p,d,h=r.children,u=r.variant,_=void 0===u?"info":u,b=r.shadow,E=void 0!==b&&b,C=r.dismissable,w=void 0!==C&&C,g=r.onClick,y=r.label,M=r.fluid,k=void 0!==M&&M,I=r.size,N=r.className,S=l(void 0,w),j=S.hoverRef,H=S.isHovered,L=o(m["notification-panel__close-button"],"crisis"===_?m["notification-panel__close-button--crisis"]:"");var x;return x=a.createElement("div",{ref:c,className:o(m["notification-panel"],m["notification-panel--"+I],m["notification-panel--"+_],(v={},e(v,m["notification-panel--shadow"],!k&&E),e(v,m["notification-panel--haslabel"],!!y&&!h),e(v,m["notification-panel--dismissable"],w),v),N||"")},a.createElement("span",{className:m["notification-panel__icon"]},f["alert"===_&&y&&!h?"alertLabel":_]),a.createElement("section",{"aria-label":function(){if(h){var e="";return a.Children.map(h,(function(a){"string"==typeof a&&(e+=a)})),e}return""}(),className:o(m["notification-panel__content"],(p={},e(p,m["notification-panel__content--crisis"],"crisis"===_),e(p,m["notification-panel__content--haslabel"],!!y&&!h),e(p,m["notification-panel__content--isred"],"alert"===_&&!!y&&!h),p))},y?a.createElement("h1",{className:m["notification-panel__label"],dangerouslySetInnerHTML:{__html:y}}):null,h),w?a.createElement("span",{className:m["notification-panel__action-column"]},a.createElement("button",{className:L,onClick:g,ref:j,"aria-label":null!==(d=r.ariaLabelCloseBtn)&&void 0!==d?d:"Lukk"},a.createElement(t,{svgIcon:s,isHovered:H,size:i.XSmall,color:"crisis"===_?n.white:n.blueberry500,hoverColor:"crisis"===_?n.white:n.blueberry700}))):null),k?a.createElement("div",{className:o(m["notification-panel__fluidwrapper"],m["notification-panel__fluidwrapper--"+_],e({},m["notification-panel__fluidwrapper--shadow"],E))},x):x}));export default v;
+//# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/NotificationPanel/styles.module.scss

@@ -0,0 +1,189 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_palette.scss';
+@import '../AnchorLink/styles.module.scss';
+
+.notification-panel {
+  display: grid;
+  width: inherit;
+  padding: $spacer;
+  grid-template-areas: 'icon' 'content';
+  grid-template-columns: 48px auto;
+  grid-template-rows: 1fr;
+
+  &--dismissable {
+    grid-template-areas: 'icon' 'content' 'action';
+    grid-template-columns: 48px auto 48px;
+  }
+  &--small {
+    max-width: map-get($grid-breakpoints, sm);
+  }
+  &--medium {
+    max-width: map-get($grid-breakpoints, md);
+  }
+  &--large {
+    max-width: map-get($grid-breakpoints, lg);
+  }
+  &--info {
+    background-color: $kiwi50;
+  }
+  &--warn {
+    background-color: $banana50;
+  }
+  &--alert {
+    background-color: $cherry100;
+  }
+  &--crisis {
+    background-color: $black;
+  }
+  &--shadow {
+    box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
+  }
+  &--haslabel {
+    padding: getSpacer(l) $spacer;
+  }
+
+  &__fluidwrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &--info {
+      background-color: $kiwi50;
+    }
+    &--warn {
+      background-color: $banana50;
+    }
+    &--alert {
+      background-color: $cherry100;
+    }
+    &--crisis {
+      background-color: $black;
+    }
+    &--shadow {
+      box-shadow: 0 0.3rem getSpacer(2xs) -0.1rem rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  &__icon {
+    grid-area: 'icon';
+  }
+
+  &__content {
+    grid-area: 'content';
+    margin: getSpacer(2xs) getSpacer(m);
+
+    p {
+      margin: 0;
+    }
+
+    a {
+      @include anchorlink;
+      @include anchorlink-icon;
+    }
+
+    &--crisis {
+      color: $banana200;
+      a {
+        color: $white;
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.2);
+          color: $white;
+        }
+        &:focus {
+          background-color: $white;
+          color: $black;
+          border-color: $white;
+        }
+        &[target='_blank'] {
+          &:after {
+            content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38px' height='38px' viewBox='0 0 48 48' fill='%23bdbab9'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
+          }
+
+          &:focus {
+            &:after {
+              content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
+            }
+          }
+        }
+      }
+    }
+
+    &--isred {
+      color: $cherry500;
+    }
+
+    &--haslabel {
+      display: flex;
+      align-items: center;
+      margin: 0 1rem;
+    }
+  }
+
+  &__label {
+    font-size: $font-size-sm;
+    line-height: getSpacer(m);
+    font-weight: 600;
+    margin: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+      line-height: $lineheight-size-md;
+    }
+  }
+
+  &__action-column {
+    grid-area: 'action';
+  }
+
+  &__close-button {
+    display: flex;
+    position: relative;
+    background: transparent;
+    border: 2px solid $blueberry600;
+    padding: 0;
+    justify-content: center;
+    outline: none;
+    cursor: pointer;
+    &:before {
+      content: ' ';
+      position: absolute;
+      top: -getSpacer(3xs);
+      left: -getSpacer(3xs);
+      right: -getSpacer(3xs);
+      bottom: -getSpacer(3xs);
+      border: 2px solid transparent;
+    }
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: -0.375rem;
+      left: -0.375rem;
+      right: -0.375rem;
+      bottom: -0.375rem;
+      border: 2px solid transparent;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: rgba(8, 102, 124, 0.05);
+      border-color: transparent;
+      &:after {
+        border-color: $blueberry700;
+      }
+    }
+
+    &--crisis {
+      border-color: $white;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: transparent;
+        &:after {
+          border-color: $white;
+        }
+      }
+    }
+  }
+}

package/components/NotificationPanel/styles.module.scss.d.ts

@@ -0,0 +1,36 @@
+export type Styles = {
+  anchorlink: string;
+  anchorlink__icon: string;
+  'notification-panel': string;
+  'notification-panel__action-column': string;
+  'notification-panel__close-button': string;
+  'notification-panel__close-button--crisis': string;
+  'notification-panel__content': string;
+  'notification-panel__content--crisis': string;
+  'notification-panel__content--haslabel': string;
+  'notification-panel__content--isred': string;
+  'notification-panel__fluidwrapper': string;
+  'notification-panel__fluidwrapper--alert': string;
+  'notification-panel__fluidwrapper--crisis': string;
+  'notification-panel__fluidwrapper--info': string;
+  'notification-panel__fluidwrapper--shadow': string;
+  'notification-panel__fluidwrapper--warn': string;
+  'notification-panel__icon': string;
+  'notification-panel__label': string;
+  'notification-panel--alert': string;
+  'notification-panel--crisis': string;
+  'notification-panel--dismissable': string;
+  'notification-panel--haslabel': string;
+  'notification-panel--info': string;
+  'notification-panel--large': string;
+  'notification-panel--medium': string;
+  'notification-panel--shadow': string;
+  'notification-panel--small': string;
+  'notification-panel--warn': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SliderProps {
+    /**	Sets the title of the slider. */
+    title?: string;
+    /** Adds the left hand label to the element. */
+    labelLeft?: string;
+    /** Adds the right hand label to the element. */
+    labelRight?: string;
+    /**	Decides the number of steps for each movement of the slider. */
+    step?: number;
+    /** Disables the slider element. */
+    disabled?: boolean;
+    /** Function to be called when the value state has changed. */
+    onChange?: (value: number) => void;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

package/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqB3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,MAAM,iFA+IjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Slider/SliderUtils.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/
+export declare const stopEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Henter ut x posisjon til MouseEvent eller TouchEvent e */
+export declare const getMousePosition: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => number;
+/** Henter ut width basert på viewport posisjon til parameter elementet el som sendes inn */
+export declare const getElementWidth: (el: HTMLDivElement | null) => number;
+/** Returnerer en boolean på om innsendte event e er en TouchEvent */
+export declare const isTouchEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateSliderPositionBasedOnValue: (value: number, trackerWidth: number, sliderWidth: number, min: number, max: number) => number;
+/** Kalkulerer verdi basert på sliderPosition som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateValueBasedOnSliderPosition: (sliderPosition: number, trackerWidth: number, sliderWidth: number, step: number, min: number, max: number) => number;
+/** Kalkulerer modifisert value basert på step parameteret,
+ * med hensyn til max verdi til slideren.
+ * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */
+export declare const alignValue: (value: number, step: number, max: number) => number;
+/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,
+ *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til
+ *  slider - sliderWidth. */
+export declare const calculateChangeOfPosition: (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number) => number;
+/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og
+ *  bredden til slider - sliderWidth */
+export declare const calculateSliderTranslate: (xPos: number, sliderElement: HTMLDivElement | null, sliderWidth: number, cb: (a: number) => void) => void;
+/** Legger til mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const addMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Fjerner mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const removeMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Legger til touchmove og touchend event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const addTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+/** Fjerner touchmove og touchup event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const removeTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+//# sourceMappingURL=SliderUtils.d.ts.map

package/components/Slider/SliderUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderUtils.tsx"],"names":[],"mappings":";AAAA,qFAAqF;AACrF,eAAO,MAAM,SAAS,uHAIrB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,sHAM5B,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,eAAe,uCAG3B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,uHAYxB,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,gGAU/C,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,uHAY/C,CAAC;AAEF;;gEAEgE;AAChE,eAAO,MAAM,UAAU,sDAatB,CAAC;AAEF;;4BAE4B;AAC5B,eAAO,MAAM,yBAAyB,yFASrC,CAAC;AAEF;uCACuC;AACvC,eAAO,MAAM,wBAAwB,4GAUpC,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,8FAG7B,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,8FAGhC,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,8FAG7B,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,8FAGhC,CAAC"}

package/components/Slider/componentdata.json

@@ -0,0 +1,118 @@
+{
+  "props": {
+    "title": {
+      "defaultValue": null,
+      "description": "Sets the title of the slider.",
+      "name": "title",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "labelLeft": {
+      "defaultValue": null,
+      "description": "Adds the left hand label to the element.",
+      "name": "labelLeft",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "labelRight": {
+      "defaultValue": null,
+      "description": "Adds the right hand label to the element.",
+      "name": "labelRight",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "step": {
+      "defaultValue": null,
+      "description": "Decides the number of steps for each movement of the slider.",
+      "name": "step",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the slider element.",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onChange": {
+      "defaultValue": null,
+      "description": "Function to be called when the value state has changed.",
+      "name": "onChange",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((value: number) => void)"
+      }
+    }
+  }
+}

package/components/Slider/index.d.ts

@@ -0,0 +1,3 @@
+import Slider from './Slider';
+export default Slider;
+//# sourceMappingURL=index.d.ts.map

package/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,eAAe,MAAM,CAAC"}