@vuu-ui/vuu-shell 0.8.72 → 0.8.73

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.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var saveLayoutPanelCss = ".saveLayoutPanel {\n --salt-selectable-foreground-hover: #6d18bdc3;\n --salt-selectable-foreground-selected: #6D18BD;\n --salt-selectable-borderColor-selected: #6D18BD;\n --saltInputLegacy-fontSize: 12px;\n --salt-text-label-fontSize: 10px;\n --saltFormFieldLegacy-label-paddingLeft: 0;\n --saltFormField-label-fontWeight: 400;\n --saltText-color: var(--text-secondary-foreground, #606477);\n}\n\n.spinner{\n width: 100px;\n height:100px;\n background-image: var(--svg-spinner);\n}\n\n.saveLayoutPanel-panelContainer {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saveLayoutPanel-panelContent {\n display: flex;\n align-items: flex-start;\n gap: 32px;\n}\n\n.saveLayoutPanel-formContainer {\n display: flex;\n width: 217px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n}\n\n.saveLayoutPanel-formField {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.saveLayoutPanel-inputText {\n border: none;\n color: var(--light-text-primary, #15171B);\n font-family: Nunito Sans A-Variant, serif;\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n padding-left: 4px;\n width: 100%;\n outline: none;\n}\n\n.saveLayoutPanel-settingsGroup {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 10px;\n width: 100%;\n line-height: 16px;\n}\n\n.saveLayoutPanel-screenshotContainer {\n display: flex;\n width: 304px;\n height: 208px;\n padding: 11px 15.5px;\n justify-content: center;\n align-items: center;\n border: 1px solid #E8E8E8;\n background: var(--dark-text-primary, #FFF);\n}\n\n.saveLayoutPanel-screenshot {\n background: lightgray 50% / cover no-repeat;\n width: 273px;\n height: 186px;\n}\n\n.saveLayoutPanel-buttonsContainer {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n align-self: stretch;\n padding-top: 24px;\n gap: 8px;\n}\n\n.saveLayoutPanel-cancelButton,\n.saveLayoutPanel-saveButton {\n display: flex;\n height: fit-content;\n padding: 4px 8px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 6px;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 133.333%;\n letter-spacing: 0.48px;\n text-transform: uppercase;\n}\n\n.saveLayoutPanel-cancelButton {\n color: var(--actionable-primary-foreground-default, #606477);\n background: var(--actionable-primary-background-default, #FFF);\n}\n\n.saveLayoutPanel-saveButton {\n background: #6D18BD;\n border-color: #6D18BD;\n color: white;\n}\n\n.saveLayoutPanel-saveButton.saltButton:disabled {\n background: #6D18BD;\n border-color: #6D18BD;\n color: white;\n opacity: 0.3;\n}\n\n.saveLayoutPanel-saveButton.saltButton:hover {\n background: #F37880;\n border-color: #F37880;\n color: white;\n}\n";
3
+ var saveLayoutPanelCss = ".vuuSaveLayoutPanel {\n --salt-selectable-foreground-hover: #6d18bdc3;\n --salt-selectable-foreground-selected: #6d18bd;\n --salt-selectable-borderColor-selected: #6d18bd;\n --saltInputLegacy-fontSize: 12px;\n --salt-text-label-fontSize: 10px;\n --saltFormFieldLegacy-label-paddingLeft: 0;\n --saltFormField-label-fontWeight: 400;\n --saltText-color: var(--text-secondary-foreground, #606477);\n\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n\n .saltFormField {\n border: solid 1px var(--salt-editable-borderColor);\n padding: var(--salt-spacing-50) var(--salt-spacing-200);\n }\n\n .saltComboBox {\n .saltPillInput-endAdornmentContainer {\n .saltButton {\n border: none;\n width: 18px;\n transform: rotate(90deg);\n }\n .saltButton:after {\n content: \"\";\n background-color: var(--salt-content-secondary-foreground);\n left: auto;\n height: 20px;\n mask: var(--vuu-svg-triangle-right) center center/20px 20px;\n mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n transform: var(--vuu-icon-transform, none);\n width: 20px;\n }\n }\n .saltPillInput-activationIndicator {\n display: none;\n }\n }\n}\n\n.spinner {\n width: 100px;\n height: 100px;\n background-image: var(--svg-spinner);\n}\n\n.vuuSaveLayoutPanel-panelContent {\n display: grid;\n gap: 32px;\n margin-top: var(--salt-spacing-200);\n}\n\n.vuuSaveLayoutPanel-inputText {\n border: none;\n color: var(--light-text-primary, #15171b);\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n padding-left: 4px;\n width: 100%;\n outline: none;\n}\n\n.vuuSaveLayoutPanel-settingsGroup {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 10px;\n width: 100%;\n line-height: 16px;\n}\n\n.vuuSaveLayoutPanel-screenshotContainer {\n display: flex;\n width: 304px;\n height: 208px;\n padding: 11px 15.5px;\n justify-content: center;\n align-items: center;\n border: 1px solid #e8e8e8;\n background: var(--dark-text-primary, #fff);\n}\n\n.vuuSaveLayoutPanel-screenshot {\n background: lightgray 50% / cover no-repeat;\n width: 273px;\n height: 186px;\n}\n\n.vuuSaveLayoutPanel-buttonsContainer {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n align-self: stretch;\n padding-top: 24px;\n gap: 8px;\n}\n\n.vuuSaveLayoutPanel-cancelButton,\n.vuuSaveLayoutPanel-saveButton {\n display: flex;\n height: fit-content;\n padding: 4px 8px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 6px;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 133.333%;\n letter-spacing: 0.48px;\n text-transform: uppercase;\n}\n";
4
4
 
