@patternfly/elements 1.0.0

package/pf-code-block/BaseCodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCodeBlock.js","sourceRoot":"","sources":["BaseCodeBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;AAIjC,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAKpD,IAAc,OAAO;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAoB,cAAc,CAAC,CAAC;QACrE,IACE,MAAM,EAAE,IAAI,KAAK,wBAAwB;YACzC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE;YACnD,OAAO,EAAE,CAAC;SACX;aAAM;YACL,OAAO,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAES,MAAM,CAAC,GAAW;QAC1B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9E,CAAC;;AAnBe,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement } from 'lit';\n\nimport styles from './BaseCodeBlock.css';\n\nexport abstract class BaseCodeBlock extends LitElement {\n  static readonly styles = [styles];\n\n  abstract render(): TemplateResult;\n\n  protected get content() {\n    const script = this.querySelector<HTMLScriptElement>('script[type]');\n    if (\n      script?.type !== 'text/javascript-sample' &&\n      !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n      return '';\n    } else {\n      return script?.textContent ?? '';\n    }\n  }\n\n  protected dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n}\n"]}

package/pf-code-block/demo/demo.css

@@ -0,0 +1,4 @@
+article { 
+  margin-left: 4em;
+  margin-right: 4em;
+}

package/pf-code-block/demo/pf-code-block.js

@@ -0,0 +1,2 @@
+import '@patternfly/elements/pf-code-block/pf-code-block.js';
+import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';

package/pf-code-block/pf-code-block.css

@@ -0,0 +1,53 @@
+:host {
+  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);
+  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);
+  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
+}
+
+#container {
+  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);
+  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);
+  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);
+  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);
+}
+
+#header {
+  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);
+}
+
+#container {
+  margin: 0;
+}
+
+pre {
+  margin: 0;
+}
+
+slot[name="actions"] {
+  display: flex;
+  justify-content: end;
+}
+
+#expanded {
+  display: inline;
+}
+
+button {
+  display: flex;
+  background: none;
+  border: none;
+  padding: 6px 16px 6px 0;
+  color: #06c;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button svg {
+  color: #151515;
+  margin-right: 12px;
+  transition: .2s ease-in 0s;
+}
+
+.expanded button svg {
+  transform: rotate(-90deg);
+}

package/pf-code-block/pf-code-block.d.ts

@@ -0,0 +1,32 @@
+import { BaseCodeBlock } from './BaseCodeBlock.js';
+/**
+ * @slot code
+ *       The slot to put the code in
+ * @slot expandable-code
+ *       The slot to put the code in that should be revealed when the "Show more" button is
+ *       clicked to expand the code-block
+ * @slot actions
+ *       Contains the actions for the code-block. For example, copy to clipboard.
+ * @attr {boolean} expanded {@default `false`}
+ *       Indicates if the code-block has been expanded
+ * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}
+ * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}
+ * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}
+ * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace`}
+ */
+export declare class PfCodeBlock extends BaseCodeBlock {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    expanded: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-code-block': PfCodeBlock;
+    }
+}

package/pf-code-block/pf-code-block.js

