@foxy.io/elements 1.16.0 → 1.18.0-beta.2

package/dist/elements/public/CollectionPages/CollectionPages.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionPages.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/CollectionPages.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EAAuB,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,UAAU,EAAE,wCAAqC;AAC1D,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;;;;;GAQG;AACH,MAAM,OAAO,eAAoC,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAqEpF;QACE,KAAK,EAAE,CAAC;QAtDV,iJAAiJ;QACjJ,UAAK,GAA4B,EAAE,CAAC;QAEpC,qFAAqF;QACrF,SAAI,GAAG,EAAE,CAAC;QAEV,OAAE,GAAG,EAAE,CAAC;QAMA,YAAO,GAAG,EAAE,CAAC;QAIb,wBAAmB,GAAG,CAAC,GAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;QAErE,cAAS,GAAG,SAAS,CAC1B,OAAsE,CAAC,UAAU,CAAC;YACjF,QAAQ,EAAE;gBACR,eAAe,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE;oBAChC,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,OAAO,CAAC,EAAE;wBAClD,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;4BAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;oBACtE,CAAC,CAAC,CAAC;oBAEH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;oBAChF,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACrC,CAAC;gBAED,OAAO,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE;;oBACnB,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACjD,MAAM,YAAY,SAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAC,IAAI,CAAC,IAAI,mCAAI,GAAG,CAAC,KAAK,CAAC;oBAC7D,MAAM,QAAQ,GAAG,MAAM,IAAI,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;oBAExE,IAAI,CAAC,QAAQ,CAAC,EAAE;wBAAE,MAAM,QAAQ,CAAC;oBACjC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;oBAEnC,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAE5B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;wBACtC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;wBAC7B,IAAI,EAAE,IAAI;qBACX,CAAC,CAAC;oBAEH,IAAI,CAAC,aAAa,EAAE,CAAC;oBAErB,OAAO,IAAI,CAAC;gBACd,CAAC;aACF;SACF,CAAC,CACH,CAAC;QAIA,IAAI,CAAC,IAAI,GAAG,gCAAgC,CAAC;IAC/C,CAAC;IAvED,gBAAgB;IAChB,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;YACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;YACzC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE;YACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACrB,CAAC;IACJ,CAAC;IA4DD;;;;;;;;;;;OAWG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,IAAI,CAAC,KAAmC;QAC1C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;YACpC,MAAM,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YAEnD,IAAI,CAAC,YAAY,GAAG,IAAI,QAAQ,CAC9B,KAAK,EACL;aACK,KAAK;;;;;;;oDAOkC,KAAK;cAC3C,aAAa;;;;;;;cAOb,KAAK,KAAK,CACM,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,6CAA6C;IAC7C,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,IAAI,KAAK,CAAC,IAAY;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,2DAA2D;IAC3D,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,IAAI,KAAK,CAAC,IAAa;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,2FAA2F;IAC3F,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,MAAA,IAAI,CAAC,oBAAoB,+CAAzB,IAAI,EAA0B;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,kGAAkG;IAClG,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7C,CAAC;IAED,IAAI,MAAM,CAAC,IAAa;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,EAAE,CAAC,UAA0C;QAC3C,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAClD,CAAC;IAED,gBAAgB;IAChB,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;IAChB,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACpC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;YAC1B,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI;SAC5B,CAAC,CAAC,CAAC;QAEJ,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACxC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,+BAA+B,EAAE,CAAC,CAAC;SACvE;aAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC/C,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,8BAA8B,EAAE,CAAC,CAAC;SACrE;aAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE;YAC1D,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;SACxC;QAED,OAAO,IAAI,CAAA;;QAEP,MAAM,CACN,KAAK,EACL,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAChB,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;;YAClB,OAAO,IAAI,CAAC,YAAY,CAAC;gBACvB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,QAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,mCAAI,IAAI;gBACnC,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,IAAI;aACL,CAAC,CAAC;QACL,CAAC,CACF;QACC,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;gBAC3B,CAAC,CAAC,IAAI,CAAA;;6DAE6C,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;kCAC9D,IAAI,CAAC,IAAI,uBAAuB,IAAI,CAAC,EAAE;;aAE5D;gBACH,CAAC,CAAC,EAAE;YACN,CAAC,CAAC,IAAI,CAAA;;;WAGH;KACN,CAAC;IACJ,CAAC;IAED,gBAAgB;IAChB,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,gBAAgB;IAChB,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC5D,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,oBAAoB,+CAAzB,IAAI,EAA0B;IAChC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YAC3E,IAAI;gBACF,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;oBAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;iBACpD;qBAAM;oBACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;iBACtC;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,YAAY,MAAM,CAAC,WAAW,EAAE;oBACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;iBAC9D;qBAAM;oBACL,MAAM,GAAG,CAAC;iBACX;aACF;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS;aACX,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;aAC9D,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;aACpC,KAAK,EAAE,CAAC;IACb,CAAC;IAEO,kBAAkB,CAAC,KAAc;QACvC,IAAI,CAAC,CAAC,KAAK,YAAY,UAAU,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI;YAAE,OAAO;QACpE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;QAEtC,IAAI,MAAM,KAAK,KAAK;YAAE,OAAO;QAC7B,IAAI,GAAG,KAAK,+BAA+B;YAAE,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC/E,IAAI,GAAG,KAAK,8BAA8B;YAAE,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7E,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAEO,mBAAmB,CAAC,KAAiB;QAC3C,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACpE,IAAI,CAAC,aAAa,CAAC,EAAE;YAAE,OAAO;QAE9B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,OAAO,CAAC,KAAK,CACX,wBAAwB,IAAI,CAAC,SAAS,iBAAiB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAC1E,aAAa,EACb,uEAAuE,EACvE,EAAE,CACH,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,KAAK,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IAEO,aAAa,CAAC,KAAiB;QACrC,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAiB,CAAC,CAAC,CAAC;IACrF,CAAC;CACF","sourcesContent":["import { Context, Event, Page, PageRenderer } from './types';\nimport { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport { State, StateMachine, interpret } from 'xstate';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rumour } from '@foxy.io/sdk/core';\nimport { machine } from './machine';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { serveFromCache } from '../NucleonElement/serveFromCache';\nimport { spread } from '@open-wc/lit-helpers';\n\n/**\n * Renders an element for each page in a collection.\n *\n * @fires NucleonElement#update - Instance of `NucleonElement.UpdateEvent`. Dispatched on an element whenever it changes its state.\n * @fires NucleonElement#fetch - Instance of `NucleonElement.API.FetchEvent`. Emitted before each API request.\n *\n * @element foxy-collection-pages\n * @since 1.1.0\n */\nexport class CollectionPages<TPage extends Page> extends ConfigurableMixin(LitElement) {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      manual: { type: Boolean, reflect: true },\n      first: { type: String, noAccessor: true },\n      pages: { type: Array, noAccessor: true },\n      group: { type: String },\n      props: { type: Object },\n      lang: { type: String },\n      page: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the page element). */\n  props: Record<string, unknown> = {};\n\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang = '';\n\n  ns = '';\n\n  private __renderPage!: PageRenderer<TPage>;\n\n  private __page!: string | PageRenderer<TPage>;\n\n  private __group = '';\n\n  private __stopTrackingRumour!: () => void;\n\n  private __fetchEventHandler = (evt: unknown) => this.__handleFetchEvent(evt);\n\n  private __service = interpret(\n    (machine as unknown as StateMachine<Context<TPage>, any, Event<TPage>>).withConfig({\n      services: {\n        observeChildren: () => callback => {\n          const observer = new IntersectionObserver(entries => {\n            if (entries.some(entry => entry.isIntersecting)) callback('RESUME');\n          });\n\n          observer.observe(this.renderRoot.children[this.renderRoot.children.length - 1]);\n          return () => observer.disconnect();\n        },\n\n        sendGet: async ctx => {\n          const lastPage = ctx.pages[ctx.pages.length - 1];\n          const lastPageHref = lastPage?._links.next.href ?? ctx.first;\n          const response = await new NucleonElement.API(this).fetch(lastPageHref);\n\n          if (!response.ok) throw response;\n          const json = await response.json();\n\n          this.__stopTrackingRumour();\n\n          NucleonElement.Rumour(this.group).share({\n            source: json._links.self.href,\n            data: json,\n          });\n\n          this.__trackRumour();\n\n          return json;\n        },\n      },\n    })\n  );\n\n  constructor() {\n    super();\n    this.page = 'foxy-collection-page foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection pages.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `group` – same as `foxy-collection-pages[group]`;\n   * - `href` – collection page's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-pages[lang]`;\n   * - `item` – will contain `item-tag` when provided with a string value formatted as `page-tag item-tag`.\n   *\n   * Render function will receive `PageRenderer<TPage>` in the first argument.\n   * Uses `foxy-collection-page` by default.\n   */\n  get page(): string | PageRenderer<TPage> {\n    return this.__page;\n  }\n\n  set page(value: string | PageRenderer<TPage>) {\n    if (typeof value === 'string') {\n      const item = value.split(' ').pop();\n      const itemAttribute = item ? `item=\"${item}\"` : '';\n\n      this.__renderPage = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${value}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"$\\{ctx.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n            ${itemAttribute}\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .templates=\\${ctx.templates}\n            ...=\\${ctx.spread(ctx.props)}\n          >\n          </${value}>\\``\n      ) as PageRenderer<TPage>;\n    } else {\n      this.__renderPage = value;\n    }\n\n    this.__page = value;\n    this.requestUpdate();\n  }\n\n  /** URL of the first page in a collection. */\n  get first(): string {\n    return this.__service.state.context.first;\n  }\n\n  set first(data: string) {\n    this.__service.send({ type: 'SET_FIRST', data });\n  }\n\n  /** Array of all currently loaded pages in a collection. */\n  get pages(): TPage[] {\n    return this.__service.state.context.pages;\n  }\n\n  set pages(data: TPage[]) {\n    this.__service.send({ type: 'SET_PAGES', data });\n  }\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  get group(): string {\n    return this.__group;\n  }\n\n  set group(value: string) {\n    this.__group = value;\n    this.__stopTrackingRumour?.();\n    this.__trackRumour();\n  }\n\n  /** If false, will load pages on scroll. If true, will display a button triggering the process. */\n  get manual(): boolean {\n    return this.__service.state.context.manual;\n  }\n\n  set manual(data: boolean) {\n    this.__service.send({ type: 'SET_MANUAL', data });\n  }\n\n  /**\n   * Checks if this element is in the given state. Available states:\n   *\n   * - `busy` when loading a page;\n   * - `fail` when page load fails;\n   * - `idle` when not loading anything for one of the reasons below:\n   *   - `paused` if waiting for user to scroll further;\n   *     - `manual` when next page load will be triggered by clicking a button;\n   *     - `auto` when next page load will be triggered by scrolling to the observer target;\n   *   - `empty` if collection is empty;\n   *   - `end` if there are no more items in a collection.\n   *\n   * @example element.in({ idle: 'empty' })\n   */\n  in(stateValue: State<Context, Event>['value']): boolean {\n    return this.__service.state.matches(stateValue);\n  }\n\n  /** @readonly */\n  createRenderRoot(): CollectionPages<TPage> {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__fetchEventHandler);\n    this.__createService();\n    this.__trackRumour();\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    const items = this.pages.map(page => ({\n      key: page._links.self.href,\n      href: page._links.self.href,\n    }));\n\n    if (this.__service.state.matches('busy')) {\n      items.push({ key: 'stalled', href: 'foxy://collection-pages/stall' });\n    } else if (this.__service.state.matches('fail')) {\n      items.push({ key: 'failed', href: 'foxy://collection-pages/fail' });\n    } else if (this.__service.state.matches({ idle: 'empty' })) {\n      items.push({ key: 'empty', href: '' });\n    }\n\n    return html`\n      <!-- collection items -->\n      ${repeat(\n        items,\n        page => page.key,\n        (page, pageIndex) => {\n          return this.__renderPage({\n            disabledControls: this.disabledControls,\n            readonlyControls: this.readonlyControls,\n            hiddenControls: this.hiddenControls,\n            templates: this.templates,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            hidden: this.hidden,\n            spread: spread,\n            props: this.props,\n            group: this.group,\n            data: this.pages[pageIndex] ?? null,\n            href: page.href,\n            lang: this.lang,\n            ns: this.ns,\n            html,\n          });\n        }\n      )}\n      ${this.manual\n        ? this.in({ idle: 'paused' })\n          ? html`\n              <!-- manual trigger -->\n              <vaadin-button theme=\"small contrast\" @click=${() => this.__service.send('RESUME')}>\n                <foxy-i18n lang=${this.lang} key=\"load_more\" ns=${this.ns}></foxy-i18n>\n              </vaadin-button>\n            `\n          : ''\n        : html`\n            <!-- intersection observer target -->\n            <span></span>\n          `}\n    `;\n  }\n\n  /** @readonly */\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.dispatchEvent(new NucleonElement.UpdateEvent());\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__fetchEventHandler);\n    this.__service.stop();\n    this.__stopTrackingRumour?.();\n  }\n\n  private __trackRumour() {\n    this.__stopTrackingRumour = NucleonElement.Rumour(this.group).track(update => {\n      try {\n        if (this.pages.length === 0) {\n          update({ _links: { self: { href: this.first } } });\n        } else {\n          this.pages.map(page => update(page));\n        }\n      } catch (err) {\n        if (err instanceof Rumour.UpdateError) {\n          this.__service.send({ type: 'SET_FIRST', data: this.first });\n        } else {\n          throw err;\n        }\n      }\n    });\n  }\n\n  private __createService() {\n    this.__service\n      .onTransition(({ changed }) => changed && this.requestUpdate())\n      .onChange(() => this.requestUpdate())\n      .start();\n  }\n\n  private __handleFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-pages/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-pages/fail') return this.__failRequest(event);\n\n    this.__respondIfPossible(event);\n  }\n\n  private __respondIfPossible(event: FetchEvent) {\n    const cacheResponse = serveFromCache(event.request.url, this.pages);\n    if (!cacheResponse.ok) return;\n\n    event.respondWith(Promise.resolve(cacheResponse));\n    console.debug(\n      `%c@foxy.io/elements::${this.localName}\\n%c200%c GET ${event.request.url}`,\n      'color: gray',\n      `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`,\n      ''\n    );\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(this.__service.state.context.error as Response));\n  }\n}\n"]}
+{"version":3,"file":"CollectionPages.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/CollectionPages.ts"],"names":[],"mappings":"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","sourcesContent":["import { Context, Event, Page, PageRenderer } from './types';\nimport { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport { State, StateMachine, interpret } from 'xstate';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rumour } from '@foxy.io/sdk/core';\nimport { machine } from './machine';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { serveFromCache } from '../NucleonElement/serveFromCache';\nimport { spread } from '@open-wc/lit-helpers';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst Base = ConfigurableMixin(InferrableMixin(LitElement));\n\n/**\n * Renders an element for each page in a collection.\n *\n * @fires NucleonElement#update - Instance of `NucleonElement.UpdateEvent`. Dispatched on an element whenever it changes its state.\n * @fires NucleonElement#fetch - Instance of `NucleonElement.API.FetchEvent`. Emitted before each API request.\n *\n * @element foxy-collection-pages\n * @since 1.1.0\n */\nexport class CollectionPages<TPage extends Page> extends Base {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      manual: { type: Boolean, reflect: true },\n      first: { type: String, noAccessor: true },\n      pages: { type: Array, noAccessor: true },\n      group: { type: String },\n      props: { type: Object },\n      lang: { type: String },\n      page: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the page element). */\n  props: Record<string, unknown> = {};\n\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang = '';\n\n  ns = '';\n\n  private __renderPage!: PageRenderer<TPage>;\n\n  private __page!: string | PageRenderer<TPage>;\n\n  private __group = '';\n\n  private __stopTrackingRumour!: () => void;\n\n  private __fetchEventHandler = (evt: unknown) => this.__handleFetchEvent(evt);\n\n  private __service = interpret(\n    (machine as unknown as StateMachine<Context<TPage>, any, Event<TPage>>).withConfig({\n      services: {\n        observeChildren: () => callback => {\n          const observer = new IntersectionObserver(entries => {\n            if (entries.some(entry => entry.isIntersecting)) callback('RESUME');\n          });\n\n          observer.observe(this.renderRoot.children[this.renderRoot.children.length - 1]);\n          return () => observer.disconnect();\n        },\n\n        sendGet: async ctx => {\n          const lastPage = ctx.pages[ctx.pages.length - 1];\n          const lastPageHref = lastPage?._links.next.href ?? ctx.first;\n          const response = await new NucleonElement.API(this).fetch(lastPageHref);\n\n          if (!response.ok) throw response;\n          const json = await response.json();\n\n          this.__stopTrackingRumour();\n\n          NucleonElement.Rumour(this.group).share({\n            source: json._links.self.href,\n            data: json,\n          });\n\n          this.__trackRumour();\n\n          return json;\n        },\n      },\n    })\n  );\n\n  constructor() {\n    super();\n    this.page = 'foxy-collection-page foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection pages.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `group` – same as `foxy-collection-pages[group]`;\n   * - `href` – collection page's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-pages[lang]`;\n   * - `item` – will contain `item-tag` when provided with a string value formatted as `page-tag item-tag`.\n   *\n   * Render function will receive `PageRenderer<TPage>` in the first argument.\n   * Uses `foxy-collection-page` by default.\n   */\n  get page(): string | PageRenderer<TPage> {\n    return this.__page;\n  }\n\n  set page(value: string | PageRenderer<TPage>) {\n    if (typeof value === 'string') {\n      const item = value.split(' ').pop();\n      const itemAttribute = item ? `item=\"${item}\"` : '';\n\n      this.__renderPage = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${value}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"$\\{ctx.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n            ${itemAttribute}\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .templates=\\${ctx.templates}\n            ...=\\${ctx.spread(ctx.props)}\n          >\n          </${value}>\\``\n      ) as PageRenderer<TPage>;\n    } else {\n      this.__renderPage = value;\n    }\n\n    this.__page = value;\n    this.requestUpdate();\n  }\n\n  /** URL of the first page in a collection. */\n  get first(): string {\n    return this.__service.state.context.first;\n  }\n\n  set first(data: string) {\n    this.__service.send({ type: 'SET_FIRST', data });\n  }\n\n  /** Array of all currently loaded pages in a collection. */\n  get pages(): TPage[] {\n    return this.__service.state.context.pages;\n  }\n\n  set pages(data: TPage[]) {\n    this.__service.send({ type: 'SET_PAGES', data });\n  }\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  get group(): string {\n    return this.__group;\n  }\n\n  set group(value: string) {\n    this.__group = value;\n    this.__stopTrackingRumour?.();\n    this.__trackRumour();\n  }\n\n  /** If false, will load pages on scroll. If true, will display a button triggering the process. */\n  get manual(): boolean {\n    return this.__service.state.context.manual;\n  }\n\n  set manual(data: boolean) {\n    this.__service.send({ type: 'SET_MANUAL', data });\n  }\n\n  /**\n   * Checks if this element is in the given state. Available states:\n   *\n   * - `busy` when loading a page;\n   * - `fail` when page load fails;\n   * - `idle` when not loading anything for one of the reasons below:\n   *   - `paused` if waiting for user to scroll further;\n   *     - `manual` when next page load will be triggered by clicking a button;\n   *     - `auto` when next page load will be triggered by scrolling to the observer target;\n   *   - `empty` if collection is empty;\n   *   - `end` if there are no more items in a collection.\n   *\n   * @example element.in({ idle: 'empty' })\n   */\n  in(stateValue: State<Context, Event>['value']): boolean {\n    return this.__service.state.matches(stateValue);\n  }\n\n  /** @readonly */\n  createRenderRoot(): CollectionPages<TPage> {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__fetchEventHandler);\n    this.__createService();\n    this.__trackRumour();\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    const items = this.pages.map(page => ({\n      key: page._links.self.href,\n      href: page._links.self.href,\n    }));\n\n    if (this.__service.state.matches('busy')) {\n      items.push({ key: 'stalled', href: 'foxy://collection-pages/stall' });\n    } else if (this.__service.state.matches('fail')) {\n      items.push({ key: 'failed', href: 'foxy://collection-pages/fail' });\n    } else if (this.__service.state.matches({ idle: 'empty' })) {\n      items.push({ key: 'empty', href: '' });\n    }\n\n    return html`\n      <!-- collection items -->\n      ${repeat(\n        items,\n        page => page.key,\n        (page, pageIndex) => {\n          return this.__renderPage({\n            disabledControls: this.disabledControls,\n            readonlyControls: this.readonlyControls,\n            hiddenControls: this.hiddenControls,\n            templates: this.templates,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            hidden: this.hidden,\n            spread: spread,\n            props: this.props,\n            group: this.group,\n            data: this.pages[pageIndex] ?? null,\n            href: page.href,\n            lang: this.lang,\n            ns: this.ns,\n            html,\n          });\n        }\n      )}\n      ${this.manual\n        ? this.in({ idle: 'paused' })\n          ? html`\n              <!-- manual trigger -->\n              <vaadin-button theme=\"small contrast\" @click=${() => this.__service.send('RESUME')}>\n                <foxy-i18n lang=${this.lang} key=\"load_more\" ns=${this.ns}></foxy-i18n>\n              </vaadin-button>\n            `\n          : ''\n        : html`\n            <!-- intersection observer target -->\n            <span></span>\n          `}\n    `;\n  }\n\n  /** @readonly */\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.dispatchEvent(new NucleonElement.UpdateEvent());\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__fetchEventHandler);\n    this.__service.stop();\n    this.__stopTrackingRumour?.();\n  }\n\n  private __trackRumour() {\n    this.__stopTrackingRumour = NucleonElement.Rumour(this.group).track(update => {\n      try {\n        if (this.pages.length === 0) {\n          update({ _links: { self: { href: this.first } } });\n        } else {\n          this.pages.map(page => update(page));\n        }\n      } catch (err) {\n        if (err instanceof Rumour.UpdateError) {\n          this.__service.send({ type: 'SET_FIRST', data: this.first });\n        } else {\n          throw err;\n        }\n      }\n    });\n  }\n\n  private __createService() {\n    this.__service\n      .onTransition(({ changed }) => changed && this.requestUpdate())\n      .onChange(() => this.requestUpdate())\n      .start();\n  }\n\n  private __handleFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-pages/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-pages/fail') return this.__failRequest(event);\n\n    this.__respondIfPossible(event);\n  }\n\n  private __respondIfPossible(event: FetchEvent) {\n    const cacheResponse = serveFromCache(event.request.url, this.pages);\n    if (!cacheResponse.ok) return;\n\n    event.respondWith(Promise.resolve(cacheResponse));\n    console.debug(\n      `%c@foxy.io/elements::${this.localName}\\n%c200%c GET ${event.request.url}`,\n      'color: gray',\n      `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`,\n      ''\n    );\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(this.__service.state.context.error as Response));\n  }\n}\n"]}

