@expressivecss/expressive 0.1.0-alpha.3

package/dist/js/forms/character-counter.d.ts

@@ -0,0 +1,36 @@
+import { Component, InitElements, MElement } from '../foundation/component';
+export interface BaseOptions {
+}
+type InputElement = HTMLInputElement | HTMLTextAreaElement;
+export declare class CharacterCounter extends Component<object> {
+    el: InputElement;
+    /** Stores the reference to the counter HTML element. */
+    counterEl: HTMLSpanElement;
+    /** Specifies whether the input is valid or not. */
+    isInvalid: boolean;
+    /** Specifies whether the input text has valid length or not. */
+    isValidLength: boolean;
+    constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial<BaseOptions>);
+    static get defaults(): BaseOptions;
+    /**
+     * Initializes instance of CharacterCounter.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: InputElement, options?: Partial<BaseOptions>): CharacterCounter;
+    /**
+     * Initializes instances of CharacterCounter.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<InputElement | MElement>, options?: Partial<BaseOptions>): CharacterCounter[];
+    static getInstance(el: InputElement): CharacterCounter;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _setupCounter(): void;
+    _removeCounter(): void;
+    updateCounter: () => void;
+    _validateInput(): void;
+}
+export {};

package/dist/js/forms/forms.d.ts

@@ -0,0 +1,17 @@
+export declare class Forms {
+    /**
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
+     */
+    static validateField(textfield: HTMLInputElement): void;
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e: EventTarget): void;
+    static Init(): void;
+    static InitTextarea(textarea: HTMLTextAreaElement): void;
+    static InitFileInputPath(fileInput: HTMLInputElement): void;
+}

package/dist/js/forms/index.d.ts

@@ -0,0 +1,4 @@
+export { CharacterCounter } from './character-counter';
+export { Forms } from './forms';
+export { Range, RangeOptions } from './range';
+export { FormSelect, FormSelectOptions } from './select';

package/dist/js/forms/range.d.ts

