@spectrum-web-components/coachmark 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,238 @@
+## Description
+
+`<sp-coachmark>` is a temporary message that educates users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/coachmark?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/coachmark)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/coachmark?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/coachmark)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Z611FV1zeF0CLBLVHNFY/src/index.ts)
+
+```
+yarn add @spectrum-web-components/coachmark
+```
+
+Import the side effectful registration of `<sp-coachmark>` via:
+
+```
+import '@spectrum-web-components/coachmark/sp-coachmark.js';
+
+```
+
+When looking to leverage the `Coachmark` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Coachmark } from '@spectrum-web-components/coachmark';
+```
+
+## Example
+
+## Default
+
+```html
+<sp-coachmark open>
+    <div slot="title">Coachmark with Text Only</div>
+    <div slot="content">
+        This is a Coachmark with nothing but text in it. Kind of lonely in here.
+    </div>
+</sp-coachmark>
+```
+
+## Using Action Menu
+
+Coach marks can include an `<sp-action-menu>`, which appears at the top right of the coach mark. The `<sp-action-menu>` should only include ways to interact with the coach mark tour as a whole, with options like “Skip tour” or “Restart tour.”
+
+```html
+<sp-coachmark
+    open
+    current-step="2"
+    total-steps="8"
+    primary-cta="Next"
+    secondary-cta="Previous"
+>
+    <div slot="title">Coachmark with Text Only</div>
+    <div slot="content">
+        This is a Coachmark with nothing but text in it. Kind of lonely in here.
+    </div>
+    <sp-action-menu
+        label="More Actions"
+        placement="bottom-end"
+        quiet
+        slot="actions"
+    >
+        <sp-menu-item>Skip tour</sp-menu-item>
+        <sp-menu-item>Restart tour</sp-menu-item>
+    </sp-action-menu>
+</sp-coachmark>
+```
+
+## User Action Dependent
+
+User action-dependent coachmarks are designed to guide users based on their interactions within your application. In such cases, there is no "Next Step" button, as the coachmark progresses when the user takes a specific action. This allows users to learn by doing, rather than simply reading instructions. The coachmark remains until the user performs the required action or takes an alternative route in the tour, such as skipping, restarting, or moving back to a previous step.
+
+Inside the `<sp-coachmark>`, add the content and instructions for the coachmark in the `<sp-coachmark>`. You can also define primary and secondary CTA buttons for user interaction.
+
+**Event Handling:**
+
+The primary and secondary CTA buttons within the coachmark popover can be configured to dispatch events when clicked.
+
+```html-live
+<sp-coachmark
+    id="coachmark-action"
+    open
+    current-step="2"
+    total-steps="8"
+    primary-cta="Asset added"
+    secondary-cta="Previous"
+>
+    <div slot="title">Coachmark with user action</div>
+    <div slot="content">
+        This is a Coachmark with nothing but text in it. Kind of lonely in here.
+    </div>
+    <sp-action-menu label="More Actions" placement="bottom-end" quiet slot="actions">
+        <sp-menu-item>Skip tour</sp-menu-item>
+        <sp-menu-item>Restart tour</sp-menu-item>
+    </sp-action-menu>
+</sp-coachmark>
+<script type="module">
+    const initCoachMark = () => {
+        const coachmark = document.querySelector('#coachmark-action');
+        coachmark.addEventListener('primary', () => console.log('primary call to action'));
+        coachmark.addEventListener('secondary', () => console.log('secondary call to action'));
+
+    };
+    customElements.whenDefined('sp-coachmark').then(() => {
+                initCoachMark();
+    });
+</script>
+```
+
+<script type="module">
+    const initCoachMark = () => {
+        const coachmark = document.querySelector('#coachmark-action');
+        coachmark.addEventListener('primary', () => console.log('primary call to action'));
+        coachmark.addEventListener('secondary', () => console.log('secondary call to action'));
+    };
+    customElements.whenDefined('sp-coachmark').then(() => {
+                initCoachMark();
+    });
+</script>
+
+## Using Images, GIFs
+
+Coach marks can contain images or videos that relate to their content, such as demonstrations of gestures, the feature being used, or illustrations.
+To use these kinds of media in your rich tooltip, specify a `src`, the type of media, either by using the string or `media-type` object, and
+an optional `imageAlt` text describing the content.
+
+Media Types allowed: `Images & Gifs`
+
+### Image
+
+```html
+<sp-coachmark
+    current-step="2"
+    total-steps="8"
+    open
+    primary-cta="Next"
+    secondary-cta="Previous"
+    src="https://picsum.photos/id/237/200/300"
+    media-type="image"
+>
+    <div slot="title">Coachmark with 16:9 image</div>
+    <div slot="content">This is a Coachmark with some description</div>
+    <sp-action-menu
+        label="More Actions"
+        placement="bottom-end"
+        quiet
+        slot="actions"
+    >
+        <sp-menu-item>Skip tour</sp-menu-item>
+        <sp-menu-item>Restart tour</sp-menu-item>
+    </sp-action-menu>
+</sp-coachmark>
+```
+
+### Custom Image/Gif
+
+A custom media can also be added via `<slot name="cover-photo"></slot>`
+
+```html
+<sp-coachmark
+    current-step="2"
+    total-steps="8"
+    open
+    primary-cta="Next"
+    secondary-cta="Previous"
+>
+    <div slot="title">Coachmark with 16:9 image</div>
+    <div slot="content">This is a Coachmark with some description</div>
+    <img slot="asset" src="https://picsum.photos/id/237/200/300" alt="" />
+    <sp-action-menu
+        label="More Actions"
+        placement="bottom-end"
+        quiet
+        slot="actions"
+    >
+        <sp-menu-item>Skip tour</sp-menu-item>
+        <sp-menu-item>Restart tour</sp-menu-item>
+    </sp-action-menu>
+</sp-coachmark>
+```
+
+## Shortcut keys and modifier keys
+
+Shortcut keys and modifier keys are ways to show users how to trigger a particular tool.
+
+The `shortcutKey` is the primary key used to trigger an interaction and are typically an alphanumeric value (and thus will be rendered as an uppercase character), while the
+`modifierKeys` are an array of `string`s that represent alternate keys that can be pressed, like `Shift`, `Alt`, `Cmd`, etc.
+
+```html-live
+    <sp-coachmark
+        open
+        current-step="2"
+        total-steps="8"
+        primary-cta="Next"
+        secondary-cta="Previous"
+        id="coachmark-keys"
+    >
+        <sp-action-menu label="More Actions" placement="bottom-end" quiet slot="actions">
+            <sp-menu-item>Skip tour</sp-menu-item>
+            <sp-menu-item>Restart tour</sp-menu-item>
+        </sp-action-menu>
+    </sp-coachmark>
+<script type="module">
+    const initCoachMark = () => {
+        const coachmark = document.querySelector('#coachmark-keys');
+        const modifierKeys = ['⇧ Shift', '⌘'];
+        const content = {
+            title: 'I am a Coachmark with keys',
+            description: 'This is a Coachmark with nothing but text in it.'
+        };
+        coachmark.content= content
+        coachmark.modifierKeys = modifierKeys
+    };
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-coachmark').then(() => {
+                initCoachMark();
+        });
+    });
+</script>
+```
+
+<script type="module">
+    const initCoachMark = () => {
+        const coachmark = document.querySelector('#coachmark-keys');
+        const modifierKeys = ['⇧ Shift', '⌘'];
+        const content = {
+            title: 'I am a Coachmark with keys',
+            description: 'This is a Coachmark with nothing but text in it.'
+        };
+        coachmark.content= content
+        coachmark.modifierKeys = modifierKeys
+    };
+    customElements.whenDefined('code-example').then(() => {
+        customElements.whenDefined('sp-coachmark').then(() => {
+                initCoachMark();
+        });
+    });
+</script>

package/package.json

@@ -0,0 +1,94 @@
+{
+    "name": "@spectrum-web-components/coachmark",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/coachmark"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/coachmark",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/CoachIndicator.js": {
+            "development": "./src/CoachIndicator.dev.js",
+            "default": "./src/CoachIndicator.js"
+        },
+        "./src/Coachmark.js": {
+            "development": "./src/Coachmark.dev.js",
+            "default": "./src/Coachmark.js"
+        },
+        "./src/CoachmarkItem.js": {
+            "development": "./src/CoachmarkItem.dev.js",
+            "default": "./src/CoachmarkItem.js"
+        },
+        "./src/coach-indicator-overrides.css.js": "./src/coach-indicator-overrides.css.js",
+        "./src/coach-indicator.css.js": "./src/coach-indicator.css.js",
+        "./src/coachmark-overrides.css.js": "./src/coachmark-overrides.css.js",
+        "./src/coachmark.css.js": "./src/coachmark.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-coachmark.js": {
+            "development": "./sp-coachmark.dev.js",
+            "default": "./sp-coachmark.js"
+        },
+        "./sp-coach-indicator.js": {
+            "development": "./sp-coach-indicator.dev.js",
+            "default": "./sp-coach-indicator.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/asset": "0.0.0-20241209155954",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/button": "0.0.0-20241209155954",
+        "@spectrum-web-components/button-group": "0.0.0-20241209155954",
+        "@spectrum-web-components/icon": "0.0.0-20241209155954",
+        "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/coachindicator": "^3.0.0-s2-foundations.16",
+        "@spectrum-css/coachmark": "^8.0.0-s2-foundations.17"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-coach-indicator.d.ts

@@ -0,0 +1,6 @@
+import { CoachIndicator } from './src/CoachIndicator.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-coach-indicator': CoachIndicator;
+    }
+}

package/sp-coach-indicator.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { CoachIndicator } from "./src/CoachIndicator.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-coach-indicator", CoachIndicator);
+//# sourceMappingURL=sp-coach-indicator.dev.js.map

package/sp-coach-indicator.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-coach-indicator.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { CoachIndicator } from './src/CoachIndicator.dev.js'\n\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\ndefineElement('sp-coach-indicator', CoachIndicator);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-coach-indicator': CoachIndicator;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB;AAC9B,cAAc,sBAAsB,cAAc;",
+  "names": []
+}

package/sp-coach-indicator.js

@@ -0,0 +1,2 @@
+"use strict";import{CoachIndicator as a}from"./src/CoachIndicator.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-coach-indicator",a);
+//# sourceMappingURL=sp-coach-indicator.js.map

package/sp-coach-indicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-coach-indicator.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { CoachIndicator } from './src/CoachIndicator.js';\n\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\ndefineElement('sp-coach-indicator', CoachIndicator);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-coach-indicator': CoachIndicator;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,kBAAAA,MAAsB,0BAE/B,OAAS,iBAAAC,MAAqB,sDAC9BA,EAAc,qBAAsBD,CAAc",
+  "names": ["CoachIndicator", "defineElement"]
+}

package/sp-coachmark.d.ts

@@ -0,0 +1,6 @@
+import { Coachmark } from './src/Coachmark.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-coachmark': Coachmark;
+    }
+}

package/sp-coachmark.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Coachmark } from "./src/Coachmark.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-coachmark", Coachmark);
+//# sourceMappingURL=sp-coachmark.dev.js.map

package/sp-coachmark.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-coachmark.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Coachmark } from './src/Coachmark.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-coachmark', Coachmark);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-coachmark': Coachmark;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,cAAc,gBAAgB,SAAS;",
+  "names": []
+}

package/sp-coachmark.js

@@ -0,0 +1,2 @@
+"use strict";import{Coachmark as a}from"./src/Coachmark.js";import{defineElement as e}from"@spectrum-web-components/base/src/define-element.js";e("sp-coachmark",a);
+//# sourceMappingURL=sp-coachmark.js.map

package/sp-coachmark.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-coachmark.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Coachmark } from './src/Coachmark.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-coachmark', Coachmark);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-coachmark': Coachmark;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,aAAAA,MAAiB,qBAC1B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,eAAgBD,CAAS",
+  "names": ["Coachmark", "defineElement"]
+}

package/src/CoachIndicator.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+/**
+ * @element sp-coach-indicator
+ */
+export declare class CoachIndicator extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    quiet: boolean;
+    staticColor?: 'white' | 'black';
+    protected render(): TemplateResult;
+}

package/src/CoachIndicator.dev.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import styles from "./coach-indicator.css.js";
+export class CoachIndicator extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.quiet = false;
+  }
+  static get styles() {
+    return [styles];
+  }
+  render() {
+    return html`
+            <div class="ring"></div>
+            <div class="ring"></div>
+            <div class="ring"></div>
+        `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CoachIndicator.prototype, "quiet", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "static-color" })
+], CoachIndicator.prototype, "staticColor", 2);
+//# sourceMappingURL=CoachIndicator.dev.js.map

package/src/CoachIndicator.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["CoachIndicator.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './coach-indicator.css.js';\n\n/**\n * @element sp-coach-indicator\n */\nexport class CoachIndicator extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ reflect: true, attribute: 'static-color' })\n    public staticColor?: 'white' | 'black';\n\n    protected override render(): TemplateResult {\n        return html`\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n        `;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAKZ,aAAM,uBAAuB,gBAAgB;AAAA,EAA7C;AAAA;AAMH,SAAO,QAAQ;AAAA;AAAA,EALf,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAQmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKX;AACJ;AAZW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GALjC,eAMF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAR7C,eASF;",
+  "names": []
+}

package/src/CoachIndicator.js

@@ -0,0 +1,6 @@
+"use strict";var u=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var c=(l,t,i,r)=>{for(var e=r>1?void 0:r?a(t,i):t,s=l.length-1,o;s>=0;s--)(o=l[s])&&(e=(r?o(t,i,e):o(e))||e);return r&&e&&u(t,i,e),e};import{html as m,SpectrumElement as d}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import n from"./coach-indicator.css.js";export class CoachIndicator extends d{constructor(){super(...arguments);this.quiet=!1}static get styles(){return[n]}render(){return m`
+            <div class="ring"></div>
+            <div class="ring"></div>
+            <div class="ring"></div>
+        `}}c([p({type:Boolean,reflect:!0})],CoachIndicator.prototype,"quiet",2),c([p({reflect:!0,attribute:"static-color"})],CoachIndicator.prototype,"staticColor",2);
+//# sourceMappingURL=CoachIndicator.js.map

package/src/CoachIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["CoachIndicator.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './coach-indicator.css.js';\n\n/**\n * @element sp-coach-indicator\n */\nexport class CoachIndicator extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ reflect: true, attribute: 'static-color' })\n    public staticColor?: 'white' | 'black';\n\n    protected override render(): TemplateResult {\n        return html`\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n            <div class=\"ring\"></div>\n        `;\n    }\n}\n"],
+  "mappings": "qNAWA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAOC,MAAY,2BAKZ,aAAM,uBAAuBF,CAAgB,CAA7C,kCAMH,KAAO,MAAQ,GALf,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAM,CAClB,CAQmB,QAAyB,CACxC,OAAOH;AAAA;AAAA;AAAA;AAAA,SAKX,CACJ,CAZWI,EAAA,CADNF,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GALjC,eAMF,qBAGAE,EAAA,CADNF,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAR7C,eASF",
+  "names": ["html", "SpectrumElement", "property", "styles", "__decorateClass"]
+}

