@stories-js/core/dist/collection/components/zoom/zoom.js

Stories web components to build stories

/*!
 * (C) StoriesJS https://storiesjs.org - GPL-2.0 License
 */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
import { browserSupportsCssZoom, computeTransformStyle, computeZoomStyle } from './utils';
const zoomStyle = browserSupportsCssZoom();
export class Zoom {
  constructor() {
    this.height = 0;
    this.zoom = 1;
  }
  watchStateHandler(newDiv) {
    this.height = newDiv.getBoundingClientRect().height;
  }
  render() {
    const style = zoomStyle ? computeZoomStyle(this.zoom) : computeTransformStyle(this.height, this.zoom);
    return (h(Host, { style: style },
      h("div", { ref: (el) => this.div = el, class: "innerZoomElementWrapper" },
        h("slot", null))));
  }
  static get is() { return "stories-zoom"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["zoom.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["zoom.css"]
  }; }
  static get properties() { return {
    "zoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "zoom",
      "reflect": false,
      "defaultValue": "1"
    }
  }; }
  static get states() { return {
    "div": {},
    "height": {}
  }; }
  static get watchers() { return [{
      "propName": "div",
      "methodName": "watchStateHandler"
    }]; }
}
//# sourceMappingURL=zoom.js.map