kdutify 0.16.9-rc.0 → 2.6.0

package/lib/services/icons/presets/mdi.js

@@ -0,0 +1,37 @@
+const icons = {
+  complete: 'mdi-check',
+  cancel: 'mdi-close-circle',
+  close: 'mdi-close',
+  delete: 'mdi-close-circle',
+  clear: 'mdi-close',
+  success: 'mdi-check-circle',
+  info: 'mdi-information',
+  warning: 'mdi-exclamation',
+  error: 'mdi-alert',
+  prev: 'mdi-chevron-left',
+  next: 'mdi-chevron-right',
+  checkboxOn: 'mdi-checkbox-marked',
+  checkboxOff: 'mdi-checkbox-blank-outline',
+  checkboxIndeterminate: 'mdi-minus-box',
+  delimiter: 'mdi-circle',
+  sort: 'mdi-arrow-up',
+  expand: 'mdi-chevron-down',
+  menu: 'mdi-menu',
+  subgroup: 'mdi-menu-down',
+  dropdown: 'mdi-menu-down',
+  radioOn: 'mdi-radiobox-marked',
+  radioOff: 'mdi-radiobox-blank',
+  edit: 'mdi-pencil',
+  ratingEmpty: 'mdi-star-outline',
+  ratingFull: 'mdi-star',
+  ratingHalf: 'mdi-star-half-full',
+  loading: 'mdi-cached',
+  first: 'mdi-page-first',
+  last: 'mdi-page-last',
+  unfold: 'mdi-unfold-more-horizontal',
+  file: 'mdi-paperclip',
+  plus: 'mdi-plus',
+  minus: 'mdi-minus'
+};
+export default icons;
+//# sourceMappingURL=mdi.js.map

package/lib/services/icons/presets/mdi.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/services/icons/presets/mdi.ts"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAiB;AAC1B,EAAA,QAAQ,EAAE,WADgB;AAE1B,EAAA,MAAM,EAAE,kBAFkB;AAG1B,EAAA,KAAK,EAAE,WAHmB;AAI1B,EAAA,MAAM,EAAE,kBAJkB;AAK1B,EAAA,KAAK,EAAE,WALmB;AAM1B,EAAA,OAAO,EAAE,kBANiB;AAO1B,EAAA,IAAI,EAAE,iBAPoB;AAQ1B,EAAA,OAAO,EAAE,iBARiB;AAS1B,EAAA,KAAK,EAAE,WATmB;AAU1B,EAAA,IAAI,EAAE,kBAVoB;AAW1B,EAAA,IAAI,EAAE,mBAXoB;AAY1B,EAAA,UAAU,EAAE,qBAZc;AAa1B,EAAA,WAAW,EAAE,4BAba;AAc1B,EAAA,qBAAqB,EAAE,eAdG;AAe1B,EAAA,SAAS,EAAE,YAfe;AAgB1B,EAAA,IAAI,EAAE,cAhBoB;AAiB1B,EAAA,MAAM,EAAE,kBAjBkB;AAkB1B,EAAA,IAAI,EAAE,UAlBoB;AAmB1B,EAAA,QAAQ,EAAE,eAnBgB;AAoB1B,EAAA,QAAQ,EAAE,eApBgB;AAqB1B,EAAA,OAAO,EAAE,qBArBiB;AAsB1B,EAAA,QAAQ,EAAE,oBAtBgB;AAuB1B,EAAA,IAAI,EAAE,YAvBoB;AAwB1B,EAAA,WAAW,EAAE,kBAxBa;AAyB1B,EAAA,UAAU,EAAE,UAzBc;AA0B1B,EAAA,UAAU,EAAE,oBA1Bc;AA2B1B,EAAA,OAAO,EAAE,YA3BiB;AA4B1B,EAAA,KAAK,EAAE,gBA5BmB;AA6B1B,EAAA,IAAI,EAAE,eA7BoB;AA8B1B,EAAA,MAAM,EAAE,4BA9BkB;AA+B1B,EAAA,IAAI,EAAE,eA/BoB;AAgC1B,EAAA,IAAI,EAAE,UAhCoB;AAiC1B,EAAA,KAAK,EAAE;AAjCmB,CAA5B;AAoCA,eAAe,KAAf","sourcesContent":["import { KdutifyIcons } from 'kdutify/types/services/icons'\n\nconst icons: KdutifyIcons = {\n  complete: 'mdi-check',\n  cancel: 'mdi-close-circle',\n  close: 'mdi-close',\n  delete: 'mdi-close-circle', // delete (e.g. k-chip close)\n  clear: 'mdi-close',\n  success: 'mdi-check-circle',\n  info: 'mdi-information',\n  warning: 'mdi-exclamation',\n  error: 'mdi-alert',\n  prev: 'mdi-chevron-left',\n  next: 'mdi-chevron-right',\n  checkboxOn: 'mdi-checkbox-marked',\n  checkboxOff: 'mdi-checkbox-blank-outline',\n  checkboxIndeterminate: 'mdi-minus-box',\n  delimiter: 'mdi-circle', // for carousel\n  sort: 'mdi-arrow-up',\n  expand: 'mdi-chevron-down',\n  menu: 'mdi-menu',\n  subgroup: 'mdi-menu-down',\n  dropdown: 'mdi-menu-down',\n  radioOn: 'mdi-radiobox-marked',\n  radioOff: 'mdi-radiobox-blank',\n  edit: 'mdi-pencil',\n  ratingEmpty: 'mdi-star-outline',\n  ratingFull: 'mdi-star',\n  ratingHalf: 'mdi-star-half-full',\n  loading: 'mdi-cached',\n  first: 'mdi-page-first',\n  last: 'mdi-page-last',\n  unfold: 'mdi-unfold-more-horizontal',\n  file: 'mdi-paperclip',\n  plus: 'mdi-plus',\n  minus: 'mdi-minus',\n}\n\nexport default icons\n"],"sourceRoot":"","file":"mdi.js"}

package/lib/services/index.js

@@ -0,0 +1,8 @@
+export * from './application';
+export * from './breakpoint';
+export * from './goto';
+export * from './icons';
+export * from './lang';
+export * from './presets';
+export * from './theme';
+//# sourceMappingURL=index.js.map