package/dist/elements/public/CopyToClipboard/CopyToClipboard.d.ts

@@ -0,0 +1,22 @@
+import { CSSResult, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
+declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
+    inferredProperties: string[];
+} & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * A simple "click to copy" button that takes the size of the font
+ * your text is written in (considering that the font styles are applied to container).
+ *
+ * @element foxy-copy-to-clipboard
+ * @since 1.17.0
+ */
+export declare class CopyToClipboard extends Base {
+    static get properties(): PropertyDeclarations;
+    static get styles(): CSSResult;
+    /** Text to copy. */
+    text: string | null;
+    private __state;
+    render(): TemplateResult;
+}
+export {};

package/dist/elements/public/CopyToClipboard/CopyToClipboard.js

@@ -0,0 +1,121 @@
+import { LitElement, css, html, } from 'lit-element';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { InferrableMixin } from "../../../mixins/inferrable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+const Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), 'copy-to-clipboard'));
+/**
+ * A simple "click to copy" button that takes the size of the font
+ * your text is written in (considering that the font styles are applied to container).
+ *
+ * @element foxy-copy-to-clipboard
+ * @since 1.17.0
+ */
+export class CopyToClipboard extends Base {
+    constructor() {
+        super(...arguments);
+        /** Text to copy. */
+        this.text = null;
+        this.__state = 'idle';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            text: { type: String },
+            __state: { attribute: false },
+        };
+    }
+    static get styles() {
+        return css `button{
+  position:relative;
+  appearance:none;
+  background:none;
+  border:none;
+  border-radius:var(--lumo-border-radius-s);
+  color:inherit;
+  font-size:inherit;
+  padding:0;
+  width:1.5em;
+  height:1.5em;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+button::before{
+  position:absolute;
+  inset:0;
+  content:' ';
+  display:block;
+  background:currentColor;
+  opacity:0.08;
+  transition:opacity 0.15s ease;
+  border-radius:var(--lumo-border-radius-s);
+}
+
+button:focus{
+  outline:none;
+  box-shadow:0 0 0 2px currentColor;
+}
+
+button:disabled{
+  opacity:0.5;
+  cursor:default;
+}
+
+@media (hover: hover){
+  button:not(:disabled):hover{
+    cursor:pointer;
+  }
+
+  button:not(:disabled):hover::before{
+    opacity:0.16;
+  }
+}
+
+iron-icon{
+  --iron-icon-height:1em;
+  --iron-icon-width:1em;
+}
+    `;
+    }
+    render() {
+        let label = '';
+        let icon = '';
+        if (this.__state === 'busy') {
+            label = 'copying';
+            icon = 'icons:hourglass-empty';
+        }
+        else if (this.__state === 'fail') {
+            label = 'failed_to_copy';
+            icon = 'icons:error-outline';
+        }
+        else if (this.__state === 'done') {
+            label = 'done';
+            icon = 'icons:done';
+        }
+        else {
+            label = 'click_to_copy';
+            icon = 'icons:content-copy';
+        }
+        return html `
+      <button
+        title=${this.t(label)}
+        ?disabled=${this.disabled}
+        @click=${() => {
+            var _a;
+            if (this.__state === 'idle') {
+                this.__state = 'busy';
+                navigator.clipboard
+                    .writeText((_a = this.text) !== null && _a !== void 0 ? _a : '')
+                    .then(() => (this.__state = 'done'))
+                    .catch(() => (this.__state = 'fail'))
+                    .then(() => setTimeout(() => (this.__state = 'idle'), 2000));
+            }
+        }}
+      >
+        <iron-icon icon=${icon}></iron-icon>
+      </button>
+    `;
+    }
+}
+//# sourceMappingURL=CopyToClipboard.js.map

