@ixfx/components 0.6.2 → 0.7.1

package/dist/defaults-BCiDhZbF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaults-BCiDhZbF.js","names":[],"sources":["../src/icons/registry.ts","../src/icons/defaults.ts"],"sourcesContent":["const _registry = new Map<string, string>();\n\nexport const iconBus = new EventTarget();\n\nexport type IconChangedDetail = { readonly name: string };\nexport type IconChangedEvent = CustomEvent<IconChangedDetail>;\n\nexport function registerIcon(name: string, svg: string): void {\n  _registry.set(name, svg);\n  iconBus.dispatchEvent(new CustomEvent<IconChangedDetail>(`ixfx-icon-change`, { detail: { name } }));\n}\n\nexport function getIcon(name: string): string | undefined {\n  return _registry.get(name);\n}\n\nexport function hasIcon(name: string): boolean {\n  return _registry.has(name);\n}\n\n/** Converts an SVG string to a CSS data-URI value, e.g. for use as a mask-image. */\nexport function svgToDataUri(svg: string): string {\n  return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n}\n","import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Error / warning icon. Useful for error notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_ERROR = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>`;\n\n/**\n * Info icon. Useful for info notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_INFO = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>`;\n\n/**\n * Warning icon. Useful for warning notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_WARNING = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\n/**\n * Folder with up arrow. Angled line style for navigating up one level.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_FOLDER_UP = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 4L4 12h5v8h6v-8h5L12 4z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n  registerIcon(`error`, ICON_ERROR);\n  registerIcon(`folder-up`, ICON_FOLDER_UP);\n  registerIcon(`info`, ICON_INFO);\n  registerIcon(`warning`, ICON_WARNING);\n}\n"],"mappings":";AAAA,MAAM,4BAAY,IAAI,IAAoB;AAE1C,MAAa,UAAU,IAAI,YAAY;AAKvC,SAAgB,aAAa,MAAc,KAAmB;CAC5D,UAAU,IAAI,MAAM,GAAG;CACvB,QAAQ,cAAc,IAAI,YAA+B,oBAAoB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AACpG;AAEA,SAAgB,QAAQ,MAAkC;CACxD,OAAO,UAAU,IAAI,IAAI;AAC3B;AAEA,SAAgB,QAAQ,MAAuB;CAC7C,OAAO,UAAU,IAAI,IAAI;AAC3B;;AAGA,SAAgB,aAAa,KAAqB;CAChD,OAAO,2BAA2B,mBAAmB,GAAG,EAAE;AAC5D;;;;;;;ACjBA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,YAAY;;;;;AAMzB,MAAa,eAAe;;;;;AAM5B,MAAa,qBAAqB;;;;;AAMlC,MAAa,iBAAiB;AAE9B,SAAgB,mBAAyB;CACvC,aAAa,gBAAgB,iBAAiB;CAC9C,aAAa,iBAAiB,kBAAkB;CAChD,aAAa,eAAe,gBAAgB;CAC5C,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,aAAa,cAAc;CACxC,aAAa,QAAQ,SAAS;CAC9B,aAAa,WAAW,YAAY;AACtC"}

package/dist/editable-label.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editable-label.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;KAoCY;KACA;KACA;KAEA;WACD;;KAEC,2BAA2B,YAAY;cAGtC,sBAAsB;EACJ,MAAM;EACmB,WAAW;EACpC;EACe;EAChC;;EAG6B;;;;;;;;EASM,kBAAkB;;EAGV;;EAGG;;EAG1B,aAAa;;EAGb,aAAa;YAE1B;gBAEL,cAAc;;YAKlB;EAED;EAMA;YAQC;YACA;YACA;YACA;YAEA;UAOF;UAWA;YAOE;YAUA;;YAUA;YAWA;YAMA;YAMA;YAKA,iBAAkB,GAAG;YAgBrB,qBAAsB,GAAG;YAQzB;YAeA;YAMA;YAsBA;YAMA;YAcA;YAoBA,gBAAgB;UASlB;EAWC,wBAAM;EAgBN,QAAQ,SAAS;SAcV,QAAQ;;QA8FlB;YACI;IACR,uBAAuB"}

package/dist/icon-DpA9x2Ve.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-DpA9x2Ve.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;;;;;;;;;;;;cAoBa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAQvD;EAKA;YAKU,iBAAM,wBAAA;YAgBN,QAAQ,SAAS;SAWpB,sBAAM;;QAsChB;YACI;IACR,aAAa"}

package/dist/icons-Bm2ByQ3s.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons-Bm2ByQ3s.js","names":["#onIconChange","customElement"],"sources":["../src/icons/icon.ts","../src/icons/index.ts"],"sourcesContent":["import type { IconChangedEvent } from './registry.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { getIcon, iconBus } from './registry.js';\n\n/**\n * Renders an icon from the icon registry by name.\n *\n * @example\n * ```html\n * <ixfx-icon name=\"chevron-down\"></ixfx-icon>\n * <ixfx-icon name=\"close\" size=\"32\" label=\"Close dialog\"></ixfx-icon>\n * ```\n *\n * Use `registerIcon(name, svgString)` to add or override icons.\n */\n@customElement(`ixfx-icon`)\nexport class IxfxIconElement extends LitElement {\n  @property() name = ``;\n  @property({ type: Number }) size: number | undefined;\n  @property() label = ``;\n  @property({ type: Boolean, attribute: `prominence` }) prominence = false;\n  @property({ type: String, attribute: `rotate`, reflect: true }) rotate = ``;\n\n  #onIconChange = (e: Event): void => {\n    if ((e as IconChangedEvent).detail.name === this.name) {\n      this.requestUpdate();\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    iconBus.addEventListener(`ixfx-icon-change`, this.#onIconChange);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    iconBus.removeEventListener(`ixfx-icon-change`, this.#onIconChange);\n  }\n\n  protected override render() {\n    const svg = getIcon(this.name);\n    if (!svg)\n      return nothing;\n\n    const hasLabel = this.label.length > 0;\n\n    return html`\n      <span\n        class=\"icon-wrapper\"\n        aria-hidden=${hasLabel ? nothing : `true`}\n        aria-label=${hasLabel ? this.label : nothing}\n      >${unsafeHTML(svg)}</span>\n    `;\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`rotate`)) {\n      if (this.rotate?.length > 0) {\n        this.style.setProperty(`--rotate`, this.rotate);\n      } else {\n        this.style.removeProperty(`--rotate`);\n      }\n    }\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 1em;\n      height: 1em;\n      opacity: var(--opacity, 1);\n    }\n\n    :host([prominence]) {\n      opacity: var(--prominence-idle-opacity, 1);\n    }\n\n    :host([prominence]:hover) {\n      opacity: var(--prominence-tickled-opacity, 1);\n    }\n\n    :host([prominence][disabled]) {\n      opacity: var(--prominence-disabled-opacity, 0.5);\n    }\n\n    .icon-wrapper {\n      display: contents;\n    }\n\n    :host svg {\n      width: 100%;\n      height: 100%;\n      transition: transform var(--transition, 0.15s ease-out);\n    }\n\n    :host([rotate]) svg {\n      transform: rotate(var(--rotate));\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-icon': IxfxIconElement;\n  }\n}\n","import { registerDefaults } from './defaults.js';\n\nexport { ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE } from './defaults.js';\nexport { IxfxIconElement } from './icon.js';\nexport { getIcon, hasIcon, iconBus, registerIcon, svgToDataUri } from './registry.js';\nexport type { IconChangedDetail, IconChangedEvent } from './registry.js';\n\nregisterDefaults();\n"],"mappings":";;;;;;;AAoBO,IAAM,kBAAN,MAAM,wBAAwB,WAAW;;;EAC3B,KAAA,OAAA;EAEC,KAAA,QAAA;EAC+C,KAAA,aAAA;EACM,KAAA,SAAA;EAExD,KAAA,iBAAA,MAAmB;GAClC,IAAK,EAAuB,OAAO,SAAS,KAAK,MAC/C,KAAK,cAAc;EAEvB;;CAJA;CAMA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,QAAQ,iBAAiB,oBAAoB,KAAKA,aAAa;CACjE;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,QAAQ,oBAAoB,oBAAoB,KAAKA,aAAa;CACpE;CAEA,SAA4B;EAC1B,MAAM,MAAM,QAAQ,KAAK,IAAI;EAC7B,IAAI,CAAC,KACH,OAAO;EAET,MAAM,WAAW,KAAK,MAAM,SAAS;EAErC,OAAO,IAAI;;;sBAGO,WAAW,UAAU,OAAO;qBAC7B,WAAW,KAAK,QAAQ,QAAQ;SAC5C,WAAW,GAAG,EAAE;;CAEvB;CAEA,QAA2B,SAAqC;EAC9D,MAAM,QAAQ,OAAO;EACrB,IAAI,QAAQ,IAAI,QAAQ,GAAG;GACzB,IAAI,KAAK,QAAQ,SAAS,GACxB,KAAK,MAAM,YAAY,YAAY,KAAK,MAAM;QAE9C,KAAK,MAAM,eAAe,UAAU;EAExC;CACF;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmC5C;;AACH;AArFG,WAAA,CAAA,SAAS,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;AACT,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AACT,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,gBAAA,WAAA,cAAA,KAAA,CAAA;AACnD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAN/DC,kBAAAA,WAAAA,CAAAA,kBAAc,WAAW,CAAA,GAAA,eAAA;;;ACZ1B,iBAAiB"}

package/dist/index-BtGFYfaK.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BtGFYfaK.d.ts","names":[],"sources":["../src/icons/defaults.ts","../src/icons/registry.ts"],"mappings":";;;;;;cAMa;;;;;cAMA;;;;;cAMA;;;;;cAMA;;;cCtBA,SAAO;KAER;WAA+B;;KAC/B,mBAAmB,YAAY;iBAE3B,aAAa,cAAc;iBAK3B,QAAQ;iBAIR,QAAQ;;iBAKR,aAAa"}