package/lib/services/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/services/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './application'\nexport * from './breakpoint'\nexport * from './goto'\nexport * from './icons'\nexport * from './lang'\nexport * from './presets'\nexport * from './theme'\n"],"sourceRoot":"","file":"index.js"}

package/lib/services/lang/index.js

@@ -0,0 +1,64 @@
+// Extensions
+import { Service } from '../service'; // Utilities
+
+import { getObjectValueByPath } from '../../util/helpers';
+import { consoleError, consoleWarn } from '../../util/console';
+const LANG_PREFIX = '$kdutify.';
+const fallback = Symbol('Lang fallback');
+
+function getTranslation(locale, key, usingDefault = false, defaultLocale) {
+  const shortKey = key.replace(LANG_PREFIX, '');
+  let translation = getObjectValueByPath(locale, shortKey, fallback);
+
+  if (translation === fallback) {
+    if (usingDefault) {
+      consoleError(`Translation key "${shortKey}" not found in fallback`);
+      translation = key;
+    } else {
+      consoleWarn(`Translation key "${shortKey}" not found, falling back to default`);
+      translation = getTranslation(defaultLocale, key, true, defaultLocale);
+    }
+  }
+
+  return translation;
+}
+
+export class Lang extends Service {
+  constructor(preset) {
+    super();
+    this.defaultLocale = 'en';
+    const {
+      current,
+      locales,
+      t
+    } = preset[Lang.property];
+    this.current = current;
+    this.locales = locales;
+    this.translator = t || this.defaultTranslator;
+  }
+
+  currentLocale(key) {
+    const translation = this.locales[this.current];
+    const defaultLocale = this.locales[this.defaultLocale];
+    return getTranslation(translation, key, false, defaultLocale);
+  }
+
+  t(key, ...params) {
+    if (!key.startsWith(LANG_PREFIX)) return this.replace(key, params);
+    return this.translator(key, ...params);
+  }
+
+  defaultTranslator(key, ...params) {
+    return this.replace(this.currentLocale(key), params);
+  }
+
+  replace(str, params) {
+    return str.replace(/\{(\d+)\}/g, (match, index) => {
+      /* istanbul ignore next */
+      return String(params[+index]);
+    });
+  }
+
+}
+Lang.property = 'lang';
+//# sourceMappingURL=index.js.map

package/lib/services/lang/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/services/lang/index.ts"],"names":[],"mappings":"AAAA;AACA,SAAS,OAAT,QAAwB,YAAxB,C,CAEA;;AACA,SAAS,oBAAT,QAAqC,oBAArC;AACA,SAAS,YAAT,EAAuB,WAAvB,QAA0C,oBAA1C;AASA,MAAM,WAAW,GAAG,WAApB;AACA,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAD,CAAvB;;AAEA,SAAS,cAAT,CACE,MADF,EAEE,GAFF,EAGE,YAAY,GAAG,KAHjB,EAIE,aAJF,EAI8B;AAE5B,QAAM,QAAQ,GAAG,GAAG,CAAC,OAAJ,CAAY,WAAZ,EAAyB,EAAzB,CAAjB;AACA,MAAI,WAAW,GAAG,oBAAoB,CAAC,MAAD,EAAS,QAAT,EAAmB,QAAnB,CAAtC;;AAEA,MAAI,WAAW,KAAK,QAApB,EAA8B;AAC5B,QAAI,YAAJ,EAAkB;AAChB,MAAA,YAAY,CAAC,oBAAoB,QAAQ,yBAA7B,CAAZ;AACA,MAAA,WAAW,GAAG,GAAd;AACD,KAHD,MAGO;AACL,MAAA,WAAW,CAAC,oBAAoB,QAAQ,sCAA7B,CAAX;AACA,MAAA,WAAW,GAAG,cAAc,CAAC,aAAD,EAAgB,GAAhB,EAAqB,IAArB,EAA2B,aAA3B,CAA5B;AACD;AACF;;AAED,SAAO,WAAP;AACD;;AAED,OAAM,MAAO,IAAP,SAAoB,OAApB,CAA2B;AAW/B,EAAA,WAAA,CAAa,MAAb,EAAkC;AAChC;AAPK,SAAA,aAAA,GAAgB,IAAhB;AASL,UAAM;AACJ,MAAA,OADI;AAEJ,MAAA,OAFI;AAGJ,MAAA;AAHI,QAIF,MAAM,CAAC,IAAI,CAAC,QAAN,CAJV;AAMA,SAAK,OAAL,GAAe,OAAf;AACA,SAAK,OAAL,GAAe,OAAf;AACA,SAAK,UAAL,GAAkB,CAAC,IAAI,KAAK,iBAA5B;AACD;;AAEM,EAAA,aAAa,CAAE,GAAF,EAAa;AAC/B,UAAM,WAAW,GAAG,KAAK,OAAL,CAAa,KAAK,OAAlB,CAApB;AACA,UAAM,aAAa,GAAG,KAAK,OAAL,CAAa,KAAK,aAAlB,CAAtB;AAEA,WAAO,cAAc,CAAC,WAAD,EAAc,GAAd,EAAmB,KAAnB,EAA0B,aAA1B,CAArB;AACD;;AAEM,EAAA,CAAC,CAAE,GAAF,EAAe,GAAG,MAAlB,EAA+B;AACrC,QAAI,CAAC,GAAG,CAAC,UAAJ,CAAe,WAAf,CAAL,EAAkC,OAAO,KAAK,OAAL,CAAa,GAAb,EAAkB,MAAlB,CAAP;AAElC,WAAO,KAAK,UAAL,CAAgB,GAAhB,EAAqB,GAAG,MAAxB,CAAP;AACD;;AAEO,EAAA,iBAAiB,CAAE,GAAF,EAAe,GAAG,MAAlB,EAA+B;AACtD,WAAO,KAAK,OAAL,CAAa,KAAK,aAAL,CAAmB,GAAnB,CAAb,EAAsC,MAAtC,CAAP;AACD;;AAEO,EAAA,OAAO,CAAE,GAAF,EAAe,MAAf,EAA4B;AACzC,WAAO,GAAG,CAAC,OAAJ,CAAY,YAAZ,EAA0B,CAAC,KAAD,EAAgB,KAAhB,KAAiC;AAChE;AACA,aAAO,MAAM,CAAC,MAAM,CAAC,CAAC,KAAF,CAAP,CAAb;AACD,KAHM,CAAP;AAID;;AA/C8B;AACxB,IAAA,CAAA,QAAA,GAAmB,MAAnB","sourcesContent":["// Extensions\nimport { Service } from '../service'\n\n// Utilities\nimport { getObjectValueByPath } from '../../util/helpers'\nimport { consoleError, consoleWarn } from '../../util/console'\n\n// Types\nimport { KdutifyPreset } from 'kdutify/types/services/presets'\nimport {\n  KdutifyLocale,\n  Lang as ILang,\n} from 'kdutify/types/services/lang'\n\nconst LANG_PREFIX = '$kdutify.'\nconst fallback = Symbol('Lang fallback')\n\nfunction getTranslation (\n  locale: KdutifyLocale,\n  key: string,\n  usingDefault = false,\n  defaultLocale: KdutifyLocale\n): string {\n  const shortKey = key.replace(LANG_PREFIX, '')\n  let translation = getObjectValueByPath(locale, shortKey, fallback) as string | typeof fallback\n\n  if (translation === fallback) {\n    if (usingDefault) {\n      consoleError(`Translation key \"${shortKey}\" not found in fallback`)\n      translation = key\n    } else {\n      consoleWarn(`Translation key \"${shortKey}\" not found, falling back to default`)\n      translation = getTranslation(defaultLocale, key, true, defaultLocale)\n    }\n  }\n\n  return translation\n}\n\nexport class Lang extends Service implements ILang {\n  static property: 'lang' = 'lang'\n\n  public current: ILang['current']\n\n  public defaultLocale = 'en'\n\n  public locales: ILang['locales']\n\n  private translator: ILang['t']\n\n  constructor (preset: KdutifyPreset) {\n    super()\n\n    const {\n      current,\n      locales,\n      t,\n    } = preset[Lang.property]\n\n    this.current = current\n    this.locales = locales\n    this.translator = t || this.defaultTranslator\n  }\n\n  public currentLocale (key: string) {\n    const translation = this.locales[this.current]\n    const defaultLocale = this.locales[this.defaultLocale]\n\n    return getTranslation(translation, key, false, defaultLocale)\n  }\n\n  public t (key: string, ...params: any[]) {\n    if (!key.startsWith(LANG_PREFIX)) return this.replace(key, params)\n\n    return this.translator(key, ...params)\n  }\n\n  private defaultTranslator (key: string, ...params: any[]) {\n    return this.replace(this.currentLocale(key), params)\n  }\n\n  private replace (str: string, params: any[]) {\n    return str.replace(/\\{(\\d+)\\}/g, (match: string, index: string) => {\n      /* istanbul ignore next */\n      return String(params[+index])\n    })\n  }\n}\n"],"sourceRoot":"","file":"index.js"}

