@alegendstale/holly-components 0.2.17 → 0.2.18
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/dist/components/color-palette/menu/color-palette-menu.d.ts.map +1 -1
- package/dist/components/color-palette/menu/color-palette-menu.js +1 -6
- package/dist/components/responsive-svg/responsive-svg.d.ts +15 -0
- package/dist/components/responsive-svg/responsive-svg.d.ts.map +1 -0
- package/dist/components/responsive-svg/responsive-svg.js +96 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAmB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAItF,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAIhF,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACxB,UAAU,EAAE,EAAE,CAAA;CACd,CAAA;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAiDX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAGpC,QAAQ,EAAE,OAAO,CAAS;IAG1B,UAAU,EAAE,UAAU,CAA8B;IAGpD,OAAO,EAAE,OAAO,CAAS;IAEzB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAE/D,oBAAoB,IAAI,IAAI;IAK5B,MAAM;
|
|
1
|
+
{"version":3,"file":"color-palette-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAmB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAItF,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAIhF,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACxB,UAAU,EAAE,EAAE,CAAA;CACd,CAAA;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAiDX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAGpC,QAAQ,EAAE,OAAO,CAAS;IAG1B,UAAU,EAAE,UAAU,CAA8B;IAGpD,OAAO,EAAE,OAAO,CAAS;IAEzB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAE/D,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAkBN,SAAS;IAuHT,YAAY;CAmBZ;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
|
|
@@ -36,14 +36,9 @@ let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
|
|
|
36
36
|
});
|
|
37
37
|
};
|
|
38
38
|
return html `
|
|
39
|
-
<absolute-container
|
|
40
|
-
disableContextEvent
|
|
41
|
-
${ref(absoluteRef)}
|
|
42
|
-
>
|
|
43
39
|
${this.reorder
|
|
44
40
|
? this.reorderItems()
|
|
45
41
|
: this.menuItems()}
|
|
46
|
-
</absolute-container>
|
|
47
42
|
`;
|
|
48
43
|
}
|
|
49
44
|
menuItems() {
|
|
@@ -205,7 +200,7 @@ ColorPaletteMenu.styles = [
|
|
|
205
200
|
|
|
206
201
|
button {
|
|
207
202
|
display: grid;
|
|
208
|
-
grid-template-columns: auto 1fr
|
|
203
|
+
grid-template-columns: auto 1fr auto;
|
|
209
204
|
align-items: center;
|
|
210
205
|
justify-items: flex-start;
|
|
211
206
|
column-gap: .5rem;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { LitElement, TemplateResult, nothing } from 'lit';
|
|
2
|
+
export declare class ResponsiveSvg extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult[];
|
|
4
|
+
height: number;
|
|
5
|
+
width: number;
|
|
6
|
+
svgFragment: TemplateResult<2> | typeof nothing;
|
|
7
|
+
autofit: boolean;
|
|
8
|
+
render(): TemplateResult<1>;
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface HTMLElementTagNameMap {
|
|
12
|
+
'responsive-svg': ResponsiveSvg;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=responsive-svg.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive-svg.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAQrE,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA6CX;IAGF,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAGlB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,CAAW;IAG1D,OAAO,EAAE,OAAO,CAAS;IAEzB,MAAM;CAiBN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css, nothing } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
10
|
+
let ResponsiveSvg = class ResponsiveSvg extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.height = 0;
|
|
14
|
+
this.width = 0;
|
|
15
|
+
this.svgFragment = nothing;
|
|
16
|
+
this.autofit = false;
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
const styles = {
|
|
20
|
+
'--svg-width': `${this.width}em`,
|
|
21
|
+
'--svg-height': `${this.height}em`,
|
|
22
|
+
};
|
|
23
|
+
return html `
|
|
24
|
+
<svg
|
|
25
|
+
style=${styleMap(styles)}
|
|
26
|
+
viewBox="0 0 ${this.width} ${this.height}"
|
|
27
|
+
fill="none"
|
|
28
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
>
|
|
30
|
+
${this.svgFragment}
|
|
31
|
+
</svg>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
ResponsiveSvg.styles = [
|
|
36
|
+
css `
|
|
37
|
+
:host {
|
|
38
|
+
display: block;
|
|
39
|
+
--svg-width: 0;
|
|
40
|
+
--svg-height: 0;
|
|
41
|
+
--scale: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([autofit]) {
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Size scaling based on font-size */
|
|
50
|
+
:host(:not([autofit])) {
|
|
51
|
+
/* Removes extra space from under SVG */
|
|
52
|
+
display: flex;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:host(:not([autofit])) svg {
|
|
56
|
+
/* Allow SVG to be manipulated by font size */
|
|
57
|
+
display: inline-block;
|
|
58
|
+
/* Change SVG size using font-size */
|
|
59
|
+
font-size: inherit;
|
|
60
|
+
/* Remove extra vertical space in inline element reserved for character descenders */
|
|
61
|
+
vertical-align: top;
|
|
62
|
+
|
|
63
|
+
width: calc(var(--svg-width) / 100 * var(--scale));
|
|
64
|
+
height: calc(var(--svg-height) / 100 * var(--scale));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
svg {
|
|
68
|
+
/* Inherit fill to bypass default */
|
|
69
|
+
fill: inherit;
|
|
70
|
+
|
|
71
|
+
max-width: 100%;
|
|
72
|
+
max-height: 100%;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
path {
|
|
76
|
+
fill: inherit;
|
|
77
|
+
stroke: inherit;
|
|
78
|
+
}
|
|
79
|
+
`,
|
|
80
|
+
];
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Number, reflect: true })
|
|
83
|
+
], ResponsiveSvg.prototype, "height", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
property({ type: Number, reflect: true })
|
|
86
|
+
], ResponsiveSvg.prototype, "width", void 0);
|
|
87
|
+
__decorate([
|
|
88
|
+
property({ type: Object })
|
|
89
|
+
], ResponsiveSvg.prototype, "svgFragment", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
property({ type: Boolean, reflect: true })
|
|
92
|
+
], ResponsiveSvg.prototype, "autofit", void 0);
|
|
93
|
+
ResponsiveSvg = __decorate([
|
|
94
|
+
customElement('responsive-svg')
|
|
95
|
+
], ResponsiveSvg);
|
|
96
|
+
export { ResponsiveSvg };
|