@salla.sa/ui-ai-kit-core 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-DLJcLHFH.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"isMobile":[32]},null,{"position":[{"positionChanged":0}]}]]],["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/ui-ai-kit.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-DLJcLHFH.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('ui-ai-kit.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["ai-chat-container.cjs",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"isMobile":[32]},null,{"position":[{"positionChanged":0}]}]]],["ai-message-input.cjs",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"inputValue":[32],"setInputValue":[64]}]]],["ai-voice-input.cjs",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"state":[32],"error":[32],"recordingDuration":[32]}]]],["ai-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-chat-header.cjs",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"]}]]],["ai-chat-message.cjs",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"steps":[1],"headerTitle":[1,"header-title"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[32]}]]],["ai-suggestion.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-icon.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,23 @@
+{
+  "entries": [
+    "components/ai-loading/ai-loading.js",
+    "components/ai-rating/ai-rating.js",
+    "components/ai-card/ai-card.js",
+    "components/ai-chat-container/ai-chat-container.js",
+    "components/ai-chat-header/ai-chat-header.js",
+    "components/ai-chat-message/ai-chat-message.js",
+    "components/ai-icon/ai-icon.js",
+    "components/ai-link/ai-link.js",
+    "components/ai-message-input/ai-message-input.js",
+    "components/ai-suggestion/ai-suggestion.js",
+    "components/ai-voice-input/ai-voice-input.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/ai-card/ai-card.css

@@ -0,0 +1,40 @@
+/* ─── Custom Properties ──────────────────────────────────────────────────── */
+:host {
+  --ai-card-bg:      var(--ai-bg-card, #ffffff);
+  --ai-card-border:  1px solid var(--ai-border-default, #eeeeee);
+  --ai-card-radius:  16px;
+  --ai-card-padding: 16px;
+  --ai-card-gap:     12px;
+  --ai-card-shadow:  0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+  --ai-text-color:   var(--ai-text-primary, #333333);
+  display: block;
+  direction: rtl;
+}
+
+/* ─── Card Shell ─────────────────────────────────────────────────────────── */
+.card {
+  background: var(--ai-card-bg);
+  border: var(--ai-card-border);
+  border-radius: var(--ai-card-radius);
+  padding: var(--ai-card-padding);
+  box-shadow: var(--ai-card-shadow);
+  box-sizing: border-box;
+  overflow: hidden;
+    color: var(--ai-text-color);
+  width: 100%;
+  /* Inner layout — flex column so slotted children stack with consistent gap */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-card-gap);
+  text-align: right;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.card--no-padding {
+  padding: 0;
+}
+
+.card--no-shadow {
+  box-shadow: none;
+}

package/dist/collection/components/ai-card/ai-card.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class AiCard {
+    /** Remove the default padding */
+    noPadding = false;
+    /** Remove the shadow */
+    noShadow = false;
+    render() {
+        return (h(Host, { key: '4805b02b4eee8e01d0233de788a58770a85db2aa' }, h("div", { key: '75576f8a791fc49c3a750d491b0e835d0e5ce8cb', class: {
+                card: true,
+                'card--no-padding': this.noPadding,
+                'card--no-shadow': this.noShadow,
+            } }, h("slot", { key: 'e16cdb10e803451fdd47006a98656168fe2495f4' }))));
+    }
+    static get is() { return "ai-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "noPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remove the default padding"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            },
+            "noShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remove the shadow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-shadow",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/ai-card/ai-card.stories.js

@@ -0,0 +1,52 @@
+import { html } from "lit";
+const meta = {
+    title: 'UI/Card',
+    component: 'ai-card',
+    tags: ['autodocs'],
+    argTypes: {
+        noPadding: { control: 'boolean' },
+        noShadow: { control: 'boolean' },
+    },
+};
+export default meta;
+const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;';
+/* ─── AI Reply (matches Figma node 1422-47585) ───────────────────────────── */
+export const AiReply = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card>
+        <p style="margin:0; font-size:14px; font-weight:500; color:#333; line-height:20px;">
+          أهلاً بك في ذكاء سلة الاصطناعي!
+        </p>
+        <p style="margin:0; font-size:14px; color:#737373; line-height:20px;">
+          أنا هنا لمساعدتك في إنشاء شرائح عملاء قوية لحملاتك التسويقية باستخدام لغة بسيطة وتفاعلية.
+        </p>
+        <p style="margin:0; font-size:14px; color:#737373; line-height:20px;">
+          يمكنك أن تطلب مني العثور على العملاء بناءً على تاريخ مشترياتهم، مثل "أظهر لي كل من اشترى الشهر الماضي." ما نوع الجمهور الذي ترغب في بنائه اليوم؟
+        </p>
+      </ai-card>
+    </div>
+  `,
+};
+/* ─── With Rating (Figma node 1532-65078) ────────────────────────────────── */
+export const WithRating = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card>
+        <ai-rating></ai-rating>
+      </ai-card>
+    </div>
+  `,
+};
+/* ─── No Padding ─────────────────────────────────────────────────────────── */
+export const NoPadding = {
+    render: () => html `
+    <div style="${wrapStyle}">
+      <ai-card no-padding>
+        <div style="padding:16px; background:#f4f4f4; color:#333; font-size:14px;">
+          محتوى بدون padding من البطاقة
+        </div>
+      </ai-card>
+    </div>
+  `,
+};

package/dist/collection/components/ai-chat-container/ai-chat-container.css

@@ -0,0 +1,137 @@
+:host {
+  display: contents;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────────────── */
+
+.chat-container {
+  font-family: var(--ai-font-family, 'PingARLT', sans-serif);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--ai-container-bg, var(--ai-bg-card, white));
+  border: 1px solid var(--border-default, var(--ai-border-default, #eee));
+  z-index: 50;
+  box-sizing: border-box;
+}
+
+/* ── Messages scroll area ────────────────────────────────────────────────── */
+
+.messages-area {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15)) transparent;
+}
+
+.messages-area::-webkit-scrollbar {
+  width: 3px;
+}
+
+.messages-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.messages-area::-webkit-scrollbar-thumb {
+  background: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15));
+  border-radius: 99px;
+}
+
+.messages-area::-webkit-scrollbar-thumb:hover {
+  background: var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.28));
+}
+
+/* ── Sticky modes (left / right) ─────────────────────────────────────────── */
+
+.chat-container.left,
+.chat-container.right {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chat-container.left {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.chat-container.right {
+  right: 0;
+  transform: translateX(100%);
+}
+
+.chat-container.left.open,
+.chat-container.right.open {
+  transform: translateX(0);
+}
+
+/* ── Float mode ──────────────────────────────────────────────────────────── */
+
+.chat-container.float {
+  position: fixed;
+  top: 24px;
+  left: 24px;
+  border-radius: 16px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  display: none;
+}
+
+.chat-container.float.open {
+  display: flex;
+}
+
+/* ── Watermark (empty / idle state) ──────────────────────────────────────── */
+
+.watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.watermark ai-icon {
+  opacity: 0.8;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
+}
+
+/* ── Mobile ──────────────────────────────────────────────────────────────── */
+
+.chat-container.mobile {
+  width: 100% !important;
+}
+
+.chat-container.float.mobile {
+  left: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  height: 100% !important;
+  border-radius: 0 !important;
+}
+
+@media (max-width: 767px) {
+  .chat-container {
+    width: 100% !important;
+  }
+
+  .chat-container.float {
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+  }
+}
+
+/* ── Dark mode watermark tweak ───────────────────────────────────────────── */
+
+:host(.dark) .watermark ai-icon {
+  opacity: 0.6;
+}

package/dist/collection/components/ai-chat-container/ai-chat-container.js

@@ -0,0 +1,270 @@
+import { h, Host } from "@stencil/core";
+export class ChatContainer {
+    el;
+    /** Controls visibility of the chat panel */
+    isOpen = false;
+    /** Position of the panel: 'left', 'right', or 'float' */
+    position = 'right';
+    /** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
+    width = '28rem';
+    /** Enable/disable auto-scroll to latest message */
+    autoScroll = true;
+    /** Show AI watermark in the top half of the container */
+    showWatermark = false;
+    /** Height of the panel when position='float' */
+    floatHeight = '600px';
+    isMobile = false;
+    containerRef;
+    dragState = null;
+    resizeObserver;
+    componentWillLoad() {
+        this.checkMobile();
+    }
+    componentDidLoad() {
+        if (typeof window !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkMobile();
+            });
+            this.resizeObserver.observe(document.body);
+            if (this.position === 'float') {
+                this.setupDrag();
+            }
+        }
+    }
+    positionChanged(newVal) {
+        if (newVal === 'float') {
+            this.setupDrag();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    checkMobile() {
+        if (typeof window !== 'undefined') {
+            this.isMobile = window.innerWidth < 768;
+        }
+    }
+    setupDrag() {
+        const container = this.containerRef;
+        if (!container)
+            return;
+        // Listen on the host element so composed events from ai-chat-header's shadow DOM
+        // are received. (composedPath() hides cross-shadow-root elements from shadow listeners.)
+        this.el.addEventListener('headerDragStart', (e) => {
+            const { clientX, clientY } = e.detail;
+            const rect = container.getBoundingClientRect();
+            this.dragState = {
+                startX: clientX,
+                startY: clientY,
+                initLeft: rect.left,
+                initTop: rect.top,
+            };
+            // Switch from bottom/right anchoring to top/left so we can move freely
+            container.style.right = 'auto';
+            container.style.bottom = 'auto';
+            container.style.left = `${rect.left}px`;
+            container.style.top = `${rect.top}px`;
+            const onMove = (me) => {
+                if (!this.dragState)
+                    return;
+                const dx = me.clientX - this.dragState.startX;
+                const dy = me.clientY - this.dragState.startY;
+                let newLeft = this.dragState.initLeft + dx;
+                let newTop = this.dragState.initTop + dy;
+                // Clamp to viewport edges
+                const vw = window.innerWidth;
+                const vh = window.innerHeight;
+                const w = container.offsetWidth;
+                const h = container.offsetHeight;
+                newLeft = Math.max(0, Math.min(newLeft, vw - w));
+                newTop = Math.max(0, Math.min(newTop, vh - h));
+                container.style.left = `${newLeft}px`;
+                container.style.top = `${newTop}px`;
+            };
+            const onUp = () => {
+                this.dragState = null;
+                document.removeEventListener('pointermove', onMove);
+                document.removeEventListener('pointerup', onUp);
+            };
+            document.addEventListener('pointermove', onMove);
+            document.addEventListener('pointerup', onUp);
+        });
+    }
+    getContainerClasses() {
+        const classes = ['chat-container', this.position];
+        if (this.isOpen) {
+            classes.push('open');
+        }
+        if (this.isMobile) {
+            classes.push('mobile');
+        }
+        return classes.join(' ');
+    }
+    getContainerStyle() {
+        const style = {};
+        if (this.isMobile) {
+            return style;
+        }
+        if (this.position === 'float') {
+            style.width = this.width;
+            style.height = this.floatHeight;
+        }
+        else {
+            style.width = this.width;
+        }
+        return style;
+    }
+    render() {
+        return (h(Host, { key: '5048010bf45a26985c92bfb9a6caf01d8aa938c0' }, h("div", { key: '08491cff2361071bc0635914cc665281b80321ac', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '366140a61929689fc522dddfb1485bbd4d2cbef9', class: "watermark" }, h("ai-icon", { key: '5e210929feeb519889344385fa2fb75373ff8fed', name: "watermark", size: 133 }))), h("slot", { key: '57eef4d0c273009feeeb4f03400e05352acdf6cd', name: "header" }), h("div", { key: '15b14f49819f886ce1d56de87c770bb7241dcd77', class: "messages-area" }, h("slot", { key: '050cd0fde5bc3de75df0747031dc84214c125d5d' })), h("slot", { key: '195ab33291da775299e0d7c0c53df92fcf46a4ca', name: "footer" }))));
+    }
+    static get is() { return "ai-chat-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ai-chat-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ai-chat-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility of the chat panel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'float'",
+                    "resolved": "\"float\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the panel: 'left', 'right', or 'float'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'right'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the panel (CSS value, e.g., '400px', '30%', '28rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'28rem'"
+            },
+            "autoScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable/disable auto-scroll to latest message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-scroll",
+                "defaultValue": "true"
+            },
+            "showWatermark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show AI watermark in the top half of the container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-watermark",
+                "defaultValue": "false"
+            },
+            "floatHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the panel when position='float'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "float-height",
+                "defaultValue": "'600px'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "position",
+                "methodName": "positionChanged"
+            }];
+    }
+}