@hotosm/ui 0.2.0-a1 → 0.2.0-a3
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/README.md +1 -1
- package/components/Button.d.ts +16 -0
- package/components/Button.js +75 -0
- package/components/Toolbar.d.ts +26 -0
- package/components/Toolbar.js +121 -0
- package/components/Tracking.d.ts +25 -0
- package/components/Tracking.js +156 -0
- package/i18n/en.xliff +24 -0
- package/package.json +10 -7
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</p>
|
|
10
10
|
<p align="center">
|
|
11
11
|
<a href="https://github.com/hotosm/ui/actions/workflows/publish.yml" target="_blank">
|
|
12
|
-
<img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg" alt="Publish">
|
|
12
|
+
<img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg?event=release" alt="Publish">
|
|
13
13
|
</a>
|
|
14
14
|
<a href="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml" target="_blank">
|
|
15
15
|
<img src="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main" alt="CDN Deploy">
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "../theme/hot.css";
|
|
2
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
3
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
4
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
5
|
+
import { LitElement } from "lit";
|
|
6
|
+
export declare class Button extends LitElement {
|
|
7
|
+
name: string;
|
|
8
|
+
/** Disable the button, greyed out, not clickable. */
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
/** CVA button type. */
|
|
11
|
+
variant: "primary" | "secondary";
|
|
12
|
+
static styles: import("lit").CSSResult[];
|
|
13
|
+
protected render(): import("lit").TemplateResult<1>;
|
|
14
|
+
private _handleClick;
|
|
15
|
+
}
|
|
16
|
+
export default Button;
|
|
@@ -0,0 +1,75 @@
|
|
|
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 "../theme/hot.css";
|
|
8
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
9
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
10
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
11
|
+
import { LitElement, css, html } from "lit";
|
|
12
|
+
import { property } from "lit/decorators.js";
|
|
13
|
+
import { cva } from "class-variance-authority";
|
|
14
|
+
const buttonStyle = cva("bg-primary text-white py-3 px-6 rounded leading-[1.15]", {
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
primary: "bg-primary border-2 border-primary text-white",
|
|
18
|
+
secondary: `
|
|
19
|
+
bg-white border-2 border-primary text-primary! hover:bg-lightGray
|
|
20
|
+
focus:bg-transparent focus:border-primary
|
|
21
|
+
`,
|
|
22
|
+
},
|
|
23
|
+
disabled: {
|
|
24
|
+
true: "opacity-50 cursor-not-allowed",
|
|
25
|
+
false: "",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
export class Button extends LitElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
this.name = "hot-button";
|
|
33
|
+
/** Disable the button, greyed out, not clickable. */
|
|
34
|
+
this.disabled = false;
|
|
35
|
+
/** CVA button type. */
|
|
36
|
+
this.variant = "primary";
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
return html `<sl-button
|
|
40
|
+
class=${buttonStyle({
|
|
41
|
+
variant: this.variant,
|
|
42
|
+
disabled: this.disabled,
|
|
43
|
+
})}
|
|
44
|
+
?disabled=${this.disabled}
|
|
45
|
+
@click=${(e) => {
|
|
46
|
+
this._handleClick(e);
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<slot></slot>
|
|
50
|
+
</sl-button>`;
|
|
51
|
+
}
|
|
52
|
+
_handleClick(e) {
|
|
53
|
+
// As the original event is also named 'click'
|
|
54
|
+
// stop propagation of the original event
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
this.dispatchEvent(new Event("click"));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
Button.styles = [
|
|
60
|
+
css `
|
|
61
|
+
@unocss-placeholder;
|
|
62
|
+
`,
|
|
63
|
+
];
|
|
64
|
+
__decorate([
|
|
65
|
+
property()
|
|
66
|
+
], Button.prototype, "name", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
property({ type: Boolean })
|
|
69
|
+
], Button.prototype, "disabled", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
property({ type: String })
|
|
72
|
+
], Button.prototype, "variant", void 0);
|
|
73
|
+
export default Button;
|
|
74
|
+
// Define web component
|
|
75
|
+
customElements.define("hot-button", Button);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import "../theme/hot.css";
|
|
2
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
3
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
4
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
5
|
+
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
|
|
6
|
+
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
|
7
|
+
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
|
|
8
|
+
import { LitElement } from "lit";
|
|
9
|
+
export declare class Toolbar extends LitElement {
|
|
10
|
+
name: string;
|
|
11
|
+
/** Change the position of the tooltips relative to buttons. */
|
|
12
|
+
tooltipPosition: string;
|
|
13
|
+
static styles: import("lit").CSSResult[];
|
|
14
|
+
protected render(): import("lit").TemplateResult<1>;
|
|
15
|
+
private renderButtonGroup;
|
|
16
|
+
private renderButton;
|
|
17
|
+
private readonly undo;
|
|
18
|
+
private readonly redo;
|
|
19
|
+
private readonly bold;
|
|
20
|
+
private readonly italic;
|
|
21
|
+
private readonly underline;
|
|
22
|
+
private readonly alignLeft;
|
|
23
|
+
private readonly alignCenter;
|
|
24
|
+
private readonly alignRight;
|
|
25
|
+
}
|
|
26
|
+
export default Toolbar;
|
|
@@ -0,0 +1,121 @@
|
|
|
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 "../theme/hot.css";
|
|
8
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
9
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
10
|
+
import '@shoelace-style/shoelace/dist/components/button/button.js';
|
|
11
|
+
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
|
|
12
|
+
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
|
13
|
+
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
|
|
14
|
+
import { LitElement, css, html } from "lit";
|
|
15
|
+
import { property } from "lit/decorators.js";
|
|
16
|
+
// import { cva } from "class-variance-authority";
|
|
17
|
+
// const toolbarStyle = cva(
|
|
18
|
+
// "some-css-var",
|
|
19
|
+
// {
|
|
20
|
+
// variants: {
|
|
21
|
+
// someProperty: {
|
|
22
|
+
// true: "some-css-var",
|
|
23
|
+
// false: "some-css-var",
|
|
24
|
+
// },
|
|
25
|
+
// },
|
|
26
|
+
// },
|
|
27
|
+
// );
|
|
28
|
+
export class Toolbar extends LitElement {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
this.name = "hot-toolbar";
|
|
32
|
+
/** Change the position of the tooltips relative to buttons. */
|
|
33
|
+
this.tooltipPosition = "top";
|
|
34
|
+
this.undo = (e) => {
|
|
35
|
+
// As the original event is also named 'click'
|
|
36
|
+
// stop propagation of the original event
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
this.dispatchEvent(new Event("hot-undo-click"));
|
|
39
|
+
};
|
|
40
|
+
this.redo = (e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
this.dispatchEvent(new Event("hot-redo-click"));
|
|
43
|
+
};
|
|
44
|
+
this.bold = (e) => {
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
this.dispatchEvent(new Event("hot-bold-click"));
|
|
47
|
+
};
|
|
48
|
+
this.italic = (e) => {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
this.dispatchEvent(new Event("hot-italic-click"));
|
|
51
|
+
};
|
|
52
|
+
this.underline = (e) => {
|
|
53
|
+
e.stopPropagation();
|
|
54
|
+
this.dispatchEvent(new Event("hot-underline-click"));
|
|
55
|
+
};
|
|
56
|
+
this.alignLeft = (e) => {
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
this.dispatchEvent(new Event("hot-leftalign-click"));
|
|
59
|
+
};
|
|
60
|
+
this.alignCenter = (e) => {
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
this.dispatchEvent(new Event("hot-centeralign-click"));
|
|
63
|
+
};
|
|
64
|
+
this.alignRight = (e) => {
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
this.dispatchEvent(new Event("hot-rightalign-click"));
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
// class=${toolbarStyle({
|
|
70
|
+
// someProperty: this.someProperty,
|
|
71
|
+
// })}
|
|
72
|
+
render() {
|
|
73
|
+
return html `
|
|
74
|
+
<div class="button-group-toolbar">
|
|
75
|
+
${this.renderButtonGroup('History', [
|
|
76
|
+
{ content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
|
|
77
|
+
{ content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
|
|
78
|
+
])}
|
|
79
|
+
${this.renderButtonGroup('Formatting', [
|
|
80
|
+
{ content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
|
|
81
|
+
{ content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
|
|
82
|
+
{ content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
|
|
83
|
+
])}
|
|
84
|
+
${this.renderButtonGroup('Alignment', [
|
|
85
|
+
{ content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
|
|
86
|
+
{ content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
|
|
87
|
+
{ content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
|
|
88
|
+
])}
|
|
89
|
+
</div>
|
|
90
|
+
`;
|
|
91
|
+
}
|
|
92
|
+
renderButtonGroup(label, buttons) {
|
|
93
|
+
return html `
|
|
94
|
+
<sl-button-group label=${label}>
|
|
95
|
+
${buttons.map(button => this.renderButton(button))}
|
|
96
|
+
</sl-button-group>
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
renderButton({ content, icon, label, action }) {
|
|
100
|
+
return html `
|
|
101
|
+
<sl-tooltip content=${content} placement="${this.tooltipPosition}">
|
|
102
|
+
<sl-button @click=${action ?? (() => { })}><sl-icon name=${icon} label=${label}></sl-icon></sl-button>
|
|
103
|
+
</sl-tooltip>
|
|
104
|
+
`;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
Toolbar.styles = [
|
|
108
|
+
css `
|
|
109
|
+
@unocss-placeholder;
|
|
110
|
+
`,
|
|
111
|
+
// unsafeCSS(reset),
|
|
112
|
+
];
|
|
113
|
+
__decorate([
|
|
114
|
+
property()
|
|
115
|
+
], Toolbar.prototype, "name", void 0);
|
|
116
|
+
__decorate([
|
|
117
|
+
property({ type: String, attribute: "tooltip-position" })
|
|
118
|
+
], Toolbar.prototype, "tooltipPosition", void 0);
|
|
119
|
+
export default Toolbar;
|
|
120
|
+
// Define web component
|
|
121
|
+
customElements.define("hot-toolbar", Toolbar);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import "../theme/hot.css";
|
|
2
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
3
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
4
|
+
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
|
|
5
|
+
import { LitElement } from "lit";
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
_paq: any[];
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export declare class Tracking extends LitElement {
|
|
12
|
+
name: string;
|
|
13
|
+
/** The Matomo site id for tracking. */
|
|
14
|
+
siteId: string;
|
|
15
|
+
/** The domains to apply tracking. */
|
|
16
|
+
domain: string;
|
|
17
|
+
isOpen: boolean;
|
|
18
|
+
static styles: import("lit").CSSResult[];
|
|
19
|
+
protected render(): import("lit").TemplateResult<1>;
|
|
20
|
+
private _closeAlert;
|
|
21
|
+
private _setAgree;
|
|
22
|
+
private _setDisagree;
|
|
23
|
+
connectedCallback(): void;
|
|
24
|
+
}
|
|
25
|
+
export default Tracking;
|
|
@@ -0,0 +1,156 @@
|
|
|
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 "../theme/hot.css";
|
|
8
|
+
import '@shoelace-style/shoelace/dist/themes/light.css';
|
|
9
|
+
import '@shoelace-style/shoelace/dist/themes/dark.css';
|
|
10
|
+
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
|
|
11
|
+
import { LitElement, css, html } from "lit";
|
|
12
|
+
import { property, state } from "lit/decorators.js";
|
|
13
|
+
export class Tracking extends LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.name = "hot-tracking";
|
|
17
|
+
/** The Matomo site id for tracking. */
|
|
18
|
+
this.siteId = "";
|
|
19
|
+
/** The domains to apply tracking. */
|
|
20
|
+
this.domain = "";
|
|
21
|
+
this.isOpen = true;
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
return html `<sl-alert
|
|
25
|
+
variant="danger"
|
|
26
|
+
?open=${this.isOpen}
|
|
27
|
+
>
|
|
28
|
+
<sl-icon id="hot-red-text" slot="icon" name="info-circle"></sl-icon>
|
|
29
|
+
|
|
30
|
+
<p id="tracking-header">
|
|
31
|
+
About the information we collect
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
<p>
|
|
35
|
+
We use cookies and similar technologies to recognize and analyze your visits,
|
|
36
|
+
and measure traffic usage and activity. You can learn about how we use the data
|
|
37
|
+
about your visit or information you provide reading our
|
|
38
|
+
<a
|
|
39
|
+
id="hot-red-text"
|
|
40
|
+
href="https://www.hotosm.org/privacy"
|
|
41
|
+
target="_blank"
|
|
42
|
+
rel="noopener noreferrer"
|
|
43
|
+
>privacy policy</a>.
|
|
44
|
+
By clicking "I Agree", you consent to the use of cookies.
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<sl-button @click=${(e) => {
|
|
48
|
+
this._setAgree(e);
|
|
49
|
+
}}>I Agree</sl-button>
|
|
50
|
+
<sl-button @click=${(e) => {
|
|
51
|
+
this._setDisagree(e);
|
|
52
|
+
}}>I Do Not Agree</sl-button>
|
|
53
|
+
</sl-alert>`;
|
|
54
|
+
}
|
|
55
|
+
_closeAlert() {
|
|
56
|
+
this.isOpen = false;
|
|
57
|
+
localStorage.setItem(`${this.siteId}-optout-closed`, 'true');
|
|
58
|
+
}
|
|
59
|
+
_setAgree(_e) {
|
|
60
|
+
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
61
|
+
const _paq = (window._paq = window._paq || []);
|
|
62
|
+
if (_paq.length === 0) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
_paq.push(['rememberConsentGiven']);
|
|
66
|
+
this._closeAlert();
|
|
67
|
+
this.dispatchEvent(new Event('agree', { bubbles: true, composed: true }));
|
|
68
|
+
}
|
|
69
|
+
_setDisagree(_e) {
|
|
70
|
+
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
71
|
+
const _paq = (window._paq = window._paq || []);
|
|
72
|
+
if (_paq.length === 0) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
_paq.push(['forgetConsentGiven']);
|
|
76
|
+
this._closeAlert();
|
|
77
|
+
this.dispatchEvent(new Event('disagree', { bubbles: true, composed: true }));
|
|
78
|
+
}
|
|
79
|
+
connectedCallback() {
|
|
80
|
+
super.connectedCallback();
|
|
81
|
+
if (localStorage.getItem(`${this.siteId}-optout-closed`) === 'true') {
|
|
82
|
+
// Close automatically if already optout
|
|
83
|
+
this.isOpen = false;
|
|
84
|
+
}
|
|
85
|
+
// Configure Matomo tracking
|
|
86
|
+
const matomoTrackingId = this.siteId;
|
|
87
|
+
if ((matomoTrackingId.length === 0) || this.domain.length === 0) {
|
|
88
|
+
console.warn('Matomo init failed. No site id or domains provided.');
|
|
89
|
+
this.isOpen = false;
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
93
|
+
const _paq = (window._paq = window._paq || []);
|
|
94
|
+
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
95
|
+
_paq.push(['requireConsent']);
|
|
96
|
+
_paq.push(['setDomains', [this.domain]]);
|
|
97
|
+
_paq.push(['trackPageView']);
|
|
98
|
+
_paq.push(['enableLinkTracking']); // Tracks downloads
|
|
99
|
+
_paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
|
|
100
|
+
(function () {
|
|
101
|
+
const u = '//matomo.hotosm.org/';
|
|
102
|
+
_paq.push(['setTrackerUrl', u + 'matomo.php']);
|
|
103
|
+
_paq.push(['setSiteId', matomoTrackingId]);
|
|
104
|
+
const d = document;
|
|
105
|
+
const g = d.createElement('script');
|
|
106
|
+
const s = d.getElementsByTagName('script')[0];
|
|
107
|
+
if ((s?.parentNode) != null) {
|
|
108
|
+
g.async = true;
|
|
109
|
+
g.src = u + 'matomo.js';
|
|
110
|
+
s.parentNode.insertBefore(g, s);
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
console.warn('Script insertion failed. Parent node is null.');
|
|
114
|
+
}
|
|
115
|
+
})();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
Tracking.styles = [
|
|
119
|
+
css `
|
|
120
|
+
@unocss-placeholder;
|
|
121
|
+
`,
|
|
122
|
+
// Temp styles until UnoCSS setup
|
|
123
|
+
css `
|
|
124
|
+
#tracking-header {
|
|
125
|
+
font-weight: var(--sl-font-weight-bold);
|
|
126
|
+
font-size: var(--sl-font-size-large);
|
|
127
|
+
color: #d63f3f;
|
|
128
|
+
}
|
|
129
|
+
#hot-red-text {
|
|
130
|
+
color: #d63f3f;
|
|
131
|
+
}
|
|
132
|
+
sl-alert::part(base) {
|
|
133
|
+
position: absolute;
|
|
134
|
+
bottom: 20px;
|
|
135
|
+
left: 50%;
|
|
136
|
+
transform: translateX(-50%);
|
|
137
|
+
z-index: 1000;
|
|
138
|
+
width: 80vw;
|
|
139
|
+
}
|
|
140
|
+
`
|
|
141
|
+
];
|
|
142
|
+
__decorate([
|
|
143
|
+
property()
|
|
144
|
+
], Tracking.prototype, "name", void 0);
|
|
145
|
+
__decorate([
|
|
146
|
+
property({ type: String, attribute: "site-id" })
|
|
147
|
+
], Tracking.prototype, "siteId", void 0);
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ type: String })
|
|
150
|
+
], Tracking.prototype, "domain", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
state()
|
|
153
|
+
], Tracking.prototype, "isOpen", void 0);
|
|
154
|
+
export default Tracking;
|
|
155
|
+
// Define web component
|
|
156
|
+
customElements.define("hot-tracking", Tracking);
|
package/i18n/en.xliff
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
|
2
|
+
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
|
|
3
|
+
<file source-language="en" target-language="fr" datatype="plaintext" original="ng2.template">
|
|
4
|
+
<body>
|
|
5
|
+
<trans-unit id="common.welcome">
|
|
6
|
+
<source>Welcome!</source>
|
|
7
|
+
<target>Bienvenue!</target>
|
|
8
|
+
<context-group purpose="location">
|
|
9
|
+
<context context-type="sourcefile">src/app/app.component.html</context>
|
|
10
|
+
<context context-type="linenumber">16</context>
|
|
11
|
+
</context-group>
|
|
12
|
+
</trans-unit>
|
|
13
|
+
<trans-unit id="common.app.title">
|
|
14
|
+
<source>Diary</source>
|
|
15
|
+
<target>Agenda</target>
|
|
16
|
+
<context-group purpose="location">
|
|
17
|
+
<context context-type="sourcefile">src/app/app.component.html</context>
|
|
18
|
+
<context context-type="linenumber">4</context>
|
|
19
|
+
</context-group>
|
|
20
|
+
<note priority="1" from="description">App title</note>
|
|
21
|
+
</trans-unit>
|
|
22
|
+
</body>
|
|
23
|
+
</file>
|
|
24
|
+
</xliff>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hotosm/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.0a3",
|
|
4
4
|
"description": "Shared UI components with theming for use across HOTOSM tools.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"engines": {
|
|
@@ -66,9 +66,12 @@
|
|
|
66
66
|
"react-dom": "Required for Storybook"
|
|
67
67
|
},
|
|
68
68
|
"files": [
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
69
|
+
"components/*.js",
|
|
70
|
+
"components/*.d.ts",
|
|
71
|
+
"react/*.js",
|
|
72
|
+
"react/*.d.ts",
|
|
73
|
+
"theme/hot.css",
|
|
74
|
+
"i18n/*.xliff"
|
|
72
75
|
],
|
|
73
76
|
"publishConfig": {
|
|
74
77
|
"access": "public"
|
|
@@ -84,9 +87,9 @@
|
|
|
84
87
|
"scripts": {
|
|
85
88
|
"dev": "pnpm run build && storybook dev -p 3001",
|
|
86
89
|
"build": "tsc",
|
|
87
|
-
"build:docstrings": "wca analyze 'components
|
|
88
|
-
"build:stories": "storybook build --output-dir=docs/stories",
|
|
89
|
-
"build:docs": "pnpm run build:docstrings && pnpm run
|
|
90
|
+
"build:docstrings": "wca analyze 'components/*.ts' --outDir 'docs/components' --format 'markdown'",
|
|
91
|
+
"build:stories": "pnpm run build && storybook build --output-dir=docs/stories",
|
|
92
|
+
"build:docs": "pnpm run build:docstrings && pnpm run build:stories",
|
|
90
93
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
91
94
|
"lint": "eslint --ext .js,.ts ./"
|
|
92
95
|
}
|