@scania/tegel 1.25.0-fix-a11y-chip-more-improvements-beta.0 → 1.25.0-tooltip-beta.0

package/dist/types/components/tooltip-beta/tooltip-beta.d.ts

@@ -0,0 +1,28 @@
+import { Placement } from '../../types/Tooltip';
+export declare class TdsTooltipBeta {
+    host: HTMLElement;
+    text: string;
+    selector: string;
+    referenceEl?: HTMLElement | null;
+    defaultShow: boolean;
+    mouseOverTooltip: boolean;
+    trigger: 'click' | 'hover';
+    show: boolean;
+    placement: Placement;
+    offsetSkidding: number;
+    offsetDistance: number;
+    isVisible: boolean;
+    private tooltipEl;
+    private resizeObserver;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private bindEvents;
+    private debounce;
+    private showTooltip;
+    private hideTooltip;
+    private toggleTooltip;
+    private updateTooltipPosition;
+    private setTooltipRef;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -11,12 +11,14 @@ import { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-
 import { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu";
 import { InternalTdsStepperPropChange } from "./components/stepper/stepper";
 import { InternalTdsTablePropChange } from "./components/table/table/table";
+import { Placement as Placement1 } from "./types/Tooltip";
 export { IconNames } from "./types/Icons";
 export { Placement } from "@popperjs/core";
 export { CollapseEvent, InternalTdsSideMenuPropChange } from "./components/side-menu/side-menu";
 export { CollapseEvent as CollapseEvent1 } from "./components/side-menu/side-menu";
 export { InternalTdsStepperPropChange } from "./components/stepper/stepper";
 export { InternalTdsTablePropChange } from "./components/table/table/table";
+export { Placement as Placement1 } from "./types/Tooltip";
 export namespace Components {
     interface TdsAccordion {
         /**
@@ -298,10 +300,6 @@ export namespace Components {
           * Size of the Chip component
          */
         "size": 'sm' | 'lg';
-        /**
-          * Value to be used for the aria-label attribute
-         */
-        "tdsAriaLabel": string;
         /**
           * Type of Chip, depends on usage
          */
@@ -1593,6 +1591,18 @@ export namespace Components {
          */
         "trigger": 'click' | 'hover';
     }
+    interface TdsTooltipBeta {
+        "defaultShow": boolean;
+        "mouseOverTooltip": boolean;
+        "offsetDistance": number;
+        "offsetSkidding": number;
+        "placement": Placement1;
+        "referenceEl"?: HTMLElement | null;
+        "selector": string;
+        "show": boolean;
+        "text": string;
+        "trigger": 'click' | 'hover';
+    }
 }
 export interface TdsAccordionItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -2633,6 +2643,12 @@ declare global {
         prototype: HTMLTdsTooltipElement;
         new (): HTMLTdsTooltipElement;
     };
+    interface HTMLTdsTooltipBetaElement extends Components.TdsTooltipBeta, HTMLStencilElement {
+    }
+    var HTMLTdsTooltipBetaElement: {
+        prototype: HTMLTdsTooltipBetaElement;
+        new (): HTMLTdsTooltipBetaElement;
+    };
     interface HTMLElementTagNameMap {
         "tds-accordion": HTMLTdsAccordionElement;
         "tds-accordion-item": HTMLTdsAccordionItemElement;
@@ -2716,6 +2732,7 @@ declare global {
         "tds-toast": HTMLTdsToastElement;
         "tds-toggle": HTMLTdsToggleElement;
         "tds-tooltip": HTMLTdsTooltipElement;
+        "tds-tooltip-beta": HTMLTdsTooltipBetaElement;
     }
 }
 declare namespace LocalJSX {
@@ -3032,10 +3049,6 @@ declare namespace LocalJSX {
           * Size of the Chip component
          */
         "size"?: 'sm' | 'lg';
-        /**
-          * Value to be used for the aria-label attribute
-         */
-        "tdsAriaLabel"?: string;
         /**
           * Type of Chip, depends on usage
          */
@@ -4414,6 +4427,18 @@ declare namespace LocalJSX {
          */
         "trigger"?: 'click' | 'hover';
     }
+    interface TdsTooltipBeta {
+        "defaultShow"?: boolean;
+        "mouseOverTooltip"?: boolean;
+        "offsetDistance"?: number;
+        "offsetSkidding"?: number;
+        "placement"?: Placement1;
+        "referenceEl"?: HTMLElement | null;
+        "selector"?: string;
+        "show"?: boolean;
+        "text"?: string;
+        "trigger"?: 'click' | 'hover';
+    }
     interface IntrinsicElements {
         "tds-accordion": TdsAccordion;
         "tds-accordion-item": TdsAccordionItem;
@@ -4497,6 +4522,7 @@ declare namespace LocalJSX {
         "tds-toast": TdsToast;
         "tds-toggle": TdsToggle;
         "tds-tooltip": TdsTooltip;
+        "tds-tooltip-beta": TdsTooltipBeta;
     }
 }
 export { LocalJSX as JSX };
@@ -4590,6 +4616,7 @@ declare module "@stencil/core" {
             "tds-toast": LocalJSX.TdsToast & JSXBase.HTMLAttributes<HTMLTdsToastElement>;
             "tds-toggle": LocalJSX.TdsToggle & JSXBase.HTMLAttributes<HTMLTdsToggleElement>;
             "tds-tooltip": LocalJSX.TdsTooltip & JSXBase.HTMLAttributes<HTMLTdsTooltipElement>;
+            "tds-tooltip-beta": LocalJSX.TdsTooltipBeta & JSXBase.HTMLAttributes<HTMLTdsTooltipBetaElement>;
         }
     }
 }

package/dist/types/types/Tooltip.d.ts

@@ -0,0 +1,4 @@
+type BasePlacement = 'top' | 'bottom' | 'left' | 'right';
+type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type Placement = BasePlacement | VariationPlacement;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.25.0-fix-a11y-chip-more-improvements-beta.0",
+  "version": "1.25.0-tooltip-beta.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [

package/dist/tegel/p-b08886e3.entry.js

@@ -1 +0,0 @@
-import{r as c,c as s,h as t,H as i,g as p}from"./p-2049fab2.js";import{g as d}from"./p-11648030.js";import{h as e}from"./p-ae110fc2.js";const o=class{constructor(t){c(this,t),this.tdsChange=s(this,"tdsChange",6),this.internalRadioOnChange=s(this,"internalRadioOnChange",6),this.tdsClick=s(this,"tdsClick",6),this.handleChange=()=>{this.disabled||("checkbox"===this.type?this.checked=!this.checked:"radio"===this.type?(this.checked=!0,this.internalRadioOnChange.emit({chipId:this.chipId,checked:this.checked,groupName:this.name})):console.error("Unsupported type in Chip component!"),this.tdsChange.emit({chipId:this.chipId,checked:this.checked,value:this.value}))},this.handleClick=()=>{this.disabled||this.tdsClick.emit({chipId:this.chipId})},this.type="button",this.size="lg",this.chipId=d(),this.checked=!1,this.name=void 0,this.value=void 0,this.disabled=!1,this.tdsAriaLabel=void 0}handleInternaRadioChange(c){const{chipId:s,checked:t,groupName:i}=c.detail;s!==this.chipId&&i===this.name&&this.checked&&t&&(this.checked=!1)}renderInputAttributes(){return Object.assign(Object.assign({},{disabled:this.disabled}),"button"!==this.type?{value:this.value,checked:this.checked,name:this.name,onChange:()=>this.handleChange()}:{onClick:()=>this.handleClick()})}connectedCallback(){this.tdsAriaLabel||console.warn("Tegel Chip component: tdsAriaLabel prop is missing")}render(){const c=this.renderInputAttributes(),s=e("prefix",this.host),p=e("label",this.host),d=e("suffix",this.host);return t(i,{key:"c5e27b57accf13ea6af61b6544050b64c16a745c"},t("div",{key:"b4f3b429a307cfab3e7dd8356951d19fc5a01293",class:"component"},t("div",{key:"273c7437e97862fc03c7d93386d07cc425437458",class:{"tds-chip-component":!0,sm:"sm"===this.size,lg:"lg"===this.size,prefix:s,suffix:d,disabled:this.disabled}},t("input",Object.assign({key:"a143b14527b00c255a7205fc86a2473bb8b8c000",type:this.type,id:this.chipId,"aria-checked":"button"===this.type?void 0:String(this.checked),role:this.type,"aria-label":this.tdsAriaLabel},c)),t("label",{key:"a86d26d9f9fe805e84fad6b9c79b24da48efa2f1",onClick:c=>c.stopPropagation(),htmlFor:this.chipId},s&&t("slot",{key:"ca7e6af86cbac4fc87ac3815fc414f2952d851d0",name:"prefix"}),p&&t("slot",{key:"986cd743afd9f6014cb08e21d5c6c192e579b087",name:"label"}),d&&t("slot",{key:"1cbbd42853fe0edc52da713f23b9ef3f99d8f4b2",name:"suffix"})))))}get host(){return p(this)}};o.style=".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:16px;cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);cursor:default;pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-text-checked-disabled)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:0 16px;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:0 12px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:0 12px 0 6px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px 0 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:0 16px 0 8px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px 0 16px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-blue-400);outline-offset:-2px;background-color:var(--tds-chips-background-focus)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover)}";export{o as tds_chip}