package/dist/elements/public/CopyToClipboard/CopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboard.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/CopyToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAGV,GAAG,EACH,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;AAEpG;;;;;;GAMG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAI;IAAzC;;QAiEE,oBAAoB;QACpB,SAAI,GAAkB,IAAI,CAAC;QAEnB,YAAO,GAAsC,MAAM,CAAC;IAwC9D,CAAC;IA3GC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDT,CAAC;IACJ,CAAC;IAOD,MAAM;QACJ,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,IAAI,GAAG,EAAE,CAAC;QAEd,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAC3B,KAAK,GAAG,SAAS,CAAC;YAClB,IAAI,GAAG,uBAAuB,CAAC;SAChC;aAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAClC,KAAK,GAAG,gBAAgB,CAAC;YACzB,IAAI,GAAG,qBAAqB,CAAC;SAC9B;aAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;YAClC,KAAK,GAAG,MAAM,CAAC;YACf,IAAI,GAAG,YAAY,CAAC;SACrB;aAAM;YACL,KAAK,GAAG,eAAe,CAAC;YACxB,IAAI,GAAG,oBAAoB,CAAC;SAC7B;QAED,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;oBACT,IAAI,CAAC,QAAQ;iBAChB,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE;gBAC3B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;gBAEtB,SAAS,CAAC,SAAS;qBAChB,SAAS,OAAC,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;qBAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;qBACnC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;qBACpC,IAAI,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;aAChE;QACH,CAAC;;0BAEiB,IAAI;;KAEzB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import {\n  CSSResult,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\n\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), 'copy-to-clipboard'));\n\n/**\n * A simple \"click to copy\" button that takes the size of the font\n * your text is written in (considering that the font styles are applied to container).\n *\n * @element foxy-copy-to-clipboard\n * @since 1.17.0\n */\nexport class CopyToClipboard extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      text: { type: String },\n      __state: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResult {\n    return css`\n      button {\n        position: relative;\n        appearance: none;\n        background: none;\n        border: none;\n        border-radius: var(--lumo-border-radius-s);\n        color: inherit;\n        font-size: inherit;\n        padding: 0;\n        width: 1.5em;\n        height: 1.5em;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      button::before {\n        position: absolute;\n        inset: 0;\n        content: ' ';\n        display: block;\n        background: currentColor;\n        opacity: 0.08;\n        transition: opacity 0.15s ease;\n        border-radius: var(--lumo-border-radius-s);\n      }\n\n      button:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px currentColor;\n      }\n\n      button:disabled {\n        opacity: 0.5;\n        cursor: default;\n      }\n\n      @media (hover: hover) {\n        button:not(:disabled):hover {\n          cursor: pointer;\n        }\n\n        button:not(:disabled):hover::before {\n          opacity: 0.16;\n        }\n      }\n\n      iron-icon {\n        --iron-icon-height: 1em;\n        --iron-icon-width: 1em;\n      }\n    `;\n  }\n\n  /** Text to copy. */\n  text: string | null = null;\n\n  private __state: 'idle' | 'busy' | 'fail' | 'done' = 'idle';\n\n  render(): TemplateResult {\n    let label = '';\n    let icon = '';\n\n    if (this.__state === 'busy') {\n      label = 'copying';\n      icon = 'icons:hourglass-empty';\n    } else if (this.__state === 'fail') {\n      label = 'failed_to_copy';\n      icon = 'icons:error-outline';\n    } else if (this.__state === 'done') {\n      label = 'done';\n      icon = 'icons:done';\n    } else {\n      label = 'click_to_copy';\n      icon = 'icons:content-copy';\n    }\n\n    return html`\n      <button\n        title=${this.t(label)}\n        ?disabled=${this.disabled}\n        @click=${() => {\n          if (this.__state === 'idle') {\n            this.__state = 'busy';\n\n            navigator.clipboard\n              .writeText(this.text ?? '')\n              .then(() => (this.__state = 'done'))\n              .catch(() => (this.__state = 'fail'))\n              .then(() => setTimeout(() => (this.__state = 'idle'), 2000));\n          }\n        }}\n      >\n        <iron-icon icon=${icon}></iron-icon>\n      </button>\n    `;\n  }\n}\n"]}

