@vonage/vivid 2.36.3 → 3.0.0-next.100

package/breadcrumb/index.js

@@ -0,0 +1,103 @@
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, d as designSystem } from '../shared/index.js';
+import { s as slotted, e as elements } from '../shared/slotted.js';
+import { B as BreadcrumbItem } from '../shared/breadcrumb-item.js';
+import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+class Breadcrumb$1 extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * Finds href on childnodes in the light DOM or shadow DOM.
+     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            return null;
+    }
+    /**
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
+}
+__decorate([
+    observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+
+let _ = t => t,
+  _t;
+const breadcrumbTemplate = () => html(_t || (_t = _`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${0}
+      ></slot>
+    </div>
+	</nav>
+`), slotted({
+  property: 'slottedBreadcrumbItems',
+  filter: elements()
+}));
+
+var css_248z = ".list {\n  display: flex;\n}";
+
+class Breadcrumb extends Breadcrumb$1 {}
+
+const vividBreadcrumb = Breadcrumb.compose({
+  baseName: 'breadcrumb',
+  template: breadcrumbTemplate,
+  styles: css_248z
+});
+designSystem.register(vividBreadcrumb());
+
+export { vividBreadcrumb };

package/breadcrumb-item/index.js

@@ -0,0 +1,59 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { B as BreadcrumbItem$1 } from '../shared/breadcrumb-item.js';
+import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/focus.js';
+import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/affix.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/focus2.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+
+class BreadcrumbItem extends BreadcrumbItem$1 {
+  constructor() {
+    super();
+  }
+}
+__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const getClasses = _ => classNames('base');
+const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
+      <div role="listitem" class="${0}">
+        ${0}
+
+  ${0}
+
+        ${0}
+      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-solid"></vwc-icon>`))));
+
+const vividBreadcrumbItem = BreadcrumbItem.compose({
+  baseName: 'breadcrumb-item',
+  template: BreadcrumbItemTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividBreadcrumbItem());
+
+export { vividBreadcrumbItem };

package/button/index.js

@@ -0,0 +1,24 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import '../shared/index.js';
+export { v as vividButton } from '../shared/index2.js';
+import '../shared/button.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
+import '../shared/focus2.js';
+import '../shared/ref.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';