@hotosm/ui 0.2.0-b3 → 0.2.0-b5

package/components/Toolbar.d.ts

@@ -1,26 +0,0 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
-import { LitElement } from "lit";
-export declare class Toolbar extends LitElement {
-    name: string;
-    /** Change the position of the tooltips relative to buttons. */
-    tooltipPosition: string;
-    static styles: import("lit").CSSResult[];
-    protected render(): import("lit").TemplateResult<1>;
-    private renderButtonGroup;
-    private renderButton;
-    private readonly undo;
-    private readonly redo;
-    private readonly bold;
-    private readonly italic;
-    private readonly underline;
-    private readonly alignLeft;
-    private readonly alignCenter;
-    private readonly alignRight;
-}
-export default Toolbar;

package/components/Toolbar.js

@@ -1,123 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
-import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
-import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
-import { LitElement, css, html } from "lit";
-import { property } from "lit/decorators.js";
-import registerBundledIcons from '../components/icons';
-registerBundledIcons();
-// import { cva } from "class-variance-authority";
-// const toolbarStyle = cva(
-//   "some-css-var",
-//   {
-//     variants: {
-//       someProperty: {
-//         true: "some-css-var",
-//         false: "some-css-var",
-//       },
-//     },
-//   },
-// );
-export class Toolbar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "hot-toolbar";
-        /** Change the position of the tooltips relative to buttons. */
-        this.tooltipPosition = "top";
-        this.undo = (e) => {
-            // As the original event is also named 'click'
-            // stop propagation of the original event
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-undo-click"));
-        };
-        this.redo = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-redo-click"));
-        };
-        this.bold = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-bold-click"));
-        };
-        this.italic = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-italic-click"));
-        };
-        this.underline = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-underline-click"));
-        };
-        this.alignLeft = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-leftalign-click"));
-        };
-        this.alignCenter = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-centeralign-click"));
-        };
-        this.alignRight = (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new Event("hot-rightalign-click"));
-        };
-    }
-    // class=${toolbarStyle({
-    //   someProperty: this.someProperty,
-    // })}
-    render() {
-        return html `
-      <div class="button-group-toolbar">
-        ${this.renderButtonGroup('History', [
-            { content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
-            { content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
-        ])}
-        ${this.renderButtonGroup('Formatting', [
-            { content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
-            { content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
-            { content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
-        ])}
-        ${this.renderButtonGroup('Alignment', [
-            { content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
-            { content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
-            { content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
-        ])}
-      </div>
-    `;
-    }
-    renderButtonGroup(label, buttons) {
-        return html `
-      <sl-button-group label=${label}>
-        ${buttons.map(button => this.renderButton(button))}
-      </sl-button-group>
-    `;
-    }
-    renderButton({ content, icon, label, action }) {
-        return html `
-      <sl-tooltip content=${content} placement="${this.tooltipPosition}">
-        <sl-button @click=${action ?? (() => { })}><sl-icon library="bundled" name=${icon} label=${label}></sl-icon></sl-button>
-      </sl-tooltip>
-    `;
-    }
-}
-Toolbar.styles = [
-    css `
-      @unocss-placeholder;
-    `,
-    // unsafeCSS(reset),
-];
-__decorate([
-    property()
-], Toolbar.prototype, "name", void 0);
-__decorate([
-    property({ type: String, attribute: "tooltip-position" })
-], Toolbar.prototype, "tooltipPosition", void 0);
-export default Toolbar;
-// Define web component
-customElements.define("hot-toolbar", Toolbar);

package/components/Tracking.d.ts

@@ -1,26 +0,0 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
-import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-import { LitElement } from "lit";
-declare global {
-    interface Window {
-        _paq: any[];
-    }
-}
-export declare class Tracking extends LitElement {
-    name: string;
-    /** The Matomo site id for tracking. */
-    siteId: string;
-    /** The domains to apply tracking. */
-    domain: string;
-    /** Force display the banner. */
-    force: boolean;
-    isOpen: boolean;
-    static styles: import("lit").CSSResult[];
-    protected render(): import("lit").TemplateResult<1>;
-    private _setAgree;
-    private _setDisagree;
-    connectedCallback(): void;
-}
-export default Tracking;

package/components/Tracking.js

