@spectrum-web-components/shared - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1-alpha.71

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.6.0",
+    "version": "0.6.1-alpha.71+1e82c26e",
     "description": "",
@@ -46,8 +46,7 @@ "main": "src/index.js",
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.2-alpha.1038+1e82c26e",
         "focus-visible": "^5.0.2",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "e8ef933436c621f84cfd8fc1bf6725f720503ed6"
+    "gitHead": "1e82c26ee95e858f3c97afd070e1fc9e3905cebd"
 }

README.md

@@ -31,3 +31,3 @@ ## Description
 ```js
-import { Focusable } from '@spectrum-web-components/shared/lib/focusable';
+import { Focusable } from '@spectrum-web-components/shared';
 import { html } from 'lit-element';
@@ -71,8 +71,45 @@
 
-### ObserverSlotText
+### ObserveSlotText
 
+When working with styles that are driven by the conditional presence of `<slot>`s in a component's shadow DOM, you will need to track whether light DOM that is meant for that slot. Use the `ObserveSlotPresence` mixin to target specific light DOM to observe the presence of and trigger `this.requestUpdate()` calls when content fulfilling that selector comes in and out of availability.
+
+```js
+import { ObserveSlotPresence } from '@spectrum-web-components/shared';
+import { LitElement, html } from 'lit-element';
+
+class ObserveSlotPresenceElement extends ObserveSlotPresence(LitElement, '[slot="conditional-slot"]') {
+    // translate the mixin properties into locally understandable language
+    protected get hasConditionalSlotContent() {
+        return this.slotContentIsPresent;
+    }
+    protected render(): TemplateResult {
+        return html`
+            <button
+                id="button"
+            >
+                ${this.hasConditionalSlotContent
+                    ? html`
+                        <slot
+                            name="conditional-slot"
+                        ></slot>
+                    `
+                    : html``
+                }
+            </button>
+        `;
+    }
+    protected updated(): void {
+        console.log(this.slotContentIsPresent); // => true when <observing-slot-presence-element><div slot="conditional-slot"></div></observing-slot-presence-element>
+    }
+}
+
+customElements.define('observing-slot-presence-element', ObserveSlotPresenceElement);
+```
+
+### ObserveSlotText
+
 When working with `<slot>`s and their `slotchange` event, you will have the opportunity to capture when the nodes and/or elements in your element are added or removed. However, if the `textContent` of a text node changes, you will not receive the `slotchange` event because the slot hasn't actually received new nodes and/or elements in the exchange. When working with a lit-html binding `<your-element>${text}</your-element>` that means you will not receive a `slotchange` event when the value of `text` goes from `text = ''` to `text = 'something'` or the other way. In these cases the `ObserveSlotText` can be leverages to apply a mutation observe onto your element that tracks `characterData` mutations so that you can resspond as desired.
 
 ```js
-import { ObserveSlotText } from '@spectrum-web-components/shared/lib/oberve-slot-text';
+import { ObserveSlotText } from '@spectrum-web-components/shared';
 import { LitElement, html } from 'lit-element';
@@ -79,0 +116,0 @@

src/focusable.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("lit-element").CSSResult;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/focusable.css.js

@@ -12,3 +12,3 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css `
@@ -15,0 +15,0 @@ :host{pointer-events:none}:host(:not([disabled]))>*{pointer-events:all}

src/focusable.css.ts

@@ -12,3 +12,3 @@ /*
 */
-import { css } from 'lit-element';
+import { css } from '@spectrum-web-components/base';
 const styles = css`
@@ -15,0 +15,0 @@ :host{pointer-events:none}:host(:not([disabled]))>*{pointer-events:all}

src/focusable.d.ts

@@ -1,6 +0,6 @@
-import { LitElement, CSSResultArray, PropertyValues } from 'lit-element';
+import { SpectrumElement, CSSResultArray, PropertyValues } from '@spectrum-web-components/base';
 declare type DisableableElement = HTMLElement & {
     disabled?: boolean;
 };
