@patternfly/elements 4.1.0 → 4.3.0

package/pf-alert/pf-alert.js

@@ -0,0 +1,406 @@
+var _PfAlert_instances, _PfAlert_timeoutId, _PfAlert_renderDefaultTitle, _PfAlert_onCloseClick, _PfAlert_onToggleClick;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { observes } from '@patternfly/pfe-core/decorators.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import { css } from "lit";
+const styles = css `[hidden] {
+  display: none !important;
+}
+
+:host {
+\t--pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+\t--pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+\t--pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
+\t--pf-c-alert--GridTemplateAreas: "icon title close" ". description description" ". action action";
+\t--pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md, 2px);
+\t--pf-c-alert--BorderTopColor: var(--pf-global--default-color--200, #009596);
+\t--pf-c-alert--PaddingTop: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-alert--PaddingRight: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-alert--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-alert--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-alert__FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+\t--pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem) - 0.0625rem);
+\t--pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
+\t--pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md, 1rem));
+\t--pf-c-alert__toggle-icon--Rotate: 0;
+\t--pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+\t--pf-c-alert__icon--Color: var(--pf-global--default-color--200, #009596);
+\t--pf-c-alert__icon--MarginTop: 0.0625rem;
+\t--pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
+\t--pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem);
+\t--pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
+\t--pf-c-alert__title--Color: var(--pf-global--default-color--300, #003737);
+\t--pf-c-alert__title--max-lines: 1;
+\t--pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t--pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+\t--pf-c-alert__action--TranslateY: 0.125rem;
+\t--pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
+\t--pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+\t--pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs, 0.25rem);
+\t--pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
+\t--pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md, 1rem);
+\t--pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
+\t--pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg, 1.5rem);
+\t--pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100, #3e8635);
+\t--pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100, #3e8635);
+\t--pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200, #1e4f18);
+\t--pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100, #c9190b);
+\t--pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100, #c9190b);
+\t--pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200, #a30000);
+\t--pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100, #f0ab00);
+\t--pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+\t--pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200, #795600);
+\t--pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100, #2b9af3);
+\t--pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100, #2b9af3);
+\t--pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200, #002952);
+\t--pf-c-alert--m-inline--BoxShadow: none;
+\t--pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50, #f2f9f9);
+\t--pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50, #f3faf2);
+\t--pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50, #faeae8);
+\t--pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50, #fdf7e7);
+\t--pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
+\t--pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
+\t--pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
+\t--pf-c-alert--m-inline--m-plain--PaddingTop: 0;
+\t--pf-c-alert--m-inline--m-plain--PaddingRight: 0;
+\t--pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
+\t--pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
+\t--pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
+\t--pf-c-alert--m-expandable--GridTemplateAreas: "toggle icon title close" ". . description description" ". . action action";
+\t--pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
+\t--pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
+\t--pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
+\tcolor: var(--pf-global--Color--100, #151515);
+\tposition: relative;
+\tdisplay: grid;
+\tpadding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
+\tfont-size: var(--pf-c-alert__FontSize);
+\tbackground-color: var(--pf-c-alert--BackgroundColor);
+\tborder-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
+\tbox-shadow: var(--pf-c-alert--BoxShadow);
+\tgrid-template-columns: var(--pf-c-alert--GridTemplateColumns);
+\tgrid-template-areas: var(--pf-c-alert--GridTemplateAreas);
+}
+
+:host([variant="success"]) {
+  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
+  --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
+  --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
+}
+
+:host([variant="danger"]) {
+  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
+  --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
+  --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
+}
+
+:host([variant="warning"]) {
+  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
+  --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
+  --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
+}
+
+:host([variant="info"]) {
+  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
+  --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
+  --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
+}
+
+:host([inline]) {
+  --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
+  --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
+}
+
+:host([plain]) {
+  --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
+  --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
+  --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
+  --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
+  --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
+  --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
+}
+
+:host([expandable]) {
+  --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
+  --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
+  --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
+}
+
+:host([expanded]) {
+  --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
+  --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
+}
+
+#toggle {
+  margin-top: var(--pf-c-alert__toggle--MarginTop);
+  margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
+  margin-left: var(--pf-c-alert__toggle--MarginLeft);
+}
+
+#icon {
+  grid-area: icon;
+  display: flex;
+  margin-top: var(--pf-c-alert__icon--MarginTop);
+  margin-right: var(--pf-c-alert__icon--MarginRight);
+  font-size: var(--pf-c-alert__icon--FontSize);
+  --pf-icon--size: var(--pf-c-alert__icon--FontSize);
+  color: var(--pf-c-alert__icon--Color);
+  pf-icon,
+  ::slotted(pf-icon) {
+    translate: 0 0.125em;
+  }
+}
+
+#title {
+  grid-area: title;
+  font-weight: var(--pf-c-alert__title--FontWeight);
+  color: var(--pf-c-alert__title--Color);
+  word-break: break-word;
+  ::slotted(*) {
+    color: inherit;
+    font-weight: inherit;
+  }
+  :is(h1,h2,h3,h4,h5,h6),
+  ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
+    margin-block: 0 !important;
+  }
+}
+
+#close {
+  grid-area: close;
+}
+
+#description {
+  grid-area: description;
+  padding-top: var(--pf-c-alert__description--PaddingTop);
+  word-break: break-word;
+}
+
+#actions {
+  grid-area: action;
+  --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
+
+  & ::slotted(a) {
+    text-decoration: none;
+    color: #06c;
+    margin-inline-end: 1rem;
+  }
+
+  & ::slotted(a:hover),
+  & ::slotted(a:focus),
+  & ::slotted(a:active) {
+    color: #004080;
+  }
+}
+`;
+const VariantIconMap = new Map(Object.entries({
+    info: 'info-circle',
+    success: 'check-circle',
+    warning: 'exclamation-triangle',
+    danger: 'exclamation-circle',
+    neutral: 'bell',
+}));
+export class PfAlertCloseEvent extends Event {
+    constructor(reason = 'closed') {
+        super('close', { bubbles: true, cancelable: true });
+        this.reason = reason;
+    }
+}
+let PfAlert = class PfAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfAlert_instances.add(this);
+        /**
+         * Use the `timeout` property to automatically dismiss an alert after a period
+         * of time. If set to `true`, the timeout will be 8000 milliseconds. Provide a
+         * specific value to dismiss the alert after a different number of
+         * milliseconds.
+         */
+        this.timeout = 0;
+        /**
+         * PatternFly supports several alert variants for different scenarios.
+         * Each variant has an associated status icon, background, and alert title
+         * coded to communicate the severity of an alert. Use the variant property to
+         * apply the following styling options. If no variant is specified, then the
+         * variant will be set to "default".
+         *
+         * - **Default** - Use for generic messages with no associated severity
+         * - **Info** - Use for general informational messages
+         * - **Success** - Use to indicate that a task or process has been completed successfully
+         * - **Warning** - Use to indicate that a non-critical error has occurred
+         * - **Danger** - Use to indicate that a critical or blocking error has occurred
+         */
+        this.variant = 'neutral';
+        /**
+         * Use inline alerts to display an alert inline with content. All alert
+         * variants may use the `inline` attribute to position alerts in content-heavy
+         * areas, such as within forms, wizards, or drawers.
+         */
+        this.inline = false;
+        /**
+         * Use the `plain` attribute to make any inline alert plain. Plain styling
+         * removes the colored background but keeps colored text and icons.
+         */
+        this.plain = false;
+        /**
+         * An alert can contain additional, hidden information that is made visible
+         * when users click a caret icon. This information can be expanded and
+         * collapsed each time the icon is clicked.
+         *
+         * It is not recommended to use an expandable alert with a timeout in a toast
+         * alert group because the alert could timeout before users have time to
+         * interact with and view the entire alert.
+         *
+         * See the toast alert considerations section of the alert accessibility
+         * documentation to understand the accessibility risks associated with using
+         * toast alerts.
+         */
+        this.expandable = false;
+        /**
+         * True when an expandable alert is expanded
+         */
+        this.expanded = false;
+        /**
+         * When true, the alert displays a close button
+         * Clicking the close button removes the alert
+         */
+        this.dismissable = false;
+        _PfAlert_timeoutId.set(this, void 0);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(__classPrivateFieldGet(this, _PfAlert_timeoutId, "f"));
+    }
+    render() {
+        const { expandable, expanded, variant } = this;
+        const icon = this.icon ?? VariantIconMap.get(variant);
+        return html `
+      <pf-button id="toggle"
+                 plain
+                 ?hidden="${!expandable}"
+                 icon="${expandable ? 'angle-down' : 'angle-right'}"
+                 icon-set="fas"
+                 @click="${__classPrivateFieldGet(this, _PfAlert_instances, "m", _PfAlert_onToggleClick)}"
+                 aria-controls="${ifDefined(expandable ? 'description' : undefined)}"
+                 aria-expanded="${ifDefined(expandable ? String(expanded) : undefined)}"
+                 aria-label="${expanded ? 'Collapse Alert' : 'Expand Alert'}">
+      </pf-button>
+
+      <div id="icon">
+        <slot name="icon">
+          <pf-icon icon="${icon}"></pf-icon>
+        </slot>
+      </div>
+
+      <div id="title">
+        <slot name="title">${__classPrivateFieldGet(this, _PfAlert_instances, "m", _PfAlert_renderDefaultTitle).call(this)}</slot>
+      </div>
+
+      <div id="description"
+           ?hidden="${expandable && !expanded}">
+        <slot></slot>
+      </div>
+
+      <div id="actions">
+        <slot name="actions"></slot>
+      </div>
+
+      <pf-button id="close"
+                 plain
+                 icon="close"
+                 icon-set="patternfly"
+                 ?hidden="${!this.dismissable}"
+                 @click="${__classPrivateFieldGet(this, _PfAlert_instances, "m", _PfAlert_onCloseClick)}">
+      </pf-button>
+    `;
+    }
+    timeoutChanged() {
+        clearTimeout(__classPrivateFieldGet(this, _PfAlert_timeoutId, "f"));
+        let { timeout } = this;
+        if (timeout === true) {
+            timeout = 8000;
+        }
+        if (timeout > 0) {
+            __classPrivateFieldSet(this, _PfAlert_timeoutId, setTimeout(() => {
+                if (this.isConnected && this.dispatchEvent(new PfAlertCloseEvent('timeout'))) {
+                    this.remove();
+                }
+            }, timeout), "f");
+        }
+    }
+};
+_PfAlert_timeoutId = new WeakMap();
+_PfAlert_instances = new WeakSet();
+_PfAlert_renderDefaultTitle = function _PfAlert_renderDefaultTitle() {
+    if (!this.titleText) {
+        return '';
+    }
+    switch (this.titleLevel ?? 3) {
+        case 1: return html `<h1>${this.titleText}</h1>`;
+        case 2: return html `<h2>${this.titleText}</h2>`;
+        case 4: return html `<h4>${this.titleText}</h4>`;
+        case 5: return html `<h5>${this.titleText}</h5>`;
+        case 6: return html `<h6>${this.titleText}</h6>`;
+        case 3:
+        default: return html `<h3>${this.titleText}</h3>`;
+    }
+};
+_PfAlert_onCloseClick = function _PfAlert_onCloseClick() {
+    if (this.isConnected && this.dispatchEvent(new PfAlertCloseEvent())) {
+        clearTimeout(__classPrivateFieldGet(this, _PfAlert_timeoutId, "f"));
+        this.remove();
+    }
+};
+_PfAlert_onToggleClick = function _PfAlert_onToggleClick() {
+    this.expanded = !this.expanded;
+};
+PfAlert.styles = [styles];
+PfAlert.version = "4.3.0";
+__decorate([
+    property({ type: Number })
+], PfAlert.prototype, "timeout", void 0);
+__decorate([
+    property({ reflect: true })
+], PfAlert.prototype, "variant", void 0);
+__decorate([
+    property()
+], PfAlert.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: 'title-text', reflect: true })
+], PfAlert.prototype, "titleText", void 0);
+__decorate([
+    property({ attribute: 'title-level', reflect: true })
+], PfAlert.prototype, "titleLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfAlert.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfAlert.prototype, "plain", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfAlert.prototype, "expandable", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfAlert.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfAlert.prototype, "dismissable", void 0);
+__decorate([
+    observes('timeout')
+], PfAlert.prototype, "timeoutChanged", null);
+PfAlert = __decorate([
+    customElement('pf-alert')
+], PfAlert);
+export { PfAlert };
+//# sourceMappingURL=pf-alert.js.map

package/pf-alert/pf-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-alert.js","sourceRoot":"","sources":["pf-alert.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { observes } from '@patternfly/pfe-core/decorators.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-alert.css';\n\nconst VariantIconMap = new Map(Object.entries({\n  info: 'info-circle',\n  success: 'check-circle',\n  warning: 'exclamation-triangle',\n  danger: 'exclamation-circle',\n  neutral: 'bell',\n}));\n\nexport class PfAlertCloseEvent extends Event {\n  constructor(public reason: 'closed' | 'timeout' = 'closed') {\n    super('close', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * An **alert** is a notification that provides brief information to the user\n * without blocking their workflow.\n *\n * @fires close - When an alert is closed e.g. when close button is clicked or when the alert times\n *                out. Cancel the event to prevent the alert from being removed.\n */\n@customElement('pf-alert')\nexport class PfAlert extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /**\n   * Use the `timeout` property to automatically dismiss an alert after a period\n   * of time. If set to `true`, the timeout will be 8000 milliseconds. Provide a\n   * specific value to dismiss the alert after a different number of\n   * milliseconds.\n   */\n  @property({ type: Number }) timeout: number | true = 0;\n\n  /**\n   * PatternFly supports several alert variants for different scenarios.\n   * Each variant has an associated status icon, background, and alert title\n   * coded to communicate the severity of an alert. Use the variant property to\n   * apply the following styling options. If no variant is specified, then the\n   * variant will be set to \"default\".\n   *\n   * - **Default** - Use for generic messages with no associated severity\n   * - **Info** - Use for general informational messages\n   * - **Success** - Use to indicate that a task or process has been completed successfully\n   * - **Warning** - Use to indicate that a non-critical error has occurred\n   * - **Danger** - Use to indicate that a critical or blocking error has occurred\n   */\n  @property({ reflect: true })\n  variant:\n    | 'warning'\n    | 'custom'\n    | 'neutral'\n    | 'info'\n    | 'success'\n    | 'danger' = 'neutral';\n\n  /**\n   * Use the `icon` attribute to replace a default alert icon with a custom icon.\n   * The `icon` attribute is overridden by the `icon` slot.\n   */\n  @property() icon?: string;\n\n  /**\n   * The title of the alert. Overridden by the title slot.\n   */\n  @property({ attribute: 'title-text', reflect: true }) titleText?: string;\n\n  /**\n   * The heading level of the alert's title. Overridden by the title slot.\n   * Default: 3\n   */\n  @property({ attribute: 'title-level', reflect: true }) titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Use inline alerts to display an alert inline with content. All alert\n   * variants may use the `inline` attribute to position alerts in content-heavy\n   * areas, such as within forms, wizards, or drawers.\n   */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /**\n   * Use the `plain` attribute to make any inline alert plain. Plain styling\n   * removes the colored background but keeps colored text and icons.\n   */\n  @property({ type: Boolean, reflect: true }) plain = false;\n\n  /**\n   * An alert can contain additional, hidden information that is made visible\n   * when users click a caret icon. This information can be expanded and\n   * collapsed each time the icon is clicked.\n   *\n   * It is not recommended to use an expandable alert with a timeout in a toast\n   * alert group because the alert could timeout before users have time to\n   * interact with and view the entire alert.\n   *\n   * See the toast alert considerations section of the alert accessibility\n   * documentation to understand the accessibility risks associated with using\n   * toast alerts.\n   */\n  @property({ reflect: true, type: Boolean }) expandable = false;\n\n  /**\n   * True when an expandable alert is expanded\n   */\n  @property({ reflect: true, type: Boolean }) expanded = false;\n\n  /**\n   * When true, the alert displays a close button\n   * Clicking the close button removes the alert\n   */\n  @property({ reflect: true, type: Boolean }) dismissable = false;\n\n  #timeoutId?: number;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearTimeout(this.#timeoutId);\n  }\n\n  override render(): TemplateResult<1> {\n    const { expandable, expanded, variant } = this;\n    const icon = this.icon ?? VariantIconMap.get(variant);\n    return html`\n      <pf-button id=\"toggle\"\n                 plain\n                 ?hidden=\"${!expandable}\"\n                 icon=\"${expandable ? 'angle-down' : 'angle-right'}\"\n                 icon-set=\"fas\"\n                 @click=\"${this.#onToggleClick}\"\n                 aria-controls=\"${ifDefined(expandable ? 'description' : undefined)}\"\n                 aria-expanded=\"${ifDefined(expandable ? String(expanded) : undefined)}\"\n                 aria-label=\"${expanded ? 'Collapse Alert' : 'Expand Alert'}\">\n      </pf-button>\n\n      <div id=\"icon\">\n        <slot name=\"icon\">\n          <pf-icon icon=\"${icon}\"></pf-icon>\n        </slot>\n      </div>\n\n      <div id=\"title\">\n        <slot name=\"title\">${this.#renderDefaultTitle()}</slot>\n      </div>\n\n      <div id=\"description\"\n           ?hidden=\"${expandable && !expanded}\">\n        <slot></slot>\n      </div>\n\n      <div id=\"actions\">\n        <slot name=\"actions\"></slot>\n      </div>\n\n      <pf-button id=\"close\"\n                 plain\n                 icon=\"close\"\n                 icon-set=\"patternfly\"\n                 ?hidden=\"${!this.dismissable}\"\n                 @click=\"${this.#onCloseClick}\">\n      </pf-button>\n    `;\n  }\n\n  @observes('timeout')\n  protected timeoutChanged(): void {\n    clearTimeout(this.#timeoutId);\n    let { timeout } = this;\n    if (timeout === true) {\n      timeout = 8000;\n    }\n    if (timeout > 0) {\n      this.#timeoutId = setTimeout(() => {\n        if (this.isConnected && this.dispatchEvent(new PfAlertCloseEvent('timeout'))) {\n          this.remove();\n        }\n      }, timeout) as unknown as number;\n    }\n  }\n\n  #renderDefaultTitle() {\n    if (!this.titleText) {\n      return '';\n    }\n    switch (this.titleLevel ?? 3) {\n      case 1: return html`<h1>${this.titleText}</h1>`;\n      case 2: return html`<h2>${this.titleText}</h2>`;\n      case 4: return html`<h4>${this.titleText}</h4>`;\n      case 5: return html`<h5>${this.titleText}</h5>`;\n      case 6: return html`<h6>${this.titleText}</h6>`;\n      case 3:\n      default: return html`<h3>${this.titleText}</h3>`;\n    }\n  }\n\n  #onCloseClick() {\n    if (this.isConnected && this.dispatchEvent(new PfAlertCloseEvent())) {\n      clearTimeout(this.#timeoutId);\n      this.remove();\n    }\n  }\n\n  #onToggleClick() {\n    this.expanded = !this.expanded;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-alert': PfAlert;\n  }\n}\n"]}

package/pf-alert/test/pf-alert.e2e.d.ts

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

package/pf-alert/test/pf-alert.e2e.js

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+test.describe('pf-alert E2E Tests', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.setContent(`
+      <pf-alert variant="info" onClose>
+        <span slot="title">Alert Title</span>
+        <span>Alert description</span>
+      </pf-alert>
+    `);
+    });
+    test('should render title and description', async ({ page }) => {
+        const title = page.locator('pf-alert >>> #title-area slot[name="title"]');
+        const desc = page.locator('pf-alert >>> #description slot');
+        await expect(title).toHaveText('Alert Title');
+        await expect(desc).toHaveText('Alert description');
+    });
+    test('close button removes alert', async ({ page }) => {
+        await page.locator('pf-alert >>> #close-button').click();
+        const alert = page.locator('pf-alert');
+        await expect(alert).toHaveCount(0);
+    });
+    test('toggle button expands/collapses content', async ({ page }) => {
+        await page.setContent(`
+      <pf-alert isExpandable>
+        <span slot="isExpandable">Extra content</span>
+      </pf-alert>
+    `);
+        const toggle = page.locator('pf-alert >>> #toggle-button');
+        await toggle.click();
+        const expandedContent = page.locator('pf-alert >>> #expandable-description');
+        await expect(expandedContent).toBeVisible();
+    });
+    test('keyboard navigation works', async ({ page }) => {
+        const btn = page.locator('pf-alert >>> #close-button');
+        await btn.focus();
+        await page.keyboard.press('Enter');
+        const alert = page.locator('pf-alert');
+        await expect(alert).toHaveCount(0);
+    });
+    test('accessibility checks', async ({ page }) => {
+        const container = page.locator('pf-alert >>> #container');
+        await expect(container).toHaveAttribute('role', 'alert'); // אם הוספת role
+    });
+});
+//# sourceMappingURL=pf-alert.e2e.js.map

package/pf-alert/test/pf-alert.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-alert.e2e.js","sourceRoot":"","sources":["pf-alert.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACvC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACjC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;KAKrB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qCAAqC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,6CAA6C,CAAC,CAAC;QAC1E,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;QAC5D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACpD,MAAM,IAAI,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC,KAAK,EAAE,CAAC;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yCAAyC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACjE,MAAM,IAAI,CAAC,UAAU,CAAC;;;;KAIrB,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC;QAC3D,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QACrB,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAC;QAC7E,MAAM,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACnD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;QACvD,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;QAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;QAC1D,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\n\ntest.describe('pf-alert E2E Tests', () => {\n  test.beforeEach(async ({ page }) => {\n    await page.setContent(`\n      <pf-alert variant=\"info\" onClose>\n        <span slot=\"title\">Alert Title</span>\n        <span>Alert description</span>\n      </pf-alert>\n    `);\n  });\n\n  test('should render title and description', async ({ page }) => {\n    const title = page.locator('pf-alert >>> #title-area slot[name=\"title\"]');\n    const desc = page.locator('pf-alert >>> #description slot');\n    await expect(title).toHaveText('Alert Title');\n    await expect(desc).toHaveText('Alert description');\n  });\n\n  test('close button removes alert', async ({ page }) => {\n    await page.locator('pf-alert >>> #close-button').click();\n    const alert = page.locator('pf-alert');\n    await expect(alert).toHaveCount(0);\n  });\n\n  test('toggle button expands/collapses content', async ({ page }) => {\n    await page.setContent(`\n      <pf-alert isExpandable>\n        <span slot=\"isExpandable\">Extra content</span>\n      </pf-alert>\n    `);\n    const toggle = page.locator('pf-alert >>> #toggle-button');\n    await toggle.click();\n    const expandedContent = page.locator('pf-alert >>> #expandable-description');\n    await expect(expandedContent).toBeVisible();\n  });\n\n  test('keyboard navigation works', async ({ page }) => {\n    const btn = page.locator('pf-alert >>> #close-button');\n    await btn.focus();\n    await page.keyboard.press('Enter');\n    const alert = page.locator('pf-alert');\n    await expect(alert).toHaveCount(0);\n  });\n\n  test('accessibility checks', async ({ page }) => {\n    const container = page.locator('pf-alert >>> #container');\n    await expect(container).toHaveAttribute('role', 'alert'); // אם הוספת role\n  });\n});\n"]}

package/pf-alert/test/pf-alert.spec.d.ts

@@ -0,0 +1 @@
+import '../pf-alert.js';

package/pf-alert/test/pf-alert.spec.js

@@ -0,0 +1,42 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../pf-alert.js';
+describe('pf-alert Unit Tests', () => {
+    it('should create the component', async () => {
+        const el = await fixture(html `<pf-alert></pf-alert>`);
+        expect(el).to.exist;
+        expect(el.variant).to.equal('neutral');
+    });
+    it('should render a title slot', async () => {
+        const el = await fixture(html `
+      <pf-alert><span slot="title">My Title</span></pf-alert>
+    `);
+        const titleSlot = el.shadowRoot.querySelector('#title slot[name="title"]');
+        expect(titleSlot).to.exist;
+    });
+    it('close button should appear when dismissable=true', async () => {
+        const el = await fixture(html `<pf-alert .dismissable=${true}></pf-alert>`);
+        const btn = el.shadowRoot.querySelector('#close');
+        expect(btn.hasAttribute('hidden')).to.be.false;
+    });
+    it('should remove itself after timeout', async () => {
+        const el = await fixture(html `<pf-alert .timeout=${50}></pf-alert>`);
+        const removed = new Promise(resolve => el.addEventListener('close', () => resolve()));
+        await removed;
+        expect(document.body.contains(el)).to.be.false;
+    });
+    it('should toggle expanded when toggle button clicked', async () => {
+        const el = await fixture(html `
+      <pf-alert expandable><span>Content</span></pf-alert>
+    `);
+        await el.updateComplete;
+        const toggle = el.shadowRoot.querySelector('#toggle');
+        const initial = el.expanded;
+        toggle.click();
+        await el.updateComplete;
+        expect(el.expanded).to.equal(!initial);
+        toggle.click();
+        await el.updateComplete;
+        expect(el.expanded).to.equal(initial);
+    });
+});
+//# sourceMappingURL=pf-alert.spec.js.map

package/pf-alert/test/pf-alert.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-alert.spec.js","sourceRoot":"","sources":["pf-alert.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,gBAAgB,CAAC;AAExB,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,uBAAuB,CAAQ,CAAC;QAC7D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACpB,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE5B,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAC5E,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,0BAA0B,IAAI,cAAc,CAAC,CAAC;QAC3E,MAAM,GAAG,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;QACpD,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,sBAAsB,EAAE,cAAc,CAAC,CAAC;QACrE,MAAM,OAAO,GAAG,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC5F,MAAM,OAAO,CAAC;QACd,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE5B,CAAQ,CAAC;QACV,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;QACtE,MAAM,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC;QAC5B,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport '../pf-alert.js';\n\ndescribe('pf-alert Unit Tests', () => {\n  it('should create the component', async () => {\n    const el = await fixture(html`<pf-alert></pf-alert>`) as any;\n    expect(el).to.exist;\n    expect(el.variant).to.equal('neutral');\n  });\n\n  it('should render a title slot', async () => {\n    const el = await fixture(html`\n      <pf-alert><span slot=\"title\">My Title</span></pf-alert>\n    `);\n    const titleSlot = el.shadowRoot!.querySelector('#title slot[name=\"title\"]');\n    expect(titleSlot).to.exist;\n  });\n\n  it('close button should appear when dismissable=true', async () => {\n    const el = await fixture(html`<pf-alert .dismissable=${true}></pf-alert>`);\n    const btn = el.shadowRoot!.querySelector('#close')!;\n    expect(btn.hasAttribute('hidden')).to.be.false;\n  });\n\n  it('should remove itself after timeout', async () => {\n    const el = await fixture(html`<pf-alert .timeout=${50}></pf-alert>`);\n    const removed = new Promise<void>(resolve => el.addEventListener('close', () => resolve()));\n    await removed;\n    expect(document.body.contains(el)).to.be.false;\n  });\n\n  it('should toggle expanded when toggle button clicked', async () => {\n    const el = await fixture(html`\n      <pf-alert expandable><span>Content</span></pf-alert>\n    `) as any;\n    await el.updateComplete;\n    const toggle = el.shadowRoot!.querySelector('#toggle') as HTMLElement;\n    const initial = el.expanded;\n    toggle.click();\n    await el.updateComplete;\n    expect(el.expanded).to.equal(!initial);\n    toggle.click();\n    await el.updateComplete;\n    expect(el.expanded).to.equal(initial);\n  });\n});\n"]}

package/pf-avatar/pf-avatar.css

@@ -1,20 +1,34 @@
 :host {
   display: inline-block;
+	/** Border color for avatar */
 	--pf-c-avatar--BorderColor: transparent;
+	/** Border width for avatar */
 	--pf-c-avatar--BorderWidth: 0;
+	/** Border radius for avatar */
 	--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
+	/** Width for avatar */
 	--pf-c-avatar--Width: 2.25rem;
+	/** Height for avatar */
 	--pf-c-avatar--Height: 2.25rem;
+	/** Width for small avatar */
 	--pf-c-avatar--m-sm--Width: 1.5rem;
+	/** Height for small avatar */
 	--pf-c-avatar--m-sm--Height: 1.5rem;
+	/** Width for medium avatar */
 	--pf-c-avatar--m-md--Width: 2.25rem;
+	/** Height for medium avatar */
 	--pf-c-avatar--m-md--Height: 2.25rem;
+	/** Width for large avatar */
 	--pf-c-avatar--m-lg--Width: 4.5rem;
+	/** Height for large avatar */
 	--pf-c-avatar--m-lg--Height: 4.5rem;
+	/** Width for extra large avatar */
 	--pf-c-avatar--m-xl--Width: 8rem;
+	/** Height for extra large avatar */
 	--pf-c-avatar--m-xl--Height: 8rem;
 	--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
 	--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** Border color for dark avatar */
 	--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
 	--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 	width: var(--pf-c-avatar--Width);

package/pf-avatar/pf-avatar.d.ts

@@ -6,21 +6,8 @@ export declare class PfAvatarLoadEvent extends Event {
 /**
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
  * @summary For displaying a user's avatar image
+ * @alias Avatar
  * @fires {PfAvatarLoadEvent} load - when the avatar loads
- * @cssprop [--pf-c-avatar--Width=24px]
- * @cssprop [--pf-c-avatar--Height=24px]
- * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]
- * @cssprop [--pf-c-avatar--BorderWidth=0]
- * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]
- * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]
- * @cssprop [--pf-c-avatar--m-sm--Width=24px]
- * @cssprop [--pf-c-avatar--m-sm--Height=24px]
- * @cssprop [--pf-c-avatar--m-md--Width=36px]
- * @cssprop [--pf-c-avatar--m-md--Height=36px]
- * @cssprop [--pf-c-avatar--m-lg--Width=72px]
- * @cssprop [--pf-c-avatar--m-lg--Height=72px]
- * @cssprop [--pf-c-avatar--m-xl--Width=28px]
- * @cssprop [--pf-c-avatar--m-xl--Height=28px]
  */
 export declare class PfAvatar extends LitElement {
     #private;