@ventum-digital/iiq-plugin-project-generator/templates/module/extensions/component/src/index.ts

A npm tool to set-up the project structure for developing an IIQ Plugin.

import { BasicObjectProperties, injectStyles, ObjectChildren } from "@ventum-digital/ui-components/Util";
import { div } from "@ventum-digital/ui-components/BaseElements";

import { bar } from "./functions.js";

/**
  This is an example of a component that can be used in your project.
  If you do not intend to use it, you can delete it.
 */
function component(properties: BasicObjectProperties, ...children: ObjectChildren): HTMLElement {
  const {
          className        = '__npmScope__-__packageName__-component',
          style            = {},
          customProperties = {},
        } = properties;

  injectStyles(className, (className) => `
      .${className} {
        background-color: #fcfcfc;
        border-radius: 5px;
        padding: 10px;
        transition: 1s cubic-bezier(0, 0.65, 0.81, 0.81);
      }
      .${className}:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transition: 0.5s cubic-bezier(0.13, 0.88, 0.85, 0.58);
      }
    `);


  /**
   * This is an example of how to use functions from other local files.
   */
  bar("Hello from __packageName__ Component");


  return div({ className, style, customProperties }, ...children);
}

export default component;