@smwb/ui-react 2.6.2 → 2.6.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.
- package/dist/assets/styles/less/components/chip/chip.entry.css +1 -1
- package/dist/assets/styles/less/components/modal/modal.entry.css +1 -1
- package/dist/assets/styles/less/components/overflowMenu/overflowMenu.entry.css +1 -1
- package/dist/components/feedBack/confirmDialog/confirmDialog.js +16 -16
- package/dist/components/feedBack/confirmDialog/confirmDialog.js.map +1 -1
- package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js +28 -27
- package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map +1 -1
- package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js +9 -9
- package/dist/headless/components/feedBack/confirmDialog/confirmDialog.js.map +1 -1
- package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js +33 -32
- package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/storybook/storyPlay.d.ts +9 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-chip{position:relative;user-select:none;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:6px;cursor:pointer;transition:all .15s ease-in-out;color:var(--smui-primaryTextColor)}.smwb-chip.smwb-disabled{opacity:.8;pointer-events:none;background-color:var(--smui-disabledBgColor);border-color:var(--smui-disabledBgColor);color:var(--smui-disabledTextColor)}.smwb-chip.smwb-disabled.smwb-outlined{border:1px solid var(--smui-disabledBgColor);background:none}.smwb-chip.smwb-disabled i{color:var(--smui-disabledTextColor)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled){background-color:var(--smui-chipsBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #00000029,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled){border:1px solid var(--smui-chipsOutlinedBorder)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip__delete-icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon svg{fill:var(--smui-chipsIconColor);transition:all .15s ease-in-out}.smwb-chip__delete-icon svg:hover{fill:var(--smui-chipsIconColorHover)}.smwb-chip__icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon{background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}.smwb-chip_size-small{height:24px;padding:0 8px;font-size:.75rem}.smwb-chip.smwb-chip_color-primary.smwb-filled{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-chip.smwb-chip_color-primary.smwb-filled:hover{background-color:var(--smui-primaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-primary.smwb-filled:active{background-color:var(--smui-primaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-primary.smwb-outlined{color:var(--smui-primaryColor);border:
|
|
1
|
+
.smwb-chip{position:relative;user-select:none;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:6px;cursor:pointer;transition:all .15s ease-in-out;color:var(--smui-primaryTextColor)}.smwb-chip.smwb-disabled{opacity:.8;pointer-events:none;background-color:var(--smui-disabledBgColor);border-color:var(--smui-disabledBgColor);color:var(--smui-disabledTextColor)}.smwb-chip.smwb-disabled.smwb-outlined{border:1px solid var(--smui-disabledBgColor);background:none}.smwb-chip.smwb-disabled i{color:var(--smui-disabledTextColor)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled){background-color:var(--smui-chipsBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #00000029,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-filled:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled){border:1px solid var(--smui-chipsOutlinedBorder)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):hover{background-color:var(--smui-chipsHoverBg)}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled):active{background-color:var(--smui-chipsActiveBg);box-shadow:0 3px 5px -1px #0000001c,0 1px 1px #00000024,0 2px 3px #0000001f}.smwb-chip.smwb-outlined:not(.smwb-chip.smwb-disabled).smwb-selected{background-color:var(--smui-chipsSelectedBg)}.smwb-chip__delete-icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon svg{fill:var(--smui-chipsIconColor);transition:all .15s ease-in-out}.smwb-chip__delete-icon svg:hover{fill:var(--smui-chipsIconColorHover)}.smwb-chip__icon{display:inline-flex;align-items:center;justify-content:center}.smwb-chip__delete-icon{background:transparent;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer}.smwb-chip_size-small{height:24px;padding:0 8px;font-size:.75rem}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-primaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-primaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-primaryColor);border-color:var(--smui-primaryColor)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-secondaryColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-secondaryColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-secondaryColor);border-color:var(--smui-secondaryColor)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-errorColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-errorColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-errorColor);border-color:var(--smui-errorColor)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-successColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-successColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-successColor);border-color:var(--smui-successColor)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-warningColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-warningColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-warningColor);border-color:var(--smui-warningColor)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:hover{background-color:var(--smui-infoColor);filter:brightness(.94)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:active{background-color:var(--smui-infoColor);filter:brightness(.88)}.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-outlined{color:var(--smui-infoColor);border-color:var(--smui-infoColor)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-modal{display:flex;flex-direction:column;min-height:150px;border-radius:16px;line-height:1.5;overflow-y:auto;color:var(--smui-onSurfaceColor);background-color:var(--smui-surfaceBackground);box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.smwb-modal__header{padding:20px 20px 10px}.smwb-modal__content{padding:10px 20px;flex-grow:1;overflow:hidden auto}.smwb-modal__footer{padding:10px 20px 20px}.smwb-modal.smwb-small{width:25%;height:25%}.smwb-modal.smwb-medium{width:min(480px,90vw);height:auto;max-height:min(560px,90vh)}.smwb-modal.smwb-large{width:50%;height:50%}.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}.smwb-modal__overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;min-width:100%;min-height:100%;z-index:1001;overflow:hidden}.smwb-modal__overlay-appear .smwb-modal.smwb-fade,.smwb-modal__overlay-enter .smwb-modal.smwb-fade{opacity:0}.smwb-modal__overlay-appear .smwb-modal.smwb-scale,.smwb-modal__overlay-enter .smwb-modal.smwb-scale{opacity:0;transform:scale(0)}.smwb-modal__overlay-appear .smwb-modal.smwb-drop,.smwb-modal__overlay-enter .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%)}@media(min-width:800px){.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-dark{background-color:#00000080;transition:background-color 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out,background-color 225ms ease-in-out}}.smwb-modal__overlay-appear-active .smwb-modal.smwb-fade,.smwb-modal__overlay-enter-active .smwb-modal.smwb-fade{opacity:1;transition:opacity 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-scale,.smwb-modal__overlay-enter-active .smwb-modal.smwb-scale{opacity:1;transform:scale(1);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-drop,.smwb-modal__overlay-enter-active .smwb-modal.smwb-drop{opacity:1;transform:translateY(0);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}@media(min-width:800px){.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-dark{background-color:#00000080}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px)}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px)}}@media(min-width:800px){.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-dark{background-color:transparent;transition:background-color .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:transparent;backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out,background-color .15s ease-in-out}}.smwb-modal__overlay-exit-active .smwb-modal.smwb-fade{opacity:0;transition:opacity .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-scale{opacity:0;transform:scale(0);transition:opacity .15s ease-in-out,transform .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%);transition:opacity .15s ease-in-out,transform .15s ease-in-out}@media(max-width:800px){.smwb-modal.smwb-small,.smwb-modal.smwb-medium,.smwb-modal.smwb-large,.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}}@media(max-height:600px){.smwb-modal{min-height:250px;min-width:280px}}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}
|
|
1
|
+
.smwb-modal{display:flex;flex-direction:column;min-height:150px;border-radius:16px;line-height:1.5;overflow-y:auto;color:var(--smui-onSurfaceColor);background-color:var(--smui-surfaceBackground);box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.smwb-modal__header{padding:20px 20px 10px}.smwb-modal__content{padding:10px 20px;flex-grow:1;overflow:hidden auto}.smwb-modal__footer{padding:10px 20px 20px}.smwb-modal.smwb-small{width:25%;height:25%}.smwb-modal.smwb-medium{width:min(480px,90vw);height:auto;max-height:min(560px,90vh)}.smwb-modal.smwb-large{width:50%;height:50%}.smwb-modal.smwb-fullscreen{width:100%;height:100%;border-radius:0}.smwb-modal__overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;min-width:100%;min-height:100%;z-index:1001;overflow:hidden}.smwb-modal__overlay-appear .smwb-modal.smwb-fade,.smwb-modal__overlay-enter .smwb-modal.smwb-fade{opacity:0}.smwb-modal__overlay-appear .smwb-modal.smwb-scale,.smwb-modal__overlay-enter .smwb-modal.smwb-scale{opacity:0;transform:scale(0)}.smwb-modal__overlay-appear .smwb-modal.smwb-drop,.smwb-modal__overlay-enter .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%)}@media(min-width:800px){.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-dark{background-color:#00000080;transition:background-color 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out}.smwb-modal__overlay-appear-active:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px);transition:backdrop-filter 225ms ease-in-out,background-color 225ms ease-in-out}}.smwb-modal__overlay-appear-active .smwb-modal.smwb-fade,.smwb-modal__overlay-enter-active .smwb-modal.smwb-fade{opacity:1;transition:opacity 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-scale,.smwb-modal__overlay-enter-active .smwb-modal.smwb-scale{opacity:1;transform:scale(1);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}.smwb-modal__overlay-appear-active .smwb-modal.smwb-drop,.smwb-modal__overlay-enter-active .smwb-modal.smwb-drop{opacity:1;transform:translateY(0);transition:opacity 225ms ease-in-out,transform 225ms ease-in-out}@media(min-width:800px){.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-dark,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-dark{background-color:#00000080}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-blured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(5px)}.smwb-modal__overlay-appear-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-enter-done:not(.smwb-fullscreen).smwb-darkBlured,.smwb-modal__overlay-exit:not(.smwb-fullscreen).smwb-darkBlured{background-color:#00000080;backdrop-filter:blur(5px)}}@media(min-width:800px){.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-dark{background-color:transparent;transition:background-color .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-blured{backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out}.smwb-modal__overlay-exit-active:not(.smwb-fullscreen).smwb-darkBlured{background-color:transparent;backdrop-filter:blur(0);transition:backdrop-filter .15s ease-in-out,background-color .15s ease-in-out}}.smwb-modal__overlay-exit-active .smwb-modal.smwb-fade{opacity:0;transition:opacity .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-scale{opacity:0;transform:scale(0);transition:opacity .15s ease-in-out,transform .15s ease-in-out}.smwb-modal__overlay-exit-active .smwb-modal.smwb-drop{opacity:0;transform:translateY(-100%);transition:opacity .15s ease-in-out,transform .15s ease-in-out}@media(max-width:800px){.smwb-modal.smwb-small,.smwb-modal.smwb-medium,.smwb-modal.smwb-large,.smwb-modal.smwb-fullscreen{width:100%;height:100%;max-height:none;border-radius:0}}@media(max-height:600px){.smwb-modal{min-height:250px;min-width:280px}}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-overflow-menu{display:inline-flex}.smwb-overflow-menu__item--danger{color:var(--smui-errorColor)}
|
|
1
|
+
.smwb-overflow-menu{display:inline-flex}.smwb-overflow-menu__item--danger:not(.smwb-menu__item--disabled){color:var(--smui-errorColor)}
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import '../../../assets/styles/less/components/confirmDialog/confirmDialog.entry.css';/* empty css */
|
|
3
3
|
import { useId as p } from "react";
|
|
4
4
|
import j from "clsx";
|
|
5
|
-
import { Modal as
|
|
5
|
+
import { Modal as r } from "../modal/modal.js";
|
|
6
6
|
import { Typography as b } from "../../dataDisplay/typography/typography.js";
|
|
7
7
|
import { Button as f } from "../../inputs/button/button.js";
|
|
8
8
|
function _(u) {
|
|
9
|
-
const { open: y, title: t, subject:
|
|
10
|
-
return /* @__PURE__ */
|
|
11
|
-
|
|
9
|
+
const { open: y, title: t, subject: i, message: n, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [i ? s : "", n ? d : ""].filter(Boolean).join(" ");
|
|
10
|
+
return /* @__PURE__ */ l(
|
|
11
|
+
r,
|
|
12
12
|
{
|
|
13
13
|
open: y,
|
|
14
|
-
onClose:
|
|
15
|
-
size: "
|
|
14
|
+
onClose: c,
|
|
15
|
+
size: "medium",
|
|
16
16
|
role: "alertdialog",
|
|
17
17
|
backdrop: "dark",
|
|
18
|
-
closeOnEsc: !
|
|
19
|
-
closeOnOutsideClick: !
|
|
18
|
+
closeOnEsc: !e,
|
|
19
|
+
closeOnOutsideClick: !e,
|
|
20
20
|
"aria-label": t,
|
|
21
21
|
...m ? { "aria-describedby": m } : {},
|
|
22
22
|
children: [
|
|
23
|
-
/* @__PURE__ */ o(
|
|
24
|
-
/* @__PURE__ */ o(
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
/* @__PURE__ */ o(r.Header, { children: t }),
|
|
24
|
+
/* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
|
|
25
|
+
i ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: i }) : null,
|
|
26
|
+
n ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: n }) : null
|
|
27
27
|
] }) }),
|
|
28
|
-
/* @__PURE__ */
|
|
29
|
-
/* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!
|
|
28
|
+
/* @__PURE__ */ l(r.Footer, { children: [
|
|
29
|
+
/* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
|
|
30
30
|
/* @__PURE__ */ o(
|
|
31
31
|
f,
|
|
32
32
|
{
|
|
33
33
|
variant: "contained",
|
|
34
34
|
size: "small",
|
|
35
35
|
color: h ? "error" : "primary",
|
|
36
|
-
disabled: !!
|
|
36
|
+
disabled: !!e,
|
|
37
37
|
onClick: g,
|
|
38
38
|
label: C
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n subject?: string;\n /** A secondary explanatory line (e.g. \"can't be undone\"). */\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /** Style the confirm button as destructive (red). */\n danger?: boolean;\n /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"
|
|
1
|
+
{"version":3,"file":"confirmDialog.js","sources":["../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n subject?: string;\n /** A secondary explanatory line (e.g. \"can't be undone\"). */\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /** Style the confirm button as destructive (red). */\n danger?: boolean;\n /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"medium\"\n role=\"alertdialog\"\n backdrop=\"dark\"\n closeOnEsc={!busy}\n closeOnOutsideClick={!busy}\n aria-label={title}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n >\n <Modal.Header>{title}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n {subject ? (\n <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n {subject}\n </Typography>\n ) : null}\n {message ? (\n <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n {message}\n </Typography>\n ) : null}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n <Button\n variant=\"contained\"\n size=\"small\"\n color={danger ? \"error\" : \"primary\"}\n disabled={!!busy}\n onClick={onConfirm}\n label={confirmLabel}\n />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;;AAgCO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,55 +1,56 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as f, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css */
|
|
3
|
-
import
|
|
3
|
+
import S from "clsx";
|
|
4
4
|
import { Modal as l } from "../modal/modal.js";
|
|
5
|
-
import { TextField as
|
|
6
|
-
import { Button as
|
|
5
|
+
import { TextField as T } from "../../inputs/textField/textField.js";
|
|
6
|
+
import { Button as h } from "../../inputs/button/button.js";
|
|
7
7
|
function H({
|
|
8
|
-
open:
|
|
8
|
+
open: e,
|
|
9
9
|
title: o,
|
|
10
10
|
nameLabel: t,
|
|
11
11
|
name: d,
|
|
12
12
|
onNameChange: s,
|
|
13
|
-
previewSrc:
|
|
14
|
-
onCapture:
|
|
13
|
+
previewSrc: p,
|
|
14
|
+
onCapture: w,
|
|
15
15
|
captureLabel: v,
|
|
16
16
|
busy: r,
|
|
17
|
-
confirmLabel:
|
|
18
|
-
cancelLabel:
|
|
19
|
-
onConfirm:
|
|
20
|
-
onClose:
|
|
21
|
-
children:
|
|
22
|
-
className:
|
|
17
|
+
confirmLabel: u,
|
|
18
|
+
cancelLabel: x,
|
|
19
|
+
onConfirm: k,
|
|
20
|
+
onClose: _,
|
|
21
|
+
children: m,
|
|
22
|
+
className: F
|
|
23
23
|
}) {
|
|
24
|
-
const
|
|
25
|
-
return /* @__PURE__ */
|
|
24
|
+
const j = s !== void 0 || d !== void 0;
|
|
25
|
+
return /* @__PURE__ */ f(l, { open: e, onClose: _, size: "medium", children: [
|
|
26
26
|
/* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
|
|
27
|
-
/* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
/* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ f("div", { className: S("smwb-save-asset-dialog__body", F), children: [
|
|
28
|
+
j ? /* @__PURE__ */ i(
|
|
29
|
+
T,
|
|
30
30
|
{
|
|
31
31
|
label: t != null ? t : "Name",
|
|
32
32
|
value: d != null ? d : "",
|
|
33
|
+
fullWidth: !0,
|
|
33
34
|
disabled: !!r,
|
|
34
|
-
onChange: (
|
|
35
|
+
onChange: (z) => s == null ? void 0 : s(z.currentTarget.value)
|
|
35
36
|
}
|
|
36
37
|
) : null,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
p ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: p, alt: "" }) }) : null,
|
|
39
|
+
w ? /* @__PURE__ */ i(
|
|
40
|
+
h,
|
|
40
41
|
{
|
|
41
42
|
variant: "outlined",
|
|
42
43
|
size: "small",
|
|
43
44
|
disabled: !!r,
|
|
44
|
-
onClick: () =>
|
|
45
|
+
onClick: () => w(),
|
|
45
46
|
label: v != null ? v : "Capture preview"
|
|
46
47
|
}
|
|
47
48
|
) : null,
|
|
48
|
-
|
|
49
|
+
m
|
|
49
50
|
] }) }),
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
/* @__PURE__ */ i(
|
|
52
|
-
/* @__PURE__ */ i(
|
|
51
|
+
/* @__PURE__ */ f(l.Footer, { children: [
|
|
52
|
+
/* @__PURE__ */ i(h, { variant: "text", disabled: !!r, onClick: () => _(), label: x != null ? x : "Cancel" }),
|
|
53
|
+
/* @__PURE__ */ i(h, { variant: "contained", disabled: !!r, onClick: () => k(), label: u != null ? u : "Save" })
|
|
53
54
|
] })
|
|
54
55
|
] });
|
|
55
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n open: boolean;\n title?: string;\n /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n nameLabel?: string;\n name?: string;\n onNameChange?: (name: string) => void;\n /** Preview image URL (e.g. a freshly captured thumbnail). */\n previewSrc?: string;\n /** Shows a Capture button when provided. */\n onCapture?: () => void;\n captureLabel?: string;\n /** Disables the actions + name field while a save/capture is in flight. */\n busy?: boolean;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm: () => void;\n onClose: () => void;\n /** Extra content between the name field/preview and the actions. */\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n open,\n title,\n nameLabel,\n name,\n onNameChange,\n previewSrc,\n onCapture,\n captureLabel,\n busy,\n confirmLabel,\n cancelLabel,\n onConfirm,\n onClose,\n children,\n className,\n}: SaveAssetDialogProps): React.ReactElement {\n const showNameField = onNameChange !== undefined || name !== undefined;\n\n return (\n <Modal open={open} onClose={onClose} size=\"
|
|
1
|
+
{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n open: boolean;\n title?: string;\n /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n nameLabel?: string;\n name?: string;\n onNameChange?: (name: string) => void;\n /** Preview image URL (e.g. a freshly captured thumbnail). */\n previewSrc?: string;\n /** Shows a Capture button when provided. */\n onCapture?: () => void;\n captureLabel?: string;\n /** Disables the actions + name field while a save/capture is in flight. */\n busy?: boolean;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm: () => void;\n onClose: () => void;\n /** Extra content between the name field/preview and the actions. */\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n open,\n title,\n nameLabel,\n name,\n onNameChange,\n previewSrc,\n onCapture,\n captureLabel,\n busy,\n confirmLabel,\n cancelLabel,\n onConfirm,\n onClose,\n children,\n className,\n}: SaveAssetDialogProps): React.ReactElement {\n const showNameField = onNameChange !== undefined || name !== undefined;\n\n return (\n <Modal open={open} onClose={onClose} size=\"medium\">\n <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n {showNameField ? (\n <TextField\n label={nameLabel ?? \"Name\"}\n value={name ?? \"\"}\n fullWidth\n disabled={!!busy}\n onChange={(event) => onNameChange?.(event.currentTarget.value)}\n />\n ) : null}\n {previewSrc ? (\n <div className=\"smwb-save-asset-dialog__preview\">\n <img src={previewSrc} alt=\"\" />\n </div>\n ) : null}\n {onCapture ? (\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={!!busy}\n onClick={() => onCapture()}\n label={captureLabel ?? \"Capture preview\"}\n />\n ) : null}\n {children}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { useId as p } from "react";
|
|
3
3
|
import j from "clsx";
|
|
4
4
|
import { Modal as r } from "../modal/modal.js";
|
|
5
5
|
import { Typography as b } from "../../dataDisplay/typography/typography.js";
|
|
6
6
|
import { Button as f } from "../../inputs/button/button.js";
|
|
7
7
|
function N(u) {
|
|
8
|
-
const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel:
|
|
9
|
-
return /* @__PURE__ */
|
|
8
|
+
const { open: y, title: t, subject: n, message: i, confirmLabel: C, cancelLabel: a, danger: h, busy: e, onConfirm: g, onCancel: c, className: x } = u, s = p(), d = p(), m = [n ? s : "", i ? d : ""].filter(Boolean).join(" ");
|
|
9
|
+
return /* @__PURE__ */ l(
|
|
10
10
|
r,
|
|
11
11
|
{
|
|
12
12
|
open: y,
|
|
13
|
-
onClose:
|
|
14
|
-
size: "
|
|
13
|
+
onClose: c,
|
|
14
|
+
size: "medium",
|
|
15
15
|
role: "alertdialog",
|
|
16
16
|
backdrop: "dark",
|
|
17
17
|
closeOnEsc: !e,
|
|
@@ -20,12 +20,12 @@ function N(u) {
|
|
|
20
20
|
...m ? { "aria-describedby": m } : {},
|
|
21
21
|
children: [
|
|
22
22
|
/* @__PURE__ */ o(r.Header, { children: t }),
|
|
23
|
-
/* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */
|
|
24
|
-
n ? /* @__PURE__ */ o(b, { id:
|
|
23
|
+
/* @__PURE__ */ o(r.Content, { children: /* @__PURE__ */ l("div", { className: j("smwb-confirm-dialog__body", x), children: [
|
|
24
|
+
n ? /* @__PURE__ */ o(b, { id: s, variant: "body2", color: "textPrimary", component: "span", children: n }) : null,
|
|
25
25
|
i ? /* @__PURE__ */ o(b, { id: d, variant: "caption", color: "textSecondary", component: "span", children: i }) : null
|
|
26
26
|
] }) }),
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick:
|
|
27
|
+
/* @__PURE__ */ l(r.Footer, { children: [
|
|
28
|
+
/* @__PURE__ */ o(f, { variant: "text", size: "small", disabled: !!e, onClick: c, label: a != null ? a : "Cancel" }),
|
|
29
29
|
/* @__PURE__ */ o(
|
|
30
30
|
f,
|
|
31
31
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n subject?: string;\n /** A secondary explanatory line (e.g. \"can't be undone\"). */\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /** Style the confirm button as destructive (red). */\n danger?: boolean;\n /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"
|
|
1
|
+
{"version":3,"file":"confirmDialog.js","sources":["../../../../../src/components/feedBack/confirmDialog/confirmDialog.tsx"],"sourcesContent":["import React, { useId } from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { Typography } from \"../../dataDisplay/typography\";\n\nexport interface ConfirmDialogProps {\n open: boolean;\n title: string;\n /** The subject of the action, shown emphasised on its own line (e.g. the asset name). */\n subject?: string;\n /** A secondary explanatory line (e.g. \"can't be undone\"). */\n message?: string;\n confirmLabel: string;\n cancelLabel?: string;\n /** Style the confirm button as destructive (red). */\n danger?: boolean;\n /** Disable the actions + gate Esc/outside-click while a confirm is in flight. */\n busy?: boolean;\n onConfirm: () => void;\n onCancel: () => void;\n className?: string;\n}\n\n/**\n * An alert/confirm dialog built on {@link Modal}: a title, an optional emphasised subject + secondary\n * message, and Cancel / Confirm actions. `role=\"alertdialog\"` with the subject + message wired to\n * `aria-describedby` so a screen reader announces the consequence, not just the title. While `busy`,\n * Escape + outside-click are gated and the buttons disabled. Pure presentation — the caller owns the\n * open state and the confirm/cancel handlers (and supplies localised labels).\n */\nexport function ConfirmDialog(props: ConfirmDialogProps): React.ReactElement {\n const { open, title, subject, message, confirmLabel, cancelLabel, danger, busy, onConfirm, onCancel, className } =\n props;\n\n const subjectId = useId();\n const messageId = useId();\n // Only describe when there IS something to describe — an empty aria-describedby would point a\n // screen reader at nothing.\n const describedBy = [subject ? subjectId : \"\", message ? messageId : \"\"].filter(Boolean).join(\" \");\n\n return (\n <Modal\n open={open}\n onClose={onCancel}\n size=\"medium\"\n role=\"alertdialog\"\n backdrop=\"dark\"\n closeOnEsc={!busy}\n closeOnOutsideClick={!busy}\n aria-label={title}\n {...(describedBy ? { \"aria-describedby\": describedBy } : {})}\n >\n <Modal.Header>{title}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-confirm-dialog__body\", className)}>\n {subject ? (\n <Typography id={subjectId} variant=\"body2\" color=\"textPrimary\" component=\"span\">\n {subject}\n </Typography>\n ) : null}\n {message ? (\n <Typography id={messageId} variant=\"caption\" color=\"textSecondary\" component=\"span\">\n {message}\n </Typography>\n ) : null}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" size=\"small\" disabled={!!busy} onClick={onCancel} label={cancelLabel ?? \"Cancel\"} />\n <Button\n variant=\"contained\"\n size=\"small\"\n color={danger ? \"error\" : \"primary\"}\n disabled={!!busy}\n onClick={onConfirm}\n label={confirmLabel}\n />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","props","open","title","subject","message","confirmLabel","cancelLabel","danger","busy","onConfirm","onCancel","className","subjectId","useId","messageId","describedBy","jsxs","Modal","jsx","cn","Typography","Button"],"mappings":";;;;;;AA+BO,SAASA,EAAcC,GAA+C;AAC3E,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,SAAAC,GAAS,cAAAC,GAAc,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,WAAAC,EAAA,IACnGX,GAEIY,IAAYC,EAAA,GACZC,IAAYD,EAAA,GAGZE,IAAc,CAACZ,IAAUS,IAAY,IAAIR,IAAUU,IAAY,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAhB;AAAA,MACA,SAASS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,YAAY,CAACF;AAAA,MACb,qBAAqB,CAACA;AAAA,MACtB,cAAYN;AAAA,MACX,GAAIa,IAAc,EAAE,oBAAoBA,EAAA,IAAgB,CAAA;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAG,EAACD,EAAM,QAAN,EAAc,UAAAf,EAAA,CAAM;AAAA,QACrB,gBAAAgB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,6BAA6BR,CAAS,GACtD,UAAA;AAAA,UAAAR,IACC,gBAAAe,EAACE,GAAA,EAAW,IAAIR,GAAW,SAAQ,SAAQ,OAAM,eAAc,WAAU,QACtE,UAAAT,EAAA,CACH,IACE;AAAA,UACHC,IACC,gBAAAc,EAACE,GAAA,EAAW,IAAIN,GAAW,SAAQ,WAAU,OAAM,iBAAgB,WAAU,QAC1E,UAAAV,EAAA,CACH,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACA,gBAAAY,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAO,SAAQ,QAAO,MAAK,SAAQ,UAAU,CAAC,CAACb,GAAM,SAASE,GAAU,OAAOJ,KAAA,OAAAA,IAAe,UAAU;AAAA,UACzG,gBAAAY;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOd,IAAS,UAAU;AAAA,cAC1B,UAAU,CAAC,CAACC;AAAA,cACZ,SAASC;AAAA,cACT,OAAOJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,54 +1,55 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { Modal as
|
|
4
|
-
import { TextField as
|
|
5
|
-
import { Button as
|
|
1
|
+
import { jsxs as f, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import S from "clsx";
|
|
3
|
+
import { Modal as l } from "../modal/modal.js";
|
|
4
|
+
import { TextField as T } from "../../inputs/textField/textField.js";
|
|
5
|
+
import { Button as h } from "../../inputs/button/button.js";
|
|
6
6
|
function D({
|
|
7
|
-
open:
|
|
7
|
+
open: k,
|
|
8
8
|
title: o,
|
|
9
9
|
nameLabel: t,
|
|
10
10
|
name: d,
|
|
11
11
|
onNameChange: s,
|
|
12
|
-
previewSrc:
|
|
13
|
-
onCapture:
|
|
12
|
+
previewSrc: w,
|
|
13
|
+
onCapture: _,
|
|
14
14
|
captureLabel: v,
|
|
15
|
-
busy:
|
|
16
|
-
confirmLabel:
|
|
17
|
-
cancelLabel:
|
|
18
|
-
onConfirm:
|
|
19
|
-
onClose:
|
|
20
|
-
children:
|
|
21
|
-
className:
|
|
15
|
+
busy: r,
|
|
16
|
+
confirmLabel: u,
|
|
17
|
+
cancelLabel: x,
|
|
18
|
+
onConfirm: p,
|
|
19
|
+
onClose: e,
|
|
20
|
+
children: F,
|
|
21
|
+
className: j
|
|
22
22
|
}) {
|
|
23
|
-
const
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */ i(
|
|
26
|
-
/* @__PURE__ */ i(
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
const m = s !== void 0 || d !== void 0;
|
|
24
|
+
return /* @__PURE__ */ f(l, { open: k, onClose: e, size: "medium", children: [
|
|
25
|
+
/* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
|
|
26
|
+
/* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ f("div", { className: S("smwb-save-asset-dialog__body", j), children: [
|
|
27
|
+
m ? /* @__PURE__ */ i(
|
|
28
|
+
T,
|
|
29
29
|
{
|
|
30
30
|
label: t != null ? t : "Name",
|
|
31
31
|
value: d != null ? d : "",
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
fullWidth: !0,
|
|
33
|
+
disabled: !!r,
|
|
34
|
+
onChange: (z) => s == null ? void 0 : s(z.currentTarget.value)
|
|
34
35
|
}
|
|
35
36
|
) : null,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
w ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: w, alt: "" }) }) : null,
|
|
38
|
+
_ ? /* @__PURE__ */ i(
|
|
39
|
+
h,
|
|
39
40
|
{
|
|
40
41
|
variant: "outlined",
|
|
41
42
|
size: "small",
|
|
42
|
-
disabled: !!
|
|
43
|
-
onClick: () =>
|
|
43
|
+
disabled: !!r,
|
|
44
|
+
onClick: () => _(),
|
|
44
45
|
label: v != null ? v : "Capture preview"
|
|
45
46
|
}
|
|
46
47
|
) : null,
|
|
47
|
-
|
|
48
|
+
F
|
|
48
49
|
] }) }),
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */ i(
|
|
51
|
-
/* @__PURE__ */ i(
|
|
50
|
+
/* @__PURE__ */ f(l.Footer, { children: [
|
|
51
|
+
/* @__PURE__ */ i(h, { variant: "text", disabled: !!r, onClick: () => e(), label: x != null ? x : "Cancel" }),
|
|
52
|
+
/* @__PURE__ */ i(h, { variant: "contained", disabled: !!r, onClick: () => p(), label: u != null ? u : "Save" })
|
|
52
53
|
] })
|
|
53
54
|
] });
|
|
54
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"saveAssetDialog.js","sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n open: boolean;\n title?: string;\n /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n nameLabel?: string;\n name?: string;\n onNameChange?: (name: string) => void;\n /** Preview image URL (e.g. a freshly captured thumbnail). */\n previewSrc?: string;\n /** Shows a Capture button when provided. */\n onCapture?: () => void;\n captureLabel?: string;\n /** Disables the actions + name field while a save/capture is in flight. */\n busy?: boolean;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm: () => void;\n onClose: () => void;\n /** Extra content between the name field/preview and the actions. */\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n open,\n title,\n nameLabel,\n name,\n onNameChange,\n previewSrc,\n onCapture,\n captureLabel,\n busy,\n confirmLabel,\n cancelLabel,\n onConfirm,\n onClose,\n children,\n className,\n}: SaveAssetDialogProps): React.ReactElement {\n const showNameField = onNameChange !== undefined || name !== undefined;\n\n return (\n <Modal open={open} onClose={onClose} size=\"
|
|
1
|
+
{"version":3,"file":"saveAssetDialog.js","sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n open: boolean;\n title?: string;\n /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n nameLabel?: string;\n name?: string;\n onNameChange?: (name: string) => void;\n /** Preview image URL (e.g. a freshly captured thumbnail). */\n previewSrc?: string;\n /** Shows a Capture button when provided. */\n onCapture?: () => void;\n captureLabel?: string;\n /** Disables the actions + name field while a save/capture is in flight. */\n busy?: boolean;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm: () => void;\n onClose: () => void;\n /** Extra content between the name field/preview and the actions. */\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n open,\n title,\n nameLabel,\n name,\n onNameChange,\n previewSrc,\n onCapture,\n captureLabel,\n busy,\n confirmLabel,\n cancelLabel,\n onConfirm,\n onClose,\n children,\n className,\n}: SaveAssetDialogProps): React.ReactElement {\n const showNameField = onNameChange !== undefined || name !== undefined;\n\n return (\n <Modal open={open} onClose={onClose} size=\"medium\">\n <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n <Modal.Content>\n <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n {showNameField ? (\n <TextField\n label={nameLabel ?? \"Name\"}\n value={name ?? \"\"}\n fullWidth\n disabled={!!busy}\n onChange={(event) => onNameChange?.(event.currentTarget.value)}\n />\n ) : null}\n {previewSrc ? (\n <div className=\"smwb-save-asset-dialog__preview\">\n <img src={previewSrc} alt=\"\" />\n </div>\n ) : null}\n {onCapture ? (\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={!!busy}\n onClick={() => onCapture()}\n label={captureLabel ?? \"Capture preview\"}\n />\n ) : null}\n {children}\n </div>\n </Modal.Content>\n <Modal.Footer>\n <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n </Modal.Footer>\n </Modal>\n );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;AAkCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}
|