5
5
  module.exports = saveLayoutPanelCss;
6
6
  //# sourceMappingURL=SaveLayoutPanel.css.js.map
@@ -11,8 +11,7 @@ require('clsx');
11
11
  var loginUtils = require('../login/login-utils.js');
12
12
  var SaveLayoutPanel$1 = require('./SaveLayoutPanel.css.js');
13
13
 
14
- const classBase = "saveLayoutPanel";
15
- const formField = `${classBase}-formField`;
14
+ const classBase = "vuuSaveLayoutPanel";
16
15
  const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
17
16
  const SaveLayoutPanel = (props) => {
18
17
  const { defaultTitle = "", onCancel, onSave, componentId } = props;
@@ -71,42 +70,42 @@ const SaveLayoutPanel = (props) => {
71
70
  const handleChange = React.useCallback((e) => {
72
71
  setGroup(e.target.value);
73
72
  }, []);
74
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContainer`, children: [
73
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}`, children: [
75
74
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-panelContent`, children: [
76
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-formContainer`, children: [
77
- /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
78
- /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Group" }),
79
- /* @__PURE__ */ jsxRuntime.jsx(
80
- core.ComboBox,
81
- {
82
- inputProps: {
83
- autoComplete: "off",
84
- className: `${classBase}-inputText`,
85
- placeholder: "Select Group or Enter New Name"
86
- // onChange: (event: ChangeEvent<HTMLInputElement>) =>
87
- // setGroup(event.target.value),
88
- },
89
- onChange: handleChange,
90
- onSelectionChange: handleSelectionChange,
91
- value: group,
92
- children: groups.map((group2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: group2 }, i))
93
- }
94
- )
95
- ] }),
96
- /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { className: formField, children: [
97
- /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Layout Name" }),
98
- /* @__PURE__ */ jsxRuntime.jsx(
99
- core.Input,
100
- {
101
- inputProps: {
102
- className: `${classBase}-inputText`,
103
- placeholder: "Enter Layout Name"
104
- },
105
- onChange: (event) => setLayoutName(event.target.value),
106
- value: layoutName
107
- }
108
- )
109
- ] })
75
+ /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
76
+ /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Group" }),
77
+ /* @__PURE__ */ jsxRuntime.jsx(
78
+ core.ComboBox,
79
+ {
80
+ "data-embedded": true,
81
+ inputProps: {
82
+ autoComplete: "off",
83
+ className: `${classBase}-inputText`,
84
+ placeholder: "Select Group or Enter New Name"
85
+ // onChange: (event: ChangeEvent<HTMLInputElement>) =>
86
+ // setGroup(event.target.value),
87
+ },
88
+ onChange: handleChange,
89
+ onSelectionChange: handleSelectionChange,
90
+ value: group,
91
+ children: groups.map((group2, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: group2 }, i))
92
+ }
93
+ )
94
+ ] }),
95
+ /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
96
+ /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Layout Name" }),
97
+ /* @__PURE__ */ jsxRuntime.jsx(
98
+ core.Input,
99
+ {
100
+ "data-embedded": true,
101
+ inputProps: {
102
+ className: `${classBase}-inputText`,
103
+ placeholder: "Enter Layout Name"
104
+ },
105
+ onChange: (event) => setLayoutName(event.target.value),
106
+ value: layoutName
107
+ }
108
+ )
110
109
  ] }),
