@limetech/lime-elements 37.26.3 → 37.26.5
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/CHANGELOG.md +17 -0
- package/dist/cjs/limel-circular-progress.cjs.entry.js +1 -1
- package/dist/cjs/limel-circular-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +32 -26
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +6 -3
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/collection/components/circular-progress/circular-progress.css +599 -20
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +3 -7
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js +31 -25
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.css +98 -146
- package/dist/collection/components/text-editor/text-editor.js +5 -2
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-circular-progress.entry.js +1 -1
- package/dist/esm/limel-circular-progress.entry.js.map +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +32 -26
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +6 -3
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-48d4564a.entry.js +2 -0
- package/dist/lime-elements/p-48d4564a.entry.js.map +1 -0
- package/dist/lime-elements/{p-e8a2ebd5.entry.js → p-71cd8be1.entry.js} +2 -2
- package/dist/lime-elements/p-71cd8be1.entry.js.map +1 -0
- package/dist/lime-elements/p-f340d860.entry.js +2 -0
- package/dist/lime-elements/{p-c316e9a6.entry.js.map → p-f340d860.entry.js.map} +1 -1
- package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts +2 -1
- package/dist/types/components/text-editor/text-editor.d.ts +1 -1
- package/package.json +1 -1
- package/dist/lime-elements/p-a77a0fa8.entry.js +0 -2
- package/dist/lime-elements/p-a77a0fa8.entry.js.map +0 -1
- package/dist/lime-elements/p-c316e9a6.entry.js +0 -2
- package/dist/lime-elements/p-e8a2ebd5.entry.js.map +0 -1
|
@@ -18,6 +18,31 @@ import { textEditorMenuItems } from './menu/menu-items';
|
|
|
18
18
|
*/
|
|
19
19
|
export class ProsemirrorAdapter {
|
|
20
20
|
constructor() {
|
|
21
|
+
this.initializeEditor = () => {
|
|
22
|
+
this.actionBarItems = textEditorMenuItems;
|
|
23
|
+
const mySchema = new Schema({
|
|
24
|
+
nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
|
|
25
|
+
marks: schema.spec.marks,
|
|
26
|
+
});
|
|
27
|
+
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
28
|
+
state: EditorState.create({
|
|
29
|
+
doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
|
|
30
|
+
plugins: exampleSetup({
|
|
31
|
+
schema: mySchema,
|
|
32
|
+
menuBar: false,
|
|
33
|
+
}),
|
|
34
|
+
}),
|
|
35
|
+
dispatchTransaction: (transaction) => {
|
|
36
|
+
const newState = this.view.state.apply(transaction);
|
|
37
|
+
this.view.updateState(newState);
|
|
38
|
+
this.change.emit(this.getHTML());
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
42
|
+
if (this.value) {
|
|
43
|
+
this.view.dom.innerHTML = this.value;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
21
46
|
this.getHTML = () => {
|
|
22
47
|
if (this.view.dom.textContent === '') {
|
|
23
48
|
return '';
|
|
@@ -42,37 +67,18 @@ export class ProsemirrorAdapter {
|
|
|
42
67
|
this.view = undefined;
|
|
43
68
|
this.actionBarItems = [];
|
|
44
69
|
}
|
|
70
|
+
componentDidLoad() {
|
|
71
|
+
// Stencil complains loudly about triggering rerenders in
|
|
72
|
+
// componentDidLoad, but we have to, so we're using setTimeout to
|
|
73
|
+
// suppress the warning. /Ads
|
|
74
|
+
setTimeout(this.initializeEditor, 0);
|
|
75
|
+
}
|
|
45
76
|
render() {
|
|
46
77
|
return [
|
|
47
78
|
h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, onItemSelected: this.handleActionBarItem }),
|
|
48
79
|
h("div", { id: "editor" }),
|
|
49
80
|
];
|
|
50
81
|
}
|
|
51
|
-
componentDidLoad() {
|
|
52
|
-
this.actionBarItems = textEditorMenuItems;
|
|
53
|
-
const mySchema = new Schema({
|
|
54
|
-
nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
|
|
55
|
-
marks: schema.spec.marks,
|
|
56
|
-
});
|
|
57
|
-
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
58
|
-
state: EditorState.create({
|
|
59
|
-
doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
|
|
60
|
-
plugins: exampleSetup({
|
|
61
|
-
schema: mySchema,
|
|
62
|
-
menuBar: false,
|
|
63
|
-
}),
|
|
64
|
-
}),
|
|
65
|
-
dispatchTransaction: (transaction) => {
|
|
66
|
-
const newState = this.view.state.apply(transaction);
|
|
67
|
-
this.view.updateState(newState);
|
|
68
|
-
this.change.emit(this.getHTML());
|
|
69
|
-
},
|
|
70
|
-
});
|
|
71
|
-
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
72
|
-
if (this.value) {
|
|
73
|
-
this.view.dom.innerHTML = this.value;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
82
|
executeCommand(command) {
|
|
77
83
|
const { state } = this.view;
|
|
78
84
|
const selection = state.selection;
|
package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;GAQG;AAMH,MAAM,OAAO,kBAAkB;;
|
|
1
|
+
{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { MenuCommandFactory } from './menu/menu-commands';\nimport { textEditorMenuItems } from './menu/menu-items';\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-prosemirror-adapter',\n shadow: true,\n styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n /**\n * The value of the editor, expected to be serialised HTML\n */\n @Prop()\n public value: string;\n\n @Element()\n private host: HTMLLimelTextEditorElement;\n\n @State()\n private view: EditorView;\n\n @State()\n private actionBarItems: Array<ActionBarItem | ListSeparator> = [];\n\n private menuCommandFactory: MenuCommandFactory;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n private change: EventEmitter<string>;\n\n public componentDidLoad() {\n // Stencil complains loudly about triggering rerenders in\n // componentDidLoad, but we have to, so we're using setTimeout to\n // suppress the warning. /Ads\n setTimeout(this.initializeEditor, 0);\n }\n\n public render() {\n return [\n <limel-action-bar\n accessibleLabel=\"Toolbar\"\n actions={this.actionBarItems}\n onItemSelected={this.handleActionBarItem}\n />,\n <div id=\"editor\" />,\n ];\n }\n\n private initializeEditor = () => {\n this.actionBarItems = textEditorMenuItems;\n\n const mySchema = new Schema({\n nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n marks: schema.spec.marks,\n });\n\n this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: EditorState.create({\n doc: DOMParser.fromSchema(mySchema).parse(\n this.host.shadowRoot.querySelector('#editor'),\n ),\n plugins: exampleSetup({\n schema: mySchema,\n menuBar: false,\n }),\n }),\n dispatchTransaction: (transaction) => {\n const newState = this.view.state.apply(transaction);\n this.view.updateState(newState);\n\n this.change.emit(this.getHTML());\n },\n },\n );\n\n this.menuCommandFactory = new MenuCommandFactory(mySchema);\n\n if (this.value) {\n this.view.dom.innerHTML = this.value;\n }\n };\n\n private getHTML = (): string => {\n if (this.view.dom.textContent === '') {\n return '';\n } else {\n return this.view.dom.innerHTML;\n }\n };\n\n private handleActionBarItem = (event: CustomEvent<ActionBarItem>) => {\n event.preventDefault();\n\n const { text } = event.detail;\n const mark = text.replace(/\\s/g, '').toLowerCase();\n try {\n const command = this.menuCommandFactory.createCommand(mark);\n this.executeCommand(command);\n } catch (error) {\n throw new Error(`Error executing command: ${error}`);\n }\n };\n\n private executeCommand(command) {\n const { state } = this.view;\n const selection = state.selection;\n\n let transaction = state.tr;\n\n if (!selection.empty) {\n transaction.setSelection(selection);\n }\n\n command(state, (tr) => {\n transaction = tr;\n });\n this.view.dispatch(transaction);\n\n this.view.focus();\n }\n}\n"]}
|
|
@@ -65,124 +65,6 @@
|
|
|
65
65
|
);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.lime-empty-value-for-readonly {
|
|
69
|
-
z-index: 1;
|
|
70
|
-
position: absolute;
|
|
71
|
-
top: 0.875rem;
|
|
72
|
-
left: 1rem;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.lime-looks-like-input-value {
|
|
76
|
-
line-height: 1.75rem;
|
|
77
|
-
-moz-osx-font-smoothing: grayscale;
|
|
78
|
-
-webkit-font-smoothing: antialiased;
|
|
79
|
-
color: rgba(var(--contrast-1400), 1);
|
|
80
|
-
font-size: 0.875rem;
|
|
81
|
-
font-weight: 400;
|
|
82
|
-
letter-spacing: 0.009375em;
|
|
83
|
-
}
|
|
84
|
-
.mdc-text-field--disabled .lime-looks-like-input-value {
|
|
85
|
-
cursor: not-allowed;
|
|
86
|
-
opacity: 0.4;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
:host(limel-text-editor) {
|
|
90
|
-
position: relative;
|
|
91
|
-
isolation: isolate;
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
width: 100%;
|
|
95
|
-
min-height: max(4rem, 100%);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
fieldset {
|
|
99
|
-
flex-grow: 1;
|
|
100
|
-
min-width: 0;
|
|
101
|
-
min-height: 0;
|
|
102
|
-
height: 100%;
|
|
103
|
-
max-height: 100%;
|
|
104
|
-
padding-inline-start: 0 !important;
|
|
105
|
-
padding-inline-end: 0 !important;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
legend {
|
|
109
|
-
position: relative;
|
|
110
|
-
z-index: 2;
|
|
111
|
-
margin-left: 0.75rem;
|
|
112
|
-
max-width: calc(100% - 1.5rem) !important;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
:host(limel-text-editor[readonly]) limel-markdown {
|
|
116
|
-
display: block;
|
|
117
|
-
padding: 0.75rem;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/*
|
|
121
|
-
* This file is imported into every component!
|
|
122
|
-
*
|
|
123
|
-
* Nothing in this file may output any CSS
|
|
124
|
-
* without being explicitly called by outside code.
|
|
125
|
-
*/
|
|
126
|
-
/*
|
|
127
|
-
* This file is imported into every component that uses MDC!
|
|
128
|
-
*
|
|
129
|
-
* Anything in this file that generates CSS output on its own,
|
|
130
|
-
* without being explicitly used, will output that CSS in every
|
|
131
|
-
* single component, increasing the size of the production build.
|
|
132
|
-
* Avoid that unless there's very good reason for it!
|
|
133
|
-
*/
|
|
134
|
-
/*
|
|
135
|
-
* This file is imported into every component that uses MDC!
|
|
136
|
-
*
|
|
137
|
-
* Anything in this file that generates CSS output on its own,
|
|
138
|
-
* without being explicitly used, will output that CSS in every
|
|
139
|
-
* single component, increasing the size of the production build.
|
|
140
|
-
* Avoid that unless there's very good reason for it!
|
|
141
|
-
*/
|
|
142
|
-
:host {
|
|
143
|
-
--mdc-theme-primary: var(
|
|
144
|
-
--lime-primary-color,
|
|
145
|
-
rgb(var(--color-teal-default))
|
|
146
|
-
);
|
|
147
|
-
--mdc-theme-secondary: var(
|
|
148
|
-
--lime-secondary-color,
|
|
149
|
-
rgb(var(--contrast-1100))
|
|
150
|
-
);
|
|
151
|
-
--mdc-theme-on-primary: var(
|
|
152
|
-
--lime-on-primary-color,
|
|
153
|
-
rgb(var(--contrast-100))
|
|
154
|
-
);
|
|
155
|
-
--mdc-theme-on-secondary: var(
|
|
156
|
-
--lime-on-secondary-color,
|
|
157
|
-
rgb(var(--contrast-100))
|
|
158
|
-
);
|
|
159
|
-
--mdc-theme-text-disabled-on-background: var(
|
|
160
|
-
--lime-text-disabled-on-background-color,
|
|
161
|
-
rgba(var(--contrast-1700), 0.38)
|
|
162
|
-
);
|
|
163
|
-
--mdc-theme-text-primary-on-background: var(
|
|
164
|
-
--lime-text-primary-on-background-color,
|
|
165
|
-
rgba(var(--contrast-1700), 0.87)
|
|
166
|
-
);
|
|
167
|
-
--mdc-theme-text-secondary-on-background: var(
|
|
168
|
-
--lime-text-secondary-on-background-color,
|
|
169
|
-
rgba(var(--contrast-1700), 0.54)
|
|
170
|
-
);
|
|
171
|
-
--mdc-theme-error: var(
|
|
172
|
-
--lime-error-background-color,
|
|
173
|
-
rgb(var(--color-red-dark))
|
|
174
|
-
);
|
|
175
|
-
--lime-error-text-color: rgb(var(--color-red-darker));
|
|
176
|
-
--mdc-theme-surface: var(
|
|
177
|
-
--lime-surface-background-color,
|
|
178
|
-
rgb(var(--contrast-100))
|
|
179
|
-
);
|
|
180
|
-
--mdc-theme-on-surface: var(
|
|
181
|
-
--lime-on-surface-color,
|
|
182
|
-
rgb(var(--contrast-1500))
|
|
183
|
-
);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
68
|
/**
|
|
187
69
|
* Note! This file is exported to `dist/scss/` in the published
|
|
188
70
|
* node module, for consumer projects to import.
|
|
@@ -236,45 +118,115 @@ legend {
|
|
|
236
118
|
* 2. the CSS variables of `--kompendium-example-font-family`
|
|
237
119
|
* in the `<style>` tag of `index.html`.
|
|
238
120
|
*/
|
|
239
|
-
|
|
121
|
+
.lime-empty-value-for-readonly {
|
|
122
|
+
z-index: 1;
|
|
123
|
+
position: absolute;
|
|
124
|
+
top: 0.875rem;
|
|
125
|
+
left: 1rem;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.lime-looks-like-input-value {
|
|
129
|
+
line-height: 1.75rem;
|
|
130
|
+
-moz-osx-font-smoothing: grayscale;
|
|
131
|
+
-webkit-font-smoothing: antialiased;
|
|
132
|
+
color: rgba(var(--contrast-1400), 1);
|
|
133
|
+
font-size: 0.875rem;
|
|
134
|
+
font-weight: 400;
|
|
135
|
+
letter-spacing: 0.009375em;
|
|
136
|
+
}
|
|
137
|
+
.mdc-text-field--disabled .lime-looks-like-input-value {
|
|
138
|
+
cursor: not-allowed;
|
|
139
|
+
opacity: 0.4;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
* {
|
|
240
143
|
box-sizing: border-box;
|
|
241
|
-
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
242
|
-
border: 1px solid;
|
|
243
|
-
border-radius: 0.25rem;
|
|
244
|
-
margin-inline-start: 0;
|
|
245
|
-
margin-inline-end: 0;
|
|
246
|
-
padding-block-start: 0;
|
|
247
|
-
padding-inline-start: 0.75rem;
|
|
248
|
-
padding-inline-end: 0.75rem;
|
|
249
|
-
padding-block-end: 0.75rem;
|
|
250
144
|
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
145
|
+
|
|
146
|
+
:host(limel-text-editor) {
|
|
147
|
+
--limel-text-editor-padding: 0.75rem;
|
|
148
|
+
position: relative;
|
|
149
|
+
isolation: isolate;
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
width: 100%;
|
|
153
|
+
min-width: 5rem;
|
|
154
|
+
min-height: 4rem;
|
|
155
|
+
height: 100%;
|
|
156
|
+
max-height: 100%;
|
|
254
157
|
}
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
158
|
+
|
|
159
|
+
:host(limel-text-editor:not([readonly])) {
|
|
160
|
+
--limel-text-editor-outline-color: rgba(var(--contrast-700), 0.65);
|
|
161
|
+
--limel-text-editor-background-color: rgba(var(--contrast-200), 0.5);
|
|
162
|
+
--limel-text-editor-label-color: rgba(var(--contrast-1200), 1);
|
|
258
163
|
}
|
|
259
|
-
|
|
260
|
-
|
|
164
|
+
|
|
165
|
+
:host(limel-text-editor[readonly]) {
|
|
166
|
+
--limel-text-editor-outline-color: transparent;
|
|
167
|
+
min-height: 2.5rem;
|
|
261
168
|
}
|
|
262
|
-
|
|
263
|
-
|
|
169
|
+
:host(limel-text-editor[readonly]) limel-markdown {
|
|
170
|
+
display: block;
|
|
171
|
+
padding: var(--limel-text-editor-padding);
|
|
264
172
|
}
|
|
265
|
-
|
|
266
|
-
|
|
173
|
+
|
|
174
|
+
.notched-outline {
|
|
175
|
+
position: absolute;
|
|
176
|
+
inset: 0;
|
|
177
|
+
display: flex;
|
|
178
|
+
background-color: var(--limel-text-editor-background-color);
|
|
267
179
|
}
|
|
268
180
|
|
|
269
|
-
|
|
270
|
-
|
|
181
|
+
.leading-outline,
|
|
182
|
+
.notch,
|
|
183
|
+
.trailing-outline {
|
|
184
|
+
border-width: 1px;
|
|
185
|
+
border-style: solid;
|
|
186
|
+
border-color: var(--limel-text-editor-outline-color);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.leading-outline {
|
|
190
|
+
flex-shrink: 0;
|
|
191
|
+
width: 0.75rem;
|
|
192
|
+
border-right-width: 0;
|
|
193
|
+
border-top-left-radius: 0.25rem;
|
|
194
|
+
border-bottom-left-radius: 0.25rem;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.notch {
|
|
198
|
+
flex-shrink: 0;
|
|
199
|
+
position: relative;
|
|
200
|
+
z-index: 2;
|
|
201
|
+
border-top-width: 0;
|
|
202
|
+
border-right-width: 0;
|
|
203
|
+
border-left-width: 0;
|
|
204
|
+
max-width: calc(100% - 1.5rem);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.trailing-outline {
|
|
208
|
+
flex-grow: 1;
|
|
209
|
+
border-left-width: 0;
|
|
210
|
+
border-top-right-radius: 0.25rem;
|
|
211
|
+
border-bottom-right-radius: 0.25rem;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
label {
|
|
215
|
+
transform: translateY(-50%);
|
|
271
216
|
overflow: hidden;
|
|
272
217
|
white-space: nowrap;
|
|
273
218
|
text-overflow: ellipsis;
|
|
274
|
-
|
|
275
|
-
|
|
219
|
+
display: block;
|
|
220
|
+
padding: 0 0.25rem;
|
|
221
|
+
color: var(--limel-text-editor-label-color);
|
|
276
222
|
font-size: 0.65rem;
|
|
277
223
|
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
|
|
278
|
-
|
|
279
|
-
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
limel-prosemirror-adapter {
|
|
227
|
+
flex-grow: 1;
|
|
228
|
+
min-width: 0;
|
|
229
|
+
min-height: 0;
|
|
230
|
+
height: 100%;
|
|
231
|
+
overflow: hidden auto;
|
|
280
232
|
}
|
|
@@ -30,7 +30,10 @@ export class TextEditor {
|
|
|
30
30
|
this.value = undefined;
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return
|
|
33
|
+
return [
|
|
34
|
+
h("span", { class: "notched-outline" }, h("span", { class: "leading-outline" }), this.renderLabel(), h("span", { class: "trailing-outline" })),
|
|
35
|
+
this.renderEditor(),
|
|
36
|
+
];
|
|
34
37
|
}
|
|
35
38
|
renderEditor() {
|
|
36
39
|
if (this.readonly && !this.value) {
|
|
@@ -45,7 +48,7 @@ export class TextEditor {
|
|
|
45
48
|
if (!this.label) {
|
|
46
49
|
return;
|
|
47
50
|
}
|
|
48
|
-
return h("
|
|
51
|
+
return (h("span", { class: "notch" }, h("label", null, this.label)));
|
|
49
52
|
}
|
|
50
53
|
static get is() { return "limel-text-editor"; }
|
|
51
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;IAwGX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EA/CK,MAAM;IACT,OAAO;MACH,YAAM,KAAK,EAAC,iBAAiB;QACzB,YAAM,KAAK,EAAC,iBAAiB,GAAG;QAC/B,IAAI,CAAC,WAAW,EAAE;QACnB,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B;MACP,IAAI,CAAC,YAAY,EAAE;KACtB,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,OAAO;MACf,iBAAQ,IAAI,CAAC,KAAK,CAAS,CACxB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return [\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>,\n this.renderEditor(),\n ];\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label>{this.label}</label>\n </span>\n );\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h } from './index-6156b4fd.js';
|
|
|
2
2
|
import { a as abbreviate } from './format-57cd836a.js';
|
|
3
3
|
import './_commonjsHelpers-5ec8f9b7.js';
|
|
4
4
|
|
|
5
|
-
const circularProgressCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=x-small]) .value{letter-spacing:-0.0625rem}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=small]) .value{letter-spacing:-0.03125rem}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
|
|
5
|
+
const circularProgressCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=x-small]) .value{letter-spacing:-0.0625rem}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=small]) .value{letter-spacing:-0.03125rem}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style*=\"--percentage: 0%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 1%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 2%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 3%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 4%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 5%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 6%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 7%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 8%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 9%\"]{--circular-progress-fill-color:var(\n --color-percent--0to10\n )}.displays-percentage-colors[style*=\"--percentage: 10%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 11%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 12%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 13%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 14%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 15%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 16%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 17%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 18%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 19%\"]{--circular-progress-fill-color:var(\n --color-percent--10to20\n )}.displays-percentage-colors[style*=\"--percentage: 20%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 21%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 22%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 23%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 24%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 25%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 26%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 27%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 28%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 29%\"]{--circular-progress-fill-color:var(\n --color-percent--20to30\n )}.displays-percentage-colors[style*=\"--percentage: 30%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 31%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 32%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 33%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 34%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 35%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 36%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 37%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 38%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 39%\"]{--circular-progress-fill-color:var(\n --color-percent--30to40\n )}.displays-percentage-colors[style*=\"--percentage: 40%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 41%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 42%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 43%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 44%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 45%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 46%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 47%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 48%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 49%\"]{--circular-progress-fill-color:var(\n --color-percent--40to50\n )}.displays-percentage-colors[style*=\"--percentage: 50%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 51%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 52%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 53%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 54%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 55%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 56%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 57%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 58%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 59%\"]{--circular-progress-fill-color:var(\n --color-percent--50to60\n )}.displays-percentage-colors[style*=\"--percentage: 60%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 61%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 62%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 63%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 64%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 65%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 66%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 67%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 68%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 69%\"]{--circular-progress-fill-color:var(\n --color-percent--60to70\n )}.displays-percentage-colors[style*=\"--percentage: 70%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 71%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 72%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 73%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 74%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 75%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 76%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 77%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 78%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 79%\"]{--circular-progress-fill-color:var(\n --color-percent--70to80\n )}.displays-percentage-colors[style*=\"--percentage: 80%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 81%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 82%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 83%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 84%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 85%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 86%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 87%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 88%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 89%\"]{--circular-progress-fill-color:var(\n --color-percent--80to90\n )}.displays-percentage-colors[style*=\"--percentage: 90%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 91%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 92%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 93%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 94%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 95%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 96%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 97%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 98%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 99%\"]{--circular-progress-fill-color:var(\n --color-percent--90to100\n )}.displays-percentage-colors[style*=\"--percentage: 100%\"]{--circular-progress-fill-color:var(\n --color-percent--100to110\n )}.displays-percentage-colors[style=\"--percentage: 100%;\"]{--circular-progress-fill-color:var(--color-percent--100)}";
|
|
6
6
|
|
|
7
7
|
const PERCENT = 100;
|
|
8
8
|
const CircularProgress = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-circular-progress.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"limel-circular-progress.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,u5fAAu5f;;ACIn7f,MAAM,OAAO,GAAG,GAAG,CAAC;MA+BP,gBAAgB;;;IAgEjB,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;iBA/DqB,CAAC;oBAME,OAAO;kBAMR,IAAI;kBAML,GAAG;mCAMe,KAAK;;;EAQxC,MAAM;IACT,MAAM,SAAS,GAAG;MACd,wBAAwB,EAAE,IAAI;MAC9B,4BAA4B,EAAE,IAAI,CAAC,uBAAuB;KAC7D,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;IACvE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;IAE/C,QACI,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,GAAG,mBACA,GAAG,mBACF,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,IAE3C,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,OAAO,IACd,UAAU,CAAC,KAAK,CAAC,EAClB,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtC,CACL,EACR;GACL;;;;;;","names":[],"sources":["./src/components/circular-progress/circular-progress.scss?tag=limel-circular-progress&encapsulation=shadow","./src/components/circular-progress/circular-progress.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n@use '../../style/internal/lime-theme';\n\n/**\n * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.\n * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.\n * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.\n * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.\n * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.\n */\n\n:host {\n display: block;\n box-sizing: border-box;\n isolation: isolate;\n}\n\n:host([size='x-small']) {\n --circular-progress-size: 1.5rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-1);\n }\n}\n\n:host([size='small']) {\n --circular-progress-size: 2rem;\n font-weight: bold;\n\n .value {\n letter-spacing: functions.pxToRem(-0.5);\n }\n}\n\n:host([size='medium']) {\n --circular-progress-size: 3rem;\n}\n\n:host([size='large']) {\n --circular-progress-size: 4rem;\n}\n\n:host([size='x-large']) {\n --circular-progress-size: 5rem;\n}\n\n.lime-circular-progress {\n --size: var(--circular-progress-size, 3rem);\n --fill-color: var(--circular-progress-fill-color, var(--mdc-theme-primary));\n --track-color: var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: var(--size);\n height: var(--size);\n border-radius: 50%;\n\n line-height: normal;\n\n box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);\n background: conic-gradient(\n var(--fill-color) 0% var(--percentage),\n var(--track-color) var(--percentage) 100%\n );\n\n &:before {\n $size-of-middle-circle: calc(\n var(--size) * 0.75 + 0.25rem\n ); // this calculation ensures that the middle circle is responsive and always perfectly centered\n\n content: '';\n position: absolute;\n width: $size-of-middle-circle;\n height: $size-of-middle-circle;\n border-radius: 50%;\n background-color: var(\n --circular-progress-background-color,\n rgb(var(--contrast-100))\n );\n box-shadow: var(--button-shadow-pressed);\n }\n}\n\n.prefix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.16), 2.25rem);\n @include mixins.truncate-text();\n text-align: center;\n color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));\n\n width: 45%;\n top: 20%;\n position: absolute;\n}\n\n.value {\n display: flex;\n font-size: clamp(0.5rem, calc(var(--size) * 0.25), 4rem);\n color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));\n z-index: 1;\n cursor: default;\n}\n\n.suffix {\n font-size: clamp(0.5rem, calc(var(--size) * 0.18), 2.5rem);\n color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));\n padding-top: 4%;\n}\n\n@import './partial-styles/_percentage-colors';\n","import { Component, h, Prop } from '@stencil/core';\nimport { CircularProgressSize } from '../circular-progress/circular-progress.types';\nimport { abbreviate } from '../badge/format';\n\nconst PERCENT = 100;\n\n/**\n * The circular progress component can be used to visualize the curent state of\n * a progress in a scale; for example percentage of completion of a task.\n *\n * Its compact UI makes the component suitable when there is not enough screen\n * space available to visualise such information.\n *\n * This component allows you to define your scale, from `0` to a desired\n * `maxValue`; and also lets you chose a proper `suffix` for your scale.\n *\n * :::note\n * The component will round up the value when it is displayed, and only shows\n * one decimal digit.\n * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.\n * Of course such numbers, if bigger than `maxValue` will be visualized as a\n * full progress.\n * :::\n *\n * @exampleComponent limel-example-circular-progress\n * @exampleComponent limel-example-circular-progress-sizes\n * @exampleComponent limel-example-circular-progress-props\n * @exampleComponent limel-example-circular-progress-css-variables\n * @exampleComponent limel-example-circular-progress-percentage-colors\n */\n@Component({\n tag: 'limel-circular-progress',\n shadow: true,\n styleUrl: 'circular-progress.scss',\n})\nexport class CircularProgress {\n /**\n * The value of the progress bar.\n */\n @Prop()\n public value: number = 0;\n\n /**\n * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.\n */\n @Prop()\n public maxValue: number = PERCENT;\n\n /**\n * The prefix which is displayed before the `value`, must be a few characters characters long.\n */\n @Prop({ reflect: true })\n public prefix?: string = null;\n\n /**\n * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`\n */\n @Prop()\n public suffix: string = '%';\n\n /**\n * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.\n */\n @Prop()\n public displayPercentageColors: boolean = false;\n\n /**\n * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.\n */\n @Prop({ reflect: true })\n public size: CircularProgressSize;\n\n public render() {\n const classList = {\n 'lime-circular-progress': true,\n 'displays-percentage-colors': this.displayPercentageColors,\n };\n\n const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';\n const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers\n\n return (\n <div\n role=\"progressbar\"\n class={classList}\n aria-label=\"%\"\n aria-valuemin=\"0\"\n aria-valuemax={this.maxValue}\n aria-valuenow={this.value}\n style={{ '--percentage': currentPercentage }}\n >\n {this.renderPrefix()}\n <span class=\"value\">\n {abbreviate(value)}\n <span class=\"suffix\">{this.suffix}</span>\n </span>\n </div>\n );\n }\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n}\n"],"version":3}
|