package/lib/services/presets/index.js

@@ -0,0 +1,31 @@
+// Preset
+import { preset as Preset } from '../../presets/default'; // Utilities
+
+import { consoleWarn } from '../../util/console';
+import { mergeDeep } from '../../util/helpers';
+import { Service } from '../service';
+export class Presets extends Service {
+  constructor(parentPreset, parent) {
+    super(); // The default preset
+
+    const defaultPreset = mergeDeep({}, Preset); // The user provided preset
+
+    const {
+      userPreset
+    } = parent; // The user provided global preset
+
+    const {
+      preset: globalPreset = {},
+      ...preset
+    } = userPreset;
+
+    if (globalPreset.preset != null) {
+      consoleWarn('Global presets do not support the **preset** option, it can be safely omitted');
+    }
+
+    parent.preset = mergeDeep(mergeDeep(defaultPreset, globalPreset), preset);
+  }
+
+}
+Presets.property = 'presets';
+//# sourceMappingURL=index.js.map

package/lib/services/presets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/services/presets/index.ts"],"names":[],"mappings":"AAAA;AACA,SAAS,MAAM,IAAI,MAAnB,QAAiC,uBAAjC,C,CAEA;;AACA,SAAS,WAAT,QAA4B,oBAA5B;AACA,SAAS,SAAT,QAA0B,oBAA1B;AAIA,SAAS,OAAT,QAAwB,YAAxB;AAMA,OAAM,MAAO,OAAP,SAAuB,OAAvB,CAA8B;AAGlC,EAAA,WAAA,CACE,YADF,EAEE,MAFF,EAEiB;AAEf,YAFe,CAIf;;AACA,UAAM,aAAa,GAAG,SAAS,CAAC,EAAD,EAAK,MAAL,CAA/B,CALe,CAMf;;AACA,UAAM;AAAE,MAAA;AAAF,QAAiB,MAAvB,CAPe,CAQf;;AACA,UAAM;AACJ,MAAA,MAAM,EAAE,YAAY,GAAG,EADnB;AAEJ,SAAG;AAFC,QAGF,UAHJ;;AAKA,QAAI,YAAY,CAAC,MAAb,IAAuB,IAA3B,EAAiC;AAC/B,MAAA,WAAW,CAAC,+EAAD,CAAX;AACD;;AAED,IAAA,MAAM,CAAC,MAAP,GAAgB,SAAS,CACvB,SAAS,CAAC,aAAD,EAAgB,YAAhB,CADc,EAEvB,MAFuB,CAAzB;AAID;;AA3BiC;AAC3B,OAAA,CAAA,QAAA,GAAsB,SAAtB","sourcesContent":["// Preset\nimport { preset as Preset } from '../../presets/default'\n\n// Utilities\nimport { consoleWarn } from '../../util/console'\nimport { mergeDeep } from '../../util/helpers'\n\n// Types\nimport Kdutify from 'kdutify/types'\nimport { Service } from '../service'\nimport {\n  UserKdutifyPreset,\n  KdutifyPreset,\n} from 'kdutify/types/services/presets'\n\nexport class Presets extends Service {\n  static property: 'presets' = 'presets'\n\n  constructor (\n    parentPreset: Partial<UserKdutifyPreset>,\n    parent: Kdutify,\n  ) {\n    super()\n\n    // The default preset\n    const defaultPreset = mergeDeep({}, Preset)\n    // The user provided preset\n    const { userPreset } = parent\n    // The user provided global preset\n    const {\n      preset: globalPreset = {},\n      ...preset\n    } = userPreset\n\n    if (globalPreset.preset != null) {\n      consoleWarn('Global presets do not support the **preset** option, it can be safely omitted')\n    }\n\n    parent.preset = mergeDeep(\n      mergeDeep(defaultPreset, globalPreset),\n      preset\n    ) as KdutifyPreset\n  }\n}\n"],"sourceRoot":"","file":"index.js"}

