import { r as registerInstance, h, g as getElement, H as Host } from './index-442cf464.js';
import { m as matchBreakpoint } from './media-f352cbeb.js';

const colCss = ":host{padding:var(--lu-grid-column-padding-xs, var(--lu-grid-column-padding, 5px));margin:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{padding:var(--lu-grid-column-padding-sm, var(--lu-grid-column-padding, 5px))}}@media (min-width: 768px){:host{padding:var(--lu-grid-column-padding-md, var(--lu-grid-column-padding, 5px))}}@media (min-width: 992px){:host{padding:var(--lu-grid-column-padding-lg, var(--lu-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{padding:var(--lu-grid-column-padding-xl, var(--lu-grid-column-padding, 5px))}}";

const win = window;
const SUPPORTS_VARS = !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
const Col = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  onResize() {
    this.el.forceUpdate();
  }
  // Loop through all of the breakpoints to see if the media query
  // matches and grab the column value from the relevant prop if so
  getColumns(property) {
    let matched;
    for (const breakpoint of BREAKPOINTS) {
      const matches = matchBreakpoint(breakpoint);
      // Grab the value of the property, if it exists and our
      // media query matches we return the value
      const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
      if (matches && columns !== undefined) {
        matched = columns;
      }
    }
    // Return the last matched columns since the breakpoints
    // increase in size and we want to return the largest match
    return matched;
  }
  calculateSize() {
    const columns = this.getColumns('size');
    // If size wasn't set for any breakpoint
    // or if the user set the size without a value
    // it means we need to stick with the default and return
    // e.g. <lu-col size-md>
    if (!columns || columns === '') {
      return;
    }
    // If the size is set to auto then don't calculate a size
    const colSize = (columns === 'auto')
      ? 'auto'
      // If CSS supports variables we should use the grid columns var
      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--lu-grid-columns, 12)) * 100%)`
        // Convert the columns to a percentage by dividing by the total number
        // of columns (12) and then multiplying by 100
        : ((columns / 12) * 100) + '%';
    return {
      'flex': `0 0 ${colSize}`,
      'width': `${colSize}`,
      'max-width': `${colSize}`
    };
  }
  // Called by push, pull, and offset since they use the same calculations
  calculatePosition(property, modifier) {
    const columns = this.getColumns(property);
    if (!columns) {
      return;
    }
    // If the number of columns passed are greater than 0 and less than
    // 12 we can position the column, else default to auto
    const amount = SUPPORTS_VARS
      // If CSS supports variables we should use the grid columns var
      ? `calc(calc(${columns} / var(--lu-grid-columns, 12)) * 100%)`
      // Convert the columns to a percentage by dividing by the total number
      // of columns (12) and then multiplying by 100
      : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto';
    return {
      [modifier]: amount
    };
  }
  calculateOffset() {
    return this.calculatePosition('offset', 'margin-left');
  }
  calculatePull() {
    return this.calculatePosition('pull', 'right');
  }
  calculatePush() {
    return this.calculatePosition('push', 'left');
  }
  hostData() {
    return {
      style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset()), this.calculatePull()), this.calculatePush()), this.calculateSize())
    };
  }
  __stencil_render() {
    return h("slot", null);
  }
  get el() { return getElement(this); }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
Col.style = colCss;

export { Col as lu_col };

//# sourceMappingURL=lu-col.entry.js.map