@madgex/design-system 13.4.0 → 13.5.0

package/src/components/image-cropper/image-cropper.js

@@ -0,0 +1,447 @@
+import * as helpers from './helpers.js';
+import { MdsImageCropperTouchArea } from './image-cropper-touch-area.js';
+
+// TODO: how to have a separate copy for standalone version?
+if (!window.customElements.get('mds-image-cropper-touch-area')) {
+  window.customElements.define('mds-image-cropper-touch-area', MdsImageCropperTouchArea);
+}
+/**
+ * MdsImageCropper
+ */
+export class MdsImageCropper extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      'src',
+      'aspect-ratio',
+      'output-width',
+      'output-height',
+      'zoom',
+      'min-zoom',
+      'max-zoom',
+      'crop-x',
+      'crop-y',
+      'no-grid',
+      'restrict-position',
+    ];
+  }
+  /** watch this web component container size, to update all calculations */
+  #resizeObserver = null;
+  /** automatically generated id */
+  #_id = window.crypto.randomUUID();
+
+  constructor() {
+    super();
+  }
+  get rootNode() {
+    return this;
+  }
+  get #document() {
+    return this.getRootNode({ composed: true });
+  }
+  /**
+   * if attributes change, re-render template, refresh state
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   */
+  attributeChangedCallback(name, oldValue = null, newValue = null) {
+    if (!this.isConnected) return; // attributes are null before connect, causing callback to fire
+    if (oldValue === newValue) return; // no need to re-render or update if attribute value stays the same
+
+    if (name === 'zoom') {
+      this.#emitCropData();
+    }
+
+    const syncTouchAreaAttrs = ['zoom', 'min-zoom', 'max-zoom', 'crop-x', 'crop-y'];
+    if (syncTouchAreaAttrs.includes(name)) {
+      this.#syncTouchAreaAttributes();
+    }
+
+    if (name === 'src') {
+      this.#loadImage(newValue);
+    }
+    const updateTemplateAttrs = [
+      'src',
+      'aspect-ratio',
+      'output-width',
+      'output-height',
+      'zoom',
+      'min-zoom',
+      'max-zoom',
+      'crop-x',
+      'crop-y',
+      'no-grid',
+      'restrict-position',
+    ];
+    if (updateTemplateAttrs.includes(name)) {
+      this.#updateTemplate();
+    }
+  }
+  connectedCallback() {
+    this.create();
+  }
+  disconnectedCallback() {
+    this.destroy();
+  }
+  create() {
+    if (this.rootNode.setHTML) {
+      // setHTML always removes XSS risks, we provide an empty sanitizer config to allow everything (but still XSS will be removed)
+      this.rootNode.setHTML(this.#template.innerHTML, { sanitizer: {} });
+    } else {
+      this.rootNode.replaceChildren(this.#template.content.cloneNode(true));
+    }
+
+    this.#syncTouchAreaAttributes();
+    this.#elContainer.addEventListener('zoom', this.#onTouchAreaZoom);
+    this.#elContainer.addEventListener('position', this.#onTouchAreaPosition);
+    this.#elContainer.addEventListener('dragstopped', this.#onTouchAreaDragStopped);
+
+    this.#resizeObserver = new ResizeObserver(() => this.#onContainerResize());
+    this.#resizeObserver.observe(this.#elContainer);
+
+    this.#elImage.addEventListener('load', this.#onImgLoad);
+    this.#loadImage(this.#imageSrc);
+
+    this.#elZoomInput.addEventListener('input', this.#onChangeZoomInput);
+    this.#elButtonZoomOut.addEventListener('click', this.#onClickButtonZoomOut);
+    this.#elButtonZoomIn.addEventListener('click', this.#onClickButtonZoomIn);
+    this.#elButtonReset.addEventListener('click', this.#onClickButtonReset);
+    this.#elButtonCommit.addEventListener('click', this.#onClickButtonCommit);
+  }
+
+  /** destroy cropper, remove events, remove added DOM */
+  destroy() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#elImage?.removeEventListener('load', this.#onImgLoad);
+
+    this.#elContainer?.removeEventListener('zoom', this.#onTouchAreaZoom);
+    this.#elContainer?.removeEventListener('position', this.#onTouchAreaPosition);
+    this.#elContainer?.removeEventListener('dragstopped', this.#onTouchAreaDragStopped);
+
+    this.#elZoomInput?.removeEventListener('input', this.#onChangeZoomInput);
+    this.#elButtonZoomOut?.removeEventListener('click', this.#onClickButtonZoomOut);
+    this.#elButtonZoomIn?.removeEventListener('click', this.#onClickButtonZoomIn);
+    this.#elButtonReset?.removeEventListener('click', this.#onClickButtonReset);
+    this.#elButtonCommit?.removeEventListener('click', this.#onClickButtonCommit);
+
+    this.rootNode?.replaceChildren();
+  }
+
+  get #template() {
+    const template = this.#document.createElement('template');
+    template.innerHTML = /* HTML */ `
+      <div class="mds-image-cropper__wrapper">
+        <mds-image-cropper-touch-area
+          class="mds-image-cropper__container"
+          aria-describedby="${this.#_id}-touch-area-controls"
+        >
+          <div class="mds-image-cropper__background"></div>
+          <img class="mds-image-cropper__image" alt="" />
+          <div class="mds-image-cropper__area"></div>
+        </mds-image-cropper-touch-area>
+        <div class="mds-visually-hidden" id="${this.#_id}-touch-area-controls">
+          ${this.#translations['touch-area-controls']}
+        </div>
+        <div class="mds-image-cropper__aria-live mds-visually-hidden" aria-live="polite"></div>
+      </div>
+
+      <label class="mds-form-label mds-image-cropper__control-label" for="${this.#_id}-zoom">
+        ${this.#translations['zoom-label']}
+      </label>
+      <div class="mds-image-cropper__control mds-margin-bottom-b8">
+        <button
+          type="button"
+          class="mds-image-cropper__control-button mds-image-cropper__control-button-out"
+          aria-label="${this.#translations['btn-zoom-out-aria']}"
+        >
+          <svg aria-hidden viewBox="0 0 32 32" fill="currentColor">
+            <path
+              d="M4 16c0-1.14.846-2.08 1.945-2.23l.305-.02h19.5a2.25 2.25 0 0 1 .305 4.48l-.305.02H6.25A2.25 2.25 0 0 1 4 16Z"
+            ></path>
+          </svg>
+        </button>
+        <input id="${this.#_id}-zoom" type="range" class="mds-image-cropper__control-zoom" step="0.1" />
+        <button
+          type="button"
+          class="mds-image-cropper__control-button mds-image-cropper__control-button-in"
+          aria-label="${this.#translations['btn-zoom-in-aria']}"
+        >
+          <svg aria-hidden viewBox="0 0 32 32" fill="currentColor">
+            <path
+              d="M16 4c1.14 0 2.08.846 2.23 1.945l.02.305v7.5h7.5a2.25 2.25 0 0 1 .305 4.48l-.305.02h-7.5v7.5a2.25 2.25 0 0 1-4.48.305l-.02-.305v-7.5h-7.5a2.25 2.25 0 0 1-.305-4.48l.305-.02h7.5v-7.5A2.25 2.25 0 0 1 16 4Z"
+            ></path>
+          </svg>
+        </button>
+      </div>
+
+      <div class="mds-grid-row mds-grid-end">
+        <div class="mds-grid-col mds-grid-fit-content">
+          <button type="button" class="mds-button mds-button--neutral mds-image-cropper__button-reset">
+            ${this.#translations['btn-reset']}
+          </button>
+        </div>
+        <div class="mds-grid-col mds-grid-fit-content">
+          <button type="button" class="mds-button mds-image-cropper__button-commit">
+            ${this.#translations['btn-commit']}
+          </button>
+        </div>
+      </div>
+    `;
+    return template;
+  }
+  // Elements
+  get #elZoomInput() {
+    return this.rootNode.querySelector('.mds-image-cropper__control-zoom');
+  }
+  get #elWrapper() {
+    return this.rootNode.querySelector('.mds-image-cropper__wrapper');
+  }
+  get #elContainer() {
+    return this.rootNode.querySelector('.mds-image-cropper__container');
+  }
+  get #elImage() {
+    return this.rootNode.querySelector('.mds-image-cropper__image');
+  }
+  get #elCropArea() {
+    return this.rootNode.querySelector('.mds-image-cropper__area');
+  }
+  get #elBackground() {
+    return this.rootNode.querySelector('.mds-image-cropper__background');
+  }
+  get #elAriaLive() {
+    return this.rootNode.querySelector('.mds-image-cropper__aria-live');
+  }
+  get #elButtonReset() {
+    return this.rootNode.querySelector('.mds-image-cropper__button-reset');
+  }
+  get #elButtonCommit() {
+    return this.rootNode.querySelector('.mds-image-cropper__button-commit');
+  }
+  get #elButtonZoomOut() {
+    return this.rootNode.querySelector('.mds-image-cropper__control-button-out');
+  }
+  get #elButtonZoomIn() {
+    return this.rootNode.querySelector('.mds-image-cropper__control-button-in');
+  }
+
+  // Attributes
+  get #translations() {
+    return {
+      'zoom-label': helpers.stripHTML(this.getAttribute('t-zoom-label')) || 'Zoom',
+      'btn-reset': helpers.stripHTML(this.getAttribute('t-btn-reset')) || 'Reset',
+      'btn-commit': helpers.stripHTML(this.getAttribute('t-btn-commit')) || 'Save and crop',
+      'btn-zoom-out-aria': helpers.stripHTML(this.getAttribute('t-btn-zoom-out-aria')) || 'Minus button - Zoom out',
+      'btn-zoom-in-aria': helpers.stripHTML(this.getAttribute('t-btn-zoom-in-aria')) || 'Plus button - Zoom in',
+      'touch-area-controls':
+        helpers.stripHTML(this.getAttribute('t-touch-area-controls')) ||
+        'On this element you can use arrow keys to pan the image around the crop area, and Page Up / Page Down to zoom in and out.',
+      'aria-live':
+        helpers.stripHTML(this.getAttribute('t-aria-live')) ||
+        `Crop Top Position: {y} pixels, Crop Left Position: {x} pixels, Crop Width {width} pixels, Crop Height: {height} pixels. Image Width: {imageWidth} pixels, Image Height: {imageHeight} pixels.`,
+    };
+  }
+  get #zoom() {
+    return parseFloat(this.getAttribute('zoom') || '1');
+  }
+  set #zoom(newZoom) {
+    this.setAttribute('zoom', newZoom);
+  }
+  /** x/y coordinates are 0 at the center of the image */
+  get #crop() {
+    const x = this.getAttribute('crop-x');
+    const y = this.getAttribute('crop-y');
+    const crop = { x: x ? parseFloat(x) : 0, y: y ? parseFloat(y) : 0 };
+    if (this.#restrictPosition) return helpers.restrictPosition(crop, this.#imageSize, this.#cropperSize, this.#zoom);
+    return crop;
+  }
+  set #crop(newCrop) {
+    const { x, y } = this.#restrictPosition
+      ? helpers.restrictPosition(newCrop, this.#imageSize, this.#cropperSize, this.#zoom)
+      : newCrop;
+    this.setAttribute('crop-x', x);
+    this.setAttribute('crop-y', y);
+  }
+  get #minZoom() {
+    return parseFloat(this.getAttribute('min-zoom') || '1');
+  }
+  get #maxZoom() {
+    return parseFloat(this.getAttribute('max-zoom') || '3');
+  }
+  get #noGrid() {
+    const attr = this.getAttribute('no-grid');
+    return attr !== null && attr !== 'false';
+  }
+  get #outputWidth() {
+    const val = parseInt(this.getAttribute('output-width'), 10);
+    return Number.isNaN(val) ? null : val;
+  }
+  get #outputHeight() {
+    const val = parseInt(this.getAttribute('output-height'), 10);
+    return Number.isNaN(val) ? null : val;
+  }
+  // if output width/height attributes were supplied, use those to create aspect ratio, otherwise use aspect-ratio attribute
+  get #aspectRatio() {
+    if (this.#outputHeight && this.#outputWidth) return this.#outputWidth / this.#outputHeight;
+    return parseFloat(this.getAttribute('aspect-ratio') || '1.77777'); // 16/9
+  }
+  /** automatically create a crop area in pixels, derived from image size and aspect ratio */
+  get #cropperSize() {
+    return helpers.getCropSize(this.#elImage?.width, this.#elImage?.height, this.#aspectRatio);
+  }
+  /** prevent image from moving beyond crop area - not restricting can be useful to allow whitespace beyond the image e.g for logos */
+  get #restrictPosition() {
+    return this.getAttribute('restrict-position') !== 'false';
+  }
+  get #imageSrc() {
+    return this.getAttribute('src');
+  }
+  get #imageSize() {
+    return {
+      width: this.#elImage?.width || 0,
+      height: this.#elImage?.height || 0,
+      naturalWidth: this.#elImage?.naturalWidth || 0,
+      naturalHeight: this.#elImage?.naturalHeight || 0,
+    };
+  }
+
+  // Event Handlers
+  #onChangeZoomInput = (e) => {
+    this.#zoom = Math.min(this.#maxZoom, Math.max(e.target.value, this.#minZoom));
+  };
+  #onClickButtonZoomOut = () => {
+    this.#zoom = Math.min(this.#maxZoom, Math.max(this.#zoom - 0.1, this.#minZoom));
+  };
+  #onClickButtonZoomIn = () => {
+    this.#zoom = Math.min(this.#maxZoom, Math.max(this.#zoom + 0.1, this.#minZoom));
+  };
+  #onClickButtonReset = () => {
+    this.#resetZoomAndCrop();
+    this.#dispatchEvent('reset');
+  };
+  #onClickButtonCommit = async () => {
+    const { pixels } = this.#computeCroppedArea || {};
+    if (!pixels) {
+      const error = new Error("Can't perform image crop, pixel crop data missing");
+      this.#dispatchEvent('error', error);
+      return;
+    }
+    try {
+      const blob = await helpers.getCroppedImage({
+        imageEl: this.#elImage,
+        crop: pixels,
+        backgroundFill: '#fff',
+        width: this.#outputWidth,
+        height: this.#outputHeight,
+      });
+      this.#dispatchEvent('commit', blob);
+    } catch (error) {
+      this.#dispatchEvent('error', error);
+    }
+  };
+  #onTouchAreaZoom = (e) => {
+    if (e.detail) this.#zoom = e.detail;
+    this.#syncTouchAreaAttributes();
+  };
+  #onTouchAreaPosition = (e) => {
+    if (e.detail) this.#crop = e.detail;
+    this.#syncTouchAreaAttributes();
+  };
+  #onTouchAreaDragStopped = () => {
+    this.#emitCropData();
+  };
+  /** emit crop data/ update template render if image loads/changes */
+  #onImgLoad = () => {
+    this.#emitCropData();
+    this.#updateTemplate();
+  };
+  /** update template render if component resizes */
+  #onContainerResize() {
+    this.#updateTemplate();
+  }
+
+  // Methods
+  #dispatchEvent(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+  #loadImage(imageSrc) {
+    if (!this.#elImage) return;
+
+    if (!imageSrc) {
+      this.#elImage.removeAttribute('src');
+      return;
+    }
+
+    this.#elImage.src = imageSrc;
+    this.#resetZoomAndCrop();
+  }
+  #resetZoomAndCrop() {
+    this.#zoom = Math.min(this.#maxZoom, Math.max(1, this.#minZoom));
+    this.#crop = { x: 0, y: 0 };
+  }
+  /** ensure touch area component has up to date attributes */
+  #syncTouchAreaAttributes() {
+    this.#elContainer?.setAttribute('zoom', this.#zoom);
+    this.#elContainer?.setAttribute('position-x', this.#crop.x);
+    this.#elContainer?.setAttribute('position-y', this.#crop.y);
+    this.#elContainer?.setAttribute('min-zoom', this.#minZoom);
+    this.#elContainer?.setAttribute('max-zoom', this.#maxZoom);
+  }
+  get #computeCroppedArea() {
+    return (
+      helpers.computeCroppedArea({
+        crop: this.#crop,
+        imageSize: this.#imageSize,
+        cropSize: this.#cropperSize,
+        aspect: this.#aspectRatio,
+        zoom: this.#zoom,
+        restrictPosition: this.#restrictPosition,
+      }) || {}
+    );
+  }
+  /** emit crop data in pixels and percentage, on data change */
+  async #emitCropData() {
+    const { percent, pixels } = this.#computeCroppedArea;
+    try {
+      this.#dispatchEvent('cropchange', { percent, pixels });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /** called when any dynamic values change, ensuring visual render is sync'd with values */
+  #updateTemplate() {
+    if (this.#elImage) {
+      this.#elImage.style.transform = `translate(${this.#crop.x}px, ${this.#crop.y}px) scale(${this.#zoom})`;
+    }
+    if (this.#elCropArea) {
+      this.#elCropArea.style.width = `${this.#cropperSize?.width || 0}px`;
+      this.#elCropArea.style.height = `${this.#cropperSize?.height || 0}px`;
+      this.#elCropArea.classList[this.#noGrid ? 'remove' : 'add']('mds-image-cropper-grid');
+    }
+    if (this.#elBackground) {
+      this.#elBackground.style.width = `${this.#cropperSize?.width || 0}px`;
+      this.#elBackground.style.height = `${this.#cropperSize?.height || 0}px`;
+    }
+    if (this.#elWrapper) {
+      this.#elWrapper.style.aspectRatio = this.#aspectRatio;
+    }
+    if (this.#elZoomInput) {
+      this.#elZoomInput.setAttribute('min', this.#minZoom);
+      this.#elZoomInput.setAttribute('max', this.#maxZoom);
+      this.#elZoomInput.value = this.#zoom;
+    }
+    this.#updateAriaLive();
+  }
+  /** update aria-live area with latest image crop information */
+  #updateAriaLive() {
+    const { pixels } = this.#computeCroppedArea || {};
+    if (!this.#elAriaLive || !this.#imageSize?.naturalWidth || !pixels?.width) return;
+    this.#elAriaLive.textContent = this.#translations['aria-live']
+      .replace('{imageWidth}', this.#imageSize.naturalWidth)
+      .replace('{imageHeight}', this.#imageSize.naturalHeight)
+      .replace('{x}', pixels.x)
+      .replace('{y}', pixels.y)
+      .replace('{width}', pixels.width)
+      .replace('{height}', pixels.height);
+  }
+}

package/src/components/image-cropper/image-cropper.njk

@@ -0,0 +1,99 @@
+{% from "./modal/_macro.njk" import MdsModal %}
+
+<h2>Aspect Ratio 1:1</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper aspect-ratio="1" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper>
+  </div>
+</div>
+<h2>Fixed output in pixels 380x160</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper output-width="380" output-height="160" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper>
+  </div>
+</div>
+<h2>Standalone Shadow DOM</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative" id="shadow-container">
+    <template shadowrootmode="open">
+      <mds-image-cropper-standalone aspect-ratio="1" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper-standalone>
+    </template>
+  </div>
+</div>
+
+<h2>Inside Dialog</h2>
+<p id="site-container">
+<button class="mds-button" data-modal-id="modal">Open Modal</button>
+</p>
+
+{% call MdsModal({
+  id: 'modal',
+  siteContainerId: 'site-container'
+}) -%}
+  <h2>Image Cropper</h2>
+  <mds-image-cropper class="inside-dialog" aspect-ratio="1" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper>
+{%- endcall %}
+
+<script type="module">
+  const el = document.querySelector('.inside-dialog');
+    el.addEventListener('commit', ({detail}) => {
+      if (detail) {
+        try {
+        // cleanup any previous ObjectURLs to clear memory
+          URL.revokeObjectURL(el.getAttribute('src'));
+        } catch (e) {}
+        // feed cropped image right back in to Image Cropper
+        el.setAttribute('src', URL.createObjectURL(detail));
+        if (window.confirm("How do I close this dialog! View your image? Also updating image in cropper")) {
+          window.open(el.getAttribute('src'));
+        } 
+      }
+    });
+</script>
+
+<h2>Small logo - zoom below 1 to create whitespace around original image</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper
+      min-zoom="0.5"
+      restrict-position="false"
+      output-width="380" output-height="160"
+      src="/assets/images/image-cropper-example-logo2.png"></mds-image-cropper>
+  </div>
+</div>
+<h2>Wide image</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper aspect-ratio="1.777" src="/assets/images/image-cropper-example-wide.jpg"></mds-image-cropper>
+  </div>
+</div>
+<h2>Tall image</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper aspect-ratio="1" src="/assets/images/image-cropper-example-tall.png"></mds-image-cropper>
+  </div>
+</div>
+<h2>No grid</h2>
+<div class="mds-grid-row mds-margin-bottom-b4">
+  <div class="mds-grid-col-12 mds-grid-col-md-9 mds-grid-col-lg-6 position-relative">
+    <mds-image-cropper aspect-ratio="1.777" no-grid src="/assets/images/image-cropper-example-wide.jpg"></mds-image-cropper>
+  </div>
+</div>
+<script type="module">
+  const shadowEl = document.querySelector('#shadow-container').shadowRoot.querySelector('mds-image-cropper-standalone');
+  for (const el of [...Array.from(document.querySelectorAll('mds-image-cropper:not(.inside-dialog)')), shadowEl]) {
+    el.addEventListener('commit', ({detail}) => {
+      if (detail) {
+        try {
+        // cleanup any previous ObjectURLs to clear memory
+          URL.revokeObjectURL(el.getAttribute('src'));
+        } catch (e) {}
+        // feed cropped image right back in to Image Cropper
+        el.setAttribute('src', URL.createObjectURL(detail));
+        if (window.confirm("View your image? Also updating image in cropper")) {
+          window.open(el.getAttribute('src'));
+        } 
+      }
+    });
+  }
+</script>

package/src/components/image-cropper/image-cropper.scss

@@ -0,0 +1,93 @@
+.mds-image-cropper__container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+  cursor: move;
+  background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;
+  // background-color: #fff;
+}
+
+.mds-image-cropper__image {
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  will-change: transform;
+}
+
+.mds-image-cropper__area {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 0 9999em;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+}
+
+.mds-image-cropper__background {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+}
+
+.mds-image-cropper-grid:before {
+  content: ' ';
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 33.33%;
+  right: 33.33%;
+  border-top: 0;
+  border-bottom: 0;
+}
+.mds-image-cropper-grid:after {
+  content: ' ';
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  position: absolute;
+  top: 33.33%;
+  bottom: 33.33%;
+  left: 0;
+  right: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.mds-image-cropper__wrapper {
+  position: relative;
+  aspect-ratio: 1; // default
+}
+
+.mds-image-cropper__control {
+  display: flex;
+}
+.mds-image-cropper__control-label {
+  margin-top: 20px;
+}
+.mds-image-cropper__control-zoom {
+  flex: 1;
+}
+.mds-image-cropper__control-button {
+  cursor: pointer;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  width: 2.2rem;
+  padding: 0 6px;
+}

package/src/components/image-cropper/mds-image-cropper-standalone.js

@@ -0,0 +1,39 @@
+/**
+ * "entry" file for standalone Web Component Vite output - allows hashed chunk file names, and at the same time predictable named entry files .
+ *
+ * MdsImageCropperStandalone wraps the regular MdsImageCropper, and adds ShadowDOM and standalone CSS.
+ *
+ * TODO: apply true-cropper image-cropper.scss, but cropper is not in shadowDOM so CSS does not work as adoptedStyleSheet....
+ */
+
+import { MdsImageCropper } from './image-cropper.js';
+
+// css generated using regular design system CSS, but stripped down using image-cropper.js usage
+import css from './image-cropper-standalone.scss?purgecss=./image-cropper.js&inline';
+// include 100% of image-cropper.scss, all is required even though true-cropper isnt initialized yet
+import cssImageCropper from './image-cropper.scss?inline';
+
+/**
+ * MdsImageCropper in shadowDOM with standalone CSS
+ */
+class MdsImageCropperStandalone extends MdsImageCropper {
+  constructor(...args) {
+    super(...args);
+
+    this.attachShadow({ mode: 'open' });
+    // shadow CSS, with a small reset
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      * {border: 0;outline:0;padding: 0;margin:0;box-sizing:border-box;}
+      ${css}
+      ${cssImageCropper}`);
+    this.rootNode.adoptedStyleSheets = [sheet];
+  }
+  get rootNode() {
+    return this.shadowRoot;
+  }
+}
+// alternative name vs the main MDS bundle version, to avoid collision of defined names
+if (!window.customElements.get('mds-image-cropper-standalone')) {
+  window.customElements.define('mds-image-cropper-standalone', MdsImageCropperStandalone);
+}

package/src/js/index-fractal.js

@@ -5,4 +5,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   switchStateScript.init();
   notificationScript.init();
   await import('../components/timeout-dialog/mds-timeout-dialog-standalone.js');
+  await import('../components/image-cropper/mds-image-cropper-standalone.js');
 });