@@ -0,0 +1,40 @@
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface RangeOptions extends BaseOptions {
+}
+export declare class Range extends Component<RangeOptions> {
+    el: HTMLInputElement;
+    private _mousedown;
+    value: HTMLElement;
+    thumb: HTMLElement;
+    constructor(el: HTMLInputElement, options: Partial<RangeOptions>);
+    static get defaults(): RangeOptions;
+    /**
+     * Initializes instance of Range.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLInputElement, options?: Partial<RangeOptions>): Range;
+    /**
+     * Initializes instances of Range.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<RangeOptions>): Range[];
+    static getInstance(el: HTMLInputElement): Range;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleRangeChange: () => void;
+    _handleRangeMousedownTouchstart: (e: MouseEvent | TouchEvent) => void;
+    _handleRangeInputMousemoveTouchmove: () => void;
+    _handleRangeMouseupTouchend: () => void;
+    _handleRangeBlurMouseoutTouchleave: () => void;
+    _setupThumb(): void;
+    _removeThumb(): void;
+    _showRangeBubble(): void;
+    _calcRangeOffset(): number;
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init(): void;
+}

package/dist/js/forms/select.d.ts

@@ -0,0 +1,77 @@
+import { Dropdown, DropdownOptions } from '../components/dropdown';
+import { Component, BaseOptions, InitElements, MElement } from '../foundation/component';
+export interface FormSelectOptions extends BaseOptions {
+    /**
+     * Classes to be added to the select wrapper element.
+     * @default ""
+     */
+    classes: string;
+    /**
+     * Pass options object to select dropdown initialization.
+     * @default {}
+     */
+    dropdownOptions: Partial<DropdownOptions>;
+}
+type ValueStruct = {
+    el: HTMLOptionElement;
+    optionEl: HTMLElement;
+};
+export declare class FormSelect extends Component<FormSelectOptions> {
+    el: HTMLSelectElement;
+    /** If this is a multiple select. */
+    isMultiple: boolean;
+    /**
+     * Label associated with the current select element.
+     * Is "null", if not detected.
+     */
+    labelEl: HTMLLabelElement;
+    /** Dropdown UL element. */
+    dropdownOptions: HTMLUListElement;
+    /** Text input that shows current selected option. */
+    input: HTMLInputElement;
+    /** Instance of the dropdown plugin for this select. */
+    dropdown: Dropdown;
+    /** The select wrapper element. */
+    wrapper: HTMLDivElement;
+    selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
+    private _values;
+    nativeTabIndex: number;
+    constructor(el: HTMLSelectElement, options: FormSelectOptions);
+    static get defaults(): FormSelectOptions;
+    /**
+     * Initializes instance of FormSelect.
+     * @param el HTML element.
+     * @param options Component options.
+     */
+    static init(el: HTMLSelectElement, options?: Partial<FormSelectOptions>): FormSelect;
+    /**
+     * Initializes instances of FormSelect.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
+    static getInstance(el: HTMLElement): FormSelect;
+    destroy(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleSelectChange: () => void;
+    _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
+    _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
+    _selectOptionElement(virtualOption: HTMLElement): void;
+    _handleInputClick: () => void;
+    _setupDropdown(): void;
+    _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
+    _removeDropdown(): void;
+    _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;
+    _selectValue(value: ValueStruct): void;
+    _deselectValue(value: ValueStruct): void;
+    _deselectAll(): void;
+    _isValueSelected(value: ValueStruct): boolean;
+    _toggleEntryFromArray(value: ValueStruct): void;
+    _getSelectedOptions(): HTMLOptionElement[];
+    _setValueToInput(): void;
+    _setSelectedStates(): void;
+    _activateOption(ul: HTMLElement, li: HTMLElement): void;
+    getSelectedValues(): string[];
+}
+export {};

package/dist/js/foundation/component.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Base options for component initialization.
+ */
+export interface BaseOptions {
+}
+export type MElement = HTMLElement | Element;
+export type InitElements<T extends MElement> = NodeListOf<T> | HTMLCollectionOf<T>;
+type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
+    new (el: HTMLElement, options: Partial<O>): T;
+};
+type ComponentType<C extends Component<O>, O extends BaseOptions> = ComponentConstructor<C, O> & typeof Component<O>;
+export interface I18nOptions {
+    cancel: string;
+    clear: string;
+    done: string;
+}
+export interface Openable {
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+}
+/**
+ * Base class implementation for Materialize components.
+ */
+export declare class Component<O extends BaseOptions> {
+    /**
+     * The DOM element the plugin was initialized with.
+     */
+    el: HTMLElement;
+    /**
+     * The options the instance was initialized with.
+     */
+    options: O;
+    /**
+     * Constructs component instance and set everything up.
+     */
+    constructor(el: HTMLElement, options: Partial<O>, classDef: ComponentType<Component<O>, O>);
+    /**
+     * Initializes component instance.
+     * @param el HTML element.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends HTMLElement, O extends BaseOptions, C extends Component<O>>(el: I, options: O, classDef: ComponentType<C, O>): C;
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    /**
+     * Initializes component instances.
+     * @param els HTML elements.
+     * @param options Component options.
+     * @param classDef Class definition.
+     */
+    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    /**
+     * @returns default options for component instance.
+     */
+    static get defaults(): BaseOptions;
+    /**
+     * Retrieves component instance for the given element.
+     * @param el Associated HTML Element.
+     */
+    static getInstance(el: HTMLElement): Component<BaseOptions>;
+    /**
+     * Destroy plugin instance and teardown.
+     */
+    destroy(): void;
+}
+export {};

package/dist/js/foundation/index.d.ts

@@ -0,0 +1,2 @@
+export { Component, BaseOptions, MElement, InitElements, I18nOptions, Openable } from './component';
+export { Utils, Edges, Bounding } from './utils';

package/dist/js/foundation/utils.d.ts

