@dialpad/dialtone 10.0.1 → 10.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/js/dialtone_merge_migrate/index.mjs +7 -4
- package/dist/js/dialtone_migration_helper/helpers.mjs +6 -3
- package/dist/js/dialtone_migration_helper/index.mjs +11 -9
- package/dist/js/dialtone_migration_helper/optional-peer-deps.mjs +26 -0
- package/dist/tokens/doc.json +1 -1
- package/dist/tokens/themes/config.cjs +2 -2
- package/dist/tokens/themes/config.js +65 -60
- package/dist/tokens/themes/materials.cjs +1 -0
- package/dist/tokens/themes/materials.js +30 -0
- package/dist/tokens/types/themes/config.d.ts.map +1 -1
- package/dist/tokens/types/themes/materials.d.ts +28 -0
- package/dist/tokens/types/themes/materials.d.ts.map +1 -0
- package/dist/vue3/{RichTextEditor-DKpulIyi.js → RichTextEditor-CzMY0oVT.js} +10 -17
- package/dist/vue3/{RichTextEditor-DKpulIyi.js.map → RichTextEditor-CzMY0oVT.js.map} +1 -1
- package/dist/vue3/{RichTextEditor-BVQ99ytl.cjs → RichTextEditor-n42FPkjs.cjs} +3 -4
- package/dist/vue3/{RichTextEditor-BVQ99ytl.cjs.map → RichTextEditor-n42FPkjs.cjs.map} +1 -1
- package/dist/vue3/components/Popover/Popover.vue.d.ts.map +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -1
- package/dist/vue3/dialtone-vue.js +1 -1
- package/dist/vue3/lib/popover/popover.cjs +1 -1
- package/dist/vue3/lib/popover/popover.cjs.map +1 -1
- package/dist/vue3/lib/popover/popover.js +14 -2
- package/dist/vue3/lib/popover/popover.js.map +1 -1
- package/dist/vue3/lib/rich-text-editor/index.cjs +1 -1
- package/dist/vue3/lib/rich-text-editor/index.js +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -73,14 +73,14 @@ import {
|
|
|
73
73
|
import Tmo from '@dialpad/dialtone/themes/tmo';
|
|
74
74
|
import HighContrast from '@dialpad/dialtone/themes/high-contrast';
|
|
75
75
|
|
|
76
|
-
setMode('dark'); // toggles data-dt-mode
|
|
76
|
+
setMode('dark'); // toggles data-dt-mode, no injection
|
|
77
77
|
setBrand(Tmo); // injects brand CSS, sets data-dt-brand
|
|
78
|
-
setMaterial('steel'); //
|
|
78
|
+
setMaterial('steel'); // injects material CSS, sets data-dt-material
|
|
79
79
|
setContrast(HighContrast); // injects contrast CSS, sets data-dt-contrast
|
|
80
80
|
setContrast(null); // remove contrast override
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
`setMode`
|
|
83
|
+
`setMode` toggles an attribute against pre-bundled CSS — no injection. `setBrand`, `setMaterial`, and `setContrast` inject per-theme override CSS.
|
|
84
84
|
|
|
85
85
|
---
|
|
86
86
|
|
|
@@ -2,16 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
import { join, normalize } from 'path';
|
|
4
4
|
import { fileURLToPath, pathToFileURL } from 'url';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import { assertOptionalPeerDeps } from '../dialtone_migration_helper/optional-peer-deps.mjs';
|
|
6
|
+
|
|
7
|
+
await assertOptionalPeerDeps(['yargs']);
|
|
8
|
+
const { hideBin } = await import('yargs/helpers');
|
|
9
|
+
const { default: yargs } = await import('yargs');
|
|
10
|
+
const {
|
|
8
11
|
error,
|
|
9
12
|
getAllFileContents,
|
|
10
13
|
getConfigFileList,
|
|
11
14
|
inquireForFile,
|
|
12
15
|
modifyFileContents,
|
|
13
16
|
readConfigFile,
|
|
14
|
-
}
|
|
17
|
+
} = await import('../dialtone_migration_helper/helpers.mjs');
|
|
15
18
|
import { runMergeMigration } from './merge-migrate.mjs';
|
|
16
19
|
|
|
17
20
|
const CONFIG_FOLDER = fileURLToPath(new URL('../dialtone_migration_helper/configs', import.meta.url));
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import chalk from 'chalk';
|
|
2
|
-
import { globby } from 'globby';
|
|
3
|
-
import inquirer from 'inquirer';
|
|
4
1
|
import path from 'path';
|
|
5
2
|
import fs from 'fs';
|
|
3
|
+
import { assertOptionalPeerDeps } from './optional-peer-deps.mjs';
|
|
6
4
|
const { readdir, readFile, writeFile } = fs.promises;
|
|
7
5
|
|
|
6
|
+
await assertOptionalPeerDeps(['chalk', 'globby', 'inquirer']);
|
|
7
|
+
const { default: chalk } = await import('chalk');
|
|
8
|
+
const { globby } = await import('globby');
|
|
9
|
+
const { default: inquirer } = await import('inquirer');
|
|
10
|
+
|
|
8
11
|
// confirm prompt for starting operations, display warning and y/n dialog
|
|
9
12
|
export const confirmStart = () => {
|
|
10
13
|
return new Promise((resolve, reject) => {
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
3
|
+
import ora from 'ora';
|
|
4
|
+
import { dirname, normalize } from 'path';
|
|
5
|
+
import { fileURLToPath } from 'url';
|
|
6
|
+
import { assertOptionalPeerDeps } from './optional-peer-deps.mjs';
|
|
7
|
+
|
|
8
|
+
await assertOptionalPeerDeps(['chalk', 'yargs']);
|
|
9
|
+
const { default: chalk } = await import('chalk');
|
|
10
|
+
const { hideBin } = await import('yargs/helpers');
|
|
11
|
+
const { default: yargs } = await import('yargs');
|
|
12
|
+
const {
|
|
5
13
|
confirmStart,
|
|
6
14
|
doPatternSearch,
|
|
7
15
|
error,
|
|
@@ -10,13 +18,7 @@ import {
|
|
|
10
18
|
getAllFileContents,
|
|
11
19
|
inquireForFile,
|
|
12
20
|
modifyFileContents,
|
|
13
|
-
|
|
14
|
-
} from './helpers.mjs';
|
|
15
|
-
import ora from 'ora';
|
|
16
|
-
import { dirname, normalize } from 'path';
|
|
17
|
-
import { fileURLToPath } from 'url';
|
|
18
|
-
import { hideBin } from 'yargs/helpers';
|
|
19
|
-
import yargs from 'yargs';
|
|
21
|
+
} = await import('./helpers.mjs');
|
|
20
22
|
|
|
21
23
|
// eslint-disable-next-line complexity
|
|
22
24
|
(async () => {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// chalk, globby, inquirer and yargs are declared as optional peerDependencies
|
|
2
|
+
// on @dialpad/dialtone-css because they're only needed by the migration CLIs
|
|
3
|
+
// (dialtone-migrate, dialtone-migration-helper, dialtone-merge-migrate), not
|
|
4
|
+
// by consumers who only use the published CSS/tokens. This checks they're
|
|
5
|
+
// actually present before the CLI runs, so a missing one fails with an
|
|
6
|
+
// install instruction instead of a raw ERR_MODULE_NOT_FOUND stack trace.
|
|
7
|
+
export const assertOptionalPeerDeps = async (names) => {
|
|
8
|
+
const missing = [];
|
|
9
|
+
for (const name of names) {
|
|
10
|
+
try {
|
|
11
|
+
await import(name);
|
|
12
|
+
} catch {
|
|
13
|
+
missing.push(name);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
if (missing.length > 0) {
|
|
18
|
+
console.error(
|
|
19
|
+
`\nThis command requires the following package${missing.length > 1 ? 's' : ''}, which ` +
|
|
20
|
+
`${missing.length > 1 ? 'are' : 'is'} not installed: ${missing.join(', ')}.\n` +
|
|
21
|
+
`Install ${missing.length > 1 ? 'them' : 'it'} with:\n\n` +
|
|
22
|
+
` npm install -D ${missing.join(' ')}\n`,
|
|
23
|
+
);
|
|
24
|
+
process.exit(1);
|
|
25
|
+
}
|
|
26
|
+
};
|
package/dist/tokens/doc.json
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core.cjs`);var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./materials.cjs`),t=require(`./core.cjs`);var n=Object.freeze([`sandstone`,`steel`,`graphite`,`iron`,`amethyst`,`jade`]),r=new Set(n),i=!1,a=0,o=null;function s(e,t=document.documentElement,n=null){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}if(e===null){f(`dialtone-css-brand`,t?.shadowRoot??t),o&&(t?.setAttribute(`data-dt-brand`,o.brand),g(o.material??`sandstone`,t));return}return e.base?c(e,t,n):l(e,t)}function c(e,t=document.documentElement,n=null){t?.setAttribute(`data-dt-theme`,e.base.name),t?.setAttribute(`data-dt-brand`,e.brand.name);let r=t?.shadowRoot??t;d(`dialtone-css-theme`,e.base.css,r),d(`dialtone-css-brand`,e.brand.css,r),n?(d(`dialtone-css-contrast`,n.css,r),t?.setAttribute(`data-dt-contrast`,`high`)):(f(`dialtone-css-contrast`,r),t?.setAttribute(`data-dt-contrast`,`default`))}function l(e,t=document.documentElement){let n=t?.shadowRoot??t;if(e.core&&!i&&(d(`dialtone-css-core`,e.core,n),i=!0),e.baseColors&&!n?.querySelector(`#dialtone-css-base-colors`)&&d(`dialtone-css-base-colors`,e.baseColors,n),e.brand){let r=o?.brand;r&&e.brand.name===r?(f(`dialtone-css-brand`,n),t?.setAttribute(`data-dt-brand`,r),g(o?.material??`sandstone`,t)):(d(`dialtone-css-brand`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),h(e,t))}e.contrast&&(d(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name))}function u(e,n,r=null){let o=++a;if(e){d(`dialtone-css-core`,t.core,n),i=!0;return}if(r){d(`dialtone-css-core`,r.core,n),i=!0;return}d(`dialtone-css-core`,``,n),Promise.resolve().then(()=>require(`./core-no-layers.cjs`)).then(({default:e})=>{o===a&&(d(`dialtone-css-core`,e.core,n),i=!0)}).catch(e=>{o===a&&console.error(`[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.`,e)})}function d(e,t,n,r=null){if(n?.querySelector(`#`+e)){let r=n.querySelector(`#`+e);r.innerHTML=t}else{let i=document.createElement(`style`);i.setAttribute(`type`,`text/css`),i.setAttribute(`id`,e),i.innerHTML=t;let a=n?.querySelector(`head`)??n,o=r?n?.querySelector(`#`+r):null;o&&o.parentNode===a?a.insertBefore(i,o):a?.appendChild(i)}}function f(e,t){t?.querySelector(`#`+e)?.remove()}function p(e,t=document.documentElement){if(e!==`light`&&e!==`dark`){console.warn(`Invalid mode: ${e}. Must be 'light' or 'dark'`);return}if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMode(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}t?.setAttribute(`data-dt-mode`,e)}function m(e,t=document.documentElement){if(!e||typeof e!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!e.brand||typeof e.brand!=`object`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand must be an object with {name, css} properties.`);if(typeof e.brand.name!=`string`||!e.brand.name||typeof e.brand.css!=`string`)throw TypeError(`[Dialtone] setBaseBrand: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setBaseBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;d(`dialtone-css-brand-base`,e.brand.css,n),t?.setAttribute(`data-dt-brand`,e.brand.name),h(e,t),f(`dialtone-css-brand`,n),o&&(o.brand=e.brand.name,o.material=b(e)??`sandstone`)}function h(e,t){let n=e.material?.name;if(n){if(r.has(n)){g(n,t);return}console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${n}'; falling back to sandstone.`),g(`sandstone`,t)}}function g(t,n){let r=n?.shadowRoot??n,i=e[t];i?d(`dialtone-css-material`,i.css,r):f(`dialtone-css-material`,r),n?.setAttribute(`data-dt-material`,t)}function _(e,t=document.documentElement){if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setContrast(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=t?.shadowRoot??t;e&&e.contrast?(d(`dialtone-css-contrast`,e.contrast.css,n),t?.setAttribute(`data-dt-contrast`,e.contrast.name)):(f(`dialtone-css-contrast`,n),t?.setAttribute(`data-dt-contrast`,`default`))}function v(e,t=document.documentElement){if(e!=null&&typeof e!=`string`)throw TypeError(`[Dialtone] setMaterial: expected a string material name or null.`);if(t instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to setMaterial(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let n=e||`sandstone`;if(!r.has(n)){console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),g(`sandstone`,t);return}g(n,t)}function y(e,n=`light`,r=document.documentElement,i={}){let{layers:a=!0,core:s=null}=i;if(!e||typeof e!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';`);if(!e.brand||typeof e.brand!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.`);if(typeof e.brand.name!=`string`||!e.brand.name||typeof e.brand.css!=`string`)throw TypeError(`[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.`);if(n!==`light`&&n!==`dark`)throw TypeError(`[Dialtone] initDialtoneTheme: mode must be 'light' or 'dark', got '${n}'.`);if(!r||typeof r!=`object`)throw TypeError(`[Dialtone] initDialtoneTheme: rootNode must be an HTMLElement or host element with shadowRoot.`);if(r instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to initDialtoneTheme(). Please pass the host element instead. The function will access shadowRoot automatically.
|
|
2
2
|
Correct: initDialtoneTheme(brand, mode, hostElement)
|
|
3
|
-
Incorrect: initDialtoneTheme(brand, mode, hostElement.shadowRoot)`);return}let c=r?.shadowRoot??r;if(r===document.documentElement&&document.querySelector(`#dialtone-css-core`)!==null)throw Error(`[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)`);let
|
|
3
|
+
Incorrect: initDialtoneTheme(brand, mode, hostElement.shadowRoot)`);return}let c=r?.shadowRoot??r;if(r===document.documentElement&&document.querySelector(`#dialtone-css-core`)!==null)throw Error(`[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)`);let l=o;if(l)if(l.brand===e.brand.name&&l.mode===n){if(l.layers===a){console.warn(`[Dialtone] Theme already initialized with brand '${e.brand.name}' and mode '${n}'. Re-applying the same theme may be unnecessary. If you need to switch themes dynamically, use setBaseBrand() or setMode() instead of calling initDialtoneTheme() again.`);return}console.warn(`[Dialtone] Theme already initialized with brand '${e.brand.name}' and mode '${n}' using layers=${l.layers}. Reloading core tokens with layers=${a}.`),u(a,c,s),o.layers=a;return}else{console.warn(`[Dialtone] Theme already initialized. Previous: brand='${l.brand}', mode='${l.mode}'. New: brand='${e.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);return}u(a,c,s),d(`dialtone-css-base-colors`,t.baseColors,c),p(n,r),r?.setAttribute(`data-dt-contrast`,`default`),r?.setAttribute(`data-dt-material`,`sandstone`),m(e,r),o={brand:e.brand.name,mode:n,contrast:`default`,material:b(e)??`sandstone`,layers:a}}function b(e){return e?.material?.name??null}var x=e=>b(e)!==null,S=s,C=w;function w(e=document.documentElement){if(e instanceof ShadowRoot){console.warn(`[Dialtone] You passed a ShadowRoot directly to resetBrand(). Please pass the host element instead. The function will access shadowRoot automatically.`);return}let t=e?.shadowRoot??e;o=null,i=!1,a++,f(`dialtone-css-core`,t),f(`dialtone-css-base-colors`,t),f(`dialtone-css-material`,t),f(`dialtone-css-brand-base`,t),f(`dialtone-css-brand`,t),f(`dialtone-css-contrast`,t),e?.removeAttribute(`data-dt-mode`),e?.removeAttribute(`data-dt-brand`),e?.removeAttribute(`data-dt-contrast`),e?.removeAttribute(`data-dt-material`)}exports.VALID_MATERIALS=n,exports.getBrandMaterial=b,exports.hasBrandMaterialLock=x,exports.initDialtoneTheme=y,exports.resetBrand=w,exports.resetTheme=C,exports.setBaseBrand=m,exports.setBrand=s,exports.setContrast=_,exports.setMaterial=v,exports.setMode=p,exports.setTheme=S;
|
|
@@ -1,54 +1,55 @@
|
|
|
1
|
-
import e from "./
|
|
1
|
+
import e from "./materials.js";
|
|
2
|
+
import t from "./core.js";
|
|
2
3
|
//#region themes/config.js
|
|
3
|
-
var
|
|
4
|
+
var n = Object.freeze([
|
|
4
5
|
"sandstone",
|
|
5
6
|
"steel",
|
|
6
7
|
"graphite",
|
|
7
8
|
"iron",
|
|
8
9
|
"amethyst",
|
|
9
10
|
"jade"
|
|
10
|
-
]),
|
|
11
|
-
function
|
|
11
|
+
]), r = new Set(n), i = !1, a = 0, o = null;
|
|
12
|
+
function s(e, t = document.documentElement, n = null) {
|
|
12
13
|
if (t instanceof ShadowRoot) {
|
|
13
14
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setBrand(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
if (e === null) {
|
|
17
|
-
|
|
18
|
+
f("dialtone-css-brand", t?.shadowRoot ?? t), o && (t?.setAttribute("data-dt-brand", o.brand), g(o.material ?? "sandstone", t));
|
|
18
19
|
return;
|
|
19
20
|
}
|
|
20
|
-
return e.base ?
|
|
21
|
+
return e.base ? c(e, t, n) : l(e, t);
|
|
21
22
|
}
|
|
22
|
-
function
|
|
23
|
+
function c(e, t = document.documentElement, n = null) {
|
|
23
24
|
t?.setAttribute("data-dt-theme", e.base.name), t?.setAttribute("data-dt-brand", e.brand.name);
|
|
24
25
|
let r = t?.shadowRoot ?? t;
|
|
25
|
-
|
|
26
|
+
d("dialtone-css-theme", e.base.css, r), d("dialtone-css-brand", e.brand.css, r), n ? (d("dialtone-css-contrast", n.css, r), t?.setAttribute("data-dt-contrast", "high")) : (f("dialtone-css-contrast", r), t?.setAttribute("data-dt-contrast", "default"));
|
|
26
27
|
}
|
|
27
|
-
function
|
|
28
|
+
function l(e, t = document.documentElement) {
|
|
28
29
|
let n = t?.shadowRoot ?? t;
|
|
29
|
-
if (e.core && !
|
|
30
|
-
let r =
|
|
31
|
-
r && e.brand.name === r ? (
|
|
30
|
+
if (e.core && !i && (d("dialtone-css-core", e.core, n), i = !0), e.baseColors && !n?.querySelector("#dialtone-css-base-colors") && d("dialtone-css-base-colors", e.baseColors, n), e.brand) {
|
|
31
|
+
let r = o?.brand;
|
|
32
|
+
r && e.brand.name === r ? (f("dialtone-css-brand", n), t?.setAttribute("data-dt-brand", r), g(o?.material ?? "sandstone", t)) : (d("dialtone-css-brand", e.brand.css, n), t?.setAttribute("data-dt-brand", e.brand.name), h(e, t));
|
|
32
33
|
}
|
|
33
|
-
e.contrast && (
|
|
34
|
+
e.contrast && (d("dialtone-css-contrast", e.contrast.css, n), t?.setAttribute("data-dt-contrast", e.contrast.name));
|
|
34
35
|
}
|
|
35
|
-
function
|
|
36
|
-
let o = ++
|
|
37
|
-
if (
|
|
38
|
-
|
|
36
|
+
function u(e, n, r = null) {
|
|
37
|
+
let o = ++a;
|
|
38
|
+
if (e) {
|
|
39
|
+
d("dialtone-css-core", t.core, n), i = !0;
|
|
39
40
|
return;
|
|
40
41
|
}
|
|
41
|
-
if (
|
|
42
|
-
|
|
42
|
+
if (r) {
|
|
43
|
+
d("dialtone-css-core", r.core, n), i = !0;
|
|
43
44
|
return;
|
|
44
45
|
}
|
|
45
|
-
|
|
46
|
-
o ===
|
|
46
|
+
d("dialtone-css-core", "", n), import("./core-no-layers.js").then(({ default: e }) => {
|
|
47
|
+
o === a && (d("dialtone-css-core", e.core, n), i = !0);
|
|
47
48
|
}).catch((e) => {
|
|
48
|
-
o ===
|
|
49
|
+
o === a && console.error("[Dialtone] initDialtoneTheme: failed to load no-layers core tokens.", e);
|
|
49
50
|
});
|
|
50
51
|
}
|
|
51
|
-
function
|
|
52
|
+
function d(e, t, n, r = null) {
|
|
52
53
|
if (n?.querySelector("#" + e)) {
|
|
53
54
|
let r = n.querySelector("#" + e);
|
|
54
55
|
r.innerHTML = t;
|
|
@@ -59,10 +60,10 @@ function u(e, t, n, r = null) {
|
|
|
59
60
|
o && o.parentNode === a ? a.insertBefore(i, o) : a?.appendChild(i);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
|
-
function
|
|
63
|
+
function f(e, t) {
|
|
63
64
|
t?.querySelector("#" + e)?.remove();
|
|
64
65
|
}
|
|
65
|
-
function
|
|
66
|
+
function p(e, t = document.documentElement) {
|
|
66
67
|
if (e !== "light" && e !== "dark") {
|
|
67
68
|
console.warn(`Invalid mode: ${e}. Must be 'light' or 'dark'`);
|
|
68
69
|
return;
|
|
@@ -73,7 +74,7 @@ function f(e, t = document.documentElement) {
|
|
|
73
74
|
}
|
|
74
75
|
t?.setAttribute("data-dt-mode", e);
|
|
75
76
|
}
|
|
76
|
-
function
|
|
77
|
+
function m(e, t = document.documentElement) {
|
|
77
78
|
if (!e || typeof e != "object") throw TypeError("[Dialtone] setBaseBrand: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';");
|
|
78
79
|
if (!e.brand || typeof e.brand != "object") throw TypeError("[Dialtone] setBaseBrand: brandTheme.brand must be an object with {name, css} properties.");
|
|
79
80
|
if (typeof e.brand.name != "string" || !e.brand.name || typeof e.brand.css != "string") throw TypeError("[Dialtone] setBaseBrand: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.");
|
|
@@ -82,44 +83,48 @@ function p(e, t = document.documentElement) {
|
|
|
82
83
|
return;
|
|
83
84
|
}
|
|
84
85
|
let n = t?.shadowRoot ?? t;
|
|
85
|
-
|
|
86
|
+
d("dialtone-css-brand-base", e.brand.css, n), t?.setAttribute("data-dt-brand", e.brand.name), h(e, t), f("dialtone-css-brand", n), o && (o.brand = e.brand.name, o.material = b(e) ?? "sandstone");
|
|
86
87
|
}
|
|
87
|
-
function
|
|
88
|
-
let
|
|
89
|
-
if (
|
|
90
|
-
if (
|
|
91
|
-
|
|
88
|
+
function h(e, t) {
|
|
89
|
+
let n = e.material?.name;
|
|
90
|
+
if (n) {
|
|
91
|
+
if (r.has(n)) {
|
|
92
|
+
g(n, t);
|
|
92
93
|
return;
|
|
93
94
|
}
|
|
94
|
-
console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${
|
|
95
|
+
console.warn(`[Dialtone] setBaseBrand: brand '${e.brand.name}' declares unknown material '${n}'; falling back to sandstone.`), g("sandstone", t);
|
|
95
96
|
}
|
|
96
97
|
}
|
|
97
|
-
function
|
|
98
|
+
function g(t, n) {
|
|
99
|
+
let r = n?.shadowRoot ?? n, i = e[t];
|
|
100
|
+
i ? d("dialtone-css-material", i.css, r) : f("dialtone-css-material", r), n?.setAttribute("data-dt-material", t);
|
|
101
|
+
}
|
|
102
|
+
function _(e, t = document.documentElement) {
|
|
98
103
|
if (t instanceof ShadowRoot) {
|
|
99
104
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setContrast(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
100
105
|
return;
|
|
101
106
|
}
|
|
102
107
|
let n = t?.shadowRoot ?? t;
|
|
103
|
-
e && e.contrast ? (
|
|
108
|
+
e && e.contrast ? (d("dialtone-css-contrast", e.contrast.css, n), t?.setAttribute("data-dt-contrast", e.contrast.name)) : (f("dialtone-css-contrast", n), t?.setAttribute("data-dt-contrast", "default"));
|
|
104
109
|
}
|
|
105
|
-
function
|
|
110
|
+
function v(e, t = document.documentElement) {
|
|
106
111
|
if (e != null && typeof e != "string") throw TypeError("[Dialtone] setMaterial: expected a string material name or null.");
|
|
107
112
|
if (t instanceof ShadowRoot) {
|
|
108
113
|
console.warn("[Dialtone] You passed a ShadowRoot directly to setMaterial(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
109
114
|
return;
|
|
110
115
|
}
|
|
111
|
-
let
|
|
112
|
-
if (!
|
|
113
|
-
console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`),
|
|
116
|
+
let n = e || "sandstone";
|
|
117
|
+
if (!r.has(n)) {
|
|
118
|
+
console.warn(`[Dialtone] setMaterial: unknown material '${e}'; falling back to sandstone.`), g("sandstone", t);
|
|
114
119
|
return;
|
|
115
120
|
}
|
|
116
|
-
|
|
121
|
+
g(n, t);
|
|
117
122
|
}
|
|
118
|
-
function
|
|
119
|
-
let { layers:
|
|
120
|
-
if (!
|
|
121
|
-
if (!
|
|
122
|
-
if (typeof
|
|
123
|
+
function y(e, n = "light", r = document.documentElement, i = {}) {
|
|
124
|
+
let { layers: a = !0, core: s = null } = i;
|
|
125
|
+
if (!e || typeof e != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme must be an object. Import a brand theme like: import Dp from '@dialpad/dialtone-tokens/themes/dp';");
|
|
126
|
+
if (!e.brand || typeof e.brand != "object") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand must be an object with {name, css} properties. Ensure you're importing a valid brand theme.");
|
|
127
|
+
if (typeof e.brand.name != "string" || !e.brand.name || typeof e.brand.css != "string") throw TypeError("[Dialtone] initDialtoneTheme: brandTheme.brand.name must be a non-empty string and brandTheme.brand.css must be a string.");
|
|
123
128
|
if (n !== "light" && n !== "dark") throw TypeError(`[Dialtone] initDialtoneTheme: mode must be 'light' or 'dark', got '${n}'.`);
|
|
124
129
|
if (!r || typeof r != "object") throw TypeError("[Dialtone] initDialtoneTheme: rootNode must be an HTMLElement or host element with shadowRoot.");
|
|
125
130
|
if (r instanceof ShadowRoot) {
|
|
@@ -128,37 +133,37 @@ function _(t, n = "light", r = document.documentElement, i = {}) {
|
|
|
128
133
|
}
|
|
129
134
|
let c = r?.shadowRoot ?? r;
|
|
130
135
|
if (r === document.documentElement && document.querySelector("#dialtone-css-core") !== null) throw Error("[Dialtone] Cannot initialize theme on document.documentElement because theme styles already exist. You are likely in an embedded app/micro-frontend. You MUST pass your own container element as the rootNode parameter. Example: initDialtoneTheme(brandTheme, mode, myAppContainerElement)");
|
|
131
|
-
let
|
|
132
|
-
if (
|
|
133
|
-
if (
|
|
134
|
-
console.warn(`[Dialtone] Theme already initialized with brand '${
|
|
136
|
+
let l = o;
|
|
137
|
+
if (l) if (l.brand === e.brand.name && l.mode === n) {
|
|
138
|
+
if (l.layers === a) {
|
|
139
|
+
console.warn(`[Dialtone] Theme already initialized with brand '${e.brand.name}' and mode '${n}'. Re-applying the same theme may be unnecessary. If you need to switch themes dynamically, use setBaseBrand() or setMode() instead of calling initDialtoneTheme() again.`);
|
|
135
140
|
return;
|
|
136
141
|
}
|
|
137
|
-
console.warn(`[Dialtone] Theme already initialized with brand '${
|
|
142
|
+
console.warn(`[Dialtone] Theme already initialized with brand '${e.brand.name}' and mode '${n}' using layers=${l.layers}. Reloading core tokens with layers=${a}.`), u(a, c, s), o.layers = a;
|
|
138
143
|
return;
|
|
139
144
|
} else {
|
|
140
|
-
console.warn(`[Dialtone] Theme already initialized. Previous: brand='${
|
|
145
|
+
console.warn(`[Dialtone] Theme already initialized. Previous: brand='${l.brand}', mode='${l.mode}'. New: brand='${e.brand.name}', mode='${n}'. Re-initializing with different parameters. Consider using setBaseBrand()/setMode() for dynamic switching.`);
|
|
141
146
|
return;
|
|
142
147
|
}
|
|
143
|
-
|
|
144
|
-
brand:
|
|
148
|
+
u(a, c, s), d("dialtone-css-base-colors", t.baseColors, c), p(n, r), r?.setAttribute("data-dt-contrast", "default"), r?.setAttribute("data-dt-material", "sandstone"), m(e, r), o = {
|
|
149
|
+
brand: e.brand.name,
|
|
145
150
|
mode: n,
|
|
146
151
|
contrast: "default",
|
|
147
|
-
material:
|
|
148
|
-
layers:
|
|
152
|
+
material: b(e) ?? "sandstone",
|
|
153
|
+
layers: a
|
|
149
154
|
};
|
|
150
155
|
}
|
|
151
|
-
function
|
|
156
|
+
function b(e) {
|
|
152
157
|
return e?.material?.name ?? null;
|
|
153
158
|
}
|
|
154
|
-
var
|
|
155
|
-
function
|
|
159
|
+
var x = (e) => b(e) !== null, S = s, C = w;
|
|
160
|
+
function w(e = document.documentElement) {
|
|
156
161
|
if (e instanceof ShadowRoot) {
|
|
157
162
|
console.warn("[Dialtone] You passed a ShadowRoot directly to resetBrand(). Please pass the host element instead. The function will access shadowRoot automatically.");
|
|
158
163
|
return;
|
|
159
164
|
}
|
|
160
165
|
let t = e?.shadowRoot ?? e;
|
|
161
|
-
|
|
166
|
+
o = null, i = !1, a++, f("dialtone-css-core", t), f("dialtone-css-base-colors", t), f("dialtone-css-material", t), f("dialtone-css-brand-base", t), f("dialtone-css-brand", t), f("dialtone-css-contrast", t), e?.removeAttribute("data-dt-mode"), e?.removeAttribute("data-dt-brand"), e?.removeAttribute("data-dt-contrast"), e?.removeAttribute("data-dt-material");
|
|
162
167
|
}
|
|
163
168
|
//#endregion
|
|
164
|
-
export {
|
|
169
|
+
export { n as VALID_MATERIALS, b as getBrandMaterial, x as hasBrandMaterialLock, y as initDialtoneTheme, w as resetBrand, C as resetTheme, m as setBaseBrand, s as setBrand, _ as setContrast, v as setMaterial, p as setMode, S as setTheme };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require(`./chunks/chunk-qndmjIgv.js`);let t=require(`@dialpad/dialtone-tokens/layered/material/tokens-amethyst.css?inline`);t=e.t(t);let n=require(`@dialpad/dialtone-tokens/layered/material/tokens-graphite.css?inline`);n=e.t(n);let r=require(`@dialpad/dialtone-tokens/layered/material/tokens-iron.css?inline`);r=e.t(r);let i=require(`@dialpad/dialtone-tokens/layered/material/tokens-jade.css?inline`);i=e.t(i);let a=require(`@dialpad/dialtone-tokens/layered/material/tokens-steel.css?inline`);a=e.t(a);var o={amethyst:{name:`amethyst`,css:t.default},graphite:{name:`graphite`,css:n.default},iron:{name:`iron`,css:r.default},jade:{name:`jade`,css:i.default},steel:{name:`steel`,css:a.default}};module.exports=o;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import e from "@dialpad/dialtone-tokens/layered/material/tokens-amethyst.css?inline";
|
|
2
|
+
import t from "@dialpad/dialtone-tokens/layered/material/tokens-graphite.css?inline";
|
|
3
|
+
import n from "@dialpad/dialtone-tokens/layered/material/tokens-iron.css?inline";
|
|
4
|
+
import r from "@dialpad/dialtone-tokens/layered/material/tokens-jade.css?inline";
|
|
5
|
+
import i from "@dialpad/dialtone-tokens/layered/material/tokens-steel.css?inline";
|
|
6
|
+
//#region themes/materials.js
|
|
7
|
+
var a = {
|
|
8
|
+
amethyst: {
|
|
9
|
+
name: "amethyst",
|
|
10
|
+
css: e
|
|
11
|
+
},
|
|
12
|
+
graphite: {
|
|
13
|
+
name: "graphite",
|
|
14
|
+
css: t
|
|
15
|
+
},
|
|
16
|
+
iron: {
|
|
17
|
+
name: "iron",
|
|
18
|
+
css: n
|
|
19
|
+
},
|
|
20
|
+
jade: {
|
|
21
|
+
name: "jade",
|
|
22
|
+
css: r
|
|
23
|
+
},
|
|
24
|
+
steel: {
|
|
25
|
+
name: "steel",
|
|
26
|
+
css: i
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
export { a as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../themes/config.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../themes/config.js"],"names":[],"mappings":"AAgHA,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AAkLD,8BAhBW,IAAI,aACJ,aAAa,QA+BvB;AAyBD,yCAjBW,UAAU,aACV,aAAa,QA6DvB;AAmED,2CArBW,aAAa,GAAC,IAAI,aAClB,aAAa,QAsCvB;AAyBD,kCAPW,YAAY,GAAC,IAAI,aACjB,aAAa,QA+BvB;AAkED,8CAxDW,UAAU,SACV,IAAI,aACJ,aAAa,YAErB;IAA0B,MAAM;IASJ,IAAI;CAGhC,QAmKF;AAMD,6CAHW,UAAU,GACR,MAAM,GAAC,IAAI,CAIvB;AAuCD,yDAgCC;AAtxBD,gDAA6G;AAqtBtG,iDAHI,UAAU,GACR,OAAO,CAEqE;AAtnBzF,gCAzBW,MAAM,GAAC,IAAI,aACX,aAAa,kBACb,MAAM,GAAC,IAAI,QAmDrB;AA2nBD,yDAgCC;mBAlwBY,OAAO,GAAC,MAAM;4BAKd,WAAW,GAAC,UAAU;;UAOrB,MAAM;gBACN,MAAM;;;WAOjB;QAAyB,IAAI,EAAlB,MAAM;QACQ,GAAG,EAAjB,MAAM;KACjB;;;;;;cAQA;QAA4B,IAAI,EAArB,MAAM;QACW,GAAG,EAApB,MAAM;KACnB;;2BAGY,WAAW,GAAC,OAAO,GAAC,UAAU,GAAC,MAAM,GAAC,UAAU,GAAC,MAAM"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
namespace amethyst {
|
|
3
|
+
export let name: string;
|
|
4
|
+
export { MaterialAmethyst as css };
|
|
5
|
+
}
|
|
6
|
+
namespace graphite {
|
|
7
|
+
let name_1: string;
|
|
8
|
+
export { name_1 as name };
|
|
9
|
+
export { MaterialGraphite as css };
|
|
10
|
+
}
|
|
11
|
+
namespace iron {
|
|
12
|
+
let name_2: string;
|
|
13
|
+
export { name_2 as name };
|
|
14
|
+
export { MaterialIron as css };
|
|
15
|
+
}
|
|
16
|
+
namespace jade {
|
|
17
|
+
let name_3: string;
|
|
18
|
+
export { name_3 as name };
|
|
19
|
+
export { MaterialJade as css };
|
|
20
|
+
}
|
|
21
|
+
namespace steel {
|
|
22
|
+
let name_4: string;
|
|
23
|
+
export { name_4 as name };
|
|
24
|
+
export { MaterialSteel as css };
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export default _default;
|
|
28
|
+
//# sourceMappingURL=materials.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"materials.d.ts","sourceRoot":"","sources":["../../../themes/materials.js"],"names":[],"mappings":""}
|
|
@@ -2733,25 +2733,18 @@ var Bi = {
|
|
|
2733
2733
|
return {
|
|
2734
2734
|
...this.parent?.(),
|
|
2735
2735
|
toggleCodeBlock: (e = {}) => ({ state: t, chain: n, commands: r }) => {
|
|
2736
|
-
let i = t.schema.nodes[this.name], { $from: a } = t.selection;
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
return n().command(({ tr: n }) => {
|
|
2740
|
-
let a = r.map((n) => e.create({}, n ? [t.schema.text(n)] : []));
|
|
2741
|
-
return n.replaceWith(i, i + o.nodeSize, a), !0;
|
|
2742
|
-
}).run();
|
|
2743
|
-
}
|
|
2744
|
-
let { from: o, to: s } = t.selection, c = [];
|
|
2745
|
-
if (t.doc.nodesBetween(o, s, (e, t) => {
|
|
2746
|
-
if (e.isTextblock) return c.push({
|
|
2736
|
+
let i = t.schema.nodes[this.name], { $from: a, $to: o } = t.selection, s = [];
|
|
2737
|
+
return t.doc.nodesBetween(a.pos, o.pos, (e, t) => {
|
|
2738
|
+
if (e.isTextblock) return s.push({
|
|
2747
2739
|
node: e,
|
|
2748
2740
|
pos: t
|
|
2749
2741
|
}), !1;
|
|
2750
|
-
}),
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2742
|
+
}), s.length <= 1 ? r.toggleNode(this.name, "paragraph", e) : s.every(({ node: e }) => e.type === i) ? r.toggleNode(this.name, "paragraph") : n().setNode(this.name, e).command(({ tr: e }) => {
|
|
2743
|
+
for (let n = s.length - 1; n > 0; n--) {
|
|
2744
|
+
let r = e.mapping.map(s[n].pos), a = r - 1;
|
|
2745
|
+
e.doc.resolve(a).parent.type === i && e.replaceWith(a, r + 1, t.schema.text("\n"));
|
|
2746
|
+
}
|
|
2747
|
+
return !0;
|
|
2755
2748
|
}).run();
|
|
2756
2749
|
}
|
|
2757
2750
|
};
|
|
@@ -3080,4 +3073,4 @@ var Wi = /* @__PURE__ */ i(Vi, [["render", Ui]]);
|
|
|
3080
3073
|
//#endregion
|
|
3081
3074
|
export { Wi as t };
|
|
3082
3075
|
|
|
3083
|
-
//# sourceMappingURL=RichTextEditor-
|
|
3076
|
+
//# sourceMappingURL=RichTextEditor-CzMY0oVT.js.map
|