From 95f2877d31c4ffa5ec310dfa85b93deb1e065860 Mon Sep 17 00:00:00 2001 From: Akash Date: Sat, 4 Apr 2020 10:04:21 +0530 Subject: [PATCH] docs: defineCustomElements update --- .../app-components-charts.md | 2 +- .../app-components-color.md | 54 ++++--- .../app-components-drr/app-components-drr.md | 2 +- .../app-components-highlight-code.md | 2 +- .../app-components-inline-editor.md | 134 ++++++++---------- .../app-components-lazy-img.md | 2 +- .../app-components-qrcode.md | 54 ++++--- .../app-components-social.md | 26 ++-- .../app-components-youtube.md | 26 ++-- .../app-installation/app-installation.md | 4 +- .../app-slide-aspect-ratio.md | 2 +- .../app-slide-author/app-slide-author.md | 2 +- .../app-slide-big-img/app-slide-big-img.md | 2 +- .../slides/app-slide-chart/app-slide-chart.md | 2 +- .../slides/app-slide-code/app-slide-code.md | 2 +- .../app-slide-content/app-slide-content.md | 2 +- .../app-slide-countdown.md | 22 +-- .../slides/app-slide-gif/app-slide-gif.md | 2 +- .../slides/app-slide-poll/app-slide-poll.md | 2 +- .../app-slide-qrcode/app-slide-qrcode.md | 2 +- .../slides/app-slide-split/app-slide-split.md | 2 +- .../slides/app-slide-title/app-slide-title.md | 2 +- .../slides/app-slide-video/app-slide-video.md | 2 +- .../app-slide-youtube/app-slide-youtube.md | 2 +- .../app-components-charts.tsx | 2 +- .../app-components-color.tsx | 2 +- .../app-components-drr/app-components-drr.tsx | 2 +- .../app-components-highlight-code.tsx | 2 +- .../app-components-inline-editor.tsx | 2 +- .../app-components-lazy-img.tsx | 2 +- .../app-components-qrcode.tsx | 2 +- .../app-components-social.tsx | 2 +- .../app-components-youtube.tsx | 2 +- .../app-installation/app-installation.tsx | 2 +- .../app-slide-aspect-ratio.tsx | 2 +- .../app-slide-author/app-slide-author.tsx | 2 +- .../app-slide-big-img/app-slide-big-img.tsx | 2 +- .../app-slide-chart/app-slide-chart.tsx | 2 +- .../slides/app-slide-code/app-slide-code.tsx | 2 +- .../app-slide-content/app-slide-content.tsx | 2 +- .../app-slide-countdown.tsx | 2 +- .../slides/app-slide-gif/app-slide-gif.tsx | 2 +- .../slides/app-slide-poll/app-slide-poll.tsx | 2 +- .../app-slide-qrcode/app-slide-qrcode.tsx | 2 +- .../app-slide-split/app-slide-split.tsx | 2 +- .../app-slide-title/app-slide-title.tsx | 2 +- .../app-slide-video/app-slide-video.tsx | 2 +- .../app-slide-youtube/app-slide-youtube.tsx | 2 +- 48 files changed, 190 insertions(+), 212 deletions(-) diff --git a/docs/docs/components/app-components-charts/app-components-charts.md b/docs/docs/components/app-components-charts/app-components-charts.md index c403d131e..f1760ce0a 100644 --- a/docs/docs/components/app-components-charts/app-components-charts.md +++ b/docs/docs/components/app-components-charts/app-components-charts.md @@ -144,7 +144,7 @@ import '@deckdeckgo/charts'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/charts/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage diff --git a/docs/docs/components/app-components-color/app-components-color.md b/docs/docs/components/app-components-color/app-components-color.md index 2bb51312a..1f2367cae 100644 --- a/docs/docs/components/app-components-color/app-components-color.md +++ b/docs/docs/components/app-components-color/app-components-color.md @@ -7,10 +7,7 @@ It is fully configurable in terms of colors, you could define the set of colors ## Table of contents - [Showcase](#app-components-color-showcase) -- [Installation](#app-components-color-installation) - - [Using from a CDN](#app-components-color-from-a-cdn) - - [Install from NPM](#app-components-color-from-npm) - - [Framework integration](#app-components-color-framework-integration) +- [Installation](#app-components-color-installation) - [Using from a CDN](#app-components-color-from-a-cdn) - [Install from NPM](#app-components-color-from-npm) - [Framework integration](#app-components-color-framework-integration) - [Usage](#app-components-color-usage) - [Slots](#app-components-color-slots) - [Attributes](#app-components-color-attributes) @@ -38,6 +35,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy ``` + ### Install from NPM Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command: @@ -62,7 +60,7 @@ import '@deckdeckgo/color'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/color/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage @@ -77,19 +75,19 @@ The "Color Picker" Web Component could be integrated using the tag `` | In case the platform color picker would be use by the user, the change will be triggered multiple times, as long as the user change its value in the platform picker. For the definition of the type of the event, see above description of `DeckdeckgoPaletteColor`. -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/components/app-components-drr/app-components-drr.md b/docs/docs/components/app-components-drr/app-components-drr.md index 52b7bae3d..898850d17 100644 --- a/docs/docs/components/app-components-drr/app-components-drr.md +++ b/docs/docs/components/app-components-drr/app-components-drr.md @@ -62,7 +62,7 @@ import '@deckdeckgo/drag-resize-rotate'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/drag-resize-rotate/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage diff --git a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md index b0847b2e5..9fd3b0f35 100644 --- a/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md +++ b/docs/docs/components/app-components-highlight-code/app-components-highlight-code.md @@ -90,7 +90,7 @@ import '@deckdeckgo/highlight-code'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/highlight-code/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage diff --git a/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md b/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md index 437044e7f..7c5684dd0 100644 --- a/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md +++ b/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md @@ -5,19 +5,9 @@ The "WYSIWYG inline editor" component is an extra component which will be use in ## Table of contents - [Showcase](#app-components-inline-editor-showcase) - - [Video](#app-components-inline-editor-video) -- [Installation](#app-components-inline-editor-installation) - - [Using from a CDN](#app-components-inline-editor-from-a-cdn) - - [Install from NPM](#app-components-inline-editor-from-npm) - - [Framework integration](#app-components-inline-editor-framework-integration) -- [Usage](#app-components-inline-editor-usage) - - [Properties](#app-components-inline-editor-properties) - - [Custom actions slots](#app-components-inline-editor-custom-actions-slots) - - [Styling](#app-components-inline-editor-styling) - - [Events](#app-components-inline-editor-events) - - [Methods](#app-components-inline-editor-methods) - - [Examples](#app-components-inline-editor-examples) - + - [Video](#app-components-inline-editor-video) +- [Installation](#app-components-inline-editor-installation) - [Using from a CDN](#app-components-inline-editor-from-a-cdn) - [Install from NPM](#app-components-inline-editor-from-npm) - [Framework integration](#app-components-inline-editor-framework-integration) +- [Usage](#app-components-inline-editor-usage) - [Properties](#app-components-inline-editor-properties) - [Custom actions slots](#app-components-inline-editor-custom-actions-slots) - [Styling](#app-components-inline-editor-styling) - [Events](#app-components-inline-editor-events) - [Methods](#app-components-inline-editor-methods) - [Examples](#app-components-inline-editor-examples) ## Showcase @@ -54,6 +44,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] inli ``` + ### Install from NPM Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command: @@ -78,30 +69,30 @@ import '@deckdeckgo/inline-editor'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/inline-editor/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage -The `` should be added once only in your page. It will interact with all elements of types `p`, `h1`, `h2` and `h3`, or other `containers` you would define, which are set as `contenteditable`. +The `` should be added once only in your page. It will interact with all elements of types `p`, `h1`, `h2` and `h3`, or other `containers` you would define, which are set as `contenteditable`. ### Properties The `` expose the following properties: -| Property | Attribute | Description | Type | Default | -| --------------------- | ------------------------ | ----------- | ------------- | ------------------------- | -| `attachTo` | `attach-to` | Could be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document. | `HTMLElement` | `undefined` | -| `containers` | `containers` | A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color. | `string` | `'h1,h2,h3,h4,h5,h6,div'` | -| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar. | `string` | `'img'` | -| `imgEditable` | `img-editable` | Per default, the component will not consider images as editable. Turn this option to `true` to activate the edition of images. | `boolean` | `false` | -| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the `float` on your image. | `string` | `'cssFloat'` | -| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the `width` on your image. | `string` | `'width'` | -| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it. | `boolean` | `false` | -| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` | -| `stickyMobile` | `sticky-mobile` | Use a sticky footer toolbar on mobile. The sticky bar is positioned bottom except on iOS for which it will be positioned top. | `boolean` | `false` | -| `customActions` | `custom-actions` | You might to display and add further actions to the component ? Use this property to provide a comma separated list of actions | `string` | | -| `palette` | `palette` | In case you would like to define a custom list of colors for the palette of colors. See [@deckdeckgo/color](https://docs.deckdeckgo.com/components/color) for the default list of colors. | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------- | +| `attachTo` | `attach-to` | Could be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document. | `HTMLElement` | `undefined` | +| `containers` | `containers` | A comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color. | `string` | `'h1,h2,h3,h4,h5,h6,div'` | +| `imgAnchor` | `img-anchor` | The type of element to attach the image toolbar. | `string` | `'img'` | +| `imgEditable` | `img-editable` | Per default, the component will not consider images as editable. Turn this option to `true` to activate the edition of images. | `boolean` | `false` | +| `imgPropertyCssFloat` | `img-property-css-float` | In case you would like to use a specific property to specify the `float` on your image. | `string` | `'cssFloat'` | +| `imgPropertyWidth` | `img-property-width` | In case you would like to use a specific property to specify the `width` on your image. | `string` | `'width'` | +| `mobile` | `mobile` | The mobile mode is automatically recognize, but just it case you would like to "force" it. | `boolean` | `false` | +| `stickyDesktop` | `sticky-desktop` | Use a sticky footer toolbar on desktop | `boolean` | `false` | +| `stickyMobile` | `sticky-mobile` | Use a sticky footer toolbar on mobile. The sticky bar is positioned bottom except on iOS for which it will be positioned top. | `boolean` | `false` | +| `customActions` | `custom-actions` | You might to display and add further actions to the component ? Use this property to provide a comma separated list of actions | `string` | | +| `palette` | `palette` | In case you would like to define a custom list of colors for the palette of colors. See [@deckdeckgo/color](https://docs.deckdeckgo.com/components/color) for the default list of colors. | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` | ### Custom actions slots @@ -117,55 +108,55 @@ If you provide custom actions, a `slot` is going to be generated on the flight f The `` could be styled using the following CSS4 variables which would only applies on the type ``: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) | -| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) | -| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar | -| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar | -| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar | -| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar | -| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane | -| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar | -| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar | -| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator | -| --deckgo-inline-editor-button-color | #3880ff | The buttons color | -| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size | -| --deckgo-inline-editor-button-font-family | inherit | The buttons font family | -| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active | -| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled | -| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed | -| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url | -| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url | -| --deckgo-inline-editor-width | inherit | The width of the toolbar | +| CSS4 variable | Default | Note | +| ---------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------- | +| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) | +| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) | +| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar | +| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar | +| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar | +| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar | +| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane | +| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar | +| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar | +| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator | +| --deckgo-inline-editor-button-color | #3880ff | The buttons color | +| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size | +| --deckgo-inline-editor-button-font-family | inherit | The buttons font family | +| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active | +| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled | +| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed | +| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url | +| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url | +| --deckgo-inline-editor-width | inherit | The width of the toolbar | Furthermore, the following variables are also available but only have an effects on mobile devices: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-inline-editor-mobile-box-shadow | 0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15) | A box shadow for the toolbar | -| --deckgo-inline-editor-mobile-background-top | #fff | ** | -| --deckgo-inline-editor-mobile-border | 0 | ** | -| --deckgo-inline-editor-button-mobile-color | black | ** | -| --deckgo-inline-editor-mobile-background-bottom | #fff | ** | -| --deckgo-inline-editor-button-mobile-color-active | #3880ff | ** | -| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | ** | -| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | ** | -| --deckgo-inline-editor-link-mobile-color | inherit | ** | -| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | ** | - -** like above but for mobile +| CSS4 variable | Default | Note | +| ---------------------------------------------------- | ------------------------------------------------------------ | ---------------------------- | +| --deckgo-inline-editor-mobile-box-shadow | 0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15) | A box shadow for the toolbar | +| --deckgo-inline-editor-mobile-background-top | #fff | \*\* | +| --deckgo-inline-editor-mobile-border | 0 | \*\* | +| --deckgo-inline-editor-button-mobile-color | black | \*\* | +| --deckgo-inline-editor-mobile-background-bottom | #fff | \*\* | +| --deckgo-inline-editor-button-mobile-color-active | #3880ff | \*\* | +| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | \*\* | +| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | \*\* | +| --deckgo-inline-editor-link-mobile-color | inherit | \*\* | +| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | \*\* | + +\*\* like above but for mobile ### Events -The event `input` will be automatically triggered when the content will be modified using the ``. However, when manipulating image, this event won't be triggered. Therefore a custom event will be instead triggered. Moreover, if you provide custom actions, an event is triggered each time one of these are selected. +The event `input` will be automatically triggered when the content will be modified using the ``. However, when manipulating image, this event won't be triggered. Therefore a custom event will be instead triggered. Moreover, if you provide custom actions, an event is triggered each time one of these are selected. -| Event | Description | Type | -| -------------- | ----------- | -------------------------- | -| `imgDidChange` | Triggered when an image is manipulated. Note: the event won't provide directly the image but rather its container element. | `CustomEvent` | -| `linkCreated` | Triggered when a link is created by the user using this component | `CustomEvent` | -| `stickyToolbarActivated` | Triggered when the sticky toolbar would be activated or not. Useful for example if you want to catch the event to hide things in your footer, as the sticky toolbar is display above it. | `CustomEvent` | -| `customAction` | Triggered when a custom action is selected. Its detail provide an `action` name, the `Selection` and an `anchorLink` | `CustomEvent` | +| Event | Description | Type | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `imgDidChange` | Triggered when an image is manipulated. Note: the event won't provide directly the image but rather its container element. | `CustomEvent` | +| `linkCreated` | Triggered when a link is created by the user using this component | `CustomEvent` | +| `stickyToolbarActivated` | Triggered when the sticky toolbar would be activated or not. Useful for example if you want to catch the event to hide things in your footer, as the sticky toolbar is display above it. | `CustomEvent` | +| `customAction` | Triggered when a custom action is selected. Its detail provide an `action` name, the `Selection` and an `anchorLink` | `CustomEvent` | ### Methods @@ -186,5 +177,4 @@ await element.reset(clearSelection: boolean, blurActiveElement?: boolean); ``` - -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md b/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md index 080e9bd1a..445f0ced1 100644 --- a/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md +++ b/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md @@ -57,7 +57,7 @@ import '@deckdeckgo/lazy-img'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/lazy-img/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage diff --git a/docs/docs/components/app-components-qrcode/app-components-qrcode.md b/docs/docs/components/app-components-qrcode/app-components-qrcode.md index db3604685..fcdfad610 100644 --- a/docs/docs/components/app-components-qrcode/app-components-qrcode.md +++ b/docs/docs/components/app-components-qrcode/app-components-qrcode.md @@ -7,15 +7,8 @@ To generate the QR code, the project [qrcode-generator](https://github.com/kazuh ## Table of contents - [Showcase](#app-components-qrcode-showcase) -- [Installation](#app-components-qrcode-installation) - - [Using DeckDeckGo QR Code from a CDN](#app-components-qrcode-using-deckdeckgo-qr-code-from-a-cdn) - - [Install DeckDeckGo QR Code from NPM](#app-components-qrcode-install-deckdeckgo-qr-code-from-npm) - - [Framework integration](#app-components-qrcode-framework-integration) -- [Usage](#app-components-qrcode-usage) - - [Slot](#app-components-qrcode-slot) - - [Properties](#app-components-qrcode-properties) - - [Styling](#app-components-qrcode-styling) - - [Styling type img](#app-components-qrcode-styling-type-img) +- [Installation](#app-components-qrcode-installation) - [Using DeckDeckGo QR Code from a CDN](#app-components-qrcode-using-deckdeckgo-qr-code-from-a-cdn) - [Install DeckDeckGo QR Code from NPM](#app-components-qrcode-install-deckdeckgo-qr-code-from-npm) - [Framework integration](#app-components-qrcode-framework-integration) +- [Usage](#app-components-qrcode-usage) - [Slot](#app-components-qrcode-slot) - [Properties](#app-components-qrcode-properties) - [Styling](#app-components-qrcode-styling) - [Styling type img](#app-components-qrcode-styling-type-img) - [Methods](#app-components-qrcode-methods) - [Examples](#app-components-qrcode-examples) - [QR Code with logo](#app-components-qrcode-qr-code-with-logo) @@ -51,6 +44,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] Code ``` + ### Install DeckDeckGo QR Code from NPM Install [DeckDeckGo] - QR Code in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command: @@ -75,7 +69,7 @@ import '@deckdeckgo/qrcode'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/qrcode/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage @@ -86,38 +80,38 @@ Optionally, it's also possible to generate the QR code as an `` and/or to ### Slot -To display a logo over your QR code, this Web Component provide a `slot` called `logo`. +To display a logo over your QR code, this Web Component provide a `slot` called `logo`. ### Properties The `` expose the following properties: -| Property | Attribute | Description | Type | Default | Only applies for type `` | -| ------------ | ------------- | ----------- | --------- | --------------------- |-----------------| -| `content` | `content` | The content, a text or an url, of the QR code to generate | `string` | || -| `type` | `type` | The type of QR code to generate, `` or `` | `string` | `svg` || -| `qrCellSize` | `qr-cell-size` | The size of the cell, useful to generate a bigger QR code, specially in case of ``. Use it wisely, I suggest a value between 0 and 20 for example. | `number` | || -| `qrMargin` | `qr-margin` | The size of the code margin, in case you would like more spacing | `number` | || -| `qrAlt` | `qr-img-alt` | An alternate text for the image of the QR code | `string` | | X | -| `qrBackgroundColor` | `qr-img-background-color` | The background color of the QR code. The value should be provided in a RGB-hex format. For example: `FF0000`. | `string` | | X | -| `qrFillColor` | `qr-img-fill-color` | The color use to fill the QR code. The value should be provided in a RGB-hex format. For example: `FF0000`. | `string` | | X | +| Property | Attribute | Description | Type | Default | Only applies for type `` | +| ------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ------------------------------ | +| `content` | `content` | The content, a text or an url, of the QR code to generate | `string` | | | +| `type` | `type` | The type of QR code to generate, `` or `` | `string` | `svg` | | +| `qrCellSize` | `qr-cell-size` | The size of the cell, useful to generate a bigger QR code, specially in case of ``. Use it wisely, I suggest a value between 0 and 20 for example. | `number` | | | +| `qrMargin` | `qr-margin` | The size of the code margin, in case you would like more spacing | `number` | | | +| `qrAlt` | `qr-img-alt` | An alternate text for the image of the QR code | `string` | | X | +| `qrBackgroundColor` | `qr-img-background-color` | The background color of the QR code. The value should be provided in a RGB-hex format. For example: `FF0000`. | `string` | | X | +| `qrFillColor` | `qr-img-fill-color` | The color use to fill the QR code. The value should be provided in a RGB-hex format. For example: `FF0000`. | `string` | | X | ### Styling The `` could be styled using the following CSS4 variables which would only applies on the type ``: -| CSS4 variable | Default | Note | Only applies for type `` | -| -------------------------- |-----------------|-----------------|-----------------| -| --deckgo-qrcode-container-display | inline-block | The display property of the shadow host and the code container || -| --deckgo-qrcode-size | | The size, width and height, of the QR code | X | -| --deckgo-qrcode-logo-ratio-size | 3 | If you are injecting a logo, its size, width and height, will be calculated with `--deckgo-qrcode-size` (or `100%` if not provided) divided by this value | X | -| --deckgo-qrcode-border-stroke | | The border color of the QR code | X | -| --deckgo-qrcode-background-fill | transparent | The QR code's background | X | -| --deckgo-qrcode-color-fill | | The QR code's color (the color of the QR code's squares it contains) | X | +| CSS4 variable | Default | Note | Only applies for type `` | +| --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| --deckgo-qrcode-container-display | inline-block | The display property of the shadow host and the code container | | +| --deckgo-qrcode-size | | The size, width and height, of the QR code | X | +| --deckgo-qrcode-logo-ratio-size | 3 | If you are injecting a logo, its size, width and height, will be calculated with `--deckgo-qrcode-size` (or `100%` if not provided) divided by this value | X | +| --deckgo-qrcode-border-stroke | | The border color of the QR code | X | +| --deckgo-qrcode-background-fill | transparent | The QR code's background | X | +| --deckgo-qrcode-color-fill | | The QR code's color (the color of the QR code's squares it contains) | X | #### Styling type img -In oder to style QR code if its type is set to ``, you will need to use properties instead of CSS4 variables. +In oder to style QR code if its type is set to ``, you will need to use properties instead of CSS4 variables. ### Methods @@ -150,4 +144,4 @@ It's possible to display a logo over your QR Code as the code generated with thi However, test it carefully and play with the colours, cell-size and size of your code to ensure its readability. -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/components/app-components-social/app-components-social.md b/docs/docs/components/app-components-social/app-components-social.md index c7e5b58c7..751167205 100644 --- a/docs/docs/components/app-components-social/app-components-social.md +++ b/docs/docs/components/app-components-social/app-components-social.md @@ -5,10 +5,7 @@ The "Social" component helps you generate a social link to your Twitter, Dev, Me ## Table of contents - [Showcase](#app-components-social-showcase) -- [Installation](#app-components-social-installation) - - [Using from a CDN](#app-components-social-from-a-cdn) - - [Install from NPM](#app-components-social-from-npm) - - [Framework integration](#app-components-social-framework-integration) +- [Installation](#app-components-social-installation) - [Using from a CDN](#app-components-social-from-a-cdn) - [Install from NPM](#app-components-social-from-npm) - [Framework integration](#app-components-social-framework-integration) - [Usage](#app-components-social-usage) - [Slots](#app-components-social-slots) - [Attributes](#app-components-social-attributes) @@ -36,6 +33,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy ``` + ### Install from NPM Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command: @@ -60,7 +58,7 @@ import '@deckdeckgo/social'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/social/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage @@ -121,14 +119,14 @@ Without icon: This component offers the following options which could be set using attributes: -| Attribute | Type | Default | Description | -| -------------------------- |-----------------|-----------------|-----------------| -| twitter | string | | Your Twitter username. It will be concatenated automatically with `https://twitter.com/` | -| linkedin | string | | Your Linkedin username. It will be concatenated automatically with `https://www.linkedin.com/in/` | -| medium | string | | Your Medium username. It will be concatenated automatically with `https://medium.com/@` | -| dev | string | | Your Dev username. It will be concatenated automatically with `https://dev.to/` | -| github | string | | Your Github username. It will be concatenated automatically with `https://github.com/` | -| fullUrl | string | | In case you would like to provide the URI of your choice | +| Attribute | Type | Default | Description | +| --------- | ------ | ------- | ------------------------------------------------------------------------------------------------- | +| twitter | string | | Your Twitter username. It will be concatenated automatically with `https://twitter.com/` | +| linkedin | string | | Your Linkedin username. It will be concatenated automatically with `https://www.linkedin.com/in/` | +| medium | string | | Your Medium username. It will be concatenated automatically with `https://medium.com/@` | +| dev | string | | Your Dev username. It will be concatenated automatically with `https://dev.to/` | +| github | string | | Your Github username. It will be concatenated automatically with `https://github.com/` | +| fullUrl | string | | In case you would like to provide the URI of your choice | ### Examples @@ -155,4 +153,4 @@ With for example `ion-icon`: ``` -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/components/app-components-youtube/app-components-youtube.md b/docs/docs/components/app-components-youtube/app-components-youtube.md index adfe8e990..fc845664c 100644 --- a/docs/docs/components/app-components-youtube/app-components-youtube.md +++ b/docs/docs/components/app-components-youtube/app-components-youtube.md @@ -5,10 +5,7 @@ The "Youtube" component allows you to easily add a [Youtube](https://youtube.com ## Table of contents - [Showcase](#app-components-youtube-showcase) -- [Installation](#app-components-youtube-installation) - - [Using from a CDN](#app-components-youtube-from-a-cdn) - - [Install from NPM](#app-components-youtube-from-npm) - - [Framework integration](#app-components-youtube-framework-integration) +- [Installation](#app-components-youtube-installation) - [Using from a CDN](#app-components-youtube-from-a-cdn) - [Install from NPM](#app-components-youtube-from-npm) - [Framework integration](#app-components-youtube-framework-integration) - [Usage](#app-components-youtube-usage) - [Slots](#app-components-youtube-slots) - [Attributes](#app-components-youtube-attributes) @@ -37,6 +34,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy ``` + ### Install from NPM Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command: @@ -61,7 +59,7 @@ import '@deckdeckgo/youtube'; ``` import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/youtube/dist/loader'; -deckDeckGoElement(window); +deckDeckGoElement(); ``` ## Usage @@ -81,15 +79,15 @@ No slots are available for this component. This component offers the following options which could be set using attributes: -| Attribute | Type | Default | Description | -| -------------------------- |-----------------|-----------------|-----------------| -| src | string | | The source url, the Youtube url, of the video. Not embeddable url will be automatically converted to embeddable url supported by Youtube. | -| width | number | | The width of the video player. | -| height | number | | The height of the video player. | -| frame-title | string | | A title for the frame, could be use for accessibility reason. | -| instant | boolean | false | In case you would like to load the video as soon as the component is loaded. | +| Attribute | Type | Default | Description | +| ----------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| src | string | | The source url, the Youtube url, of the video. Not embeddable url will be automatically converted to embeddable url supported by Youtube. | +| width | number | | The width of the video player. | +| height | number | | The height of the video player. | +| frame-title | string | | A title for the frame, could be use for accessibility reason. | +| instant | boolean | false | In case you would like to load the video as soon as the component is loaded. | -Per default the video, respectively its `iframe`, won't be loaded (expect if you specify `instant` to `true`). Therefore it's up to you to call the method `lazyLoadContent` to create the video. The reason behind this decision is allowing you to lazy load your content. +Per default the video, respectively its `iframe`, won't be loaded (expect if you specify `instant` to `true`). Therefore it's up to you to call the method `lazyLoadContent` to create the video. The reason behind this decision is allowing you to lazy load your content. ### Methods @@ -133,4 +131,4 @@ Renders the following video: -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/introduction/app-installation/app-installation.md b/docs/docs/introduction/app-installation/app-installation.md index 4e67fec5a..6971ea9d8 100644 --- a/docs/docs/introduction/app-installation/app-installation.md +++ b/docs/docs/introduction/app-installation/app-installation.md @@ -49,7 +49,7 @@ import '@deckdeckgo/core'; ``` import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader'; -deckDeckGoElements(window); +deckDeckGoElements(); ``` -[DeckDeckGo]: https://deckdeckgo.com +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md b/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md index 565298e31..326198592 100644 --- a/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md +++ b/docs/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.md @@ -67,7 +67,7 @@ import '@deckdeckgo/slide-aspect-ratio'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-aspect-ratio/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-author/app-slide-author.md b/docs/docs/slides/app-slide-author/app-slide-author.md index 446f3e8be..207b8dd97 100644 --- a/docs/docs/slides/app-slide-author/app-slide-author.md +++ b/docs/docs/slides/app-slide-author/app-slide-author.md @@ -70,7 +70,7 @@ import '@deckdeckgo/slide-author'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-author/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ### Social component diff --git a/docs/docs/slides/app-slide-big-img/app-slide-big-img.md b/docs/docs/slides/app-slide-big-img/app-slide-big-img.md index 1705b4f00..a618c82ad 100644 --- a/docs/docs/slides/app-slide-big-img/app-slide-big-img.md +++ b/docs/docs/slides/app-slide-big-img/app-slide-big-img.md @@ -67,7 +67,7 @@ import '@deckdeckgo/slide-big-img'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-big-img/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-chart/app-slide-chart.md b/docs/docs/slides/app-slide-chart/app-slide-chart.md index 856fa9eb0..be1f86094 100644 --- a/docs/docs/slides/app-slide-chart/app-slide-chart.md +++ b/docs/docs/slides/app-slide-chart/app-slide-chart.md @@ -85,7 +85,7 @@ import '@deckdeckgo/slide-chart'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-chart/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-code/app-slide-code.md b/docs/docs/slides/app-slide-code/app-slide-code.md index 7c1cabf90..7d44677df 100644 --- a/docs/docs/slides/app-slide-code/app-slide-code.md +++ b/docs/docs/slides/app-slide-code/app-slide-code.md @@ -70,7 +70,7 @@ import '@deckdeckgo/slide-code'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-code/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-content/app-slide-content.md b/docs/docs/slides/app-slide-content/app-slide-content.md index ea9c14d13..bb65cdaa5 100644 --- a/docs/docs/slides/app-slide-content/app-slide-content.md +++ b/docs/docs/slides/app-slide-content/app-slide-content.md @@ -70,7 +70,7 @@ import '@deckdeckgo/slide-content'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-content/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-countdown/app-slide-countdown.md b/docs/docs/slides/app-slide-countdown/app-slide-countdown.md index 2d05e86ff..8ac55b8b9 100644 --- a/docs/docs/slides/app-slide-countdown/app-slide-countdown.md +++ b/docs/docs/slides/app-slide-countdown/app-slide-countdown.md @@ -71,7 +71,7 @@ import '@deckdeckgo/slide-countdown'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-countdown/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage @@ -107,16 +107,16 @@ If you are using the [DeckDeckGo] starter kit and wish to make your notes access The time until your presentation should be provided to render the countdown. This value could be either passed through attributes `days`, `hours`, `minutes` and `seconds` or as a particular date using `until`. This components exposes the following attributes: - -| Attribute | Type | Default | Description | -| -------------------------- |-----------------|-----------------|-----------------| -| days | number | 0 | The amount of days before your presentations (max. 99 will be displayed) | -| hours | number | 0 | The amount of hours before your presentations (max. 23) | -| minutes | number | 0 | The amount of minutes before your presentations (max. 59) | -| seconds | number | 0 | The amount of seconds before your presentations (max. 59) | -| until | string | | A specific date and time until when your presentation will start | -| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` | -| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` | + +| Attribute | Type | Default | Description | +| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------- | +| days | number | 0 | The amount of days before your presentations (max. 99 will be displayed) | +| hours | number | 0 | The amount of hours before your presentations (max. 23) | +| minutes | number | 0 | The amount of minutes before your presentations (max. 59) | +| seconds | number | 0 | The amount of seconds before your presentations (max. 59) | +| until | string | | A specific date and time until when your presentation will start | +| custom-background | boolean | false | If you would provide a background for the all deck and a specific one for this slide, set this option to `true` | +| custom-actions | boolean | false | If you would provide actions for the all deck and a specific one for this slide, set this option to `true` | If you would provide a date using `until`, note that the format should be provided as a valid and parsable date. See [Date.parse()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/parse) for more information about the format. diff --git a/docs/docs/slides/app-slide-gif/app-slide-gif.md b/docs/docs/slides/app-slide-gif/app-slide-gif.md index d515811f6..2999e3071 100644 --- a/docs/docs/slides/app-slide-gif/app-slide-gif.md +++ b/docs/docs/slides/app-slide-gif/app-slide-gif.md @@ -75,7 +75,7 @@ import '@deckdeckgo/slide-gif'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-gif/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## For images too diff --git a/docs/docs/slides/app-slide-poll/app-slide-poll.md b/docs/docs/slides/app-slide-poll/app-slide-poll.md index 75d13c0e7..99b7ab38b 100644 --- a/docs/docs/slides/app-slide-poll/app-slide-poll.md +++ b/docs/docs/slides/app-slide-poll/app-slide-poll.md @@ -86,7 +86,7 @@ import '@deckdeckgo/slide-poll'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-poll/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-qrcode/app-slide-qrcode.md b/docs/docs/slides/app-slide-qrcode/app-slide-qrcode.md index 37ac94806..7d1aff1de 100644 --- a/docs/docs/slides/app-slide-qrcode/app-slide-qrcode.md +++ b/docs/docs/slides/app-slide-qrcode/app-slide-qrcode.md @@ -69,7 +69,7 @@ import '@deckdeckgo/slide-qrcode'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-qrcode/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-split/app-slide-split.md b/docs/docs/slides/app-slide-split/app-slide-split.md index 030e6407f..731ef3cb8 100644 --- a/docs/docs/slides/app-slide-split/app-slide-split.md +++ b/docs/docs/slides/app-slide-split/app-slide-split.md @@ -90,7 +90,7 @@ import '@deckdeckgo/slide-split'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-split/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-title/app-slide-title.md b/docs/docs/slides/app-slide-title/app-slide-title.md index 82307d61a..df9dfa081 100644 --- a/docs/docs/slides/app-slide-title/app-slide-title.md +++ b/docs/docs/slides/app-slide-title/app-slide-title.md @@ -70,7 +70,7 @@ import '@deckdeckgo/slide-title'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-title/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-video/app-slide-video.md b/docs/docs/slides/app-slide-video/app-slide-video.md index 116c4a476..e53c42e50 100644 --- a/docs/docs/slides/app-slide-video/app-slide-video.md +++ b/docs/docs/slides/app-slide-video/app-slide-video.md @@ -71,7 +71,7 @@ import '@deckdeckgo/slide-video'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-video/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ## Usage diff --git a/docs/docs/slides/app-slide-youtube/app-slide-youtube.md b/docs/docs/slides/app-slide-youtube/app-slide-youtube.md index f80dde175..8024a8be8 100644 --- a/docs/docs/slides/app-slide-youtube/app-slide-youtube.md +++ b/docs/docs/slides/app-slide-youtube/app-slide-youtube.md @@ -70,7 +70,7 @@ import '@deckdeckgo/slide-youtube'; ``` import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-youtube/dist/loader'; -deckDeckGoSlideElement(window); +deckDeckGoSlideElement(); ``` ### Youtube component diff --git a/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx b/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx index d715002cd..871213e27 100644 --- a/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx +++ b/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx @@ -287,7 +287,7 @@ export class AppComponentsCharts { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/charts/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx b/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx index 0384036f8..69c437154 100644 --- a/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx +++ b/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx @@ -110,7 +110,7 @@ export class AppComponentsColor { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/color/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx b/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx index dfcf134b1..77f86fec4 100644 --- a/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx +++ b/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx @@ -109,7 +109,7 @@ export class AppComponentsDrr { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/drag-resize-rotate/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx index ca3136609..f185e92cd 100644 --- a/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx +++ b/docs/src/app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx @@ -152,7 +152,7 @@ export class AppComponentsHighlightCode { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/highlight-code/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx b/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx index e9765c725..e0efa4a9d 100644 --- a/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx +++ b/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx @@ -144,7 +144,7 @@ export class AppComponentsInlineEditor { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/inline-editor/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx b/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx index c2f265238..970d0a356 100644 --- a/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx +++ b/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx @@ -106,7 +106,7 @@ export class AppComponentsLazyImg { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/lazy-img/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-qrcode/app-components-qrcode.tsx b/docs/src/app/pages/docs/components/app-components-qrcode/app-components-qrcode.tsx index c449b89ee..a13eddce3 100644 --- a/docs/src/app/pages/docs/components/app-components-qrcode/app-components-qrcode.tsx +++ b/docs/src/app/pages/docs/components/app-components-qrcode/app-components-qrcode.tsx @@ -140,7 +140,7 @@ export class AppComponentsQRCode { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/qrcode/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-social/app-components-social.tsx b/docs/src/app/pages/docs/components/app-components-social/app-components-social.tsx index e8fdabd9f..39f21d520 100644 --- a/docs/src/app/pages/docs/components/app-components-social/app-components-social.tsx +++ b/docs/src/app/pages/docs/components/app-components-social/app-components-social.tsx @@ -106,7 +106,7 @@ export class AppComponentsSocial { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/social/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/components/app-components-youtube/app-components-youtube.tsx b/docs/src/app/pages/docs/components/app-components-youtube/app-components-youtube.tsx index b77add47c..d784854af 100644 --- a/docs/src/app/pages/docs/components/app-components-youtube/app-components-youtube.tsx +++ b/docs/src/app/pages/docs/components/app-components-youtube/app-components-youtube.tsx @@ -115,7 +115,7 @@ export class AppComponentsYoutube { import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/youtube/dist/loader';{'\n'} - deckDeckGoElement(window); + deckDeckGoElement();