@@ -0,0 +1,70 @@
+var _PfCodeBlock_instances, _PfCodeBlock_toggle, _PfCodeBlock_expandedContent_get;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { BaseCodeBlock } from './BaseCodeBlock.js';
+import { css } from "lit";
+const styles = css `:host {\n  background-color: var(--pf-c-code-block--BackgroundColor, #f0f0f0);\n  font-size: var(--pf-c-code-block__pre--FontSize, 0.875rem);\n  font-family: var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);\n}\n\n#container {\n  padding-top: var(--pf-c-code-block__content--PaddingTop, 1rem);\n  padding-right: var(--pf-c-code-block__content--PaddingRight, 1rem);\n  padding-bottom: var(--pf-c-code-block__content--PaddingBottom, 1rem);\n  padding-left: var(--pf-c-code-block__content--PaddingLeft, 1rem);\n}\n\n#header {\n  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth, 1px) solid var(--pf-c-code-block__header--BorderBottomColor, #d2d2d2);\n}\n\n#container {\n  margin: 0;\n}\n\npre {\n  margin: 0;\n}\n\nslot[name="actions"] {\n  display: flex;\n  justify-content: end;\n}\n\n#expanded {\n  display: inline;\n}\n\nbutton {\n  display: flex;\n  background: none;\n  border: none;\n  padding: 6px 16px 6px 0;\n  color: #06c;\n  cursor: pointer;\n  font-size: 16px;\n}\n\nbutton svg {\n  color: #151515;\n  margin-right: 12px;\n  transition: .2s ease-in 0s;\n}\n\n.expanded button svg {\n  transform: rotate(-90deg);\n}\n`;
+/**
+ * @slot code
+ *       The slot to put the code in
+ * @slot expandable-code
+ *       The slot to put the code in that should be revealed when the "Show more" button is
+ *       clicked to expand the code-block
+ * @slot actions
+ *       Contains the actions for the code-block. For example, copy to clipboard.
+ * @attr {boolean} expanded {@default `false`}
+ *       Indicates if the code-block has been expanded
+ * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}
+ * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}
+ * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}
+ * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}
+ * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace`}
+ */
+let PfCodeBlock = class PfCodeBlock extends BaseCodeBlock {
+    constructor() {
+        super(...arguments);
+        _PfCodeBlock_instances.add(this);
+        this.expanded = false;
+    }
+    render() {
+        const { expanded } = this;
+        return html `
+      <div id="header">
+        <div id="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+      <div id="container" class="${classMap({ expanded })}">
+        <pre><code id="content">${this.content}</code><code id="code-block-expand"
+          ?hidden="${!expanded}">${__classPrivateFieldGet(this, _PfCodeBlock_instances, "a", _PfCodeBlock_expandedContent_get)}</code></pre>
+        <button ?hidden="${!__classPrivateFieldGet(this, _PfCodeBlock_instances, "a", _PfCodeBlock_expandedContent_get)}"
+                @click=${__classPrivateFieldGet(this, _PfCodeBlock_instances, "m", _PfCodeBlock_toggle)}
+                aria-expanded=${this.expanded}
+                aria-controls="code-block-expand">
+          <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 256 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
+          ${!this.expanded ? 'Show more' : 'Show less'}
+        </button>
+      </div>
+    `;
+    }
+};
+_PfCodeBlock_instances = new WeakSet(), _PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
+    this.expanded = !this.expanded;
+}, _PfCodeBlock_expandedContent_get = function _PfCodeBlock_expandedContent_get() {
+    return this.querySelector('script[data-expand]')?.textContent ?? '';
+};
+PfCodeBlock.styles = [...BaseCodeBlock.styles, styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfCodeBlock.prototype, "expanded", void 0);
+PfCodeBlock = __decorate([
+    customElement('pf-code-block')
+], PfCodeBlock);
+export { PfCodeBlock };
+//# sourceMappingURL=pf-code-block.js.map