@@ -1,167 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
-import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import registerBundledIcons from '../components/icons';
-registerBundledIcons();
-export class Tracking extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = "hot-tracking";
-        /** The Matomo site id for tracking. */
-        this.siteId = "";
-        /** The domains to apply tracking. */
-        this.domain = "";
-        /** Force display the banner. */
-        this.force = false;
-        this.isOpen = true;
-    }
-    render() {
-        return html `<sl-alert
-      variant="danger"
-      ?open=${this.isOpen}
-    >
-    <sl-icon id="hot-red-text" library="bundled" slot="icon" name="info-circle"></sl-icon>
-
-    <p id="tracking-header">
-    About the information we collect
-    </p>
-
-    <p>
-    We use cookies and similar technologies to recognize and analyze your visits,
-    and measure traffic usage and activity. You can learn about how we use the data
-    about your visit or information you provide reading our
-      <a
-        style="color: #d63f3f;"
-        href="https://www.hotosm.org/privacy"
-        target="_blank"
-        rel="noopener noreferrer"
-      >privacy policy</a>.
-    By clicking "I Agree", you consent to the use of cookies.
-    </p>
-
-    <sl-button @click=${(e) => { this._setAgree(e); }}>I Agree</sl-button>
-    <sl-button @click=${(e) => { this._setDisagree(e); }}>I Do Not Agree</sl-button>
-    </sl-alert>`;
-    }
-    _setAgree(_e) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        if (_paq.length === 0)
-            return;
-        _paq.push(['rememberConsentGiven']);
-        this.isOpen = false;
-        localStorage.setItem(`${this.siteId}-matomo-agree`, 'true');
-        this.dispatchEvent(new Event('agree', { bubbles: true, composed: true }));
-    }
-    _setDisagree(_e) {
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        if (_paq.length === 0)
-            return;
-        _paq.push(['forgetConsentGiven']);
-        this.isOpen = false;
-        localStorage.setItem(`${this.siteId}-matomo-agree`, 'false');
-        this.dispatchEvent(new Event('disagree', { bubbles: true, composed: true }));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Close and halt execution if wrong domain
-        if (!this.force && window.location.hostname !== this.domain) {
-            console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`);
-            this.isOpen = false;
-            return;
-        }
-        const matomoTrackingId = this.siteId;
-        // Close and halt execution if siteId or domain not set
-        if (!this.force && (matomoTrackingId.length === 0 || this.domain.length === 0)) {
-            console.warn('Matomo init failed. No site id or domains provided.');
-            this.isOpen = false;
-            return;
-        }
-        // Close and halt execution if already disagreed
-        const consent = localStorage.getItem(`${this.siteId}-matomo-agree`);
-        if (consent === 'false') {
-            this.isOpen = false;
-            return;
-        }
-        // Close prompt only if already agreed, continue
-        if (consent === 'true') {
-            this.isOpen = false;
-        }
-        console.log(`Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`);
-        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        const _paq = (window._paq = window._paq || []);
-        // tracker methods like "setCustomDimension" should be called before "trackPageView"
-        _paq.push(['requireConsent']);
-        _paq.push(['setDomains', [this.domain]]);
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']); // Tracks downloads
-        _paq.push(['trackVisibleContentImpressions']); // Tracks content
-        (function () {
-            const u = '//matomo.hotosm.org/';
-            _paq.push(['setTrackerUrl', u + 'matomo.php']);
-            _paq.push(['setSiteId', matomoTrackingId]);
-            const d = document;
-            const g = d.createElement('script');
-            const s = d.getElementsByTagName('script')[0];
-            if (s?.parentNode != null) {
-                g.async = true;
-                g.src = u + 'matomo.js';
-                s.parentNode.insertBefore(g, s);
-            }
-            else {
-                console.warn('Script insertion failed. Parent node is null.');
-            }
-        })();
-    }
-}
-Tracking.styles = [
-    css `
-      @unocss-placeholder;
-    `,
-    // Temp styles until UnoCSS setup
-    css `
-      #tracking-header {
-        font-weight: var(--sl-font-weight-bold);
-        font-size: var(--sl-font-size-large);
-        color: #d63f3f;
-        text-align: center;
-      }
-      sl-alert::part(base) {
-        position: absolute;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1000;
-        width: 80vw;
-        text-align: center;
-      }
-    `
-];
-__decorate([
-    property()
-], Tracking.prototype, "name", void 0);
-__decorate([
-    property({ type: String, attribute: "site-id" })
-], Tracking.prototype, "siteId", void 0);
-__decorate([
-    property({ type: String })
-], Tracking.prototype, "domain", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tracking.prototype, "force", void 0);
-__decorate([
-    state()
-], Tracking.prototype, "isOpen", void 0);
-export default Tracking;
-// Define web component
-customElements.define("hot-tracking", Tracking);

package/components/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Button } from './Button';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';

package/components/index.js

@@ -1,6 +0,0 @@
-// Index to import all components together
-// import '@hotosm/ui/components';
-export { default as Button } from './Button';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';