@wavelengthusaf/web-components 1.7.1 → 1.9.0

package/dist/cjs/index.cjs

@@ -6093,6 +6093,142 @@ if (!customElements.get("wavelength-planetrail")) {
   customElements.define("wavelength-planetrail", WavelengthPlaneTrail);
 }
 
+// src/web-components/wavelength-manyplanes.template.html
+var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  #plane-container {\n    display: flex;\n    justify-content: flex-end;\n    height: 40px;\n  }\n</style>\n<div id="plane-container" class="flex-container"></div>';
+
+// src/web-components/wavelength-manyplanes.ts
+var WavelengthManyPlanes = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_manyplanes_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  updateComponent() {
+    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const trailDir = this.getAttribute("trail-dir") || "right";
+    const opacity = this.getAttribute("opacity") || "1";
+    const color = this.getAttribute("color") || "#00308F";
+    const gradient = this.getAttribute("gradient") || "false";
+    const spaced = this.getAttribute("spaced") || "true";
+    const planeContainer = this.shadow.getElementById("plane-container");
+    if (planeContainer === null) {
+      return;
+    }
+    planeContainer.replaceChildren();
+    planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
+    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
+    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+      let currentPlaneOpacity = opacity;
+      if (gradient === "true") {
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+      }
+      planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
+    }
+  }
+  createPlane(opacity, color, flipped) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const newPlane = document.createElementNS(svgNS, "svg");
+    const planePath = document.createElementNS(svgNS, "path");
+    newPlane.setAttribute("width", "40");
+    newPlane.setAttribute("height", "40");
+    newPlane.setAttribute("id", "planes");
+    newPlane.setAttribute("transform", flipped ? "matrix(-1, 0, 0, 1, 0, 0)" : "");
+    newPlane.setAttribute("opacity", opacity);
+    newPlane.appendChild(planePath);
+    planePath.setAttribute(
+      "d",
+      "M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"
+    );
+    planePath.setAttribute("fill", color);
+    return newPlane;
+  }
+};
+if (!customElements.get("wavelength-manyplanes")) {
+  customElements.define("wavelength-manyplanes", WavelengthManyPlanes);
+}
+
+// src/web-components/wavelength-tooltip.template.html
+var wavelength_tooltip_template_default = '<style>\n  :host {\n    display: inline-block;\n    --color: #898989ff;\n    --text-color: white;\n    --text-content: "Tooltip Text";\n    --font-family: "Arial";\n    font-family: var(--font-family);\n    font-size: 10px;\n  }\n\n  .textbox {\n    background-color: var(--color);\n    width: fit-content;\n    height: fit-content;\n    border-radius: 5px;\n    padding: 5px;\n  }\n\n  p {\n    margin: 0px;\n  }\n\n  .tooltip-text {\n    color: var(--text-color);\n    white-space: pre-wrap;\n  }\n\n  .flex-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .arrow {\n    width: 0;\n    height: 0;\n    border: 6px solid transparent;\n  }\n\n  .tooltip {\n    display: flex;\n    align-items: center;\n    width: fit-content;\n    height: fit-content;\n  }\n\n  .tooltip[data-direction="up"] .arrow {\n    border-bottom-color: var(--color);\n    border-top-width: 0;\n  }\n  .tooltip[data-direction="down"] .arrow {\n    border-top-color: var(--color);\n    border-bottom-width: 0;\n  }\n  .tooltip[data-direction="left"] .arrow {\n    border-right-color: var(--color);\n    border-left-width: 0;\n  }\n  .tooltip[data-direction="right"] .arrow {\n    border-left-color: var(--color);\n    border-right-width: 0;\n  }\n</style>\n<div class="tooltip flex-container">\n  <div class="textbox">\n    <p class="tooltip-text"></p>\n  </div>\n  <div class="arrow"></div>\n</div>\n\n\n';
+
+// src/web-components/wavelength-tooltip.ts
+var WavelengthToolTip = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["color", "font", "direction", "text-color", "text-content"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_tooltip_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+    this.updateComponent();
+  }
+  updateDirection(direction) {
+    const tooltip = this.shadow.querySelector(".tooltip");
+    if (tooltip === null) {
+      return;
+    }
+    tooltip.setAttribute("data-direction", direction);
+    switch (direction) {
+      case "up":
+        tooltip.style.flexDirection = "column-reverse";
+        break;
+      case "down":
+        tooltip.style.flexDirection = "column";
+        break;
+      case "left":
+        tooltip.style.flexDirection = "row-reverse";
+        break;
+      case "right":
+        tooltip.style.flexDirection = "row";
+        break;
+      default:
+        tooltip.style.flexDirection = "column";
+        break;
+    }
+  }
+  updateComponent() {
+    const colorAttr = this.getAttribute("color") || "#898989ff";
+    const textColorAttr = this.getAttribute("text-color") || "white";
+    const font = this.getAttribute("font") || "Arial";
+    const direction = this.getAttribute("direction") || "none";
+    const textContent = this.getAttribute("text-content") || "Tooltip Text";
+    const color = CSS.supports("color", colorAttr) ? colorAttr : "#898989ff";
+    const textColor = CSS.supports("color", textColorAttr) ? textColorAttr : "white";
+    const textbox = this.shadow.querySelector(".textbox");
+    const tooltipText = this.shadow.querySelector(".tooltip-text");
+    if (textbox === null || tooltipText === null) {
+      return;
+    }
+    this.style.setProperty("--font-family", font);
+    this.style.setProperty("--color", color);
+    this.style.setProperty("--text-color", textColor);
+    this.style.setProperty("--text-content", textContent);
+    tooltipText.textContent = textContent;
+    this.updateDirection(direction);
+  }
+};
+if (!customElements.get("wavelength-tooltip")) {
+  customElements.define("wavelength-tooltip", WavelengthToolTip);
+}
+
+
+
 
 
 