package/pf-code-block/pf-code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;;AAGnD;;;;;;;;;;;;;;;;;;;GAmBG;AAGI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IA+B/D,CAAC;IArBU,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,IAAI,CAAC,OAAO;qBACzB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC7B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;YAGjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;IA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACtE,CAAC;AAVe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAHlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB;SAlCY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { BaseCodeBlock } from './BaseCodeBlock.js';\nimport styles from './pf-code-block.css';\n\n/**\n * @slot code\n *       The slot to put the code in\n * @slot expandable-code\n *       The slot to put the code in that should be revealed when the \"Show more\" button is\n *       clicked to expand the code-block\n * @slot actions\n *       Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} expanded {@default `false`}\n *       Indicates if the code-block has been expanded\n * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}\n * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace`}\n */\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends BaseCodeBlock {\n  static readonly styles = [...BaseCodeBlock.styles, styles];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  #toggle() {\n    this.expanded = !this.expanded;\n  }\n\n  get #expandedContent(): string {\n    return this.querySelector('script[data-expand]')?.textContent ?? '';\n  }\n\n  override render() {\n    const { expanded } = this;\n    return html`\n      <div id=\"header\">\n        <div id=\"actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n      <div id=\"container\" class=\"${classMap({ expanded })}\">\n        <pre><code id=\"content\">${this.content}</code><code id=\"code-block-expand\"\n          ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n        <button ?hidden=\"${!this.#expandedContent}\"\n                @click=${this.#toggle}\n                aria-expanded=${this.expanded}\n                aria-controls=\"code-block-expand\">\n          <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path></svg>\n          ${!this.expanded ? 'Show more' : 'Show less'}\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-code-block': PfCodeBlock;\n  }\n}\n"]}

package/pf-code-block/test/pf-code-block.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-code-block/test/pf-code-block.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-code-block';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-code-block.e2e.js.map

package/pf-code-block/test/pf-code-block.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-code-block.e2e.js","sourceRoot":"","sources":["pf-code-block.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,eAAe,CAAC;AAEhC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-code-block';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-code-block/test/pf-code-block.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-code-block/test/pf-code-block.spec.js

@@ -0,0 +1,86 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfCodeBlock } from '@patternfly/elements/pf-code-block/pf-code-block.js';
+const element = html `
+  <pf-code-block id="code">
+    <script type="application/openshift">
+      apiVersion: helm.openshift.io/v1beta1/
+      kind: HelmChartRepository
+      metadata:
+      name: azure-sample-repo0oooo00ooo
+      spec:
+      connectionConfig:
+      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+    </script>
+    <pf-clipboard-copy slot="actions" copy-from="#code"></pf-clipboard-copy>
+  </pf-code-block>
+`;
+const expandElement = html `
+  <pf-code-block id="expandable-code">
+    <script type="application/openshift">
+      apiVersion: helm.openshift.io/v1beta1/
+      kind: HelmChartRepository
+      metadata:
+      name: azure-sample-repo</script><script type="application/openshift" data-expand>
+      spec:
+      connectionConfig:
+      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+    </script>
+    <pf-clipboard-copy slot="actions" copy-from="#expandable-code"></pf-clipboard-copy>
+  </pf-code-block>
+`;
+const expandElementByDefault = html `
+  <pf-code-block id="expandable-code-expanded" expanded>
+    <script type="application/openshift">
+      apiVersion: helm.openshift.io/v1beta1/
+      kind: HelmChartRepository
+      metadata:
+      name: azure-sample-repo</script><script type="application/openshift" data-expand>
+      spec:
+      connectionConfig:
+      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+    </script>
+    <pf-clipboard-copy slot="actions" copy-from="#expandable-code-expanded"></pf-clipboard-copy>
+  </pf-code-block>
+`;
+describe('<pf-code-block>', function () {
+    it('should upgrade', async function () {
+        const el = await createFixture(element);
+        const klass = customElements.get('pf-code-block');
+        expect(el)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfCodeBlock);
+    });
+    it('should not show a "Show more" button by default', async function () {
+        const el = await createFixture(element);
+        const button = el.shadowRoot?.querySelector('button');
+        expect(button?.hidden).to.be.true;
+    });
+    it('should show a "Show more" button if content is present in the expandable-code slot', async function () {
+        const expandEl = await createFixture(expandElement);
+        const expandButton = expandEl.shadowRoot?.querySelector('button');
+        expect(expandButton).to.not.be.null;
+    });
+    it('should expand the code block when the "Show more" button is clicked', async function () {
+        const expandEl = await createFixture(expandElement);
+        const expandButton = expandEl.shadowRoot?.querySelector('button');
+        expandButton?.click();
+        await nextFrame();
+        expect(expandEl.hasAttribute('expanded')).to.be.true;
+        expect(expandButton?.getAttribute('aria-expanded')).to.equal('true');
+    });
+    it('should toggle the "Show more" button text to "Show less" when the button is clicked', async function () {
+        const expandEl = await createFixture(expandElement);
+        const expandButton = expandEl.shadowRoot?.querySelector('button');
+        expandButton?.click();
+        await nextFrame();
+        expect(expandButton?.textContent?.trim()).to.equal('Show less');
+    });
+    it('should be expanded by default if the expanded attribute is present on render', async function () {
+        const expandByDefaultEl = await createFixture(expandElementByDefault);
+        const expandButton = expandByDefaultEl.shadowRoot?.querySelector('button');
+        expect(expandButton?.textContent?.trim()).to.equal('Show less');
+    });
+});
+//# sourceMappingURL=pf-code-block.spec.js.map

