@telesign/boreal-web-components 0.1.0-alpha.0

package/dist/collection/services/floating/interfaces/Positioning.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/services/floating/interfaces/Props.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/services/floating/positioning.service.js

@@ -0,0 +1,71 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { Logger } from "../logger/Logger";
+class FloatingAdapter {
+    /**
+     * Constructor of the adapter.
+     * @param logger Inject the logger service to normalize the error messages.
+     */
+    constructor(logger) {
+        this.logger = logger;
+    }
+    /**
+     *  Compute the position of the floating element making it responsive to the reference element.
+     * @param {HTMLElement} reference The reference element to position the floating element. Could be a trigger element or a container.
+     * @param {HTMLElement} floating The floating element to position, Will be positioned relative to the reference element.
+     * @param {PositioningOptions} options Manage the logic of the positioning and some props that are own of the Floating UI library.
+     * @returns {Promise<PositioningResult>} The positioning result with the position and the placement.
+     */
+    async computePosition(reference, floating, options) {
+        if (reference === undefined || reference === null)
+            this.logger.error('FloatingAdapter.computePosition', 'Reference element is required for positioning.');
+        if (floating === undefined || floating === null)
+            this.logger.error('FloatingAdapter.computePosition', 'Floating element is required for positioning.');
+        const { placement, offset: offsetValue, flip: enableFlip, shift: enableShift, arrow: arrowElement, strategy, } = options;
+        const middleware = [offset(offsetValue)];
+        if (enableFlip)
+            middleware.push(flip());
+        if (enableShift)
+            middleware.push(shift());
+        if (arrowElement !== undefined || arrowElement !== null)
+            middleware.push(arrow({ element: arrowElement }));
+        const result = await computePosition(reference, floating, {
+            placement,
+            middleware,
+            strategy,
+        })
+            .catch((err) => {
+            this.logger.error('FloatingAdapter.computePosition', err.message);
+        })
+            .then((res) => {
+            return res;
+        });
+        const { x, y, placement: computedPlacement, middlewareData } = result;
+        return {
+            x,
+            y,
+            placement: computedPlacement,
+            middlewareData,
+        };
+    }
+    /**
+     * Apply the position of the floating element to the element.
+     * @param {HTMLElement} element Is the floating element to apply the position.
+     * @param {PositioningResult} result Is the positioning result with the position and the placement.
+     */
+    applyPosition(element, result) {
+        if (element === undefined || element === null)
+            this.logger.error('FloatingAdapter.applyPosition', 'Element is required to apply positioning.');
+        element.style.left = `${result.x}px`;
+        element.style.top = `${result.y}px`;
+    }
+}
+/**
+ * Export a simple class to use the adapter.
+ * This class is responsible for handling the positioning logic exported to the mixin or some other floating logic.
+ */
+export class PositioningEngine extends FloatingAdapter {
+    constructor() {
+        const logger = new Logger();
+        super(logger);
+    }
+}

package/dist/collection/services/floating/types/Arrow.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/services/logger/Logger.js

