@hotosm/ui 0.2.0-b5 → 0.3.0-b2

package/components/toolbar/toolbar.ts

@@ -1,171 +0,0 @@
-import "../../theme/hot-sl.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, html } from "lit";
-import { property } from "lit/decorators.js";
-import styles from './toolbar.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-import registerBundledIcons from "../../components/icons";
-
-registerBundledIcons();
-
-export class Toolbar extends LitElement {
-
-  static styles: CSSResultGroup = [styles];
-
-  name = "hot-toolbar";
-
-  /** Change the position of the tooltips relative to buttons. */
-  @property({ type: String, attribute: "tooltip-position" })
-  accessor tooltipPosition =
-    "top";
-
-  protected render() {
-    return html`
-      <div class="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>
-    `;
-  }
-
-  private renderButtonGroup(
-    label: string,
-    buttons: Array<{
-      content: string;
-      icon: string;
-      label: string;
-      action?: (e: MouseEvent) => void;
-    }>
-  ) {
-    return html`
-      <sl-button-group label=${label}>
-        ${buttons.map((button) => this.renderButton(button))}
-      </sl-button-group>
-    `;
-  }
-
-  private renderButton({
-    content,
-    icon,
-    label,
-    action,
-  }: {
-    content: string;
-    icon: string;
-    label: string;
-    action?: (e: MouseEvent) => void;
-  }) {
-    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>
-    `;
-  }
-
-  private readonly undo = (e: MouseEvent) => {
-    // As the original event is also named 'click'
-    // stop propagation of the original event
-    e.stopPropagation();
-    this.dispatchEvent(new Event("undo"));
-  };
-
-  private readonly redo = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("redo"));
-  };
-
-  private readonly bold = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("bold"));
-  };
-
-  private readonly italic = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("italic"));
-  };
-
-  private readonly underline = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("underline"));
-  };
-
-  private readonly alignLeft = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("leftalign"));
-  };
-
-  private readonly alignCenter = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("centeralign"));
-  };
-
-  private readonly alignRight = (e: MouseEvent) => {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("rightalign"));
-  };
-}
-
-export default Toolbar;
-
-// Define web component
-customElements.define("hot-toolbar", Toolbar);

package/components/tracking/tracking.styles.ts

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .tracking {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1000;
-    width: 80vw;
-    text-align: center;
-  }
-
-  .tracking--header {
-    font-weight: var(--sl-font-weight-bold);
-    font-size: var(--sl-font-size-large);
-    text-align: center;
-  }
-
-  .tracking--link {
-    color: var(--sl-color-primary-700);
-  }
-`

package/components/tracking/tracking.ts

@@ -1,177 +0,0 @@
-import "../../theme/hot-sl.css";
-
-import "@shoelace-style/shoelace/dist/components/alert/alert.js";
-
-import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import styles from './tracking.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-import registerBundledIcons from "../../components/icons";
-
-registerBundledIcons();
-
-declare global {
-  interface Window {
-    _paq: any[];
-  }
-}
-
-export class Tracking extends LitElement {
-
-  static styles: CSSResultGroup = [styles];
-
-  name = "hot-tracking";
-
-  /** The Matomo site id for tracking. */
-  @property({ type: String, attribute: "site-id" })
-  accessor siteId: string = "";
-
-  /** The domains to apply tracking. */
-  @property({ type: String })
-  accessor domain: string = "";
-
-  /** Force display the banner. */
-  @property({ type: Boolean })
-  accessor force: boolean = false;
-
-  @property({ type: Boolean })
-  accessor isOpen: boolean = true;
-
-  protected render() {
-    return html`<sl-alert class="tracking" variant="danger" ?open=${this.isOpen}>
-      <sl-icon
-        id="hot-red-text"
-        library="bundled"
-        slot="icon"
-        name="info-circle"
-      ></sl-icon>
-
-      <p id="tracking-header" class="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
-          class="tracking--link"
-          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: MouseEvent) => {
-          this._setAgree(e);
-        }}
-        >I Agree</sl-button
-      >
-      <sl-button
-        @click=${(e: MouseEvent) => {
-          this._setDisagree(e);
-        }}
-        >I Do Not Agree</sl-button
-      >
-    </sl-alert>`;
-  }
-
-  private _setAgree(_e: MouseEvent) {
-    // 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 }));
-  }
-
-  private _setDisagree(_e: MouseEvent) {
-    // 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.");
-      }
-    })();
-  }
-}
-
-export default Tracking;
-
-// Define web component
-customElements.define("hot-tracking", Tracking);

package/dist/components/index.d.ts