-declare const Focusable_base: typeof LitElement;
+declare const Focusable_base: typeof SpectrumElement;
 /**
@@ -7,0 +7,0 @@ * Focusable base class handles tabindex setting into shadowed elements automatically.

src/focusable.js

@@ -13,3 +13,3 @@ import { __decorate } from "tslib";
 */
-import { LitElement, property, } from 'lit-element';
+import { SpectrumElement, property, } from '@spectrum-web-components/base';
 import focusableStyles from './focusable.css.js';
@@ -23,3 +23,3 @@ import { FocusVisiblePolyfillMixin } from './focus-visible.js';
  */
-export class Focusable extends FocusVisiblePolyfillMixin(LitElement) {
+export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
     constructor() {
@@ -88,3 +88,8 @@ super(...arguments);
             let doTimeout = true;
-            const innerHandler = () => {
+            const innerHandler = (event) => {
+                if (event.relatedTarget &&
+                    this.shadowRoot &&
+                    this.shadowRoot.contains(event.relatedTarget)) {
+                    return;
+                }
                 setTimeout(() => {
@@ -154,3 +159,3 @@ // Typically this would be done via `clearTimeout()`.
         }
-        this.focusElement.focus();
+        this.focus();
     }
@@ -157,0 +162,0 @@ handleDisabledChanged(disabled, oldDisabled) {

src/focusable.ts

@@ -13,7 +13,7 @@ /*
 import {
-    LitElement,
+    SpectrumElement,
     property,
     CSSResultArray,
     PropertyValues,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 import focusableStyles from './focusable.css.js';
@@ -31,3 +31,3 @@
  */
-export class Focusable extends FocusVisiblePolyfillMixin(LitElement) {
+export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static get styles(): CSSResultArray {
@@ -109,3 +109,10 @@ return [focusableStyles];
             let doTimeout = true;
-            const innerHandler = (): void => {
+            const innerHandler = (event: FocusEvent): void => {
+                if (
+                    event.relatedTarget &&
+                    this.shadowRoot &&
+                    this.shadowRoot.contains(event.relatedTarget as Node)
+                ) {
+                    return;
+                }
                 setTimeout(() => {
@@ -191,3 +198,3 @@ // Typically this would be done via `clearTimeout()`.
 
-        this.focusElement.focus();
+        this.focus();
     }
@@ -194,0 +201,0 @@

src/index.d.ts

@@ -5,1 +5,2 @@ export * from './focus-visible.js';
 export * from './observe-slot-text.js';
+export * from './observe-slot-presence.js';

src/index.js

@@ -16,2 +16,3 @@ /*
 export * from './observe-slot-text.js';
+export * from './observe-slot-presence.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -17,1 +17,2 @@ /*
 export * from './observe-slot-text.js';
+export * from './observe-slot-presence.js';

src/like-anchor.d.ts

@@ -1,2 +0,2 @@
-import { UpdatingElement, TemplateResult } from 'lit-element';
+import { UpdatingElement, TemplateResult } from '@spectrum-web-components/base';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -14,2 +14,3 @@ new (...args: any[]): T;
         id: string;
+        className?: string;
         anchorContent?: TemplateResult | TemplateResult[];
@@ -16,0 +17,0 @@ }): TemplateResult;

src/like-anchor.js

@@ -13,7 +13,7 @@ import { __decorate } from "tslib";
 */
-import { property, html } from 'lit-element';
+import { property, html, } from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function LikeAnchor(constructor) {
     class LikeAnchorElement extends constructor {
-        renderAnchor({ id, 
+        renderAnchor({ id, className, 
         // prettier-ignore
@@ -24,2 +24,3 @@ anchorContent = html `<slot></slot>` }) {
                     id=${id}
+                    class=${ifDefined(className)}
                     href=${ifDefined(this.href)}
@@ -26,0 +27,0 @@ download=${ifDefined(this.download)}

src/like-anchor.ts

@@ -12,3 +12,8 @@ /*
 */
-import { UpdatingElement, property, TemplateResult, html } from 'lit-element';
+import {
+    UpdatingElement,
+    property,
+    TemplateResult,
+    html,
+} from '@spectrum-web-components/base';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -30,2 +35,3 @@
         id: string;
+        className?: string;
         anchorContent?: TemplateResult | TemplateResult[];
@@ -56,2 +62,3 @@ }): TemplateResult;
             id,
+            className,
             // prettier-ignore
@@ -61,2 +68,3 @@ anchorContent = html`<slot></slot>`
             id: string;
+            className?: string;
             anchorContent: TemplateResult | TemplateResult[];
@@ -68,2 +76,3 @@ }): TemplateResult {
                     id=${id}
+                    class=${ifDefined(className)}
                     href=${ifDefined(this.href)}
@@ -70,0 +79,0 @@ download=${ifDefined(this.download)}

src/observe-slot-text.d.ts

@@ -1,2 +0,2 @@
-import { UpdatingElement } from 'lit-element';
+import { UpdatingElement } from '@spectrum-web-components/base';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -8,5 +8,5 @@ new (...args: any[]): T;
     slotHasContent: boolean;
-    manageObservedSlot(): void;
+    manageTextObservedSlot(): void;
 }
 export declare function ObserveSlotText<T extends Constructor<UpdatingElement>>(constructor: T, slotSelector?: string): T & Constructor<SlotTextObservingInterface>;
 export {};

src/observe-slot-text.js

@@ -1,6 +0,20 @@
-const observedSlotElement = Symbol('observedSlotElement');
+import { __decorate } from "tslib";
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { queryAssignedNodes, property, } from '@spectrum-web-components/base';
 const slotElementObserver = Symbol('slotElementObserver');
+const assignedNodesList = Symbol('assinedNodes');
 const startObserving = Symbol('startObserving');
-export function ObserveSlotText(constructor, slotSelector = '#slot') {
-    return class SlotTextObservingElement extends constructor {
+export function ObserveSlotText(constructor, slotSelector) {
+    var _a;
+    class SlotTextObservingElement extends constructor {
         constructor() {
@@ -10,18 +24,6 @@ super(...arguments);
         }
-        manageObservedSlot() {
-            this[observedSlotElement] = (this[observedSlotElement] ||
-                (this.shadowRoot
-                    ? this.shadowRoot.querySelector(slotSelector)
-                    : undefined));
-            if (!this[observedSlotElement]) {
+        manageTextObservedSlot() {
+            if (!this[assignedNodesList])
                 return;
-            }
-            const slot = this[observedSlotElement];
-            let assignedNodes = slot.assignedNodes
-                ? slot.assignedNodes()
-                : [...this.childNodes].filter((node) => {
-                    const el = node;
-                    return !el.hasAttribute('slot');
-                });
-            assignedNodes = assignedNodes.filter((node) => {
+            const assignedNodes = [...this[assignedNodesList]].filter((node) => {
                 if (node.tagName) {
@@ -33,9 +35,8 @@ return true;
             this.slotHasContent = assignedNodes.length > 0;
-            this.requestUpdate();
         }
         firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);
-            this.manageObservedSlot();
+            this.manageTextObservedSlot();
         }
-        [startObserving]() {
+        [(_a = assignedNodesList, startObserving)]() {
             const config = { characterData: true, subtree: true };
@@ -47,3 +48,3 @@ if (!this[slotElementObserver]) {
                         if (mutation.type === 'characterData') {
-                            this.manageObservedSlot();
+                            this.manageTextObservedSlot();
                         }
@@ -67,4 +68,11 @@ }
         }
-    };
+    }
+    __decorate([
+        property({ type: Boolean, attribute: false })
+    ], SlotTextObservingElement.prototype, "slotHasContent", void 0);
+    __decorate([
+        queryAssignedNodes(slotSelector)
+    ], SlotTextObservingElement.prototype, _a, void 0);
+    return SlotTextObservingElement;
 }
 //# sourceMappingURL=observe-slot-text.js.map

src/observe-slot-text.ts

@@ -12,6 +12,11 @@ /*
 */
-import { PropertyValues, UpdatingElement } from 'lit-element';
+import {
+    PropertyValues,
+    UpdatingElement,
+    queryAssignedNodes,
+    property,
+} from '@spectrum-web-components/base';
 
-const observedSlotElement = Symbol('observedSlotElement');
 const slotElementObserver = Symbol('slotElementObserver');
+const assignedNodesList = Symbol('assinedNodes');
 const startObserving = Symbol('startObserving');
@@ -27,3 +32,3 @@
     slotHasContent: boolean;
-    manageObservedSlot(): void;
+    manageTextObservedSlot(): void;
 }
@@ -33,35 +38,25 @@
     constructor: T,
-    slotSelector = '#slot'
+    slotSelector?: string
 ): T & Constructor<SlotTextObservingInterface> {
-    return class SlotTextObservingElement extends constructor
+    class SlotTextObservingElement extends constructor
         implements SlotTextObservingInterface {
-        private [observedSlotElement]: HTMLSlotElement | undefined;
-
         private [slotElementObserver]: MutationObserver;
 
+        @property({ type: Boolean, attribute: false })
         public slotHasContent = false;
 
-        public manageObservedSlot(): void {
-            this[observedSlotElement] = (this[observedSlotElement] ||
-                (this.shadowRoot
-                    ? this.shadowRoot.querySelector(slotSelector)
-                    : undefined)) as HTMLSlotElement | undefined;
-            if (!this[observedSlotElement]) {
-                return;
-            }
-            const slot = this[observedSlotElement] as HTMLSlotElement;
-            let assignedNodes = slot.assignedNodes
-                ? slot.assignedNodes()
-                : [...this.childNodes].filter((node) => {
-                      const el = node as HTMLElement;
-                      return !el.hasAttribute('slot');
-                  });
-            assignedNodes = assignedNodes.filter((node) => {
-                if ((node as HTMLElement).tagName) {
-                    return true;
+        @queryAssignedNodes(slotSelector)
+        private [assignedNodesList]!: NodeListOf<HTMLElement>;
+
+        public manageTextObservedSlot(): void {
+            if (!this[assignedNodesList]) return;
+            const assignedNodes = [...this[assignedNodesList]].filter(
+                (node) => {
+                    if ((node as HTMLElement).tagName) {
+                        return true;
+                    }
+                    return node.textContent ? node.textContent.trim() : false;
                 }
-                return node.textContent ? node.textContent.trim() : false;
-            });
+            );
             this.slotHasContent = assignedNodes.length > 0;
-            this.requestUpdate();
         }
@@ -71,3 +66,3 @@
             super.firstUpdated(changedProperties);
-            this.manageObservedSlot();
+            this.manageTextObservedSlot();
         }
@@ -84,3 +79,3 @@
                         if (mutation.type === 'characterData') {
-                            this.manageObservedSlot();
+                            this.manageTextObservedSlot();
                         }
@@ -106,3 +101,4 @@ }
         }
-    };
+    }
+    return SlotTextObservingElement;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109127

increased by11.59%

Dependency count

3

decreased by-25%

Number of package files

38

increased by11.76%

Lines of code

1193

increased by13.3%

Number of lines in readme file

135

increased by37.76%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@^0.0.2-alpha.1038+1e82c26e

• + Added@spectrum-web-components/base@0.0.2-alpha.1038(transitive)

• - Removedlit-element@^2.1.0

• - Removedlit-html@^1.0.0