package/dist/elements/public/CopyToClipboard/index.d.ts

@@ -0,0 +1,5 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../I18n/index';
+import { CopyToClipboard } from './CopyToClipboard';
+export { CopyToClipboard };

package/dist/elements/public/CopyToClipboard/index.js

@@ -0,0 +1,7 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../I18n/index.js";
+import { CopyToClipboard } from "./CopyToClipboard.js";
+customElements.define('foxy-copy-to-clipboard', CopyToClipboard);
+export { CopyToClipboard };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/CopyToClipboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CopyToClipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../I18n/index';\n\nimport { CopyToClipboard } from './CopyToClipboard';\n\ncustomElements.define('foxy-copy-to-clipboard', CopyToClipboard);\n\nexport { CopyToClipboard };\n"]}

package/dist/elements/public/CouponDetailCard/CouponDetailCard.d.ts

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit-html';
+import { Data } from './types';
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Basic card displaying a coupon detail.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-coupon-detail-card
+ * @since 1.17.0
+ */
+export declare class CouponDetailCard extends Base<Data> {
+    private __currencyDisplay;
+    private __currency;
+    render(): TemplateResult;
+    protected _sendGet(): Promise<Data>;
+}
+export {};

package/dist/elements/public/CouponDetailCard/CouponDetailCard.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+const NS = 'coupon-detail-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Basic card displaying a coupon detail.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-coupon-detail-card
+ * @since 1.17.0
+ */
+export class CouponDetailCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.__currencyDisplay = '';
+        this.__currency = '';
+    }
+    render() {
+        return super.render({
+            title: data => html `${data.name} • ${data.code}`,
+            subtitle: data => {
+                let text;
+                try {
+                    text = Math.abs(data.amount_per).toLocaleString(this.lang || 'en', {
+                        maximumFractionDigits: 2,
+                        minimumFractionDigits: 2,
+                        currencyDisplay: this.__currencyDisplay,
+                        currency: this.__currency,
+                        style: 'currency',
+                    });
+                }
+                catch (_a) {
+                    text = '--';
+                }
+                return html `
+          <span class=${data.amount_per > 0 ? 'text-success' : 'text-error'}>${text}</span>
+        `;
+            },
+        });
+    }
+    async _sendGet() {
+        const discount = await super._sendGet();
+        const [transaction, store] = await Promise.all([
+            super._fetch(discount._links['fx:transaction'].href),
+            super._fetch(discount._links['fx:store'].href),
+        ]);
+        this.__currency = transaction.currency_code;
+        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
+        return discount;
+    }
+}
+//# sourceMappingURL=CouponDetailCard.js.map