@@ -0,0 +1,47 @@
+/**
+ * Default implementation of the logger service.
+ * This class is responsible for logging errors, warnings and messages to the DevTools console.
+ */
+export class Logger {
+    /**
+     * Throw a normalized error with the component name and the message.
+     * @param component Is the name of the component that is throwing the error.
+     * @param message Is the message of the error.
+     * @throws Error with the component name and the message.
+     * @example
+     * const logger = new Logger();
+     * logger.error('MyComponent', 'This is an error');
+     * // Throws an error with the message "[MyComponent]: This is an error"
+     */
+    error(component, message) {
+        throw new Error(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a warning with the component name and the message.
+     * @param component Is the name of the component that is throwing the warning.
+     * @param message Is the message of the warning.
+     * @example
+     * const logger = new Logger();
+     * logger.warn('MyComponent', 'This is a warning');
+     * // Logs a warning with the message "[MyComponent]: This is a warning"
+     */
+    warn(component, message) {
+        console.warn(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a message with the component name and the message.
+     * @param component Is the name of the component that is logging the message.
+     * @param message Is the message of the message.
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     */
+    log(component, message) {
+        console.log(`[${component}]: ${message}`);
+    }
+}

package/dist/collection/types/alignment.js

@@ -0,0 +1,6 @@
+export const ALIGNMENT = {
+    START: 'start',
+    CENTER: 'center',
+    END: 'end',
+    INHERIT: 'inherit',
+};

package/dist/collection/types/form.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/index.js

@@ -0,0 +1,5 @@
+export * from './alignment';
+export * from './form';
+export * from './size';
+export * from './states';
+export * from './stylesMap';

package/dist/collection/types/position.js

@@ -0,0 +1,11 @@
+/**
+ * Define the possible positions of the floating element.
+ * This could be used to position the floating element relative to the trigger element.
+ * Are blocked posittions like 'top-start', 'top-end', 'bottom-start', and 'bottom-end'.
+ */
+export const POSITION = {
+    TOP: 'top',
+    BOTTOM: 'bottom',
+    LEFT: 'left',
+    RIGHT: 'right',
+};

package/dist/collection/types/size.js

@@ -0,0 +1,7 @@
+export const SIZES = {
+    XS: 'xs',
+    S: 'sm',
+    M: 'md',
+    L: 'lg',
+    XL: 'xl',
+};

package/dist/collection/types/states.js

@@ -0,0 +1,22 @@
+export const STATES = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    DISABLED: 'disabled',
+    HOVER: 'hover',
+    ACTIVE: 'active',
+    FOCUS: 'focus',
+    VISITED: 'visited',
+};
+export const PROCESS_STATUS = {
+    NEUTRAL: 'neutral',
+    PENDING: 'pending',
+    IN_PROGRESS: 'in-progress',
+    COMPLETE: 'complete',
+    CANCEL: 'cancel',
+};
+export const STATUS_VARIANT = {
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+};

package/dist/collection/types/stylesMap.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/a11y/attributes.js

@@ -0,0 +1,80 @@
+/**
+ * Taken from StencilJS Ionic team
+ * This helper pass the attributes passed to components directly to the inner element
+ * e.g. <my-component aria-hidden="true">Text</my-component>
+ * will pass the aria-hidden to the inner element inside my-component
+ * <span { ...myComponentAttr }>Hidden</span>
+ */
+export const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach(attr => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = value;
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+export const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
+    }
+    return inheritAttributes(el, attributesToInherit);
+};

package/dist/collection/utils/a11y/index.js

@@ -0,0 +1 @@
+export * from './attributes';

package/dist/collection/utils/constants/common/Events.js

@@ -0,0 +1,10 @@
+/**
+ * Centralize list of events to add listeners to the component.
+ * Add Native or Custom events to the `EVENTS` object.
+ * This prevent typing errors when using the event name in the component, creating listeners, etc.
+ */
+export const EVENTS = {
+    Focus: 'focus',
+    Blur: 'blur',
+    Click: 'click',
+};

package/dist/collection/utils/constants/common/Keys.js

@@ -0,0 +1,16 @@
+/**
+ * Default keyboard keys.
+ * Add more keys to the `KEYBOARD` object to add more keyboard shortcuts.
+ * This prevents key name typing errors and provides a centralized definition of the keys available for implementation.
+ * Can use this page to find the keycodes: https://keycode.info/
+ */
+export const KEYBOARD = {
+    Enter: {
+        key: 'Enter',
+        code: 13,
+    },
+    Escape: {
+        key: 'Escape',
+        code: 32,
+    },
+};

package/dist/collection/utils/dom/elements.js

@@ -0,0 +1,22 @@
+/**
+ * Detects whether a slot has assigned content in the host element's light DOM.
+ *
+ * Whitespace-only text nodes and comment nodes are ignored — only element nodes
+ * and non-empty text nodes are considered meaningful slot content.
+ *
+ * @param el - The host element to query.
+ * @param slotName - Named slot to check. Omit to check the default slot.
+ * @returns `true` if the slot has meaningful content, `false` otherwise.
+ */
+export function hasSlotContent(el, slotName) {
+    if (slotName !== undefined) {
+        return el.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    return Array.from(el.childNodes).some(node => {
+        if (node instanceof Element)
+            return node.slot === '';
+        if (node.nodeType === Node.TEXT_NODE)
+            return node.textContent?.trim() !== '';
+        return false;
+    });
+}

package/dist/collection/utils/dom/index.js

@@ -0,0 +1 @@
+export * from './elements';

package/dist/collection/utils/form/index.js

@@ -0,0 +1 @@
+export * from './internals';

package/dist/collection/utils/form/internals.js

@@ -0,0 +1,79 @@
+/**
+ * Registers the component's current value with the browser's form machinery.
+ *
+ * Wraps `ElementInternals.setFormValue()` so the value appears in `FormData`
+ * under the component's `name` attribute when the form is submitted.
+ * Pass `null` to remove the component's contribution from `FormData`
+ * (e.g. an unchecked checkbox).
+ *
+ * @param internals - The component's `ElementInternals` instance (from `@AttachInternals()`).
+ * @param value - The value to register, or `null` to deregister.
+ *
+ * @example
+ * ```typescript
+ * // Register a string value on every value change
+ * @Watch('value')
+ * onValueChange(next: string) {
+ *   setFormValue(this.internals, next);
+ * }
+ *
+ * // Deregister when unchecked
+ * setFormValue(this.internals, null);
+ * ```
+ */
+export function setFormValue(internals, value) {
+    internals.setFormValue(value);
+}
+/**
+ * Runs an array of validators against the host element and reports the combined
+ * result to `ElementInternals.setValidity()`.
+ *
+ * All validators are evaluated regardless of order. The first failing validator's
+ * message is used as the validation message, matching native browser behaviour
+ * (one message surfaced at a time). When all validators pass, the component is
+ * marked valid and any previous invalid state is cleared.
+ *
+ * @param internals - The component's `ElementInternals` instance (from `@AttachInternals()`).
+ * @param validators - Array of `IFormValidator` objects to evaluate.
+ * @param el - The host element passed to each validator's `isValid` function.
+ * @returns `true` if all validators pass, `false` if any fail.
+ *
+ * @example
+ * ```typescript
+ * private get validators(): IFormValidator[] {
+ *   return [
+ *     {
+ *       key: 'valueMissing',
+ *       isValid: (el) => !(el as BdsTextField).required || (el as BdsTextField).value !== '',
+ *       message: 'This field is required.',
+ *     },
+ *     {
+ *       key: 'tooShort',
+ *       isValid: (el) => {
+ *         const { value, minLength } = el as BdsTextField;
+ *         return minLength === undefined || value.length >= minLength;
+ *       },
+ *       message: `Minimum length not reached.`,
+ *     },
+ *   ];
+ * }
+ *
+ * private updateValidity() {
+ *   runValidators(this.internals, this.validators, this.el);
+ * }
+ * ```
+ */
+export function runValidators(internals, validators, el) {
+    const flags = {};
+    let firstMessage = '';
+    for (const { key, isValid, message } of validators) {
+        if (!isValid(el)) {
+            flags[key] = true;
+            if (firstMessage === '')
+                firstMessage = message;
+        }
+    }
+    const valid = Object.keys(flags).length === 0;
+    internals.setValidity(valid ? {} : flags, firstMessage);
+    return valid;
+}

package/dist/collection/utils/helpers/common/BaseAttributes.js

@@ -0,0 +1,17 @@
+/**
+ * Ensure the given component instance has an auto-generated id if one wasn't provided.
+ * Designed to be called from `componentWillLoad` on a Stencil component.
+ */
+export function createId(component) {
+    if (!component.idComponent)
+        component.idComponent = `bds-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Components can spread the result into their host.
+ */
+export function getBaseAttributes(component) {
+    createId(component);
+    return {
+        id: component.idComponent,
+    };
+}

package/dist/collection/utils/index.js

@@ -0,0 +1,3 @@
+export * from './a11y';
+export * from './dom';
+export * from './form';