package/lib/services/service/index.js

@@ -0,0 +1,9 @@
+export class Service {
+  constructor() {
+    this.framework = {};
+  }
+
+  init(root, ssrContext) {}
+
+}
+//# sourceMappingURL=index.js.map

package/lib/services/service/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/services/service/index.ts"],"names":[],"mappings":"AAMA,OAAM,MAAO,OAAP,CAAc;AAApB,EAAA,WAAA,GAAA;AACE,SAAA,SAAA,GAAY,EAAZ;AAGD;;AADC,EAAA,IAAI,CAAE,IAAF,EAAa,UAAb,EAAgC,CAAI;;AAHtB","sourcesContent":["// Contracts\nimport { KdutifyServiceContract } from 'kdutify/types/services/index'\n\n// Types\nimport Kdu from 'kdu'\n\nexport class Service implements KdutifyServiceContract {\n  framework = {}\n\n  init (root: Kdu, ssrContext?: object) {}\n}\n"],"sourceRoot":"","file":"index.js"}

package/lib/services/theme/index.js

@@ -0,0 +1,257 @@
+/* eslint-disable no-multi-spaces */
+// Extensions
+import { Service } from '../service'; // Utilities
+
+import * as ThemeUtils from './utils';
+import { getNestedValue } from '../../util/helpers'; // Types
+
+import Kdu from 'kdu';
+export class Theme extends Service {
+  constructor(preset) {
+    super();
+    this.disabled = false;
+    this.isDark = null;
+    this.unwatch = null;
+    this.kduMeta = null;
+    const {
+      dark,
+      disable,
+      options,
+      themes
+    } = preset[Theme.property];
+    this.dark = Boolean(dark);
+    this.defaults = this.themes = themes;
+    this.options = options;
+
+    if (disable) {
+      this.disabled = true;
+      return;
+    }
+
+    this.themes = {
+      dark: this.fillVariant(themes.dark, true),
+      light: this.fillVariant(themes.light, false)
+    };
+  } // When setting css, check for element and apply new values
+
+  /* eslint-disable-next-line accessor-pairs */
+
+
+  set css(val) {
+    if (this.kduMeta) {
+      if (this.isKduMeta23) {
+        this.applyKduMeta23();
+      }
+
+      return;
+    }
+
+    this.checkOrCreateStyleElement() && (this.styleEl.innerHTML = val);
+  }
+
+  set dark(val) {
+    const oldDark = this.isDark;
+    this.isDark = val; // Only apply theme after dark
+    // has already been set before
+
+    oldDark != null && this.applyTheme();
+  }
+
+  get dark() {
+    return Boolean(this.isDark);
+  } // Apply current theme default
+  // only called on client side
+
+
+  applyTheme() {
+    if (this.disabled) return this.clearCss();
+    this.css = this.generatedStyles;
+  }
+
+  clearCss() {
+    this.css = '';
+  } // Initialize theme for SSR and SPA
+  // Attach to ssrContext head or
+  // apply new theme to document
+
+
+  init(root, ssrContext) {
+    if (this.disabled) return;
+    /* istanbul ignore else */
+
+    if (root.$meta) {
+      this.initKduMeta(root);
+    } else if (ssrContext) {
+      this.initSSR(ssrContext);
+    }
+
+    this.initTheme(root);
+  } // Allows for you to set target theme
+
+
+  setTheme(theme, value) {
+    this.themes[theme] = Object.assign(this.themes[theme], value);
+    this.applyTheme();
+  } // Reset theme defaults
+
+
+  resetThemes() {
+    this.themes.light = Object.assign({}, this.defaults.light);
+    this.themes.dark = Object.assign({}, this.defaults.dark);
+    this.applyTheme();
+  } // Check for existence of style element
+
+
+  checkOrCreateStyleElement() {
+    this.styleEl = document.getElementById('kdutify-theme-stylesheet');
+    /* istanbul ignore next */
+
+    if (this.styleEl) return true;
+    this.genStyleElement(); // If doesn't have it, create it
+
+    return Boolean(this.styleEl);
+  }
+
+  fillVariant(theme = {}, dark) {
+    const defaultTheme = this.themes[dark ? 'dark' : 'light'];
+    return Object.assign({}, defaultTheme, theme);
+  } // Generate the style element
+  // if applicable
+
+
+  genStyleElement() {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return;
+    /* istanbul ignore next */
+
+    this.styleEl = document.createElement('style');
+    this.styleEl.type = 'text/css';
+    this.styleEl.id = 'kdutify-theme-stylesheet';
+
+    if (this.options.cspNonce) {
+      this.styleEl.setAttribute('nonce', this.options.cspNonce);
+    }
+
+    document.head.appendChild(this.styleEl);
+  }
+
+  initKduMeta(root) {
+    this.kduMeta = root.$meta();
+
+    if (this.isKduMeta23) {
+      // kdu-meta needs to apply after mounted()
+      root.$nextTick(() => {
+        this.applyKduMeta23();
+      });
+      return;
+    }
+
+    const metaKeyName = typeof this.kduMeta.getOptions === 'function' ? this.kduMeta.getOptions().keyName : 'metaInfo';
+    const metaInfo = root.$options[metaKeyName] || {};
+
+    root.$options[metaKeyName] = () => {
+      metaInfo.style = metaInfo.style || [];
+      const kdutifyStylesheet = metaInfo.style.find(s => s.id === 'kdutify-theme-stylesheet');
+
+      if (!kdutifyStylesheet) {
+        metaInfo.style.push({
+          cssText: this.generatedStyles,
+          type: 'text/css',
+          id: 'kdutify-theme-stylesheet',
+          nonce: (this.options || {}).cspNonce
+        });
+      } else {
+        kdutifyStylesheet.cssText = this.generatedStyles;
+      }
+
+      return metaInfo;
+    };
+  }
+
+  applyKduMeta23() {
+    const {
+      set
+    } = this.kduMeta.addApp('kdutify');
+    set({
+      style: [{
+        cssText: this.generatedStyles,
+        type: 'text/css',
+        id: 'kdutify-theme-stylesheet',
+        nonce: this.options.cspNonce
+      }]
+    });
+  }
+
+  initSSR(ssrContext) {
+    // SSR
+    const nonce = this.options.cspNonce ? ` nonce="${this.options.cspNonce}"` : '';
+    ssrContext.head = ssrContext.head || '';
+    ssrContext.head += `<style type="text/css" id="kdutify-theme-stylesheet"${nonce}>${this.generatedStyles}</style>`;
+  }
+
+  initTheme(root) {
+    // Only watch for reactivity on client side
+    if (typeof document === 'undefined') return; // If we get here somehow, ensure
+    // existing instance is removed
+
+    if (this.unwatch) {
+      this.unwatch();
+      this.unwatch = null;
+    } // TODO: Update to use RFC if merged
+
+
+    root.$once('hook:created', () => {
+      const obs = Kdu.observable({
+        themes: this.themes
+      });
+      this.unwatch = root.$watch(() => obs.themes, () => this.applyTheme(), {
+        deep: true
+      });
+    });
+    this.applyTheme();
+  }
+
+  get currentTheme() {
+    const target = this.dark ? 'dark' : 'light';
+    return this.themes[target];
+  }
+
+  get generatedStyles() {
+    const theme = this.parsedTheme;
+    /* istanbul ignore next */
+
+    const options = this.options || {};
+    let css;
+
+    if (options.themeCache != null) {
+      css = options.themeCache.get(theme);
+      /* istanbul ignore if */
+
+      if (css != null) return css;
+    }
+
+    css = ThemeUtils.genStyles(theme, options.customProperties);
+
+    if (options.minifyTheme != null) {
+      css = options.minifyTheme(css);
+    }
+
+    if (options.themeCache != null) {
+      options.themeCache.set(theme, css);
+    }
+
+    return css;
+  }
+
+  get parsedTheme() {
+    return ThemeUtils.parse(this.currentTheme || {}, undefined, getNestedValue(this.options, ['variations'], true));
+  } // Is using v2.3 of kdu-meta
+
+
+  get isKduMeta23() {
+    return typeof this.kduMeta.addApp === 'function';
+  }
+
+}
+Theme.property = 'theme';
+//# sourceMappingURL=index.js.map