package/pf-code-block/test/pf-code-block.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-code-block.spec.js","sourceRoot":"","sources":["pf-code-block.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfCodeBlock } from '@patternfly/elements/pf-code-block/pf-code-block.js';\n\nconst element = html`\n  <pf-code-block id=\"code\">\n    <script type=\"application/openshift\">\n      apiVersion: helm.openshift.io/v1beta1/\n      kind: HelmChartRepository\n      metadata:\n      name: azure-sample-repo0oooo00ooo\n      spec:\n      connectionConfig:\n      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs\n    </script>\n    <pf-clipboard-copy slot=\"actions\" copy-from=\"#code\"></pf-clipboard-copy>\n  </pf-code-block>\n`;\n\nconst expandElement = html`\n  <pf-code-block id=\"expandable-code\">\n    <script type=\"application/openshift\">\n      apiVersion: helm.openshift.io/v1beta1/\n      kind: HelmChartRepository\n      metadata:\n      name: azure-sample-repo</script><script type=\"application/openshift\" data-expand>\n      spec:\n      connectionConfig:\n      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs\n    </script>\n    <pf-clipboard-copy slot=\"actions\" copy-from=\"#expandable-code\"></pf-clipboard-copy>\n  </pf-code-block>\n`;\n\nconst expandElementByDefault = html`\n  <pf-code-block id=\"expandable-code-expanded\" expanded>\n    <script type=\"application/openshift\">\n      apiVersion: helm.openshift.io/v1beta1/\n      kind: HelmChartRepository\n      metadata:\n      name: azure-sample-repo</script><script type=\"application/openshift\" data-expand>\n      spec:\n      connectionConfig:\n      url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs\n    </script>\n    <pf-clipboard-copy slot=\"actions\" copy-from=\"#expandable-code-expanded\"></pf-clipboard-copy>\n  </pf-code-block>\n`;\n\ndescribe('<pf-code-block>', function() {\n  it('should upgrade', async function() {\n    const el = await createFixture <PfCodeBlock>(element);\n    const klass = customElements.get('pf-code-block');\n    expect(el)\n      .to.be.an.instanceOf(klass)\n      .and\n      .to.be.an.instanceOf(PfCodeBlock);\n  });\n\n  it('should not show a \"Show more\" button by default', async function() {\n    const el = await createFixture <PfCodeBlock>(element);\n    const button = el.shadowRoot?.querySelector('button');\n    expect(button?.hidden).to.be.true;\n  });\n\n  it('should show a \"Show more\" button if content is present in the expandable-code slot', async function() {\n    const expandEl = await createFixture<PfCodeBlock>(expandElement);\n    const expandButton = expandEl.shadowRoot?.querySelector('button');\n    expect(expandButton).to.not.be.null;\n  });\n\n  it('should expand the code block when the \"Show more\" button is clicked', async function() {\n    const expandEl = await createFixture<PfCodeBlock>(expandElement);\n    const expandButton = expandEl.shadowRoot?.querySelector('button');\n    expandButton?.click();\n    await nextFrame();\n    expect(expandEl.hasAttribute('expanded')).to.be.true;\n    expect(expandButton?.getAttribute('aria-expanded')).to.equal('true');\n  });\n\n  it('should toggle the \"Show more\" button text to \"Show less\" when the button is clicked', async function() {\n    const expandEl = await createFixture<PfCodeBlock>(expandElement);\n    const expandButton = expandEl.shadowRoot?.querySelector('button');\n    expandButton?.click();\n    await nextFrame();\n    expect(expandButton?.textContent?.trim()).to.equal('Show less');\n  });\n\n  it('should be expanded by default if the expanded attribute is present on render', async function() {\n    const expandByDefaultEl = await createFixture<PfCodeBlock>(expandElementByDefault);\n    const expandButton = expandByDefaultEl.shadowRoot?.querySelector('button');\n    expect(expandButton?.textContent?.trim()).to.equal('Show less');\n  });\n});\n"]}