@@ -0,0 +1,122 @@
+export interface Edges {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+}
+export interface Bounding {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Class with utilitary functions for global usage.
+ */
+export declare class Utils {
+    /** Specifies wether tab is pressed or not. */
+    static tabPressed: boolean;
+    /** Specifies wether there is a key pressed. */
+    static keyDown: boolean;
+    /**
+     * Key maps.
+     */
+    static keys: {
+        TAB: string[];
+        ENTER: string[];
+        ESC: string[];
+        BACKSPACE: string[];
+        ARROW_UP: string[];
+        ARROW_DOWN: string[];
+        ARROW_LEFT: string[];
+        ARROW_RIGHT: string[];
+        DELETE: string[];
+    };
+    /**
+     * Detects when a key is pressed.
+     * @param e Event instance.
+     */
+    static docHandleKeydown(e: KeyboardEvent): void;
+    /**
+     * Detects when a key is released.
+     * @param e Event instance.
+     */
+    static docHandleKeyup(e: KeyboardEvent): void;
+    /**
+     * Detects when document is focused.
+     * @param e Event instance.
+     */
+    static docHandleFocus(e: FocusEvent): void;
+    /**
+     * Detects when document is not focused.
+     * @param e Event instance.
+     */
+    static docHandleBlur(e: FocusEvent): void;
+    /**
+     * Generates a unique string identifier.
+     */
+    static guid(): string;
+    /**
+     * Checks for exceeded edges
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges;
+    /**
+     * Checks if element can be aligned in multiple directions.
+     * @param el Element to be inspected.
+     * @param container Container element.
+     * @param bounding Bounding rect.
+     * @param offset Element offset.
+     */
+    static checkPossibleAlignments(el: HTMLElement, container: HTMLElement, bounding: Bounding, offset: number): {
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+        spaceOnTop: number;
+        spaceOnRight: number;
+        spaceOnBottom: number;
+        spaceOnLeft: number;
+    };
+    /**
+     * Retrieves target element id from trigger.
+     * @param trigger Trigger element.
+     */
+    static getIdFromTrigger(trigger: HTMLElement): string;
+    /**
+     * Retrieves document scroll postion from top.
+     */
+    static getDocumentScrollTop(): number;
+    /**
+     * Retrieves document scroll postion from left.
+     */
+    static getDocumentScrollLeft(): number;
+    /**
+     * Fires the given function after a certain ammount of time.
+     * @param func Function to be fired.
+     * @param wait Wait time.
+     * @param options Additional options.
+     */
+    static throttle(func: (Function: object) => void, wait: number, options?: Partial<{
+        leading: boolean;
+        trailing: boolean;
+    }>): (...args: any[]) => any;
+    /**
+     * Renders confirm/close buttons with callback function
+     */
+    static createConfirmationContainer(container: HTMLElement, confirmText: string, cancelText: string, onConfirm: (Function: object) => void, onCancel: (Function: object) => void): void;
+    /**
+     * Renders a button with optional callback function
+     */
+    static createButton(container: HTMLElement, text: string, className?: string[], visibility?: boolean, callback?: (Function: object) => void): void;
+    static _setAbsolutePosition(origin: HTMLElement, container: HTMLElement, position: string, margin: number, transitionMovement: number, align?: string): {
+        x: number;
+        y: number;
+    };
+    static _repositionWithinScreen(x: number, y: number, width: number, height: number, margin: number, transitionMovement: number, align: string): {
+        x: number;
+        y: number;
+    };
+}

package/dist/js/index.d.ts

@@ -0,0 +1,52 @@
+import { AutocompleteOptions, FloatingActionButtonOptions, CardsOptions, CarouselOptions, ChipsOptions, CollapsibleOptions, DatepickerOptions, DropdownOptions, MaterialboxOptions, ModalOptions, ParallaxOptions, PushpinOptions, ScrollSpyOptions, SidenavOptions, TabsOptions, TapTargetOptions, TimepickerOptions, TooltipOptions } from './components';
+import { FormSelectOptions } from './forms';
+export { Autocomplete } from './components';
+export { FloatingActionButton } from './components';
+export { Cards } from './components';
+export { Carousel } from './components';
+export { Chips } from './components';
+export { Collapsible } from './components';
+export { Datepicker } from './components';
+export { Dropdown } from './components';
+export { Materialbox } from './components';
+export { Modal } from './components';
+export { Parallax } from './components';
+export { Pushpin } from './components';
+export { ScrollSpy } from './components';
+export { Sidenav } from './components';
+export { Slider } from './components';
+export { Tabs } from './components';
+export { TapTarget } from './components';
+export { Timepicker } from './components';
+export { Toast } from './components';
+export { Tooltip } from './components';
+export { Waves } from './components';
+export { CharacterCounter, Forms, Range, FormSelect } from './forms';
+export declare const version = "2.2.2";
+export interface AutoInitOptions {
+    Autocomplete?: Partial<AutocompleteOptions>;
+    Cards?: Partial<CardsOptions>;
+    Carousel?: Partial<CarouselOptions>;
+    Chips?: Partial<ChipsOptions>;
+    Collapsible?: Partial<CollapsibleOptions>;
+    Datepicker?: Partial<DatepickerOptions>;
+    Dropdown?: Partial<DropdownOptions>;
+    Materialbox?: Partial<MaterialboxOptions>;
+    Modal?: Partial<ModalOptions>;
+    Parallax?: Partial<ParallaxOptions>;
+    Pushpin?: Partial<PushpinOptions>;
+    ScrollSpy?: Partial<ScrollSpyOptions>;
+    FormSelect?: Partial<FormSelectOptions>;
+    Sidenav?: Partial<SidenavOptions>;
+    Tabs?: Partial<TabsOptions>;
+    TapTarget?: Partial<TapTargetOptions>;
+    Timepicker?: Partial<TimepickerOptions>;
+    Tooltip?: Partial<TooltipOptions>;
+    FloatingActionButton?: Partial<FloatingActionButtonOptions>;
+}
+/**
+ * Automatically initialize components.
+ * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
+ */
+export declare function AutoInit(context?: HTMLElement, options?: Partial<AutoInitOptions>): void;

package/dist/js/plugins/docked-display.d.ts

@@ -0,0 +1,34 @@
+export interface DockedDisplayPluginOptions {
+    /**
+     * Margin between element and docked container
+     */
+    margin: number;
+    /**
+     * Transition movement
+     */
+    transition: number;
+    /**
+     * Transition duration
+     */
+    duration: number;
+    /**
+     * The alignment of the docked container
+     */
+    align: string;
+}
+export declare class DockedDisplayPlugin {
+    private readonly el;
+    private readonly container;
+    private options;
+    private visible;
+    constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>);
+    /**
+     * Initializes instance of DockedDisplayPlugin
+     * @param el HTMLElement to position to
+     * @param container HTMLElement to be positioned
+     * @param options Plugin options
+     */
+    static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin;
+    show: () => void;
+    hide: () => void;
+}