Usage

diff --git a/docs/src/app/pages/docs/introduction/app-installation/app-installation.tsx b/docs/src/app/pages/docs/introduction/app-installation/app-installation.tsx index 329723434..55c4ae0ad 100644 --- a/docs/src/app/pages/docs/introduction/app-installation/app-installation.tsx +++ b/docs/src/app/pages/docs/introduction/app-installation/app-installation.tsx @@ -91,7 +91,7 @@ export class AppInstallation { import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader';{'\n'} - deckDeckGoElements(window); + deckDeckGoElements(); diff --git a/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx b/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx index 705a70332..c425d0566 100644 --- a/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx @@ -127,7 +127,7 @@ export class AppSlideAspectRatio { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-aspect-ratio/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx index 17747651b..918bd7935 100644 --- a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx @@ -141,7 +141,7 @@ export class AppSlideAuthor { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-author/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Social component

diff --git a/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx b/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx index 5e4efb7f2..54787e3e0 100644 --- a/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-big-img/app-slide-big-img.tsx @@ -123,7 +123,7 @@ export class AppSlideBigImg { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-big-img/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx b/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx index 7cee1b618..bbe0ab0d4 100644 --- a/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-chart/app-slide-chart.tsx @@ -164,7 +164,7 @@ export class AppSlideChart { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-chart/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx b/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx index eed0152c3..203975eb0 100644 --- a/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-code/app-slide-code.tsx @@ -139,7 +139,7 @@ export class AppSlideCode { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-code/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx b/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx index db08f46eb..c8e483779 100644 --- a/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-content/app-slide-content.tsx @@ -126,7 +126,7 @@ export class AppConcept { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-content/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx b/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx index 97d543c1a..cf1d95048 100644 --- a/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-countdown/app-slide-countdown.tsx @@ -131,7 +131,7 @@ export class AppSlideCountdown { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-countdown/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx b/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx index c82df1be5..5904ef80a 100644 --- a/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx @@ -136,7 +136,7 @@ export class AppSlideGif { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-gif/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

For images too

diff --git a/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx b/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx index 1db2a22f3..77e31b803 100644 --- a/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-poll/app-slide-poll.tsx @@ -161,7 +161,7 @@ export class AppSlidePoll { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-poll/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx b/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx index 46b7ca998..23c491b67 100644 --- a/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-qrcode/app-slide-qrcode.tsx @@ -138,7 +138,7 @@ export class AppSlideQRCode { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-qrcode/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx index 4f2616aa3..3ada97621 100644 --- a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx @@ -140,7 +140,7 @@ export class AppSlideContent { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-split/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx b/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx index ce0fa3501..7276262d6 100644 --- a/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-title/app-slide-title.tsx @@ -124,7 +124,7 @@ export class AppSlideTitle { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-title/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx b/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx index b2a287828..e1a25744c 100644 --- a/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-video/app-slide-video.tsx @@ -157,7 +157,7 @@ export class AppSlideVideo { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-video/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Usage

diff --git a/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx b/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx index 310414e7a..4058d40a3 100644 --- a/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-youtube/app-slide-youtube.tsx @@ -141,7 +141,7 @@ export class AppSlideYoutube { import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-youtube/dist/loader';{'\n'} - deckDeckGoSlideElement(window); + deckDeckGoSlideElement();

Youtube component