package/dist/elements/public/CouponDetailCard/CouponDetailCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CouponDetailCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponDetailCard/CouponDetailCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAKhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAE7D,MAAM,EAAE,GAAG,oBAAoB,CAAC;AAChC,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,gBAAiB,SAAQ,IAAU;IAAhD;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA0C1B,CAAC;IAxCC,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,EAAE;YACrD,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,IAAI,IAAY,CAAC;gBAEjB,IAAI;oBACF,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;wBACjE,qBAAqB,EAAE,CAAC;wBACxB,qBAAqB,EAAE,CAAC;wBACxB,eAAe,EAAE,IAAI,CAAC,iBAAiB;wBACvC,QAAQ,EAAE,IAAI,CAAC,UAAU;wBACzB,KAAK,EAAE,UAAU;qBAClB,CAAC,CAAC;iBACJ;gBAAC,WAAM;oBACN,IAAI,GAAG,IAAI,CAAC;iBACb;gBAED,OAAO,IAAI,CAAA;wBACK,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI;SAC1E,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QACxC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACjE,KAAK,CAAC,MAAM,CAAQ,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACtD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\n\nconst NS = 'coupon-detail-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Basic card displaying a coupon detail.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-coupon-detail-card\n * @since 1.17.0\n */\nexport class CouponDetailCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name} &bull; ${data.code}`,\n      subtitle: data => {\n        let text: string;\n\n        try {\n          text = Math.abs(data.amount_per).toLocaleString(this.lang || 'en', {\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            currencyDisplay: this.__currencyDisplay,\n            currency: this.__currency,\n            style: 'currency',\n          });\n        } catch {\n          text = '--';\n        }\n\n        return html`\n          <span class=${data.amount_per > 0 ? 'text-success' : 'text-error'}>${text}</span>\n        `;\n      },\n    });\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const discount = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(discount._links['fx:transaction'].href),\n      super._fetch<Store>(discount._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return discount;\n  }\n}\n"]}

