@eleventheye/asui 2.5.5 → 2.7.0

package/dist/asnavbar/mobile/styles.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.NavButtonsContainer = exports.ASSelectedBoxMWStyled = exports.NavControlRightButton = exports.NavControlLeftButton = exports.ASIconButtonStyled = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const ASUI_types_1 = require("../../apptypes/ASUI.types");
+const ASIconButton_1 = tslib_1.__importDefault(require("../../asiconbutton/ASIconButton"));
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const icons_1 = require("../../icons");
+const navbaritem_1 = tslib_1.__importDefault(require("../navbaritem"));
+const getNavControlButtonStyle = (0, styled_components_1.css) `
+  pointer-events: all;
+  cursor: pointer;
+
+  &:active {
+    svg > path {
+      fill: rgb(61, 61, 61);
+    }
+  }
+  > @media (hover) {
+    &:hover {
+      svg > path {
+        // fill: rgb(61, 61, 61);
+        stroke: #ffd321;
+        strokewidth: 1px;
+        stroke-width: 1px;
+      }
+    }
+  }
+`;
+exports.ASIconButtonStyled = (0, styled_components_1.default)(ASIconButton_1.default) `
+  margin: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? '0 10px' : size === ASUI_types_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
+  z-index: 1;
+  scale: ${({ size = ASUI_types_1.ComponentSize.Medium }) => size === ASUI_types_1.ComponentSize.Small ? 0.9 : size === ASUI_types_1.ComponentSize.Large ? 0.8 : 0.8};
+`;
+exports.NavControlLeftButton = (0, styled_components_1.default)(icons_1.ArrowLeftIcon) `
+  margin-left: 10px;
+  ${getNavControlButtonStyle}
+  &:hover {
+    &:last-child(svg) > path {
+      fill: rgb(61, 61, 61);
+    }
+  }
+`;
+exports.NavControlRightButton = (0, styled_components_1.default)(icons_1.ArrowRightIcon) `
+  margin-right: 10px;
+  ${getNavControlButtonStyle}
+
+  &:hover {
+    &:last-child(svg) > path {
+      fill: rgb(61, 61, 61);
+    }
+  }
+`;
+exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
+  position: absolute;
+  height: 85%;
+  width: 200px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: ${({ $borderRadius = 4 }) => $borderRadius}px;
+  background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
+  z-index: 0;
+  transition: all 0.3s ease-in-out 0.1s allow-discrete;
+
+  @starting-style {
+    z-index: 0;
+    left: 0;
+  }
+`;
+exports.NavButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: -webkit-fill-available;
+  pointer-events: none;
+  user-select: none;
+  z-index: 10;
+
+  &.ASSmall {
+    height: 30px;
+    font-size: 1.3rem;
+    font-weight: 400;
+    > ${exports.ASSelectedBoxMWStyled} {
+      height: 80%;
+    }
+  }
+
+  &.ASMedium {
+    height: 40px;
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    height: 50px;
+    font-size: 2.1rem;
+    font-weight: 600;
+    > ${exports.ASSelectedBoxMWStyled} {
+      height: 90%;
+    }
+  }
+`;
+exports.ASNavBarItemMWStyled = (0, styled_components_1.default)(navbaritem_1.default) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  text-transform: uppercase;
+  z-index: 1;
+  white-space: nowrap;
+  user-select: none;
+  max-width: 200px;
+  width: -webkit-fill-available;
+  background: transparent;
+  min-width: 200px;
+  padding: 0;
+  margin: 0;
+
+  &.ASSmall {
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+    transition: all 0.3s ease-in-out 0.2s;
+    color: ${theme.navbar.navBarItemColorSelected} !important;
+  `
+    : `color: ${theme.navbar.navBarItemColorSelected};`}
+
+  @media (hover) {
+    &:hover {
+      ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `color: ${theme.navbar.navBarItemColorSelected};`
+    : `cursor: pointer;
+        transition: color 0.3s ease-in-out;
+        color: ${theme.navbar.navBarItemColorSelected};
+        & > div > div > svg > path {
+          stroke-width: 0.4;
+          stroke: ${theme.navbar.navBarItemColorSelected};
+        }
+      `}
+    }
+  }
+`;
+exports.ScrollableNavBarItems = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  width: -webkit-fill-available;
+  overflow: hidden;
+  overflow-x: scroll;
+  margin: 0 50px;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  & > ${exports.ASNavBarItemMWStyled} {
+    scroll-snap-stop: always;
+    scroll-snap-align: center;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+exports.ASNavBarMWStyled = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  width: -webkit-fill-available;
+  max-width: 300px;
+  border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
+  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
+  padding: ${({ $padding = '0 4px' }) => $padding};
+  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
+
+  & ${exports.NavButtonsContainer} {
+    position: fixed;
+    max-width: inherit;
+    height: inherit;
+
+    ${exports.ASSelectedBoxMWStyled} {
+      position: absolute;
+      left: 50px;
+      height: 90%;
+      z-index: 0;
+    }
+  }
+
+  &.ASSmall {
+    height: 30px;
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    height: 40px;
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    height: 50px;
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+`;
+exports.ASNavBarItemPadding = styled_components_1.default.div `
+  padding: 0 4px;
+  pointer-events: none;
+  user-select: none;
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+      & > div > svg > path {
+        stroke-width: 0.4;
+        stroke: ${theme.navbar.navBarItemColorSelected};
+      }`
+    : `
+      & > div > svg > path {
+        stroke-width: 0.4;
+        stroke: ${theme.navbar.navBarItemColor};
+      }
+  `};
+`;

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+import { ASNavBarArrowButtonsProps } from './ASNavBarArrowButtons.types';
+export declare const ASNavBarArrowButtons: React.FC<PropsWithChildren<ASNavBarArrowButtonsProps>>;
+declare const ASLeftNavBarArrowButton: React.FC<ASNavBarArrowButtonsProps>;
+declare const ASRightNavBarArrowButton: React.FC<ASNavBarArrowButtonsProps>;
+export { ASLeftNavBarArrowButton, ASRightNavBarArrowButton, ASNavBarArrowButtons as default };
+//# sourceMappingURL=ASNavBarArrowButtons.d.ts.map

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CA2BvF,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAmBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.ASRightNavBarArrowButton = exports.ASLeftNavBarArrowButton = exports.ASNavBarArrowButtons = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const apptypes_1 = require("../../apptypes");
+const ASNavBar_1 = require("../../asnavbar/ASNavBar");
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const icons_1 = require("../../icons");
+const styles_1 = require("./styles");
+const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => undefined, selectedIndex = 0, totalItemCount = 0, size = apptypes_1.ComponentSize.Medium, styleOptions = ASNavBar_1.defaultNavBarStyleOptions, theme = astheme_1.default, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarArrowButtonsStyled, { className: `${className} ${size}`, theme: theme, styleOptions: styleOptions, children: [(0, jsx_runtime_1.jsx)(ASLeftNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex <= 0 }), (0, jsx_runtime_1.jsx)(ASRightNavBarArrowButton, { onArrowButtonClicked: onArrowButtonClicked, theme: theme, size: size, selectedIndex: selectedIndex, disabled: selectedIndex >= totalItemCount - 1 })] }));
+};
+exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
+exports.default = exports.ASNavBarArrowButtons;
+const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onClick: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+};
+exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
+const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon, onClick: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
+};
+exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent } from 'react';
+import { ASComponentDirection, ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../../apptypes';
+export interface ASNavBarArrowButtonsStyledProps {
+    itemId?: string;
+    displayText?: string;
+    icon?: React.ReactNode;
+    theme?: ASTheme;
+    size?: ASComponentSize;
+    styleOptions?: ASNavBarStyleOptions;
+}
+export type ASNavBarArrowButtonClickFn = (event: MouseEvent, dir: ASComponentDirection) => void;
+export type ASNavBarArrowButtonsProps = {
+    className?: string;
+    theme?: ASTheme;
+    selectedIndex?: number;
+    totalItemCount?: number;
+    onArrowButtonClicked?: ASNavBarArrowButtonClickFn;
+    size?: ASComponentSize;
+    styleOptions?: ASNavBarStyleOptions;
+    disabled?: boolean;
+};
+//# sourceMappingURL=ASNavBarArrowButtons.types.d.ts.map

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtG,MAAM,WAAW,+BAA+B;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAEhG,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/asnavbar/navbararrowbuttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ASNavBarArrowButtons';
+export type { ASNavBarArrowButtonsProps, ASNavBarArrowButtonsStyledProps } from './ASNavBarArrowButtons.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/asnavbar/navbararrowbuttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,YAAY,EAAE,yBAAyB,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/asnavbar/navbararrowbuttons/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ASNavBarArrowButtons_1 = require("./ASNavBarArrowButtons");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ASNavBarArrowButtons_1).default; } });

package/dist/asnavbar/navbararrowbuttons/styles.d.ts

@@ -0,0 +1,42 @@
+import { ASComponentSize, ASTheme } from '../../apptypes';
+import { ASNavBarArrowButtonsStyledProps } from './ASNavBarArrowButtons.types';
+export declare const ASNavBarArrowButtonsStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarArrowButtonsStyledProps>> & string;
+interface ASNavBarIconButtonStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $gap?: number;
+    $maxWidth?: number;
+    $borderRadius?: number;
+    $padding?: string;
+    size?: ASComponentSize;
+}
+export declare const ASIconButtonRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    className?: string;
+    text?: string;
+    selected?: boolean;
+    toggle?: boolean;
+    size?: ASComponentSize;
+    iconSize?: number;
+    theme?: ASTheme;
+    paddingSize?: import("../../apptypes").ASPaddingSize;
+    isLoading?: boolean;
+    icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
+} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
+    children?: import("react").ReactNode | undefined;
+}, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ASIconButtonLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    className?: string;
+    text?: string;
+    selected?: boolean;
+    toggle?: boolean;
+    size?: ASComponentSize;
+    iconSize?: number;
+    theme?: ASTheme;
+    paddingSize?: import("../../apptypes").ASPaddingSize;
+    isLoading?: boolean;
+    icon: import("react").FC<import("react").PropsWithChildren<import("../..").IconProps>>;
+} & import("../..").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
+    children?: import("react").ReactNode | undefined;
+}, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../../asiconbutton").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/navbararrowbuttons/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAwC/E,eAAO,MAAM,0BAA0B,oQA2BtC,CAAC;AAEF,UAAU,6BAA6B;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;qKAMnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;qKAMlC,CAAC"}

