@eleventheye/asui 2.7.1 → 2.7.3

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.
Files changed (32) hide show
  1. package/dist/apptypes/ASUI.types.d.ts +1 -0
  2. package/dist/apptypes/ASUI.types.d.ts.map +1 -1
  3. package/dist/asiconbutton/ASIconButton.d.ts.map +1 -1
  4. package/dist/asiconbutton/ASIconButton.js +28 -5
  5. package/dist/asiconbutton/styles.d.ts.map +1 -1
  6. package/dist/asiconbutton/styles.js +20 -3
  7. package/dist/asnavbar/ASNavBar.types.d.ts +2 -2
  8. package/dist/asnavbar/ASNavBar.types.d.ts.map +1 -1
  9. package/dist/asnavbar/desktop/ASNavBarDW.d.ts.map +1 -1
  10. package/dist/asnavbar/desktop/ASNavBarDW.js +15 -1
  11. package/dist/asnavbar/desktop/styles.js +3 -3
  12. package/dist/asnavbar/mobile/ASNavBarMW.d.ts.map +1 -1
  13. package/dist/asnavbar/mobile/ASNavBarMW.js +10 -2
  14. package/dist/asnavbar/mobile/styles.d.ts +1 -27
  15. package/dist/asnavbar/mobile/styles.d.ts.map +1 -1
  16. package/dist/asnavbar/mobile/styles.js +2 -89
  17. package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.d.ts.map +1 -1
  18. package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.js +2 -2
  19. package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts +2 -2
  20. package/dist/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.d.ts.map +1 -1
  21. package/dist/asnavbar/navbararrowbuttons/styles.d.ts.map +1 -1
  22. package/dist/asnavbar/navbararrowbuttons/styles.js +2 -2
  23. package/dist/asnavbar/navbaritem/ASNavBarItem.d.ts.map +1 -1
  24. package/dist/asnavbar/navbaritem/ASNavBarItem.js +21 -1
  25. package/dist/asnavbar/navbaritem/styles.d.ts.map +1 -1
  26. package/dist/asnavbar/navbaritem/styles.js +1 -0
  27. package/dist/asnavbar/navbarpickpanel/ASNavBarPickPanel.d.ts.map +1 -1
  28. package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.d.ts.map +1 -1
  29. package/dist/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.js +21 -1
  30. package/dist/astheme/ASThemeDefault.d.ts.map +1 -1
  31. package/dist/astheme/ASThemeDefault.js +7 -6
  32. package/package.json +1 -1
@@ -195,6 +195,7 @@ export interface ASTheme {
195
195
  fontWeight: string;
196
196
  fontFamilyFallback: string;
197
197
  }
198
+ export type ASDebounceState = 'Down' | 'Up' | 'None';
198
199
  export declare const DisplayMode: {
199
200
  readonly None: "none";
200
201
  readonly Mobile: "mobile";
@@ -1 +1 @@
1
- {"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ASUI.types.d.ts","sourceRoot":"","sources":["../../src/apptypes/ASUI.types.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmE7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ASIconButton.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/ASIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -7,14 +7,37 @@ const ASUI_types_1 = require("../apptypes/ASUI.types");
7
7
  const astheme_1 = tslib_1.__importDefault(require("../astheme"));
8
8
  const styles_1 = require("./styles");
9
9
  const ASIconButton = ({ className = '', onClick = () => undefined, selected = false, toggle = false, size = ASUI_types_1.ComponentSize.Medium, iconSize = size === ASUI_types_1.ComponentSize.Small ? 24 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 40, paddingSize = [ASUI_types_1.ComponentSize.Medium, ASUI_types_1.ComponentSize.Medium], disabled = false, isLoading = false, icon: Icon, theme = astheme_1.default, strokeWidth = 1, strokeColor = astheme_1.default.button.buttonBg, fillColor = astheme_1.default.button.buttonColor, color = astheme_1.default.button.buttonColor, text, id, style, ...props }) => {
10
+ const tapDebounceRef = (0, react_1.useRef)('None');
10
11
  const [isSelected, setIsSelected] = (0, react_1.useState)(selected);
11
12
  (0, react_1.useEffect)(() => {
12
13
  setIsSelected(selected);
13
14
  }, [selected]);
14
- const onClickHandler = (e) => {
15
- if (toggle)
16
- setIsSelected(!isSelected);
17
- onClick(e);
15
+ const clsR = 'background: crimson; color: #000000; border-radius: 10px;';
16
+ const clsY = 'background: goldenrod; color: #000000; border-radius: 10px;';
17
+ const clsG = 'background: forestgreen; color: #000000; border-radius: 10px;';
18
+ const onTap = (e) => {
19
+ if (tapDebounceRef.current === 'None') {
20
+ tapDebounceRef.current = 'Down';
21
+ console.log(`%c ${tapDebounceRef.current} %c`, clsR, '');
22
+ const btnEl = e.currentTarget;
23
+ btnEl.ariaPressed = 'true';
24
+ if (toggle)
25
+ setIsSelected(!isSelected);
26
+ onClick(e);
27
+ btnEl.releasePointerCapture(e.pointerId);
28
+ }
29
+ };
30
+ const onTapRelease = (e) => {
31
+ if (tapDebounceRef.current === 'Down') {
32
+ tapDebounceRef.current = 'Up';
33
+ const btnEl = e.currentTarget;
34
+ console.log(`%c ${tapDebounceRef.current} %c`, clsY, '');
35
+ setTimeout(() => {
36
+ btnEl.ariaPressed = 'false';
37
+ tapDebounceRef.current = 'None';
38
+ console.log(`%c ${tapDebounceRef.current} %c`, clsG, '');
39
+ }, 400);
40
+ }
18
41
  };
19
42
  const onEnableDisableHandler = (node) => {
20
43
  if (node) {
@@ -26,6 +49,6 @@ const ASIconButton = ({ className = '', onClick = () => undefined, selected = fa
26
49
  }
27
50
  }
28
51
  };
29
- return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, onClick: onClickHandler, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsx)(Icon, { iconSize: iconSize, fillColor: fillColor, color: strokeColor, strokeWidth: strokeWidth }) }));
52
+ return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { theme: theme, role: "button", ref: onEnableDisableHandler, size: size, "aria-disabled": isLoading ? 'true' : disabled.toString(), className: `${className} ${size} ${isSelected ? 'Selected' : ''}`, onPointerUp: onTapRelease, onPointerDown: onTap, style: style, id: id, ...props, children: (0, jsx_runtime_1.jsx)(Icon, { iconSize: iconSize, fillColor: fillColor, color: strokeColor, strokeWidth: strokeWidth }) }));
30
53
  };
