diff --git a/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json new file mode 100644 index 00000000..74734024 --- /dev/null +++ b/common/changes/c2pa-wc/CAI-3405_2023-02-14-16-41.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "c2pa-wc", + "comment": "making L2 keyboard focusable", + "type": "patch" + } + ], + "packageName": "c2pa-wc" +} \ No newline at end of file diff --git a/packages/c2pa-wc/src/components/L2/L2.ts b/packages/c2pa-wc/src/components/L2/L2.ts new file mode 100644 index 00000000..c634a267 --- /dev/null +++ b/packages/c2pa-wc/src/components/L2/L2.ts @@ -0,0 +1,74 @@ +/** + * Copyright 2023 Adobe + * All Rights Reserved. + * + * NOTICE: Adobe permits you to use, modify, and distribute this file in + * accordance with the terms of the Adobe license agreement accompanying + * it. + */ + +import { L2ManifestStore } from 'c2pa'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import '../../../assets/svg/color/info.svg'; +import { defaultStyles } from '../../styles'; + +declare global { + interface HTMLElementTagNameMap { + 'cai-l2': L2; + } + + namespace JSX { + interface IntrinsicElements { + 'cai-l2': any; + } + } +} + +@customElement('cai-l2') +export class L2 extends LitElement { + /** + * Image source - if set to undefined/null it will show a broken image icon + */ + static get styles() { + return [ + defaultStyles, + css` + .popover { + position: absolute; + top: 10px; + right: 10px; + } + `, + ]; + } + + manifestStore: L2ManifestStore | undefined; + + viewMoreURL: string | undefined; + + render() { + if (!this.manifestStore) { + return null; + } + console.log('this.manifeststore', this.manifestStore); + return html` + + + + + + `; + } +} diff --git a/packages/c2pa-wc/src/components/L2/index.ts b/packages/c2pa-wc/src/components/L2/index.ts new file mode 100644 index 00000000..9c80f73f --- /dev/null +++ b/packages/c2pa-wc/src/components/L2/index.ts @@ -0,0 +1,10 @@ +/** + * Copyright 2023 Adobe + * All Rights Reserved. + * + * NOTICE: Adobe permits you to use, modify, and distribute this file in + * accordance with the terms of the Adobe license agreement accompanying + * it. + */ + +export * from './L2'; diff --git a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts index 345f3c9b..4c9c4b93 100644 --- a/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts +++ b/packages/c2pa-wc/src/components/ManifestSummary/ManifestSummary.ts @@ -7,22 +7,22 @@ * it. */ +import { L2ManifestStore } from 'c2pa'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { Configurable } from '../../mixins/configurable'; import { defaultStyles } from '../../styles'; import { defaultDateFormatter, hasChanged } from '../../utils'; -import { L2ManifestStore } from 'c2pa'; import type { EditsAndActivityConfig } from '../EditsAndActivity'; import type { MinimumViableProvenanceConfig } from '../MinimumViableProvenance'; -import { Configurable } from '../../mixins/configurable'; import defaultStringMap from './ManifestSummary.str.json'; import '../AssetsUsed'; +import '../EditsAndActivity'; +import '../MinimumViableProvenance'; import '../ProducedBy'; import '../ProducedWith'; import '../SocialMedia'; -import '../EditsAndActivity'; -import '../MinimumViableProvenance'; declare global { interface HTMLElementTagNameMap { @@ -156,8 +156,8 @@ export class ManifestSummary extends Configurable(LitElement, defaultConfig) { return null; } - return html`
-
+ return html`
+
${this.arrow ? html`
` : null}
-
+ +
diff --git a/packages/c2pa-wc/src/index.ts b/packages/c2pa-wc/src/index.ts index 9b748e49..a8d4550e 100644 --- a/packages/c2pa-wc/src/index.ts +++ b/packages/c2pa-wc/src/index.ts @@ -7,11 +7,11 @@ * it. */ -export * as utils from './utils'; export * from './components/AssetsUsed'; export * from './components/EditsAndActivity'; export * from './components/Icon'; export * from './components/Indicator'; +export * from './components/L2'; export * from './components/ManifestSummary'; export * from './components/MinimumViableProvenance'; export * from './components/PanelSection'; @@ -21,3 +21,4 @@ export * from './components/ProducedWith'; export * from './components/SocialMedia'; export * from './components/Thumbnail'; export * from './components/Tooltip'; +export * as utils from './utils';