package/lib/services/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/services/theme/index.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-multi-spaces */\n// Extensions\nimport { Service } from '../service'\n\n// Utilities\nimport * as ThemeUtils from './utils'\nimport { getNestedValue } from '../../util/helpers'\n\n// Types\nimport Kdu from 'kdu'\nimport { KdutifyPreset } from 'kdutify/types/services/presets'\nimport {\n  KdutifyParsedTheme,\n  KdutifyThemes,\n  KdutifyThemeVariant,\n  Theme as ITheme,\n} from 'kdutify/types/services/theme'\n\nexport class Theme extends Service {\n  static property: 'theme' = 'theme'\n\n  public disabled = false\n\n  public options: ITheme['options']\n\n  public styleEl?: HTMLStyleElement\n\n  public themes: KdutifyThemes\n\n  public defaults: KdutifyThemes\n\n  private isDark = null as boolean | null\n\n  private unwatch = null as (() => void) | null\n\n  private kduMeta = null as any | null\n\n  constructor (preset: KdutifyPreset) {\n    super()\n\n    const {\n      dark,\n      disable,\n      options,\n      themes,\n    } = preset[Theme.property]\n\n    this.dark = Boolean(dark)\n    this.defaults = this.themes = themes\n    this.options = options\n\n    if (disable) {\n      this.disabled = true\n\n      return\n    }\n\n    this.themes = {\n      dark: this.fillVariant(themes.dark, true),\n      light: this.fillVariant(themes.light, false),\n    }\n  }\n\n  // When setting css, check for element and apply new values\n  /* eslint-disable-next-line accessor-pairs */\n  set css (val: string) {\n    if (this.kduMeta) {\n      if (this.isKduMeta23) {\n        this.applyKduMeta23()\n      }\n      return\n    }\n    this.checkOrCreateStyleElement() && (this.styleEl!.innerHTML = val)\n  }\n\n  set dark (val: boolean) {\n    const oldDark = this.isDark\n\n    this.isDark = val\n    // Only apply theme after dark\n    // has already been set before\n    oldDark != null && this.applyTheme()\n  }\n\n  get dark () {\n    return Boolean(this.isDark)\n  }\n\n  // Apply current theme default\n  // only called on client side\n  public applyTheme (): void {\n    if (this.disabled) return this.clearCss()\n\n    this.css = this.generatedStyles\n  }\n\n  public clearCss (): void {\n    this.css = ''\n  }\n\n  // Initialize theme for SSR and SPA\n  // Attach to ssrContext head or\n  // apply new theme to document\n  public init (root: Kdu, ssrContext?: any): void {\n    if (this.disabled) return\n\n    /* istanbul ignore else */\n    if ((root as any).$meta) {\n      this.initKduMeta(root)\n    } else if (ssrContext) {\n      this.initSSR(ssrContext)\n    }\n\n    this.initTheme(root)\n  }\n\n  // Allows for you to set target theme\n  public setTheme (theme: 'light' | 'dark', value: object) {\n    this.themes[theme] = Object.assign(this.themes[theme], value)\n    this.applyTheme()\n  }\n\n  // Reset theme defaults\n  public resetThemes () {\n    this.themes.light = Object.assign({}, this.defaults.light)\n    this.themes.dark = Object.assign({}, this.defaults.dark)\n    this.applyTheme()\n  }\n\n  // Check for existence of style element\n  private checkOrCreateStyleElement (): boolean {\n    this.styleEl = document.getElementById('kdutify-theme-stylesheet') as HTMLStyleElement\n\n    /* istanbul ignore next */\n    if (this.styleEl) return true\n\n    this.genStyleElement() // If doesn't have it, create it\n\n    return Boolean(this.styleEl)\n  }\n\n  private fillVariant (\n    theme: Partial<KdutifyThemeVariant> = {},\n    dark: boolean\n  ): KdutifyThemeVariant {\n    const defaultTheme = this.themes[dark ? 'dark' : 'light']\n\n    return Object.assign({},\n      defaultTheme,\n      theme\n    )\n  }\n\n  // Generate the style element\n  // if applicable\n  private genStyleElement (): void {\n    /* istanbul ignore if */\n    if (typeof document === 'undefined') return\n\n    /* istanbul ignore next */\n    this.styleEl = document.createElement('style')\n    this.styleEl.type = 'text/css'\n    this.styleEl.id = 'kdutify-theme-stylesheet'\n\n    if (this.options.cspNonce) {\n      this.styleEl.setAttribute('nonce', this.options.cspNonce)\n    }\n\n    document.head.appendChild(this.styleEl)\n  }\n\n  private initKduMeta (root: any) {\n    this.kduMeta = root.$meta()\n    if (this.isKduMeta23) {\n      // kdu-meta needs to apply after mounted()\n      root.$nextTick(() => {\n        this.applyKduMeta23()\n      })\n      return\n    }\n\n    const metaKeyName = typeof this.kduMeta.getOptions === 'function' ? this.kduMeta.getOptions().keyName : 'metaInfo'\n    const metaInfo = root.$options[metaKeyName] || {}\n\n    root.$options[metaKeyName] = () => {\n      metaInfo.style = metaInfo.style || []\n\n      const kdutifyStylesheet = metaInfo.style.find((s: any) => s.id === 'kdutify-theme-stylesheet')\n\n      if (!kdutifyStylesheet) {\n        metaInfo.style.push({\n          cssText: this.generatedStyles,\n          type: 'text/css',\n          id: 'kdutify-theme-stylesheet',\n          nonce: (this.options || {}).cspNonce,\n        })\n      } else {\n        kdutifyStylesheet.cssText = this.generatedStyles\n      }\n\n      return metaInfo\n    }\n  }\n\n  private applyKduMeta23 () {\n    const { set } = this.kduMeta.addApp('kdutify')\n\n    set({\n      style: [{\n        cssText: this.generatedStyles,\n        type: 'text/css',\n        id: 'kdutify-theme-stylesheet',\n        nonce: this.options.cspNonce,\n      }],\n    })\n  }\n\n  private initSSR (ssrContext?: any) {\n    // SSR\n    const nonce = this.options.cspNonce ? ` nonce=\"${this.options.cspNonce}\"` : ''\n    ssrContext.head = ssrContext.head || ''\n    ssrContext.head += `<style type=\"text/css\" id=\"kdutify-theme-stylesheet\"${nonce}>${this.generatedStyles}</style>`\n  }\n\n  private initTheme (root: Kdu) {\n    // Only watch for reactivity on client side\n    if (typeof document === 'undefined') return\n\n    // If we get here somehow, ensure\n    // existing instance is removed\n    if (this.unwatch) {\n      this.unwatch()\n      this.unwatch = null\n    }\n\n    // TODO: Update to use RFC if merged\n    root.$once('hook:created', () => {\n      const obs = Kdu.observable({ themes: this.themes })\n      this.unwatch = root.$watch(() => obs.themes, () => this.applyTheme(), { deep: true })\n    })\n    this.applyTheme()\n  }\n\n  get currentTheme () {\n    const target = this.dark ? 'dark' : 'light'\n\n    return this.themes[target]\n  }\n\n  get generatedStyles (): string {\n    const theme = this.parsedTheme\n    /* istanbul ignore next */\n    const options = this.options || {}\n    let css\n\n    if (options.themeCache != null) {\n      css = options.themeCache.get(theme)\n      /* istanbul ignore if */\n      if (css != null) return css\n    }\n\n    css = ThemeUtils.genStyles(theme, options.customProperties)\n\n    if (options.minifyTheme != null) {\n      css = options.minifyTheme(css)\n    }\n\n    if (options.themeCache != null) {\n      options.themeCache.set(theme, css)\n    }\n\n    return css\n  }\n\n  get parsedTheme (): KdutifyParsedTheme {\n    return ThemeUtils.parse(\n      this.currentTheme || {},\n      undefined,\n      getNestedValue(this.options, ['variations'], true)\n    )\n  }\n\n  // Is using v2.3 of kdu-meta\n  private get isKduMeta23 (): boolean {\n    return typeof this.kduMeta.addApp === 'function'\n  }\n}\n"],"sourceRoot":"","file":"index.js"}

