@skf-design-system/ui-components 0.0.1-beta.1

package/dist/components/tag/tag.component.d.ts

@@ -0,0 +1,27 @@
+import '@components/icon/icon.js';
+import { SkfElement } from '@internal/components/skf-element';
+import type { Icon, SeverityBgColor } from '@skf-aurora/ui-assets';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-tag>` is a component that displays a list of actions or options
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/28bdd6-tags) for design principles
+ *
+ * @slot - The component's placeholder content
+ *
+ * @tagname skf-tag
+ */
+export declare class SkfTag extends SkfElement {
+    static styles: CSSResultGroup;
+    /** Specifies Tag size - @default "md" */
+    size: 'sm' | 'md' | 'lg';
+    /** If defined, displays leading/provided icon - @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" } */
+    icon?: Icon;
+    /** If defined, gives the supplied appearance - @type {  "warning" | "success" | "info" | "error" | "alert" } */
+    color?: SeverityBgColor;
+    /** If true, adds trailing button to remove tag */
+    removable?: boolean;
+    /** @internal */
+    private _remove;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,8 @@
+import { SkfTag } from './tag.component';
+export * from './tag.component';
+export default SkfTag;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-tag': SkfTag;
+    }
+}

package/dist/components/tag/tag.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/textarea/textarea.component.d.ts

@@ -0,0 +1,83 @@
+import '@components/icon/icon.js';
+import { FormBase } from '@internal/components/formBase.js';
+import '@internal/components/hint/hint.js';
+import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { type CSSResultGroup } from 'lit';
+interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
+    cols?: number;
+    maxLength?: number;
+    minLength?: number;
+    rows?: number;
+}
+/**
+ * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ *
+ * @attribute {boolean} disabled - If true, sets disabled state
+ * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ *
+ * @event change - Fires when the value of the input changes
+ * @event invalid - Fires when the input is invalid
+ *
+ * @slot The textareas label. Alternatively, you can use the `label` attribute.
+ *
+ * @tagname skf-textarea
+ */
+export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
+    static styles: CSSResultGroup;
+    private customError;
+    /** If provided, sets the cols of the textarea */
+    cols?: number | undefined;
+    /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+    set customInvalid(value: string | undefined);
+    get customInvalid(): string | undefined;
+    /** If provided, outputs helping hints in console */
+    debug: boolean;
+    /** hide-label - If true, hides the label visually */
+    hideLabel: boolean;
+    /** If provided, displays informational text below the field */
+    hint?: string;
+    /** The input's label. Alternatively, you can use the component slot. */
+    label: string;
+    /** If provided, adds name to the input-element */
+    name?: string;
+    /** If provided, sets the maximum character length to accept for this input */
+    maxLength?: number;
+    /** If provided, sets the minimum character length to accept for this input */
+    minLength?: number;
+    /** If provided, displays placeholder text */
+    placeholder?: string;
+    /** If true, makes the element not mutable, meaning the user can not edit the control */
+    readonly?: boolean;
+    /** If provided, renders an alternative A11y text for the asterisk */
+    requiredLabel?: string;
+    /** If provided, sets the rows of the textarea */
+    rows?: number | undefined;
+    /** @type { "success" | "error" } - If provided, displays provided severity state */
+    severity?: SkfTextAreaProps['severity'];
+    /** If true, displays valid state after interaction */
+    showValid?: boolean;
+    /** If provided, displays an alternative size */
+    size?: 'sm' | 'md';
+    /** If provided, sets validation start, "input", "change" or "submit" */
+    validateOn?: 'input' | 'change' | 'submit';
+    /** The current value of the text area  */
+    value: string;
+    /** @internal */
+    /** true if the internal state is invalid  */
+    invalid: boolean;
+    /** @internal */
+    private $input;
+    firstUpdated(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** @internal */
+    _resetValue: (event: Event) => void;
+    /** @internal */
+    _handleInput: () => void;
+    /** @internal */
+    validateInput(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,8 @@
+import { SkfTextArea } from './textarea.component.js';
+export * from './textarea.component.js';
+export default SkfTextArea;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-textarea': SkfTextArea;
+    }
+}

package/dist/components/textarea/textarea.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;