package/pf-icon/BaseIcon.css

@@ -0,0 +1,22 @@
+:host {
+  position: relative;
+  display:  inline-block;
+  line-height:  0;
+  height: fit-content !important;
+  width: fit-content !important;
+}
+
+#container {
+  display: grid;
+  grid-template: 1fr / 1fr;
+  place-content: center;
+}
+
+#container.content ::slotted(*) {
+  display: none;
+}
+
+svg {
+  fill: currentcolor;
+}
+

package/pf-icon/BaseIcon.d.ts

@@ -0,0 +1,42 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+export type URLGetter = (set: string, icon: string) => URL;
+/**
+ * Icon component lazy-loads icons and allows custom icon sets
+ *
+ * @slot - Slotted content is used as a fallback in case the icon doesn't load
+ * @fires load - Fired when an icon is loaded and rendered
+ * @fires error - Fired when an icon fails to load
+ * @csspart fallback - Container for the fallback (i.e. slotted) content
+ */
+export declare abstract class BaseIcon extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']): void;
+    static getIconUrl: URLGetter;
+    private static onIntersect;
+    private static io;
+    private static getters;
+    private static instances;
+    static defaultIconSet: string;
+    /** Icon set */
+    set: string;
+    /** Icon name */
+    icon: string;
+    /** Size of the icon */
+    abstract size: string;
+    /**
+     * Controls how eager the element will be to load the icon data
+     * - `eager`: eagerly load the icon, blocking the main thread
+     * - `idle`: wait for the browser to attain an idle state before loading
+     * - `lazy` (default): wait for the element to enter the viewport before loading
+     */
+    loading?: 'idle' | 'lazy' | 'eager';
+    /** Icon content. Any value that lit can render */
+    private content?;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    protected load(): Promise<void>;
+}

package/pf-icon/BaseIcon.js