@@ -1,130 +0,0 @@
-import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
-import { default as SlAlert } from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
-import { default as SlAnimatedImage } from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
-import { default as SlAnimation } from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
-import { default as SlAvatar } from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
-import { default as SlBadge } from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
-import { default as SlBreadcrumb } from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
-import { default as SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
-import { default as SlButton } from '@shoelace-style/shoelace/dist/components/button/button.component.js';
-import { default as SlButtonGroup } from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
-import { default as SlCard } from '@shoelace-style/shoelace/dist/components/card/card.component.js';
-import { default as SlCarousel } from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
-import { default as SlCarouselItem } from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
-import { default as SlCheckbox } from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
-import { default as SlColorPicker } from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
-import { default as SlCopyButton } from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
-import { default as SlDetails } from '@shoelace-style/shoelace/dist/components/details/details.component.js';
-import { default as SlDialog } from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
-import { default as SlDivider } from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
-import { default as SlDrawer } from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
-import { default as SlDropdown } from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
-import { default as SlFormatBytes } from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
-import { default as SlFormatDate } from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
-import { default as SlFormatNumber } from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
-import { default as SlIcon } from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
-import { default as SlIconButton } from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
-import { default as SlImageComparer } from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
-import { default as SlInclude } from '@shoelace-style/shoelace/dist/components/include/include.component.js';
-import { default as SlInput } from '@shoelace-style/shoelace/dist/components/input/input.component.js';
-import { default as SlMenu } from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
-import { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
-import { default as SlMenuLabel } from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
-import { default as SlMutationObserver } from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
-import { default as SlOption } from '@shoelace-style/shoelace/dist/components/option/option.component.js';
-import { default as SlPopup } from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
-import { default as SlProgressBar } from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
-import { default as SlProgressRing } from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
-import { default as SlQRCode } from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
-import { default as SlRadio } from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
-import { default as SlRadioButton } from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
-import { default as SlRadioGroup } from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
-import { default as SlRange } from '@shoelace-style/shoelace/dist/components/range/range.component.js';
-import { default as SlRating } from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
-import { default as SlRelativeTime } from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
-import { default as SlResizeObserver } from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
-import { default as SlSelect } from '@shoelace-style/shoelace/dist/components/select/select.component.js';
-import { default as SlSkeleton } from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
-import { default as SlSpinner } from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
-import { default as SlSplitPanel } from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
-import { default as SlSwitch } from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
-import { default as SlTab } from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
-import { default as SlTabGroup } from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
-import { default as SlTabPanel } from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
-import { default as SlTag } from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
-import { default as SlTextarea } from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
-import { default as SlTooltip } from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
-import { default as SlTree } from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
-import { default as SlTreeItem } from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
-import { default as SlVisuallyHidden } from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
-import { default as HotHeader } from './header/header';
-import { default as HotLogo } from './logo/logo';
-import { default as HotToolbar } from './toolbar/toolbar';
-import { default as HotTracking } from './tracking/tracking';
-
-declare global {
-    interface HTMLElementTagNameMap {
-        'hot-alert': SlAlert;
-        'hot-animated-image': SlAnimatedImage;
-        'hot-animation': SlAnimation;
-        'hot-avatar': SlAvatar;
-        'hot-badge': SlBadge;
-        'hot-breadcrumb': SlBreadcrumb;
-        'hot-breadcrumb-item': SlBreadcrumbItem;
-        'hot-button': SlButton;
-        'hot-button-group': SlButtonGroup;
-        'hot-card': SlCard;
-        'hot-carousel': SlCarousel;
-        'hot-carousel-item': SlCarouselItem;
-        'hot-checkbox': SlCheckbox;
-        'hot-color-picker': SlColorPicker;
-        'hot-copy-button': SlCopyButton;
-        'hot-details': SlDetails;
-        'hot-dialog': SlDialog;
-        'hot-divider': SlDivider;
-        'hot-drawer': SlDrawer;
-        'hot-dropdown': SlDropdown;
-        'hot-format-bytes': SlFormatBytes;
-        'hot-format-date': SlFormatDate;
-        'hot-format-number': SlFormatNumber;
-        'hot-icon': SlIcon;
-        'hot-icon-button': SlIconButton;
-        'hot-image-comparer': SlImageComparer;
-        'hot-include': SlInclude;
-        'hot-input': SlInput;
-        'hot-menu': SlMenu;
-        'hot-menu-item': SlMenuItem;
-        'hot-menu-label': SlMenuLabel;
-        'hot-mutation-observer': SlMutationObserver;
-        'hot-option': SlOption;
-        'hot-popup': SlPopup;
-        'hot-progress-bar': SlProgressBar;
-        'hot-progress-ring': SlProgressRing;
-        'hot-qrcode': SlQRCode;
-        'hot-radio': SlRadio;
-        'hot-radio-button': SlRadioButton;
-        'hot-radio-group': SlRadioGroup;
-        'hot-range': SlRange;
-        'hot-rating': SlRating;
-        'hot-relative-time': SlRelativeTime;
-        'hot-resize-observer': SlResizeObserver;
-        'hot-select': SlSelect;
-        'hot-skeleton': SlSkeleton;
-        'hot-spinner': SlSpinner;
-        'hot-split-panel': SlSplitPanel;
-        'hot-switch': SlSwitch;
-        'hot-tab': SlTab;
-        'hot-tab-group': SlTabGroup;
-        'hot-tab-panel': SlTabPanel;
-        'hot-tag': SlTag;
-        'hot-textarea': SlTextarea;
-        'hot-tooltip': SlTooltip;
-        'hot-tree': SlTree;
-        'hot-tree-item': SlTreeItem;
-        'hot-visually-hidden': SlVisuallyHidden;
-        'hot-header': HotHeader;
-        'hot-toolbar': HotToolbar;
-        'hot-tracking': HotTracking;
-    }
-}
-export { setBasePath, SlAlert as Alert, SlAnimatedImage as AnimatedImage, SlAnimation as Animation, SlAvatar as Avatar, SlBadge as Badge, SlBreadcrumb as Breadcrumb, SlBreadcrumbItem as BreadcrumbItem, SlButton as Button, SlButtonGroup as ButtonGroup, SlCard as Card, SlCarousel as Carousel, SlCarouselItem as CarouselItem, SlCheckbox as Checkbox, SlColorPicker as ColorPicker, SlCopyButton as CopyButton, SlDetails as Details, SlDialog as Dialog, SlDivider as Divider, SlDrawer as Drawer, SlDropdown as Dropdown, SlFormatBytes as FormatBytes, SlFormatDate as FormatDate, SlFormatNumber as FormatNumber, SlIcon as Icon, SlIconButton as IconButton, SlImageComparer as ImageComparer, SlInclude as Include, SlInput as Input, SlMenu as Menu, SlMenuItem as MenuItem, SlMenuLabel as MenuLabel, SlMutationObserver as MutationObserver, SlOption as Option, SlPopup as Popup, SlProgressBar as ProgressBar, SlProgressRing as ProgressRing, SlQRCode as QRCode, SlRadio as Radio, SlRadioButton as RadioButton, SlRadioGroup as RadioGroup, SlRange as Range, SlRating as Rating, SlRelativeTime as RelativeTime, SlResizeObserver as ResizeObserver, SlSelect as Select, SlSkeleton as Skeleton, SlSpinner as Spinner, SlSplitPanel as SplitPanel, SlSwitch as Switch, SlTab as Tab, SlTabGroup as TabGroup, SlTabPanel as TabPanel, SlTag as Tag, SlTextarea as Textarea, SlTooltip as Tooltip, SlTree as Tree, SlTreeItem as TreeItem, SlVisuallyHidden as VisuallyHidden, HotHeader as Header, HotLogo as Logo, HotToolbar as Toolbar, HotTracking as Tracking, };

package/dist/components/react/Header.d.ts

@@ -1,2 +0,0 @@
-declare const reactWrapper: React.ForwardRefExoticComponent<any>;
-export default reactWrapper;

package/dist/components/react/Logo.d.ts

@@ -1,2 +0,0 @@
-declare const reactWrapper: React.ForwardRefExoticComponent<any>;
-export default reactWrapper;

package/dist/components/react/Toolbar.d.ts

@@ -1,2 +0,0 @@
-declare const reactWrapper: React.ForwardRefExoticComponent<any>;
-export default reactWrapper;

package/dist/components/react/Tracking.d.ts

@@ -1,2 +0,0 @@
-declare const reactWrapper: React.ForwardRefExoticComponent<any>;
-export default reactWrapper;

package/dist/components/tracking/tracking.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('lit').CSSResult;
-export default _default;

package/i18n/en.xliff

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-  <file source-language="en" target-language="fr" datatype="plaintext" original="ng2.template">
-    <body>
-      <trans-unit id="common.welcome">
-        <source>Welcome!</source>
-        <target>Bienvenue!</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/app.component.html</context>
-          <context context-type="linenumber">16</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="common.app.title">
-        <source>Diary</source>
-        <target>Agenda</target>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/app.component.html</context>
-          <context context-type="linenumber">4</context>
-        </context-group>
-        <note priority="1" from="description">App title</note>
-      </trans-unit>
-    </body>
-  </file>
-</xliff>