@sandlada/mdk/build/domain/duration.js

A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.

export class Duration {
    Key;
    Value;
    Unit;
    toJSON() { return ({ Key: this.Key, Value: this.Value, Unit: this.Unit }); }
    ToCSSDeclaration({ Semicolon = false } = {}) {
        return `${this.Key}: ${this.Value}${this.Unit}${Semicolon ? ';' : ''}`;
    }
    ToCSSVariable() {
        return `var(${this.Key}, ${this.Value}${this.Unit})`;
    }
    ToCSSValue() {
        return `${this.Value}${this.Unit}`;
    }
    toString() { return this.ToCSSDeclaration(); }
    constructor(Key, Value, Unit) {
        this.Key = Key;
        this.Value = Value;
        this.Unit = Unit;
    }
    static Short1 = new Duration('--md-sys-motion-duration-short1', 50, 'ms');
    static Short2 = new Duration('--md-sys-motion-duration-short2', 100, 'ms');
    static Short3 = new Duration('--md-sys-motion-duration-short3', 150, 'ms');
    static Short4 = new Duration('--md-sys-motion-duration-short4', 200, 'ms');
    static Medium1 = new Duration('--md-sys-motion-duration-medium1', 250, 'ms');
    static Medium2 = new Duration('--md-sys-motion-duration-medium2', 300, 'ms');
    static Medium3 = new Duration('--md-sys-motion-duration-medium3', 350, 'ms');
    static Medium4 = new Duration('--md-sys-motion-duration-medium4', 400, 'ms');
    static Long1 = new Duration('--md-sys-motion-duration-long1', 450, 'ms');
    static Long2 = new Duration('--md-sys-motion-duration-long2', 500, 'ms');
    static Long3 = new Duration('--md-sys-motion-duration-long3', 550, 'ms');
    static Long4 = new Duration('--md-sys-motion-duration-long4', 600, 'ms');
    static ExtraLong1 = new Duration('--md-sys-motion-duration-extra-long1', 700, 'ms');
    static ExtraLong2 = new Duration('--md-sys-motion-duration-extra-long2', 800, 'ms');
    static ExtraLong3 = new Duration('--md-sys-motion-duration-extra-long3', 900, 'ms');
    static ExtraLong4 = new Duration('--md-sys-motion-duration-extra-long4', 1000, 'ms');
    static ExpressiveFastSpatial = new Duration('--md-sys-motion-duration-expressive-fast-spatial', 350, 'ms');
    static ExpressiveDefaultSpatial = new Duration('--md-sys-motion-duration-expressive-default-spatial', 500, 'ms');
    static ExpressiveSlowSpatial = new Duration('--md-sys-motion-duration-expressive-slow-spatial', 650, 'ms');
    static ExpressiveFastEffects = new Duration('--md-sys-motion-duration-expressive-fast-effects', 150, 'ms');
    static ExpressiveDefaultEffects = new Duration('--md-sys-motion-duration-expressive-default-effects', 200, 'ms');
    static ExpressiveSlowEffects = new Duration('--md-sys-motion-duration-expressive-slow-effects', 300, 'ms');
    static StandardFastSpatial = new Duration('--md-sys-motion-duration-standard-fast-spatial', 350, 'ms');
    static StandardDefaultSpatial = new Duration('--md-sys-motion-duration-standard-default-spatial', 500, 'ms');
    static StandardSlowSpatial = new Duration('--md-sys-motion-duration-standard-slow-spatial', 750, 'ms');
    static StandardFastEffects = new Duration('--md-sys-motion-duration-standard-fast-effects', 150, 'ms');
    static StandardDefaultEffects = new Duration('--md-sys-motion-duration-standard-default-effects', 200, 'ms');
    static StandardSlowEffects = new Duration('--md-sys-motion-duration-standard-slow-effects', 300, 'ms');
    static AllEnums = {
        Short1: this.Short1, Short2: this.Short2, Short3: this.Short3, Short4: this.Short4,
        Medium1: this.Medium1, Medium2: this.Medium2, Medium3: this.Medium3, Medium4: this.Medium4,
        Long1: this.Long1, Long2: this.Long2, Long3: this.Long3, Long4: this.Long4,
        ExtraLong1: this.ExtraLong1, ExtraLong2: this.ExtraLong2, ExtraLong3: this.ExtraLong3, ExtraLong4: this.ExtraLong4,
        ExpressiveFastSpatial: this.ExpressiveFastSpatial, ExpressiveDefaultSpatial: this.ExpressiveDefaultSpatial, ExpressiveSlowSpatial: this.ExpressiveSlowSpatial,
        ExpressiveFastEffects: this.ExpressiveFastEffects, ExpressiveDefaultEffects: this.ExpressiveDefaultEffects, ExpressiveSlowEffects: this.ExpressiveSlowEffects,
        StandardFastSpatial: this.StandardFastSpatial, StandardDefaultSpatial: this.StandardDefaultSpatial, StandardSlowSpatial: this.StandardSlowSpatial,
        StandardFastEffects: this.StandardFastEffects, StandardDefaultEffects: this.StandardDefaultEffects, StandardSlowEffects: this.StandardSlowEffects,
    };
}