111
110
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-screenshotContainer`, children: screenshotContent })
112
111
  ] }),
@@ -118,6 +117,7 @@ const SaveLayoutPanel = (props) => {
118
117
  className: `${classBase}-saveButton`,
119
118
  onClick: handleSubmit,
120
119
  disabled: layoutName === "" || group === "",
120
+ variant: "cta",
121
121
  children: "Save"
122
122
  }
123
123
  )
@@ -1 +1 @@
1
- {"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n Button,\n ComboBox,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n Text,\n} from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n componentId?: string;\n defaultTitle?: string;\n onCancel: () => void;\n onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-save-layout-panel\",\n css: saveLayoutPanelCss,\n window: targetWindow,\n });\n\n const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n const [group, setGroup] = useState<string>(\"\");\n const [screenshot, setScreenshot] = useState<string | undefined>();\n const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n string | undefined\n >();\n const [username] = getAuthDetailsFromCookies();\n\n useEffect(() => {\n if (componentId) {\n takeScreenshot(document.getElementById(componentId) as HTMLElement)\n .then((screenshot) => {\n setScreenshot(screenshot);\n })\n .catch((error: Error) => {\n setScreenshotErrorMessage(error.message);\n });\n }\n }, [componentId]);\n\n const handleSubmit = () => {\n onSave({\n name: layoutName,\n group,\n screenshot: screenshot ?? \"\",\n user: username,\n });\n };\n\n const screenshotContent = useMemo(() => {\n if (screenshot) {\n return (\n <img\n className={`${classBase}-screenshot`}\n src={screenshot}\n alt=\"screenshot of current layout\"\n />\n );\n }\n if (screenshotErrorMessage) {\n return <Text>{screenshotErrorMessage}</Text>;\n }\n return <div className=\"spinner\" />;\n }, [screenshot, screenshotErrorMessage]);\n\n const handleSelectionChange = useCallback(\n (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n if (\n (e as KeyboardEvent).key === \"Tab\" &&\n !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n ) {\n // ignore. The ComboBox forces selection of a value from the list on Tab\n } else {\n setGroup(selectedValue || \"\");\n }\n },\n [group]\n );\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setGroup(e.target.value);\n }, []);\n\n return (\n <div className={`${classBase}-panelContainer`}>\n <div className={`${classBase}-panelContent`}>\n <div className={`${classBase}-formContainer`}>\n <FormField className={formField}>\n <FormFieldLabel>Group</FormFieldLabel>\n <ComboBox\n inputProps={{\n autoComplete: \"off\",\n className: `${classBase}-inputText`,\n placeholder: \"Select Group or Enter New Name\",\n // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n // setGroup(event.target.value),\n }}\n onChange={handleChange}\n onSelectionChange={handleSelectionChange}\n value={group}\n >\n {groups.map((group, i) => (\n <Option key={i} value={group} />\n ))}\n </ComboBox>\n </FormField>\n <FormField className={formField}>\n <FormFieldLabel>Layout Name</FormFieldLabel>\n <Input\n inputProps={{\n className: `${classBase}-inputText`,\n placeholder: \"Enter Layout Name\",\n }}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n setLayoutName(event.target.value)\n }\n value={layoutName}\n />\n </FormField>\n </div>\n <div className={`${classBase}-screenshotContainer`}>\n {screenshotContent}\n </div>\n </div>\n <div className={`${classBase}-buttonsContainer`}>\n <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n Cancel\n </Button>\n <Button\n className={`${classBase}-saveButton`}\n onClick={handleSubmit}\n disabled={layoutName === \"\" || group === \"\"}\n >\n Save\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","useCallback","jsxs","FormField","FormFieldLabel","ComboBox","group","Option","Input","Button"],"mappings":"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"}
1
+ {"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n Button,\n ComboBox,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n Text,\n} from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"vuuSaveLayoutPanel\";\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n componentId?: string;\n defaultTitle?: string;\n onCancel: () => void;\n onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-save-layout-panel\",\n css: saveLayoutPanelCss,\n window: targetWindow,\n });\n\n const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n const [group, setGroup] = useState<string>(\"\");\n const [screenshot, setScreenshot] = useState<string | undefined>();\n const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n string | undefined\n >();\n const [username] = getAuthDetailsFromCookies();\n\n useEffect(() => {\n if (componentId) {\n takeScreenshot(document.getElementById(componentId) as HTMLElement)\n .then((screenshot) => {\n setScreenshot(screenshot);\n })\n .catch((error: Error) => {\n setScreenshotErrorMessage(error.message);\n });\n }\n }, [componentId]);\n\n const handleSubmit = () => {\n onSave({\n name: layoutName,\n group,\n screenshot: screenshot ?? \"\",\n user: username,\n });\n };\n\n const screenshotContent = useMemo(() => {\n if (screenshot) {\n return (\n <img\n className={`${classBase}-screenshot`}\n src={screenshot}\n alt=\"screenshot of current layout\"\n />\n );\n }\n if (screenshotErrorMessage) {\n return <Text>{screenshotErrorMessage}</Text>;\n }\n return <div className=\"spinner\" />;\n }, [screenshot, screenshotErrorMessage]);\n\n const handleSelectionChange = useCallback(\n (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n if (\n (e as KeyboardEvent).key === \"Tab\" &&\n !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n ) {\n // ignore. The ComboBox forces selection of a value from the list on Tab\n } else {\n setGroup(selectedValue || \"\");\n }\n },\n [group]\n );\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setGroup(e.target.value);\n }, []);\n\n return (\n <div className={`${classBase}`}>\n <div className={`${classBase}-panelContent`}>\n <FormField>\n <FormFieldLabel>Group</FormFieldLabel>\n <ComboBox\n data-embedded\n inputProps={{\n autoComplete: \"off\",\n className: `${classBase}-inputText`,\n placeholder: \"Select Group or Enter New Name\",\n // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n // setGroup(event.target.value),\n }}\n onChange={handleChange}\n onSelectionChange={handleSelectionChange}\n value={group}\n >\n {groups.map((group, i) => (\n <Option key={i} value={group} />\n ))}\n </ComboBox>\n </FormField>\n <FormField>\n <FormFieldLabel>Layout Name</FormFieldLabel>\n <Input\n data-embedded\n inputProps={{\n className: `${classBase}-inputText`,\n placeholder: \"Enter Layout Name\",\n }}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n setLayoutName(event.target.value)\n }\n value={layoutName}\n />\n </FormField>\n <div className={`${classBase}-screenshotContainer`}>\n {screenshotContent}\n </div>\n </div>\n <div className={`${classBase}-buttonsContainer`}>\n <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n Cancel\n </Button>\n <Button\n className={`${classBase}-saveButton`}\n onClick={handleSubmit}\n disabled={layoutName === \"\" || group === \"\"}\n variant=\"cta\"\n >\n Save\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","saveLayoutPanelCss","useState","getAuthDetailsFromCookies","useEffect","takeScreenshot","screenshot","useMemo","jsx","Text","useCallback","jsxs","FormField","FormFieldLabel","ComboBox","group","Option","Input","Button"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var saveLayoutPanelCss = ".saveLayoutPanel {\n --salt-selectable-foreground-hover: #6d18bdc3;\n --salt-selectable-foreground-selected: #6D18BD;\n --salt-selectable-borderColor-selected: #6D18BD;\n --saltInputLegacy-fontSize: 12px;\n --salt-text-label-fontSize: 10px;\n --saltFormFieldLegacy-label-paddingLeft: 0;\n --saltFormField-label-fontWeight: 400;\n --saltText-color: var(--text-secondary-foreground, #606477);\n}\n\n.spinner{\n width: 100px;\n height:100px;\n background-image: var(--svg-spinner);\n}\n\n.saveLayoutPanel-panelContainer {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.saveLayoutPanel-panelContent {\n display: flex;\n align-items: flex-start;\n gap: 32px;\n}\n\n.saveLayoutPanel-formContainer {\n display: flex;\n width: 217px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n}\n\n.saveLayoutPanel-formField {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.saveLayoutPanel-inputText {\n border: none;\n color: var(--light-text-primary, #15171B);\n font-family: Nunito Sans A-Variant, serif;\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n padding-left: 4px;\n width: 100%;\n outline: none;\n}\n\n.saveLayoutPanel-settingsGroup {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 10px;\n width: 100%;\n line-height: 16px;\n}\n\n.saveLayoutPanel-screenshotContainer {\n display: flex;\n width: 304px;\n height: 208px;\n padding: 11px 15.5px;\n justify-content: center;\n align-items: center;\n border: 1px solid #E8E8E8;\n background: var(--dark-text-primary, #FFF);\n}\n\n.saveLayoutPanel-screenshot {\n background: lightgray 50% / cover no-repeat;\n width: 273px;\n height: 186px;\n}\n\n.saveLayoutPanel-buttonsContainer {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n align-self: stretch;\n padding-top: 24px;\n gap: 8px;\n}\n\n.saveLayoutPanel-cancelButton,\n.saveLayoutPanel-saveButton {\n display: flex;\n height: fit-content;\n padding: 4px 8px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 6px;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 133.333%;\n letter-spacing: 0.48px;\n text-transform: uppercase;\n}\n\n.saveLayoutPanel-cancelButton {\n color: var(--actionable-primary-foreground-default, #606477);\n background: var(--actionable-primary-background-default, #FFF);\n}\n\n.saveLayoutPanel-saveButton {\n background: #6D18BD;\n border-color: #6D18BD;\n color: white;\n}\n\n.saveLayoutPanel-saveButton.saltButton:disabled {\n background: #6D18BD;\n border-color: #6D18BD;\n color: white;\n opacity: 0.3;\n}\n\n.saveLayoutPanel-saveButton.saltButton:hover {\n background: #F37880;\n border-color: #F37880;\n color: white;\n}\n";
1
+ var saveLayoutPanelCss = ".vuuSaveLayoutPanel {\n --salt-selectable-foreground-hover: #6d18bdc3;\n --salt-selectable-foreground-selected: #6d18bd;\n --salt-selectable-borderColor-selected: #6d18bd;\n --saltInputLegacy-fontSize: 12px;\n --salt-text-label-fontSize: 10px;\n --saltFormFieldLegacy-label-paddingLeft: 0;\n --saltFormField-label-fontWeight: 400;\n --saltText-color: var(--text-secondary-foreground, #606477);\n\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n\n .saltFormField {\n border: solid 1px var(--salt-editable-borderColor);\n padding: var(--salt-spacing-50) var(--salt-spacing-200);\n }\n\n .saltComboBox {\n .saltPillInput-endAdornmentContainer {\n .saltButton {\n border: none;\n width: 18px;\n transform: rotate(90deg);\n }\n .saltButton:after {\n content: \"\";\n background-color: var(--salt-content-secondary-foreground);\n left: auto;\n height: 20px;\n mask: var(--vuu-svg-triangle-right) center center/20px 20px;\n mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n transform: var(--vuu-icon-transform, none);\n width: 20px;\n }\n }\n .saltPillInput-activationIndicator {\n display: none;\n }\n }\n}\n\n.spinner {\n width: 100px;\n height: 100px;\n background-image: var(--svg-spinner);\n}\n\n.vuuSaveLayoutPanel-panelContent {\n display: grid;\n gap: 32px;\n margin-top: var(--salt-spacing-200);\n}\n\n.vuuSaveLayoutPanel-inputText {\n border: none;\n color: var(--light-text-primary, #15171b);\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n padding-left: 4px;\n width: 100%;\n outline: none;\n}\n\n.vuuSaveLayoutPanel-settingsGroup {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 10px;\n width: 100%;\n line-height: 16px;\n}\n\n.vuuSaveLayoutPanel-screenshotContainer {\n display: flex;\n width: 304px;\n height: 208px;\n padding: 11px 15.5px;\n justify-content: center;\n align-items: center;\n border: 1px solid #e8e8e8;\n background: var(--dark-text-primary, #fff);\n}\n\n.vuuSaveLayoutPanel-screenshot {\n background: lightgray 50% / cover no-repeat;\n width: 273px;\n height: 186px;\n}\n\n.vuuSaveLayoutPanel-buttonsContainer {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n align-self: stretch;\n padding-top: 24px;\n gap: 8px;\n}\n\n.vuuSaveLayoutPanel-cancelButton,\n.vuuSaveLayoutPanel-saveButton {\n display: flex;\n height: fit-content;\n padding: 4px 8px;\n align-items: flex-start;\n gap: 8px;\n border-radius: 6px;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 133.333%;\n letter-spacing: 0.48px;\n text-transform: uppercase;\n}\n";
2
2
 
3
3
  export { saveLayoutPanelCss as default };
4
4
  //# sourceMappingURL=SaveLayoutPanel.css.js.map
@@ -9,8 +9,7 @@ import 'clsx';
9
9
  import { getAuthDetailsFromCookies } from '../login/login-utils.js';
10
10
  import saveLayoutPanelCss from './SaveLayoutPanel.css.js';
11
11
 
12
- const classBase = "saveLayoutPanel";
13
- const formField = `${classBase}-formField`;
12
+ const classBase = "vuuSaveLayoutPanel";
14
13
  const groups = ["Group 1", "Group 2", "Group 3", "Group 4", "Group 5"];
15
14
  const SaveLayoutPanel = (props) => {
16
15
  const { defaultTitle = "", onCancel, onSave, componentId } = props;
@@ -69,42 +68,42 @@ const SaveLayoutPanel = (props) => {
69
68
  const handleChange = useCallback((e) => {
70
69
  setGroup(e.target.value);
71
70
  }, []);
72
- return /* @__PURE__ */ jsxs("div", { className: `${classBase}-panelContainer`, children: [
71
+ return /* @__PURE__ */ jsxs("div", { className: `${classBase}`, children: [
73
72
  /* @__PURE__ */ jsxs("div", { className: `${classBase}-panelContent`, children: [
74
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-formContainer`, children: [
75
- /* @__PURE__ */ jsxs(FormField, { className: formField, children: [
76
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Group" }),
77
- /* @__PURE__ */ jsx(
78
- ComboBox,
79
- {
80
- inputProps: {
81
- autoComplete: "off",
82
- className: `${classBase}-inputText`,
83
- placeholder: "Select Group or Enter New Name"
84
- // onChange: (event: ChangeEvent<HTMLInputElement>) =>
85
- // setGroup(event.target.value),
86
- },
87
- onChange: handleChange,
88
- onSelectionChange: handleSelectionChange,
89
- value: group,
90
- children: groups.map((group2, i) => /* @__PURE__ */ jsx(Option, { value: group2 }, i))
91
- }
92
- )
93
- ] }),
94
- /* @__PURE__ */ jsxs(FormField, { className: formField, children: [
95
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Layout Name" }),
96
- /* @__PURE__ */ jsx(
97
- Input,
98
- {
99
- inputProps: {
100
- className: `${classBase}-inputText`,
101
- placeholder: "Enter Layout Name"
102
- },
103
- onChange: (event) => setLayoutName(event.target.value),
104
- value: layoutName
105
- }
106
- )
107
- ] })
73
+ /* @__PURE__ */ jsxs(FormField, { children: [
74
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Group" }),
75
+ /* @__PURE__ */ jsx(
76
+ ComboBox,
77
+ {
78
+ "data-embedded": true,
79
+ inputProps: {
80
+ autoComplete: "off",
81
+ className: `${classBase}-inputText`,
82
+ placeholder: "Select Group or Enter New Name"
83
+ // onChange: (event: ChangeEvent<HTMLInputElement>) =>
84
+ // setGroup(event.target.value),
85
+ },
86
+ onChange: handleChange,
87
+ onSelectionChange: handleSelectionChange,
88
+ value: group,
89
+ children: groups.map((group2, i) => /* @__PURE__ */ jsx(Option, { value: group2 }, i))
90
+ }
91
+ )
92
+ ] }),
93
+ /* @__PURE__ */ jsxs(FormField, { children: [
94
+ /* @__PURE__ */ jsx(FormFieldLabel, { children: "Layout Name" }),
95
+ /* @__PURE__ */ jsx(
96
+ Input,
97
+ {
98
+ "data-embedded": true,
99
+ inputProps: {
100
+ className: `${classBase}-inputText`,
101
+ placeholder: "Enter Layout Name"
102
+ },
103
+ onChange: (event) => setLayoutName(event.target.value),
104
+ value: layoutName
105
+ }
106
+ )
108
107
  ] }),
109
108
  /* @__PURE__ */ jsx("div", { className: `${classBase}-screenshotContainer`, children: screenshotContent })
110
109
  ] }),
