@ganpatiinfo/gids-core-web 0.0.2 → 0.0.4

package/dist/custom-elements.json

@@ -6,7 +6,24 @@
       "kind": "javascript-module",
       "path": "src/index.ts",
       "declarations": [],
-      "exports": []
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./utils/constructedGidsStylesheet"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./components.d.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",

package/dist/elements.css

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  background-color: var(--gids-color-background-canvas);
+  color: var(--gids-color-text-default);
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  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);
+}
+
+h2 {
+  margin: 0;
+}
+
+a {
+  --gidsIcon-color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gids-gap-025);
+  color: var(--gids-color-link-default);
+}
+a:visited {
+  color: var(--gids-color-link-visited-default);
+}
+a:active {
+  color: var(--gids-color-link-pressed);
+}
+a::before {
+  display: inline;
+  content: "";
+  height: 1em;
+  height: 1cap;
+  line-height: 1;
+}
+
+/*# sourceMappingURL=elements.css.map */

package/dist/elements.css.map

@@ -0,0 +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"}

package/dist/index.css

@@ -1,7 +1,145 @@
+/*
+* Start styles - any styles need to be below this 
+*/
 gids-global-styles-start {
   --x: 0;
 }
 
+/*
+* Custom styles
+*/
+.gids-divider {
+  border: none;
+  border-top: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+  margin: 0;
+}
+.gids-divider--vertical {
+  border: none;
+  border-left: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+  display: inline-block;
+  height: 100%;
+  width: var(--gids-border-width-thin);
+}
+
+.gids-display-tag {
+  color: var(--gids-color-text-inverse);
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  border-style: solid;
+  border-radius: var(--gids-border-radius-sm);
+  border-width: var(--gids-border-width-thin);
+  padding: 0 calc(var(--gids-padding-horizontal-edge-to-element-100) - var(--gids-border-width-thin));
+  min-height: var(--gids-size-320);
+  gap: var(--gids-gap-100);
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant: var(--gids-typography-label-medium__font-variant-caps, inherit);
+}
+.gids-display-tag .gids-icon {
+  --gidsIcon-color: currentColor;
+  --gidsIcon-height: var(--gids-size-240);
+}
+.gids-display-tag--xsmall {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+  padding: 0 calc(var(--gids-padding-horizontal-edge-to-element-050) - var(--gids-border-width-thin));
+  min-height: var(--gids-size-200);
+  gap: var(--gids-gap-050);
+}
+.gids-display-tag--xsmall .gids-icon {
+  --gidsIcon-height: var(--gids-size-120);
+}
+.gids-display-tag--small {
+  font-family: var(--gids-typography-label-small__font-family);
+  font-size: var(--gids-typography-label-small__font-size);
+  font-weight: var(--gids-typography-label-small__font-weight);
+  letter-spacing: var(--gids-typography-label-small__letter-spacing);
+  line-height: var(--gids-typography-label-small__line-height);
+  text-transform: var(--gids-typography-label-small__text-transform, inherit);
+  font-variant: var(--gids-typography-label-small__font-variant-caps, inherit);
+  padding: 0 calc(var(--gids-padding-horizontal-edge-to-element-100) - var(--gids-border-width-thin));
+  min-height: var(--gids-size-240);
+  gap: var(--gids-gap-100);
+}
+.gids-display-tag--small .gids-icon {
+  --gidsIcon-height: var(--gids-size-160);
+}
+.gids-display-tag--large {
+  font-family: var(--gids-typography-label-large__font-family);
+  font-size: var(--gids-typography-label-large__font-size);
+  font-weight: var(--gids-typography-label-large__font-weight);
+  letter-spacing: var(--gids-typography-label-large__letter-spacing);
+  line-height: var(--gids-typography-label-large__line-height);
+  text-transform: var(--gids-typography-label-large__text-transform, inherit);
+  font-variant: var(--gids-typography-label-large__font-variant-caps, inherit);
+  padding: 0 calc(var(--gids-padding-horizontal-edge-to-element-150) - var(--gids-border-width-thin));
+  min-height: var(--gids-size-400);
+  gap: var(--gids-gap-150);
+}
+.gids-display-tag--large .gids-icon {
+  --gidsIcon-height: var(--gids-size-240);
+}
+.gids-display-tag--accent-1 {
+  color: var(--gids-color-text-accent-1);
+  border-color: var(--gids-color-border-accent-1);
+  background-color: var(--gids-color-background-accent-1-subtlest-default);
+}
+.gids-display-tag--accent-2 {
+  color: var(--gids-color-text-accent-2);
+  border-color: var(--gids-color-border-accent-2);
+  background-color: var(--gids-color-background-accent-2-subtlest-default);
+}
+.gids-display-tag--accent-3 {
+  color: var(--gids-color-text-accent-3);
+  border-color: var(--gids-color-border-accent-3);
+  background-color: var(--gids-color-background-accent-3-subtlest-default);
+}
+.gids-display-tag--accent-4 {
+  color: var(--gids-color-text-accent-4);
+  border-color: var(--gids-color-border-accent-4);
+  background-color: var(--gids-color-background-accent-4-subtlest-default);
+}
+.gids-display-tag--accent-5 {
+  color: var(--gids-color-text-accent-5);
+  border-color: var(--gids-color-border-accent-5);
+  background-color: var(--gids-color-background-accent-5-subtlest-default);
+}
+.gids-display-tag--bold-accent-1 {
+  border-color: var(--gids-color-border-accent-1);
+  background-color: var(--gids-color-background-accent-1-bolder-default);
+}
+.gids-display-tag--bold-accent-2 {
+  border-color: var(--gids-color-border-accent-2);
+  background-color: var(--gids-color-background-accent-2-bolder-default);
+}
+.gids-display-tag--bold-accent-3 {
+  border-color: var(--gids-color-border-accent-3);
+  background-color: var(--gids-color-background-accent-3-bolder-default);
+}
+.gids-display-tag--bold-accent-4 {
+  border-color: var(--gids-color-border-accent-4);
+  background-color: var(--gids-color-background-accent-4-bolder-default);
+}
+.gids-display-tag--bold-accent-5 {
+  border-color: var(--gids-color-border-accent-5);
+  background-color: var(--gids-color-background-accent-5-bolder-default);
+}
+
+/*
+* End styles - any styles need to be above this 
+*/
 gids-global-styles-end {
   --x: 0;
 }

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/styles/start.scss","../src/styles/end.scss"],"names":[],"mappings":"AAAA;EACC;;;ACDD;EACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/index.scss","../src/styles/start.scss","../src/components/html/GidsDivider/GidsDivider.scss","../src/components/html/GidsDisplayTag/GidsDisplayTag.scss","../src/styles/2-tools/tags.scss","../src/styles/2-tools/typography.scss","../src/styles/end.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;ACAA;EACC;;;ADID;AAAA;AAAA;AELA;EACC;EACA;EAEA;;AAEA;EACC;EACA;EAEA;EACA;EACA;;;ACTF;EACC;ECAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAKA;EACA;EChBA;EACA;EACA;EACA;EACA;EAGC;EAGD;;ADUA;EACC;EACA;;AAGD;ECzBA;EACA;EACA;EACA;EACA;EAGC;EAGD;EDiBC;EAKA;EACA;;AACA;EACC;;AAIF;ECvCA;EACA;EACA;EACA;EACA;EAGC;EAGD;ED+BC;EAKA;EACA;;AACA;EACC;;AAIF;ECrDA;EACA;EACA;EACA;EACA;EAGC;EAGD;ED6CC;EAKA;EACA;;AACA;EACC;;AD3DF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AHhDF;AAAA;AAAA;AMXA;EACC","file":"index.css"}