@@ -0,0 +1,138 @@
+var _BaseIcon_instances, _a, _BaseIcon_intersecting, _BaseIcon_logger, _BaseIcon_class_get, _BaseIcon_lazyLoad, _BaseIcon_iconChanged;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { css } from "lit";
+const style = css `:host {\n  position: relative;\n  display:  inline-block;\n  line-height:  0;\n  height: fit-content !important;\n  width: fit-content !important;\n}\n\n#container {\n  display: grid;\n  grid-template: 1fr / 1fr;\n  place-content: center;\n}\n\n#container.content ::slotted(*) {\n  display: none;\n}\n\nsvg {\n  fill: currentcolor;\n}\n\n`;
+/** requestIdleCallback when available, requestAnimationFrame when not */
+const ric = window.requestIdleCallback ?? window.requestAnimationFrame;
+/** Fired when an icon fails to load */
+class IconLoadError extends ErrorEvent {
+    constructor(pathname, 
+    /** The original error when importing the icon module */
+    originalError) {
+        super('error', { message: `Could not load icon at ${pathname}` });
+        this.originalError = originalError;
+    }
+}
+/**
+ * Icon component lazy-loads icons and allows custom icon sets
+ *
+ * @slot - Slotted content is used as a fallback in case the icon doesn't load
+ * @fires load - Fired when an icon is loaded and rendered
+ * @fires error - Fired when an icon fails to load
+ * @csspart fallback - Container for the fallback (i.e. slotted) content
+ */
+export class BaseIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseIcon_instances.add(this);
+        /** Icon set */
+        this.set = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).defaultIconSet;
+        /** Icon name */
+        this.icon = '';
+        /**
+         * Controls how eager the element will be to load the icon data
+         * - `eager`: eagerly load the icon, blocking the main thread
+         * - `idle`: wait for the browser to attain an idle state before loading
+         * - `lazy` (default): wait for the element to enter the viewport before loading
+         */
+        this.loading = 'lazy';
+        _BaseIcon_intersecting.set(this, false);
+        _BaseIcon_logger.set(this, new Logger(this));
+    }
+    static addIconSet(setName, getter) {
+        if (typeof getter !== 'function') {
+            Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);
+        }
+        else {
+            this.getters.set(setName, getter);
+            for (const instance of this.instances) {
+                instance.load();
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).instances.add(this);
+    }
+    willUpdate(changed) {
+        if (changed.has('icon')) {
+            __classPrivateFieldGet(this, _BaseIcon_instances, "m", _BaseIcon_iconChanged).call(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).instances.delete(this);
+    }
+    render() {
+        const content = this.content ?? ''; /* eslint-disable indent */
+        return html `
+      <div id="container" aria-hidden="true">${content}<span part="fallback" ?hidden=${!!content}>
+          <slot></slot>
+        </span>
+      </div>
+    `; /* eslint-enable indent */
+    }
+    async load() {
+        const { set, icon, } = this;
+        const getter = __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getters.get(set) ?? __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).getIconUrl;
+        let pathname = 'UNKNOWN ICON';
+        if (set && icon) {
+            try {
+                ({ pathname } = getter(set, icon));
+                const mod = await import(pathname);
+                this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;
+                await this.updateComplete;
+                this.dispatchEvent(new Event('load', { bubbles: true }));
+            }
+            catch (error) {
+                const event = new IconLoadError(pathname, error);
+                __classPrivateFieldGet(this, _BaseIcon_logger, "f").error(error.message);
+                this.dispatchEvent(event);
+            }
+        }
+    }
+}
+_a = BaseIcon, _BaseIcon_intersecting = new WeakMap(), _BaseIcon_logger = new WeakMap(), _BaseIcon_instances = new WeakSet(), _BaseIcon_class_get = function _BaseIcon_class_get() {
+    return this.constructor;
+}, _BaseIcon_lazyLoad = function _BaseIcon_lazyLoad() {
+    __classPrivateFieldGet(this, _BaseIcon_instances, "a", _BaseIcon_class_get).io.observe(this);
+    if (__classPrivateFieldGet(this, _BaseIcon_intersecting, "f")) {
+        this.load();
+    }
+}, _BaseIcon_iconChanged = function _BaseIcon_iconChanged() {
+    switch (this.loading) {
+        case 'idle': return void ric(() => this.load());
+        case 'lazy': return void __classPrivateFieldGet(this, _BaseIcon_instances, "m", _BaseIcon_lazyLoad).call(this);
+        case 'eager': return void this.load();
+    }
+};
+BaseIcon.styles = [style];
+BaseIcon.getIconUrl = (set, icon) => new URL(`./icons/${set}/${icon}.js`, import.meta.url);
+BaseIcon.onIntersect = records => records.forEach(({ isIntersecting, target }) => {
+    const icon = target;
+    __classPrivateFieldSet(icon, _BaseIcon_intersecting, isIntersecting, "f");
+    ric(() => {
+        if (__classPrivateFieldGet(icon, _BaseIcon_intersecting, "f")) {
+            icon.load();
+        }
+    });
+});
+BaseIcon.io = new IntersectionObserver(_a.onIntersect);
+BaseIcon.getters = new Map();
+BaseIcon.instances = new Set();
+__decorate([
+    property()
+], BaseIcon.prototype, "set", void 0);
+__decorate([
+    property({ reflect: true })
+], BaseIcon.prototype, "icon", void 0);
+__decorate([
+    property()
+], BaseIcon.prototype, "loading", void 0);
+__decorate([
+    state()
+], BaseIcon.prototype, "content", void 0);
+//# sourceMappingURL=BaseIcon.js.map