31
54
  exports.default = ASIconButton;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA6KnF,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asiconbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,kBAAkB;WAAuB,OAAO;UAAQ,eAAe;YA8LnF,CAAC"}
@@ -10,7 +10,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
10
10
  aspect-ratio: 1;
11
11
  cursor: pointer;
12
12
  white-space: nowrap;
13
- transition: all 0.25s ease-in-out;
13
+ transition: all 0.15s ease-in-out;
14
14
  position: relative;
15
15
  display: inline-block;
16
16
  border-radius: 75px;
@@ -21,6 +21,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
21
21
  text-transform: uppercase;
22
22
  text-align: center;
23
23
  -webkit-tap-highlight-color: transparent;
24
+ pointer-events: auto;
24
25
 
25
26
  &.ASLarge,
26
27
  &.ASMedium,
@@ -57,6 +58,7 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
57
58
  &.ASSmall {
58
59
  font-size: 1rem;
59
60
  line-height: 1.875rem;
61
+ min-height: 30px;
60
62
  & > div > :last-child(svg) {
61
63
  min-height: 24px;
62
64
  max-height: 24px;
@@ -100,10 +102,12 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
100
102
  }
101
103
 
102
104
  &:active,
105
+ &:focus,
103
106
  &.Selected {
104
- &:not([aria-disabled='true']) {
107
+ &:not([aria-disabled='true'])&:not([aria-pressed='false']) {
105
108
  user-select: none;
106
109
  background: ${({ theme }) => theme.button.buttonGradientUp};
110
+ box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
107
111
  color: transparent;
108
112
  text-shadow: none;
109
113
  }
@@ -152,12 +156,25 @@ exports.ASIconButtonStyled = styled_components_1.default.div `
152
156
  text-shadow: none;
153
157
  }
154
158
  }
159
+
160
+ &:active,
161
+ &.Selected {
162
+ &:not([aria-disabled='true']),
163
+ &:is([aria-pressed='true']) {
164
+ box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
165
+ }
166
+ }
155
167
  }
156
168
 
169
+ &:focus,
157
170
  &:active,
158
171
  &.Selected {
159
- &:not([aria-disabled='true']) {
172
+ &:is([aria-pressed='true']) {
160
173
  box-shadow: ${({ theme, size }) => theme.button[`buttonShadowActive${size}`]};
174
+ -webkit-tap-highlight-color: grey;
175
+ & > div {
176
+ scale: 0.95;
177
+ }
161
178
  }
162
179
  }
163
180
 
@@ -1,4 +1,4 @@
1
- import { MouseEvent, PropsWithChildren } from 'react';
1
+ import { PointerEvent, PropsWithChildren } from 'react';
2
2
  import { ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../apptypes';
3
3
  export type ASNavBarItemType = {
4
4
  itemId: string;
@@ -17,7 +17,7 @@ export type ASNavBarItemProps = {
17
17
  itemIndex?: number;
18
18
  size?: ASComponentSize;
19
19
  title?: string;
20
- onItemClick?: (e: MouseEvent, id: string, index: number) => void;
20
+ onItemClick?: (e: PointerEvent, id: string, index: number) => void;
21
21
  onItemResized?: (id: string, element: HTMLDivElement) => void;
22
22
  };
23
23
  export type ASNavBarOwnProps = {
@@ -1 +1 @@
1
- {"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
1
+ {"version":3,"file":"ASNavBar.types.d.ts","sourceRoot":"","sources":["../../src/asnavbar/ASNavBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4HvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"ASNavBarDW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/desktop/ASNavBarDW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAQ9D,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4IvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -13,12 +13,14 @@ const styles_1 = require("./styles");
13
13
  const INIT_VALUE = (0, uuid_1.v4)();
14
14
  const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', navItems = [], selectedItemId = '', onItemSelected = () => undefined, theme = astheme_1.default, size = ASUI_types_1.ComponentSize.Medium, styleOptions = { ...ASNavBar_1.defaultNavBarStyleOptions }, }) => {
15
15
  const selectedItemIdRef = (0, react_1.useRef)(INIT_VALUE);
16
+ const selectedItemElRef = (0, react_1.useRef)(null);
16
17
  const navBarRef = (0, react_1.useRef)(null);
17
18
  const navBarHighlightBoxRef = (0, react_1.useRef)(null);
18
19
  const [selected, setSelected] = (0, react_1.useState)(selectedItemId);
19
20
  const slideHighlightToSelectedItem = (selectedItemEl, itemId) => {
20
21
  if (!navBarHighlightBoxRef.current || !navBarRef.current)
21
22
  return;
23
+ selectedItemElRef.current = selectedItemEl;
22
24
  const selectedElRect = selectedItemEl.getBoundingClientRect();
23
25
  const parentRect = navBarRef.current.getBoundingClientRect();
24
26
  const offsetToSelectedEl = selectedElRect.left - parentRect.left;
@@ -34,6 +36,18 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
34
36
  inline: 'center',
35
37
  });
36
38
  };
39
+ const onScrollEndHandler = () => {
40
+ if (!navBarHighlightBoxRef.current || !navBarRef.current || !selectedItemElRef.current)
41
+ return;
42
+ const selectedItemEl = selectedItemElRef.current;
43
+ const selectedElRect = selectedItemEl.getBoundingClientRect();
44
+ const parentRect = navBarRef.current.getBoundingClientRect();
45
+ const offsetToSelectedEl = selectedElRect.left - parentRect.left;
46
+ const selectedBox = navBarHighlightBoxRef.current;
47
+ const selectedBoxWidth = selectedElRect.width;
48
+ selectedBox.style.transform = `translateX(${offsetToSelectedEl}px)`;
49
+ selectedBox.style.width = `${selectedBoxWidth}px`;
50
+ };
37
51
  const locateSelectedItemInDOM = (selectedId) => {
38
52
  const selectedItemEl = document.getElementById(selectedId);
39
53
  if (selectedItemEl) {
@@ -82,6 +96,6 @@ const ASNavBarDW = ({ id = `asnavbar-dw-${(0, uuid_1.v4)()}`, className = '', na
82
96
  };
83
97
  const onItemResizedHandler = (itemId, item) => slideHighlightToSelectedItem(item, itemId);
84
98
  const isSelected = (itemId) => selected === itemId;
85
- return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
99
+ return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarDWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ASScrollContainerStyled, { onScrollEnd: onScrollEndHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(navbaritem_1.default, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, onItemResized: onItemResizedHandler, onItemClick: onItemSelectedHandler, size: size }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { onArrowButtonClicked: scrollToDirection, className: styles_1.ASNavButtonsDWContainer, theme: theme, size: size, totalItemCount: totalItemCount, selectedIndex: selectedIndex, styleOptions: styleOptions })] }));
86
100
  };
87
101
  exports.default = ASNavBarDW;
@@ -50,8 +50,8 @@ exports.ASSelectedBoxStyled = styled_components_1.default.span `
50
50
  background-color: ${({ theme }) => theme.navbar.navBarSelectedBoxBackgroundColor};
51
51
  z-index: 0;
52
52
  left: 0;
53
- will-change: width, transform;
54
- transition: all 0.25s ease-in-out 0.1s allow-discrete;
53
+ // will-change: width, transform;
54
+ transition: all 0.25s ease-in-out 0.01s allow-discrete;
55
55
 
56
56
  @starting-style {
57
57
  z-index: 0;
@@ -64,7 +64,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
64
64
  justify-content: center;
65
65
  flex-wrap: nowrap;
66
66
  flex-direction: row;
67
- transition: color 0.3s ease-in-out 0.1s;
67
+ transition: color 0.3s ease-in-out 0.01s;
68
68
  text-transform: uppercase;
69
69
  margin: ${({ $margin = '4px 0' }) => $margin};
70
70
  padding: ${({ $padding = '0 8px' }) => $padding};
@@ -1 +1 @@
1
- {"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAOzF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0KvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"ASNavBarMW.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/ASNavBarMW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAM3F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoKvC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -7,8 +7,8 @@ const uuid_1 = require("uuid");
7
7
  const ASUI_types_1 = require("../../apptypes/ASUI.types");
8
8
  const asmodal_1 = tslib_1.__importDefault(require("../../asmodal"));
9
9
  const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
10
- const icons_1 = require("../../icons");
11
10
  const ASNavBar_1 = require("../ASNavBar");
11
+ const navbararrowbuttons_1 = tslib_1.__importDefault(require("../navbararrowbuttons"));
12
12
  const navbarpickpanel_1 = tslib_1.__importDefault(require("../navbarpickpanel"));
13
13
  const styles_1 = require("./styles");
14
14
  const INIT_VALUE = (0, uuid_1.v4)();
@@ -93,6 +93,14 @@ const ASNavBarMW = ({ id = `asnavbar-mw-${(0, uuid_1.v4)()}`, className = '', na
93
93
  }
94
94
  }
95
95
  };
96
- return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsxs)(styles_1.NavButtonsContainer, { ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onMouseOver: (e) => { }, onClick: selectPrev, theme: theme, size: size, disabled: selectedIndex <= 0, id: "LeftButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }), (0, jsx_runtime_1.jsx)(styles_1.ASIconButtonStyled, { icon: icons_1.ArrowRightIcon, id: "RightButtonId", iconSize: size === ASUI_types_1.ComponentSize.Large ? 32 : size === ASUI_types_1.ComponentSize.Medium ? 28 : 24, size: size, fillColor: theme.button.buttonIconColor, disabled: selectedIndex >= navItems.length - 1, onClick: selectNext })] }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
96
+ const onButtonsPressed = (e, direction) => {
97
+ if (direction === ASUI_types_1.ArrowButtonDirection.Left) {
98
+ selectPrev(e);
99
+ }
100
+ else {
101
+ selectNext(e);
102
+ }
103
+ };
104
+ return ((0, jsx_runtime_1.jsxs)(styles_1.ASNavBarMWStyled, { id: id, ref: navBarRef, className: `${className} ${size}`, theme: theme, ...styleOptions, children: [(0, jsx_runtime_1.jsx)(styles_1.ASSelectedBoxMWStyled, { ref: navBarHighlightBoxRef, theme: theme }), (0, jsx_runtime_1.jsx)(styles_1.ScrollableNavBarItems, { id: "ScrollableNavBarItems", ref: scrollContainerRef, onScrollEnd: onScrollEndedHandler, children: navItems.map((item, index) => ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarItemMWStyled, { theme: theme, itemId: item.itemId, selected: isSelected(item.itemId), displayText: item.displayText, icon: item.icon, size: size, title: item.displayText, onItemClick: () => setShowSelectionPanel(true) }, `key_${index}_${item.itemId}`))) }), (0, jsx_runtime_1.jsx)(navbararrowbuttons_1.default, { ...styleOptions, onArrowButtonClicked: onButtonsPressed, theme: theme, size: size, totalItemCount: navItems.length, selectedIndex: selectedIndex, styleOptions: styleOptions }), (0, jsx_runtime_1.jsx)(asmodal_1.default, { isOpen: showSelectionPanel, onBackdropClick: () => setShowSelectionPanel(false), className: className, children: (0, jsx_runtime_1.jsx)(navbarpickpanel_1.default, { theme: theme, size: size, className: className, navItems: navItems, selectedId: selected, selectedIndex: selectedIndex, onItemSelected: onNavBarItemPickedHandler }) })] }));
97
105
  };
98
106
  exports.default = ASNavBarMW;
@@ -1,29 +1,4 @@
1
- import { ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
2
- interface ASNavBarIconButtonStyledProps {
3
- theme: ASTheme;
4
- $mobileMode?: boolean;
5
- $gap?: number;
6
- $maxWidth?: number;
7
- $borderRadius?: number;
8
- $padding?: string;
9
- size?: ASComponentSize;
10
- }
11
- export declare const ASIconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
12
- className?: string;
13
- text?: string;
14
- selected?: boolean;
15
- toggle?: boolean;
16
- size?: ASComponentSize;
17
- iconSize?: number;
18
- theme?: ASTheme;
19
- paddingSize?: import("../../apptypes/ASUI.types").ASPaddingSize;
20
- isLoading?: boolean;
21
- icon: import("react").FC<import("react").PropsWithChildren<import("../../icons").IconProps>>;
22
- } & import("../../icons").IconProps & Omit<import("react").HTMLProps<HTMLDivElement>, "size"> & {
23
- children?: import("react").ReactNode | undefined;
24
- }, ASNavBarIconButtonStyledProps>> & string & Omit<import("react").FC<import("../..").ASIconButtonProps>, keyof import("react").Component<any, {}, any>>;
25
- export declare const NavControlLeftButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
26
- export declare const NavControlRightButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../icons").IconProps, never>> & string & Omit<import("react").FC<import("../../icons").IconProps>, keyof import("react").Component<any, {}, any>>;
1
+ import { ASNavBarStyleOptions, ASTheme } from '../../apptypes/ASUI.types';
27
2
  interface ASNavBarSelectedBoxStyledProps {
28
3
  theme: ASTheme;
29
4
  $mobileMode?: boolean;
@@ -42,7 +17,6 @@ interface ASNavBarStyledProps extends ASNavBarStyleOptions {
42
17
  $borderRadius?: number;
43
18
  $padding?: string;
44
19
  }
45
- export declare const NavButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ASNavBarStyledProps>> & string;
46
20
  interface ASNavBarItemStyledProps {
47
21
  theme: ASTheme;
48
22
  $mobileMode?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,OAAO,EAAiB,MAAM,2BAA2B,CAAC;AA+C1G,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,kBAAkB;;;;;;;;;;;;;wJAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,sQAQhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,sQASjC,CAAC;AAEF,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,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;CACnB;AAED,eAAO,MAAM,mBAAmB,wPA0B/B,CAAC;AAEF,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,oBAAoB,iUAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPA+B5B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/mobile/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAwB1E,UAAU,8BAA8B;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,eAAO,MAAM,qBAAqB,qQAgBjC,CAAC;AAEF,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,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;CACnB;AAED,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,oBAAoB,iUAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NA0BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,wPAkB5B,CAAC;AAEF,UAAU,wBAAwB;IAChC,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,6PAiB/B,CAAC"}
@@ -1,33 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.NavButtonsContainer = exports.ASSelectedBoxMWStyled = exports.NavControlRightButton = exports.NavControlLeftButton = exports.ASIconButtonStyled = void 0;
3
+ exports.ASNavBarItemPadding = exports.ASNavBarMWStyled = exports.ScrollableNavBarItems = exports.ASNavBarItemMWStyled = exports.ASSelectedBoxMWStyled = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const styled_components_1 = tslib_1.__importStar(require("styled-components"));
6
- const ASUI_types_1 = require("../../apptypes/ASUI.types");
7
- const ASIconButton_1 = tslib_1.__importDefault(require("../../asiconbutton/ASIconButton"));
8
6
  const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
9
- const icons_1 = require("../../icons");
10
7
  const navbaritem_1 = tslib_1.__importDefault(require("../navbaritem"));
11
- const getNavControlButtonStyle = (0, styled_components_1.css) `
12
- pointer-events: all;
13
- cursor: pointer;
14
-
15
- &:active {
16
- svg > path {
17
- fill: rgb(61, 61, 61);
18
- }
19
- }
20
- > @media (hover) {
21
- &:hover {
22
- svg > path {
23
- // fill: rgb(61, 61, 61);
24
- stroke: #ffd321;
25
- strokewidth: 1px;
26
- stroke-width: 1px;
27
- }
28
- }
29
- }
30
- `;
31
8
  const dimensionsForSizes = (0, styled_components_1.css) `
32
9
  &.ASSmall {
33
10
  height: 30px;
@@ -47,30 +24,6 @@ const dimensionsForSizes = (0, styled_components_1.css) `
47
24
  font-weight: 500;
48
25
  }
49
26
  `;
50
- exports.ASIconButtonStyled = (0, styled_components_1.default)(ASIconButton_1.default) `
51
- 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'};
52
- z-index: 1;
53
- 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};
54
- `;
55
- exports.NavControlLeftButton = (0, styled_components_1.default)(icons_1.ArrowLeftIcon) `
56
- margin-left: 10px;
57
- ${getNavControlButtonStyle}
58
- &:hover {
59
- &:last-child(svg) > path {
60
- fill: rgb(61, 61, 61);
61
- }
62
- }
63
- `;
64
- exports.NavControlRightButton = (0, styled_components_1.default)(icons_1.ArrowRightIcon) `
65
- margin-right: 10px;
66
- ${getNavControlButtonStyle}
67
-
68
- &:hover {
69
- &:last-child(svg) > path {
70
- fill: rgb(61, 61, 61);
71
- }
72
- }
73
- `;
74
27
  exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
75
28
  position: absolute;
76
29
  height: ${({ $height = 85, $heightUnit = '%' }) => `${$height}${$heightUnit}`};
@@ -88,33 +41,6 @@ exports.ASSelectedBoxMWStyled = styled_components_1.default.span `
88
41
  left: 0;
89
42
  }
90
43
  `;
91
- exports.NavButtonsContainer = styled_components_1.default.div `
92
- display: flex;
93
- align-items: center;
94
- justify-content: space-between;
95
- width: -webkit-fill-available;
96
- pointer-events: none;
97
- user-select: none;
98
- z-index: 10;
99
-
100
- &.ASSmall {
101
- height: 30px;
102
- > ${exports.ASSelectedBoxMWStyled} {
103
- height: 80%;
104
- }
105
- }
106
-
107
- &.ASMedium {
108
- height: 40px;
109
- }
110
-
111
- &.ASLarge {
112
- height: 50px;
113
- > ${exports.ASSelectedBoxMWStyled} {
114
- height: 90%;
115
- }
116
- }
117
- `;
118
44
  exports.ASNavBarItemMWStyled = (0, styled_components_1.default)(navbaritem_1.default) `
119
45
  display: flex;
120
46
  align-items: center;
@@ -207,25 +133,12 @@ exports.ASNavBarMWStyled = styled_components_1.default.div `
207
133
  @supports (width: -webkit-fill-available) {
208
134
  width: -webkit-fill-available;
209
135
  }
210
- max-width: max-width: ${({ $maxWidth = 300, $maxWidthUnit = 'px' }) => `${$maxWidth}${$maxWidthUnit}`};
136
+ max-width: ${({ $maxWidth = 300, $maxWidthUnit = 'px' }) => `${$maxWidth}${$maxWidthUnit}`};
211
137
  border-radius: ${({ $borderRadius = 6 }) => $borderRadius}px;
212
138
  background-color: ${({ theme }) => theme.navbar.navBarBackgroundColor};
213
139
  padding: ${({ $padding = '0 4px' }) => $padding};
214
140
  box-shadow: ${({ theme }) => theme.navbar.navBarBoxShadow};
215
141
 
216
- & ${exports.NavButtonsContainer} {
217
- position: fixed;
218
- max-width: inherit;
219
- height: inherit;
220
-
221
- ${exports.ASSelectedBoxMWStyled} {
222
- position: absolute;
223
- left: 50px;
224
- height: 90%;
225
- z-index: 0;
226
- }
227
- }
228
-
229
142
  ${dimensionsForSizes}
230
143
  `;
231
144
  exports.ASNavBarItemPadding = styled_components_1.default.div `
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"ASNavBarArrowButtons.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,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,CAqBhE,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqBjE,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
@@ -14,10 +14,10 @@ const ASNavBarArrowButtons = ({ className = '', onArrowButtonClicked = () => und
14
14
  exports.ASNavBarArrowButtons = ASNavBarArrowButtons;
15
15
  exports.default = exports.ASNavBarArrowButtons;
16
16
  const ASLeftNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, disabled = false, onArrowButtonClicked = () => undefined, }) => {
17
- 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 }));
17
+ return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonLeftStyled, { role: "button", icon: icons_1.ArrowLeftIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Left), theme: theme, size: size, toggle: false, selected: false, disabled: disabled, id: "LeftButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
18
18
  };
19
19
  exports.ASLeftNavBarArrowButton = ASLeftNavBarArrowButton;
20
20
  const ASRightNavBarArrowButton = ({ size = apptypes_1.ComponentSize.Medium, theme = astheme_1.default, onArrowButtonClicked = () => undefined, disabled = false, }) => {
21
- 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 }));
21
+ return ((0, jsx_runtime_1.jsx)(styles_1.ASIconButtonRightStyled, { role: "button", icon: icons_1.ArrowRightIcon, onPointerDown: (e) => onArrowButtonClicked(e, apptypes_1.ArrowButtonDirection.Right), theme: theme, toggle: false, selected: false, size: size, disabled: disabled, id: "RightButtonId", iconSize: size === apptypes_1.ComponentSize.Large ? 32 : size === apptypes_1.ComponentSize.Medium ? 28 : 24, fillColor: theme.button.buttonIconColor }));
22
22
  };
23
23
  exports.ASRightNavBarArrowButton = ASRightNavBarArrowButton;
@@ -1,4 +1,4 @@
1
- import { MouseEvent } from 'react';
1
+ import { PointerEvent } from 'react';
2
2
  import { ASComponentDirection, ASComponentSize, ASNavBarStyleOptions, ASTheme } from '../../apptypes';
3
3
  export interface ASNavBarArrowButtonsStyledProps {
4
4
  itemId?: string;
@@ -8,7 +8,7 @@ export interface ASNavBarArrowButtonsStyledProps {
8
8
  size?: ASComponentSize;
9
9
  styleOptions?: ASNavBarStyleOptions;
10
10
  }
11
- export type ASNavBarArrowButtonClickFn = (event: MouseEvent, dir: ASComponentDirection) => void;
11
+ export type ASNavBarArrowButtonClickFn = (event: PointerEvent, dir: ASComponentDirection) => void;
12
12
  export type ASNavBarArrowButtonsProps = {
13
13
  className?: string;
14
14
  theme?: ASTheme;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"ASNavBarArrowButtons.types.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbararrowbuttons/ASNavBarArrowButtons.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,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,YAAY,EAAE,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;AAElG,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"}
@@ -1 +1 @@
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"}
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;;;;;;;;;;;;;qKAKnC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;qKAKlC,CAAC"}
@@ -67,10 +67,10 @@ exports.ASNavBarArrowButtonsStyled = styled_components_1.default.div `
67
67
  exports.ASIconButtonRightStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
68
68
  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
69
69
  z-index: 1;
70
- scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
70
+ scale: 0.8;
71
71
  `;
72
72
  exports.ASIconButtonLeftStyled = (0, styled_components_1.default)(asiconbutton_1.default) `
73
73
  margin: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? '0 10px' : size === apptypes_1.ComponentSize.Large ? '0 -1px' : '0 3px'};