@@ -116,6 +115,7 @@ const SaveLayoutPanel = (props) => {
116
115
  className: `${classBase}-saveButton`,
117
116
  onClick: handleSubmit,
118
117
  disabled: layoutName === "" || group === "",
118
+ variant: "cta",
119
119
  children: "Save"
120
120
  }
121
121
  )
@@ -1 +1 @@
1
- {"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n Button,\n ComboBox,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n Text,\n} from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"saveLayoutPanel\";\nconst formField = `${classBase}-formField`;\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n componentId?: string;\n defaultTitle?: string;\n onCancel: () => void;\n onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-save-layout-panel\",\n css: saveLayoutPanelCss,\n window: targetWindow,\n });\n\n const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n const [group, setGroup] = useState<string>(\"\");\n const [screenshot, setScreenshot] = useState<string | undefined>();\n const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n string | undefined\n >();\n const [username] = getAuthDetailsFromCookies();\n\n useEffect(() => {\n if (componentId) {\n takeScreenshot(document.getElementById(componentId) as HTMLElement)\n .then((screenshot) => {\n setScreenshot(screenshot);\n })\n .catch((error: Error) => {\n setScreenshotErrorMessage(error.message);\n });\n }\n }, [componentId]);\n\n const handleSubmit = () => {\n onSave({\n name: layoutName,\n group,\n screenshot: screenshot ?? \"\",\n user: username,\n });\n };\n\n const screenshotContent = useMemo(() => {\n if (screenshot) {\n return (\n <img\n className={`${classBase}-screenshot`}\n src={screenshot}\n alt=\"screenshot of current layout\"\n />\n );\n }\n if (screenshotErrorMessage) {\n return <Text>{screenshotErrorMessage}</Text>;\n }\n return <div className=\"spinner\" />;\n }, [screenshot, screenshotErrorMessage]);\n\n const handleSelectionChange = useCallback(\n (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n if (\n (e as KeyboardEvent).key === \"Tab\" &&\n !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n ) {\n // ignore. The ComboBox forces selection of a value from the list on Tab\n } else {\n setGroup(selectedValue || \"\");\n }\n },\n [group]\n );\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setGroup(e.target.value);\n }, []);\n\n return (\n <div className={`${classBase}-panelContainer`}>\n <div className={`${classBase}-panelContent`}>\n <div className={`${classBase}-formContainer`}>\n <FormField className={formField}>\n <FormFieldLabel>Group</FormFieldLabel>\n <ComboBox\n inputProps={{\n autoComplete: \"off\",\n className: `${classBase}-inputText`,\n placeholder: \"Select Group or Enter New Name\",\n // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n // setGroup(event.target.value),\n }}\n onChange={handleChange}\n onSelectionChange={handleSelectionChange}\n value={group}\n >\n {groups.map((group, i) => (\n <Option key={i} value={group} />\n ))}\n </ComboBox>\n </FormField>\n <FormField className={formField}>\n <FormFieldLabel>Layout Name</FormFieldLabel>\n <Input\n inputProps={{\n className: `${classBase}-inputText`,\n placeholder: \"Enter Layout Name\",\n }}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n setLayoutName(event.target.value)\n }\n value={layoutName}\n />\n </FormField>\n </div>\n <div className={`${classBase}-screenshotContainer`}>\n {screenshotContent}\n </div>\n </div>\n <div className={`${classBase}-buttonsContainer`}>\n <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n Cancel\n </Button>\n <Button\n className={`${classBase}-saveButton`}\n onClick={handleSubmit}\n disabled={layoutName === \"\" || group === \"\"}\n >\n Save\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["screenshot","group"],"mappings":"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"}
1
+ {"version":3,"file":"SaveLayoutPanel.js","sources":["../../src/layout-management/SaveLayoutPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { takeScreenshot } from \"./screenshot-utils\";\nimport {\n Button,\n ComboBox,\n FormField,\n FormFieldLabel,\n Input,\n Option,\n Text,\n} from \"@salt-ds/core\";\nimport {\n ChangeEvent,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { LayoutMetadataDto } from \"./layoutTypes\";\nimport { getAuthDetailsFromCookies } from \"../login\";\n\nimport saveLayoutPanelCss from \"./SaveLayoutPanel.css\";\n\nconst classBase = \"vuuSaveLayoutPanel\";\n\nconst groups = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\", \"Group 5\"];\n\ntype SaveLayoutPanelProps = {\n componentId?: string;\n defaultTitle?: string;\n onCancel: () => void;\n onSave: (layoutMetadata: LayoutMetadataDto) => void;\n};\n\nexport const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {\n const { defaultTitle = \"\", onCancel, onSave, componentId } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-save-layout-panel\",\n css: saveLayoutPanelCss,\n window: targetWindow,\n });\n\n const [layoutName, setLayoutName] = useState<string>(defaultTitle);\n const [group, setGroup] = useState<string>(\"\");\n const [screenshot, setScreenshot] = useState<string | undefined>();\n const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<\n string | undefined\n >();\n const [username] = getAuthDetailsFromCookies();\n\n useEffect(() => {\n if (componentId) {\n takeScreenshot(document.getElementById(componentId) as HTMLElement)\n .then((screenshot) => {\n setScreenshot(screenshot);\n })\n .catch((error: Error) => {\n setScreenshotErrorMessage(error.message);\n });\n }\n }, [componentId]);\n\n const handleSubmit = () => {\n onSave({\n name: layoutName,\n group,\n screenshot: screenshot ?? \"\",\n user: username,\n });\n };\n\n const screenshotContent = useMemo(() => {\n if (screenshot) {\n return (\n <img\n className={`${classBase}-screenshot`}\n src={screenshot}\n alt=\"screenshot of current layout\"\n />\n );\n }\n if (screenshotErrorMessage) {\n return <Text>{screenshotErrorMessage}</Text>;\n }\n return <div className=\"spinner\" />;\n }, [screenshot, screenshotErrorMessage]);\n\n const handleSelectionChange = useCallback(\n (e: SyntheticEvent | KeyboardEvent, [selectedValue]: string[]) => {\n if (\n (e as KeyboardEvent).key === \"Tab\" &&\n !selectedValue.toLowerCase().startsWith(group.toLowerCase())\n ) {\n // ignore. The ComboBox forces selection of a value from the list on Tab\n } else {\n setGroup(selectedValue || \"\");\n }\n },\n [group]\n );\n\n const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setGroup(e.target.value);\n }, []);\n\n return (\n <div className={`${classBase}`}>\n <div className={`${classBase}-panelContent`}>\n <FormField>\n <FormFieldLabel>Group</FormFieldLabel>\n <ComboBox\n data-embedded\n inputProps={{\n autoComplete: \"off\",\n className: `${classBase}-inputText`,\n placeholder: \"Select Group or Enter New Name\",\n // onChange: (event: ChangeEvent<HTMLInputElement>) =>\n // setGroup(event.target.value),\n }}\n onChange={handleChange}\n onSelectionChange={handleSelectionChange}\n value={group}\n >\n {groups.map((group, i) => (\n <Option key={i} value={group} />\n ))}\n </ComboBox>\n </FormField>\n <FormField>\n <FormFieldLabel>Layout Name</FormFieldLabel>\n <Input\n data-embedded\n inputProps={{\n className: `${classBase}-inputText`,\n placeholder: \"Enter Layout Name\",\n }}\n onChange={(event: ChangeEvent<HTMLInputElement>) =>\n setLayoutName(event.target.value)\n }\n value={layoutName}\n />\n </FormField>\n <div className={`${classBase}-screenshotContainer`}>\n {screenshotContent}\n </div>\n </div>\n <div className={`${classBase}-buttonsContainer`}>\n <Button className={`${classBase}-cancelButton`} onClick={onCancel}>\n Cancel\n </Button>\n <Button\n className={`${classBase}-saveButton`}\n onClick={handleSubmit}\n disabled={layoutName === \"\" || group === \"\"}\n variant=\"cta\"\n >\n Save\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["screenshot","group"],"mappings":"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"}
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
- "version": "0.8.72",
2
+ "version": "0.8.73",
3
3
  "description": "VUU UI Shell",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
6
6
  "devDependencies": {
7
- "@vuu-ui/vuu-data-types": "0.8.72",
8
- "@vuu-ui/vuu-protocol-types": "0.8.72",
9
- "@vuu-ui/vuu-table-types": "0.8.72"
7
+ "@vuu-ui/vuu-data-types": "0.8.73",
8
+ "@vuu-ui/vuu-protocol-types": "0.8.73",
9
+ "@vuu-ui/vuu-table-types": "0.8.73"
10
10
  },
11
11
  "dependencies": {
12
12
  "@salt-ds/core": "1.27.1",
13
13
  "@salt-ds/styles": "0.2.1",
14
14
  "@salt-ds/window": "0.1.1",
15
- "@vuu-ui/vuu-data-remote": "0.8.72",
16
- "@vuu-ui/vuu-icons": "0.8.72",
17
- "@vuu-ui/vuu-layout": "0.8.72",
18
- "@vuu-ui/vuu-popups": "0.8.72",
19
- "@vuu-ui/vuu-table": "0.8.72",
20
- "@vuu-ui/vuu-ui-controls": "0.8.72",
21
- "@vuu-ui/vuu-utils": "0.8.72",
15
+ "@vuu-ui/vuu-data-remote": "0.8.73",
16
+ "@vuu-ui/vuu-icons": "0.8.73",
17
+ "@vuu-ui/vuu-layout": "0.8.73",
18
+ "@vuu-ui/vuu-popups": "0.8.73",
19
+ "@vuu-ui/vuu-table": "0.8.73",
20
+ "@vuu-ui/vuu-ui-controls": "0.8.73",
21
+ "@vuu-ui/vuu-utils": "0.8.73",
22
22
  "html-to-image": "^1.11.11"
23
23
  },
24
24
  "peerDependencies": {