import { r as registerInstance, h, H as Host } from './index-33e43734.js';

const checkmarkCss = "@keyframes fadeRoll{0%{transform:rotate(30deg) translateY(50px) scale(0.6);opacity:0}80%{transform:rotate(-15deg) translateY(-10px) scale(1);opacity:1}100%{transform:rotate(0deg) translateY(0) scale(1);opacity:1}}.checkmark-wrapper{display:block;margin:0 auto;width:var(\n    --floodteam-checkmark-width,\n    var(--floodteam-checkmark-size, 150px)\n  );height:var(\n    --floodteam-checkmark-height,\n    var(--floodteam-checkmark-size, 150px)\n  );max-width:var(--floodteam-checkmark-max-width, 800px);min-height:var(\n    --floodteam-checkmark-min-height,\n    var(--floodteam-checkmark-size, 150px)\n  )}ion-icon{display:block;height:var(--floodteam-checkmark-size, 150px);width:var(--floodteam-checkmark-size, 150px);color:var(--ion-color-secondary, #000000);display:block;margin:0 auto;opacity:0}.animate ion-icon{animation:fadeRoll 2s;animation-iteration-count:1;animation-fill-mode:forwards}";

let Checkmark = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * The size of the thumb
     */
    this.size = "150px";
    /**
     * Start the animation
     */
    this.animating = false;
  }
  render() {
    return (h(Host, { style: {
        "--floodteam-checkmark-size": this.size,
      } }, h("div", { class: {
        "checkmark-wrapper": true,
        animate: this.animating,
      } }, h("ion-icon", { name: "checkmark-circle" }))));
  }
};
Checkmark.style = checkmarkCss;

const errorCss = "ion-item{font-family:var(\n    --floodteam-error-font-family,\n    var(--ion-font-family, Arial, Helvetica, sans-serif)\n  );--item-border-bottom:none;--item-content-padding:0;position:relative}ion-icon{height:20px;width:20px;display:inline-block}ion-label{padding-left:5px;font-size:0.75em;color:var(--ion-color-danger, red) !important}";

let Error = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * The color of the component
     */
    this.color = "danger";
    /**
     * The icon to use
     */
    this.iconName = "alert-circle-outline";
  }
  render() {
    return (h("ion-item", { role: "alert", lines: "none" }, h("ion-icon", { name: this.iconName, color: this.color, slot: "start" }), h("ion-label", { color: this.color, class: "ion-text-wrap" }, this.message, h("slot", null))));
  }
};
Error.style = errorCss;

export { Checkmark as floodteam_checkmark, Error as floodteam_error };

//# sourceMappingURL=floodteam-checkmark_2.entry.js.map