@uzum-tech/ui 1.9.0 → 1.10.0

package/lib/crop/src/styles/index.cssr.js

@@ -0,0 +1,338 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-wrapper-border-radius
+// --u-wrapper-bg-color
+// --u-wrapper-width
+// --u-wrapper-height
+// --u-cropper-theme-color
+// --u-wrapper-margin
+exports.default = (0, cssr_1.c)([(0, cssr_1.c)([(0, cssr_1.c)('.cropper-container', {
+  direction: 'ltr',
+  fontSize: '0',
+  lineHeight: '0',
+  position: 'relative',
+  msTouchAction: 'none',
+  touchAction: 'none',
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none'
+}, [(0, cssr_1.c)('img', {
+  backfaceVisibility: 'hidden',
+  display: 'block',
+  height: '100%',
+  imageOrientation: '0deg',
+  maxHeight: 'none !important',
+  maxWidth: 'none !important',
+  minHeight: '0 !important',
+  minWidth: '0 !important',
+  width: '100%'
+})]), (0, cssr_1.c)('.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal', {
+  bottom: '0',
+  left: '0',
+  position: 'absolute',
+  right: '0',
+  top: '0'
+}), (0, cssr_1.c)('.cropper-wrap-box, .cropper-canvas', {
+  overflow: 'hidden'
+}), (0, cssr_1.c)('.cropper-drag-box', {
+  backgroundColor: '#fff',
+  opacity: '0'
+}), (0, cssr_1.c)('.cropper-modal', {
+  backgroundColor: '#000',
+  opacity: '0.5'
+}), (0, cssr_1.c)('.cropper-view-box', {
+  display: 'block',
+  height: '100%',
+  outline: '1px solid #39f',
+  outlineColor: 'rgba(51, 153, 255, 0.75)',
+  overflow: 'hidden',
+  width: '100%'
+}), (0, cssr_1.c)('.cropper-dashed', {
+  border: '0 dashed #eee',
+  display: 'block',
+  opacity: '0.5',
+  position: 'absolute'
+}, [(0, cssr_1.c)('&.dashed-h', {
+  borderBottomWidth: '1px',
+  borderTopWidth: '1px',
+  height: 'calc(100% / 3)',
+  left: '0',
+  top: 'calc(100% / 3)',
+  width: '100%'
+}), (0, cssr_1.c)('&.dashed-v', {
+  borderLeftWidth: '1px',
+  borderRightWidth: '1px',
+  height: '100%',
+  left: 'calc(100% / 3)',
+  top: '0',
+  width: 'calc(100% / 3)'
+})]), (0, cssr_1.c)('.cropper-center', {
+  display: 'block',
+  height: '0',
+  left: '50%',
+  opacity: '0.75',
+  position: 'absolute',
+  top: '50%',
+  width: '0'
+}, [(0, cssr_1.c)('&::before, &::after', {
+  backgroundColor: '#eee',
+  content: '" "',
+  display: 'block',
+  position: 'absolute'
+}), (0, cssr_1.c)('&::before', {
+  height: '1px',
+  left: '-3px',
+  top: '0',
+  width: '7px'
+}), (0, cssr_1.c)('&::after', {
+  height: '7px',
+  left: '0',
+  top: '-3px',
+  width: '1px'
+})]), (0, cssr_1.c)('.cropper-face, .cropper-line, .cropper-point', {
+  display: 'block',
+  height: '100%',
+  opacity: '0.1',
+  position: 'absolute',
+  width: '100%'
+}), (0, cssr_1.c)('.cropper-face', {
+  backgroundColor: '#fff',
+  left: '0',
+  top: '0'
+}), (0, cssr_1.c)('.cropper-line', {
+  backgroundColor: '#39f'
+}, [(0, cssr_1.c)('&.line-e', {
+  cursor: 'ew-resize',
+  right: '-3px',
+  top: '0',
+  width: '5px'
+}), (0, cssr_1.c)('&.line-n', {
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0',
+  top: '-3px'
+}), (0, cssr_1.c)('&.line-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  top: '0',
+  width: '5px'
+}), (0, cssr_1.c)('&.line-s', {
+  bottom: '-3px',
+  cursor: 'ns-resize',
+  height: '5px',
+  left: '0'
+})]), (0, cssr_1.c)('.cropper-point', {
+  backgroundColor: '#39f',
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+}, [(0, cssr_1.c)('&.point-e', {
+  cursor: 'ew-resize',
+  marginTop: '-3px',
+  right: '-3px',
+  top: '50%'
+}), (0, cssr_1.c)('&.point-n', {
+  cursor: 'ns-resize',
+  left: '50%',
+  marginLeft: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-w', {
+  cursor: 'ew-resize',
+  left: '-3px',
+  marginTop: '-3px',
+  top: '50%'
+}), (0, cssr_1.c)('&.point-s', {
+  bottom: '-3px',
+  cursor: 's-resize',
+  left: '50%',
+  marginLeft: '-3px'
+}), (0, cssr_1.c)('&.point-ne', {
+  cursor: 'nesw-resize',
+  right: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-nw', {
+  cursor: 'nwse-resize',
+  left: '-3px',
+  top: '-3px'
+}), (0, cssr_1.c)('&.point-sw', {
+  bottom: '-3px',
+  cursor: 'nesw-resize',
+  left: '-3px'
+}), (0, cssr_1.c)('&.point-se', {
+  bottom: '-3px',
+  cursor: 'nwse-resize',
+  height: '20px',
+  opacity: '1',
+  right: '-3px',
+  width: '20px'
+}, [(0, cssr_1.c)('&::before', {
+  backgroundColor: '#39f',
+  bottom: '-50%',
+  content: '" "',
+  display: 'block',
+  height: '200%',
+  opacity: '0',
+  position: 'absolute',
+  right: '-50%',
+  width: '200%'
+})])]), (0, cssr_1.c)('@media (min-width: 768px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '15px',
+  width: '15px'
+})]), (0, cssr_1.c)('@media (min-width: 992px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '10px',
+  width: '10px'
+})]), (0, cssr_1.c)('@media (min-width: 1200px)', [(0, cssr_1.c)('.cropper-point.point-se', {
+  height: '5px',
+  opacity: '0.75',
+  width: '5px'
+})]), (0, cssr_1.c)('.cropper-invisible', {
+  opacity: '0'
+}), (0, cssr_1.c)('.cropper-bg', {
+  backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")'
+}), (0, cssr_1.c)('.cropper-hide', {
+  display: 'block',
+  height: '0',
+  position: 'absolute',
+  width: '0'
+}), (0, cssr_1.c)('.cropper-hidden', {
+  display: 'none !important'
+}), (0, cssr_1.c)('.cropper-move', {
+  cursor: 'move'
+}), (0, cssr_1.c)('.cropper-crop', {
+  cursor: 'crosshair'
+}), (0, cssr_1.c)('.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point', {
+  cursor: 'not-allowed'
+})]), (0, cssr_1.cB)('crop-wrapper', `
+ overflow: hidden;
+ background-color: var(--u-wrapper-bg-color);
+ border-radius: var(--u-wrapper-border-radius);
+ width: var(--u-wrapper-width);
+ height: var(--u-wrapper-height);
+ margin: var(--u-wrapper-margin);
+ `, [(0, cssr_1.cM)('circle', '', [(0, cssr_1.c)(`.cropper-view-box, 
+ .cropper-face`, `
+ border-radius: 50%;
+ `)]), (0, cssr_1.c)('.cropper-view-box', `
+ outline: 0;
+ box-shadow: 0 0 0 1px var(--u-cropper-theme-color);
+ `), (0, cssr_1.c)(`.cropper-line,
+ .cropper-point`, `
+ background-color: var(--u-cropper-theme-color);
+ `), (0, cssr_1.c)(`
+ .point-e,
+ .point-n,
+ .point-w,
+ .point-s
+ `, `
+ display: none;
+ `), (0, cssr_1.c)('.point-se', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-sw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ bottom: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-nw', `
+ width: 4px !important;
+ height: 4px !important;
+ left: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ right: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)]), (0, cssr_1.c)('.point-ne', `
+ width: 4px !important;
+ height: 4px !important;
+ right: -4px !important;
+ top: -4px !important;
+ opacity: 1;
+ `, [(0, cssr_1.c)('&::before', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -16px !important;
+ width: 16px !important;
+ height: 4px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ opacity: 1 !important;
+ `), (0, cssr_1.c)('&::after', `
+ content: "" !important;
+ display: block !important;
+ position: absolute !important;
+ bottom: -16px !important;
+ left: 0px !important;
+ width: 4px !important;
+ height: 16px !important;
+ background-color: var(--u-cropper-theme-color) !important;
+ `)])]), (0, cssr_1.cB)('crop-img', `
+ display: block;
+ max-width: 100%;
+ `)]);

package/lib/crop/styles/_common.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    wrapperMargin: string;
+};
+export default _default;

package/lib/crop/styles/_common.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    wrapperMargin: '0 0 20px'
+};

package/lib/crop/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import { type CropTheme } from './light';
+declare const cropDark: CropTheme;
+export default cropDark;

package/lib/crop/styles/dark.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const cropDark = {
+    name: 'Crop',
+    common: common_1.commonDark,
+    peers: {},
+    self: light_1.self
+};
+exports.default = cropDark;

package/lib/crop/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as cropDark } from './dark';
+export { default as cropLight } from './light';
+export type { CropTheme, CropThemeVars } from './light';

package/lib/crop/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cropLight = exports.cropDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "cropDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "cropLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/crop/styles/light.d.ts

@@ -0,0 +1,14 @@
+import { ThemeCommonVars } from '../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+};
+export type CropThemeVars = ReturnType<typeof self>;
+declare const cropLight: import("../../_mixins").Theme<"Crop", {
+    wrapperBg: string;
+    wrapperBorderRadius: string;
+    wrapperMargin: string;
+}, {}>;
+export default cropLight;
+export type CropTheme = typeof cropLight;

package/lib/crop/styles/light.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const _common_1 = __importDefault(require("./_common"));
+const self = (vars) => {
+    const { elementsSenary, borderRadiusLarge } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { wrapperBg: elementsSenary, wrapperBorderRadius: borderRadiusLarge });
+};
+exports.self = self;
+const cropLight = (0, _mixins_1.createTheme)({
+    name: 'Crop',
+    common: common_1.commonLight,
+    peers: {},
+    self: exports.self
+});
+exports.default = cropLight;