74
74
  z-index: 1;
75
- scale: ${({ size = apptypes_1.ComponentSize.Medium }) => size === apptypes_1.ComponentSize.Small ? 0.9 : size === apptypes_1.ComponentSize.Large ? 0.8 : 0.8};
75
+ scale: 0.8;
76
76
  `;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"ASNavBarItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbaritem/ASNavBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -8,6 +8,7 @@ const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
8
8
  const styles_1 = require("../styles");
9
9
  const styles_2 = require("./styles");
10
10
  const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
11
+ const tapDebounceRef = (0, react_1.useRef)('None');
11
12
  const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
12
13
  const navItemWidthRef = (0, react_1.useRef)(0);
13
14
  const navBarItemRef = (0, react_1.useRef)(null);
@@ -44,6 +45,25 @@ const ASNavBarItem = ({ className = '', theme = astheme_1.default, displayText =
44
45
  (0, react_1.useEffect)(() => {
45
46
  isNavBarItemSelected.current = selected;
46
47
  }, [selected]);
47
- 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] }));
48
+ const onTap = (e) => {
49
+ if (tapDebounceRef.current === 'None') {
50
+ tapDebounceRef.current = 'Down';
51
+ const btnEl = e.currentTarget;
52
+ btnEl.ariaPressed = 'true';
53
+ onItemClickHandler(e);
54
+ btnEl.releasePointerCapture(e.pointerId);
55
+ }
56
+ };
57
+ const onTapRelease = (e) => {
58
+ if (tapDebounceRef.current === 'Down') {
59
+ tapDebounceRef.current = 'Up';
60
+ const btnEl = e.currentTarget;
61
+ setTimeout(() => {
62
+ btnEl.ariaPressed = 'false';
63
+ tapDebounceRef.current = 'None';
64
+ }, 400);
65
+ }
66
+ };
67
+ return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarItemStyled, { id: itemId, theme: theme, title: displayText, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerDown: onTap, onPointerUp: onTapRelease, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
48
68
  };
49
69
  exports.default = ASNavBarItem;
@@ -1 +1 @@
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"}
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,4PAoE9B,CAAC"}
@@ -23,6 +23,7 @@ exports.ASNavBarItemStyled = styled_components_1.default.div `
23
23
  z-index: 1;
