bromcom-ui-next 0.1.2 → 0.1.4

package/dist/esm/validation-messages-a29d53be.js

@@ -0,0 +1,129 @@
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+    byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+    return (byteToHex[arr[offset + 0]] +
+        byteToHex[arr[offset + 1]] +
+        byteToHex[arr[offset + 2]] +
+        byteToHex[arr[offset + 3]] +
+        '-' +
+        byteToHex[arr[offset + 4]] +
+        byteToHex[arr[offset + 5]] +
+        '-' +
+        byteToHex[arr[offset + 6]] +
+        byteToHex[arr[offset + 7]] +
+        '-' +
+        byteToHex[arr[offset + 8]] +
+        byteToHex[arr[offset + 9]] +
+        '-' +
+        byteToHex[arr[offset + 10]] +
+        byteToHex[arr[offset + 11]] +
+        byteToHex[arr[offset + 12]] +
+        byteToHex[arr[offset + 13]] +
+        byteToHex[arr[offset + 14]] +
+        byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+    if (!getRandomValues) {
+        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        }
+        getRandomValues = crypto.getRandomValues.bind(crypto);
+    }
+    return getRandomValues(rnds8);
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+
+function v4(options, buf, offset) {
+    if (native.randomUUID && !buf && !options) {
+        return native.randomUUID();
+    }
+    options = options || {};
+    const rnds = options.random ?? options.rng?.() ?? rng();
+    if (rnds.length < 16) {
+        throw new Error('Random bytes length must be >= 16');
+    }
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    if (buf) {
+        offset = offset || 0;
+        if (offset < 0 || offset + 16 > buf.length) {
+            throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);
+        }
+        for (let i = 0; i < 16; ++i) {
+            buf[offset + i] = rnds[i];
+        }
+        return buf;
+    }
+    return unsafeStringify(rnds);
+}
+
+/**
+ * Generates a unique identifier with an optional prefix.
+ * @param prefix - Optional prefix for the generated ID (default: 'bcm')
+ * @returns A unique string ID in the format "prefix-uuid"
+ * @example
+ * const id = generateId('button'); // -> "button-123e4567-e89b..."
+ * const defaultId = generateId(); // -> "bcm-123e4567-e89b..."
+ */
+const generateId = (prefix = 'bcm') => {
+    if (!prefix) {
+        throw new Error('Prefix cannot be empty');
+    }
+    return `${prefix}-${v4()}`;
+};
+
+class I18n {
+    static setMessages(locale, messages) {
+        this.messages[locale] = messages;
+        this.currentLocale = locale; // Mesajları set ederken locale'i de güncelle
+        // console.log(`I18n messages set for locale: ${locale}`, messages);
+    }
+    static setLocale(locale) {
+        if (this.messages[locale]) {
+            this.currentLocale = locale;
+            // Locale değiştiğinde console'a bilgi ver (development için)
+            console.log(`I18n locale changed to: ${locale}`);
+        }
+        else {
+            console.warn(`Locale '${locale}' not found in messages`);
+        }
+    }
+    static t(key, data) {
+        var _a;
+        const message = ((_a = this.messages[this.currentLocale]) === null || _a === void 0 ? void 0 : _a[key]) || key;
+        if (!data)
+            return message;
+        return Object.entries(data).reduce((msg, [key, value]) => {
+            return msg.replace(new RegExp(`{${key}}`, 'g'), String(value));
+        }, message);
+    }
+}
+I18n.messages = {};
+I18n.currentLocale = 'en';
+
+const defaultValidationMessages = {
+    email: 'Please enter a valid email address',
+    required: 'This field is required',
+    minlength: 'Please enter at least {min} characters',
+    maxlength: 'Please enter no more than {max} characters',
+    min: 'Value must be at least {min}',
+    max: 'Value must be at most {max}',
+    pattern: 'Please enter a valid format',
+};
+const setValidationMessages = (locale, messages) => {
+    I18n.setMessages(locale, Object.assign(Object.assign({}, defaultValidationMessages), messages));
+};
+const getValidationMessage = (type, data) => {
+    return I18n.t(type, data);
+};
+
+export { getValidationMessage as a, defaultValidationMessages as d, generateId as g, setValidationMessages as s };
+
+//# sourceMappingURL=validation-messages-a29d53be.js.map