package/dist/index.js

@@ -224,7 +224,112 @@ function render(vnode, container) {
   renderVdom(ref, vnode);
 }
 
-export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions };
+const constructedStylesheet = globalThis.CSSStyleSheet !== undefined ? new CSSStyleSheet() : undefined;
+let hasInitialRefreshBeenDone = false;
+if (constructedStylesheet && document.adoptedStyleSheets) {
+    document.adoptedStyleSheets.push(constructedStylesheet);
+}
+else {
+    console.warn('CSSStyleSheet is not defined. Omitting constructed stylesheet behaviour.');
+}
+let lastDocumentStylesheetOwnerNode = null;
+const handleStyleElementUpdates = () => {
+    refreshConstructedGidsStylesheet();
+};
+const styleChangeObserver = globalThis.MutationObserver !== undefined
+    ? new MutationObserver(handleStyleElementUpdates)
+    : undefined;
+const toCssText = (stylesInfo) => {
+    return stylesInfo.rules.map((rule) => rule.cssText).join('');
+};
+const deleteGidsStyles = (stylesInfo) => {
+    const { rulesStartIndex, originalRulesCount, styleSheet } = stylesInfo;
+    for (let index = 0; index < originalRulesCount; index++) {
+        styleSheet.deleteRule(rulesStartIndex);
+    }
+};
+const getDocumentGidsStylesheet = () => {
+    if (constructedStylesheet === undefined) {
+        return;
+    }
+    const gidsCssRules = [];
+    for (let indexI = 0; indexI < document.styleSheets.length; indexI++) {
+        const styleSheet = document.styleSheets.item(indexI);
+        if (styleSheet) {
+            try {
+                let gidsRulesStartIndex = -1;
+                let gidsRulesCount = 0;
+                for (let indexJ = 0; indexJ < styleSheet.cssRules.length; indexJ++) {
+                    const rule = styleSheet.cssRules.item(indexJ);
+                    if (rule?.cssText.startsWith('gids-global-styles-start')) {
+                        gidsRulesStartIndex = indexJ;
+                        continue;
+                    }
+                    if (gidsRulesStartIndex > -1) {
+                        if (rule?.cssText.startsWith('gids-global-styles-end')) {
+                            gidsRulesCount = indexJ - gidsRulesStartIndex + 1;
+                            break;
+                        }
+                        else {
+                            // @ts-ignore
+                            gidsCssRules.push(rule);
+                        }
+                    }
+                }
+                if (gidsRulesStartIndex > -1) {
+                    return {
+                        rulesStartIndex: gidsRulesStartIndex,
+                        originalRulesCount: gidsRulesCount,
+                        rules: gidsCssRules,
+                        styleSheet,
+                    };
+                }
+            }
+            catch (error) {
+                if (!(error instanceof DOMException)) {
+                    throw error;
+                }
+            }
+        }
+    }
+    return undefined;
+};
+const refreshConstructedGidsStylesheet = () => {
+    if (constructedStylesheet === undefined) {
+        return false;
+    }
+    const stylesInfo = getDocumentGidsStylesheet();
+    if (stylesInfo !== undefined) {
+        const newOwnerNode = stylesInfo.styleSheet.ownerNode;
+        if (styleChangeObserver !== undefined &&
+            newOwnerNode !== lastDocumentStylesheetOwnerNode) {
+            if (lastDocumentStylesheetOwnerNode) {
+                styleChangeObserver.disconnect();
+            }
+            if (newOwnerNode instanceof Element) {
+                styleChangeObserver.observe(newOwnerNode, {
+                    childList: true,
+                    characterData: true,
+                    subtree: true,
+                });
+            }
+            lastDocumentStylesheetOwnerNode = newOwnerNode;
+        }
+        constructedStylesheet.replaceSync(toCssText(stylesInfo));
+        deleteGidsStyles(stylesInfo);
+        return true;
+    }
+    console.warn('refreshConstructedGidsStylesheet: Gids stylesheet is not found in document.');
+    return false;
+};
+const getConstructedGidsStylesheet = () => {
+    if (!hasInitialRefreshBeenDone) {
+        hasInitialRefreshBeenDone = refreshConstructedGidsStylesheet();
+    }
+    return constructedStylesheet;
+};
+
+export { getAssetPath, getConstructedGidsStylesheet, refreshConstructedGidsStylesheet, render, setAssetPath, setNonce, setPlatformOptions };
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map