@@ -6112,7 +6248,7 @@ if (!customElements.get("wavelength-planetrail")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -2245,4 +2245,24 @@ declare const WavelengthPlaneTrail_base: {
 declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar };
+declare class WavelengthManyPlanes extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
+}
+
+declare class WavelengthToolTip extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    updateDirection(direction: string): void;
+    updateComponent(): void;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.d.ts

@@ -2245,4 +2245,24 @@ declare const WavelengthPlaneTrail_base: {
 declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar };
+declare class WavelengthManyPlanes extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
+}
+
+declare class WavelengthToolTip extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    updateDirection(direction: string): void;
+    updateComponent(): void;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.js

@@ -6092,6 +6092,140 @@ var WavelengthPlaneTrail = class extends StylingMixin(BasePlaneTrail) {
 if (!customElements.get("wavelength-planetrail")) {
   customElements.define("wavelength-planetrail", WavelengthPlaneTrail);
 }
+
+// src/web-components/wavelength-manyplanes.template.html
+var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: block;\n    --color: #00308F;\n  }\n  #plane-container {\n    display: flex;\n    justify-content: flex-end;\n    height: 40px;\n  }\n</style>\n<div id="plane-container" class="flex-container"></div>';
+
+// src/web-components/wavelength-manyplanes.ts
+var WavelengthManyPlanes = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_manyplanes_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  updateComponent() {
+    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const trailDir = this.getAttribute("trail-dir") || "right";
+    const opacity = this.getAttribute("opacity") || "1";
+    const color = this.getAttribute("color") || "#00308F";
+    const gradient = this.getAttribute("gradient") || "false";
+    const spaced = this.getAttribute("spaced") || "true";
+    const planeContainer = this.shadow.getElementById("plane-container");
+    if (planeContainer === null) {
+      return;
+    }
+    planeContainer.replaceChildren();
+    planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
+    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
+    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+      let currentPlaneOpacity = opacity;
+      if (gradient === "true") {
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+      }
+      planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
+    }
+  }
+  createPlane(opacity, color, flipped) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const newPlane = document.createElementNS(svgNS, "svg");
+    const planePath = document.createElementNS(svgNS, "path");
+    newPlane.setAttribute("width", "40");
+    newPlane.setAttribute("height", "40");
+    newPlane.setAttribute("id", "planes");
+    newPlane.setAttribute("transform", flipped ? "matrix(-1, 0, 0, 1, 0, 0)" : "");
+    newPlane.setAttribute("opacity", opacity);
+    newPlane.appendChild(planePath);
+    planePath.setAttribute(
+      "d",
+      "M 4.1666 16.3988 L 5.7608 16.3988 L 8.1645 19.6359 L 18.2616 19.6359 L 14.1291 5.6667 L 16.2425 5.6667 L 24.5075 19.6359 L 33.985 19.6359 C 34.5022 19.6359 34.9422 19.8172 35.305 20.18 C 35.6677 20.5428 35.8491 20.9828 35.8491 21.5 C 35.8491 22.0172 35.6677 22.4572 35.305 22.82 C 34.9422 23.1828 34.5022 23.3642 33.985 23.3642 L 24.5075 23.3642 L 16.2425 37.3334 L 14.1291 37.3334 L 18.2616 23.3642 L 8.1966 23.3642 L 5.7608 26.6013 L 4.1666 26.6013 L 5.6433 21.5 L 4.1666 16.3988 Z"
+    );
+    planePath.setAttribute("fill", color);
+    return newPlane;
+  }
+};
+if (!customElements.get("wavelength-manyplanes")) {
+  customElements.define("wavelength-manyplanes", WavelengthManyPlanes);
+}
+
+// src/web-components/wavelength-tooltip.template.html
+var wavelength_tooltip_template_default = '<style>\n  :host {\n    display: inline-block;\n    --color: #898989ff;\n    --text-color: white;\n    --text-content: "Tooltip Text";\n    --font-family: "Arial";\n    font-family: var(--font-family);\n    font-size: 10px;\n  }\n\n  .textbox {\n    background-color: var(--color);\n    width: fit-content;\n    height: fit-content;\n    border-radius: 5px;\n    padding: 5px;\n  }\n\n  p {\n    margin: 0px;\n  }\n\n  .tooltip-text {\n    color: var(--text-color);\n    white-space: pre-wrap;\n  }\n\n  .flex-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .arrow {\n    width: 0;\n    height: 0;\n    border: 6px solid transparent;\n  }\n\n  .tooltip {\n    display: flex;\n    align-items: center;\n    width: fit-content;\n    height: fit-content;\n  }\n\n  .tooltip[data-direction="up"] .arrow {\n    border-bottom-color: var(--color);\n    border-top-width: 0;\n  }\n  .tooltip[data-direction="down"] .arrow {\n    border-top-color: var(--color);\n    border-bottom-width: 0;\n  }\n  .tooltip[data-direction="left"] .arrow {\n    border-right-color: var(--color);\n    border-left-width: 0;\n  }\n  .tooltip[data-direction="right"] .arrow {\n    border-left-color: var(--color);\n    border-right-width: 0;\n  }\n</style>\n<div class="tooltip flex-container">\n  <div class="textbox">\n    <p class="tooltip-text"></p>\n  </div>\n  <div class="arrow"></div>\n</div>\n\n\n';
+
+// src/web-components/wavelength-tooltip.ts
+var WavelengthToolTip = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["color", "font", "direction", "text-color", "text-content"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_tooltip_template_default;
+  }
+  connectedCallback() {
+    this.updateComponent();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+    this.updateComponent();
+  }
+  updateDirection(direction) {
+    const tooltip = this.shadow.querySelector(".tooltip");
+    if (tooltip === null) {
+      return;
+    }
+    tooltip.setAttribute("data-direction", direction);
+    switch (direction) {
+      case "up":
+        tooltip.style.flexDirection = "column-reverse";
+        break;
+      case "down":
+        tooltip.style.flexDirection = "column";
+        break;
+      case "left":
+        tooltip.style.flexDirection = "row-reverse";
+        break;
+      case "right":
+        tooltip.style.flexDirection = "row";
+        break;
+      default:
+        tooltip.style.flexDirection = "column";
+        break;
+    }
+  }
+  updateComponent() {
+    const colorAttr = this.getAttribute("color") || "#898989ff";
+    const textColorAttr = this.getAttribute("text-color") || "white";
+    const font = this.getAttribute("font") || "Arial";
+    const direction = this.getAttribute("direction") || "none";
+    const textContent = this.getAttribute("text-content") || "Tooltip Text";
+    const color = CSS.supports("color", colorAttr) ? colorAttr : "#898989ff";
+    const textColor = CSS.supports("color", textColorAttr) ? textColorAttr : "white";
+    const textbox = this.shadow.querySelector(".textbox");
+    const tooltipText = this.shadow.querySelector(".tooltip-text");
+    if (textbox === null || tooltipText === null) {
+      return;
+    }
+    this.style.setProperty("--font-family", font);
+    this.style.setProperty("--color", color);
+    this.style.setProperty("--text-color", textColor);
+    this.style.setProperty("--text-content", textContent);
+    tooltipText.textContent = textContent;
+    this.updateDirection(direction);
+  }
+};
+if (!customElements.get("wavelength-tooltip")) {
+  customElements.define("wavelength-tooltip", WavelengthToolTip);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -6105,13 +6239,15 @@ export {
   WavelengthFileDropZone,
   WavelengthForm,
   WavelengthInput,
+  WavelengthManyPlanes,
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
   WavelengthNotificationPanel,
   WavelengthPlaneTrail,
   WavelengthProgressBar,
   WavelengthSnackbar,
-  WavelengthTitleBar
+  WavelengthTitleBar,
+  WavelengthToolTip
 };
 /*! Bundled license information:
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",