@redocly/theme 0.1.16 → 0.1.17

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.
@@ -6,5 +6,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.jsonStyles = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
- exports.jsonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .redoc-json code > .collapser {\n display: none;\n pointer-events: none;\n }\n\n contain: content;\n overflow-x: auto;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n .callback-function {\n color: gray;\n }\n\n .collapser:after {\n content: '-';\n cursor: pointer;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n margin-left: 2ch;\n }\n\n .hoverable {\n padding: 1px 2px;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 4px;\n left: -1.5em;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n padding: 2px;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0 0 0 26px;\n }\n\n li {\n position: relative;\n display: block;\n }\n\n .hoverable {\n display: inline-block;\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inherit;\n }\n"], ["\n .redoc-json code > .collapser {\n display: none;\n pointer-events: none;\n }\n\n contain: content;\n overflow-x: auto;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n .callback-function {\n color: gray;\n }\n\n .collapser:after {\n content: '-';\n cursor: pointer;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n margin-left: 2ch;\n }\n\n .hoverable {\n padding: 1px 2px;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 4px;\n left: -1.5em;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n padding: 2px;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0 0 0 26px;\n }\n\n li {\n position: relative;\n display: block;\n }\n\n .hoverable {\n display: inline-block;\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inherit;\n }\n"])));
9
+ exports.jsonStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n\n & > .collapser {\n display: none;\n pointer-events: none;\n }\n }\n\n contain: content;\n overflow-x: auto;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n .callback-function {\n color: gray;\n }\n\n .collapser:after {\n content: '-';\n cursor: pointer;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n margin-left: 2ch;\n }\n\n .hoverable {\n padding: 1px 2px;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 4px;\n left: -1.5em;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n padding: 2px;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0 0 0 26px;\n }\n\n li {\n position: relative;\n display: block;\n }\n\n .hoverable {\n display: inline-block;\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inherit;\n }\n"], ["\n .redoc-json code {\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n padding: inherit;\n border: none;\n\n & > .collapser {\n display: none;\n pointer-events: none;\n }\n }\n\n contain: content;\n overflow-x: auto;\n padding: 10px;\n border-radius: var(--global-border-radius);\n background-color: var(--samples-panel-controls-background-color);\n color: var(--color-content-inverse);\n font-size: var(--code-font-size);\n font-family: var(--code-font-family);\n white-space: var(--code-wrap, pre);\n\n .callback-function {\n color: gray;\n }\n\n .collapser:after {\n content: '-';\n cursor: pointer;\n }\n\n .collapsed > .collapser:after {\n content: '+';\n cursor: pointer;\n }\n\n .ellipsis:after {\n content: ' \u2026 ';\n }\n\n .collapsible {\n margin-left: 2ch;\n }\n\n .hoverable {\n padding: 1px 2px;\n }\n\n .hovered {\n background-color: rgba(235, 238, 249, 1);\n }\n\n .collapser {\n background-color: transparent;\n border: 0;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 4px;\n left: -1.5em;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n padding: 2px;\n font-family: var(--code-font-family);\n font-size: var(--code-font-size);\n &:focus {\n outline: #fff dotted 1px;\n }\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n margin: 0 0 0 26px;\n }\n\n li {\n position: relative;\n display: block;\n }\n\n .hoverable {\n display: inline-block;\n }\n\n .selected {\n outline-width: 1px;\n outline-style: dotted;\n }\n\n .collapsed > .collapsible {\n display: none;\n }\n\n .ellipsis {\n display: none;\n }\n\n .collapsed > .ellipsis {\n display: inherit;\n }\n"])));
10
10
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.1.16",
3
+ "version": "0.1.17",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -1,9 +1,16 @@
1
1
  import { css } from 'styled-components';
2
2
 
3
3
  export const jsonStyles = css`
4
- .redoc-json code > .collapser {
5
- display: none;
6
- pointer-events: none;
4
+ .redoc-json code {
5
+ background-color: var(--samples-panel-controls-background-color);
6
+ color: var(--color-content-inverse);
7
+ padding: inherit;
8
+ border: none;
9
+
10
+ & > .collapser {
11
+ display: none;
12
+ pointer-events: none;
13
+ }
7
14
  }
8
15
 
9
16
  contain: content;
@@ -6,4 +6,23 @@ export class ClipboardService {
6
6
  static copyCustom(text: string): Promise<void> {
7
7
  return navigator.clipboard.writeText(text);
8
8
  }
9
+
10
+ static selectElement(element: HTMLDivElement | null): void {
11
+ if (!element) {
12
+ return;
13
+ }
14
+ let range;
15
+ let selection;
16
+ if ((document.body as any).createTextRange) {
17
+ range = (document.body as any).createTextRange();
18
+ range.moveToElementText(element);
19
+ range.select();
20
+ } else if (document.createRange && window.getSelection) {
21
+ selection = window.getSelection();
22
+ range = document.createRange();
23
+ range.selectNodeContents(element);
24
+ selection?.removeAllRanges();
25
+ selection?.addRange(range);
26
+ }
27
+ }
9
28
  }
@@ -1,4 +1,5 @@
1
1
  export declare class ClipboardService {
2
2
  static isSupported(): boolean;
3
3
  static copyCustom(text: string): Promise<void>;
4
+ static selectElement(element: HTMLDivElement | null): void;
4
5
  }
@@ -10,6 +10,25 @@ var ClipboardService = /** @class */ (function () {
10
10
  ClipboardService.copyCustom = function (text) {
11
11
  return navigator.clipboard.writeText(text);
12
12
  };
13
+ ClipboardService.selectElement = function (element) {
14
+ if (!element) {
15
+ return;
16
+ }
17
+ var range;
18
+ var selection;
19
+ if (document.body.createTextRange) {
20
+ range = document.body.createTextRange();
21
+ range.moveToElementText(element);
22
+ range.select();
23
+ }
24
+ else if (document.createRange && window.getSelection) {
25
+ selection = window.getSelection();
26
+ range = document.createRange();
27
+ range.selectNodeContents(element);
28
+ selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
29
+ selection === null || selection === void 0 ? void 0 : selection.addRange(range);
30
+ }
31
+ };
13
32
  return ClipboardService;
14
33
  }());
15
34
  exports.ClipboardService = ClipboardService;