@webitel/styleguide 1.0.12 → 1.0.17

package/src/wt-flow-diagram/styleguide/colors/_colors.scss

@@ -1,234 +1,234 @@
-#wt-flow-diagram {
-  --flow-light-level-12: 90%;
-
-  //  TEXT colors
-  --flow-on-dark-text-color: var(--grey-lighten-5);
-  --flow-on-light-text-color: var(--grey-darken-3);
-
-  //  SOCKET colors
-  --flow-conection-point-color: var(--dp-22-surface-color);
-  --flow-conection-point-border-color: var(--dp-16-surface-color);
-
-  // GENERAL APPS
-  // Calendar
-  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
-
-  // Execute
-  --flow-execute-header-bg-color: var(--orange-lighten-2);
-
-  // Function
-  --flow-function-header-bg-color: var(--orange-lighten-2);
-
-  // Goto
-  --flow-goto-header-bg-color: var(--red-darken-1);
-
-  //  If
-  --flow-if-header-bg-color: var(--pink-lighten-2);
-
-  //  IFrame
-  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
-
-  //  Script
-  --flow-js-header-bg-color: var(--amber-accent-3);
-
-  // Math
-  --flow-math-header-bg-color: var(--deep-orange-accent-2);
-
-  // String
-  --flow-string-header-bg-color: var(--light-green-darken-3);
-
-  // MarkIVR
-  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
-
-  // softSleep
-  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
-
-  // setGrantee
-  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
-
-  // schema
-  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
-
-  // log
-  --flow-log-header-bg-color: var(--amber-lighten-1);
-
-  // Start
-  --flow-start-header-bg-color: var(--green-darken-3);
-
-  // Switch
-  --flow-switch-header-bg-color: var(--purple-lighten-1);
-
-  // Trigger
-  --flow-trigger-header-bg-color: var(--red-lighten-1);
-
-  // HttpRequest
-  --flow-http-header-bg-color: var(--pink-lighten-2);
-
-  //  Custom code
-  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
-
-  //  Export variables code
-  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
-
-  //  Set variables code
-  --flow-set-var-header-bg-color: var(--amber-lighten-1);
-
-  //  Un set variables code
-  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
-
-  //  List code
-  --flow-list-header-bg-color: var(--light-blue-darken-3);
-
-  //  List Add code
-  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
-
-  // Get Email
-  --flow-get-email-header-bg-color: var(--cyan-darken-4);
-
-  // CALL APPS
-  // playback
-  --flow-playback-header-bg-color: var(--orange-lighten-1);
-
-  //  Ring ready
-  --flow-ring-ready-header-bg-color: var(--green-darken-3);
-
-  //  Pre answer
-  --flow-pre-answer-header-bg-color: var(--green-darken-3);
-
-  //  Answer
-  --flow-answer-header-bg-color: var(--green-darken-3);
-
-  //  Hangup
-  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
-
-  //  Sip redirect
-  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
-
-  //  Ringback
-  --flow-ringback-header-bg-color: var(--green-darken-3);
-
-  //  Bridge
-  --flow-bridge-header-bg-color: var(--orange-lighten-2);
-
-  //  Conference
-  --flow-conference-header-bg-color: var(--cyan-lighten-3);
-
-  //  Generate link
-  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
-
-  //  In Band DTMF
-  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
-
-  // Flush DTMF
-  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
-
-  //  Update Cid
-  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
-
-  //  Park
-  --flow-park-header-bg-color: var(--cyan-lighten-3);
-
-  //  Join Queue
-  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
-
-  //  Record File
-  --flow-record-file-header-bg-color: var(--green-lighten-3);
-
-  //  Record Session
-  --flow-record-session-header-bg-color: var(--green-lighten-2);
-
-  // TTS
-  --flow-tts-header-bg-color: var(--purple-darken-1);
-
-  // CHAT APPS
-  // Recv Message
-  --flow-recv-message-header-bg-color: var(--blue-accent-4);
-
-  //  Send Text
-  --flow-send-text-header-bg-color: var(--orange-accent-3);
-
-  //  Send TTS
-  --flow-send-tts-header-bg-color: var(--purple-darken-1);
-
-  //  Send File
-  --flow-send-file-header-bg-color: var(--purple-accent-3);
-
-  //  STT
-  --flow-stt-header-bg-color: var(--orange-lighten-1);
-
-  //  Send Email
-  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
-
-  //  Send Message
-  --flow-send-message-header-bg-color: var(--blue-darken-1);
-
-  //  Broadcast Chat Message
-  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
-
-  //  Classifier
-  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
-
-  //  Menu
-  --flow-menu-header-bg-color: var(--amber-lighten-3);
-
-  // Plata by mono
-  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
-
-  //  User Info
-  --flow-user-info-header-bg-color: var(--green-accent-2);
-
-  // Member info
-  --flow-member-info-header-bg-color: var(--purple-lighten-1);
-
-  // Get queue agents
-  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
-
-  // Join Agent
-  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
-
-  // Callback queue
-  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
-
-  // Patch members
-  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
-
-  // PROCESSING
-  // Form textfield
-  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
-
-  // Form text
-  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
-
-  // Form select
-  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
-
-  // Form datetime picker
-  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
-
-  // Form rich text editor
-  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
-
-  // Generate form
-  --flow-generate-form-header-bg-color: var(--blue-accent-4);
-
-  // Attempt result
-  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
-
-  // Form file
-  --flow-form-file-header-bg-color: var(--blue-lighten-2);
-
-  // Chat history
-  --flow-chat-history-header-bg-color: var(--amber-accent-2);
-
-  // Chat history
-  --flow-while-header-bg-color: var(--deep-purple-darken-4);
-
-  // ChatAI
-  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
-
-  // Notification
-  --flow-notification-header-bg-color: var(--pink-lighten-1);
-
-  // Custom module
-  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
-}
+#wt-flow-diagram {
+  --flow-light-level-12: 90%;
+
+  //  TEXT colors
+  --flow-on-dark-text-color: var(--grey-lighten-5);
+  --flow-on-light-text-color: var(--grey-darken-3);
+
+  //  SOCKET colors
+  --flow-conection-point-color: var(--dp-22-surface-color);
+  --flow-conection-point-border-color: var(--dp-16-surface-color);
+
+  // GENERAL APPS
+  // Calendar
+  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
+
+  // Execute
+  --flow-execute-header-bg-color: var(--orange-lighten-2);
+
+  // Function
+  --flow-function-header-bg-color: var(--orange-lighten-2);
+
+  // Goto
+  --flow-goto-header-bg-color: var(--red-darken-1);
+
+  //  If
+  --flow-if-header-bg-color: var(--pink-lighten-2);
+
+  //  IFrame
+  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
+
+  //  Script
+  --flow-js-header-bg-color: var(--amber-accent-3);
+
+  // Math
+  --flow-math-header-bg-color: var(--deep-orange-accent-2);
+
+  // String
+  --flow-string-header-bg-color: var(--light-green-darken-3);
+
+  // MarkIVR
+  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
+
+  // softSleep
+  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
+
+  // setGrantee
+  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
+
+  // schema
+  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
+
+  // log
+  --flow-log-header-bg-color: var(--amber-lighten-1);
+
+  // Start
+  --flow-start-header-bg-color: var(--green-darken-3);
+
+  // Switch
+  --flow-switch-header-bg-color: var(--purple-lighten-1);
+
+  // Trigger
+  --flow-trigger-header-bg-color: var(--red-lighten-1);
+
+  // HttpRequest
+  --flow-http-header-bg-color: var(--pink-lighten-2);
+
+  //  Custom code
+  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
+
+  //  Export variables code
+  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
+
+  //  Set variables code
+  --flow-set-var-header-bg-color: var(--amber-lighten-1);
+
+  //  Un set variables code
+  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
+
+  //  List code
+  --flow-list-header-bg-color: var(--light-blue-darken-3);
+
+  //  List Add code
+  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
+
+  // Get Email
+  --flow-get-email-header-bg-color: var(--cyan-darken-4);
+
+  // CALL APPS
+  // playback
+  --flow-playback-header-bg-color: var(--orange-lighten-1);
+
+  //  Ring ready
+  --flow-ring-ready-header-bg-color: var(--green-darken-3);
+
+  //  Pre answer
+  --flow-pre-answer-header-bg-color: var(--green-darken-3);
+
+  //  Answer
+  --flow-answer-header-bg-color: var(--green-darken-3);
+
+  //  Hangup
+  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
+
+  //  Sip redirect
+  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
+
+  //  Ringback
+  --flow-ringback-header-bg-color: var(--green-darken-3);
+
+  //  Bridge
+  --flow-bridge-header-bg-color: var(--orange-lighten-2);
+
+  //  Conference
+  --flow-conference-header-bg-color: var(--cyan-lighten-3);
+
+  //  Generate link
+  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
+
+  //  In Band DTMF
+  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
+
+  // Flush DTMF
+  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
+
+  //  Update Cid
+  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
+
+  //  Park
+  --flow-park-header-bg-color: var(--cyan-lighten-3);
+
+  //  Join Queue
+  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
+
+  //  Record File
+  --flow-record-file-header-bg-color: var(--green-lighten-3);
+
+  //  Record Session
+  --flow-record-session-header-bg-color: var(--green-lighten-2);
+
+  // TTS
+  --flow-tts-header-bg-color: var(--purple-darken-1);
+
+  // CHAT APPS
+  // Recv Message
+  --flow-recv-message-header-bg-color: var(--blue-accent-4);
+
+  //  Send Text
+  --flow-send-text-header-bg-color: var(--orange-accent-3);
+
+  //  Send TTS
+  --flow-send-tts-header-bg-color: var(--purple-darken-1);
+
+  //  Send File
+  --flow-send-file-header-bg-color: var(--purple-accent-3);
+
+  //  STT
+  --flow-stt-header-bg-color: var(--orange-lighten-1);
+
+  //  Send Email
+  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
+
+  //  Send Message
+  --flow-send-message-header-bg-color: var(--blue-darken-1);
+
+  //  Broadcast Chat Message
+  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
+
+  //  Classifier
+  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
+
+  //  Menu
+  --flow-menu-header-bg-color: var(--amber-lighten-3);
+
+  // Plata by mono
+  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
+
+  //  User Info
+  --flow-user-info-header-bg-color: var(--green-accent-2);
+
+  // Member info
+  --flow-member-info-header-bg-color: var(--purple-lighten-1);
+
+  // Get queue agents
+  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
+
+  // Join Agent
+  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
+
+  // Callback queue
+  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
+
+  // Patch members
+  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
+
+  // PROCESSING
+  // Form textfield
+  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
+
+  // Form text
+  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
+
+  // Form select
+  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
+
+  // Form datetime picker
+  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
+
+  // Form rich text editor
+  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
+
+  // Generate form
+  --flow-generate-form-header-bg-color: var(--blue-accent-4);
+
+  // Attempt result
+  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
+
+  // Form file
+  --flow-form-file-header-bg-color: var(--blue-lighten-2);
+
+  // Chat history
+  --flow-chat-history-header-bg-color: var(--amber-accent-2);
+
+  // Chat history
+  --flow-while-header-bg-color: var(--deep-purple-darken-4);
+
+  // ChatAI
+  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
+
+  // Notification
+  --flow-notification-header-bg-color: var(--pink-lighten-1);
+
+  // Custom module
+  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
+}

