@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/lib/utils/animate.d.ts

@@ -0,0 +1,10 @@
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+export declare function parseDuration(delay: number | string): number;
+export declare function prefersReducedMotion(): boolean;
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number;
+    composite?: CompositeOperationOrAuto;
+    easing?: string;
+    offset?: number;
+}[];

package/lib/utils/animation-registry.d.ts

@@ -0,0 +1,18 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    rtlKeyframes?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    /**
+     * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+     * available using getAnimation().
+     */
+    dir: string;
+}
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+export declare function getAnimation(el: Element, animationName: string): ElementAnimation;

package/lib/utils/card-element.d.ts

@@ -0,0 +1,11 @@
+import SgdsElement from "./sgds-element";
+export type Variant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | string;
+export type Color = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "white" | "muted";
+export declare class CardElement extends SgdsElement {
+    borderColor?: Variant;
+    /** The bg's variant. */
+    bgColor?: Variant;
+    /** The text's variant. */
+    textColor?: Color;
+    disabled: boolean;
+}

package/lib/utils/defaultvalue.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from 'lit';
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/lib/utils/dropdown-element.d.ts

@@ -0,0 +1,37 @@
+import { Dropdown } from "bootstrap";
+import * as Popper from "@popperjs/core";
+import type { StrictModifiers } from "@popperjs/core";
+import { Ref } from "lit/directives/ref.js";
+import { SgdsDropdownItem } from "../Dropdown/sgds-dropdown-item";
+import SgdsElement from "./sgds-element";
+export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export type DropDirection = "left" | "right" | "up" | "down";
+export declare class DropdownElement extends SgdsElement {
+    myDropdown: Ref<HTMLElement>;
+    bsDropdown: Dropdown;
+    noFlip: boolean;
+    menuAlignRight: boolean;
+    drop: DropDirection;
+    popperOpts: {};
+    togglerId: string;
+    togglerText: string;
+    variant: DropdownButtonVariant;
+    menuIsOpen: boolean;
+    close: "outside" | "default" | "inside";
+    disabled: boolean;
+    nextDropdownItemNo: number;
+    prevDropdownItemNo: number;
+    dropdownConfig: Partial<Popper.Options>;
+    modifierOpt: StrictModifiers[];
+    firstUpdated(): void;
+    showMenu(): void;
+    hideMenu(): void;
+    _onClickButton(): void;
+    _resetMenu(): void;
+    _getMenuItems(): SgdsDropdownItem[];
+    _getActiveMenuItems(): SgdsDropdownItem[];
+    _setMenuItem(currentItemIdx: number, isArrowDown?: boolean): any;
+    _handleSelectSlot(e: KeyboardEvent | MouseEvent): void;
+    _handleKeyboardEvent(e: KeyboardEvent): any;
+    _handleClickOutOfElement(e: MouseEvent, self: DropdownElement): void;
+}

package/lib/utils/event.d.ts

@@ -0,0 +1,2 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/lib/utils/form.d.ts

@@ -0,0 +1,38 @@
+import type SgdsButton from '../Button/sgds-button';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface FormSubmitControllerOptions {
+    /** A function that returns the form containing the form control. */
+    form: (input: unknown) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: unknown) => string;
+    /** A function that returns the form control's current value. */
+    value: (input: unknown) => unknown | unknown[];
+    /** A function that returns the form control's default value. */
+    defaultValue: (input: unknown) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: unknown) => boolean;
+    /**
+     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+     * prevent submission and trigger the browser's constraint violation warning.
+     */
+    reportValidity: (input: unknown) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: unknown, value: unknown) => void;
+}
+export declare class FormSubmitController implements ReactiveController {
+    host?: ReactiveControllerHost & Element;
+    form?: HTMLFormElement | null;
+    options: FormSubmitControllerOptions;
+    constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleFormData(event: FormDataEvent): void;
+    handleFormSubmit(event: Event): void;
+    handleFormReset(): void;
+    reportFormValidity(): boolean;
+    doAction(type: 'submit' | 'reset', invoker?: HTMLInputElement | SgdsButton): void;
+    /** Resets the form, restoring all the control to their default value */
+    reset(invoker?: HTMLInputElement | SgdsButton): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(invoker?: HTMLInputElement | SgdsButton): void;
+}

package/lib/utils/link-element.d.ts