package/dist/asnavbar/navbararrowbuttons/styles.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASIconButtonLeftStyled = exports.ASIconButtonRightStyled = exports.ASNavBarArrowButtonsStyled = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const apptypes_1 = require("../../apptypes");
+const asiconbutton_1 = tslib_1.__importDefault(require("../../asiconbutton"));
+const ASNavBar_1 = require("../../asnavbar/ASNavBar");
+const dimensionsForSizes = (0, styled_components_1.css) `
+  &.ASSmall {
+    height: 30px;
+    max-height: 30px;
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    height: 40px;
+    max-height: 40px;
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    height: 50px;
+    max-height: 50px;
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+`;
+const scrollEdgesCover = (0, styled_components_1.css) `
+  content: '';
+  background: #333333;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: 6px;
+`;
+const getWidthBySize = (size) => size === apptypes_1.ComponentSize.Large ? 50 : apptypes_1.ComponentSize.Medium === size ? 40 : 30;
+exports.ASNavBarArrowButtonsStyled = styled_components_1.default.div `
+  position: fixed;
+  position-anchor: --navbarAnchor;
+  left: calc(anchor(left) + 2px);
+  right: calc(anchor(right) - 2px);
+  display: ${({ styleOptions = ASNavBar_1.defaultNavBarStyleOptions }) => styleOptions.$hideNavArrowButtonsInDW ? 'none' : 'flex'};
+  align-items: center;
+  justify-content: space-between;
+  width: -webkit-fill-available;
+  pointer-events: none;
+  user-select: none;
+  z-index: 10;
+
+  &:before {
+    ${scrollEdgesCover}
+    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 8px)`};
+    left: -2px;
+  }
+
+  &:after {
+    ${scrollEdgesCover}
+    width: ${({ size = apptypes_1.ComponentSize.Medium }) => `calc(${getWidthBySize(size)}px + 8px)`};
+    right: -2px;
+  }
+
+  ${dimensionsForSizes}
+`;
+exports.ASIconButtonRightStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
+  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
+  z-index: 1;
+  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
+`;
+exports.ASIconButtonLeftStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
+  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
+  z-index: 1;
+  scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
+`;

package/dist/asnavbar/{ASNavBarItem.d.ts → navbaritem/ASNavBarItem.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ASNavBarItemProps } from './ASNavBar.types';
+import { ASNavBarItemProps } from '../ASNavBar.types';
 declare const ASNavBarItem: React.FC<ASNavBarItemProps>;
 export default ASNavBarItem;
 //# sourceMappingURL=ASNavBarItem.d.ts.map

package/dist/asnavbar/navbaritem/ASNavBarItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/asnavbar/navbaritem/ASNavBarItem.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const apptypes_1 = require("../../apptypes");
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const styles_1 = require("../styles");
+const styles_2 = require("./styles");
+const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
+    const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
+    const navItemWidthRef = (0, react_1.useRef)(0);
+    const navBarItemRef = (0, react_1.useRef)(null);
+    const isNavBarItemSelected = (0, react_1.useRef)(selected);
+    const onItemClickHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onItemClick(e, itemId, itemIndex);
+    };
+    (0, react_1.useEffect)(() => {
+        if (navBarItemRef.current) {
+            navItemWidthRef.current = navBarItemRef.current.getBoundingClientRect().width;
+            setNavSizeInitialized(true);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (navItemSizeInitialized && navBarItemRef.current) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                if (isNavBarItemSelected.current) {
+                    const width = navBarItemRef.current?.getBoundingClientRect().width;
+                    if (navBarItemRef.current && typeof width === 'number' && navItemWidthRef.current !== width) {
+                        navItemWidthRef.current = width;
+                        onItemResized(itemId, navBarItemRef.current);
+                    }
+                }
+            });
+            resizeObserver.observe(navBarItemRef.current);
+            return () => {
+                if (navBarItemRef.current)
+                    resizeObserver.unobserve(navBarItemRef.current);
+            };
+        }
+    }, [navItemSizeInitialized]);
+    (0, react_1.useEffect)(() => {
+        isNavBarItemSelected.current = selected;
+    }, [selected]);
+    return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onClick: onItemClickHandler, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
+};
+exports.default = ASNavBarItem;

package/dist/asnavbar/navbaritem/index.d.ts

@@ -0,0 +1,3 @@
+export type { ASNavBarItemType, ASNavBarOwnProps, ASNavBarProps } from '../ASNavBar.types';
+export { default } from './ASNavBarItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/asnavbar/navbaritem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/asnavbar/navbaritem/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var ASNavBarItem_1 = require("./ASNavBarItem");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(ASNavBarItem_1).default; } });

package/dist/asnavbar/navbaritem/styles.d.ts

@@ -0,0 +1,11 @@
+import { ASTheme } from '../../apptypes/ASUI.types';
+interface ASNavBarItemStyledProps {
+    theme: ASTheme;
+    $mobileMode?: boolean;
+    $selected?: boolean;
+    $margin?: string;
+    $padding?: string;
+}
+export declare const ASNavBarItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarItemStyledProps>> & string;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/asnavbar/navbaritem/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAIpD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,4PAmE9B,CAAC"}

package/dist/asnavbar/navbaritem/styles.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASNavBarItemStyled = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const styles_1 = require("../styles");
+exports.ASNavBarItemStyled = styled_components_1.default.div `
+  font-family: ${({ theme }) => theme.fontFamily};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  transition: color 0.3s ease-in-out 0.1s;
+  text-transform: uppercase;
+  margin: ${({ $margin = '4px 4px' }) => $margin};
+  padding: ${({ $padding = '0 8px' }) => $padding};
+  border-radius: 4px;
+  z-index: 1;
+  white-space: nowrap;
+  user-select: none;
+
+  & > div > div {
+    pointer-events: none;
+    user-select: none;
+    display: flex;
+  }
+
+  &.ASSmall {
+    font-size: 1.3rem;
+    font-weight: 400;
+  }
+
+  &.ASMedium {
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+
+  &.ASLarge {
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+
+  ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `
+    transition: all 0.3s ease-in-out 0.2s;
+    color: ${theme.navbar.navBarItemColorSelected};
+  `
+    : `color: ${theme.navbar.navBarItemColor};`}
+
+  @media (hover) {
+    &:hover {
+      ${({ $selected = false, theme = astheme_1.default }) => $selected
+    ? `color: ${theme.navbar.navBarItemColorSelected};`
+    : `cursor: pointer;
+        transition: color 0.3s ease-in-out;
+        color: ${theme.navbar.navBarItemColorHover};
+        & > div > div > svg > path {
+          stroke-width: 0.4;
+          stroke: ${theme.navbar.navBarItemColorHover};
+        }
+      `}
+    }
+  }
+
+  & ${styles_1.ASNavBarStyled} {
+    min-width: 200px;
+  }
+`;

package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ASNavBarPickPanelProps } from './ASNavBarPickPanel.types';
+declare const ASNavBarPickPanel: React.FC<ASNavBarPickPanelProps>;
+export default ASNavBarPickPanel;
+//# sourceMappingURL=ASNavBarPickPanel.d.ts.map

package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const apptypes_1 = require("../../apptypes");
+const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
+const navbarpickpanelitem_1 = tslib_1.__importDefault(require("../navbarpickpanelitem"));
+const styles_1 = require("./styles");
+const DEFAULT_PADDING = 4;
+const ASNavBarPickPanel = ({ className = '', navItems = [], theme = astheme_1.default, selectedId = '', size = apptypes_1.ComponentSize.Medium, selectedIndex = 0, onItemSelected = () => undefined, }) => {
+    const pickItemsContainerRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        if (pickItemsContainerRef.current && pickItemsContainerRef.current.childElementCount > 0) {
+            pickItemsContainerRef.current.children[selectedIndex].scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'start',
+            });
+        }
+    }, []);
+    const onItemSelectedHandler = (e, itemId, itemIndex) => {
+        onItemSelected(itemId, itemIndex - selectedIndex);
+    };
+    return ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarPickPanelStyled, { theme: theme, className: className, ref: pickItemsContainerRef, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbarpickpanelitem_1.default, { theme: theme, selected: item.itemId === selectedId, itemId: item.itemId, itemIndex: index, displayText: item.displayText, size: size, onItemClick: onItemSelectedHandler }, item.itemId))) }));
+};
+exports.default = ASNavBarPickPanel;