package/pf-icon/BaseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n  constructor(\n    pathname: string,\n    /** The original error when importing the icon module */\n    public originalError: Error\n  ) {\n    super('error', { message: `Could not load icon at ${pathname}` });\n  }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n  public static readonly styles = [style];\n\n  public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n    if (typeof getter !== 'function') {\n      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n    } else {\n      this.getters.set(setName, getter);\n      for (const instance of this.instances) {\n        instance.load();\n      }\n    }\n  }\n\n  public static getIconUrl: URLGetter = (set: string, icon: string) =>\n    new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n  private static onIntersect: IntersectionObserverCallback = records =>\n    records.forEach(({ isIntersecting, target }) => {\n      const icon = target as BaseIcon;\n      icon.#intersecting = isIntersecting;\n      ric(() => {\n        if (icon.#intersecting) {\n          icon.load();\n        }\n      });\n    });\n\n  private static io = new IntersectionObserver(this.onIntersect);\n\n  private static getters = new Map<string, URLGetter>();\n\n  private static instances = new Set<BaseIcon>();\n\n  declare public static defaultIconSet: string;\n\n  /** Icon set */\n  @property() set = this.#class.defaultIconSet;\n\n  /** Icon name */\n  @property({ reflect: true }) icon = '';\n\n  /** Size of the icon */\n  abstract size: string;\n\n  /**\n   * Controls how eager the element will be to load the icon data\n   * - `eager`: eagerly load the icon, blocking the main thread\n   * - `idle`: wait for the browser to attain an idle state before loading\n   * - `lazy` (default): wait for the element to enter the viewport before loading\n   */\n  @property() loading?: 'idle'|'lazy'|'eager' = 'lazy';\n\n  /** Icon content. Any value that lit can render */\n  @state() private content?: unknown;\n\n  #intersecting = false;\n\n  #logger = new Logger(this);\n\n  get #class(): typeof BaseIcon {\n    return this.constructor as typeof BaseIcon;\n  }\n\n  #lazyLoad() {\n    this.#class.io.observe(this);\n    if (this.#intersecting) {\n      this.load();\n    }\n  }\n\n  #iconChanged() {\n    switch (this.loading) {\n      case 'idle': return void ric(() => this.load());\n      case 'lazy': return void this.#lazyLoad();\n      case 'eager': return void this.load();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#class.instances.add(this);\n  }\n\n  willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon')) {\n      this.#iconChanged();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#class.instances.delete(this);\n  }\n\n  render() {\n    const content = this.content ?? ''; /* eslint-disable indent */\n    return html`\n      <div id=\"container\" aria-hidden=\"true\">${content\n       }<span part=\"fallback\" ?hidden=${!!content}>\n          <slot></slot>\n        </span>\n      </div>\n    `;/* eslint-enable indent */\n  }\n\n  protected async load() {\n    const { set, icon, } = this;\n    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n    let pathname = 'UNKNOWN ICON';\n    if (set && icon) {\n      try {\n        ({ pathname } = getter(set, icon));\n        const mod = await import(pathname);\n        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n        await this.updateComplete;\n        this.dispatchEvent(new Event('load', { bubbles: true }));\n      } catch (error: unknown) {\n        const event = new IconLoadError(pathname, error as Error);\n        this.#logger.error((error as IconLoadError).message);\n        this.dispatchEvent(event);\n      }\n    }\n  }\n}\n"]}

package/pf-icon/demo/custom-icon-sets.js

@@ -0,0 +1,5 @@
+import '/docs/zero-md.js';
+import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
+
+PfIcon.addIconSet('rh', (set, icon) =>
+  new URL(`./icons/${set}/${icon}.js`, import.meta.url));

package/pf-icon/demo/demo.css

@@ -0,0 +1,53 @@
+[data-demo] {
+  padding: 1em;
+}
+
+output ul {
+  --g: repeat(auto-fit, var(--pf-global--icon--FontSize--xl, 3.375rem));
+  display: grid;
+  grid-template: var(--g) / var(--g);
+  gap: 1em;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+li button {
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+li button:focus {
+  color: gray;
+}
+
+dl {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--pf-global--spacer--md, 1rem);
+  align-items: end;
+}
+
+dl div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+dd, dt {
+  margin: 0;
+}
+
+dt {
+  order: 1;
+}
+
+#colors dt { text-transform: capitalize; }
+.danger { color: var(--pf-global--danger-color--200, #a30000); }
+.default { color: var(--pf-global--default-color--200, #009596); }
+.info { color: var(--pf-global--info-color--100, #2b9af3); }
+.success { color: var(--pf-global--success-color--100, #3e8635); }
+.warning { color: var(--pf-global--warning-color--100, #f0ab00); }
+.disabled { color: var(--pf-global--disabled-color--100, #6a6e73); }

package/pf-icon/demo/icons/rh/boba-tea.js

@@ -0,0 +1,5 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="M13 14.62h10c.35 0 .62-.28.62-.62s-.28-.62-.62-.62H13c-.35 0-.62.28-.62.62s.28.62.62.62Z"/>
+  <path d="M28 8.38h-2.25l.69-3.25c.04-.18 0-.38-.13-.52s-.3-.23-.49-.23h-3a.63.63 0 0 0-.61.5l-.74 3.5H8c-.35 0-.62.28-.62.62s.28.62.62.62h.38V13c0 .17.07.33.18.44l.86.86 2.97 16.81c.05.3.31.52.62.52h10c.3 0 .56-.22.62-.52L26.6 14.3l.86-.86a.62.62 0 0 0 .18-.44V9.62h.38c.35 0 .62-.28.62-.62s-.28-.62-.62-.62Zm-4.66-2.75h1.72l-.58 2.75h-1.72l.58-2.75Zm3.04 7.12-.82.82c-.09.09-.15.21-.17.33l-2.91 16.48h-8.96L10.61 13.9a.585.585 0 0 0-.17-.33l-.82-.82V9.63h16.76v3.12Z"/>
+  <path d="M16 25.38a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm4-4a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Zm-4-5a1.62 1.62 0 1 0 0 3.24 1.62 1.62 0 0 0 0-3.24Zm0 2a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76Z"/>
+</svg>`;export default t.content.cloneNode(true);

package/pf-icon/demo/icons/rh/lifecycle.js

@@ -0,0 +1,3 @@
+const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path d="m25.32 10.66-2.88-.13a.63.63 0 0 0-.06 1.25l4.2.19a.59.59 0 0 0 .42-.17.62.62 0 0 0 .2-.43l.19-4.2a.63.63 0 0 0-1.25 0l-.11 2.5A11.61 11.61 0 0 0 14.24 7a3.12 3.12 0 0 0-5.86 1.5c.11 4.3 6.52 4 6.22-.27a10.3 10.3 0 0 1 10.72 2.43Zm-12.49-.83a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Zm-.33 14.55a3.05 3.05 0 0 0-2 .74A10.25 10.25 0 0 1 8 15.17l1.3 2.59a.62.62 0 0 0 1.11-.56l-1.85-3.76a.63.63 0 0 0-.84-.28L4 15a.63.63 0 0 0 .56 1.12L6.76 15a11.55 11.55 0 0 0 3 11.08 3.12 3.12 0 1 0 2.79-1.74Zm1.33 4.45a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66ZM31.62 17a3.12 3.12 0 1 0-3.48 3.09A10.34 10.34 0 0 1 20 28.18l1.73-2.32a.63.63 0 0 0-1-.75l-2.5 3.38a.63.63 0 0 0-.12.46.6.6 0 0 0 .25.41l3.37 2.51a.63.63 0 0 0 .75-1l-2-1.49a11.6 11.6 0 0 0 9-9.4A3.09 3.09 0 0 0 31.62 17Zm-1.79 1.33a1.88 1.88 0 0 1-2.66-2.66 1.88 1.88 0 0 1 2.66 2.66Z"/>
+</svg>`;export default t.content.cloneNode(true);