@@ -0,0 +1,7 @@
+import SgdsElement from "../utils/sgds-element";
+export default class LinkElement extends SgdsElement {
+    active: boolean;
+    href: string;
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/lib/utils/mergeDeep.d.ts

@@ -0,0 +1,2 @@
+declare const mergeDeep: (target: any, source: any) => any;
+export default mergeDeep;

package/lib/utils/modal.d.ts

@@ -0,0 +1,12 @@
+export default class Modal {
+    element: HTMLElement;
+    tabDirection: 'forward' | 'backward';
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    checkFocus(): void;
+    handleFocusIn(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(): void;
+}

package/lib/utils/object.d.ts

@@ -0,0 +1,2 @@
+export declare const assign: (target: any, ...args: any[]) => any;
+export declare const keys: (obj: any) => string[];

package/lib/utils/offset.d.ts

@@ -0,0 +1,4 @@
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/lib/utils/scroll.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Scrolls an element into view of its container. If the element is already in view, nothing will happen.
+ */
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

package/lib/utils/slot.d.ts

@@ -0,0 +1,22 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/lib/utils/tabbable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};

package/lib/utils/watch.d.ts

@@ -0,0 +1,14 @@
+import type { LitElement } from "lit";
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+export declare function watch(propName: string, options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/mocks/dropdown.d.ts

@@ -0,0 +1,4 @@
+import { DropdownElement } from "../src/utils/dropdown-element";
+export declare class MockDropdown extends DropdownElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/mocks/dropdown.ts

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { DropdownElement } from "../src/utils/dropdown-element";
+
+@customElement("mock-dropdown")
+export class MockDropdown extends DropdownElement {
+  render() {
+    return html`
+      <div>
+        <button
+          variant="outline-${this.variant}"
+          ?disabled=${this.disabled}
+          aria-expanded="${this.menuIsOpen}"
+          ${ref(this.myDropdown)}
+          @click=${() => this._onClickButton()}
+          id=${this.togglerId}
+        >
+          Mock Dropdown
+        </button>
+        <ul class="dropdown-menu" role="menu" part="menu">
+          <slot @click=${this._handleSelectSlot}></slot>
+        </ul>
+      </div>
+    `;
+  }
+}

package/mocks/link.d.ts

@@ -0,0 +1,3 @@
+import LinkElement from "../src/utils/link-element";
+export declare class MockLink extends LinkElement {
+}

package/mocks/link.ts

@@ -0,0 +1,6 @@
+import { customElement } from "lit/decorators.js";
+import LinkElement from "../src/utils/link-element";
+
+@customElement("mock-link")
+export class MockLink extends LinkElement {
+}

package/package.json

@@ -1,23 +1,78 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "",
-  "main": "./umd/index.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts",
+  "main": "lib/umd/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "scripts": {
+    "build": "rm -rf lib && rollup --config rollup.config.js",
+    "post:build": "node ./scripts/frankBuild.js",
+    "build:lib": "npm run build && npm run post:build",
+    "build:watch": "npm run build -- --watch",
+    "dev": "npm run build:watch & npm run serve",
+    "serve": "wds --watch --open",
+    "test": "rm -rf test-outdir && rollup --config rollup.test.config.js && web-test-runner",
+    "storybook": "npm run build && start-storybook -p 6006",
+    "build-storybook": "rm -rf lib && npm run build && build-storybook",
+    "prepare": "husky install"
+  },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@govtechsg/sgds": "^2.1.0-beta.1",
+    "@govtechsg/sgds": "^2.1.1",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.9.1",
-    "clk-styletest": "^2.0.9",
     "lit": "^2.3.1"
   },
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@open-wc/storybook": "^0.2.8",
+    "@open-wc/testing": "^3.0.0-next.5",
+    "@playwright/test": "^1.27.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^5.0.0",
+    "@shoelace-style/shoelace": "^2.0.0-beta.83",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/web-components": "^6.5.16",
+    "@types/bootstrap": "^5.2.4",
+    "@web/dev-server": "^0.1.17",
+    "@web/dev-server-esbuild": "^0.3.2",
+    "@web/dev-server-rollup": "^0.3.19",
+    "@web/dev-server-storybook": "^0.5.4",
+    "@web/test-runner": "^0.14.0",
+    "@web/test-runner-commands": "^0.6.5",
+    "@web/test-runner-playwright": "^0.8.10",
+    "autoprefixer": "^10.4.8",
+    "babel-loader": "^8.2.5",
+    "cz-conventional-changelog": "^3.3.0",
+    "esbuild-sass-plugin": "^2.3.2",
+    "husky": "^8.0.0",
+    "postcss": "^8.2.13",
+    "rollup": "^2.46.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss-lit": "^1.0.1",
+    "rollup-plugin-typescript2": "^0.33.0",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "sinon": "^14.0.0",
+    "storybook-addon-web-components-knobs": "^0.3.20",
+    "tslib": "^2.4.0",
+    "typescript": "^4.2.4"
+  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "private": false
-}
+  }
+}

package/rollup.config.js