package/dist/js/plugins/index.d.ts

@@ -0,0 +1 @@
+export { DockedDisplayPlugin, DockedDisplayPluginOptions } from './docked-display';

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@expressivecss/expressive",
+  "version": "0.1.0-alpha.3",
+  "description": "Material Design 3 CSS framework based on Materialize",
+  "license": "MIT",
+  "author": "Javier Baez",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BaezFJ/ExpressiveCSS.git"
+  },
+  "homepage": "https://github.com/BaezFJ/ExpressiveCSS#readme",
+  "bugs": {
+    "url": "https://github.com/BaezFJ/ExpressiveCSS/issues"
+  },
+  "keywords": [
+    "css",
+    "sass",
+    "scss",
+    "material-design",
+    "material-design-3",
+    "framework",
+    "ui",
+    "components",
+    "responsive",
+    "materialize"
+  ],
+  "main": "dist/js/expressive.js",
+  "module": "dist/js/expressive.mjs",
+  "types": "dist/js/index.d.ts",
+  "style": "dist/css/expressive.css",
+  "sass": "src/scss/expressive.scss",
+  "exports": {
+    ".": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/expressive.mjs",
+      "require": "./dist/js/expressive.js"
+    },
+    "./css": "./dist/css/expressive.css",
+    "./css/min": "./dist/css/expressive.min.css",
+    "./scss": "./src/scss/expressive.scss"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "src/scss/",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "dist/js/expressive.js"
+  ],
+  "scripts": {
+    "build:ts": "rollup -c",
+    "build:css": "sass src/scss/expressive.scss dist/css/expressive.css --no-source-map",
+    "build:css:min": "sass src/scss/expressive.scss dist/css/expressive.min.css --no-source-map --style=compressed",
+    "check:ts": "tsc --noEmit",
+    "build": "npm run build:ts && npm run build:css && npm run build:css:min",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/node": "^25.2.1",
+    "rollup": "^4.30.1",
+    "sass": "^1.97.3",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
+  }
+}