<commit_before><docs>
  # lock

  Append a lock button to an input. The input will be locked until the user clicks the lock button. This provides a small amount of friction before editing important (and rarely-edited) fields, similar to macOS's system preferences.
</docs>

<style lang="sass">
  @import '../styleguide/buttons';

  @keyframes jiggle {
    0%, 100% {transform: rotate(0deg);}
    20%, 60% {transform: rotate(-10deg);}
    40%, 80% {transform: rotate(10deg);}
  }

  .lock-button {
    @include button-outlined($input-border, $input-background);

    border-bottom-left-radius: 0;
    border-left: none;
    border-top-left-radius: 0;
    clear: right;
    float: right;
    height: 48px; // to match inputs
    margin: 0;
    padding: 6px 10px 4px;
    position: relative;
    right: 0;
    top: 0; // allow 1px for border
    width: 44px; // explicit width, see below

    svg {
      height: 24px;
      width: 17px;
    }

    .locked {
      display: block;
    }

    .unlocked {
      display: none;
    }

    &.unlocked {
      padding-top: 4px;

      .locked {
        display: none;
      }

      .unlocked {
        display: block;
      }
    }

    &.jiggle .locked {
      animation-name: jiggle;
      animation-duration: 600ms;
      animation-fill-mode: both;
    }
  }
</style>

<template>
  <button class="lock-button" :class="{ unlocked: !locked }" @click.stop="toggleLock">
    <icon name="locked" class="locked"></icon>
    <icon name="unlocked" class="unlocked"></icon>
  </button>
</template>

<script>
  import { getInput } from '../lib/forms/field-helpers';
  import icon from '../lib/utils/icon.vue';

  function jiggle(input, el) {
    el.classList.add('jiggle'); // trigger the jiggle animation
    setTimeout(() => el.classList.remove('jiggle'), 601); // length of the animation + 1
  }

  function lock(input, el) {
    input.setAttribute('disabled', true);<commit_msg>stop lock click from closing forms<commit_after><docs>
  # lock

  Append a lock button to an input. The input will be locked until the user clicks the lock button. This provides a small amount of friction before editing important (and rarely-edited) fields, similar to macOS's system preferences.
</docs>

<style lang="sass">
  @import '../styleguide/buttons';

  @keyframes jiggle {
    0%, 100% {transform: rotate(0deg);}
    20%, 60% {transform: rotate(-10deg);}
    40%, 80% {transform: rotate(10deg);}
  }

  .lock-button {
    @include button-outlined($input-border, $input-background);

    border-bottom-left-radius: 0;
    border-left: none;
    border-top-left-radius: 0;
    clear: right;
    float: right;
    height: 48px; // to match inputs
    margin: 0;
    padding: 6px 10px 4px;
    position: relative;
    right: 0;
    top: 0; // allow 1px for border
    width: 44px; // explicit width, see below

    svg {
      height: 24px;
      width: 17px;
    }

    .locked {
      display: block;
    }

    .unlocked {
      display: none;
    }

    &.unlocked {
      padding-top: 4px;

      .locked {
        display: none;
      }

      .unlocked {
        display: block;
      }
    }

    &.jiggle .locked {
      animation-name: jiggle;
      animation-duration: 600ms;
      animation-fill-mode: both;
    }
  }
</style>

<template>
  <button class="lock-button" :class="{ unlocked: !locked }" @click.stop.prevent="toggleLock">
    <icon name="locked" class="locked"></icon>
    <icon name="unlocked" class="unlocked"></icon>
  </button>
</template>

<script>
  import { getInput } from '../lib/forms/field-helpers';
  import icon from '../lib/utils/icon.vue';

  function jiggle(input, el) {
    el.classList.add('jiggle'); // trigger the jiggle animation
    setTimeout(() => el.classList.remove('jiggle'), 601); // length of the animation + 1
  }

  function lock(input, el) {
    input.setAttribute('disabled', true);
{'fraction_non_alphanumeric': 0.14359637774902975, 'fraction_numerical': 0.0222509702457956, 'mean_word_length': 2.636876763875823, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '305164', 'n_tokens_mistral': 1348, 'n_tokens_neox': 1239, 'n_words': 350}