package/dist/elements/public/CouponDetailCard/index.d.ts

@@ -0,0 +1,5 @@
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { CouponDetailCard } from './CouponDetailCard';
+export { CouponDetailCard };

package/dist/elements/public/CouponDetailCard/index.js

@@ -0,0 +1,7 @@
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { CouponDetailCard } from "./CouponDetailCard.js";
+customElements.define('foxy-coupon-detail-card', CouponDetailCard);
+export { CouponDetailCard };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/CouponDetailCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponDetailCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,gBAAgB,EAAE,8BAA2B;AAEtD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { CouponDetailCard } from './CouponDetailCard';\n\ncustomElements.define('foxy-coupon-detail-card', CouponDetailCard);\n\nexport { CouponDetailCard };\n"]}

package/dist/elements/public/CouponDetailCard/types.d.ts

@@ -0,0 +1,3 @@
+import { Rels } from '@foxy.io/sdk/backend';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.CouponDetail>;

package/dist/elements/public/CouponDetailCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/public/CouponDetailCard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponDetailCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.CouponDetail>;\n"]}

package/dist/elements/public/CouponForm/CouponForm.js

@@ -62,20 +62,34 @@ export class CouponForm extends Base {
         this.__codesTableColumns = [
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="code" ns=${ctx.ns}></foxy-i18n>`,
-                cell: ctx => html `
-        <vaadin-button
-          theme="tertiary contrast"
-          class="p-0"
-          @click=${(evt) => {
-                    const dialog = this.renderRoot.querySelector('#code-dialog');
-                    const button = evt.currentTarget;
-                    dialog.href = ctx.data._links.self.href;
-                    dialog.show(button);
-                }}
-        >
-          <span class="font-tnum">${ctx.data.code}</span>
-        </vaadin-button>
-      `,
+                cell: ctx => {
+                    const isDisabled = !this.in('idle') || this.disabledSelector.matches('codes', true);
+                    return html `
+          <div class="flex items-center gap-xs">
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              class="p-0"
+              ?disabled=${isDisabled}
+              @click=${(evt) => {
+                        const dialog = this.renderRoot.querySelector('#code-dialog');
+                        const button = evt.currentTarget;
+                        dialog.href = ctx.data._links.self.href;
+                        dialog.show(button);
+                    }}
+            >
+              <span class="font-tnum">${ctx.data.code}</span>
+            </vaadin-button>
+
+            <foxy-copy-to-clipboard
+              ?disabled=${isDisabled}
+              text=${ctx.data.code}
+              lang=${ctx.lang}
+              ns="${ctx.ns} copy-to-clipboard"
+            >
+            </foxy-copy-to-clipboard>
+          </div>
+        `;
+                },
             },
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="date_created" ns=${ctx.ns}></foxy-i18n>`,
@@ -121,6 +135,7 @@ export class CouponForm extends Base {
             'iron-dropdown': customElements.get('iron-dropdown'),
             'iron-icon': customElements.get('iron-icon'),
             'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-copy-to-clipboard': customElements.get('foxy-copy-to-clipboard'),
             'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
             'foxy-query-builder': customElements.get('foxy-query-builder'),
             'foxy-form-dialog': customElements.get('foxy-form-dialog'),
@@ -556,7 +571,7 @@ export class CouponForm extends Base {
         const urlParameter = `discount_${type}=${encodeURIComponent(`${name}{${details}}`)}`;
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
         return html `
-      <div data-testid="rules:url" class="text-xs flex space-x-xs leading-m">
+      <div data-testid="rules:url" class="text-xs flex space-x-xs">
         <span
           class=${classMap({
             'flex-shrink-0 transition-colors': true,
@@ -569,7 +584,7 @@ export class CouponForm extends Base {
 
         <code
           class=${classMap({
-            'bg-contrast-5 transition-colors monospace truncate rounded px-xs': true,
+            'bg-contrast-5 transition-colors font-lumo truncate rounded px-xs': true,
             'text-secondary': !isDisabled,
             'text-disabled': isDisabled,
         })}
@@ -577,27 +592,14 @@ export class CouponForm extends Base {
           ${urlParameter}
         </code>
 
-        <button
-          data-testclass="interactive"
+        <foxy-copy-to-clipboard
           data-testid="rules:url:copy"
-          class=${classMap({
-            'flex-shrink-0 transition-colors font-medium rounded px-xs': true,
-            'ring-primary-50 bg-primary-10 text-primary': !isDisabled,
-            'text-disabled bg-contrast-5': isDisabled,
-            'focus-outline-none focus-ring-2': !isDisabled,
-            'hover-bg-primary hover-text-primary-contrast': !isDisabled,
-        })}
+          text=${urlParameter}
+          lang=${this.lang}
+          ns="${this.ns} copy-to-clipboard"
           ?disabled=${isDisabled}
-          @click=${({ currentTarget }) => {
-            navigator.clipboard
-                .writeText(urlParameter)
-                .then(() => (currentTarget.textContent = this.t('copied')))
-                .catch(() => (currentTarget.textContent = this.t('error')))
-                .then(() => setTimeout(() => (currentTarget.textContent = this.t('copy')), 2000));
-        }}
         >
-          ${this.t('copy')}
-        </button>
+        </foxy-copy-to-clipboard>
       </div>
     `;
     }