amotify 0.0.0

package/dist/@comps/Functions/Sheet/parts.js

@@ -0,0 +1,724 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sheet = void 0;
+var _global_1 = require("@global");
+var _atoms_1 = require("@atoms");
+var _mols_1 = require("@mols");
+var _functions_1 = require("@functions");
+var useEffect = React.useEffect, useState = React.useState;
+var style_module_scss_1 = __importDefault(require("./style.module.scss"));
+var Comps = {
+    contents: {},
+    Launch: function (params) {
+        params = __assign(__assign({ sheetID: $.uuidGen(), sheetGroups: params.sheetGroups || [], overwrap: params.type == 'custom' ? true : false, holdState: false }, params), { closeOption: __assign({ pageTransit: true, escapeKeyDown: true, aroundClick: false }, params.closeOption) });
+        if (this.contents[params.sheetID]) {
+            /** open Exist Sheet */
+            var component = _global_1.useStore.get(params.sheetID);
+            if (component && component.refresh)
+                component.refresh(params, true);
+            return;
+        }
+        /** create Sheet */
+        var Content = React.createElement(Comps.Core, __assign({}, params));
+        this.contents[params.sheetID] = {
+            open: true,
+            holdState: !!params.holdState,
+            params: params,
+            created_at: $.Time()
+        };
+        $('#SHEET')
+            .append("<div id=\"Sheet-".concat(params.sheetID, "\"></div>"))
+            .callback(function () {
+            (0, _global_1.LaunchReactApplication)({
+                baseElement: '#Sheet-' + params.sheetID,
+                reactElement: Content,
+            });
+        });
+    },
+    mainSheetScrolls: 0,
+    subSheetLength: 0,
+    Core: function (params) {
+        var _a;
+        var _b = __read(useState($.uuidGen()), 1), val_componentID = _b[0];
+        var _c = __read(useState(params), 2), val_params = _c[0], set_params = _c[1];
+        var _d = __read(useState(true), 2), val_open = _d[0], set_open = _d[1];
+        var type = val_params.type, sheetID = val_params.sheetID, openAfter = val_params.openAfter, closeAfter = val_params.closeAfter;
+        var isNewSheet = !params.overwrap;
+        var ContentFC = Comps.Types[{
+            'normal.topLeft': 'Normal',
+            'normal.topCenter': 'Normal',
+            'normal.topRight': 'Normal',
+            'normal.middleLeft': 'Normal',
+            'normal.middleCenter': 'Normal',
+            'normal.middleRight': 'Normal',
+            'normal.bottomLeft': 'Normal',
+            'normal.bottomCenter': 'Normal',
+            'normal.bottomRight': 'Normal',
+            'image': 'Normal',
+            'drawer.left': 'Edge',
+            'drawer.right': 'Edge',
+            'drawer.bottom': 'Bottom',
+            'custom': 'Custom',
+        }[type]];
+        useEffect(function () {
+            _global_1.useStore.set({
+                key: sheetID,
+                value: {
+                    refresh: function (params, open) {
+                        set_params(params);
+                        set_open(open !== null && open !== void 0 ? open : false);
+                    },
+                    resize: function (size) {
+                        if (type == 'drawer.bottom') {
+                            var component = _global_1.useStore.get(val_componentID);
+                            if (component && component.resize)
+                                component.resize(size);
+                        }
+                        else if (val_params.type.includes('normal') ||
+                            val_params.type.includes('drawer')) {
+                            set_params(__assign(__assign({}, val_params), { size: size }));
+                        }
+                    },
+                    close: function () {
+                        Comps.contents[sheetID].open = false;
+                        set_open(false);
+                    },
+                    open: function () {
+                        Comps.contents[sheetID].open = true;
+                        set_open(true);
+                    }
+                }
+            });
+        });
+        useEffect(function () {
+            var closeOption = params.closeOption;
+            $.fnScope(function () {
+                if (!(closeOption === null || closeOption === void 0 ? void 0 : closeOption.elementBlur))
+                    return;
+                var element = $(closeOption.elementBlur);
+                if (!element[0])
+                    return;
+                $(element).addEvent({
+                    eventID: 'SheetClosation-' + sheetID,
+                    eventType: 'mouseout',
+                    callback: function () {
+                        Sheet.close(sheetID);
+                        $().removeEvent('SheetClosation-' + sheetID);
+                    }
+                });
+            });
+        }, []);
+        useEffect(function () {
+            $.fnScope(function () {
+                // #ROOT
+                if (!isNewSheet)
+                    return;
+                Comps.subSheetLength = Comps.subSheetLength + (val_open ? 1 : -1);
+                if (val_open) {
+                    var html = $('html');
+                    if (Comps.subSheetLength == 1) {
+                        var scroll_1 = html[0].scrollTop;
+                        Comps.mainSheetScrolls = scroll_1;
+                    }
+                    if (!amotify.config.device.isBreakpoint()) {
+                        html
+                            .abort()
+                            .addClass(style_module_scss_1.default.FixHeight)
+                            .callback(function () {
+                            $('#ROOT')[0].scrollTop = Comps.mainSheetScrolls;
+                        })
+                            .addClass([
+                            style_module_scss_1.default.FloatMainSheet,
+                            style_module_scss_1.default['Type_' + type]
+                        ])[0].scrollTop = 0;
+                    }
+                }
+                else {
+                    if (Comps.subSheetLength != 0)
+                        return;
+                    if (amotify.config.device.isBreakpoint())
+                        return;
+                    var html = $('html');
+                    html
+                        .abort()
+                        .removeClass(style_module_scss_1.default.FloatMainSheet)
+                        .await(251)
+                        .removeClass(style_module_scss_1.default.FixHeight)
+                        .callback(function (html) {
+                        html[0].scrollTop = Comps.mainSheetScrolls | 0;
+                        $('#ROOT')[0].scrollTop = 0;
+                    });
+                }
+            });
+            $.fnScope(function () {
+                if (val_open) {
+                    $('#' + val_componentID)
+                        .abort()
+                        .await(10)
+                        .removeClass(style_module_scss_1.default.Hide)
+                        .await(10)
+                        .addClass(style_module_scss_1.default.Open)
+                        .callback(function () {
+                        if (openAfter)
+                            openAfter();
+                    });
+                }
+                else {
+                    $('#' + val_componentID)
+                        .abort()
+                        .await(10)
+                        .removeClass(style_module_scss_1.default.Open)
+                        .await(251)
+                        .addClass(style_module_scss_1.default.Hide)
+                        .callback(function () {
+                        !closeAfter || closeAfter();
+                        params.holdState || $.fnScope(function () {
+                            delete Comps.contents[sheetID];
+                            $('#Sheet-' + sheetID).remove();
+                            $().removeEvent('SheetClosation-' + sheetID);
+                        });
+                    });
+                }
+            });
+        }, [val_open]);
+        var _e = __read(type.split('.'), 2), Tcate = _e[0], Tpos = _e[1];
+        return (React.createElement(_atoms_1.Box, { className: [
+                style_module_scss_1.default.Wrap,
+                style_module_scss_1.default['Tcate_' + Tcate],
+                style_module_scss_1.default['Tpos_' + Tpos],
+                style_module_scss_1.default['isNewSheet_' + isNewSheet],
+            ].join(' '), width: 1, height: 0, ssAbsoluteCovered: true, freeCSS: {
+                zIndex: Object.keys(Comps.contents).length + 1
+            }, id: val_componentID },
+            React.createElement(_mols_1.Column, { className: style_module_scss_1.default.Content, gap: 0, height: 'viewHeight', overflow: 'auto', transition: 'middle' },
+                isNewSheet ? React.createElement(Comps.TapSensor, { sheetID: sheetID, delegateAroundClick: (_a = params.closeOption) === null || _a === void 0 ? void 0 : _a.aroundClick }) : null,
+                React.createElement(ContentFC, __assign({ componentID: val_componentID }, val_params)))));
+    },
+    Types: {
+        Normal: function (params) {
+            var sheetID = params.sheetID, Content = params.content, _a = params.className, className = _a === void 0 ? '' : _a, type = params.type, _b = params.size, size = _b === void 0 ? 'R' : _b, freeCSS = params.freeCSS, styles = __rest(params, ["sheetID", "content", "className", "type", "size", "freeCSS"]);
+            var _c = __read(type.split('.'), 2), Tcate = _c[0], Tpos = _c[1];
+            var SysStyles = {};
+            var transformOrigins = [];
+            if (Tpos.match(/top/)) {
+                transformOrigins.push('top');
+                SysStyles.marginBottom = 'auto';
+            }
+            else if (Tpos.match(/middle/)) {
+                transformOrigins.push('center');
+                SysStyles.marginTop = 'auto';
+                SysStyles.marginBottom = 'auto';
+            }
+            else if (Tpos.match(/bottom/)) {
+                transformOrigins.push('bottom');
+                SysStyles.marginTop = 'auto';
+            }
+            if (Tpos.match(/left/i)) {
+                transformOrigins.push('left');
+                SysStyles.marginRight = 'auto';
+            }
+            else if (Tpos.match(/center/i)) {
+                transformOrigins.push('center');
+                SysStyles.marginLeft = 'auto';
+                SysStyles.marginRight = 'auto';
+            }
+            else if (Tpos.match(/right/i)) {
+                transformOrigins.push('right');
+                SysStyles.marginLeft = 'auto';
+            }
+            return (React.createElement(_atoms_1.Box, __assign({ className: [
+                    style_module_scss_1.default.BB,
+                    className
+                ].join(' '), transition: 'long', opacity: 'trans' }, SysStyles, styles, { freeCSS: __assign({ width: {
+                        'S': '26rem',
+                        'R': '36rem',
+                        'L': '44rem',
+                        '2L': '60rem',
+                        '3L': '72rem',
+                        'MAX': '95vw'
+                    }[size], maxWidth: '96vw', transformOrigin: transformOrigins.join(' ') }, freeCSS), children: $.is.function(Content) ? React.createElement(Content, null) : Content })));
+        },
+        Edge: function (params) {
+            var sheetID = params.sheetID, type = params.type, Content = params.content, _a = params.className, className = _a === void 0 ? '' : _a, _b = params.size, size = _b === void 0 ? 'R' : _b, freeCSS = params.freeCSS, styles = __rest(params, ["sheetID", "type", "content", "className", "size", "freeCSS"]);
+            return (React.createElement(_atoms_1.Box, __assign({ opacity: 'trans', transition: 'long', position: 'relative', backgroundColor: '1.layer.base', flexSizing: 'none', minHeight: 'viewHeight', boxShadow: 3, className: [
+                    style_module_scss_1.default.BB,
+                    className
+                ].join(' ') }, type == 'drawer.right' ? {
+                marginLeft: 'auto'
+            } : type == 'drawer.left' ? {
+                marginRight: 'auto'
+            } : {}, styles, { freeCSS: __assign({ width: {
+                        'S': '20rem',
+                        'R': '27rem',
+                        'L': '32rem',
+                        '2L': '40rem',
+                        '3L': '58rem',
+                        'MAX': '95vw'
+                    }[size] }, freeCSS), children: $.is.function(Content) ? React.createElement(Content, null) : Content })));
+        },
+        Bottom: function (params) {
+            var componentID = params.componentID, sheetID = params.sheetID, Content = params.content, _a = params.size, size = _a === void 0 ? 'R' : _a, sizeChanged = params.sizeChanged, baseStyles = params.baseStyles, _b = params.closeOption, _c = _b === void 0 ? {} : _b, _d = _c.swipeDown, swipeDown = _d === void 0 ? true : _d, styles = __rest(params, ["componentID", "sheetID", "content", "size", "sizeChanged", "baseStyles", "closeOption"]);
+            var screen = $.getScreenSize();
+            var sizeArray = [0, .2, .6, .95];
+            var SizeSets = {
+                'ZERO': 0,
+                'S': 1,
+                'R': 2,
+                'L': 3
+            };
+            var _e = __read(useState(size), 2), val_stableSize = _e[0], set_stableSize = _e[1];
+            var _f = __read(useState({
+                process: false,
+                processStart: 0,
+                originY: 0,
+                originValue: 0,
+                viewHeight: 0,
+                value: sizeArray[SizeSets[size]]
+            }), 2), val_edit = _f[0], set_edit = _f[1];
+            _global_1.useStore.update({
+                key: componentID,
+                value: {
+                    val_edit: val_edit,
+                    resize: function (size) {
+                        var Size = sizeArray[SizeSets[size]];
+                        set_edit(__assign(__assign({}, val_edit), { value: Size }));
+                        set_stableSize(size);
+                    }
+                }
+            });
+            var Effects = {
+                Start: function (event) {
+                    $(document)
+                        .addEvent({ eventID: 'BottomSheetMouseMove', eventType: 'mousemove', callback: Effects.Move })
+                        .addEvent({ eventID: 'BottomSheetTouchMove', eventType: 'touchmove', callback: Effects.Move })
+                        .addEvent({ eventID: 'BottomSheetMouseUp', eventType: 'mouseup', callback: Effects.End })
+                        .addEvent({ eventID: 'BottomSheetTouchEnd', eventType: 'touchend', callback: Effects.End });
+                    var cursor = $.getCursor(event);
+                    var newEditInfo = __assign(__assign({}, val_edit), { process: true, processStart: new Date().getTime(), originY: cursor.y, originValue: val_edit.value, viewHeight: $.getScreenSize().height });
+                    _global_1.useStore.update({
+                        key: componentID,
+                        value: {
+                            val_edit: newEditInfo
+                        }
+                    });
+                    set_edit(newEditInfo);
+                },
+                Move: function (event) {
+                    var _a;
+                    var editInfo = (_a = _global_1.useStore.get(componentID)) === null || _a === void 0 ? void 0 : _a.val_edit;
+                    if (!editInfo.process)
+                        return;
+                    var margin = $.getCursor(event).y - editInfo.originY;
+                    var marginRate = margin / editInfo.viewHeight;
+                    var newRate = editInfo.originValue - marginRate;
+                    if (newRate > .95) {
+                        var margin_1 = newRate - .95;
+                        newRate = .95 + margin_1 * .5;
+                    }
+                    else if (newRate < .2) {
+                        var margin_2 = .2 - newRate;
+                        margin_2 -= .1;
+                        newRate = .1 + (.1 - margin_2) * .5;
+                    }
+                    set_edit(__assign(__assign({}, editInfo), { value: newRate }));
+                },
+                End: function (event) {
+                    var _a;
+                    var editInfo = (_a = _global_1.useStore.get(componentID)) === null || _a === void 0 ? void 0 : _a.val_edit;
+                    if (!editInfo.process)
+                        return;
+                    $(document).removeEvent([
+                        'BottomSheetMouseMove',
+                        'BottomSheetTouchMove',
+                        'BottomSheetMouseUp',
+                        'BottomSheetTouchEnd'
+                    ]);
+                    var sizeIndex = 0;
+                    if (editInfo.value < .1) {
+                    }
+                    else if (editInfo.value < .5) {
+                        sizeIndex = 1;
+                    }
+                    else if (editInfo.value > .75) {
+                        sizeIndex = 3;
+                    }
+                    else {
+                        sizeIndex = 2;
+                    }
+                    var ms = new Date().getTime() - editInfo.processStart;
+                    if (ms < 300) {
+                        var margin = $.getCursor(event).y - editInfo.originY;
+                        if (Math.abs(margin) >= 20) {
+                            var dir = Number(margin < 0) * 2 - 1;
+                            sizeIndex += dir;
+                            sizeIndex = Math.min(Math.max(sizeIndex, 0), sizeArray.length - 1);
+                        }
+                    }
+                    if (sizeIndex == 0) {
+                        if (!swipeDown)
+                            sizeIndex = 1;
+                    }
+                    set_stableSize(['ZERO', 'S', 'R', 'L'][sizeIndex]);
+                    set_edit(__assign(__assign({}, editInfo), { value: sizeArray[sizeIndex], process: false }));
+                }
+            };
+            var mounted = React.useRef(false);
+            useEffect(function () {
+                if (mounted.current) {
+                    if (val_stableSize == 'ZERO') {
+                        if (swipeDown)
+                            Sheet.close(sheetID);
+                    }
+                    else {
+                        setTimeout(function () {
+                            if (params.sizeChanged)
+                                params.sizeChanged(val_stableSize);
+                        }, 250);
+                    }
+                }
+                else {
+                    mounted.current = true;
+                }
+            }, [val_stableSize]);
+            return (React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.BB, margin: [0, 'auto'], marginTop: 'auto', opacity: 'trans', width: 1, transition: 'long', freeCSS: __assign({ maxWidth: 12 * 60, height: screen.height * val_edit.value }, val_edit.process ? {
+                    transition: '0s'
+                } : {}) },
+                React.createElement(_mols_1.Column, __assign({ gap: 0, flexSizing: 'none', borderTopLeftRadius: '1.tone.primary', borderTopRightRadius: '1.tone.primary', border: true, borderBottom: 'unset', boxShadow: 3, position: 'relative', overflow: 'hidden', height: 1 }, baseStyles),
+                    React.createElement(_atoms_1.Flex, { verticalAlign: 'center', flexChilds: 'even', padding: '1/2', backgroundColor: '1.layer.base', position: 'relative', freeCSS: {
+                            userSelect: 'none'
+                        } },
+                        React.createElement(_mols_1.Row.Center, null,
+                            React.createElement(_atoms_1.Box, { padding: '2/3', onMouseDown: Effects.Start, onTouchStart: Effects.Start, ssPushable: true, isRounded: true, freeCSS: {
+                                    cursor: 'grab',
+                                    userSelect: 'none'
+                                } },
+                                React.createElement(_atoms_1.Box, { unitWidth: 6, unitHeight: '1/2', backgroundColor: '5.layer.darker', isRounded: true, className: style_module_scss_1.default.DragBar }))),
+                        React.createElement(_mols_1.Row.Right, null,
+                            React.createElement(_functions_1.Buttons.Button.Sub.R, { color: 'cloud', ssSphere: 2, onClick: function () {
+                                    Sheet.close(sheetID);
+                                } },
+                                React.createElement(_atoms_1.FAIcon.Times, null)))),
+                    React.createElement(_atoms_1.Box, __assign({ backgroundColor: '1.layer.base', flexSizing: 0, overflow: 'auto' }, styles, { children: $.is.function(Content) ? React.createElement(Content, null) : Content })))));
+        },
+        Custom: function (params) {
+            var sheetID = params.sheetID, parent = params.parent, _a = params.gravityPoint, GPT = _a === void 0 ? 22 : _a, Content = params.content, others = __rest(params, ["sheetID", "parent", "gravityPoint", "content"]);
+            var _b = __read(React.useState($.uuidGen()), 1), val_componentID = _b[0];
+            var Parent = $(parent);
+            var Query = '[data-sheet-id="' + val_componentID + '"]';
+            var ContentQuery = '[data-sheet-content="' + val_componentID + '"]';
+            GPT = GPT;
+            var column = GPT % 5 || 5;
+            var row = Math.ceil(GPT / 5);
+            var getWrapperCSS = function () {
+                var WrapperCSS = {};
+                var _a = Parent.position(), top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, height = _a.height, width = _a.width;
+                if ([1, 2].includes(column)) {
+                    WrapperCSS.left = left;
+                }
+                else if (column == 3) {
+                    WrapperCSS.left = left + width / 2;
+                }
+                else if ([4, 5].includes(column)) {
+                    WrapperCSS.left = right;
+                }
+                if (GPT <= 10) {
+                    WrapperCSS.top = top;
+                }
+                else if (GPT <= 15) {
+                    WrapperCSS.top = top + height / 2;
+                }
+                else if (GPT <= 25) {
+                    WrapperCSS.top = bottom;
+                }
+                return WrapperCSS;
+            };
+            var _c = __read(React.useState(getWrapperCSS()), 2), val_Styles = _c[0], set_Styles = _c[1];
+            var AdjustExtrusion = function () {
+                var ContentRect = $(ContentQuery).position();
+                var screen = $.getScreenSize();
+                var newStyles = __assign({}, val_Styles);
+                if (ContentRect.top < 0) {
+                    if (ContentRect.height < screen.height) {
+                        newStyles.top = ContentRect.top - ContentRect.top;
+                    }
+                }
+                if (ContentRect.left < 0) {
+                    if (ContentRect.width < screen.width) {
+                        newStyles.left = ContentRect.left - ContentRect.left;
+                    }
+                }
+                if (ContentRect.right > screen.width) {
+                    if (ContentRect.width < screen.width) {
+                        var shift = ContentRect.right - screen.width;
+                        newStyles.left = ContentRect.left - shift;
+                    }
+                }
+                if (ContentRect.bottom > screen.height) {
+                    if (ContentRect.height < screen.height) {
+                        var shift = ContentRect.bottom - screen.height;
+                        newStyles.top = ContentRect.top - shift;
+                    }
+                }
+                return newStyles;
+            };
+            React.useEffect(function () {
+                $(Query)
+                    .await(10)
+                    .addClass(style_module_scss_1.default.Open)
+                    .await(250)
+                    .callback(function () {
+                    set_Styles(AdjustExtrusion());
+                });
+                _global_1.useStore.update({
+                    key: 'customSheet-' + params.sheetID,
+                    value: {
+                        reposition: function () {
+                            setTimeout(function () {
+                                set_Styles(AdjustExtrusion());
+                            }, 200);
+                        }
+                    }
+                });
+            }, []);
+            if (!Parent[0])
+                return (null);
+            return (React.createElement(_atoms_1.Box, { className: [
+                    style_module_scss_1.default.BB,
+                    style_module_scss_1.default.CustomSheet
+                ].join(' '), "data-sheet-id": val_componentID, transition: 'long', opacity: 'trans', position: 'absolute', width: 0, height: 0, flexCenter: true, freeCSS: val_Styles },
+                React.createElement(_atoms_1.Flex, { className: [
+                        style_module_scss_1.default.GPT,
+                        style_module_scss_1.default['GPT_' + GPT],
+                        style_module_scss_1.default['Col_' + column],
+                        style_module_scss_1.default['Row_' + row],
+                    ].join(' '), position: 'absolute' },
+                    React.createElement(_atoms_1.Box, __assign({ flexSizing: 'none', "data-sheet-content": val_componentID }, others, { children: $.is.function(Content) ? React.createElement(Content, null) : Content })))));
+        },
+    },
+    TapSensor: function (params) { return (React.createElement(_functions_1.Buttons.Button.Plain, { className: style_module_scss_1.default.TapSensor, onClick: function () {
+            var _a;
+            if ((_a = params.delegateAroundClick) !== null && _a !== void 0 ? _a : false)
+                Sheet.close(params.sheetID);
+        }, freeCSS: {
+            cursor: 'default'
+        } },
+        React.createElement(_atoms_1.Box, { className: style_module_scss_1.default.TapContent }))); }
+};
+$(document)
+    .addEvent({
+    eventType: 'keyup',
+    callback: function (event) {
+        var _a = event, key = _a.key, metaKey = _a.metaKey;
+        if (key == 'Escape' || key == ',' && metaKey) {
+            var OpenSheets = Object.values(Comps.contents).filter(function (elm) { return elm.open; });
+            if (!OpenSheets.length)
+                return;
+            var latestSheet = OpenSheets.reduce(function (a, b) {
+                return a.created_at.value > b.created_at.value ? a : b;
+            });
+            Sheet.close(latestSheet.params.sheetID);
+        }
+    }
+})
+    .addEvent({
+    eventType: 'click',
+    callback: function (event) {
+        var _a;
+        var customSheets = Object.values(Comps.contents).filter(function (elm) { return elm.params.type == 'custom'; });
+        if (!customSheets.length)
+            return;
+        var isParent = !!customSheets.find(function (customSheet) {
+            var params = customSheet.params;
+            var Parent = $(params.parent);
+            var Target = $(event.target);
+            return Parent[0] == Target[0] || !!Parent.find(Target).length;
+        });
+        if (isParent)
+            return;
+        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('.' + style_module_scss_1.default.CustomSheet))
+            return;
+        customSheets.forEach(function (customSheets) {
+            var _a;
+            if (!!((_a = customSheets.params.closeOption) === null || _a === void 0 ? void 0 : _a.aroundClick)) {
+                Sheet.close(customSheets.params.sheetID);
+            }
+        });
+    }
+});
+var Sheet = {
+    open: function (params) {
+        params.sheetID = (params.sheetID || '').replace(/\./g, '-');
+        if (params.type == 'image') {
+            var _a = params, type = _a.type, _b = _a.sheetID, sheetID_1 = _b === void 0 ? $.uuidGen() : _b, src_1 = _a.src, others = __rest(_a, ["type", "sheetID", "src"]);
+            Sheet.open(__assign(__assign({ type: 'normal.topCenter', sheetID: sheetID_1, backgroundColor: 'trans', boxShadow: 'none' }, others), { closeOption: __assign({}, params.closeOption), freeCSS: {
+                    maxWidth: '96vw',
+                    transformOrigin: 'top'
+                }, content: function () {
+                    var _a = __read(useState($.flatArray(src_1)), 1), val_image = _a[0];
+                    var _b = __read(useState(0), 2), val_viewIndex = _b[0], set_viewIndex = _b[1];
+                    var Radio = [];
+                    var Slides = [];
+                    val_image.forEach(function (src, index) {
+                        Radio.push({
+                            value: index,
+                            label: React.createElement(_atoms_1.Img, { src: $.flatArray(src)[0], width: 'auto', height: 1, freeCSS: {
+                                    maxHeight: 12 * 3
+                                } })
+                        });
+                        Slides.push(React.createElement(_atoms_1.Img, { width: 1, height: 'auto', src: $.flatArray(src)[0] }));
+                    });
+                    return (React.createElement(_mols_1.Column, { gap: 0 },
+                        React.createElement(_mols_1.Row.Separate, { gap: 2, padding: 1, backgroundColor: '1.layer.base', borderTopLeftRadius: '1.tone.primary', borderTopRightRadius: '1.tone.primary' },
+                            React.createElement(_functions_1.Input.Radio, { tone: 'border', icon: false, value: val_viewIndex, override: 'force', horizontalAlign: 'center', onUpdateValidValue: function (_a) {
+                                    var value = _a.value;
+                                    set_viewIndex(value[0]);
+                                }, cellStyles: {
+                                    borderWidth: 2,
+                                    padding: '1/3'
+                                }, options: Radio }),
+                            React.createElement(_functions_1.Buttons.Button.Sub.R, { color: 'cloud', ssSphere: 3, fontSize: '4.thirdTitle', onClick: function () {
+                                    Sheet.close(sheetID_1);
+                                } },
+                                React.createElement(_atoms_1.FAIcon.Times, null))),
+                        React.createElement(_functions_1.Layout.SwipeView, { slideIndex: val_viewIndex, options: {
+                                loop: val_image.length > 1,
+                                onSlideCallback: function (index) {
+                                    set_viewIndex(index);
+                                }
+                            }, slides: Slides, wrapper: function (View) { return (React.createElement(_atoms_1.Box, { borderBottomLeftRadius: '1.tone.primary', borderBottomRightRadius: '1.tone.primary' }, View)); } })));
+                } }));
+            return;
+        }
+        Comps.Launch(params);
+    },
+    refresh: function (params, open) {
+        params.sheetID = (params.sheetID || '').replace(/\./g, '-');
+        var component = _global_1.useStore.get(params.sheetID);
+        if (component && component.refresh)
+            component.refresh(params, open);
+    },
+    resize: function (params) {
+        params.sheetID = (params.sheetID || '').replace(/\./g, '-');
+        var component = _global_1.useStore.get(params.sheetID);
+        if (component && component.resize)
+            component.resize(params.size);
+    },
+    reposition: function (sheetID) {
+        var Comps = _global_1.useStore.get('customSheet-' + sheetID);
+        if (Comps && Comps.reposition)
+            Comps.reposition();
+    },
+    close: function (sheetID, et) {
+        var _a;
+        var Content;
+        sheetID = sheetID === null || sheetID === void 0 ? void 0 : sheetID.replace(/\./g, '-');
+        Content = Comps.contents[sheetID];
+        if (!Content)
+            return;
+        if (et == 'escape' && !((_a = Content.params.closeOption) === null || _a === void 0 ? void 0 : _a.escapeKeyDown))
+            return;
+        {
+            var params = Content.params;
+            var sheetID_2 = params.sheetID;
+            var component = _global_1.useStore.get(sheetID_2);
+            if (component && component.close)
+                component.close();
+        }
+    },
+    closeGroup: function (sheetGroup) {
+        var e_1, _a;
+        var _b;
+        sheetGroup = (sheetGroup || '').replace(/\./g, '-');
+        try {
+            for (var _c = __values(Object.entries(Comps.contents)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), key = _e[0], value = _e[1];
+                if ((_b = value.params.sheetGroups) === null || _b === void 0 ? void 0 : _b.includes(sheetGroup))
+                    Sheet.close(key);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    },
+    closeAll: function (pageTransit) {
+        var e_2, _a;
+        var _b;
+        try {
+            for (var _c = __values(Object.entries(Comps.contents)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var _e = __read(_d.value, 2), key = _e[0], value = _e[1];
+                if (pageTransit) {
+                    if (((_b = value.params.closeOption) === null || _b === void 0 ? void 0 : _b.pageTransit) == false)
+                        continue;
+                }
+                Sheet.close(key, 'pageTransit');
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    },
+    Comps: {
+        Body: function (params) { return (React.createElement(_atoms_1.Box, __assign({ className: style_module_scss_1.default.BaseBody, backgroundColor: '1.layer.base', borderRadius: '1.tone.primary', position: 'relative', boxShadow: 3, transition: 'long' }, params))); },
+    }
+};
+exports.Sheet = Sheet;