package/dist/esm/validation-messages-a29d53be.js.map

@@ -0,0 +1 @@
+{"file":"validation-messages-a29d53be.js","mappings":"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","names":["uuidv4"],"sources":["node_modules/uuid/dist/esm-browser/stringify.js","node_modules/uuid/dist/esm-browser/rng.js","node_modules/uuid/dist/esm-browser/native.js","node_modules/uuid/dist/esm-browser/v4.js","src/utils/id/generate-id.ts","src/utils/i18n.ts","src/utils/validation-messages.ts"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random ?? options.rng?.() ?? rng();\n    if (rnds.length < 16) {\n        throw new Error('Random bytes length must be >= 16');\n    }\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        if (offset < 0 || offset + 16 > buf.length) {\n            throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);\n        }\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n","import { v4 as uuidv4 } from 'uuid';\n\n/**\n * Generates a unique identifier with an optional prefix.\n * @param prefix - Optional prefix for the generated ID (default: 'bcm')\n * @returns A unique string ID in the format \"prefix-uuid\"\n * @example\n * const id = generateId('button'); // -> \"button-123e4567-e89b...\"\n * const defaultId = generateId(); // -> \"bcm-123e4567-e89b...\"\n */\nexport const generateId = (prefix = 'bcm'): string => {\n  if (!prefix) {\n    throw new Error('Prefix cannot be empty');\n  }\n  return `${prefix}-${uuidv4()}`;\n};\n","export type MessageTemplateData = Record<string, string | number>;\n\nexport class I18n {\n  private static messages: Record<string, Record<string, string>> = {};\n  private static currentLocale = 'en';\n\n  static setMessages(locale: string, messages: Record<string, string>) {\n    this.messages[locale] = messages;\n    this.currentLocale = locale; // Mesajları set ederken locale'i de güncelle\n    // console.log(`I18n messages set for locale: ${locale}`, messages);\n  }\n\n  static setLocale(locale: string) {\n    if (this.messages[locale]) {\n      this.currentLocale = locale;\n      // Locale değiştiğinde console'a bilgi ver (development için)\n      console.log(`I18n locale changed to: ${locale}`);\n    } else {\n      console.warn(`Locale '${locale}' not found in messages`);\n    }\n  }\n\n  static t(key: string, data?: MessageTemplateData): string {\n    const message = this.messages[this.currentLocale]?.[key] || key;\n    if (!data) return message;\n\n    return Object.entries(data).reduce((msg, [key, value]) => {\n      return msg.replace(new RegExp(`{${key}}`, 'g'), String(value));\n    }, message);\n  }\n}\n","import { I18n } from './i18n';\n\nexport const defaultValidationMessages = {\n  email: 'Please enter a valid email address',\n  required: 'This field is required',\n  minlength: 'Please enter at least {min} characters',\n  maxlength: 'Please enter no more than {max} characters',\n  min: 'Value must be at least {min}',\n  max: 'Value must be at most {max}',\n  pattern: 'Please enter a valid format',\n};\n\nexport const setValidationMessages = (locale: string, messages: Partial<typeof defaultValidationMessages>) => {\n  I18n.setMessages(locale, { ...defaultValidationMessages, ...messages });\n};\n\nexport const getValidationMessage = (type: keyof typeof defaultValidationMessages, data?: Record<string, string | number>) => {\n  return I18n.t(type, data);\n};\n"],"version":3}

package/dist/types/components/badge/badge.component.d.ts

@@ -0,0 +1,87 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @component BcmBadge
+ * @description A versatile badge component that can be positioned around its container.
+ * Supports different sizes, variants (dot/text), colors, and positioning options.
+ * Can display status indicators with optional blinking animation.
+ *
+ * @example Basic usage
+ * <bcm-badge color="primary" position="top-right">
+ *   <div>Container Content</div>
+ *   <span slot="badge">New</span>
+ * </bcm-badge>
+ *
+ * @example Status indicator with blink
+ * <bcm-badge variant="dot" color="success" blink={true} status="Online">
+ *   <div>User Profile</div>
+ * </bcm-badge>
+ */
+export declare class Badge implements ComponentInterface {
+    /**
+     * Determines the size of the badge.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Sets the visual variant of the badge.
+     * 'dot': Appears as a small dot indicator
+     * 'text': Displays content as text
+     * @type {'dot' | 'text'}
+     * @default 'text'
+     */
+    variant: 'dot' | 'text';
+    /**
+     * Defines the color of the badge.
+     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+     * @type {string}
+     * @optional
+     */
+    color?: string;
+    /**
+     * Enables soft color mode for the badge.
+     * When true, uses lighter tones and pastel colors.
+     * @type {boolean}
+     * @default false
+     */
+    soft: boolean;
+    /**
+     * Enables blinking animation for the badge.
+     * Useful for drawing attention or indicating active status.
+     * @type {boolean}
+     * @default false
+     */
+    blink: boolean;
+    /**
+     * Status message for accessibility purposes.
+     * Will be read by screen readers.
+     * @type {string}
+     * @optional
+     */
+    status?: string;
+    /**
+     * Sets the position of the badge relative to its container.
+     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+     * @default 'top-right'
+     */
+    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * Fine-tune the badge position with custom offset.
+     * Format: "x,y" in pixels (e.g., "10,-5")
+     * @type {string}
+     * @optional
+     */
+    offset: string;
+    /**
+     * Text to be displayed inside the badge.
+     * Used when variant is set to 'text'.
+     * Can be overridden using the "badge" slot.
+     * @type {string}
+     * @optional
+     */
+    text?: string;
+    private classes;
+    private get offsetStyle();
+    private get badgeStyle();
+    render(): any;
+}

package/dist/types/components/basic-badge/basic-badge.component.d.ts

@@ -0,0 +1,54 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @component BcmBasicBadge
+ * @description A basic badge component that can be used as a status indicator or to highlight content.
+ * Supports dot and text variants with different sizes and color options.
+ *
+ * @example Basic usage
+ * <bcm-basic-badge size="medium" color="primary">
+ *   New
+ * </bcm-basic-badge>
+ *
+ * @example Dot variant
+ * <bcm-basic-badge variant="dot" color="success" />
+ */
+export declare class BasicBadge implements ComponentInterface {
+    /**
+     * Determines the size of the badge.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Sets the visual variant of the badge.
+     * 'dot': Appears as a small dot indicator
+     * 'text': Displays content as text
+     * @type {'dot' | 'text'}
+     * @default 'text'
+     */
+    variant: 'dot' | 'text';
+    /**
+     * Defines the color of the badge.
+     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+     * @type {string}
+     * @optional
+     */
+    color?: string;
+    /**
+     * Enables soft color mode for the badge.
+     * When true, uses lighter tones and pastel colors.
+     * @type {boolean}
+     * @default false
+     */
+    soft: boolean;
+    /**
+     * Text to be displayed inside the badge.
+     * Used when variant is set to 'text'.
+     * @type {string}
+     * @optional
+     */
+    text?: string;
+    private classes;
+    private get badgeStyle();
+    render(): any;
+}

package/dist/types/components/divider/divider.component.d.ts

@@ -0,0 +1,40 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @component BCM Divider
+ * @description
+ * A versatile divider component that creates a visual separation between content.
+ * It supports horizontal or vertical orientation with customizable styles and sizes.
+ * The component uses CSS variables for theming and Tailwind for styling.
+ */
+export declare class Divider implements ComponentInterface {
+    /**
+     * @prop {('horizontal'|'vertical')} direction
+     * @description Determines the orientation of the divider
+     * @default 'horizontal'
+     * @example
+     * <bcm-divider direction="vertical" />
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * @prop {('solid'|'dashed'|'dotted')} variant
+     * @description Sets the border style of the divider
+     * @default 'solid'
+     * @example
+     * <bcm-divider variant="dashed" />
+     */
+    variant: 'solid' | 'dashed' | 'dotted';
+    /**
+     * @prop {('small'|'medium'|'large')} size
+     * @description Controls the thickness of the divider
+     * @default 'medium'
+     * @values
+     * - small: 1px border
+     * - medium: 2px border
+     * - large: 4px border
+     * @example
+     * <bcm-divider size="large" />
+     */
+    size: 'small' | 'medium' | 'large';
+    private dividerClass;
+    render(): any;
+}

package/dist/types/components/input/input.component.d.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputSize, InputStatus, InputType } from './types';
+export declare class BcmInput {
+    el: HTMLElement;
+    private inputRef;
+    isFocused: boolean;
+    validationMessage: string;
+    isValid: boolean;
+    internalStatus: InputStatus;
+    internalErrorMessage: string;
+    /** Input value */
+    value: string;
+    /** Input placeholder text */
+    placeholder?: string;
+    /** Input name */
+    name?: string;
+    /** Input id */
+    _id?: string;
+    /** Controls the input size */
+    size: InputSize;
+    /** Defines the input's status/state */
+    status: InputStatus;
+    /** Full width input */
+    fullWidth: boolean;
+    /** HTML input type */
+    type: InputType;
+    /** Whether the input is disabled */
+    disabled: boolean;
+    /** Whether the input is readonly */
+    readonly: boolean;
+    /** Whether the input is required */
+    required: boolean;
+    /** Input autocomplete attribute */
+    autocomplete?: string;
+    /** Min length for text input */
+    minLength?: number;
+    /** Max length for text input */
+    maxLength?: number;
+    /** Min value for number input */
+    min?: number;
+    /** Max value for number input */
+    max?: number;
+    /** Step value for number input */
+    step?: number;
+    /** Pattern for validation */
+    pattern?: string;
+    /** Input label for accessibility */
+    label?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Caption text to display below input */
+    captionText?: string;
+    /** ID of associated label element */
+    labelledby?: string;
+    /** ID of associated caption/error text element */
+    describedby?: string;
+    /** Prefix icon class name */
+    prefixIcon?: string;
+    /** Suffix icon class name */
+    suffixIcon?: string;
+    /** Whether to use native form validation
+     * If false, component will handle validation internally
+     */
+    useNativeValidation: boolean;
+    /** Custom validation function */
+    validator?: (value: string) => string | undefined;
+    bcmInput: EventEmitter<InputEvent>;
+    bcmChange: EventEmitter<Event>;
+    bcmFocus: EventEmitter<FocusEvent>;
+    bcmBlur: EventEmitter<FocusEvent>;
+    bcmKeyDown: EventEmitter<KeyboardEvent>;
+    bcmKeyUp: EventEmitter<KeyboardEvent>;
+    handleValueChange(newValue: string): void;
+    watchStatus(newValue: InputStatus): void;
+    watchErrorMessage(newValue: string): void;
+    setFocus(): Promise<void>;
+    setBlur(): Promise<void>;
+    select(): Promise<void>;
+    /** Sets locale and messages for all inputs */
+    setLocale(locale: string, messages: Record<string, string>): Promise<void>;
+    componentWillLoad(): void;
+    private validateInput;
+    private onInput;
+    private onChange;
+    private onFocus;
+    private onBlur;
+    private onKeyDown;
+    private onKeyUp;
+    private hasSlotContent;
+    private styleClass;
+    private getDefaultIconForType;
+    render(): any;
+}

package/dist/types/components/input/types.d.ts

@@ -0,0 +1,13 @@
+export type InputSize = 'small' | 'medium' | 'large';
+export type InputStatus = 'default' | 'error' | 'success' | 'warning' | 'info';
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+export declare const defaultIcons: {
+    readonly search: "fa-regular fa-magnifying-glass";
+    readonly email: "fa-regular fa-envelope";
+    readonly tel: "fa-regular fa-phone";
+    readonly url: "fa-regular fa-link";
+    readonly date: "fa-regular fa-calendar";
+    readonly time: "fa-regular fa-clock";
+    readonly 'datetime-local': "fa-regular fa-calendar-clock";
+    readonly password: "fa-regular fa-lock";
+};

package/dist/types/components/textarea/textarea.component.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputSize, InputStatus, TextareaResize } from './types';
+export declare class BcmTextarea {
+    el: HTMLElement;
+    private textareaRef;
+    isFocused: boolean;
+    validationMessage: string;
+    isValid: boolean;
+    internalStatus: InputStatus;
+    internalErrorMessage: string;
+    /** Textarea value */
+    value: string;
+    /** Textarea rows */
+    rows?: number;
+    /** Textarea cols */
+    cols?: number;
+    /** Minimum height in rows */
+    minRows?: number;
+    /** Maximum height in rows */
+    maxRows?: number;
+    /** Resize behavior */
+    resize: TextareaResize;
+    /** Auto grow height based on content */
+    autoGrow: boolean;
+    /** Input placeholder text */
+    placeholder?: string;
+    /** Input name */
+    name?: string;
+    /** Input id */
+    _id?: string;
+    /** Controls the textarea size */
+    size: InputSize;
+    /** Defines the textarea's status/state */
+    status: InputStatus;
+    /** Full width textarea */
+    fullWidth: boolean;
+    /** Whether the textarea is disabled */
+    disabled: boolean;
+    /** Whether the textarea is readonly */
+    readonly: boolean;
+    /** Whether the textarea is required */
+    required: boolean;
+    /** Min length for text input */
+    minLength?: number;
+    /** Max length for text input */
+    maxLength?: number;
+    /** Show character counter */
+    showCounter: boolean;
+    /** Textarea label for accessibility */
+    label?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Caption text to display below textarea */
+    captionText?: string;
+    /** ID of associated label element */
+    labelledby?: string;
+    /** ID of associated caption/error text element */
+    describedby?: string;
+    /** Custom validation function */
+    validator?: (value: string) => string | undefined;
+    bcmInput: EventEmitter<InputEvent>;
+    bcmChange: EventEmitter<Event>;
+    bcmFocus: EventEmitter<FocusEvent>;
+    bcmBlur: EventEmitter<FocusEvent>;
+    bcmKeyDown: EventEmitter<KeyboardEvent>;
+    bcmKeyUp: EventEmitter<KeyboardEvent>;
+    handleValueChange(newValue: string): void;
+    watchStatus(newValue: InputStatus): void;
+    watchErrorMessage(newValue: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    setFocus(): Promise<void>;
+    setBlur(): Promise<void>;
+    select(): Promise<void>;
+    private adjustHeight;
+    private validateInput;
+    private onChange;
+    private onFocus;
+    private onBlur;
+    private onKeyDown;
+    private onKeyUp;
+    private styleClass;
+    render(): any;
+}

package/dist/types/components/textarea/types.d.ts

@@ -0,0 +1,7 @@
+import { InputSize, InputStatus } from '../input/types';
+export { InputSize, InputStatus };
+export interface TextareaResizeOptions {
+    horizontal?: boolean;
+    vertical?: boolean;
+}
+export type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';