@omegagrid/core 0.10.63 → 0.10.64
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.
|
@@ -3,6 +3,8 @@ import { ColorPicker } from './colorpicker';
|
|
|
3
3
|
export declare class DropdownColorPicker extends Dropdown {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
value: string;
|
|
6
|
+
caption: string;
|
|
7
|
+
placeholder: string;
|
|
6
8
|
_picker: ColorPicker;
|
|
7
9
|
get picker(): ColorPicker;
|
|
8
10
|
updateLabel(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownColorPicker.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,qBACa,mBAAoB,SAAQ,QAAQ;IAEhD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"dropdownColorPicker.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,qBACa,mBAAoB,SAAQ,QAAQ;IAEhD,MAAM,CAAC,MAAM,4BAqBV;IAGH,KAAK,EAAE,MAAM,CAAC;IAGd,OAAO,EAAE,MAAM,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,MAAM,gBAeT;IAED,WAAW;IAYX,UAAU;;CAWV"}
|
|
@@ -27,11 +27,14 @@ let DropdownColorPicker = class DropdownColorPicker extends Dropdown {
|
|
|
27
27
|
return this._picker;
|
|
28
28
|
}
|
|
29
29
|
updateLabel() {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<div style="padding: 2px"
|
|
34
|
-
|
|
30
|
+
const caption = this.caption ? html `<div class="caption">${this.caption}</div>` : null;
|
|
31
|
+
const placeholder = this.placeholder ? html `<div class="placeholder">${this.placeholder}</div>` : null;
|
|
32
|
+
const value = this.value ? html `
|
|
33
|
+
<div class="itm" style="background: ${this.value}; color: ${colors.contrastColor(this.value)}; padding: 2px">${this.value}</div>
|
|
34
|
+
` : null;
|
|
35
|
+
this.label = html `<div class="content">${value ? html `${caption ? html `${caption}:` : ``}${value}` : (caption
|
|
36
|
+
? html `${caption}${placeholder ? html `: ${placeholder}` : ``}`
|
|
37
|
+
: (placeholder ? html `${placeholder}` : html `<div style="padding: 2px"> </div>`))}</div>`;
|
|
35
38
|
}
|
|
36
39
|
willUpdate() {
|
|
37
40
|
this.value = colors.css(this.value);
|
|
@@ -48,11 +51,32 @@ DropdownColorPicker.styles = [...Dropdown.styles, css `
|
|
|
48
51
|
padding-top: 0;
|
|
49
52
|
padding-left: 0;
|
|
50
53
|
padding-bottom: 0;
|
|
51
|
-
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.caption, .placeholder {
|
|
57
|
+
color: var(--og-text-color-2);
|
|
58
|
+
opacity: 0.7;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.content {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.content .itm {
|
|
67
|
+
margin-left: 2px;
|
|
68
|
+
flex: 1;
|
|
69
|
+
}
|
|
52
70
|
`];
|
|
53
71
|
__decorate([
|
|
54
72
|
property({ type: String })
|
|
55
73
|
], DropdownColorPicker.prototype, "value", void 0);
|
|
74
|
+
__decorate([
|
|
75
|
+
property({ type: String })
|
|
76
|
+
], DropdownColorPicker.prototype, "caption", void 0);
|
|
77
|
+
__decorate([
|
|
78
|
+
property({ type: String })
|
|
79
|
+
], DropdownColorPicker.prototype, "placeholder", void 0);
|
|
56
80
|
DropdownColorPicker = __decorate([
|
|
57
81
|
customElement(`og-dropdown-colorpicker`)
|
|
58
82
|
], DropdownColorPicker);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownColorPicker.js","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAGzB,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ;
|
|
1
|
+
{"version":3,"file":"dropdownColorPicker.js","sourceRoot":"","sources":["../../src/ui/dropdownColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { colors, dom, events } from '../common';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Dropdown } from './dropdown';\nimport { ColorPicker } from './colorpicker';\nimport { css, html } from 'lit';\n\n@customElement(`og-dropdown-colorpicker`)\nexport class DropdownColorPicker extends Dropdown {\n\n\tstatic styles = [...Dropdown.styles, css`\n\t\tog-button {\n\t\t\tpadding-top: 0;\n\t\t\tpadding-left: 0;\n\t\t\tpadding-bottom: 0;\n\t\t}\n\n\t\t.caption, .placeholder {\n\t\t\tcolor: var(--og-text-color-2);\n\t\t\topacity: 0.7;\n\t\t}\n\n\t\t.content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.content .itm {\n\t\t\tmargin-left: 2px;\n\t\t\tflex: 1;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\tvalue: string;\n\n\t@property({type: String})\n\tcaption: string;\n\n\t@property({type: String})\n\tplaceholder: string;\n\n\t_picker: ColorPicker;\n\tget picker() {\n\t\tif (this._picker) return this._picker;\n\t\tthis._picker = dom.createElement<ColorPicker>('og-colorpicker');\n\t\tthis._picker.slot = 'inner-content';\n\t\tthis._picker.style.border = 'none';\n\t\tthis._picker.style.minWidth = '100%';\n\t\tthis._picker.addEventListener('change', (e: events.ChangeEvent) => {\n\t\t\tthis.value = e.value as string;\n\t\t\tthis.updateLabel();\n\t\t\tthis.close();\n\t\t\tthis.dispatchEvent(new events.ChangeEvent(this.value));\n\t\t});\n\t\tthis._picker.addEventListener('render', () => this.layout());\n\t\tthis.dropdown.appendChild(this._picker);\n\t\treturn this._picker;\n\t}\n\n\tupdateLabel() {\n\t\tconst caption = this.caption ? html`<div class=\"caption\">${this.caption}</div>` : null;\n\t\tconst placeholder = this.placeholder ? html`<div class=\"placeholder\">${this.placeholder}</div>` : null;\n\t\tconst value = this.value ? html`\n\t\t\t<div class=\"itm\" style=\"background: ${this.value}; color: ${colors.contrastColor(this.value)}; padding: 2px\">${this.value}</div>\n\t\t` : null;\n\t\tthis.label = html`<div class=\"content\">${value ? html`${caption ? html`${caption}:` : ``}${value}` : (caption\n\t\t\t? html`${caption}${placeholder ? html`: ${placeholder}` : ``}`\n\t\t\t: (placeholder ? html`${placeholder}` : html`<div style=\"padding: 2px\"> </div>`)\n\t\t)}</div>`;\n\t}\n\n\twillUpdate() {\n\t\tthis.value = colors.css(this.value);\n\t\tthis.updateLabel();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dropdown.beforeOpen', () => this.picker);\n\t\tthis.addEventListener('dropdown.open', () => this.picker.focus());\n\t}\n\t\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/core",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.64",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Core components",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fortawesome/fontawesome-svg-core": "^7.0.1",
|
|
39
|
-
"@omegagrid/localize": "^0.10.
|
|
39
|
+
"@omegagrid/localize": "^0.10.64",
|
|
40
40
|
"color": "^4.2.3",
|
|
41
41
|
"date-fns": "^3.2.0",
|
|
42
42
|
"lit": "^3.1.1",
|