@limetech/lime-elements 38.24.5 → 38.26.0
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 +22 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js +87 -18
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-color-picker.cjs.entry.js +10 -8
- package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/color-picker/color-picker-palette.css +96 -742
- package/dist/collection/components/color-picker/color-picker-palette.js +134 -14
- package/dist/collection/components/color-picker/color-picker-palette.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker.css +25 -39
- package/dist/collection/components/color-picker/color-picker.js +106 -9
- package/dist/collection/components/color-picker/color-picker.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker.types.js +2 -0
- package/dist/collection/components/color-picker/color-picker.types.js.map +1 -0
- package/dist/collection/components/color-picker/swatches.js +33 -4
- package/dist/collection/components/color-picker/swatches.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-color-picker-palette.entry.js +87 -18
- package/dist/esm/limel-color-picker-palette.entry.js.map +1 -1
- package/dist/esm/limel-color-picker.entry.js +11 -9
- package/dist/esm/limel-color-picker.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-0345965e.entry.js +2 -0
- package/dist/lime-elements/p-0345965e.entry.js.map +1 -0
- package/dist/lime-elements/p-e1213871.entry.js +2 -0
- package/dist/lime-elements/p-e1213871.entry.js.map +1 -0
- package/dist/types/components/color-picker/color-picker-palette.d.ts +26 -2
- package/dist/types/components/color-picker/color-picker.d.ts +35 -2
- package/dist/types/components/color-picker/color-picker.types.d.ts +24 -0
- package/dist/types/components/color-picker/swatches.d.ts +27 -2
- package/dist/types/components.d.ts +80 -2
- package/package.json +1 -1
- package/dist/lime-elements/p-63f2f6b8.entry.js +0 -2
- package/dist/lime-elements/p-63f2f6b8.entry.js.map +0 -1
- package/dist/lime-elements/p-bc5bbdf6.entry.js +0 -2
- package/dist/lime-elements/p-bc5bbdf6.entry.js.map +0 -1
|
@@ -1,45 +1,93 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
|
-
import { brightnesses, colors,
|
|
2
|
+
import { brightnesses, colors, createSwatch } from './swatches';
|
|
3
3
|
/**
|
|
4
4
|
* @private
|
|
5
5
|
*/
|
|
6
6
|
export class Palette {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.renderSwatches = () => {
|
|
9
|
-
return
|
|
10
|
-
return brightnesses.map(this.renderSwatch(color));
|
|
11
|
-
});
|
|
9
|
+
return this.getPalette().map(this.renderSwatchButton);
|
|
12
10
|
};
|
|
13
|
-
this.
|
|
14
|
-
const
|
|
11
|
+
this.renderSwatchButton = (swatch, index) => {
|
|
12
|
+
const isSelected = this.value === swatch.value;
|
|
15
13
|
const classList = {
|
|
16
14
|
swatch: true,
|
|
17
|
-
|
|
18
|
-
'swatch
|
|
15
|
+
'swatch--selected': isSelected,
|
|
16
|
+
'custom-swatch': this.usesCustomPalette(),
|
|
19
17
|
};
|
|
20
|
-
return (h("button", { class: classList, onClick: this.
|
|
18
|
+
return (h("button", { class: classList, style: { '--limel-color-picker-swatch-color': swatch.value }, title: swatch.name, disabled: swatch.disabled, "data-index": index, key: index, onClick: this.handleSwatchClick(swatch.value) }));
|
|
21
19
|
};
|
|
22
20
|
this.handleChange = (event) => {
|
|
23
21
|
event.stopPropagation();
|
|
24
22
|
this.change.emit(event.detail);
|
|
25
23
|
};
|
|
26
|
-
this.
|
|
27
|
-
const value = getCssColor(color, brightness);
|
|
24
|
+
this.handleSwatchClick = (value) => (event) => {
|
|
28
25
|
event.stopPropagation();
|
|
29
|
-
this.
|
|
26
|
+
const newValue = this.value === value ? '' : value;
|
|
27
|
+
this.change.emit(newValue);
|
|
30
28
|
};
|
|
31
29
|
this.value = undefined;
|
|
32
30
|
this.label = undefined;
|
|
33
31
|
this.helperText = undefined;
|
|
32
|
+
this.placeholder = undefined;
|
|
34
33
|
this.required = undefined;
|
|
34
|
+
this.invalid = false;
|
|
35
|
+
this.columnCount = undefined;
|
|
36
|
+
this.palette = undefined;
|
|
35
37
|
}
|
|
36
38
|
render() {
|
|
37
39
|
const background = this.value ? { '--background': this.value } : {};
|
|
38
40
|
return [
|
|
39
|
-
h("div", { class: "color-picker-palette"
|
|
40
|
-
|
|
41
|
+
h("div", { class: "color-picker-palette", style: {
|
|
42
|
+
'--color-picker-column-count': `${this.getColumnCount()}`,
|
|
43
|
+
} }, this.renderSwatches()),
|
|
44
|
+
h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder }), h("div", { class: "chosen-color-preview", style: background })),
|
|
41
45
|
];
|
|
42
46
|
}
|
|
47
|
+
getPalette() {
|
|
48
|
+
if (this.usesCustomPalette()) {
|
|
49
|
+
return (this.palette || []).map((entry) => {
|
|
50
|
+
const normalized = this.normalizeEntry(entry);
|
|
51
|
+
return {
|
|
52
|
+
name: normalized.name || normalized.value,
|
|
53
|
+
value: normalized.value,
|
|
54
|
+
disabled: normalized.disabled,
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
// Order default swatches by brightness first, then by color.
|
|
59
|
+
// This gives a more intuitive CSS grid layout logic, and
|
|
60
|
+
// enables adding the `columnCount` prop.
|
|
61
|
+
const swatches = [];
|
|
62
|
+
for (const b of brightnesses) {
|
|
63
|
+
for (const color of colors) {
|
|
64
|
+
swatches.push(createSwatch(color, b));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
return swatches;
|
|
68
|
+
}
|
|
69
|
+
normalizeEntry(entry) {
|
|
70
|
+
if (typeof entry === 'string') {
|
|
71
|
+
return { value: entry };
|
|
72
|
+
}
|
|
73
|
+
return entry;
|
|
74
|
+
}
|
|
75
|
+
usesCustomPalette() {
|
|
76
|
+
var _a;
|
|
77
|
+
return ((_a = this.palette) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
78
|
+
}
|
|
79
|
+
getColumnCount() {
|
|
80
|
+
if (this.columnCount > 0) {
|
|
81
|
+
return this.columnCount;
|
|
82
|
+
}
|
|
83
|
+
// Default palette: fixed 20 columns (one per base color)
|
|
84
|
+
if (!this.usesCustomPalette()) {
|
|
85
|
+
return 20;
|
|
86
|
+
}
|
|
87
|
+
// Custom palette: span all provided swatches unless empty
|
|
88
|
+
const palette = this.getPalette();
|
|
89
|
+
return palette.length > 0 ? palette.length : 1;
|
|
90
|
+
}
|
|
43
91
|
static get is() { return "limel-color-picker-palette"; }
|
|
44
92
|
static get encapsulation() { return "shadow"; }
|
|
45
93
|
static get delegatesFocus() { return true; }
|
|
@@ -106,6 +154,23 @@ export class Palette {
|
|
|
106
154
|
"attribute": "helper-text",
|
|
107
155
|
"reflect": true
|
|
108
156
|
},
|
|
157
|
+
"placeholder": {
|
|
158
|
+
"type": "string",
|
|
159
|
+
"mutable": false,
|
|
160
|
+
"complexType": {
|
|
161
|
+
"original": "string",
|
|
162
|
+
"resolved": "string",
|
|
163
|
+
"references": {}
|
|
164
|
+
},
|
|
165
|
+
"required": false,
|
|
166
|
+
"optional": false,
|
|
167
|
+
"docs": {
|
|
168
|
+
"tags": [],
|
|
169
|
+
"text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
|
|
170
|
+
},
|
|
171
|
+
"attribute": "placeholder",
|
|
172
|
+
"reflect": true
|
|
173
|
+
},
|
|
109
174
|
"required": {
|
|
110
175
|
"type": "boolean",
|
|
111
176
|
"mutable": false,
|
|
@@ -122,6 +187,61 @@ export class Palette {
|
|
|
122
187
|
},
|
|
123
188
|
"attribute": "required",
|
|
124
189
|
"reflect": true
|
|
190
|
+
},
|
|
191
|
+
"invalid": {
|
|
192
|
+
"type": "boolean",
|
|
193
|
+
"mutable": false,
|
|
194
|
+
"complexType": {
|
|
195
|
+
"original": "boolean",
|
|
196
|
+
"resolved": "boolean",
|
|
197
|
+
"references": {}
|
|
198
|
+
},
|
|
199
|
+
"required": false,
|
|
200
|
+
"optional": false,
|
|
201
|
+
"docs": {
|
|
202
|
+
"tags": [],
|
|
203
|
+
"text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
|
|
204
|
+
},
|
|
205
|
+
"attribute": "invalid",
|
|
206
|
+
"reflect": true,
|
|
207
|
+
"defaultValue": "false"
|
|
208
|
+
},
|
|
209
|
+
"columnCount": {
|
|
210
|
+
"type": "number",
|
|
211
|
+
"mutable": false,
|
|
212
|
+
"complexType": {
|
|
213
|
+
"original": "number",
|
|
214
|
+
"resolved": "number",
|
|
215
|
+
"references": {}
|
|
216
|
+
},
|
|
217
|
+
"required": false,
|
|
218
|
+
"optional": true,
|
|
219
|
+
"docs": {
|
|
220
|
+
"tags": [],
|
|
221
|
+
"text": "Defines the number of columns in the color swatch grid.\nIf not provided, it will default to the number of colors in the palette."
|
|
222
|
+
},
|
|
223
|
+
"attribute": "column-count",
|
|
224
|
+
"reflect": true
|
|
225
|
+
},
|
|
226
|
+
"palette": {
|
|
227
|
+
"type": "unknown",
|
|
228
|
+
"mutable": false,
|
|
229
|
+
"complexType": {
|
|
230
|
+
"original": "CustomPalette",
|
|
231
|
+
"resolved": "(string | CustomColorSwatch)[]",
|
|
232
|
+
"references": {
|
|
233
|
+
"CustomPalette": {
|
|
234
|
+
"location": "import",
|
|
235
|
+
"path": "./color-picker.types"
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
"required": false,
|
|
240
|
+
"optional": true,
|
|
241
|
+
"docs": {
|
|
242
|
+
"tags": [],
|
|
243
|
+
"text": "Custom color palette to use instead of Lime palette. Internal prop passed from parent."
|
|
244
|
+
}
|
|
125
245
|
}
|
|
126
246
|
};
|
|
127
247
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\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 focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n */\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /**\n * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n */\n @Prop()\n public palette?: CustomPalette;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette || []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name || normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string | CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"]}
|
|
@@ -126,36 +126,38 @@
|
|
|
126
126
|
background-color: var(--lime-light-grey);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
:host {
|
|
130
|
-
position: relative;
|
|
131
|
-
--popover-surface-width: 50rem;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.color-picker {
|
|
129
|
+
:host(limel-color-picker) {
|
|
135
130
|
display: grid;
|
|
136
131
|
gap: 0.25rem;
|
|
137
132
|
grid-template-columns: auto 1fr;
|
|
138
133
|
}
|
|
139
134
|
|
|
140
|
-
|
|
135
|
+
button[slot=trigger] {
|
|
141
136
|
all: unset;
|
|
137
|
+
box-sizing: border-box;
|
|
138
|
+
position: relative;
|
|
139
|
+
isolation: isolate;
|
|
140
|
+
width: 2.5rem;
|
|
141
|
+
height: 2.5rem;
|
|
142
142
|
border-radius: 0.5rem;
|
|
143
|
+
}
|
|
144
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]) {
|
|
143
145
|
transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
|
|
144
146
|
cursor: pointer;
|
|
145
147
|
color: var(--limel-theme-on-surface-color);
|
|
146
148
|
background-color: var(--lime-elevated-surface-background-color);
|
|
147
149
|
box-shadow: var(--button-shadow-normal);
|
|
148
150
|
}
|
|
149
|
-
|
|
151
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):hover, button[slot=trigger]:not([disabled]):not([disabled=true]):focus, button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible {
|
|
150
152
|
will-change: color, background-color, box-shadow, transform;
|
|
151
153
|
}
|
|
152
|
-
|
|
154
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):hover, button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible {
|
|
153
155
|
transform: translate3d(0, -0.04rem, 0);
|
|
154
156
|
color: var(--limel-theme-on-surface-color);
|
|
155
157
|
background-color: var(--lime-elevated-surface-background-color);
|
|
156
158
|
box-shadow: var(--button-shadow-hovered);
|
|
157
159
|
}
|
|
158
|
-
|
|
160
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):active {
|
|
159
161
|
--limel-clickable-transform-timing-function: cubic-bezier(
|
|
160
162
|
0.83,
|
|
161
163
|
-0.15,
|
|
@@ -165,55 +167,39 @@
|
|
|
165
167
|
transform: translate3d(0, 0.05rem, 0);
|
|
166
168
|
box-shadow: var(--button-shadow-pressed);
|
|
167
169
|
}
|
|
168
|
-
|
|
170
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):hover, button[slot=trigger]:not([disabled]):not([disabled=true]):active {
|
|
169
171
|
--limel-clickable-transition-speed: 0.2s;
|
|
170
172
|
--limel-clickable-transform-speed: 0.16s;
|
|
171
173
|
}
|
|
172
|
-
|
|
174
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):focus {
|
|
173
175
|
outline: none;
|
|
174
176
|
}
|
|
175
|
-
|
|
177
|
+
button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible {
|
|
176
178
|
outline: none;
|
|
177
179
|
box-shadow: var(--shadow-depth-8-focused);
|
|
178
180
|
}
|
|
179
|
-
|
|
180
|
-
box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.chosen-color-preview,
|
|
184
|
-
.picker-trigger {
|
|
185
|
-
box-sizing: border-box;
|
|
186
|
-
position: relative;
|
|
187
|
-
isolation: isolate;
|
|
188
|
-
width: 2.5rem;
|
|
189
|
-
height: 2.5rem;
|
|
190
|
-
}
|
|
191
|
-
.chosen-color-preview:before, .chosen-color-preview:after,
|
|
192
|
-
.picker-trigger:before,
|
|
193
|
-
.picker-trigger:after {
|
|
181
|
+
button[slot=trigger]:before, button[slot=trigger]:after {
|
|
194
182
|
content: "";
|
|
195
183
|
position: absolute;
|
|
196
184
|
inset: 0;
|
|
197
185
|
border-radius: inherit;
|
|
198
186
|
}
|
|
199
|
-
|
|
200
|
-
.picker-trigger:before {
|
|
187
|
+
button[slot=trigger]:before {
|
|
201
188
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");
|
|
202
189
|
background-size: 0.5rem;
|
|
203
190
|
z-index: 0;
|
|
204
191
|
}
|
|
205
|
-
|
|
206
|
-
.picker-trigger:after {
|
|
207
|
-
background: var(--background);
|
|
192
|
+
button[slot=trigger]:after {
|
|
208
193
|
z-index: 1;
|
|
194
|
+
box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
|
|
195
|
+
background: var(--background);
|
|
209
196
|
}
|
|
210
197
|
|
|
211
|
-
:host([readonly]
|
|
212
|
-
|
|
213
|
-
box-shadow: var(--button-shadow-normal);
|
|
214
|
-
transform: none;
|
|
198
|
+
:host([readonly]:not([readonly=false])) limel-input-field {
|
|
199
|
+
transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ));
|
|
215
200
|
}
|
|
216
201
|
|
|
217
|
-
|
|
218
|
-
|
|
202
|
+
:host([readonly]:not([readonly=false])) button[slot=trigger],
|
|
203
|
+
:host([disabled]:not([disabled=false])) button[slot=trigger] {
|
|
204
|
+
border: 1px solid rgba(var(--contrast-700), 0.65);
|
|
219
205
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h } from '@stencil/core';
|
|
1
|
+
import { h, Host, } from '@stencil/core';
|
|
2
2
|
/**
|
|
3
3
|
* This component enables you to select a swatch from out color palette, simply
|
|
4
4
|
* by clicking on it. You can then copy the css variable name of the chosen color
|
|
@@ -12,6 +12,7 @@ import { h } from '@stencil/core';
|
|
|
12
12
|
*
|
|
13
13
|
* @exampleComponent limel-example-color-picker
|
|
14
14
|
* @exampleComponent limel-example-color-picker-readonly
|
|
15
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
15
16
|
*/
|
|
16
17
|
export class ColorPicker {
|
|
17
18
|
constructor() {
|
|
@@ -25,11 +26,11 @@ export class ColorPicker {
|
|
|
25
26
|
if (this.readonly) {
|
|
26
27
|
return this.renderPickerTrigger();
|
|
27
28
|
}
|
|
28
|
-
return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
|
|
29
|
+
return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount })));
|
|
29
30
|
};
|
|
30
31
|
this.renderPickerTrigger = () => {
|
|
31
32
|
const background = this.value ? { '--background': this.value } : {};
|
|
32
|
-
return (h("button", {
|
|
33
|
+
return (h("button", { slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button", disabled: this.readonly || this.disabled }));
|
|
33
34
|
};
|
|
34
35
|
this.setColorPickerPaletteElement = (element) => {
|
|
35
36
|
this.contentElement = element;
|
|
@@ -52,7 +53,12 @@ export class ColorPicker {
|
|
|
52
53
|
this.helperText = undefined;
|
|
53
54
|
this.tooltipLabel = undefined;
|
|
54
55
|
this.required = undefined;
|
|
55
|
-
this.
|
|
56
|
+
this.disabled = false;
|
|
57
|
+
this.readonly = false;
|
|
58
|
+
this.invalid = false;
|
|
59
|
+
this.placeholder = undefined;
|
|
60
|
+
this.palette = undefined;
|
|
61
|
+
this.paletteColumnCount = undefined;
|
|
56
62
|
this.isOpen = false;
|
|
57
63
|
}
|
|
58
64
|
componentDidRender() {
|
|
@@ -63,10 +69,7 @@ export class ColorPicker {
|
|
|
63
69
|
}
|
|
64
70
|
}
|
|
65
71
|
render() {
|
|
66
|
-
return
|
|
67
|
-
this.renderTooltip(),
|
|
68
|
-
h("div", { class: "color-picker" }, this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, class: "chosen-color-input" })),
|
|
69
|
-
];
|
|
72
|
+
return (h(Host, null, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, placeholder: this.placeholder })));
|
|
70
73
|
}
|
|
71
74
|
static get is() { return "limel-color-picker"; }
|
|
72
75
|
static get encapsulation() { return "shadow"; }
|
|
@@ -167,6 +170,24 @@ export class ColorPicker {
|
|
|
167
170
|
"attribute": "required",
|
|
168
171
|
"reflect": true
|
|
169
172
|
},
|
|
173
|
+
"disabled": {
|
|
174
|
+
"type": "boolean",
|
|
175
|
+
"mutable": false,
|
|
176
|
+
"complexType": {
|
|
177
|
+
"original": "boolean",
|
|
178
|
+
"resolved": "boolean",
|
|
179
|
+
"references": {}
|
|
180
|
+
},
|
|
181
|
+
"required": false,
|
|
182
|
+
"optional": false,
|
|
183
|
+
"docs": {
|
|
184
|
+
"tags": [],
|
|
185
|
+
"text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
|
|
186
|
+
},
|
|
187
|
+
"attribute": "disabled",
|
|
188
|
+
"reflect": true,
|
|
189
|
+
"defaultValue": "false"
|
|
190
|
+
},
|
|
170
191
|
"readonly": {
|
|
171
192
|
"type": "boolean",
|
|
172
193
|
"mutable": false,
|
|
@@ -179,9 +200,85 @@ export class ColorPicker {
|
|
|
179
200
|
"optional": false,
|
|
180
201
|
"docs": {
|
|
181
202
|
"tags": [],
|
|
182
|
-
"text": "Set to `true`
|
|
203
|
+
"text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
|
|
183
204
|
},
|
|
184
205
|
"attribute": "readonly",
|
|
206
|
+
"reflect": true,
|
|
207
|
+
"defaultValue": "false"
|
|
208
|
+
},
|
|
209
|
+
"invalid": {
|
|
210
|
+
"type": "boolean",
|
|
211
|
+
"mutable": false,
|
|
212
|
+
"complexType": {
|
|
213
|
+
"original": "boolean",
|
|
214
|
+
"resolved": "boolean",
|
|
215
|
+
"references": {}
|
|
216
|
+
},
|
|
217
|
+
"required": false,
|
|
218
|
+
"optional": false,
|
|
219
|
+
"docs": {
|
|
220
|
+
"tags": [],
|
|
221
|
+
"text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
|
|
222
|
+
},
|
|
223
|
+
"attribute": "invalid",
|
|
224
|
+
"reflect": true,
|
|
225
|
+
"defaultValue": "false"
|
|
226
|
+
},
|
|
227
|
+
"placeholder": {
|
|
228
|
+
"type": "string",
|
|
229
|
+
"mutable": false,
|
|
230
|
+
"complexType": {
|
|
231
|
+
"original": "string",
|
|
232
|
+
"resolved": "string",
|
|
233
|
+
"references": {}
|
|
234
|
+
},
|
|
235
|
+
"required": false,
|
|
236
|
+
"optional": false,
|
|
237
|
+
"docs": {
|
|
238
|
+
"tags": [],
|
|
239
|
+
"text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
|
|
240
|
+
},
|
|
241
|
+
"attribute": "placeholder",
|
|
242
|
+
"reflect": true
|
|
243
|
+
},
|
|
244
|
+
"palette": {
|
|
245
|
+
"type": "unknown",
|
|
246
|
+
"mutable": false,
|
|
247
|
+
"complexType": {
|
|
248
|
+
"original": "Array<string | CustomColorSwatch>",
|
|
249
|
+
"resolved": "(string | CustomColorSwatch)[]",
|
|
250
|
+
"references": {
|
|
251
|
+
"Array": {
|
|
252
|
+
"location": "global"
|
|
253
|
+
},
|
|
254
|
+
"CustomColorSwatch": {
|
|
255
|
+
"location": "import",
|
|
256
|
+
"path": "./color-picker.types"
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
"required": false,
|
|
261
|
+
"optional": true,
|
|
262
|
+
"docs": {
|
|
263
|
+
"tags": [],
|
|
264
|
+
"text": "An array of either color value strings, or objects with a `name` and a `value`,\nwhich replaces the default palette. Any valid CSS color format is accepted as value\n(HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.)."
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
"paletteColumnCount": {
|
|
268
|
+
"type": "number",
|
|
269
|
+
"mutable": false,
|
|
270
|
+
"complexType": {
|
|
271
|
+
"original": "number",
|
|
272
|
+
"resolved": "number",
|
|
273
|
+
"references": {}
|
|
274
|
+
},
|
|
275
|
+
"required": false,
|
|
276
|
+
"optional": true,
|
|
277
|
+
"docs": {
|
|
278
|
+
"tags": [],
|
|
279
|
+
"text": "Defines the number of columns in the color swatch grid.\nIf not provided, it will default to the number of colors in the palette;\nbut stops at a maximum of 25 columns."
|
|
280
|
+
},
|
|
281
|
+
"attribute": "palette-column-count",
|
|
185
282
|
"reflect": true
|
|
186
283
|
}
|
|
187
284
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,EAEL,IAAI,GACP,MAAM,eAAe,CAAC;AAIvB;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,WAAW;;IAgGZ,gBAAW,GAAG,KAAK,CAAC;IAqBpB,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAc,EAC5B,WAAW,EAAE,IAAI,CAAC,kBAAkB,GACtC,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,cACI,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAC1C,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C,EAC7C,EAAE;MACA,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;IAClC,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;oBA1JgB,KAAK;oBAQL,KAAK;mBAON,KAAK;;;;kBAgCL,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;EACL,CAAC;EAMM,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACA,IAAI,CAAC,aAAa,EAAE;MACpB,IAAI,CAAC,mBAAmB,EAAE;MAC3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,GAC/B,CACC,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EJ","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n * @exampleComponent limel-example-color-picker-custom-palette\n */\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /**\n * Name or code of the chosen color\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * The label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Displayed as tooltips when picker is hovered.\n */\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\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 = false;\n\n /**\n * Set to `true` to make the field 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 */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * An array of either color value strings, or objects with a `name` and a `value`,\n * which replaces the default palette. Any valid CSS color format is accepted as value\n * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n */\n @Prop()\n public palette?: Array<string | CustomColorSwatch>;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette;\n * but stops at a maximum of 25 columns.\n */\n @Prop({ reflect: true })\n public paletteColumnCount?: number;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public componentDidRender() {\n if (this.shouldFocus && this.isOpen) {\n this.shouldFocus = false;\n this.contentElement?.focus();\n }\n }\n\n private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n private shouldFocus = false;\n\n public render() {\n return (\n <Host>\n {this.renderTooltip()}\n {this.renderPickerPalette()}\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n disabled={this.disabled}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n </Host>\n );\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n ref={this.setColorPickerPaletteElement}\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n placeholder={this.placeholder}\n invalid={this.invalid}\n onChange={this.handleChange}\n required={this.required}\n palette={this.palette as any}\n columnCount={this.paletteColumnCount}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n disabled={this.readonly || this.disabled}\n />\n );\n };\n\n private setColorPickerPaletteElement = (\n element: HTMLLimelColorPickerPaletteElement\n ) => {\n this.contentElement = element;\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n\n this.shouldFocus = this.isOpen;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-picker.types.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents a single custom color swatch that can be supplied to the color picker.\n * @public\n */\nexport interface CustomColorSwatch {\n /**\n * Human readable name used for tooltip / accessibility. If omitted, `value` is shown.\n */\n name?: string;\n /**\n * Any valid CSS color (hex, rgb[a], hsl[a], lab, lch, color-mix(), named, etc.).\n */\n value: string;\n /**\n * Disables the swatch when true.\n */\n disabled?: boolean;\n}\n\n/**\n * A custom palette: each entry is either a color string or a structured swatch object.\n * @public\n */\nexport type CustomPalette = Array<string | CustomColorSwatch>;\n"]}
|
|
@@ -22,19 +22,48 @@ export const colors = [
|
|
|
22
22
|
];
|
|
23
23
|
export const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
|
|
24
24
|
/**
|
|
25
|
+
* Returns the CSS variable name holding the RGB triplet for the color & brightness.
|
|
25
26
|
*
|
|
26
|
-
* @param color
|
|
27
|
-
* @param brightness
|
|
27
|
+
* @param color the base color identifier (e.g. "red", "blue")
|
|
28
|
+
* @param brightness the brightness variant (e.g. "light", "default")
|
|
29
|
+
* @returns CSS variable name in the form --color-{color}-{brightness}
|
|
28
30
|
*/
|
|
29
31
|
export function getColorName(color, brightness) {
|
|
30
32
|
return `--color-${color}-${brightness}`;
|
|
31
33
|
}
|
|
32
34
|
/**
|
|
33
|
-
*
|
|
35
|
+
* Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
|
|
34
36
|
* @param color
|
|
35
37
|
* @param brightness
|
|
36
38
|
*/
|
|
37
|
-
export function
|
|
39
|
+
export function getSwatchValue(color, brightness) {
|
|
38
40
|
return `rgb(var(${getColorName(color, brightness)}))`;
|
|
39
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* Swatch name: human readable label like "red default"
|
|
44
|
+
* @param color
|
|
45
|
+
* @param brightness
|
|
46
|
+
*/
|
|
47
|
+
export function getSwatchName(color, brightness) {
|
|
48
|
+
return `${color} ${brightness}`;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Convenience factory returning both name & value.
|
|
52
|
+
* @param color
|
|
53
|
+
* @param brightness
|
|
54
|
+
*/
|
|
55
|
+
export function createSwatch(color, brightness) {
|
|
56
|
+
return {
|
|
57
|
+
name: getSwatchName(color, brightness),
|
|
58
|
+
value: getSwatchValue(color, brightness),
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Returns the CSS color value for the given color and brightness.
|
|
63
|
+
* @param color
|
|
64
|
+
* @param brightness
|
|
65
|
+
*/
|
|
66
|
+
export function getCssColor(color, brightness) {
|
|
67
|
+
return getSwatchValue(color, brightness);
|
|
68
|
+
}
|
|
40
69
|
//# sourceMappingURL=swatches.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swatches.js","sourceRoot":"","sources":["../../../src/components/color-picker/swatches.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"swatches.js","sourceRoot":"","sources":["../../../src/components/color-picker/swatches.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAQ9E;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,UAAkB;EAC5D,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,UAAkB;EAC3D,OAAO,GAAG,KAAK,IAAI,UAAU,EAAE,CAAC;AACpC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO;IACH,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC;IACtC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC;GAC3C,CAAC;AACN,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n name: string;\n value: string;\n disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n return {\n name: getSwatchName(color, brightness),\n value: getSwatchValue(color, brightness),\n };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n return getSwatchValue(color, brightness);\n}\n"]}
|