package/src/wt-flow-diagram/styleguide/shadows/_shadows.scss

@@ -1,12 +1,12 @@
-#wt-flow-diagram {
-  --elevation-1:  0px 1px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-2:  0px 2px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-3:  0px 3px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-4:  0px 4px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-5:  0px 5px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-6:  0px 6px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-7:  0px 7px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-8:  0px 8px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-9:  0px 9px 10px hsla(0, 0%, 0%, 0.15);
-  --elevation-10:  0px 10px 10px hsla(0, 0%, 0%, 0.15);
-}
+#wt-flow-diagram {
+  --elevation-1:  0px 1px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-2:  0px 2px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-3:  0px 3px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-4:  0px 4px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-5:  0px 5px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-6:  0px 6px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-7:  0px 7px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-8:  0px 8px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-9:  0px 9px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-10:  0px 10px 10px hsla(0, 0%, 0%, 0.15);
+}

package/src/wt-flow-diagram/styleguide/spacings/_spacing.scss

@@ -1,31 +1,31 @@
-#wt-flow-diagram {
-  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
-  наприклад, `<wt-input>`, margin яких = 10px, тому у даному випадку я використав
-  змінну `--body-block-margin` , яка також = 10px.
- Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
-  --body-block-margin: 10px;
-
-  // Workspace specific spacings
-  --workspace-content-offset-top: var(--spacing-xs);
-  --workspace-content-offset-bottom: var(--spacing-xs);
-  --workspace-content-offset-side: var(--spacing-xs);
-  --nodes-panel-width: 260px;
-  --config-panel-width: -16px; // invisible config panel width is -16 to compensate minimap offset from side + from config panel itself
-  --min-flow-toolbar-width: 491px;
-  --flow-toolbar-height: 56px;
-  --flow-pages-height: 56px;
-  --zoom-panel-width: 227px;
-  --zoom-panel-height: calc(
-    2 * var(--spacing-sm)
-    + var(--icon-md-size)
-  ); // should directly set height to setup minimap bottom offset
-
-  @media only screen and (max-width: $viewport-sm) {
-    --flow-toolbar-height: 88px;
-  }
-
-  @media only screen and (max-width: $viewport-xs) {
-    --flow-toolbar-height: 136px;
-  }
-}
-
+#wt-flow-diagram {
+  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
+  наприклад, `<wt-input>`, margin яких = 10px, тому у даному випадку я використав
+  змінну `--body-block-margin` , яка також = 10px.
+ Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
+  --body-block-margin: 10px;
+
+  // Workspace specific spacings
+  --workspace-content-offset-top: var(--spacing-xs);
+  --workspace-content-offset-bottom: var(--spacing-xs);
+  --workspace-content-offset-side: var(--spacing-xs);
+  --nodes-panel-width: 260px;
+  --config-panel-width: -16px; // invisible config panel width is -16 to compensate minimap offset from side + from config panel itself
+  --min-flow-toolbar-width: 491px;
+  --flow-toolbar-height: 56px;
+  --flow-pages-height: 56px;
+  --zoom-panel-width: 227px;
+  --zoom-panel-height: calc(
+    2 * var(--spacing-sm)
+    + var(--icon-md-size)
+  ); // should directly set height to setup minimap bottom offset
+
+  @media only screen and (max-width: $viewport-sm) {
+    --flow-toolbar-height: 88px;
+  }
+
+  @media only screen and (max-width: $viewport-xs) {
+    --flow-toolbar-height: 136px;
+  }
+}
+