package/src/Coachmark.d.ts

@@ -0,0 +1,49 @@
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
+import { Popover } from '@spectrum-web-components/popover';
+import type { Placement } from '@spectrum-web-components/overlay';
+import type { CoachmarkItem } from './CoachmarkItem.js';
+import '@spectrum-web-components/asset/sp-asset.js';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/button-group/sp-button-group.js';
+/**
+ * @element sp-coachmark
+ * @fires primary - Announces that the "primary" button has been clicked.
+ * @fires secondary - Announces that the "secondary" button has been clicked.
+ * @slot cover-photo - This is the cover photo for Default and Quiet Coachmark
+ * @slot heading - HTML content to be listed as the heading
+ * @slot description - A description of the card
+ * @slot actions - an `sp-action-menu` element outlining actions to take on the represened object
+ * @slot step-count - Override the default pagination delivery with your own internationalized content
+ */
+export declare class Coachmark extends Popover {
+    static get styles(): CSSResultArray;
+    item?: CoachmarkItem;
+    placement: Placement;
+    private content?;
+    private shortcutKey?;
+    modifierKeys?: string[];
+    private source?;
+    private mediaType?;
+    hasAsset: boolean;
+    asset?: 'file' | 'folder';
+    currentStep?: number;
+    totalSteps?: number;
+    primaryCTA?: string;
+    secondaryCTA?: string;
+    private renderMedia;
+    private renderModifier;
+    private renderJoiner;
+    private renderHeader;
+    private renderContent;
+    private handlePrimaryCTA;
+    private handleSecondaryCTA;
+    private renderSecondaryButton;
+    private renderPrimaryButton;
+    private renderSecondaryButtonMobile;
+    private renderPrimaryButtonMobile;
+    protected renderButtons(): TemplateResult;
+    protected renderSteps: () => TemplateResult;
+    protected renderActionMenu: () => TemplateResult;
+    protected render(): TemplateResult;
+}