@@ -0,0 +1,73 @@
+import typescript from "rollup-plugin-typescript2";
+import resolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
+import litcss from "rollup-plugin-postcss-lit";
+const packageJson = require("./package.json");
+import { getFolders } from './scripts/buildUtils';
+import generatePackageJson from 'rollup-plugin-generate-package-json';
+import replace from '@rollup/plugin-replace'; 
+
+const plugins = [
+  resolve({
+    browser: true,
+  }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify("production"),
+    preventAssignment: true
+  }),
+  postcss({
+    minimize: false,
+    inject: false,
+  }),
+  litcss(),
+  typescript({
+    useTsconfigDeclarationDir: true,
+  }),
+]
+const subfolderPlugins = (folderName) => [
+  ...plugins,
+  generatePackageJson({
+    baseContents: {
+      name: `${packageJson.name}/${folderName}`,
+      private: true,
+      main: '../umd/index.js',
+      module: './index.js',
+      types: './index.d.ts',
+    },
+  }),
+];
+const folderBuilds = getFolders('./src').map((folder) => {
+  return {
+    input: `src/${folder}/index.ts`,
+    output: [
+      {
+      file: `lib/${folder}/index.js`,
+      sourcemap: true,
+      exports: 'named',
+      format: 'esm',
+      }
+    ],
+    plugins: subfolderPlugins(folder),
+  };
+});
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.main,
+        format: "umd",
+        sourcemap: true,
+        name: "index"
+      },
+    ],
+    plugins
+  },
+  ...folderBuilds
+];

package/rollup.test.config.js

@@ -0,0 +1,42 @@
+import typescript from "rollup-plugin-typescript2";
+import resolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
+import litcss from "rollup-plugin-postcss-lit";
+import path from "path";
+import replace from '@rollup/plugin-replace'; 
+const packageJson = require("./package.json");
+const fs = require('fs');
+
+export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
+    const files = fs.readdirSync(entry);
+    const filePaths =  files.map(fileName => path.join(entry, fileName))
+    return filePaths
+  };
+
+export default [
+  {
+    input: getFiles('./test'),
+    output: [
+      {
+        dir: "test-outdir",
+        format: 'es'
+      },
+    ],
+    plugins: [
+      resolve({
+        browser: true,
+      }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      }),
+      typescript({
+        tsconfig: './tsconfig.test.json'
+      }),
+      postcss({                     // process .scss files
+        minimize: false,
+        inject: false,
+      }),
+      litcss(),                     // process adoptedStylesheets for lit 
+    ],
+  },
+];

package/scripts/buildUtils.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+export const getFolders = (entry) => {
+   const dirs = fs.readdirSync(entry)
+   const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => name !== 'utils')
+   return dirsWithoutIndex
+}
+
+export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
+  let fileNames = [];
+  const dirs = fs.readdirSync(entry);
+  dirs.forEach((dir) => {
+    const path = `${entry}/${dir}`;
+   
+    if (fs.lstatSync(path).isDirectory()) {
+      fileNames = [
+        ...fileNames,
+        ...getFiles(path, extensions, excludeExtensions),
+      ];
+
+      return;
+    }
+
+    if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
+      && extensions.some((ext) => dir.endsWith(ext))
+    ) {
+      fileNames.push(path);
+    }
+  });
+  return fileNames;
+};

package/scripts/frankBuild.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console */
+const { resolve, join, basename } = require('path');
+const { readFile, writeFile, copy } = require('fs-extra');
+const packagePath = process.cwd();
+const distPath = join(packagePath, './lib');
+
+const writeJson = (targetPath, obj) =>
+  writeFile(targetPath, JSON.stringify(obj, null, 2), 'utf8');
+
+async function createPackageFile() {
+  const packageData = await readFile(
+    resolve(packagePath, './package.json'),
+    'utf8'
+  );
+  const { scripts, devDependencies, ...packageOthers } =
+    JSON.parse(packageData);
+  const newPackageData = {
+    ...packageOthers,
+    private: false,
+    typings: './index.d.ts',
+    main: './umd/index.js',
+    module: './index.js',
+  };
+
+  const targetPath = resolve(distPath, './package.json');
+
+  await writeJson(targetPath, newPackageData);
+  console.log(`Created package.json in ${targetPath}`);
+}
+
+async function includeFileInBuild(file) {
+  const sourcePath = resolve(packagePath, file);
+  const targetPath = resolve(distPath, basename(file));
+  await copy(sourcePath, targetPath);
+  console.log(`Copied ${sourcePath} to ${targetPath}`);
+}
+
+async function run() {
+  try {
+    await createPackageFile();
+    await includeFileInBuild('./README.md');
+    // await includeFileInBuild('../../LICENSE');
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+run();

package/src/Button/index.ts

@@ -0,0 +1 @@
+export { SgdsButton } from "./sgds-button";

package/src/Button/sgds-button.scss

@@ -0,0 +1,28 @@
+
+@import '../utils/base.scss';
+@import "~@govtechsg/sgds/sass/buttons"; 
+
+:host {
+    display: inline-block;
+}
+
+.btn-icon{
+  background: transparent;
+  border: 0;
+  &:hover{
+    background: transparent;
+  }
+}
+:host(.button-group_button-first){
+  .btn{
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
+:host(.button-group_button-last){
+  .btn{
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}