react-dialogger 1.1.0

package/models/Dialog.js

@@ -0,0 +1,142 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var DialogBase_1 = __importDefault(require("../components/DialogBase"));
+var Dialog = /** @class */ (function (_super) {
+    __extends(Dialog, _super);
+    // This property holds a callback function that listens to state changes within the dialog. It is used to track or respond to changes in dialog state.
+    // private _stateListener: TDialogStateListenerCallbackType;
+    // This property stores the initial state of the dialog, which could include default settings or values before any interactions.
+    // private _initialState: TBaseDialogState;
+    // private _initialValues: TInitialValues<any>;
+    // This property represents the initial holder of the dialog. It is used before the dialog is shown, typically to manage resources or prepare the dialog for display (like loading animations or initial data).
+    // private _initialHolder: TInitialHolder;
+    // This property indicates where the dialog is accessed from, such as from a button or menu item, providing context about its origin.
+    // private _accessFrom: TAccessFrom;
+    // This property refers to the DOM element that will represent the dialog container on the web page. It is a `div` element dynamically created when the dialog is displayed.
+    // private _dom: HTMLDivElement;
+    // This property holds a function to handle keyboard events. It listens for key presses and performs actions based on the key and the current state of the dialog.
+    // private _keyboardListener: (key: string, dialog: Dialog) => void;
+    // This is a React reference (`RefObject`) used to access the dialog instance or DOM element directly within React components. It provides a way to interact with the DOM element programmatically without triggering re-renders.
+    // private readonly _innerRef: React.RefObject<any>;
+    // initialValues = ( values: T ): this => {
+    //     this._initialValues = values;
+    //     return this;
+    // }
+    function Dialog(dialogRef, options) {
+        var _this = _super.call(this) || this;
+        /** @deprecated use Dialog Options */
+        _this.setSize = function (size) {
+            _this._dialogSize = size;
+            return _this;
+        };
+        /**
+         * @deprecated
+         * @info Dialog ordering after of before Reference Dom Element
+         * This method is deprecated and will be removed in a future release.
+         * Please use an alternative approach for setting dialog ordering or layout.
+         * The dialog ordering functionality will be managed differently in future versions.
+         */
+        _this.setOrder = function (position, component) {
+            _this._order = { position: position, dom: component };
+            return _this;
+        };
+        _this.getDom = function () {
+            return _this._dom;
+        };
+        _this.show = function (callback) {
+            _super.prototype.show.call(_this, callback);
+        };
+        if (dialogRef) {
+            _this._innerRef = dialogRef;
+        }
+        if (options) {
+            _this._dialogOptions = options;
+        }
+        return _this;
+    }
+    /**
+     * @deprecated
+     * @see dialogOptions.snackbar.anchorOrigin */
+    Dialog.prototype.snackbarAnchor = function (anchor) {
+        this._snackbarAnchor = anchor;
+        return this;
+    };
+    Object.defineProperty(Dialog.prototype, "accessFrom", {
+        get: function () {
+            return this._accessFrom;
+        },
+        set: function (accessFrom) {
+            this._accessFrom = accessFrom;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Dialog.prototype.setHeader = function (header) {
+        _super.prototype.setHeader.call(this, header);
+        return this;
+    };
+    // setBody = ( body: CallbackFn['NodeFn'] ): Dialog => {
+    Dialog.prototype.setBody = function (body) {
+        _super.prototype.setBody.call(this, body);
+        return this;
+    };
+    Dialog.prototype.addActions = function (actions) {
+        _super.prototype.addActions.call(this, actions); // overrided
+        return this;
+    };
+    Dialog.prototype.addAction = function (action) {
+        _super.prototype.addAction.call(this, action);
+        return this;
+    };
+    /**
+     * Only from init */
+    Dialog.prototype.stateListener = function (listener) {
+        _super.prototype.stateListener.call(this, listener);
+        return this;
+    };
+    /**
+     * @deprecated
+     * @link initialValues */
+    // initialState = ( state: TBaseDialogState ): this => {
+    Dialog.prototype.initialState = function (state) {
+        console.warn('Dialog Warning', 'initialState not more supported, replace this with initialValues');
+        this._initialState = state;
+        return this;
+    };
+    Dialog.prototype.initialValues = function (values) {
+        this._initialValues = values;
+        return this;
+    };
+    Dialog.prototype.initialHolder = function (holder) {
+        _super.prototype.initialHolder.call(this, holder);
+        return this;
+    };
+    Dialog.prototype.onClose = function (callback) {
+        _super.prototype.onClose.call(this, callback);
+        return this;
+    };
+    Dialog.prototype.keyboardListener = function (listener) {
+        _super.prototype.keyboardListener.call(this, listener); // overrided and return current dialog instance directly
+        return this;
+    };
+    return Dialog;
+}(DialogBase_1.default));
+exports.default = Dialog;

package/models/DialogAction.d.ts

@@ -0,0 +1,54 @@
+import { TDialogStateListenerForActionCallbackType, DialogActionOptionsType, TBVariant, TBColor, ActionProps, DialogActionType } from "../types/DialogActionTypes";
+import DialogActionBase from "../components/DialogActionBase";
+import * as React from "react";
+declare const ActionProgress: () => React.JSX.Element;
+export { ActionProgress };
+declare class DialogAction extends DialogActionBase {
+    constructor(name: string, options?: DialogActionOptionsType);
+    setOptions: (options: DialogActionOptionsType) => this;
+    get options(): DialogActionOptionsType;
+    get name(): string;
+    /**
+     * @deprecated
+     * @see DialogActionOptionsType
+     * @info Define this prop inside new DialogAction('varName', {>here<})*/
+    setLabel: (label: string) => DialogAction;
+    getLabel: () => string;
+    onClick: (callback: DialogActionType) => this;
+    /**
+     * @deprecated
+     * @see onClickHandler */
+    getAction(): DialogActionType;
+    /**
+     * @deprecated
+     * @see DialogActionOptionsType
+     * @info Define this prop inside new DialogAction('varName', {>here<})*/
+    setVariant: (variant: TBVariant) => this;
+    getVariant: () => TBVariant;
+    /**
+     * @deprecated
+     * @see DialogActionOptionsType
+     * @info Define this prop inside new DialogAction('varName', {>here<})*/
+    setColor: (color: TBColor) => this;
+    getColor: () => TBColor;
+    /**
+     * Only from init */
+    stateListener: (listener: TDialogStateListenerForActionCallbackType) => this;
+    set baseDialogAction(baseDialogAction: DialogActionBase);
+    setInProcess: (inProcess: ActionProps['inProcess']) => this;
+    /**
+     * @deprecated
+     * @see isInProcess*/
+    getInProcess: () => boolean;
+    isInProcess: () => boolean;
+    /**
+     * @deprecated
+     * @see DialogActionOptionsType
+     * @info Define this prop inside new DialogAction('varName', {>here<})*/
+    setDisabled: (disabled: boolean) => this;
+    getDisabled: () => boolean;
+    isDisabled: () => boolean;
+    remove: () => void;
+    click: () => void;
+}
+export { DialogAction };

package/models/DialogAction.js

@@ -0,0 +1,277 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogAction = exports.ActionProgress = void 0;
+var DialogActionBase_1 = __importDefault(require("../components/DialogActionBase"));
+var CircularProgress_1 = __importDefault(require("../components/CircularProgress"));
+var React = __importStar(require("react"));
+var ActionProgress = function () {
+    return React.createElement(CircularProgress_1.default, { size: 20, inProcess: { inProcess: true } });
+};
+exports.ActionProgress = ActionProgress;
+var DialogAction = /** @class */ (function (_super) {
+    __extends(DialogAction, _super);
+    function DialogAction(name, options) {
+        var _this = _super.call(this) || this;
+        _this.setOptions = function (options) {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setOptions(options);
+                return _this;
+            }
+            // this._label = label;
+            _this._options = options;
+            return _this;
+        };
+        /**
+         * @deprecated
+         * @see DialogActionOptionsType
+         * @info Define this prop inside new DialogAction('varName', {>here<})*/
+        _this.setLabel = function (label) {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setLabel(label);
+                return _this;
+            }
+            if (_this._options) {
+                _this._options.label = label; // _options'ın başlatıldığını varsayarak erişim
+            }
+            else {
+                console.error('DialogAction _options is not initialized');
+            }
+            return _this;
+        };
+        _this.getLabel = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.getLabel();
+            }
+            return _this._options.label;
+        };
+        _this.onClick = function (callback) {
+            _super.prototype.onClick.call(_this, callback);
+            return _this;
+        };
+        /**
+         * @deprecated
+         * @see DialogActionOptionsType
+         * @info Define this prop inside new DialogAction('varName', {>here<})*/
+        _this.setVariant = function (variant) {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setVariant(variant);
+                return _this;
+            }
+            if (_this._options) {
+                _this._options.variant = variant; // _options'ın başlatıldığını varsayarak erişim
+            }
+            else {
+                console.error('DialogAction _options is not initialized');
+            }
+            return _this;
+        };
+        _this.getVariant = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.getVariant();
+            }
+            return _this._options.variant;
+        };
+        /**
+         * @deprecated
+         * @see DialogActionOptionsType
+         * @info Define this prop inside new DialogAction('varName', {>here<})*/
+        _this.setColor = function (color) {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setColor(color);
+                return _this;
+            }
+            if (_this._options) {
+                _this._options.color = color; // _options'ın başlatıldığını varsayarak erişim
+            }
+            else {
+                console.error('DialogAction _options is not initialized');
+            }
+            return _this;
+        };
+        _this.getColor = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.getColor();
+            }
+            return _this._options.color;
+        };
+        /**
+         * Only from init */
+        _this.stateListener = function (listener) {
+            _this._stateListener = listener;
+            return _this;
+        };
+        _this.setInProcess = function (inProcess) {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setInProcess(inProcess);
+                return _this;
+            }
+            _this._inProcess = inProcess;
+            return _this;
+        };
+        /**
+         * @deprecated
+         * @see isInProcess*/
+        _this.getInProcess = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.isInProcess();
+            }
+            return _this._inProcess;
+        };
+        _this.isInProcess = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.isInProcess();
+            }
+            return _this._inProcess;
+        };
+        /**
+         * @deprecated
+         * @see DialogActionOptionsType
+         * @info Define this prop inside new DialogAction('varName', {>here<})*/
+        _this.setDisabled = function (disabled) {
+            var _a, _b;
+            console.error('DialogAction _options is not initialized', (_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom);
+            if (((_b = _this._baseDialogAction) === null || _b === void 0 ? void 0 : _b.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.setDisabled(disabled);
+                return _this;
+            }
+            if (_this._options) {
+                _this._options.disabled = disabled; // _options'ın başlatıldığını varsayarak erişim
+            }
+            else {
+                console.error('DialogAction _options is not initialized');
+            }
+            return _this;
+        };
+        _this.getDisabled = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.getDisabled();
+            }
+            return _this._options.disabled;
+        };
+        _this.isDisabled = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return _this._baseDialogAction.isDisabled();
+            }
+            return _this._options.disabled;
+        };
+        _this.remove = function () {
+            var _a;
+            if (((_a = _this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                _this._baseDialogAction.remove();
+            }
+        };
+        _this.click = function () {
+            _this._baseDialogAction.click();
+        };
+        _this._name = name;
+        var defaultOptions = {
+            label: 'Button',
+            variant: 'contained',
+            color: 'default',
+            disabled: false,
+            prevDisabled: false
+        };
+        _this._options = __assign(__assign({}, defaultOptions), (options !== null && options !== void 0 ? options : {}));
+        return _this;
+    }
+    Object.defineProperty(DialogAction.prototype, "options", {
+        get: function () {
+            var _a;
+            if (((_a = this._baseDialogAction) === null || _a === void 0 ? void 0 : _a.dialogBaseComponent.parent.accessFrom) === "internal") {
+                return this._baseDialogAction.options;
+            }
+            return this._options;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DialogAction.prototype, "name", {
+        get: function () {
+            return this._name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @deprecated
+     * @see onClickHandler */
+    DialogAction.prototype.getAction = function () {
+        return this._onClick;
+    };
+    Object.defineProperty(DialogAction.prototype, "baseDialogAction", {
+        // getStateListener(): TDialogStateListenerForActionCallbackType {
+        //     return super.getStateListener();
+        // }
+        set: function (baseDialogAction) {
+            this._baseDialogAction = baseDialogAction;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return DialogAction;
+}(DialogActionBase_1.default));
+exports.DialogAction = DialogAction;

package/models/Resizeable.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent } from "react";
+declare class Resizeable {
+    onResizeListener: (callbackFn: (width: number, height: number) => void) => void;
+    get width(): number;
+    get height(): number;
+    get isResizing(): boolean;
+    private set isResizing(value);
+    private _onResizeListener;
+    private _isResizing;
+    private _container;
+    private _width;
+    private _height;
+    constructor();
+    setContainer: (container: HTMLElement) => void;
+    private resizeHandleMouseUp;
+    resizeHandleMouseDown: () => void;
+    resizeHandleMouseMove: (e: MouseEvent) => void;
+    init: () => void;
+    cleanUp: () => void;
+}
+export default Resizeable;

package/models/Resizeable.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var Resizeable = /** @class */ (function () {
+    function Resizeable() {
+        var _this = this;
+        this.onResizeListener = function (callbackFn) {
+            _this._onResizeListener = callbackFn;
+        };
+        this.setContainer = function (container) {
+            _this._container = container;
+        };
+        this.resizeHandleMouseUp = function () {
+            console.log('handleMouseUp', false);
+            _this._container.classList.remove('no-select-on-resize');
+            _this.isResizing = false;
+        };
+        this.resizeHandleMouseDown = function () {
+            console.log('resizeHandleMouseDown', true);
+            _this.isResizing = true;
+            _this._container.classList.add('no-select-on-resize');
+            _this.init();
+        };
+        this.resizeHandleMouseMove = function (e) {
+            if (!_this.isResizing || !_this._container)
+                return;
+            if (!_this._container) {
+                throw new Error('Please define container');
+            }
+            var container = _this._container;
+            var newWidth = e.clientX - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) + 10;
+            var newHeight = e.clientY - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().top) + 10;
+            _this._width = Math.max(newWidth, 100); // Minimum genişlik
+            _this._height = Math.max(newHeight, 100); // Minimum yükseklik
+            if (typeof _this._onResizeListener === "function") {
+                _this._onResizeListener(_this._width, _this._height);
+            }
+            _this._container.style.width = _this._width + 'px';
+            _this._container.style.height = _this._height + 'px';
+        };
+        this.init = function () {
+            if (_this.isResizing) {
+                // Fare olay dinleyicilerini ekliyoruz
+                // @ts-ignore
+                window.addEventListener('mousemove', _this.resizeHandleMouseMove);
+                window.addEventListener('mouseup', _this.resizeHandleMouseUp);
+            }
+            else {
+                // Fare olay dinleyicilerini kaldırıyoruz
+                // @ts-ignore
+                window.removeEventListener('mousemove', _this.resizeHandleMouseMove);
+                window.removeEventListener('mouseup', _this.resizeHandleMouseUp);
+            }
+        };
+        this.cleanUp = function () {
+            // @ts-ignore
+            window.removeEventListener('mousemove', _this.resizeHandleMouseMove);
+            window.removeEventListener('mouseup', _this.resizeHandleMouseUp);
+        };
+        this._isResizing = false;
+    }
+    Object.defineProperty(Resizeable.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizeable.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Resizeable.prototype, "isResizing", {
+        get: function () {
+            return this._isResizing;
+        },
+        set: function (value) {
+            this._isResizing = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Resizeable;
+}());
+exports.default = Resizeable;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-dialogger",
+  "version": "1.1.0",
+  "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
+  "main": "index.js",
+  "author": "Sueleyman Topaloglu",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "lodash.isequal": "^4.5.0",
+    "notistack": "^3.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-icons": "^5.5.0"
+  },
+  "scripts": {
+    "pb": "npm version patch && npm publish"
+  }
+}

package/styles/circular-progress.css

@@ -0,0 +1,42 @@
+.circular-root {
+  display: inline-block;
+  color: #1976d2;
+  -webkit-animation: animation-rotate 1.4s linear infinite;
+  animation: animation-rotate 1.4s linear infinite;
+}
+.circular-root .circular {
+  display: block;
+  width: min-content;
+}
+.circular-root .circular .circular-circle {
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: animation-snake 1.4s ease-in-out infinite;
+  animation: animation-snake 1.4s ease-in-out infinite;
+}
+
+@keyframes animation-snake {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+@keyframes animation-rotate {
+  0% {
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}