@ganpatiinfo/gids-core-web 0.0.6 → 2.0.1

package/dist/custom-elements.json

@@ -22,6 +22,22 @@
             "name": "*",
             "package": "./components.d.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "setGidsAssetFilePaths",
+          "declaration": {
+            "name": "setGidsAssetFilePaths",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setGidsDefaultAssetDirPath",
+          "declaration": {
+            "name": "setGidsDefaultAssetDirPath",
+            "module": "src/index.ts"
+          }
         }
       ]
     },

package/dist/elements.css

@@ -8,7 +8,7 @@ body {
   letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
   line-height: var(--gids-typography-paragraph-medium__line-height);
   text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
-  font-variant: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
 }
 
 h2 {
@@ -25,9 +25,10 @@ a {
 a:visited {
   color: var(--gids-color-link-visited-default);
 }
-a:active {
+a:active, gids-card[clickable]:defined:is(--active, :state(active)) a[data-gids-card-primary-control] {
   color: var(--gids-color-link-pressed);
 }
+
 a::before {
   display: inline;
   content: "";

package/dist/elements.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/styles/4-elements/body.scss","../src/styles/2-tools/typography.scss","../src/styles/4-elements/headings.scss","../src/styles/2-tools/links.scss"],"names":[],"mappings":"AAEA;EACC;EACA;EACA;ECFA;EACA;EACA;EACA;EACA;EAGC;EAGD;;;ACbD;EACC;;;ACDD;EACC;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA","file":"elements.css"}
+{"version":3,"sourceRoot":"","sources":["../src/styles/4-elements/body.scss","../src/styles/2-tools/typography.scss","../src/styles/4-elements/headings.scss","../src/styles/2-tools/links.scss","../src/styles/2-tools/card.scss"],"names":[],"mappings":"AAEA;EACC;EACA;EACA;ECFA;EACA;EACA;EACA;EACA;EAGC;EAGD;;;ACbD;EACC;;;ACCD;EAEC;EAEA;EACA;EACA;EAEA;;AAEA;EACC;;ACmKC;ED1JD;;;AAWD;EACC;EACA;EAWA;EACA;EACA","file":"elements.css"}

package/dist/gids-toggle-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "./types/components";
+
+interface GidsToggleButton extends Components.GidsToggleButton, HTMLElement {}
+export const GidsToggleButton: {
+    prototype: GidsToggleButton;
+    new (): GidsToggleButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/gids-toggle-button.js

@@ -0,0 +1,130 @@
+import { h, p as proxyCustomElement, H, e as createEvent, d as getConstructedGidsStylesheet, f as Host } from './p-DXWsIVvG.js';
+import { GidsSpinnerControlWebUtils, GidsButtonWebUtils, nonEmpty } from '@ganpatiinfo/gids-web-shared';
+import { GidsSpinnerControlCommonUtils } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsSpinnerControlClassNames } = GidsSpinnerControlWebUtils;
+const { calculateStrokeDasharray, thickness, radius, centerPosition, viewBox } = GidsSpinnerControlCommonUtils;
+const GidsSpinnerControl = ({ size, indeterminate, value, max, ...rest }) => {
+    let style = undefined;
+    if (!indeterminate) {
+        const dashArray = calculateStrokeDasharray(value, max ? max : 0);
+        style = { strokeDashArray: dashArray, strokeDashoffset: '0' };
+    }
+    return (h("svg", { class: getGidsSpinnerControlClassNames({ size, indeterminate, value }), viewBox: viewBox, ...rest },
+        h("circle", { class: "gids-spinner-control__track", cx: centerPosition, cy: centerPosition, r: radius, "stroke-width": thickness }),
+        h("circle", { style: style, class: "gids-spinner-control__progress", cx: centerPosition, cy: centerPosition, r: radius, "stroke-width": thickness })));
+};
+
+const { getGidsButtonClassNames } = GidsButtonWebUtils;
+/**
+ * Stencil functional component implementation of GIDS Button component.
+ *
+ * Only used internally by Stencil web components that need to render Buttons within their
+ * JSX templates.
+ *
+ * @internal
+ *
+ * @param props
+ * @param children
+ * @returns
+ */
+const GidsButton = ({ appearance, size, destructive, loading, width, leadingIcon, trailingIcon, as, disabled, class: className, forceIconOnly = false, ...rest }, children) => {
+    const Element = as || 'button';
+    const spinnerSize = size === 'lg' || size === undefined ? 'md' : size;
+    // Default to type="button" if not provided, since HTML's default is "submit"
+    if (Element === 'button' && !('type' in rest)) {
+        rest.type = 'button';
+    }
+    return (
+    // @ts-expect-error: TODO This used to work in TypeScript 4.x but not anymore
+    h(Element, { class: getGidsButtonClassNames({ appearance, size, destructive, loading, width }, forceIconOnly ||
+            (children.length === 0 &&
+                nonEmpty(leadingIcon) &&
+                !nonEmpty(trailingIcon)), className), disabled: Element === 'button' ? disabled : undefined, ...rest },
+        h("span", { class: "gids-button__content" },
+            leadingIcon,
+            children),
+        loading && (h(GidsSpinnerControl, { size: spinnerSize, indeterminate: true })),
+        trailingIcon));
+};
+
+const GidsToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class GidsToggleButton extends H {
+    /**
+     *
+     * Only available as a property. There is no `selected` attribute
+     *
+     * @inheritdoc
+     */
+    get selected() {
+        return this.#selected ?? this.defaultSelected;
+    }
+    set selected(value) {
+        this.#selected = value === undefined ? undefined : Boolean(value);
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.select = createEvent(this, "select");
+        this._toggle = this._toggle.bind(this);
+    }
+    /**
+     * @internal
+     */
+    #selected;
+    connectedCallback() {
+        const constructedGidsStylesheet = getConstructedGidsStylesheet();
+        if (constructedGidsStylesheet !== undefined) {
+            this._el.shadowRoot?.adoptedStyleSheets.push(constructedGidsStylesheet);
+        }
+    }
+    _toggle() {
+        const toggledValue = !this.selected;
+        this._el.selected = toggledValue;
+        this.select?.emit(toggledValue);
+    }
+    render() {
+        return (h(Host, { key: '5325aafb2311b47df024410009b368e84ae23e35' }, h("style", { key: 'bf7e5a1623ed267a5f558e2b61baea50d298cabb' }, `:host {
+                display: ${this.width === 'full' ? 'block' : 'inline-block'}
+                }`), h(GidsButton, { key: '90cb7509ac3972f45040c621bbf2850947a11c8b', appearance: this.appearance, size: this.size, width: this.width, disabled: this.disabled, onClick: this._toggle, "aria-pressed": this.selected ? 'true' : 'false', leadingIcon: h("slot", { name: "leadingIcon" }), trailingIcon: h("slot", { name: "trailingIcon" }), forceIconOnly: this._onlyHasLeadingIcon() }, h("slot", { key: '071bf6162ebc2870e7a075a45a1bf9d38b2e286f' }))));
+    }
+    _onlyHasLeadingIcon() {
+        const childNodes = this._el.childNodes;
+        if (childNodes.length === 1 &&
+            childNodes[0] instanceof window.Element &&
+            childNodes[0].slot === 'leadingIcon') {
+            return true;
+        }
+        return false;
+    }
+    get _el() { return this; }
+}, [1, "gids-toggle-button", {
+        "disabled": [516],
+        "appearance": [513],
+        "size": [513],
+        "width": [513],
+        "defaultSelected": [516, "default-selected"],
+        "selected": [6660]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gids-toggle-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gids-toggle-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GidsToggleButton$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const GidsToggleButton = GidsToggleButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GidsToggleButton, defineCustomElement };
+//# sourceMappingURL=gids-toggle-button.js.map
+
+//# sourceMappingURL=gids-toggle-button.js.map

package/dist/gids-toggle-button.js.map

@@ -0,0 +1 @@
+{"file":"gids-toggle-button.js","mappings":"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","names":["GidsToggleButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/html/_GidsSpinnerControl/GidsSpinnerControl.tsx","src/components/html/GidsButton/GidsButton.tsx","src/components/webComponents/GidsToggleButton/GidsToggleButton.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport type { FunctionalComponent, JSXBase } from '@stencil/core/internal';\nimport { GidsSpinnerControlWebUtils } from '@ganpatiinfo/gids-web-shared';\nimport {\n\tGidsSpinnerControlCommonProps,\n\tGidsSpinnerControlCommonUtils,\n} from '@ganpatiinfo/gids-core-shared';\n\nconst { getGidsSpinnerControlClassNames } = GidsSpinnerControlWebUtils;\nconst { calculateStrokeDasharray, thickness, radius, centerPosition, viewBox } =\n\tGidsSpinnerControlCommonUtils;\n\nexport type GidsSpinnerControlProps = GidsSpinnerControlCommonProps &\n\tJSXBase.IntrinsicElements['svg'] & {\n\t\tclass?: string;\n\t};\n\nexport const GidsSpinnerControl: FunctionalComponent<\n\tGidsSpinnerControlCommonProps\n> = ({ size, indeterminate, value, max, ...rest }) => {\n\tlet style: Record<string, string> | undefined = undefined;\n\n\tif (!indeterminate) {\n\t\tconst dashArray = calculateStrokeDasharray(value, max ? max : 0);\n\t\tstyle = { strokeDashArray: dashArray, strokeDashoffset: '0' };\n\t}\n\n\treturn (\n\t\t<svg\n\t\t\tclass={getGidsSpinnerControlClassNames({ size, indeterminate, value })}\n\t\t\tviewBox={viewBox}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<circle\n\t\t\t\tclass=\"gids-spinner-control__track\"\n\t\t\t\tcx={centerPosition}\n\t\t\t\tcy={centerPosition}\n\t\t\t\tr={radius}\n\t\t\t\tstroke-width={thickness}\n\t\t\t/>\n\t\t\t<circle\n\t\t\t\tstyle={style}\n\t\t\t\tclass=\"gids-spinner-control__progress\"\n\t\t\t\tcx={centerPosition}\n\t\t\t\tcy={centerPosition}\n\t\t\t\tr={radius}\n\t\t\t\tstroke-width={thickness}\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n","import { h } from '@stencil/core';\nimport type { JSXBase, VNode } from '@stencil/core/internal';\nimport {\n\ttype PermittedGidsButtonElements,\n\ttype GidsButtonWebProps,\n\tGidsButtonWebUtils,\n\tnonEmpty,\n} from '@ganpatiinfo/gids-web-shared';\nimport { GidsSpinnerControl } from '../_GidsSpinnerControl/GidsSpinnerControl';\n\nconst { getGidsButtonClassNames } = GidsButtonWebUtils;\n\n/**\n * Props for the Stencil Functional Component implementation of GIDS Button.\n */\nexport type GidsButtonProps<E extends PermittedGidsButtonElements> =\n\tGidsButtonWebProps<VNode | VNode[], VNode | VNode[], E> &\n\t\tJSXBase.IntrinsicElements[E] & {\n\t\t\t/**\n\t\t\t * Whether to force the button to icon-only styling.\n\t\t\t */\n\t\t\tforceIconOnly?: boolean;\n\t\t};\n\n/**\n * Stencil functional component implementation of GIDS Button component.\n *\n * Only used internally by Stencil web components that need to render Buttons within their\n * JSX templates.\n *\n * @internal\n *\n * @param props\n * @param children\n * @returns\n */\nexport const GidsButton = <E extends PermittedGidsButtonElements = 'button'>(\n\t{\n\t\tappearance,\n\t\tsize,\n\t\tdestructive,\n\t\tloading,\n\t\twidth,\n\t\tleadingIcon,\n\t\ttrailingIcon,\n\t\tas,\n\t\tdisabled,\n\t\tclass: className,\n\t\tforceIconOnly = false,\n\t\t...rest\n\t}: GidsButtonProps<E>,\n\tchildren: VNode[],\n): VNode | VNode[] => {\n\tconst Element = as || 'button';\n\tconst spinnerSize = size === 'lg' || size === undefined ? 'md' : size;\n\n\t// Default to type=\"button\" if not provided, since HTML's default is \"submit\"\n\tif (Element === 'button' && !('type' in rest)) {\n\t\t(rest as JSXBase.IntrinsicElements['button']).type = 'button';\n\t}\n\n\treturn (\n\t\t// @ts-expect-error: TODO This used to work in TypeScript 4.x but not anymore\n\t\t<Element\n\t\t\tclass={getGidsButtonClassNames(\n\t\t\t\t{ appearance, size, destructive, loading, width },\n\t\t\t\tforceIconOnly ||\n\t\t\t\t\t(children.length === 0 &&\n\t\t\t\t\t\tnonEmpty(leadingIcon) &&\n\t\t\t\t\t\t!nonEmpty(trailingIcon)),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdisabled={Element === 'button' ? disabled : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<span class=\"gids-button__content\">\n\t\t\t\t{leadingIcon}\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{loading && (\n\t\t\t\t<GidsSpinnerControl size={spinnerSize} indeterminate></GidsSpinnerControl>\n\t\t\t)}\n\t\t\t{trailingIcon}\n\t\t</Element>\n\t);\n};\n","import {\n\th,\n\tComponent,\n\tProp,\n\tElement,\n\tHost,\n\tEvent,\n\tEventEmitter,\n} from '@stencil/core';\nimport { GidsButton } from '../../html/GidsButton/GidsButton';\nimport { getConstructedGidsStylesheet } from '../../../utils/constructedGidsStylesheet';\nimport {\n\ttype GidsButtonSize,\n\ttype GidsToggleButtonAppearance,\n\ttype GidsButtonWidth,\n} from '@ganpatiinfo/gids-core-shared';\nimport { type GidsToggleButtonWebProps } from '@ganpatiinfo/gids-web-shared';\n\n@Component({\n\ttag: 'gids-toggle-button',\n\tshadow: true,\n})\nexport class GidsToggleButton\n\timplements Omit<GidsToggleButtonWebProps, 'children'>\n{\n\t/**\n\t * @internal\n\t */\n\t@Element() private _el: HTMLGidsToggleButtonElement;\n\n\t@Event()\n\tprivate select?: EventEmitter<boolean>;\n\n\t/**\n\t *\n\t * Reflected by `disabled` property\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t})\n\tdisabled?: boolean;\n\n\t/**\n\t *\n\t * Reflected by `appearance` property\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t})\n\tappearance?: GidsToggleButtonAppearance;\n\n\t/**\n\t *\n\t * Reflected by `size` property\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t})\n\tsize?: GidsButtonSize;\n\n\t/**\n\t *\n\t * Reflected by `width` property\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t})\n\twidth?: GidsButtonWidth;\n\n\t/**\n\t *\n\t * Reflected by `defaultSelected` property\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t})\n\tdefaultSelected?: boolean;\n\n\t/**\n\t *\n\t * Only available as a property. There is no `selected` attribute\n\t *\n\t * @inheritdoc\n\t */\n\t@Prop({\n\t\treflect: true,\n\t\tattribute: null,\n\t})\n\tget selected(): boolean | undefined {\n\t\treturn this.#selected ?? this.defaultSelected;\n\t}\n\tset selected(value: unknown) {\n\t\tthis.#selected = value === undefined ? undefined : Boolean(value);\n\t}\n\n\tconstructor() {\n\t\tthis._toggle = this._toggle.bind(this);\n\t}\n\n\t/**\n\t * @internal\n\t */\n\t#selected?: boolean;\n\n\tconnectedCallback() {\n\t\tconst constructedGidsStylesheet = getConstructedGidsStylesheet();\n\t\tif (constructedGidsStylesheet !== undefined) {\n\t\t\tthis._el.shadowRoot?.adoptedStyleSheets.push(constructedGidsStylesheet);\n\t\t}\n\t}\n\n\tprivate _toggle() {\n\t\tconst toggledValue = !this.selected;\n\t\tthis._el.selected = toggledValue;\n\t\tthis.select?.emit(toggledValue);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<style>{`:host {\n                display: ${this.width === 'full' ? 'block' : 'inline-block'}\n                }`}</style>\n\t\t\t\t<GidsButton\n\t\t\t\t\tappearance={this.appearance}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\twidth={this.width}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\tonClick={this._toggle}\n\t\t\t\t\taria-pressed={this.selected ? 'true' : 'false'}\n\t\t\t\t\tleadingIcon={<slot name=\"leadingIcon\" />}\n\t\t\t\t\ttrailingIcon={<slot name=\"trailingIcon\" />}\n\t\t\t\t\tforceIconOnly={this._onlyHasLeadingIcon()}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</GidsButton>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _onlyHasLeadingIcon(): boolean {\n\t\tconst childNodes = this._el.childNodes;\n\t\tif (\n\t\t\tchildNodes.length === 1 &&\n\t\t\tchildNodes[0] instanceof window.Element &&\n\t\t\tchildNodes[0].slot === 'leadingIcon'\n\t\t) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}\n}\n"],"version":3}