24
24
  white-space: nowrap;
25
25
  user-select: none;
26
+ min-width: fit-content;
26
27
 
27
28
  & > div > div {
28
29
  pointer-events: none;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"ASNavBarPickPanel.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanel/ASNavBarPickPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsEtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
1
+ {"version":3,"file":"ASNavBarPickPanelItem.d.ts","sourceRoot":"","sources":["../../../src/asnavbar/navbarpickpanelitem/ASNavBarPickPanelItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FtD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
@@ -8,6 +8,7 @@ const astheme_1 = tslib_1.__importDefault(require("../../astheme"));
8
8
  const styles_1 = require("../styles");
9
9
  const styles_2 = require("./styles");
10
10
  const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, displayText = '---', icon, selected = false, itemId, itemIndex = 0, size = apptypes_1.ComponentSize.Medium, onItemClick = () => undefined, onItemResized = () => undefined, }) => {
11
+ const tapDebounceRef = (0, react_1.useRef)('None');
11
12
  const [navItemSizeInitialized, setNavSizeInitialized] = (0, react_1.useState)(false);
12
13
  const navItemWidthRef = (0, react_1.useRef)(0);
13
14
  const navBarItemRef = (0, react_1.useRef)(null);
@@ -42,6 +43,25 @@ const ASNavBarPickPanelItem = ({ className = '', theme = astheme_1.default, disp
42
43
  (0, react_1.useEffect)(() => {
43
44
  isNavBarItemSelected.current = selected;
44
45
  }, [selected]);
45
- return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, 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] }));
46
+ const onTap = (e) => {
47
+ if (tapDebounceRef.current === 'None') {
48
+ tapDebounceRef.current = 'Down';
49
+ const btnEl = e.currentTarget;
50
+ btnEl.ariaPressed = 'true';
51
+ onItemClickHandler(e);
52
+ btnEl.releasePointerCapture(e.pointerId);
53
+ }
54
+ };
55
+ const onTapRelease = (e) => {
56
+ if (tapDebounceRef.current === 'Down') {
57
+ tapDebounceRef.current = 'Up';
58
+ const btnEl = e.currentTarget;
59
+ setTimeout(() => {
60
+ btnEl.ariaPressed = 'false';
61
+ tapDebounceRef.current = 'None';
62
+ }, 400);
63
+ }
64
+ };
65
+ return ((0, jsx_runtime_1.jsxs)(styles_2.ASNavBarPickPanelItemStyled, { id: itemId, theme: theme, ref: navBarItemRef, className: `${className} ${size}`, "$selected": selected, onPointerUp: onTapRelease, onPointerDown: onTap, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.ASNavBarLeadingIconPadding, { theme: theme, "$selected": selected, "aria-invalid": true, "aria-hidden": true, children: icon })), displayText] }));
46
66
  };
