@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-badge/xplor-badge.js

@@ -0,0 +1,273 @@
+import { Host, h } from "@stencil/core";
+export class XplorBadge {
+    constructor() {
+        /**
+         * Background color (can be CSS color or theme color name)
+         */
+        this.backgroundColor = '#e3f2fd';
+        /**
+         * Text color - 'auto' will calculate contrasting color
+         */
+        this.color = 'auto';
+        /**
+         * Luminance threshold for auto contrast calculation (0-255)
+         */
+        this.threshold = 130;
+        /**
+         * Visual variant
+         */
+        this.variant = 'flat';
+        /**
+         * Size variant
+         */
+        this.size = 'medium';
+        /**
+         * Whether to use datatable styling (slightly larger padding)
+         */
+        this.datatable = false;
+        /**
+         * Optional text content (can also use slot)
+         */
+        this.text = '';
+    }
+    /**
+     * Calculates relative luminance of a color
+     * Based on WCAG 2.0 formula
+     */
+    calculateLuminance(r, g, b) {
+        const [rs, gs, bs] = [r, g, b].map(c => {
+            c = c / 255;
+            return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    }
+    /**
+     * Parses hex/rgb/rgba color to RGB values
+     */
+    parseColor(color) {
+        // Handle hex colors
+        if (color.startsWith('#')) {
+            const hex = color.replace('#', '');
+            if (hex.length === 3) {
+                const r = parseInt(hex[0] + hex[0], 16);
+                const g = parseInt(hex[1] + hex[1], 16);
+                const b = parseInt(hex[2] + hex[2], 16);
+                return { r, g, b };
+            }
+            else if (hex.length === 6) {
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                return { r, g, b };
+            }
+        }
+        // Handle rgb/rgba
+        const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch) {
+            return {
+                r: parseInt(rgbMatch[1]),
+                g: parseInt(rgbMatch[2]),
+                b: parseInt(rgbMatch[3]),
+            };
+        }
+        return null;
+    }
+    /**
+     * Calculates contrasting color (black or white) based on background
+     */
+    calculateContrastingColor(bgColor) {
+        const rgb = this.parseColor(bgColor);
+        if (!rgb)
+            return '#000000';
+        const luminance = this.calculateLuminance(rgb.r, rgb.g, rgb.b);
+        // Using threshold to determine light vs dark background
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
+    /**
+     * Gets the computed CSS variables for the badge
+     */
+    get cssVars() {
+        const vars = {};
+        // Set background color
+        vars['--xplor-badge-bg'] = this.backgroundColor;
+        // Set text color (auto-calculate if needed)
+        if (this.color === 'auto') {
+            vars['--xplor-badge-color'] = this.calculateContrastingColor(this.backgroundColor);
+        }
+        else {
+            vars['--xplor-badge-color'] = this.color;
+        }
+        return vars;
+    }
+    /**
+     * Gets the computed CSS classes
+     */
+    get computedClasses() {
+        return {
+            'xplor-badge': true,
+            [`xplor-badge--${this.variant}`]: true,
+            [`xplor-badge--${this.size}`]: true,
+            'xplor-badge--datatable': this.datatable,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4f0691b5233e85340519a7ead5f3f3508c35c307' }, h("span", { key: '1588d8d3a85def71d7e5b5f5883d36ca5a232141', class: this.computedClasses, style: this.cssVars }, h("slot", { key: '571aa32299b77b94351ef8a1b66e071fa318c2e5' }, this.text))));
+    }
+    static get is() { return "xplor-badge"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backgroundColor": {
+                "type": "string",
+                "attribute": "background-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color (can be CSS color or theme color name)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#e3f2fd'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text color - 'auto' will calculate contrasting color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "threshold": {
+                "type": "number",
+                "attribute": "threshold",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Luminance threshold for auto contrast calculation (0-255)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "130"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'flat' | 'outlined' | 'tonal'",
+                    "resolved": "\"flat\" | \"outlined\" | \"tonal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'flat'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "datatable": {
+                "type": "boolean",
+                "attribute": "datatable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use datatable styling (slightly larger padding)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "attribute": "text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text content (can also use slot)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xplor-badge.js.map

package/dist/collection/components/xplor-badge/xplor-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-badge.js","sourceRoot":"","sources":["../../../src/components/xplor-badge/xplor-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-badge',\n  styleUrl: 'xplor-badge.scss',\n  scoped: true,\n})\nexport class XplorBadge {\n  /**\n   * Background color (can be CSS color or theme color name)\n   */\n  @Prop() backgroundColor: string = '#e3f2fd';\n\n  /**\n   * Text color - 'auto' will calculate contrasting color\n   */\n  @Prop() color: string = 'auto';\n\n  /**\n   * Luminance threshold for auto contrast calculation (0-255)\n   */\n  @Prop() threshold: number = 130;\n\n  /**\n   * Visual variant\n   */\n  @Prop() variant: 'flat' | 'outlined' | 'tonal' = 'flat';\n\n  /**\n   * Size variant\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to use datatable styling (slightly larger padding)\n   */\n  @Prop() datatable: boolean = false;\n\n  /**\n   * Optional text content (can also use slot)\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Calculates relative luminance of a color\n   * Based on WCAG 2.0 formula\n   */\n  private calculateLuminance(r: number, g: number, b: number): number {\n    const [rs, gs, bs] = [r, g, b].map(c => {\n      c = c / 255;\n      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    });\n    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n  }\n\n  /**\n   * Parses hex/rgb/rgba color to RGB values\n   */\n  private parseColor(color: string): { r: number; g: number; b: number } | null {\n    // Handle hex colors\n    if (color.startsWith('#')) {\n      const hex = color.replace('#', '');\n      if (hex.length === 3) {\n        const r = parseInt(hex[0] + hex[0], 16);\n        const g = parseInt(hex[1] + hex[1], 16);\n        const b = parseInt(hex[2] + hex[2], 16);\n        return { r, g, b };\n      } else if (hex.length === 6) {\n        const r = parseInt(hex.substring(0, 2), 16);\n        const g = parseInt(hex.substring(2, 4), 16);\n        const b = parseInt(hex.substring(4, 6), 16);\n        return { r, g, b };\n      }\n    }\n\n    // Handle rgb/rgba\n    const rgbMatch = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (rgbMatch) {\n      return {\n        r: parseInt(rgbMatch[1]),\n        g: parseInt(rgbMatch[2]),\n        b: parseInt(rgbMatch[3]),\n      };\n    }\n\n    return null;\n  }\n\n  /**\n   * Calculates contrasting color (black or white) based on background\n   */\n  private calculateContrastingColor(bgColor: string): string {\n    const rgb = this.parseColor(bgColor);\n    if (!rgb) return '#000000';\n\n    const luminance = this.calculateLuminance(rgb.r, rgb.g, rgb.b);\n    // Using threshold to determine light vs dark background\n    return luminance > 0.5 ? '#000000' : '#ffffff';\n  }\n\n  /**\n   * Gets the computed CSS variables for the badge\n   */\n  private get cssVars(): { [key: string]: string } {\n    const vars: { [key: string]: string } = {};\n\n    // Set background color\n    vars['--xplor-badge-bg'] = this.backgroundColor;\n\n    // Set text color (auto-calculate if needed)\n    if (this.color === 'auto') {\n      vars['--xplor-badge-color'] = this.calculateContrastingColor(this.backgroundColor);\n    } else {\n      vars['--xplor-badge-color'] = this.color;\n    }\n\n    return vars;\n  }\n\n  /**\n   * Gets the computed CSS classes\n   */\n  private get computedClasses(): { [key: string]: boolean } {\n    return {\n      'xplor-badge': true,\n      [`xplor-badge--${this.variant}`]: true,\n      [`xplor-badge--${this.size}`]: true,\n      'xplor-badge--datatable': this.datatable,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <span class={this.computedClasses} style={this.cssVars}>\n          <slot>{this.text}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-badge-active/xplor-badge-active.css

@@ -0,0 +1,280 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+:host {
+  display: inline-block;
+}
+
+.xplor-badge-active {
+  background-color: #E6F7F7;
+  color: #00605C;
+  font-weight: 400;
+  padding: 4px 12px;
+  border-radius: 16px;
+  display: inline-block;
+}

package/dist/collection/components/xplor-badge-active/xplor-badge-active.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class XplorBadgeActive {
+    render() {
+        return (h(Host, { key: '821006a66a77dcb1380c039c7f5932accb290e30' }, h("span", { key: '48942c3389b30d05660061e82ef9461842c38ea8', class: "xplor-badge-active" }, "Active")));
+    }
+    static get is() { return "xplor-badge-active"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-badge-active.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-badge-active.css"]
+        };
+    }
+}
+//# sourceMappingURL=xplor-badge-active.js.map

package/dist/collection/components/xplor-badge-active/xplor-badge-active.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-badge-active.js","sourceRoot":"","sources":["../../../src/components/xplor-badge-active/xplor-badge-active.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,gBAAgB;IAC3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,oBAAoB,aAEzB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-badge-active',\n  styleUrl: 'xplor-badge-active.scss',\n  scoped: true,\n})\nexport class XplorBadgeActive {\n  render() {\n    return (\n      <Host>\n        <span class=\"xplor-badge-active\">\n          Active\n        </span>\n      </Host>\n    );\n  }\n}\n"]}