p-elements-core 2.1.0-rc8 → 2.1.0

package/docs/src/scripts/components/app-split-panel/resize-bar.tsx

@@ -1,155 +0,0 @@
-const ACTIVE_HOVER_MS = 300;
-
-@CustomElementConfig({
-  tagName: "resize-bar",
-})
-export class ResizeBarElement extends CustomElement {
-  static readonly style = `
-    :host {
-      z-index: 1;
-      position: relative;
-      touch-action: none;
-    }
-
-    :host([dimension='width']) {
-      width: 3px;
-    }
-
-    :host([dimension='height']) {
-      height: 3px;
-    }
-
-    :host([dimension='width']) > #touchTarget {
-      cursor: col-resize;
-      position: absolute;
-      top: 0;
-      left: calc(var(--resize-bar-touch-size, 6px) / -2);
-      width: var(--resize-bar-touch-size, 6px);
-      height: 100%;
-    }
-
-    :host([dimension='height']) > #touchTarget {
-      cursor: row-resize;
-      position: absolute;
-      top: calc(var(--resize-bar-touch-size, 6px) / -2);
-      left: 0;
-      width: 100%;
-      height: var(--resize-bar-touch-size, 6px);
-    }
-
-    #touchTarget {
-      background: var(--resize-bar-background-color);
-    }
-
-  `;
-
-  @Property({type: "string"})
-  dimension?: 'width' | 'height' = 'width';
-
-
-  @Property({type: "string", attribute: "property"})
-  property?: string;
-
-  @Property({type: "string", attribute: "target"})
-  target?: string;
-
-  @Property({type: "boolean", reflect: true})
-  active = false;
-
-
-  @Property({type: "boolean", reflect: true})
-  resizing = false;
-
-  @Property({type: "number", attribute: "min"})
-  minPropertyValue = 10
-
-  private _hoverTimer?: ReturnType<typeof setTimeout>;
-  private _updateSizeRafId?: ReturnType<typeof requestAnimationFrame>;
-
-
-  render() {
-    return <div id="touchTarget" 
-      on={{
-        pointerover: this._onPointerOver,
-        pointerleave: this._onPointerLeave,
-        pointerdown: this._onPointerDown,
-      }}
-    />;
-  }
-
-  private _onPointerOver = () => {
-    this._hoverTimer = setTimeout(() => {
-      this.active = true;
-      this._hoverTimer = undefined;
-    }, ACTIVE_HOVER_MS);
-  }
-
-  private _onPointerLeave() {
-    if (this.active && !this.resizing) {
-      this.active = false;
-    }
-    if (this._hoverTimer !== undefined) {
-      clearTimeout(this._hoverTimer);
-      this._hoverTimer = undefined;
-    }
-  }
-
-  private _onPointerDown = ({pointerId}: PointerEvent) => {
-    
-    if (!this.target || !this.property) {
-      return;
-    }
-    const target = (this.getRootNode() as ShadowRoot | Document).getElementById(
-      this.target
-    );
-    if (!target) {
-      return;
-    }
-    this.active = true;
-    this.resizing = true;
-    this.setPointerCapture(pointerId);
-    const isWidthDimension = this.dimension === 'width';
-    const {left, right, top, bottom} = target.getBoundingClientRect();
-    const oldSize = isWidthDimension ? right - left : bottom - top;
-
-    let clientX = 0;
-    let clientY = 0;
-
-    const onPointermove = (event: PointerEvent) => {
-      // Only update once per animation frame, but with the latest offsets.
-      clientX = event.clientX;
-      clientY = event.clientY;
-      if (this._updateSizeRafId !== undefined) {
-        return;
-      }
-      this._updateSizeRafId = requestAnimationFrame(() => {
-        this._updateSizeRafId = undefined;
-        if (!this.property) {
-          return;
-        }
-        let newSize = Math.max(
-          0,
-          isWidthDimension ? oldSize + clientX - right : oldSize - clientY + top
-        );
-        if (newSize < this.minPropertyValue) {
-          newSize = this.minPropertyValue;
-        }
-        
-        (target.style as any)[this.property] = `${newSize}px`;
-      });
-    };
-    this.addEventListener('pointermove', onPointermove);
-
-    this.addEventListener(
-      'pointerup',
-      () => {
-        this.releasePointerCapture(pointerId);
-        this.removeEventListener('pointermove', onPointermove);
-        this.active = false;
-        this.resizing = false;
-      },
-      {once: true}
-    );
-  }
-
-}

package/docs/src/scripts/components/lazy-svg/lazy-svg.tsx

@@ -1,94 +0,0 @@
-const LoadingStrategies = ["idle", "visible"] as const;
-export type LoadingStrategy = typeof LoadingStrategies[number];
-
-@CustomElementConfig({
-  tagName: "lazy-svg",
-})
-export class LayzySvgElement extends CustomElement {
-  static style = `
-  :host {
-      display: contents;
-    }
-    svg {
-      width: inherit;
-      height: inherit;
-      min-width: inherit;
-      min-height: inherit;
-      max-width: inherit;
-      max-height: inherit;
-    }`;
-
-  @Property({type: "string", attribute:"href", reflect: true})
-  href: string = "";
-
-  @Property({type: "string", attribute:"label", reflect: true})
-  label: string = "";
-
-  @Property({type: "boolean", attribute: 'svg-aria-hidden'})
-  svgAriaHidden = false;
-
-  @Property({type: "string", attribute: 'svg-role'})
-  svgRole = "";
-
-  @Property({type: "string", attribute:"width", reflect: true})
-  width: "";
-
-  @Property({type: "string", attribute:"height", reflect: true})
-  height: "";
-
-  @Property({type: "string"})
-  loading: LoadingStrategy = "visible";
-
-  @Property({type: "string", attribute: 'root-margin'})
-  rootMargin = '0px 0px 100px 0px';
-
-  @PropertyRenderOnSet
-  private _shouldLoad = false;
-
-  @Query("svg")
-  private _svgEl!: SVGSVGElement;
-
-  private _onIdle(){
-    this._shouldLoad = true;
-  };
-
-  private _visibleLoad(){
-    
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          this._shouldLoad = true;
-          observer.disconnect();
-        }
-      },
-      {
-        rootMargin: this.rootMargin,
-      }
-    );
-    observer.observe(this._svgEl);
-  }
-
-  updated(propertyName: string, oldValue: any, newValue: any): void {
-    if (propertyName === "loading") {
-      if (newValue === "idle") {
-        requestAnimationFrame( () => this._onIdle() );
-      } else if (newValue === "visible") {
-        requestAnimationFrame( () =>
-          requestAnimationFrame( () => this._visibleLoad() )
-        );
-      } 
-    }
-  }
-
-  render = () => {
-    return <svg width={this.width} height={this.height} part="svg">
-      <use href={this._shouldLoad ? this.href : ""}  />
-    </svg>;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "lazy-svg": LayzySvgElement;
-  }
-}

package/docs/src/scripts/index.ts

@@ -1,6 +0,0 @@
-import "./components/lazy-svg/lazy-svg";
-import "./components/app-playground/app-playground";
-import "./components/app-drawer/app-drawer";
-import "./components/app-mode-switch/app-mode-switch";
-import "./components/app-mobile-menu/app-mobile-menu";
-import "./components/app-split-panel/app-split-panel";	

package/docs/src/scripts/playground.ts

@@ -1 +0,0 @@
-export * from "playground-elements";