47
67
  exports.default = ASNavBarPickPanelItem;
@@ -1 +1 @@
1
- {"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAyEjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"ASThemeDefault.d.ts","sourceRoot":"","sources":["../../src/astheme/ASThemeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AA0EjD,QAAA,MAAM,cAAc,EAAE,OA8FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -17,6 +17,7 @@ const colors = {
17
17
  yellow85: '#ffee66',
18
18
  yellow88: '#fff6af',
19
19
  yellow90: '#867017',
20
+ yellow91: '#a47200',
20
21
  yellow95: '#a68500',
21
22
  yellow100: '#4a4000',
22
23
  yellow110: '#3d340e',
@@ -75,12 +76,12 @@ const ASThemeDefault = {
75
76
  button: {
76
77
  buttonGradientDown: `linear-gradient(to bottom, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
77
78
  buttonGradientUp: `linear-gradient(to top, ${colors.yellow30} 0%, ${colors.mainYellow} 100%)`,
78
- buttonShadowHoverASSmall: `inset 0 0 5px 0 ${colors.mainGray47}`,
79
- buttonShadowHoverASMedium: `inset 0 0 10px 0 ${colors.mainGray47}`,
80
- buttonShadowHoverASLarge: `inset 0 0 15px 0 ${colors.mainGray47}`,
81
- buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.mainBlack}`,
82
- buttonShadowActiveASMedium: `inset 0 0 8px 2px ${colors.mainBlack}`,
83
- buttonShadowActiveASLarge: `inset 0 0 11px 3px ${colors.mainBlack}`,
79
+ buttonShadowHoverASSmall: `inset 0 0 1px 0 ${colors.yellow91}`,
80
+ buttonShadowHoverASMedium: `inset 0 0 4px 0 ${colors.yellow91}`,
81
+ buttonShadowHoverASLarge: `inset 0 0 6px 0 ${colors.yellow91}`,
82
+ buttonShadowActiveASSmall: `inset 0 0 5px 1px ${colors.yellow91}`,
83
+ buttonShadowActiveASMedium: `inset 0 0 6px 1px ${colors.yellow91}`,
84
+ buttonShadowActiveASLarge: `inset 0 0 11px 2px ${colors.yellow91}`,
84
85
  buttonShadowNormal: `inset 0 0 1px 0 ${colors.yellow30}`,
85
86
  buttonShadowHover: `inset 0 0 1px 0 ${colors.yellow80}`,
86
87
  buttonOutline: colors.mainYellow,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eleventheye/asui",
3
- "version": "2.7.1",
3
+ "version": "2.7.3",
4
4
  "private": false,
5
5
  "description": "AS UI React Library by eleventheye (another one!)",
6
6
  "keywords": [