package/lib/services/theme/utils.js

@@ -0,0 +1,137 @@
+import { keys } from '../../util/helpers';
+import { colorToInt, intToHex, colorToHex } from '../../util/colorUtils';
+import * as sRGB from '../../util/color/transformSRGB';
+import * as LAB from '../../util/color/transformCIELAB';
+export function parse(theme, isItem = false, variations = true) {
+  const {
+    anchor,
+    ...variant
+  } = theme;
+  const colors = Object.keys(variant);
+  const parsedTheme = {};
+
+  for (let i = 0; i < colors.length; ++i) {
+    const name = colors[i];
+    const value = theme[name];
+    if (value == null) continue;
+
+    if (!variations) {
+      parsedTheme[name] = {
+        base: intToHex(colorToInt(value))
+      };
+    } else if (isItem) {
+      /* istanbul ignore else */
+      if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {
+        parsedTheme[name] = colorToHex(value);
+      }
+    } else if (typeof value === 'object') {
+      parsedTheme[name] = parse(value, true, variations);
+    } else {
+      parsedTheme[name] = genVariations(name, colorToInt(value));
+    }
+  }
+
+  if (!isItem) {
+    parsedTheme.anchor = anchor || parsedTheme.base || parsedTheme.primary.base;
+  }
+
+  return parsedTheme;
+}
+/**
+ * Generate the CSS for a base color (.primary)
+ */
+
+const genBaseColor = (name, value) => {
+  return `
+.k-application .${name} {
+  background-color: ${value} !important;
+  border-color: ${value} !important;
+}
+.k-application .${name}--text {
+  color: ${value} !important;
+  caret-color: ${value} !important;
+}`;
+};
+/**
+ * Generate the CSS for a variant color (.primary.darken-2)
+ */
+
+
+const genVariantColor = (name, variant, value) => {
+  const [type, n] = variant.split(/(\d)/, 2);
+  return `
+.k-application .${name}.${type}-${n} {
+  background-color: ${value} !important;
+  border-color: ${value} !important;
+}
+.k-application .${name}--text.text--${type}-${n} {
+  color: ${value} !important;
+  caret-color: ${value} !important;
+}`;
+};
+
+const genColorVariableName = (name, variant = 'base') => `--k-${name}-${variant}`;
+
+const genColorVariable = (name, variant = 'base') => `var(${genColorVariableName(name, variant)})`;
+
+export function genStyles(theme, cssVar = false) {
+  const {
+    anchor,
+    ...variant
+  } = theme;
+  const colors = Object.keys(variant);
+  if (!colors.length) return '';
+  let variablesCss = '';
+  let css = '';
+  const aColor = cssVar ? genColorVariable('anchor') : anchor;
+  css += `.k-application a { color: ${aColor}; }`;
+  cssVar && (variablesCss += `  ${genColorVariableName('anchor')}: ${anchor};\n`);
+
+  for (let i = 0; i < colors.length; ++i) {
+    const name = colors[i];
+    const value = theme[name];
+    css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base);
+    cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\n`);
+    const variants = keys(value);
+
+    for (let i = 0; i < variants.length; ++i) {
+      const variant = variants[i];
+      const variantValue = value[variant];
+      if (variant === 'base') continue;
+      css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue);
+      cssVar && (variablesCss += `  ${genColorVariableName(name, variant)}: ${variantValue};\n`);
+    }
+  }
+
+  if (cssVar) {
+    variablesCss = `:root {\n${variablesCss}}\n\n`;
+  }
+
+  return variablesCss + css;
+}
+export function genVariations(name, value) {
+  const values = {
+    base: intToHex(value)
+  };
+
+  for (let i = 5; i > 0; --i) {
+    values[`lighten${i}`] = intToHex(lighten(value, i));
+  }
+
+  for (let i = 1; i <= 4; ++i) {
+    values[`darken${i}`] = intToHex(darken(value, i));
+  }
+
+  return values;
+}
+export function lighten(value, amount) {
+  const lab = LAB.fromXYZ(sRGB.toXYZ(value));
+  lab[0] = lab[0] + amount * 10;
+  return sRGB.fromXYZ(LAB.toXYZ(lab));
+}
+export function darken(value, amount) {
+  const lab = LAB.fromXYZ(sRGB.toXYZ(value));
+  lab[0] = lab[0] - amount * 10;
+  return sRGB.fromXYZ(LAB.toXYZ(lab));
+}
+//# sourceMappingURL=utils.js.map

package/lib/services/theme/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/services/theme/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { keys } from '../../util/helpers'\nimport { colorToInt, intToHex, colorToHex, ColorInt } from '../../util/colorUtils'\nimport * as sRGB from '../../util/color/transformSRGB'\nimport * as LAB from '../../util/color/transformCIELAB'\nimport {\n  KdutifyParsedTheme,\n  KdutifyThemeItem,\n} from 'kdutify/types/services/theme'\n\nexport function parse (\n  theme: Record<string, KdutifyThemeItem>,\n  isItem = false,\n  variations = true,\n): KdutifyParsedTheme {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n  const parsedTheme: any = {}\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    if (value == null) continue\n\n    if (!variations) {\n      parsedTheme[name] = { base: intToHex(colorToInt(value)) }\n    } else if (isItem) {\n      /* istanbul ignore else */\n      if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {\n        parsedTheme[name] = colorToHex(value)\n      }\n    } else if (typeof value === 'object') {\n      parsedTheme[name] = parse(value, true, variations)\n    } else {\n      parsedTheme[name] = genVariations(name, colorToInt(value))\n    }\n  }\n\n  if (!isItem) {\n    parsedTheme.anchor = anchor || parsedTheme.base || parsedTheme.primary.base\n  }\n\n  return parsedTheme\n}\n\n/**\n * Generate the CSS for a base color (.primary)\n */\nconst genBaseColor = (name: string, value: string): string => {\n  return `\n.k-application .${name} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.k-application .${name}--text {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\n/**\n * Generate the CSS for a variant color (.primary.darken-2)\n */\nconst genVariantColor = (name: string, variant: string, value: string): string => {\n  const [type, n] = variant.split(/(\\d)/, 2)\n  return `\n.k-application .${name}.${type}-${n} {\n  background-color: ${value} !important;\n  border-color: ${value} !important;\n}\n.k-application .${name}--text.text--${type}-${n} {\n  color: ${value} !important;\n  caret-color: ${value} !important;\n}`\n}\n\nconst genColorVariableName = (name: string, variant = 'base'): string => `--k-${name}-${variant}`\n\nconst genColorVariable = (name: string, variant = 'base'): string => `var(${genColorVariableName(name, variant)})`\n\nexport function genStyles (theme: KdutifyParsedTheme, cssVar = false): string {\n  const { anchor, ...variant } = theme\n  const colors = Object.keys(variant)\n\n  if (!colors.length) return ''\n\n  let variablesCss = ''\n  let css = ''\n\n  const aColor = cssVar ? genColorVariable('anchor') : anchor\n  css += `.k-application a { color: ${aColor}; }`\n  cssVar && (variablesCss += `  ${genColorVariableName('anchor')}: ${anchor};\\n`)\n\n  for (let i = 0; i < colors.length; ++i) {\n    const name = colors[i]\n    const value = theme[name]\n\n    css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base)\n    cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\\n`)\n\n    const variants = keys(value)\n    for (let i = 0; i < variants.length; ++i) {\n      const variant = variants[i]\n      const variantValue = value[variant]\n      if (variant === 'base') continue\n\n      css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue)\n      cssVar && (variablesCss += `  ${genColorVariableName(name, variant)}: ${variantValue};\\n`)\n    }\n  }\n\n  if (cssVar) {\n    variablesCss = `:root {\\n${variablesCss}}\\n\\n`\n  }\n\n  return variablesCss + css\n}\n\nexport function genVariations (name: string, value: ColorInt): Record<string, string> {\n  const values: Record<string, string> = {\n    base: intToHex(value),\n  }\n\n  for (let i = 5; i > 0; --i) {\n    values[`lighten${i}`] = intToHex(lighten(value, i))\n  }\n\n  for (let i = 1; i <= 4; ++i) {\n    values[`darken${i}`] = intToHex(darken(value, i))\n  }\n\n  return values\n}\n\nexport function lighten (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] + amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n\nexport function darken (value: ColorInt, amount: number): ColorInt {\n  const lab = LAB.fromXYZ(sRGB.toXYZ(value))\n  lab[0] = lab[0] - amount * 10\n  return sRGB.fromXYZ(LAB.toXYZ(lab))\n}\n"],"sourceRoot":"","file":"utils.js"}

package/lib/util/color/transformCIELAB.js

@@ -0,0 +1,17 @@
+const delta = 0.20689655172413793; // 6÷29
+
+const cielabForwardTransform = t => t > delta ** 3 ? Math.cbrt(t) : t / (3 * delta ** 2) + 4 / 29;
+
+const cielabReverseTransform = t => t > delta ? t ** 3 : 3 * delta ** 2 * (t - 4 / 29);
+
+export function fromXYZ(xyz) {
+  const transform = cielabForwardTransform;
+  const transformedY = transform(xyz[1]);
+  return [116 * transformedY - 16, 500 * (transform(xyz[0] / 0.95047) - transformedY), 200 * (transformedY - transform(xyz[2] / 1.08883))];
+}
+export function toXYZ(lab) {
+  const transform = cielabReverseTransform;
+  const Ln = (lab[0] + 16) / 116;
+  return [transform(Ln + lab[1] / 500) * 0.95047, transform(Ln), transform(Ln - lab[2] / 200) * 1.08883];
+}
+//# sourceMappingURL=transformCIELAB.js.map

package/lib/util/color/transformCIELAB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/util/color/transformCIELAB.ts"],"names":[],"mappings":"AAEA,MAAM,KAAK,GAAG,mBAAd,C,CAAkC;;AAElC,MAAM,sBAAsB,GAAI,CAAD,IAC7B,CAAC,GAAG,KAAK,IAAI,CAAb,GACI,IAAI,CAAC,IAAL,CAAU,CAAV,CADJ,GAEK,CAAC,IAAI,IAAI,KAAK,IAAI,CAAjB,CAAF,GAAyB,IAAI,EAHnC;;AAMA,MAAM,sBAAsB,GAAI,CAAD,IAC7B,CAAC,GAAG,KAAJ,GACI,CAAC,IAAI,CADT,GAEK,IAAI,KAAK,IAAI,CAAd,IAAoB,CAAC,GAAG,IAAI,EAA5B,CAHN;;AAMA,OAAM,SAAU,OAAV,CAAmB,GAAnB,EAA2B;AAC/B,QAAM,SAAS,GAAG,sBAAlB;AACA,QAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAD,CAAJ,CAA9B;AAEA,SAAO,CACL,MAAM,YAAN,GAAqB,EADhB,EAEL,OAAO,SAAS,CAAC,GAAG,CAAC,CAAD,CAAH,GAAS,OAAV,CAAT,GAA8B,YAArC,CAFK,EAGL,OAAO,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAD,CAAH,GAAS,OAAV,CAA/B,CAHK,CAAP;AAKD;AAED,OAAM,SAAU,KAAV,CAAiB,GAAjB,EAAyB;AAC7B,QAAM,SAAS,GAAG,sBAAlB;AACA,QAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAD,CAAH,GAAS,EAAV,IAAgB,GAA3B;AACA,SAAO,CACL,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAD,CAAH,GAAS,GAAf,CAAT,GAA+B,OAD1B,EAEL,SAAS,CAAC,EAAD,CAFJ,EAGL,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAD,CAAH,GAAS,GAAf,CAAT,GAA+B,OAH1B,CAAP;AAKD","sourcesContent":["import { XYZ, LAB } from '../colorUtils'\n\nconst delta = 0.20689655172413793 // 6÷29\n\nconst cielabForwardTransform = (t: number): number => (\n  t > delta ** 3\n    ? Math.cbrt(t)\n    : (t / (3 * delta ** 2)) + 4 / 29\n)\n\nconst cielabReverseTransform = (t: number): number => (\n  t > delta\n    ? t ** 3\n    : (3 * delta ** 2) * (t - 4 / 29)\n)\n\nexport function fromXYZ (xyz: XYZ): LAB {\n  const transform = cielabForwardTransform\n  const transformedY = transform(xyz[1])\n\n  return [\n    116 * transformedY - 16,\n    500 * (transform(xyz[0] / 0.95047) - transformedY),\n    200 * (transformedY - transform(xyz[2] / 1.08883)),\n  ]\n}\n\nexport function toXYZ (lab: LAB): XYZ {\n  const transform = cielabReverseTransform\n  const Ln = (lab[0] + 16) / 116\n  return [\n    transform(Ln + lab[1] / 500) * 0.95047,\n    transform(Ln),\n    transform(Ln - lab[2] / 200) * 1.08883,\n  ]\n}\n"],"sourceRoot":"","file":"transformCIELAB.js"}