@operato/contact 8.0.0-alpha.4 → 8.0.0-alpha.50

package/src/ox-pfp.ts

@@ -68,7 +68,7 @@ export class OxPfp extends LitElement {
 
   render() {
     return this.editMode
-      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''} @dblclick=${() => this.edit.fit()}>
+      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
           <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>delete</md-icon>
           <md-icon
             title="save"

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

package/src/ox-zoomable-image.ts

@@ -1,169 +0,0 @@
-import { css, LitElement, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-function getPoint(e: Event): { x: number; y: number } | undefined {
-  if ((e as MouseEvent).button == 0) {
-    return {
-      x: (e as MouseEvent).clientX,
-      y: (e as MouseEvent).clientY
-    }
-  } else if ((e as TouchEvent).touches?.length == 1) {
-    const touch = (e as TouchEvent).touches[0]
-    return {
-      x: touch.clientX,
-      y: touch.clientY
-    }
-  } else {
-    return
-  }
-}
-
-@customElement('ox-zoomable-image')
-export class OxZoomableImage extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    :host::before {
-      content: '';
-      display: block;
-
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-
-      background-image: var(
-        --background-image,
-        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
-      );
-      transform: var(--image-transform, '');
-      background-size: 100% 100%;
-    }
-  `
-
-  @property({ type: String }) src?: string
-
-  @state() zoom: number = 1
-  @state() left: number = 0
-  @state() top: number = 0
-
-  private dragStart?: { x: number; y: number }
-
-  private dragEndHandler = this.onDragEnd.bind(this) as EventListener
-  private dragMoveHandler = this.onDragMove.bind(this) as EventListener
-  private dragStartHandler = this.onDragStart.bind(this) as EventListener
-  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener
-  private resetHandler = this.onReset.bind(this) as EventListener
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this.addEventListener('mousewheel', this.wheelEventHandler, false)
-
-    this.addEventListener('mousedown', this.dragStartHandler)
-    this.addEventListener('touchstart', this.dragStartHandler)
-    this.addEventListener('dblclick', this.resetHandler)
-
-    document.addEventListener('mouseup', this.dragEndHandler)
-    document.addEventListener('touchend', this.dragEndHandler)
-    document.addEventListener('touchcancel', this.dragEndHandler)
-    document.addEventListener('mousemove', this.dragMoveHandler)
-    document.addEventListener('touchmove', this.dragMoveHandler)
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('mousewheel', this.wheelEventHandler, false)
-
-    this.removeEventListener('mousedown', this.dragStartHandler!)
-    this.removeEventListener('touchstart', this.dragStartHandler!)
-    this.removeEventListener('dblclick', this.resetHandler!)
-
-    document.removeEventListener('mouseup', this.dragEndHandler!)
-    document.removeEventListener('touchend', this.dragEndHandler!)
-    document.removeEventListener('touchcancel', this.dragEndHandler!)
-    document.removeEventListener('mousemove', this.dragMoveHandler!)
-    document.removeEventListener('touchmove', this.dragMoveHandler!)
-
-    super.disconnectedCallback()
-  }
-
-  updated(changes: PropertyValues<this>) {
-    const style = this.style
-
-    if (changes.has('src') && this.src) {
-      style.setProperty('--background-image', `url('${this.src}')`)
-    }
-
-    style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`)
-  }
-
-  onWheelEvent(e: MouseEvent) {
-    e.preventDefault()
-
-    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
-
-    this.zoom *= 1 - delta / 20
-  }
-
-  onDragStart(e: Event) {
-    const point = getPoint(e)
-
-    if (point) {
-      this.dragStart = point
-      e.stopPropagation()
-      return false
-    }
-  }
-
-  onDragMove(e: Event) {
-    if (!this.dragStart) {
-      return false
-    }
-
-    const point = getPoint(e)
-
-    if (!point) {
-      return false
-    }
-
-    e.stopPropagation()
-    e.preventDefault()
-
-    const dragStart = point
-    var { x, y } = point
-
-    x -= this.dragStart.x
-    y -= this.dragStart.y
-
-    this.dragStart = dragStart
-
-    const { offsetHeight, offsetWidth } = this
-
-    this.top += (y / offsetHeight) * 100
-    this.left += (x / offsetWidth) * 100
-
-    return false
-  }
-
-  onDragEnd(e: Event) {
-    if (this.dragStart) {
-      e.stopPropagation()
-      e.preventDefault()
-
-      delete this.dragStart
-    }
-  }
-
-  onReset(e: Event) {
-    this.zoom = 1
-    this.left = 0
-    this.top = 0
-  }
-}

package/stories/ox-zoomable-image.stories.ts

@@ -1,40 +0,0 @@
-import '@operato/i18n'
-import '../src/ox-zoomable-image.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-zoomable-image',
-  component: 'ox-zoomable-image',
-  argTypes: {
-    src: { control: 'text' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  src?: string
-}
-
-const Template: Story<ArgTypes> = ({ src = '' }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <div style="height: 300px">
-    <ox-zoomable-image src=${src} style="width: 300px; height: 300px"> </ox-zoomable-image>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  src: '/assets/sample-image.png'
-}